[ { "__docId__": 1, "kind": "external", "name": "Infinity", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Infinity", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 2, "kind": "external", "name": "NaN", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~NaN", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 3, "kind": "external", "name": "undefined", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~undefined", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 4, "kind": "external", "name": "null", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~null", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 5, "kind": "external", "name": "Object", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Object", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 6, "kind": "external", "name": "object", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~object", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 7, "kind": "external", "name": "Function", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Function", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 8, "kind": "external", "name": "function", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~function", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 9, "kind": "external", "name": "Boolean", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Boolean", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 10, "kind": "external", "name": "boolean", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~boolean", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 11, "kind": "external", "name": "Symbol", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Symbol", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 12, "kind": "external", "name": "Error", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Error", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 13, "kind": "external", "name": "EvalError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~EvalError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 14, "kind": "external", "name": "InternalError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~InternalError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 15, "kind": "external", "name": "RangeError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~RangeError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 16, "kind": "external", "name": "ReferenceError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~ReferenceError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 17, "kind": "external", "name": "SyntaxError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~SyntaxError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 18, "kind": "external", "name": "TypeError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~TypeError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 19, "kind": "external", "name": "URIError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~URIError", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 20, "kind": "external", "name": "Number", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Number", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 21, "kind": "external", "name": "number", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~number", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 22, "kind": "external", "name": "Date", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Date", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 23, "kind": "external", "name": "String", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~String", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 24, "kind": "external", "name": "string", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~string", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 25, "kind": "external", "name": "RegExp", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~RegExp", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 26, "kind": "external", "name": "Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 27, "kind": "external", "name": "Int8Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Int8Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 28, "kind": "external", "name": "Uint8Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Uint8Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 29, "kind": "external", "name": "Uint8ClampedArray", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Uint8ClampedArray", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 30, "kind": "external", "name": "Int16Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Int16Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 31, "kind": "external", "name": "Uint16Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Uint16Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 32, "kind": "external", "name": "Int32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Int32Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 33, "kind": "external", "name": "Uint32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Uint32Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 34, "kind": "external", "name": "Float32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Float32Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 35, "kind": "external", "name": "Float64Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Float64Array", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 36, "kind": "external", "name": "Map", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Map", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 37, "kind": "external", "name": "Set", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Set", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 38, "kind": "external", "name": "WeakMap", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~WeakMap", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 39, "kind": "external", "name": "WeakSet", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~WeakSet", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 40, "kind": "external", "name": "ArrayBuffer", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~ArrayBuffer", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 41, "kind": "external", "name": "DataView", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~DataView", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 42, "kind": "external", "name": "JSON", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~JSON", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 43, "kind": "external", "name": "Promise", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Promise", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 44, "kind": "external", "name": "Generator", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Generator", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 45, "kind": "external", "name": "GeneratorFunction", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~GeneratorFunction", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 46, "kind": "external", "name": "Reflect", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Reflect", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 47, "kind": "external", "name": "Proxy", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~Proxy", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 48, "kind": "external", "name": "CustomEvent", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/CustomEvent", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~CustomEvent", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 49, "kind": "external", "name": "HTMLElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 50, "kind": "external", "name": "HTMLAnchorElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLAnchorElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLAnchorElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 51, "kind": "external", "name": "HTMLButtonElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLButtonElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLButtonElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 52, "kind": "external", "name": "HTMLTableElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTableElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTableElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 53, "kind": "external", "name": "HTMLTableSectionElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTableSectionElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTableSectionElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 54, "kind": "external", "name": "HTMLTableCellElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTableCellElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTableCellElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 55, "kind": "external", "name": "HTMLTableRowElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTableRowElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTableRowElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 56, "kind": "external", "name": "HTMLTableColElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTableColElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTableColElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 57, "kind": "external", "name": "HTMLTextAreaElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLTextAreaElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLTextAreaElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 58, "kind": "external", "name": "HTMLInputElement", "externalLink": "https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~HTMLInputElement", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 59, "kind": "external", "name": "momentJS", "externalLink": "https://momentjs.com/", "memberof": "coral-spectrum/.external-ecmascript.js", "static": true, "longname": "coral-spectrum/.external-ecmascript.js~momentJS", "access": "public", "description": "", "builtinExternal": true }, { "__docId__": 60, "kind": "file", "name": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseLabellable} from '../../../coral-base-labellable';\nimport {Icon} from '../../../coral-component-icon';\nimport {transform, validate, commons} from '../../../coral-utils';\n\n/**\n Enumeration for {@link Button}, {@link AnchorButton} icon sizes.\n\n @typedef {Object} ButtonIconSizeEnum\n\n @property {String} EXTRA_EXTRA_SMALL\n Extra extra small size icon, typically 9px size.\n @property {String} EXTRA_SMALL\n Extra small size icon, typically 12px size.\n @property {String} SMALL\n Small size icon, typically 18px size. This is the default size.\n @property {String} MEDIUM\n Medium size icon, typically 24px size.\n */\nconst iconSize = {};\nconst excludedIconSizes = [Icon.size.LARGE, Icon.size.EXTRA_LARGE, Icon.size.EXTRA_EXTRA_LARGE];\nfor (const key in Icon.size) {\n // Populate button icon sizes by excluding the largest icon sizes\n if (excludedIconSizes.indexOf(Icon.size[key]) === -1) {\n iconSize[key] = Icon.size[key];\n }\n}\n\n/**\n Enumeration for {@link Button}, {@link AnchorButton} variants.\n\n @typedef {Object} ButtonVariantEnum\n\n @property {String} CTA\n A button that is meant to grab the user's attention.\n @property {String} PRIMARY\n A button that is meant to grab the user's attention.\n @property {String} QUIET\n A quiet button that indicates that the button's action is the primary action.\n @property {String} SECONDARY\n A button that indicates that the button's action is the secondary action.\n @property {String} QUIET_SECONDARY\n A quiet secondary button.\n @property {String} ACTION\n An action button.\n @property {String} QUIET_ACTION\n A quiet action button.\n @property {String} MINIMAL\n A quiet minimalistic button.\n @property {String} WARNING\n A button that indicates that the button's action is dangerous.\n @property {String} QUIET_WARNING\n A quiet warning button,\n @property {String} OVER_BACKGROUND\n A button to be placed on top of colored background.\n @property {String} DEFAULT\n The default button look and feel.\n */\nconst variant = {\n CTA: 'cta',\n PRIMARY: 'primary',\n SECONDARY: 'secondary',\n QUIET: 'quiet',\n MINIMAL: 'minimal',\n WARNING: 'warning',\n ACTION: 'action',\n QUIET_ACTION: 'quietaction',\n QUIET_SECONDARY: 'quietsecondary',\n QUIET_WARNING: 'quietwarning',\n OVER_BACKGROUND: 'overbackground',\n DEFAULT: 'default',\n // Private to be used for custom Button classes like field buttons\n _CUSTOM: '_custom'\n};\n\n// the button's base classname\nconst CLASSNAME = '_coral-Button';\nconst ACTION_CLASSNAME = '_coral-ActionButton';\n\nconst ALL_VARIANT_CLASSES = [\n `${CLASSNAME}--cta`,\n `${CLASSNAME}--primary`,\n `${CLASSNAME}--secondary`,\n `${CLASSNAME}--warning`,\n `${CLASSNAME}--quiet`,\n `${ACTION_CLASSNAME}--quiet`,\n `${CLASSNAME}--overBackground`,\n];\n\nconst VARIANT_MAP = {\n cta: [CLASSNAME, ALL_VARIANT_CLASSES[0]],\n primary: [CLASSNAME, ALL_VARIANT_CLASSES[0]],\n secondary: [CLASSNAME, ALL_VARIANT_CLASSES[2]],\n warning: [CLASSNAME, ALL_VARIANT_CLASSES[3]],\n quiet: [CLASSNAME, ALL_VARIANT_CLASSES[1], ALL_VARIANT_CLASSES[4]],\n minimal: [CLASSNAME, ALL_VARIANT_CLASSES[2], ALL_VARIANT_CLASSES[4]],\n default: [CLASSNAME, ALL_VARIANT_CLASSES[1]],\n action: [ACTION_CLASSNAME],\n quietaction: [ACTION_CLASSNAME, ALL_VARIANT_CLASSES[5]],\n quietsecondary: [CLASSNAME, ALL_VARIANT_CLASSES[2], ALL_VARIANT_CLASSES[4]],\n quietwarning: [CLASSNAME, ALL_VARIANT_CLASSES[3], ALL_VARIANT_CLASSES[4]],\n overbackground: [CLASSNAME, ALL_VARIANT_CLASSES[6]]\n};\n\n/**\n Enumeration for {@link BaseButton} sizes.\n\n @typedef {Object} ButtonSizeEnum\n\n @property {String} MEDIUM\n A medium button is the default, normal sized button.\n @property {String} LARGE\n Not supported. Falls back to MEDIUM.\n */\nconst size = {\n MEDIUM: 'M',\n LARGE: 'L'\n};\n\n/**\n Enumeration for {@link BaseButton} icon position options.\n\n @typedef {Object} ButtonIconPositionEnum\n\n @property {String} RIGHT\n Position should be right of the button label.\n @property {String} LEFT\n Position should be left of the button label.\n */\nconst iconPosition = {\n RIGHT: 'right',\n LEFT: 'left'\n};\n\n/**\n @base BaseButton\n @classdesc The base element for Button components\n */\nconst BaseButton = (superClass) => class extends BaseLabellable(superClass) {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {\n // Create or fetch the label element\n label: this.querySelector(this._contentZoneTagName) || document.createElement(this._contentZoneTagName),\n icon: this.querySelector('coral-icon')\n };\n\n // Events\n this._events = {\n mousedown: '_onMouseDown',\n click: '_onClick'\n };\n\n super._observeLabel();\n }\n\n /**\n The label of the button.\n @type {HTMLElement}\n @contentzone\n */\n get label() {\n return this._getContentZone(this._elements.label);\n }\n\n set label(value) {\n this._setContentZone('label', value, {\n handle: 'label',\n tagName: this._contentZoneTagName,\n insert: function (label) {\n // Update label styles\n this._updateLabel(label);\n\n // Ensure there's no extra space left for icon only buttons\n if (label.innerHTML.trim() === '') {\n label.textContent = '';\n }\n\n if (this.iconPosition === iconPosition.LEFT) {\n this.appendChild(label);\n } else {\n this.insertBefore(label, this.firstChild);\n }\n }\n });\n }\n\n /**\n Position of the icon relative to the label. If no iconPosition is provided, it will be set on the\n left side by default.\n See {@link ButtonIconPositionEnum}.\n\n @type {String}\n @default ButtonIconPositionEnum.LEFT\n @htmlattribute iconposition\n @htmlattributereflected\n */\n get iconPosition() {\n return this._iconPosition || iconPosition.LEFT;\n }\n\n set iconPosition(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(iconPosition)(value) && value || iconPosition.LEFT;\n \n this._reflectAttribute('iconposition', value);\n\n if(validate.valueMustChange(this._iconPosition, value)) {\n this._iconPosition = value;\n this._updateIcon(this.icon);\n }\n }\n\n /**\n Specifies the icon name used inside the button. See {@link Icon} for valid icon names.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n */\n get icon() {\n if (this._elements.icon) {\n return this._elements.icon.getAttribute('icon') || '';\n }\n\n return this._icon || '';\n }\n\n set icon(value) {\n value = transform.string(value);\n if(validate.valueMustChange(this._icon, value)) {\n this._icon = value;\n this._updateIcon(value);\n }\n }\n\n /**\n Size of the icon. It accepts both lower and upper case sizes. See {@link ButtonIconSizeEnum}.\n\n @type {String}\n @default ButtonIconSizeEnum.SMALL\n @htmlattribute iconsize\n */\n get iconSize() {\n if (this._elements.icon) {\n return this._elements.icon.getAttribute('size') || Icon.size.SMALL;\n }\n\n return this._iconSize || Icon.size.SMALL;\n }\n\n set iconSize(value) {\n value = transform.string(value).toUpperCase();\n value = validate.enumeration(Icon.size)(value) && value || Icon.size.SMALL;\n\n if(validate.valueMustChange(this._iconSize, value)) {\n this._iconSize = value;\n this._updatedIcon && this._getIconElement().setAttribute('size', value);\n }\n }\n\n /**\n Whether aria-label is set automatically. See {@link IconAutoAriaLabelEnum}.\n\n @type {String}\n @default IconAutoAriaLabelEnum.OFF\n @htmlattribute autoarialabel\n */\n get iconAutoAriaLabel() {\n if (this._elements.icon) {\n return this._elements.icon.getAttribute('autoarialabel') || Icon.autoAriaLabel.OFF;\n }\n\n return this._iconAutoAriaLabel || Icon.autoAriaLabel.OFF;\n }\n\n set iconAutoAriaLabel(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(Icon.autoAriaLabel)(value) && value || Icon.autoAriaLabel.OFF;\n\n if(validate.valueMustChange(this._iconAutoAriaLabel, value)) {\n this._iconAutoAriaLabel = value;\n this._updatedIcon && this._getIconElement().setAttribute('autoarialabel', value);\n }\n }\n\n /**\n The size of the button. It accepts both lower and upper case sizes. See {@link ButtonSizeEnum}.\n Currently only \"MEDIUM\" is supported.\n\n @type {String}\n @default ButtonSizeEnum.MEDIUM\n @htmlattribute size\n @htmlattributereflected\n */\n get size() {\n return this._size || size.MEDIUM;\n }\n\n set size(value) {\n value = transform.string(value).toUpperCase();\n this._size = validate.enumeration(size)(value) && value || size.MEDIUM;\n \n this._reflectAttribute('size', this._size);\n }\n\n /**\n Whether the button is selected.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n value = transform.booleanAttr(value);\n \n this._reflectAttribute('selected', value);\n\n if(validate.valueMustChange(this._selected, value)) {\n this._selected = value;\n\n this.classList.toggle('is-selected', value);\n \n this.trigger('coral-button:_selectedchanged');\n }\n }\n\n // We just reflect it but we also trigger an event to be used by button group\n /** @ignore */\n get value() {\n return this.getAttribute('value');\n }\n\n set value(value) {\n this._reflectAttribute('value', value);\n\n this.trigger('coral-button:_valuechanged');\n }\n\n /**\n Expands the button to the full width of the parent.\n\n @type {Boolean}\n @default false\n @htmlattribute block\n @htmlattributereflected\n */\n get block() {\n return this._block || false;\n }\n\n set block(value) {\n value = transform.booleanAttr(value);\n \n this._reflectAttribute('block', value);\n\n if(validate.valueMustChange(this._block, value)) {\n this._block = value;\n\n this.classList.toggle(`${CLASSNAME}--block`, value);\n }\n }\n\n /**\n The button's variant. See {@link ButtonVariantEnum}.\n\n @type {String}\n @default ButtonVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n\n this._reflectAttribute('variant', value);\n\n if(validate.valueMustChange(this._variant , value)) {\n this._variant = value;\n\n // removes every existing variant\n this.classList.remove(CLASSNAME, ACTION_CLASSNAME);\n this.classList.remove(...ALL_VARIANT_CLASSES);\n \n if (value === variant._CUSTOM) {\n this.classList.remove(CLASSNAME);\n } else {\n this.classList.add(...VARIANT_MAP[value]);\n \n if (value === variant.ACTION || value === variant.QUIET_ACTION) {\n this.classList.remove(CLASSNAME);\n }\n }\n \n // Update label styles\n this._updateLabel();\n }\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.label || this).textContent.replace(/\\s{2,}/g, ' ').trim() || this.icon :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n _onClick(event) {\n if (!this.disabled) {\n this._trackEvent('click', this.getAttribute('is'), event);\n }\n }\n\n /** @ignore */\n _updateIcon(value) {\n if (!this._updatedIcon && this._elements.icon) {\n return;\n }\n\n this._updatedIcon = true;\n\n const iconSizeValue = this.iconSize;\n const iconAutoAriaLabelValue = this.iconAutoAriaLabel;\n const iconElement = this._getIconElement();\n iconElement.icon = value;\n // Update size as well\n iconElement.size = iconSizeValue;\n // Update autoAriaLabel as well\n iconElement.autoAriaLabel = iconAutoAriaLabelValue;\n\n // removes the icon element from the DOM.\n if (this.icon === '') {\n iconElement.remove();\n }\n // add or adjust the icon. Add it back since it was blown away by textContent\n else if (!iconElement.parentNode || this._iconPosition) {\n if (this.contains(this.label)) {\n // insertBefore with null appends\n this.insertBefore(iconElement, this.iconPosition === iconPosition.LEFT ? this.label : this.label.nextElementSibling);\n }\n }\n\n super._toggleIconAriaHidden();\n }\n\n /** @ignore */\n _getIconElement() {\n if (!this._elements.icon) {\n this._elements.icon = new Icon();\n this._elements.icon.size = this.iconSize;\n }\n return this._elements.icon;\n }\n\n /**\n Forces button to receive focus on mousedown\n @param {MouseEvent} event mousedown event\n @ignore\n */\n _onMouseDown(event) {\n const target = event.matchedTarget;\n\n // Wait a frame or button won't receive focus in Safari.\n window.requestAnimationFrame(() => {\n if (target !== document.activeElement) {\n target.focus();\n }\n });\n }\n\n _updateLabel(label) {\n label = label || this._elements.label;\n\n label.classList.remove(`${CLASSNAME}-label`, `${ACTION_CLASSNAME}-label`);\n\n if (this._variant !== variant._CUSTOM) {\n if (this._variant === variant.ACTION || this._variant === variant.QUIET_ACTION) {\n label.classList.add(`${ACTION_CLASSNAME}-label`);\n } else {\n label.classList.add(`${CLASSNAME}-label`);\n }\n }\n }\n\n /** @private */\n get _contentZoneTagName() {\n return Object.keys(this._contentZones)[0];\n }\n\n get _contentZones() {\n return {'coral-button-label': 'label'};\n }\n\n /**\n Returns {@link BaseButton} sizes.\n\n @return {ButtonSizeEnum}\n */\n static get size() {\n return size;\n }\n\n /**\n Returns {@link BaseButton} variants.\n\n @return {ButtonVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /**\n Returns {@link BaseButton} icon positions.\n\n @return {ButtonIconPositionEnum}\n */\n static get iconPosition() {\n return iconPosition;\n }\n\n /**\n Returns {@link BaseButton} icon sizes.\n\n @return {ButtonIconSizeEnum}\n */\n static get iconSize() {\n return iconSize;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n iconposition: 'iconPosition',\n iconsize: 'iconSize',\n iconautoarialabel: 'iconAutoAriaLabel'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'iconposition',\n 'iconsize',\n 'icon',\n 'iconautoarialabel',\n 'size',\n 'selected',\n 'block',\n 'variant',\n 'value'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n if (!this._size) {\n this.size = size.MEDIUM;\n }\n\n // Create a fragment\n const fragment = document.createDocumentFragment();\n\n const label = this._elements.label;\n\n const contentZoneProvided = label.parentNode;\n\n // Remove it so we can process children\n if (contentZoneProvided) {\n this.removeChild(label);\n }\n\n let iconAdded = false;\n // Process remaining elements as necessary\n while (this.firstChild) {\n const child = this.firstChild;\n\n if (child.nodeName === 'CORAL-ICON') {\n // Don't add duplicated icons\n if (iconAdded) {\n this.removeChild(child);\n } else {\n // Conserve existing icon element to content\n this._elements.icon = child;\n fragment.appendChild(child);\n iconAdded = true;\n }\n }\n // Avoid content zone to be voracious\n else if (contentZoneProvided) {\n fragment.appendChild(child);\n } else {\n // Move anything else into the label\n label.appendChild(child);\n }\n }\n\n // Add the frag to the component\n this.appendChild(fragment);\n\n // Assign the content zones, moving them into place in the process\n this.label = label;\n\n // Make sure the icon is well positioned\n this._updatedIcon = true;\n this._updateIcon(this.icon);\n }\n\n /**\n Triggered when {@link BaseButton#selected} changed.\n\n @typedef {CustomEvent} coral-button:_selectedchanged\n\n @private\n */\n\n /**\n Triggered when {@link BaseButton#value} changed.\n\n @typedef {CustomEvent} coral-button:_valuechanged\n\n @private\n */\n};\n\nexport default BaseButton;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 61, "kind": "typedef", "name": "ButtonIconSizeEnum", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ButtonIconSizeEnum", "access": "public", "description": "Enumeration for {@link Button}, {@link AnchorButton} icon sizes.", "lineNumber": 31, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_EXTRA_SMALL", "description": "Extra extra small size icon, typically 9px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_SMALL", "description": "Extra small size icon, typically 12px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SMALL", "description": "Small size icon, typically 18px size. This is the default size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MEDIUM", "description": "Medium size icon, typically 24px size." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ButtonIconSizeEnum" } }, { "__docId__": 62, "kind": "variable", "name": "excludedIconSizes", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~excludedIconSizes", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 32, "undocument": true, "type": { "types": [ "undefined[]" ] }, "ignore": true }, { "__docId__": 63, "kind": "typedef", "name": "ButtonVariantEnum", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ButtonVariantEnum", "access": "public", "description": "Enumeration for {@link Button}, {@link AnchorButton} variants.", "lineNumber": 70, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "CTA", "description": "A button that is meant to grab the user's attention." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "PRIMARY", "description": "A button that is meant to grab the user's attention." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "A quiet button that indicates that the button's action is the primary action." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SECONDARY", "description": "A button that indicates that the button's action is the secondary action." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET_SECONDARY", "description": "A quiet secondary button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ACTION", "description": "An action button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET_ACTION", "description": "A quiet action button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MINIMAL", "description": "A quiet minimalistic button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "WARNING", "description": "A button that indicates that the button's action is dangerous." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET_WARNING", "description": "A quiet warning button," }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OVER_BACKGROUND", "description": "A button to be placed on top of colored background." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "The default button look and feel." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ButtonVariantEnum" } }, { "__docId__": 64, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 88, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 65, "kind": "variable", "name": "ACTION_CLASSNAME", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ACTION_CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 89, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 66, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 91, "undocument": true, "type": { "types": [ "undefined[]" ] }, "ignore": true }, { "__docId__": 67, "kind": "variable", "name": "VARIANT_MAP", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~VARIANT_MAP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 101, "undocument": true, "type": { "types": [ "{\"cta\": *, \"primary\": *, \"secondary\": *, \"warning\": *, \"quiet\": *, \"minimal\": *, \"default\": *, \"action\": *, \"quietaction\": *, \"quietsecondary\": *, \"quietwarning\": *, \"overbackground\": *}" ] }, "ignore": true }, { "__docId__": 68, "kind": "typedef", "name": "ButtonSizeEnum", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ButtonSizeEnum", "access": "public", "description": "Enumeration for {@link BaseButton} sizes.", "lineNumber": 126, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MEDIUM", "description": "A medium button is the default, normal sized button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LARGE", "description": "Not supported. Falls back to MEDIUM." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ButtonSizeEnum" } }, { "__docId__": 69, "kind": "typedef", "name": "ButtonIconPositionEnum", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~ButtonIconPositionEnum", "access": "public", "description": "Enumeration for {@link BaseButton} icon position options.", "lineNumber": 141, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "RIGHT", "description": "Position should be right of the button label." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LEFT", "description": "Position should be left of the button label." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ButtonIconPositionEnum" } }, { "__docId__": 70, "kind": "function", "name": "BaseButton", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~BaseButton", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for Button components", "lineNumber": 150, "unknown": [ { "tagName": "@base", "tagValue": "BaseButton" }, { "tagName": "@classdesc", "tagValue": "The base element for Button components" } ], "params": [ { "name": "superClass", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 71, "kind": "typedef", "name": "coral-button:_selectedchanged", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~coral-button:_selectedchanged", "access": "private", "description": "Triggered when {@link BaseButton#selected} changed.", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-button:_selectedchanged" }, "ignore": true }, { "__docId__": 72, "kind": "typedef", "name": "coral-button:_valuechanged", "memberof": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js", "static": true, "longname": "coral-spectrum/coral-base-button/src/scripts/BaseButton.js~coral-button:_valuechanged", "access": "private", "description": "Triggered when {@link BaseButton#value} changed.", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-button:_valuechanged" }, "ignore": true }, { "__docId__": 73, "kind": "file", "name": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport Vent from '@adobe/vent';\nimport {commons, Keys, keys, events, transform, validate, tracking as trackingUtil} from '../../../coral-utils';\n\n// Used to split events by type/target\nconst delegateEventSplitter = /^(\\S+)\\s*(.*)$/;\n\n/**\n Enumeration representing the tracking options.\n\n @typedef {Object} TrackingEnum\n\n @property {String} ON\n Enables tracking of the component interactions.\n @property {String} OFF\n Disables tracking of the component interactions.\n */\nconst tracking = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Return the method corresponding to the method name or the function, if passed.\n @ignore\n */\nconst getListenerFromMethodNameOrFunction = function (obj, eventName, methodNameOrFunction) {\n // Try to get the method\n if (typeof methodNameOrFunction === 'function') {\n return methodNameOrFunction;\n } else if (typeof methodNameOrFunction === 'string') {\n if (!obj[methodNameOrFunction]) {\n throw new Error(`Coral.Component: Unable to add ${eventName} listener for ${obj.toString()}, method\n ${methodNameOrFunction} not found`);\n }\n\n const listener = obj[methodNameOrFunction];\n\n if (typeof listener !== 'function') {\n throw new Error(`Coral.Component: Unable to add ${eventName} listener for ${obj.toString()}, listener is a\n ${(typeof listener)} but should be a function`);\n }\n\n return listener;\n } else if (methodNameOrFunction) {\n // If we're passed something that's truthy (like an object), but it's not a valid method name or a function, get\n // angry\n throw new Error(`Coral.Component: Unable to add ${eventName} listener for ${obj.toString()}, ${methodNameOrFunction}\n is neither a method name or a function`);\n }\n\n return null;\n};\n\n/**\n Add local event and key combo listeners for this component, store global event/key combo listeners for later.\n @ignore\n */\nconst delegateEvents = function () {\n /*\n Add listeners to new event\n - Include in hash\n Add listeners to existing event\n - Override method and use super\n Remove existing event\n - Pass null\n */\n let match;\n let eventName;\n let eventInfo;\n let listener;\n let selector;\n let elements;\n let isGlobal;\n let isKey;\n let isResize;\n let isCapture;\n\n for (eventInfo in this._events) {\n listener = this._events[eventInfo];\n\n // Extract the event name and the selector\n match = eventInfo.match(delegateEventSplitter);\n eventName = `${match[1]}.CoralComponent`;\n selector = match[2];\n\n if (selector === '') {\n // instead of null because the key module checks for undefined\n selector = undefined;\n }\n\n // Try to get the method corresponding to the value in the map\n listener = getListenerFromMethodNameOrFunction(this, eventName, listener);\n\n if (listener) {\n // Always execute in the context of the object\n // @todo is this necessary? this should be correct anyway\n listener = listener.bind(this);\n\n // Check if the listener is on the window\n isGlobal = eventName.indexOf('global:') === 0;\n if (isGlobal) {\n eventName = eventName.substr(7);\n }\n\n // Check if the listener is a capture listener\n isCapture = eventName.indexOf('capture:') === 0;\n if (isCapture) {\n // @todo Limitation: It should be possible to do capture:global:, but it isn't\n eventName = eventName.substr(8);\n }\n\n // Check if the listener is a key listener\n isKey = eventName.indexOf('key:') === 0;\n if (isKey) {\n if (isCapture) {\n throw new Error('Coral.Keys does not currently support listening to key events with capture');\n }\n eventName = eventName.substr(4);\n }\n\n // Check if the listener is a resize listener\n isResize = eventName.indexOf('resize') === 0;\n if (isResize) {\n if (isCapture) {\n throw new Error('Coral.commons.addResizeListener does not currently support listening to resize event with capture');\n }\n }\n\n if (isGlobal) {\n // Store for adding/removal\n if (isKey) {\n this._globalKeys = this._globalKeys || [];\n this._globalKeys.push({\n keyCombo: eventName,\n selector: selector,\n listener: listener\n });\n } else {\n this._globalEvents = this._globalEvents || [];\n this._globalEvents.push({eventName, selector, listener, isCapture});\n }\n }\n // Events on the element itself\n else if (isKey) {\n // Create the keys instance only if its needed\n this._keys = this._keys || new Keys(this, {\n // The filter function for keyboard events.\n filter: this._filterKeys,\n // Execute key listeners in the context of the element\n context: this\n });\n\n // Add listener locally\n this._keys.on(eventName, selector, listener);\n } else if (isResize) {\n if (selector) {\n elements = document.querySelectorAll(selector);\n for (let i = 0 ; i < elements.length ; ++i) {\n commons.addResizeListener(elements[i], listener);\n }\n } else {\n commons.addResizeListener(this, listener);\n }\n } else {\n this._vent.on(eventName, selector, listener, isCapture);\n }\n }\n }\n};\n\n/**\n Attach global event listeners for this component.\n @ignore\n */\nconst delegateGlobalEvents = function () {\n let i;\n if (this._globalEvents) {\n // Remove global event listeners\n for (i = 0 ; i < this._globalEvents.length ; i++) {\n const event = this._globalEvents[i];\n events.on(event.eventName, event.selector, event.listener, event.isCapture);\n }\n }\n\n if (this._globalKeys) {\n // Remove global key listeners\n for (i = 0 ; i < this._globalKeys.length ; i++) {\n const key = this._globalKeys[i];\n keys.on(key.keyCombo, key.selector, key.listener);\n }\n }\n\n if (this._keys) {\n this._keys.init(true);\n }\n};\n\n/**\n Remove global event listeners for this component.\n @ignore\n */\nconst undelegateGlobalEvents = function () {\n let i;\n if (this._globalEvents) {\n // Remove global event listeners\n for (i = 0 ; i < this._globalEvents.length ; i++) {\n const event = this._globalEvents[i];\n events.off(event.eventName, event.selector, event.listener, event.isCapture);\n }\n }\n\n if (this._globalKeys) {\n // Remove global key listeners\n for (i = 0 ; i < this._globalKeys.length ; i++) {\n const key = this._globalKeys[i];\n keys.off(key.keyCombo, key.selector, key.listener);\n }\n }\n\n if (this._keys) {\n this._keys.destroy(true);\n }\n};\n\n// Used to find upper case characters\nconst REG_EXP_UPPERCASE = /[A-Z]/g;\n\n/**\n Returns the constructor namespace\n @ignore\n */\nconst getConstructorName = function (constructor) {\n // Will contain the namespace of the constructor in reversed order\n const constructorName = [];\n // Keep a reference on the passed constructor\n const originalConstructor = constructor;\n\n // Traverses Coral constructors if not already done to set the namespace\n if (!constructor._namespace) {\n // Set namespace on Coral constructors until 'constructor' is found\n const find = (obj, constructorToFind) => {\n let found = false;\n const type = typeof obj;\n\n if (obj && type === 'object' || type === 'function') {\n const subObj = Object.keys(obj);\n\n for (let i = 0 ; i < subObj.length ; i++) {\n const key = subObj[i];\n\n // Components are capitalized\n if (key[0].match(REG_EXP_UPPERCASE) !== null) {\n // Keep a reference of the constructor name and its parent\n obj[key]._namespace = {\n parent: obj,\n value: key\n };\n\n found = obj[key] === constructorToFind;\n\n if (found) {\n break;\n } else {\n found = find(obj[key], constructorToFind);\n }\n }\n }\n }\n\n return found;\n };\n\n // Look for the constructor in the Coral namespace\n find(window.Coral, constructor);\n }\n\n // Climb up the constructor namespace\n while (constructor) {\n if (constructor._namespace) {\n constructorName.push(constructor._namespace.value);\n constructor = constructor._namespace.parent;\n } else {\n constructor = false;\n }\n }\n\n // Build the full namespace string and save it for reuse\n originalConstructor._componentName = constructorName.reverse().join('.');\n\n return originalConstructor._componentName;\n};\n\n/**\n * recursively update the _ignoreConnectedCallback value\n * for children coral-component, if parent has ignored the callback\n * its child should also ignore the callback hooks\n * @private\n */\nconst _recursiveIgnoreConnectedCallback = function(el, value) {\n let children = Array.from(el.children);\n for (let i = 0; i < children.length; i++) {\n let child = children[i];\n // todo better check for coral-component\n if(typeof child._ignoreConnectedCallback === 'boolean') {\n child._ignoreConnectedCallback = value;\n } else {\n _recursiveIgnoreConnectedCallback(child, value);\n }\n }\n};\n\n/**\n @base BaseComponent\n @classdesc The base element for all Coral components\n */\nclass BaseComponent extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n // Attach Vent\n this._vent = new Vent(this);\n this._events = {};\n\n // Content zone MO for virtual DOM support\n if (this._contentZones) {\n this._contentZoneObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n for (let i = 0 ; i < mutation.addedNodes.length ; i++) {\n const addedNode = mutation.addedNodes[i];\n\n for (const name in this._contentZones) {\n const contentZone = this._contentZones[name];\n if (addedNode.nodeName.toLowerCase() === name && !addedNode._contentZoned) {\n // Insert the content zone at the right position\n /** @ignore */\n this[contentZone] = addedNode;\n }\n }\n }\n });\n });\n\n this._contentZoneObserver.observe(this, {\n childList: true,\n subtree: true\n });\n }\n }\n\n /**\n Tracking of events. This provides insight on the usage of the components. It accepts \"ON\" and \"OFF\". In order to\n successfully track the events, {Tracking} needs to be configured.\n\n @type {String}\n @default TrackingEnum.ON\n @htmlattribute tracking\n */\n get tracking() {\n return this._tracking || this.getAttribute('tracking') || tracking.ON;\n }\n\n set tracking(value) {\n value = transform.string(value).toLowerCase();\n this._tracking = validate.enumeration(tracking)(value) && value || tracking.ON;\n }\n\n /**\n The string representing the feature being tracked. This provides additional context to the analytics trackers\n about the feature that the element enables.\n\n @type {String}\n @default \"\"\n @htmlattribute trackingfeature\n */\n get trackingFeature() {\n return this._trackingFeature || this.getAttribute('trackingFeature') || '';\n }\n\n set trackingFeature(value) {\n this._trackingFeature = transform.string(value);\n }\n\n /**\n The string representing the element name being tracked. This providex additional context to the trackers about the\n element that was interacted with.\n\n @type {String}\n @default \"\"\n @htmlattribute trackingelement\n */\n get trackingElement() {\n return this._trackingElement || this.getAttribute('trackingElement') || '';\n }\n\n set trackingElement(value) {\n this._trackingElement = transform.string(value);\n }\n\n // Constructs and returns the component name based on the constructor\n get _componentName() {\n return this.constructor._componentName || getConstructorName(this.constructor);\n }\n\n // The filter function for keyboard events. By default, any child element can trigger keyboard events.\n // You can pass {@link Keys.filterInputs} to avoid listening to key events triggered from within\n // inputs.\n _filterKeys() {\n return true;\n }\n\n // Attach event listeners including global ones\n _delegateEvents(eventMap) {\n this._events = commons.extend(this._events, eventMap);\n delegateEvents.call(this);\n\n // Once events are attached, we dispose them\n this._events = {};\n }\n\n // Returns the content zone if the component is connected and contains the content zone else null\n // Ideally content zones will be replaced by shadow dom and elements\n _getContentZone(contentZone) {\n if (document.documentElement.contains(this)) {\n return this.contains(contentZone) && contentZone || null;\n }\n // Return the content zone by default\n return contentZone;\n }\n\n // Sets the value as content zone for the property given the specified options\n // Ideally content zones will be replaced by shadow dom and elements\n _setContentZone(property, value, options) {\n const handle = options.handle;\n const expectedTagName = options.tagName;\n const additionalSetter = options.set;\n const insert = options.insert;\n\n let oldNode;\n\n if (value) {\n if (!(value instanceof HTMLElement)) {\n throw new Error(`DOMException: Failed to set the \"${property}\" property on \"${this.toString()}\":\n The provided value is not of type \"HTMLElement\".`);\n }\n\n if (expectedTagName && value.tagName.toLowerCase() !== expectedTagName) {\n throw new Error(`DOMException: Failed to set the \"${property}\" property on \"${this.toString()}\": The new\n ${property} element is of type \"${value.tagName}\". It must be a \"${expectedTagName.toUpperCase()}\" element.`);\n }\n\n oldNode = this._elements[handle];\n\n // Flag it for the content zone MO\n value._contentZoned = true;\n\n // Replace the existing element\n if (insert) {\n // Remove old node\n if (oldNode && oldNode.parentNode) {\n oldNode.parentNode.removeChild(oldNode);\n }\n // Insert new node\n insert.call(this, value);\n } else if (oldNode && oldNode.parentNode) {\n commons._log('warn', `${this._componentName} does not define an insert method for content zone ${handle}, falling back to replace.`);\n // Old way -- assume we have an old node\n this._elements[handle].parentNode.replaceChild(value, this._elements[handle]);\n } else {\n commons._log('error', `${this._componentName} does not define an insert method for content zone ${handle}, falling back to append.`);\n // Just append, which may introduce bugs, but at least doesn't crazy\n this.appendChild(value);\n }\n } else {\n // we need to remove the content zone if it exists\n oldNode = this._elements[handle];\n if (oldNode && oldNode.parentNode) {\n oldNode.parentNode.removeChild(oldNode);\n }\n }\n\n // Re-assign the handle to the new element\n this._elements[handle] = value;\n\n // Invoke the setter\n if (typeof additionalSetter === 'function') {\n additionalSetter.call(this, value);\n }\n }\n\n // Handles the reflection of properties by using a flag to prevent setting the property by changing the attribute\n _reflectAttribute(attributeName, value) {\n if (typeof value === 'boolean') {\n if (value && !this.hasAttribute(attributeName)) {\n this._reflectedAttribute = true;\n this.setAttribute(attributeName, '');\n this._reflectedAttribute = false;\n } else if (!value && this.hasAttribute(attributeName)) {\n this._reflectedAttribute = true;\n this.removeAttribute(attributeName);\n this._reflectedAttribute = false;\n }\n } else if (this.getAttribute(attributeName) !== String(value)) {\n this._reflectedAttribute = true;\n this.setAttribute(attributeName, value);\n this._reflectedAttribute = false;\n }\n }\n\n /**\n Notifies external listeners about an internal interaction. This method is used internally in every\n component's method that we want to track.\n\n @param {String} eventType The event type. Eg. click, select, etc.\n @param {String} targetType The element type being used. Eg. cyclebutton, cyclebuttonitem, etc.\n @param {CustomEvent} event\n @param {BaseComponent} childComponent - Optional, in case the event occurred on a child component.\n\n @returns {BaseComponent}\n */\n _trackEvent(eventType, targetType, event, childComponent) {\n if (this.tracking === this.constructor.tracking.ON) {\n trackingUtil.track(eventType, targetType, event, this, childComponent);\n }\n return this;\n }\n\n /**\n Returns the component name.\n\n @return {String}\n */\n toString() {\n return `Coral.${this._componentName}`;\n }\n\n /**\n Add an event listener.\n\n @param {String} eventName\n The event name to listen for.\n @param {String} [selector]\n The selector to use for event delegation.\n @param {Function} func\n The function that will be called when the event is triggered.\n @param {Boolean} [useCapture=false]\n Whether or not to listen during the capturing or bubbling phase.\n @returns {BaseComponent} this, chainable.\n */\n on(eventName, selector, func, useCapture) {\n this._vent.on(eventName, selector, func, useCapture);\n return this;\n }\n\n /**\n Remove an event listener.\n\n @param {String} eventName\n The event name to stop listening for.\n @param {String} [selector]\n The selector that was used for event delegation.\n @param {Function} func\n The function that was passed to on().\n @param {Boolean} [useCapture]\n Only remove listeners with useCapture set to the value passed in.\n @returns {BaseComponent} this, chainable.\n */\n off(eventName, selector, func, useCapture) {\n this._vent.off(eventName, selector, func, useCapture);\n return this;\n }\n\n /**\n Trigger an event.\n\n @param {String} eventName\n The event name to trigger.\n @param {Object} [props]\n Additional properties to make available to handlers as event.detail.\n @param {Boolean} [bubbles=true]\n Set to false to prevent the event from bubbling.\n @param {Boolean} [cancelable=true]\n Set to false to prevent the event from being cancelable.\n @returns {CustomEvent} CustomEvent object\n */\n trigger(eventName, props, bubbles, cancelable) {\n // When 'bubbles' is not set, then default to true:\n bubbles = bubbles || bubbles === undefined;\n\n // When 'cancelable' is not set, then default to true:\n cancelable = cancelable || cancelable === undefined;\n\n const event = new CustomEvent(eventName, {\n bubbles: bubbles,\n cancelable: cancelable,\n detail: props\n });\n\n // Don't trigger the event if silenced\n if (this._silenced) {\n return event;\n }\n\n // default value in case the dispatching fails\n let defaultPrevented = false;\n\n try {\n // leads to NS_ERROR_UNEXPECTED in Firefox\n // https://bugzilla.mozilla.org/show_bug.cgi?id=329509\n defaultPrevented = !this.dispatchEvent(event);\n }\n // eslint-disable-next-line no-empty\n catch (e) {\n }\n\n // Check if the defaultPrevented status was correctly stored back to the event object\n if (defaultPrevented !== event.defaultPrevented) {\n // dispatchEvent() doesn't correctly set event.defaultPrevented in IE 9\n // However, it does return false if preventDefault() was called\n // Unfortunately, the returned event's defaultPrevented property is read-only\n // We need to work around this such that (patchedEvent instanceof Event) === true\n // First, we'll create an object that uses the event as its prototype\n // This gives us an object we can modify that is still technically an instanceof Event\n const patchedEvent = Object.create(event);\n\n // Next, we set the correct value for defaultPrevented on the new object\n // We cannot simply assign defaultPrevented, it causes a \"Invalid Calling Object\" error in IE 9\n // For some reason, defineProperty doesn't cause this\n Object.defineProperty(patchedEvent, 'defaultPrevented', {\n value: defaultPrevented\n });\n\n return patchedEvent;\n }\n\n return event;\n }\n\n /**\n Set multiple properties.\n\n @param {Object.} properties\n An object of property/value pairs to set.\n @param {Boolean} silent\n If true, events should not be triggered as a result of this set.\n\n @returns {BaseComponent} this, chainable.\n */\n set(propertyOrProperties, valueOrSilent, silent) {\n let property;\n let properties;\n let value;\n\n const isContentZone = (prop) => this._contentZones && commons.swapKeysAndValues(this._contentZones)[prop];\n\n const updateContentZone = (prop, val) => {\n // If content zone exists and we only want to update properties on the content zone\n if (this[prop] instanceof HTMLElement && !(val instanceof HTMLElement)) {\n for (const contentZoneProperty in val) {\n /** @ignore */\n this[prop][contentZoneProperty] = val[contentZoneProperty];\n }\n }\n // Else assign the new value to the content zone\n else {\n /** @ignore */\n this[prop] = val;\n }\n };\n\n const setProperty = (prop, val) => {\n if (isContentZone(prop)) {\n updateContentZone(prop, val);\n } else {\n this._silenced = silent;\n /** @ignore */\n this[prop] = val;\n this._silenced = false;\n }\n };\n\n if (typeof propertyOrProperties === 'string') {\n // Set a single property\n property = propertyOrProperties;\n value = valueOrSilent;\n\n setProperty(property, value);\n } else {\n properties = propertyOrProperties;\n silent = valueOrSilent;\n\n // Set a map of properties\n for (property in properties) {\n value = properties[property];\n\n setProperty(property, value);\n }\n }\n\n return this;\n }\n\n /**\n Get the value of a property.\n\n @param {String} property\n The name of the property to fetch the value of.\n @returns {*} Property value.\n */\n get(property) {\n return this[property];\n }\n\n /**\n Show this component.\n\n @returns {BaseComponent} this, chainable\n */\n show() {\n if (!this.hidden) {\n return this;\n }\n\n /** @ignore */\n this.hidden = false;\n return this;\n }\n\n /**\n Hide this component.\n @returns {BaseComponent} this, chainable\n */\n hide() {\n if (this.hidden) {\n return this;\n }\n\n /** @ignore */\n this.hidden = true;\n return this;\n }\n\n /**\n This should be executed when messenger is connect event is connected.\n It will add the parent as a listener in child messenger.\n @ignore\n */\n _onMessengerConnected(event) {\n event.stopImmediatePropagation();\n\n let handler = event.detail.handler;\n if(typeof handler === 'function') {\n handler(this);\n } else {\n throw new Error(\"Messenger handler should be a function\");\n }\n }\n\n /**\n specify whether the connected and disconnected hooks are ignore for component\n @returns true when ignored\n @private\n */\n get _ignoreConnectedCallback() {\n return this.__ignoreConnectedCallback || false;\n }\n\n set _ignoreConnectedCallback(value) {\n value = transform.booleanAttr(value);\n\n if(value !== this.__ignoreConnectedCallback) {\n this.__ignoreConnectedCallback = value;\n _recursiveIgnoreConnectedCallback(this, value);\n }\n }\n\n /**\n Returns {@link BaseComponent} tracking options.\n\n @return {TrackingEnum}\n */\n static get tracking() {\n return tracking;\n }\n\n static get _attributePropertyMap() {\n return {\n trackingelement: 'trackingElement',\n trackingfeature: 'trackingFeature'\n };\n }\n\n /** @ignore */\n static get observedAttributes() {\n return [\n 'tracking',\n 'trackingelement',\n 'trackingfeature',\n 'trackingFeature'\n ];\n }\n\n /** @ignore */\n // eslint-disable-next-line no-unused-vars\n attributeChangedCallback(name, oldValue, value) {\n const self = this;\n if (!self._reflectedAttribute) {\n // Use the attribute/property mapping\n self[self.constructor._attributePropertyMap[name] || name] = value;\n }\n }\n\n /**\n called when we need to suspend state and properties, when\n disconnected callback are skipped.\n @private\n */\n _suspendCallback() {\n // do nothing\n }\n\n /**\n called when we need to re-initialise state and properties, when\n connected callback are skipped.\n @private\n */\n _resumeCallback() {\n // do nothing\n }\n\n /** @ignore */\n connectedCallback() {\n // A component that is reattached should respond to global events again\n // Attach global listener when component is connected to DOM\n // this would avoid memory leak when element is created but never connected.\n delegateGlobalEvents.call(this);\n\n this._disconnected = false;\n\n if (!this._rendered) {\n this.render();\n }\n }\n\n /** @ignore */\n render() {\n this._rendered = true;\n }\n\n /** @ignore */\n disconnectedCallback() {\n // A component that isn't in the DOM should not be responding to global events\n this._disconnected = true;\n \n undelegateGlobalEvents.call(this);\n }\n};\n\nexport default BaseComponent;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 74, "kind": "variable", "name": "delegateEventSplitter", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~delegateEventSplitter", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 75, "kind": "typedef", "name": "TrackingEnum", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~TrackingEnum", "access": "public", "description": "Enumeration representing the tracking options.", "lineNumber": 29, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Enables tracking of the component interactions." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Disables tracking of the component interactions." } ], "type": { "types": [ "Object" ], "optional": false, "name": "TrackingEnum" } }, { "__docId__": 76, "kind": "function", "name": "getListenerFromMethodNameOrFunction", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~getListenerFromMethodNameOrFunction", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Return the method corresponding to the method name or the function, if passed.", "lineNumber": 38, "ignore": true, "params": [ { "name": "obj", "types": [ "*" ] }, { "name": "eventName", "types": [ "*" ] }, { "name": "methodNameOrFunction", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 77, "kind": "function", "name": "delegateEvents", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~delegateEvents", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Add local event and key combo listeners for this component, store global event/key combo listeners for later.", "lineNumber": 70, "ignore": true, "params": [], "return": null }, { "__docId__": 78, "kind": "function", "name": "delegateGlobalEvents", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~delegateGlobalEvents", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Attach global event listeners for this component.", "lineNumber": 187, "ignore": true, "params": [], "return": null }, { "__docId__": 79, "kind": "function", "name": "undelegateGlobalEvents", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~undelegateGlobalEvents", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Remove global event listeners for this component.", "lineNumber": 214, "ignore": true, "params": [], "return": null }, { "__docId__": 80, "kind": "variable", "name": "REG_EXP_UPPERCASE", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~REG_EXP_UPPERCASE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 238, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 81, "kind": "function", "name": "getConstructorName", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~getConstructorName", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Returns the constructor namespace", "lineNumber": 244, "ignore": true, "params": [ { "name": "constructor", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 82, "kind": "function", "name": "_recursiveIgnoreConnectedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~_recursiveIgnoreConnectedCallback", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "recursively update the _ignoreConnectedCallback value\nfor children coral-component, if parent has ignored the callback\nits child should also ignore the callback hooks", "lineNumber": 311, "ignore": true, "params": [ { "name": "el", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 83, "kind": "class", "name": "BaseComponent", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js", "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for all Coral components", "lineNumber": 328, "unknown": [ { "tagName": "@base", "tagValue": "BaseComponent" }, { "tagName": "@classdesc", "tagValue": "The base element for all Coral components" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 84, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#constructor", "access": "public", "description": null, "lineNumber": 330, "ignore": true }, { "__docId__": 85, "kind": "member", "name": "_vent", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_vent", "access": "private", "description": null, "lineNumber": 334, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 86, "kind": "member", "name": "_events", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_events", "access": "private", "description": null, "lineNumber": 335, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 87, "kind": "member", "name": "_contentZoneObserver", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_contentZoneObserver", "access": "private", "description": null, "lineNumber": 339, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 88, "kind": "member", "name": "[contentZone]", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#[contentZone]", "access": "public", "description": null, "lineNumber": 349, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 89, "kind": "member", "name": "tracking", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#tracking", "access": "public", "description": "Tracking of events. This provides insight on the usage of the components. It accepts \"ON\" and \"OFF\". In order to\nsuccessfully track the events, {Tracking} needs to be configured.\n
  • TrackingEnum.ON by default.
", "lineNumber": 371, "unknown": [ { "tagName": "@default", "tagValue": "TrackingEnum.ON" }, { "tagName": "@htmlattribute", "tagValue": "tracking" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 91, "kind": "member", "name": "_tracking", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_tracking", "access": "private", "description": null, "lineNumber": 377, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 92, "kind": "member", "name": "trackingFeature", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#trackingFeature", "access": "public", "description": "The string representing the feature being tracked. This provides additional context to the analytics trackers\nabout the feature that the element enables.\n
  • \"\" by default.
", "lineNumber": 388, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" }, { "tagName": "@htmlattribute", "tagValue": "trackingfeature" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 94, "kind": "member", "name": "_trackingFeature", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_trackingFeature", "access": "private", "description": null, "lineNumber": 393, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 95, "kind": "member", "name": "trackingElement", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#trackingElement", "access": "public", "description": "The string representing the element name being tracked. This providex additional context to the trackers about the\nelement that was interacted with.\n
  • \"\" by default.
", "lineNumber": 404, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" }, { "tagName": "@htmlattribute", "tagValue": "trackingelement" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 97, "kind": "member", "name": "_trackingElement", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_trackingElement", "access": "private", "description": null, "lineNumber": 409, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 98, "kind": "member", "name": "_componentName", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_componentName", "access": "private", "description": null, "lineNumber": 413, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 99, "kind": "method", "name": "_filterKeys", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_filterKeys", "access": "private", "description": null, "lineNumber": 420, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "boolean" ] } }, { "__docId__": 100, "kind": "method", "name": "_delegateEvents", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_delegateEvents", "access": "private", "description": null, "lineNumber": 425, "undocument": true, "ignore": true, "params": [ { "name": "eventMap", "types": [ "*" ] } ], "return": null }, { "__docId__": 103, "kind": "method", "name": "_getContentZone", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_getContentZone", "access": "private", "description": null, "lineNumber": 435, "undocument": true, "ignore": true, "params": [ { "name": "contentZone", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 104, "kind": "method", "name": "_setContentZone", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_setContentZone", "access": "private", "description": null, "lineNumber": 445, "undocument": true, "ignore": true, "params": [ { "name": "property", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] }, { "name": "options", "types": [ "*" ] } ], "return": null }, { "__docId__": 105, "kind": "method", "name": "_reflectAttribute", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_reflectAttribute", "access": "private", "description": null, "lineNumber": 504, "undocument": true, "ignore": true, "params": [ { "name": "attributeName", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 106, "kind": "member", "name": "_reflectedAttribute", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_reflectedAttribute", "access": "private", "description": null, "lineNumber": 507, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 112, "kind": "method", "name": "_trackEvent", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_trackEvent", "access": "private", "description": "Notifies external listeners about an internal interaction. This method is used internally in every\ncomponent's method that we want to track.", "lineNumber": 533, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent}" } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "eventType", "description": "The event type. Eg. click, select, etc." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "targetType", "description": "The element type being used. Eg. cyclebutton, cyclebuttonitem, etc." }, { "nullable": null, "types": [ "CustomEvent" ], "spread": false, "optional": false, "name": "event", "description": "" }, { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "optional": false, "name": "childComponent", "description": "Optional, in case the event occurred on a child component." } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "" }, "ignore": true }, { "__docId__": 113, "kind": "method", "name": "toString", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#toString", "access": "public", "description": "Returns the component name.", "lineNumber": 545, "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "" }, "params": [] }, { "__docId__": 114, "kind": "method", "name": "on", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#on", "access": "public", "description": "Add an event listener.", "lineNumber": 562, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent} this, chainable." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "eventName", "description": "The event name to listen for." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "name": "selector", "description": "The selector to use for event delegation." }, { "nullable": null, "types": [ "Function" ], "spread": false, "optional": false, "name": "func", "description": "The function that will be called when the event is triggered." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "defaultValue": "false", "defaultRaw": false, "name": "useCapture", "description": "Whether or not to listen during the capturing or bubbling phase." } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "this, chainable." } }, { "__docId__": 115, "kind": "method", "name": "off", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#off", "access": "public", "description": "Remove an event listener.", "lineNumber": 580, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent} this, chainable." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "eventName", "description": "The event name to stop listening for." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "name": "selector", "description": "The selector that was used for event delegation." }, { "nullable": null, "types": [ "Function" ], "spread": false, "optional": false, "name": "func", "description": "The function that was passed to on()." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "name": "useCapture", "description": "Only remove listeners with useCapture set to the value passed in." } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "this, chainable." } }, { "__docId__": 116, "kind": "method", "name": "trigger", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#trigger", "access": "public", "description": "Trigger an event.", "lineNumber": 598, "unknown": [ { "tagName": "@returns", "tagValue": "{CustomEvent} CustomEvent object" } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "eventName", "description": "The event name to trigger." }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "props", "description": "Additional properties to make available to handlers as event.detail." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "defaultValue": "true", "defaultRaw": true, "name": "bubbles", "description": "Set to false to prevent the event from bubbling." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "defaultValue": "true", "defaultRaw": true, "name": "cancelable", "description": "Set to false to prevent the event from being cancelable." } ], "return": { "nullable": null, "types": [ "CustomEvent" ], "spread": false, "description": "CustomEvent object" } }, { "__docId__": 117, "kind": "method", "name": "set", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#set", "access": "public", "description": "Set multiple properties.", "lineNumber": 661, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent} this, chainable." } ], "params": [ { "nullable": null, "types": [ "Object." ], "spread": false, "optional": false, "name": "properties", "description": "An object of property/value pairs to set." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": false, "name": "silent", "description": "If true, events should not be triggered as a result of this set." } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "this, chainable." } }, { "__docId__": 118, "kind": "member", "name": "[prop]", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#[prop]", "access": "public", "description": null, "lineNumber": 679, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 119, "kind": "member", "name": "_silenced", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_silenced", "access": "private", "description": null, "lineNumber": 687, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 122, "kind": "method", "name": "get", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#get", "access": "public", "description": "Get the value of a property.", "lineNumber": 722, "unknown": [ { "tagName": "@returns", "tagValue": "{*} Property value." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "property", "description": "The name of the property to fetch the value of." } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "Property value." } }, { "__docId__": 123, "kind": "method", "name": "show", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#show", "access": "public", "description": "Show this component.", "lineNumber": 731, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent} this, chainable" } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "this, chainable" }, "params": [] }, { "__docId__": 124, "kind": "member", "name": "hidden", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#hidden", "access": "public", "description": null, "lineNumber": 737, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 125, "kind": "method", "name": "hide", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#hide", "access": "public", "description": "Hide this component.", "lineNumber": 745, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseComponent} this, chainable" } ], "return": { "nullable": null, "types": [ "BaseComponent" ], "spread": false, "description": "this, chainable" }, "params": [] }, { "__docId__": 127, "kind": "method", "name": "_onMessengerConnected", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_onMessengerConnected", "access": "private", "description": "This should be executed when messenger is connect event is connected.\nIt will add the parent as a listener in child messenger.", "lineNumber": 760, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 128, "kind": "member", "name": "_ignoreConnectedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_ignoreConnectedCallback", "access": "private", "description": "specify whether the connected and disconnected hooks are ignore for component", "lineNumber": 776, "unknown": [ { "tagName": "@returns", "tagValue": "true when ignored" } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "true when ignored" }, "modality": "both", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 130, "kind": "member", "name": "__ignoreConnectedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#__ignoreConnectedCallback", "access": "private", "description": null, "lineNumber": 784, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 131, "kind": "member", "name": "tracking", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent.tracking", "access": "public", "description": "Returns {@link BaseComponent} tracking options.", "lineNumber": 794, "return": { "nullable": null, "types": [ "TrackingEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 132, "kind": "member", "name": "_attributePropertyMap", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent._attributePropertyMap", "access": "private", "description": null, "lineNumber": 798, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 133, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent.observedAttributes", "access": "public", "description": null, "lineNumber": 806, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 134, "kind": "method", "name": "attributeChangedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#attributeChangedCallback", "access": "public", "description": null, "lineNumber": 817, "ignore": true, "params": [ { "name": "name", "types": [ "*" ] }, { "name": "oldValue", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 135, "kind": "method", "name": "_suspendCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_suspendCallback", "access": "private", "description": "called when we need to suspend state and properties, when\ndisconnected callback are skipped.", "lineNumber": 830, "ignore": true, "params": [], "return": null }, { "__docId__": 136, "kind": "method", "name": "_resumeCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_resumeCallback", "access": "private", "description": "called when we need to re-initialise state and properties, when\nconnected callback are skipped.", "lineNumber": 839, "ignore": true, "params": [], "return": null }, { "__docId__": 137, "kind": "method", "name": "connectedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#connectedCallback", "access": "public", "description": null, "lineNumber": 844, "ignore": true, "params": [], "return": null }, { "__docId__": 138, "kind": "member", "name": "_disconnected", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_disconnected", "access": "private", "description": null, "lineNumber": 850, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 139, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#render", "access": "public", "description": null, "lineNumber": 858, "ignore": true, "params": [], "return": null }, { "__docId__": 140, "kind": "member", "name": "_rendered", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#_rendered", "access": "private", "description": null, "lineNumber": 859, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 141, "kind": "method", "name": "disconnectedCallback", "memberof": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-component/src/scripts/BaseComponent.js~BaseComponent#disconnectedCallback", "access": "public", "description": null, "lineNumber": 863, "ignore": true, "params": [], "return": null }, { "__docId__": 143, "kind": "file", "name": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js", "content": "/**\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SelectableCollection} from '../../../coral-collection';\nimport {transform, validate} from '../../../coral-utils';\n\n// @compat\nconst CLASSNAME = 'coral-RadioGroup';\n\n/**\n Enumeration for {@link BaseFieldGroup} orientations.\n\n @typedef {Object} BaseFieldGroupOrientationEnum\n\n @property {String} HORIZONTAL\n Horizontal default orientation.\n @property {String} VERTICAL\n Vertical orientation.\n */\nconst orientation = {\n HORIZONTAL: 'horizontal',\n VERTICAL: 'vertical'\n};\n\n/**\n @base BaseFieldGroup\n @classdesc The base element for FieldGroup components\n */\nclass BaseFieldGroup extends superClass {\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // Construct the collection on first request:\n if (!this._items) {\n this._items = new SelectableCollection({\n itemTagName: this._itemTagName,\n host: this\n });\n }\n\n return this._items;\n }\n\n /**\n Orientation of the field group. See {@link BaseFieldGroupOrientationEnum}.\n\n @type {String}\n @default BaseFieldGroupOrientationEnum.HORIZONTAL\n @htmlattribute orientation\n @htmlattributereflected\n */\n get orientation() {\n return this._orientation || orientation.HORIZONTAL;\n }\n\n set orientation(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(this.constructor.orientation)(value) && value || orientation.HORIZONTAL;\n \n this._reflectAttribute('orientation', value);\n \n if(validate.valueMustChange(this._orientation, value)) {\n this._orientation = value;\n\n this.classList.toggle(`${CLASSNAME}--vertical`, value === orientation.VERTICAL);\n }\n }\n\n /**\n Returns the first selected field group item in the Field Group. The value null is returned if no item is\n selected.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getFirstSelected('checked');\n }\n\n /** @private */\n get _itemTagName() {\n // Used for Collection\n return 'coral-fieldgroup-item';\n }\n\n /**\n Returns {@link BaseFieldGroup} orientation options.\n\n @return {BaseFieldGroupEnum}\n */\n static get orientation() {\n return orientation;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['orientation']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n this.setAttribute('role', 'group');\n\n // Default reflected attributes\n if (!this._orientation) {\n this.orientation = orientation.HORIZONTAL;\n }\n }\n};\n\nexport default BaseFieldGroup;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 144, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js", "static": true, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 145, "kind": "typedef", "name": "BaseFieldGroupOrientationEnum", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js", "static": true, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroupOrientationEnum", "access": "public", "description": "Enumeration for {@link BaseFieldGroup} orientations.", "lineNumber": 29, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "HORIZONTAL", "description": "Horizontal default orientation." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "VERTICAL", "description": "Vertical orientation." } ], "type": { "types": [ "Object" ], "optional": false, "name": "BaseFieldGroupOrientationEnum" } }, { "__docId__": 146, "kind": "class", "name": "BaseFieldGroup", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js", "static": true, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for FieldGroup components", "lineNumber": 38, "unknown": [ { "tagName": "@base", "tagValue": "BaseFieldGroup" }, { "tagName": "@classdesc", "tagValue": "The base element for FieldGroup components" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 147, "kind": "member", "name": "items", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#items", "access": "public", "description": "The Collection Interface that allows interacting with the items that the component contains.\n
  • read-only
", "lineNumber": 45, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "SelectableCollection" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 148, "kind": "member", "name": "_items", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#_items", "access": "private", "description": null, "lineNumber": 48, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 149, "kind": "member", "name": "orientation", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#orientation", "access": "public", "description": "Orientation of the field group. See {@link BaseFieldGroupOrientationEnum}.\n
  • BaseFieldGroupOrientationEnum.HORIZONTAL by default.
  • reflected
", "lineNumber": 65, "unknown": [ { "tagName": "@default", "tagValue": "BaseFieldGroupOrientationEnum.HORIZONTAL" }, { "tagName": "@htmlattribute", "tagValue": "orientation" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 151, "kind": "member", "name": "_orientation", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#_orientation", "access": "private", "description": null, "lineNumber": 76, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 152, "kind": "member", "name": "selectedItem", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#selectedItem", "access": "public", "description": "Returns the first selected field group item in the Field Group. The value null is returned if no item is\nselected.\n
  • read-only
", "lineNumber": 89, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 153, "kind": "member", "name": "_itemTagName", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#_itemTagName", "access": "private", "description": null, "lineNumber": 94, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 154, "kind": "member", "name": "orientation", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup.orientation", "access": "public", "description": "Returns {@link BaseFieldGroup} orientation options.", "lineNumber": 104, "return": { "nullable": null, "types": [ "BaseFieldGroupEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 155, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup.observedAttributes", "access": "public", "description": null, "lineNumber": 109, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 156, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-fieldgroup/src/scripts/BaseFieldGroup.js~BaseFieldGroup#render", "access": "public", "description": null, "lineNumber": 114, "ignore": true, "params": [], "return": null }, { "__docId__": 158, "kind": "file", "name": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {transform, commons, validate} from '../../../coral-utils';\n\n// https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories\nlet LABELLABLE_ELEMENTS_SELECTOR = 'button,input:not([type=hidden]),keygen,meter,output,progress,select,textarea';\n// @polyfill ie11\n// IE11 throws syntax error because of the \"not()\" in the selector for some reason in ColorInputColorProperties\nif (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {\n LABELLABLE_ELEMENTS_SELECTOR = 'button,keygen,meter,output,progress,select,textarea,';\n\n // Since we can't use :not() we have to indicate all input types\n [\n 'text',\n 'password',\n 'submit',\n 'reset',\n 'radio',\n 'checkbox',\n 'button',\n 'color',\n 'date',\n 'datetime-local',\n 'email',\n 'month',\n 'number',\n 'range',\n 'search',\n 'tel',\n 'time',\n 'url',\n 'week'\n ].forEach((type) => {\n LABELLABLE_ELEMENTS_SELECTOR += `input[type=${type}],`;\n });\n\n // Remove last \",\"\n LABELLABLE_ELEMENTS_SELECTOR = LABELLABLE_ELEMENTS_SELECTOR.slice(0, -1);\n}\n// _onInputChange is only triggered on non-hidden inputs\nconst TARGET_INPUT_SELECTOR = 'input:not([type=hidden])';\n\n/**\n @base BaseFormField\n @classdesc The base element for Form Field components. If not extending a {@link HTMLInputElement}, following\n properties should be implemented at least :\n - disabled. Whether this field is disabled or not.\n - invalid. Whether the current value of this field is invalid or not.\n - name. Name used to submit the data in a form.\n - readOnly. Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n - required. Whether this field is required or not.\n - value. This field's current value.\n */\nclass BaseFormField extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n this._events = {\n 'capture:change input': '_onTargetInputChange',\n 'global:reset': '_onFormReset'\n };\n }\n\n /**\n Whether this field is disabled or not.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n @abstract\n */\n\n /**\n Whether the current value of this field is invalid or not.\n\n @type {Boolean}\n @default false\n @htmlattribute invalid\n @htmlattributereflected\n @abstract\n */\n\n /**\n Name used to submit the data in a form.\n\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n @abstract\n */\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n This is ignored for checkbox, radio or fileupload.\n\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n @abstract\n */\n\n /**\n Whether this field is required or not.\n\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n @abstract\n */\n\n /**\n This field's current value.\n\n @type {String}\n @default \"\"\n @htmlattribute value\n @abstract\n */\n\n /**\n Whether the current value of this field is invalid or not.\n\n @type {Boolean}\n @default false\n @htmlattribute invalid\n @htmlattributereflected\n */\n get invalid() {\n return this._invalid || false;\n }\n\n set invalid(value) {\n value = transform.booleanAttr(value);\n\n this._reflectAttribute('invalid', value);\n \n if(validate.valueMustChange(this._invalid, value)) {\n this._invalid = value;\n this.setAttribute('aria-invalid', value);\n this.classList.toggle('is-invalid', value);\n }\n }\n\n /**\n Reflects the aria-describedby attribute to the labellable element e.g. inner input.\n\n @type {String}\n @default null\n @htmlattribute describedby\n */\n get describedBy() {\n return this._getLabellableElement().getAttribute('aria-describedby');\n }\n\n set describedBy(value) {\n value = transform.string(value);\n\n this._getLabellableElement()[value ? 'setAttribute' : 'removeAttribute']('aria-describedby', value);\n }\n\n /**\n Reflects the aria-label attribute to the labellable element e.g. inner input.\n\n @type {String}\n @default null\n @htmlattribute labelled\n */\n get labelled() {\n return this._getLabellableElement().getAttribute('aria-label');\n }\n\n set labelled(value) {\n value = transform.string(value);\n\n this._getLabellableElement()[value ? 'setAttribute' : 'removeAttribute']('aria-label', value);\n }\n\n /**\n Reference to a space delimited set of ids for the HTML elements that provide a label for the formField.\n Implementers should override this method to ensure that the appropriate descendant elements are labelled using the\n aria-labelledby attribute. This will ensure that the component is properly identified for\n accessibility purposes. It reflects the aria-labelledby attribute to the DOM.\n @type {?String}\n @default null\n @htmlattribute labelledby\n */\n get labelledBy() {\n return this._getLabellableElement().getAttribute('aria-labelledby');\n }\n\n set labelledBy(value) {\n value = transform.string(value);\n\n // gets the element that will get the label assigned. the _getLabellableElement method should be overriden to\n // allow other bevaviors.\n const element = this._getLabellableElement();\n // we get and assign the it that will be passed around\n const elementId = element.id = element.id || commons.getUID();\n\n const currentLabelledBy = element.getAttribute('aria-labelledby');\n\n // we clear the old label assignments\n if (currentLabelledBy && currentLabelledBy !== value) {\n this._updateForAttributes(currentLabelledBy, elementId, true);\n }\n\n if (value) {\n element.setAttribute('aria-labelledby', value);\n if (element.matches(LABELLABLE_ELEMENTS_SELECTOR)) {\n this._updateForAttributes(value, elementId);\n }\n } else {\n // since no labelledby value was set, we remove everything\n element.removeAttribute('aria-labelledby');\n }\n }\n\n /**\n Target property inside the component that will be updated when a change event is triggered.\n @type {String}\n @default \"value\"\n @protected\n */\n get _componentTargetProperty() {\n return 'value';\n }\n\n /**\n Target property that will be taken from event.target and set into\n {@link BaseFormField#_componentTargetProperty} when a change event is triggered.\n @type {String}\n @default \"value\"\n @protected\n */\n get _eventTargetProperty() {\n return 'value';\n }\n\n /**\n Whether the change event needs to be triggered when {@link BaseFormField#_onInputChange} is called.\n @type {Boolean}\n @default true\n @protected\n */\n get _triggerChangeEvent() {\n return true;\n }\n\n /**\n Gets the element that should get the label. In case none of the valid labelelable items are found, the component\n will be labelled instead.\n @protected\n @returns {HTMLElement} the labellable element.\n */\n _getLabellableElement() {\n // Use predefined element or query it\n const element = this._labellableElement || this.querySelector(LABELLABLE_ELEMENTS_SELECTOR);\n\n // Use the found element or the container\n return element || this;\n }\n\n /**\n Gets the internal input that the BaseFormField would watch for change. By default, it searches if the\n _getLabellableElement() is an input. Components can override this function to be able to provide a\n different implementation. In case the value is null, the change event will be handled no matter\n the input that produced it.\n @protected\n @return {HTMLElement} the input to watch for changes.\n */\n _getTargetChangeInput() {\n // we use this._targetChangeInput as an internal cache to avoid querying the DOM again every time\n return this._targetChangeInput ||\n // assignment returns the value\n (this._targetChangeInput = this._getLabellableElement().matches(TARGET_INPUT_SELECTOR) ?\n this._getLabellableElement() : null);\n }\n\n /**\n Function called whenever the target component triggers a change event. _getTargetChangeInput is used\n internally to determine if the input belongs to the component. If the component decides to override this function,\n the default from the base will not be called.\n @protected\n */\n _onInputChange(event) {\n // stops the current event\n event.stopPropagation();\n\n /** @ignore */\n this[this._componentTargetProperty] = event.target[this._eventTargetProperty];\n\n // Explicitly re-emit the change event after the property has been set\n if (this._triggerChangeEvent) {\n this.trigger('change');\n }\n }\n\n /**\n Resets the formField when a reset is triggered on the parent form.\n @protected\n */\n _onFormReset(event) {\n if (event.target.contains(this)) {\n this.reset();\n }\n }\n\n /**\n We capture every input change and validate that it belongs to our target input. If this is the case,\n _onInputChange will be called with the same event.\n @protected\n */\n _onTargetInputChange(event) {\n const targetInput = this._getTargetChangeInput();\n // if the targetInput is null we still call _onInputChange to be backwards compatible\n if (targetInput === event.target || targetInput === null) {\n // we call _onInputChange since the target matches\n this._onInputChange(event);\n }\n }\n\n /**\n A utility method for adding the appropriate for attribute to any label elements\n referenced by the labelledBy property value.\n @param {String} labelledBy\n The value of the labelledBy property providing a space-delimited list of the id\n attributes for elements that label the formField.\n @param {String} elementId\n The id of the formField or one of its descendants that should be labelled by\n label elements referenced by the labelledBy property value.\n @param {Boolean} remove\n Whether the existing for attributes should be removed.\n @protected\n */\n _updateForAttributes(labelledBy, elementId, remove) {\n // labelledby contains whitespace sparated items, so we need to separate each individual id\n const labelIds = labelledBy.split(/\\s+/);\n // we update the 'for' attribute for every id.\n labelIds.forEach((currentValue) => {\n const labelElement = document.getElementById(currentValue);\n if (labelElement && labelElement.tagName === 'LABEL') {\n const forAttribute = labelElement.getAttribute('for');\n\n if (remove) {\n // we just remove it when it is our target\n if (forAttribute === elementId) {\n labelElement.removeAttribute('for');\n }\n } else {\n // if we do not have to remove, it does not matter the current value of the label, we can set it in every\n // case\n labelElement.setAttribute('for', elementId);\n }\n }\n });\n }\n\n /**\n Clears the value of formField to the default value.\n */\n clear() {\n /** @ignore */\n this.value = '';\n }\n\n /**\n Resets the value to the initial value.\n */\n reset() {\n // since the 'value' property is not reflected, form components use it to restore the initial value. When a\n // component has support for values, this method needs to be overwritten\n /** @ignore */\n this.value = transform.string(this.getAttribute('value'));\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n describedby: 'describedBy',\n labelledby: 'labelledBy',\n readonly: 'readOnly',\n });\n }\n\n // We don't want to watch existing attributes for components that extend native HTML elements\n static get _nativeObservedAttributes() {\n return super.observedAttributes.concat([\n 'describedby',\n 'labelled',\n 'labelledby',\n 'invalid'\n ]);\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'describedby',\n 'labelled',\n 'labelledby',\n 'invalid',\n 'readonly',\n 'name',\n 'value',\n 'disabled',\n 'required'\n ]);\n }\n};\n\nexport default BaseFormField;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 159, "kind": "variable", "name": "LABELLABLE_ELEMENTS_SELECTOR", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js", "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~LABELLABLE_ELEMENTS_SELECTOR", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 16, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 160, "kind": "variable", "name": "TARGET_INPUT_SELECTOR", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js", "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~TARGET_INPUT_SELECTOR", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 51, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 161, "kind": "class", "name": "BaseFormField", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js", "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for Form Field components. If not extending a {@link HTMLInputElement}, following\nproperties should be implemented at least :\n- disabled. Whether this field is disabled or not.\n- invalid. Whether the current value of this field is invalid or not.\n- name. Name used to submit the data in a form.\n- readOnly. Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n- required. Whether this field is required or not.\n- value. This field's current value.", "lineNumber": 64, "unknown": [ { "tagName": "@base", "tagValue": "BaseFormField" }, { "tagName": "@classdesc", "tagValue": "The base element for Form Field components. If not extending a {@link HTMLInputElement}, following\nproperties should be implemented at least :\n- disabled. Whether this field is disabled or not.\n- invalid. Whether the current value of this field is invalid or not.\n- name. Name used to submit the data in a form.\n- readOnly. Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n- required. Whether this field is required or not.\n- value. This field's current value." } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 162, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#constructor", "access": "public", "description": null, "lineNumber": 66, "ignore": true }, { "__docId__": 163, "kind": "member", "name": "_events", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_events", "access": "private", "description": null, "lineNumber": 69, "undocument": true, "ignore": true, "type": { "types": [ "{\"capture:change input\": string, \"global:reset\": string}" ] } }, { "__docId__": 164, "kind": "member", "name": "invalid", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#invalid", "access": "public", "description": "Whether the current value of this field is invalid or not.\n
  • false by default.
  • reflected
", "lineNumber": 143, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "invalid" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 166, "kind": "member", "name": "_invalid", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_invalid", "access": "private", "description": null, "lineNumber": 153, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 167, "kind": "member", "name": "describedBy", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#describedBy", "access": "public", "description": "Reflects the aria-describedby attribute to the labellable element e.g. inner input.\n
  • null by default.
", "lineNumber": 166, "unknown": [ { "tagName": "@default", "tagValue": "null" }, { "tagName": "@htmlattribute", "tagValue": "describedby" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 169, "kind": "member", "name": "labelled", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#labelled", "access": "public", "description": "Reflects the aria-label attribute to the labellable element e.g. inner input.\n
  • null by default.
", "lineNumber": 183, "unknown": [ { "tagName": "@default", "tagValue": "null" }, { "tagName": "@htmlattribute", "tagValue": "labelled" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 171, "kind": "member", "name": "labelledBy", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#labelledBy", "access": "public", "description": "Reference to a space delimited set of ids for the HTML elements that provide a label for the formField.\nImplementers should override this method to ensure that the appropriate descendant elements are labelled using the\naria-labelledby attribute. This will ensure that the component is properly identified for\naccessibility purposes. It reflects the aria-labelledby attribute to the DOM.\n
  • null by default.
", "lineNumber": 202, "unknown": [ { "tagName": "@default", "tagValue": "null" }, { "tagName": "@htmlattribute", "tagValue": "labelledby" } ], "type": { "nullable": true, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 173, "kind": "member", "name": "_componentTargetProperty", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_componentTargetProperty", "access": "protected", "description": "Target property inside the component that will be updated when a change event is triggered.\n
  • \"value\" by default.
", "lineNumber": 239, "unknown": [ { "tagName": "@default", "tagValue": "\"value\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "readonly", "ignore": true }, { "__docId__": 174, "kind": "member", "name": "_eventTargetProperty", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_eventTargetProperty", "access": "protected", "description": "Target property that will be taken from event.target and set into\n{@link BaseFormField#_componentTargetProperty} when a change event is triggered.\n
  • \"value\" by default.
", "lineNumber": 250, "unknown": [ { "tagName": "@default", "tagValue": "\"value\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "readonly", "ignore": true }, { "__docId__": 175, "kind": "member", "name": "_triggerChangeEvent", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_triggerChangeEvent", "access": "protected", "description": "Whether the change event needs to be triggered when {@link BaseFormField#_onInputChange} is called.\n
  • true by default.
", "lineNumber": 260, "unknown": [ { "tagName": "@default", "tagValue": "true" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "readonly", "ignore": true }, { "__docId__": 176, "kind": "method", "name": "_getLabellableElement", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_getLabellableElement", "access": "protected", "description": "Gets the element that should get the label. In case none of the valid labelelable items are found, the component\nwill be labelled instead.", "lineNumber": 270, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement} the labellable element." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "the labellable element." }, "ignore": true, "params": [] }, { "__docId__": 177, "kind": "method", "name": "_getTargetChangeInput", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_getTargetChangeInput", "access": "protected", "description": "Gets the internal input that the BaseFormField would watch for change. By default, it searches if the\n_getLabellableElement() is an input. Components can override this function to be able to provide a\ndifferent implementation. In case the value is null, the change event will be handled no matter\nthe input that produced it.", "lineNumber": 286, "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "the input to watch for changes." }, "ignore": true, "params": [] }, { "__docId__": 178, "kind": "method", "name": "_onInputChange", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_onInputChange", "access": "protected", "description": "Function called whenever the target component triggers a change event. _getTargetChangeInput is used\ninternally to determine if the input belongs to the component. If the component decides to override this function,\nthe default from the base will not be called.", "lineNumber": 300, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 179, "kind": "member", "name": "[._componentTargetProperty]", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#[._componentTargetProperty]", "access": "public", "description": null, "lineNumber": 305, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 180, "kind": "method", "name": "_onFormReset", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_onFormReset", "access": "protected", "description": "Resets the formField when a reset is triggered on the parent form.", "lineNumber": 317, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 181, "kind": "method", "name": "_onTargetInputChange", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_onTargetInputChange", "access": "protected", "description": "We capture every input change and validate that it belongs to our target input. If this is the case,\n_onInputChange will be called with the same event.", "lineNumber": 328, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 182, "kind": "method", "name": "_updateForAttributes", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#_updateForAttributes", "access": "protected", "description": "A utility method for adding the appropriate for attribute to any label elements\nreferenced by the labelledBy property value.", "lineNumber": 350, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "labelledBy", "description": "The value of the labelledBy property providing a space-delimited list of the id\nattributes for elements that label the formField." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "elementId", "description": "The id of the formField or one of its descendants that should be labelled by\nlabel elements referenced by the labelledBy property value." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": false, "name": "remove", "description": "Whether the existing for attributes should be removed." } ], "ignore": true, "return": null }, { "__docId__": 183, "kind": "method", "name": "clear", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#clear", "access": "public", "description": "Clears the value of formField to the default value.", "lineNumber": 376, "params": [], "return": null }, { "__docId__": 184, "kind": "member", "name": "value", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#value", "access": "public", "description": null, "lineNumber": 378, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 185, "kind": "method", "name": "reset", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField#reset", "access": "public", "description": "Resets the value to the initial value.", "lineNumber": 384, "params": [], "return": null }, { "__docId__": 187, "kind": "member", "name": "_attributePropertyMap", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField._attributePropertyMap", "access": "private", "description": null, "lineNumber": 391, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 188, "kind": "member", "name": "_nativeObservedAttributes", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField._nativeObservedAttributes", "access": "private", "description": null, "lineNumber": 400, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 189, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-formfield/src/scripts/BaseFormField.js~BaseFormField.observedAttributes", "access": "public", "description": null, "lineNumber": 410, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 190, "kind": "file", "name": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js", "content": "/**\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @base BaseLabellable\n @classdesc Accessibility helper for components with label and icon properties\n */\nclass BaseLabellable extends superClass {\n _observeLabel() {\n this._observableLabel = this._observableLabel || this._elements.label || this._elements.content;\n\n // Listen for mutations\n this._observer = new MutationObserver(this._toggleIconAriaHidden.bind(this));\n\n // Watch for changes to the content element\n this._observer.observe(this._observableLabel, {\n // Catch changes to childList\n childList: true,\n // Catch changes to textContent\n characterData: true,\n // Monitor any child node\n subtree: true\n });\n }\n\n // Hides the icon from screen readers to avoid duplicated labels\n _toggleIconAriaHidden() {\n this._renderedLabel = this._renderedLabel || this.label || this.content;\n\n // toggle aria-hidden if tab is labelled\n if (this._elements.icon) {\n const isLabelled = (this._renderedLabel && this._renderedLabel.textContent.trim().length) ||\n this.getAttribute('aria-label') !== null ||\n this.getAttribute('aria-labelledby') !== null;\n\n this._elements.icon[isLabelled ? 'setAttribute' : 'removeAttribute']('aria-hidden', 'true');\n }\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['aria-label', 'aria-labelledby']);\n }\n\n /** @ignore */\n attributeChangedCallback(name, oldValue, value) {\n if (name === 'aria-label' || name === 'aria-labelledby') {\n this._toggleIconAriaHidden();\n } else {\n super.attributeChangedCallback(name, oldValue, value);\n }\n }\n};\n\nexport default BaseLabellable;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 191, "kind": "class", "name": "BaseLabellable", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js", "static": true, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "Accessibility helper for components with label and icon properties", "lineNumber": 17, "unknown": [ { "tagName": "@base", "tagValue": "BaseLabellable" }, { "tagName": "@classdesc", "tagValue": "Accessibility helper for components with label and icon properties" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 192, "kind": "method", "name": "_observeLabel", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#_observeLabel", "access": "private", "description": null, "lineNumber": 18, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 193, "kind": "member", "name": "_observableLabel", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#_observableLabel", "access": "private", "description": null, "lineNumber": 19, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 194, "kind": "member", "name": "_observer", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#_observer", "access": "private", "description": null, "lineNumber": 22, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 195, "kind": "method", "name": "_toggleIconAriaHidden", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#_toggleIconAriaHidden", "access": "private", "description": null, "lineNumber": 36, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 196, "kind": "member", "name": "_renderedLabel", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#_renderedLabel", "access": "private", "description": null, "lineNumber": 37, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 197, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable.observedAttributes", "access": "public", "description": null, "lineNumber": 50, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 198, "kind": "method", "name": "attributeChangedCallback", "memberof": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-labellable/src/scripts/BaseLabellable.js~BaseLabellable#attributeChangedCallback", "access": "public", "description": null, "lineNumber": 55, "ignore": true, "params": [ { "name": "name", "types": [ "*" ] }, { "name": "oldValue", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 199, "kind": "file", "name": "coral-spectrum/coral-base-list/src/scripts/BaseList.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SelectableCollection} from '../../../coral-collection';\nimport {transform, validate} from '../../../coral-utils';\n\nconst CLASSNAME = '_coral-Menu';\n\n/**\n Enumeration for {@link BaseList} interactions.\n\n @typedef {Object} ListInteractionEnum\n\n @property {String} ON\n Keyboard interaction is enabled.\n @property {String} OFF\n Keyboard interaction is disabled.\n */\nconst interaction = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n @base BaseList\n @classdesc The base element for List components\n */\nclass BaseList extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n this._events = {\n 'mouseenter': '_onMouseEnter',\n // Keyboard interaction\n 'key:down [coral-list-item]': '_focusNextItem',\n 'key:right [coral-list-item]': '_focusNextItem',\n 'key:left [coral-list-item]': '_focusPreviousItem',\n 'key:up [coral-list-item]': '_focusPreviousItem',\n 'key:pageup [coral-list-item]': '_focusPreviousItem',\n 'key:pagedown [coral-list-item]': '_focusNextItem',\n 'key:home [coral-list-item]': '_focusFirstItem',\n 'key:end [coral-list-item]': '_focusLastItem'\n };\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // Construct the collection on first request:\n if (!this._items) {\n this._items = new SelectableCollection({\n itemTagName: this._itemTagName,\n itemBaseTagName: this._itemBaseTagName,\n itemSelector: 'coral-list-item, button[is=\"coral-buttonlist-item\"], a[is=\"coral-anchorlist-item\"]',\n host: this\n });\n }\n\n return this._items;\n }\n\n /** @private */\n get _itemTagName() {\n // Used for Collection\n return 'coral-list-item';\n }\n\n /**\n Whether interaction with the component is enabled. See {@link ListInteractionEnum}.\n\n @type {String}\n @default ListInteractionEnum.ON\n @htmlattribute interaction\n @htmlattributereflected\n */\n get interaction() {\n return this._interaction || interaction.ON;\n }\n\n set interaction(value) {\n value = transform.string(value).toLowerCase();\n this._interaction = validate.enumeration(interaction)(value) && value || interaction.ON;\n \n this._reflectAttribute('interaction', this._interaction);\n }\n\n /**\n Returns true if the event is at the matched target.\n\n @private\n */\n _eventIsAtTarget(event) {\n const target = event.target;\n const listItem = event.matchedTarget;\n\n const isAtTarget = target === listItem;\n\n if (isAtTarget) {\n // Don't let arrow keys etc scroll the page\n event.preventDefault();\n }\n\n return isAtTarget;\n }\n\n _onMouseEnter() {\n if (this.contains(document.activeElement)) {\n document.activeElement.blur();\n }\n }\n\n /** @private */\n _focusFirstItem(event) {\n if (this.interaction === interaction.OFF || !this._eventIsAtTarget(event)) {\n return;\n }\n\n const items = this._getSelectableItems();\n items.forEach((item, i) => this.setIndex(item, i === 0 ? 0 : -1));\n items[0].focus();\n }\n\n /** @private */\n _focusLastItem(event) {\n if (this.interaction === interaction.OFF || !this._eventIsAtTarget(event)) {\n return;\n }\n\n const items = this._getSelectableItems();\n items.forEach((item, i) =>\n this.setIndex(item, i === items.length - 1 ? 0 : -1)\n );\n items[items.length - 1].focus();\n }\n\n /** @private */\n _focusNextItem(event) {\n if (this.interaction === interaction.OFF || !this._eventIsAtTarget(event)) {\n return;\n }\n\n const target = event.matchedTarget;\n const items = this._getSelectableItems();\n const index = items.indexOf(target);\n\n if (index === -1) {\n // Invalid state\n return;\n }\n\n if (index < items.length - 1) {\n this.setIndex(target, -1);\n this.setIndex(items[index + 1], 0);\n items[index + 1].focus();\n } else {\n items.forEach((item, i) => this.setIndex(item, i === 0 ? 0 : -1));\n items[0].focus();\n }\n }\n\n /** @private */\n _focusPreviousItem(event) {\n if (this.interaction === interaction.OFF || !this._eventIsAtTarget(event)) {\n return;\n }\n\n const target = event.matchedTarget;\n const items = this._getSelectableItems();\n const index = items.indexOf(target);\n\n if (index === -1) {\n // Invalid state\n return;\n }\n\n if (index > 0) {\n this.setIndex(target, -1);\n this.setIndex(items[index - 1], 0);\n items[index - 1].focus();\n } else {\n items.forEach((item, i) =>\n this.setIndex(item, i === items[length - 1] ? 0 : -1)\n );\n items[items.length - 1].focus();\n }\n }\n\n /** @private */\n _getSelectableItems() {\n // Also checks if item is visible\n return this.items._getSelectableItems().filter(item => !item.hasAttribute('hidden') && item.offsetParent);\n }\n\n /** @ignore */\n focus() {\n if (!this.contains(document.activeElement)) {\n const items = this._getSelectableItems();\n if (items.length > 0) {\n items[0].focus();\n }\n }\n }\n\n setIndex(element, value) {\n if (element instanceof HTMLElement) {\n element.setAttribute(\"tabindex\", value);\n const el = element.querySelectorAll(\"button:not([hidden])\");\n const buttonArray = Array.from(el).filter(item => item.offsetParent);\n buttonArray.forEach(item => {\n item.setAttribute(\"tabindex\", value);\n });\n }\n }\n\n /**\n Returns {@link BaseList} interaction options.\n\n @return {ListInteractionEnum}\n */\n static get interaction() {\n return interaction;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['interaction']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._interaction) {\n this.interaction = interaction.ON;\n }\n }\n};\n\nexport default BaseList;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-list/src/scripts/BaseList.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 200, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js", "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 16, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 201, "kind": "typedef", "name": "ListInteractionEnum", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js", "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~ListInteractionEnum", "access": "public", "description": "Enumeration for {@link BaseList} interactions.", "lineNumber": 28, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Keyboard interaction is enabled." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Keyboard interaction is disabled." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ListInteractionEnum" } }, { "__docId__": 202, "kind": "class", "name": "BaseList", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js", "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for List components", "lineNumber": 37, "unknown": [ { "tagName": "@base", "tagValue": "BaseList" }, { "tagName": "@classdesc", "tagValue": "The base element for List components" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 203, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#constructor", "access": "public", "description": null, "lineNumber": 39, "ignore": true }, { "__docId__": 204, "kind": "member", "name": "_events", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_events", "access": "private", "description": null, "lineNumber": 42, "undocument": true, "ignore": true, "type": { "types": [ "{\"mouseenter\": string, \"key:down [coral-list-item]\": string, \"key:right [coral-list-item]\": string, \"key:left [coral-list-item]\": string, \"key:up [coral-list-item]\": string, \"key:pageup [coral-list-item]\": string, \"key:pagedown [coral-list-item]\": string, \"key:home [coral-list-item]\": string, \"key:end [coral-list-item]\": string}" ] } }, { "__docId__": 205, "kind": "member", "name": "items", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#items", "access": "public", "description": "The Collection Interface that allows interacting with the items that the component contains.\n
  • read-only
", "lineNumber": 62, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "SelectableCollection" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 206, "kind": "member", "name": "_items", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_items", "access": "private", "description": null, "lineNumber": 65, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 207, "kind": "member", "name": "_itemTagName", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_itemTagName", "access": "private", "description": null, "lineNumber": 77, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 208, "kind": "member", "name": "interaction", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#interaction", "access": "public", "description": "Whether interaction with the component is enabled. See {@link ListInteractionEnum}.\n
  • ListInteractionEnum.ON by default.
  • reflected
", "lineNumber": 90, "unknown": [ { "tagName": "@default", "tagValue": "ListInteractionEnum.ON" }, { "tagName": "@htmlattribute", "tagValue": "interaction" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 210, "kind": "member", "name": "_interaction", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_interaction", "access": "private", "description": null, "lineNumber": 96, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 211, "kind": "method", "name": "_eventIsAtTarget", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_eventIsAtTarget", "access": "private", "description": "Returns true if the event is at the matched target.", "lineNumber": 106, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 212, "kind": "method", "name": "_onMouseEnter", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_onMouseEnter", "access": "private", "description": null, "lineNumber": 120, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 213, "kind": "method", "name": "_focusFirstItem", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_focusFirstItem", "access": "private", "description": null, "lineNumber": 127, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 214, "kind": "method", "name": "_focusLastItem", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_focusLastItem", "access": "private", "description": null, "lineNumber": 138, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 215, "kind": "method", "name": "_focusNextItem", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_focusNextItem", "access": "private", "description": null, "lineNumber": 151, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 216, "kind": "method", "name": "_focusPreviousItem", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_focusPreviousItem", "access": "private", "description": null, "lineNumber": 176, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 217, "kind": "method", "name": "_getSelectableItems", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#_getSelectableItems", "access": "private", "description": null, "lineNumber": 203, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 218, "kind": "method", "name": "focus", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#focus", "access": "public", "description": null, "lineNumber": 209, "ignore": true, "params": [], "return": null }, { "__docId__": 219, "kind": "method", "name": "setIndex", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#setIndex", "access": "public", "description": null, "lineNumber": 218, "undocument": true, "params": [ { "name": "element", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 220, "kind": "member", "name": "interaction", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList.interaction", "access": "public", "description": "Returns {@link BaseList} interaction options.", "lineNumber": 234, "return": { "nullable": null, "types": [ "ListInteractionEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 221, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList.observedAttributes", "access": "public", "description": null, "lineNumber": 239, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 222, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseList.js~BaseList#render", "access": "public", "description": null, "lineNumber": 244, "ignore": true, "params": [], "return": null }, { "__docId__": 224, "kind": "file", "name": "coral-spectrum/coral-base-list/src/scripts/BaseListItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseLabellable} from '../../../coral-base-labellable';\nimport {Icon} from '../../../coral-component-icon';\nimport {transform, validate} from '../../../coral-utils';\n\nconst CLASSNAME = '_coral-Menu-item';\n\n/**\n @base BaseListItem\n @classdesc The base element for List Item components\n */\nconst BaseListItem = (superClass) => class extends BaseLabellable(superClass) {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {\n // Fetch or create the content zone element\n content: this.querySelector('coral-list-item-content') || document.createElement('coral-list-item-content')\n };\n\n super._observeLabel();\n }\n\n /**\n The content of the help item.\n\n @type {ListItemContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-list-item-content',\n insert: (content) => {\n content.classList.add(`${CLASSNAME}Label`);\n this.appendChild(content);\n super._toggleIconAriaHidden();\n }\n });\n }\n\n /**\n Whether this item is disabled.\n\n @default false\n @type {Boolean}\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n value = transform.booleanAttr(value);\n this._reflectAttribute('disabled', value);\n \n if(validate.valueMustChange(this._disabled, value)) {\n this._disabled = value;\n this.classList.toggle('is-disabled', value);\n this[value ? 'setAttribute' : 'removeAttribute']('aria-disabled', value);\n }\n }\n\n /**\n The icon to display. See {@link Icon}.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n */\n get icon() {\n const el = this._getIconElement();\n return el.icon;\n }\n\n set icon(value) {\n const el = this._getIconElement();\n if (transform.string(value) === '') {\n el.remove();\n } else {\n this.insertBefore(el, this.firstChild);\n }\n\n el.icon = value;\n\n super._toggleIconAriaHidden();\n }\n\n _getIconElement() {\n if (!this._elements.icon) {\n this._elements.icon = this.querySelector('._coral-Menu-item-icon') || new Icon();\n this._elements.icon.size = Icon.size.SMALL;\n this._elements.icon.classList.add('_coral-Menu-item-icon');\n }\n return this._elements.icon;\n }\n\n get _contentZones() {\n return {'coral-list-item-content': 'content'};\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['disabled', 'icon']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // The attribute that makes different types of list items co-exist\n // This is also used for event delegation\n this.setAttribute('coral-list-item', '');\n\n // Fetch or create the content content zone element\n const content = this._elements.content;\n\n // This stops the content zone from being voracious\n if (!content.parentNode) {\n // move the contents of the item into the content zone\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n }\n\n // Assign the content zones, moving them into place in the process\n this.icon = this.icon;\n this.content = content;\n }\n};\n\nexport default BaseListItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-list/src/scripts/BaseListItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 225, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseListItem.js", "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseListItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 226, "kind": "function", "name": "BaseListItem", "memberof": "coral-spectrum/coral-base-list/src/scripts/BaseListItem.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-list/src/scripts/BaseListItem.js~BaseListItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for List Item components", "lineNumber": 23, "unknown": [ { "tagName": "@base", "tagValue": "BaseListItem" }, { "tagName": "@classdesc", "tagValue": "The base element for List Item components" } ], "params": [ { "name": "superClass", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 227, "kind": "file", "name": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport base from '../templates/base';\nimport Vent from '@adobe/vent';\nimport {validate, transform, commons} from '../../../coral-utils';\nimport {trapFocus, returnFocus, focusOnShow, scrollOnFocus, FADETIME} from './enums';\n\nconst CLASSNAME = '_coral-BaseOverlay';\n\n// Includes overlay itself\nconst COMPONENTS_WITH_OVERLAY = `\n coral-actionbar,\n coral-autocomplete,\n coral-colorinput,\n coral-cyclebutton,\n coral-datepicker,\n coral-dialog,\n coral-overlay,\n coral-popover,\n coral-quickactions,\n coral-select,\n coral-tooltip\n`;\n\n// The tab capture element that lives at the top of the body\nlet topTabCaptureEl;\nlet bottomTabCaptureEl;\n\n// A reference to the backdrop element\nlet backdropEl;\n\n// The starting zIndex for overlays\nconst startZIndex = 10000;\n\n// Tab keycode\nconst TAB_KEY = 9;\n\n// A stack interface for overlays\nconst overlayStack = [];\nlet OverlayManager = {};\n\n/**\n Return focus option\n */\nfunction preventScroll(instance) {\n return {preventScroll: instance.scrollOnFocus === scrollOnFocus.OFF};\n}\n\n/**\n Cancel the backdrop hide mid-animation.\n */\nlet fadeTimeout;\n\nfunction cancelBackdropHide() {\n window.clearTimeout(fadeTimeout);\n}\n\n/**\n Set aria-hidden on every immediate child except the one passed, which should not be hidden.\n */\nfunction hideEverythingBut(instance) {\n // ARIA: Hide all the things\n const children = document.body.children;\n for (let i = 0 ; i < children.length ; i++) {\n const child = children[i];\n\n // If it's not a parent of or not the instance itself, it needs to be hidden\n if (child !== instance && child.contains && !child.contains(instance)) {\n const currentAriaHidden = child.getAttribute('aria-hidden');\n if (currentAriaHidden) {\n // Store the previous value of aria-hidden if present\n // Don't blow away the previously stored value\n child._previousAriaHidden = child._previousAriaHidden || currentAriaHidden;\n if (currentAriaHidden === 'true') {\n // It's already true, don't bother setting\n continue;\n }\n } else {\n // Nothing is hidden by default, store that\n child._previousAriaHidden = 'false';\n }\n\n // Hide it\n child.setAttribute('aria-hidden', 'true');\n }\n }\n\n // Always show ourselves\n instance.setAttribute('aria-hidden', 'false');\n}\n\n/**\n Actually reposition the backdrop to be under the topmost overlay.\n */\nfunction doRepositionBackdrop() {\n // Position under the topmost overlay\n const top = OverlayManager.top();\n\n if (top) {\n // The backdrop, if shown, should be positioned under the topmost overlay that does have a backdrop\n for (let i = overlayStack.length - 1 ; i > -1 ; i--) {\n if (overlayStack[i].backdrop) {\n backdropEl.style.zIndex = overlayStack[i].zIndex - 1;\n break;\n }\n }\n\n // ARIA: Set hidden properly\n hideEverythingBut(top.instance);\n }\n}\n\nOverlayManager = {\n pop(instance) {\n // Get overlay index\n const index = this.indexOf(instance);\n\n if (index === -1) {\n return null;\n }\n\n // Get the overlay\n const overlay = overlayStack[index];\n\n // Remove from the stack\n overlayStack.splice(index, 1);\n\n // Return the passed overlay or the found overlay\n return overlay;\n },\n\n push(instance) {\n // Pop overlay\n const overlay = this.pop(instance) || {instance};\n\n // Get the new highest zIndex\n const zIndex = this.getHighestZIndex() + 10;\n\n // Store the zIndex\n overlay.zIndex = zIndex;\n instance.style.zIndex = zIndex;\n\n // Push it\n overlayStack.push(overlay);\n\n if (overlay.backdrop) {\n // If the backdrop is shown, we'll need to reposition it\n // Generally, a component will not call _pushOverlay unnecessarily\n // However, attachedCallback is asynchronous in polyfilld environments,\n // so _pushOverlay will be called when shown and when attached\n doRepositionBackdrop();\n }\n\n return overlay;\n },\n\n indexOf(instance) {\n // Loop over stack\n // Find overlay\n // Return index\n for (let i = 0 ; i < overlayStack.length ; i++) {\n if (overlayStack[i].instance === instance) {\n return i;\n }\n }\n return -1;\n },\n\n get(instance) {\n // Get overlay index\n const index = this.indexOf(instance);\n\n // Return overlay\n return index === -1 ? null : overlayStack[index];\n },\n\n top() {\n const length = overlayStack.length;\n return length === 0 ? null : overlayStack[length - 1];\n },\n\n getHighestZIndex() {\n const overlay = this.top();\n return overlay ? overlay.zIndex : startZIndex;\n },\n\n some(...args) {\n return overlayStack.some(...args);\n },\n\n forEach(...args) {\n return overlayStack.forEach(...args);\n }\n};\n\n/**\n Create the global tab capture element.\n */\nfunction createDocumentTabCaptureEls() {\n if (!topTabCaptureEl) {\n topTabCaptureEl = document.createElement('div');\n topTabCaptureEl.setAttribute('coral-tabcapture', '');\n topTabCaptureEl.setAttribute('role', 'presentation');\n topTabCaptureEl.tabIndex = 0;\n document.body.insertBefore(topTabCaptureEl, document.body.firstChild);\n topTabCaptureEl.addEventListener('focus', () => {\n const top = OverlayManager.top();\n if (top && top.instance.trapFocus === trapFocus.ON) {\n // Focus on the first tabbable element of the top overlay\n Array.prototype.some.call(top.instance.querySelectorAll(commons.TABBABLE_ELEMENT_SELECTOR), (item) => {\n if (item.offsetParent !== null && !item.hasAttribute('coral-tabcapture')) {\n item.focus(preventScroll(top));\n return true;\n }\n\n return false;\n });\n }\n });\n\n bottomTabCaptureEl = document.createElement('div');\n bottomTabCaptureEl.setAttribute('coral-tabcapture', '');\n bottomTabCaptureEl.setAttribute('role', 'presentation');\n bottomTabCaptureEl.tabIndex = 0;\n document.body.appendChild(bottomTabCaptureEl);\n bottomTabCaptureEl.addEventListener('focus', () => {\n const top = OverlayManager.top();\n if (top && top.instance.trapFocus === trapFocus.ON) {\n const tabbableElement = Array.prototype.filter.call(top.instance.querySelectorAll(commons.TABBABLE_ELEMENT_SELECTOR), (item) => item.offsetParent !== null && !item.hasAttribute('coral-tabcapture')).pop();\n\n // Focus on the last tabbable element of the top overlay\n if (tabbableElement) {\n tabbableElement.focus(preventScroll(top));\n }\n }\n });\n } else {\n if (document.body.firstElementChild !== topTabCaptureEl) {\n // Make sure we stay at the very top\n document.body.insertBefore(topTabCaptureEl, document.body.firstChild);\n }\n\n if (document.body.lastElementChild !== bottomTabCaptureEl) {\n // Make sure we stay at the very bottom\n document.body.appendChild(bottomTabCaptureEl);\n }\n }\n\n // Make sure the tab capture elemenst are shown\n topTabCaptureEl.style.display = 'inline';\n bottomTabCaptureEl.style.display = 'inline';\n}\n\n/**\n Called after all overlays are hidden and we shouldn't capture the first tab into the page.\n */\nfunction hideDocumentTabCaptureEls() {\n if (topTabCaptureEl) {\n topTabCaptureEl.style.display = 'none';\n bottomTabCaptureEl.style.display = 'none';\n }\n}\n\n/**\n Show or restore the aria-hidden state of every child of body.\n */\nfunction showEverything() {\n // ARIA: Show all the things\n const children = document.body.children;\n for (let i = 0 ; i < children.length ; i++) {\n const child = children[i];\n // Restore the previous aria-hidden value\n child.setAttribute('aria-hidden', child._previousAriaHidden || 'false');\n }\n}\n\n/**\n Actually hide the backdrop.\n */\nfunction doBackdropHide() {\n document.body.classList.remove('u-coral-noscroll');\n\n // Start animation\n window.requestAnimationFrame(() => {\n backdropEl.classList.remove('is-open');\n\n cancelBackdropHide();\n fadeTimeout = window.setTimeout(() => {\n backdropEl.style.display = 'none';\n }, FADETIME);\n });\n\n // Set flag for testing\n backdropEl._isOpen = false;\n\n // Wait for animation to complete\n showEverything();\n}\n\n/**\n Hide the backdrop if no overlays are using it.\n */\nfunction hideOrRepositionBackdrop() {\n if (!backdropEl || !backdropEl._isOpen) {\n // Do nothing if the backdrop isn't shown\n return;\n }\n\n // Loop over all overlays\n const keepBackdrop = OverlayManager.some((overlay) => {\n // Check for backdrop usage\n return !!overlay.backdrop;\n });\n\n if (!keepBackdrop) {\n // Hide the backdrop\n doBackdropHide();\n } else {\n // Reposition the backdrop\n doRepositionBackdrop();\n }\n\n // Hide/create the document-level tab capture element as necessary\n // This only applies to modal overlays (those that have backdrops)\n const top = OverlayManager.top();\n if (!top || !(top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop)) {\n hideDocumentTabCaptureEls();\n } else if (top && top.instance.trapFocus === trapFocus.ON && top.instance._requestedBackdrop) {\n createDocumentTabCaptureEls();\n }\n}\n\n/**\n Handles clicks to the backdrop, calling backdropClickedCallback for every overlay\n */\nfunction handleBackdropClick(event) {\n OverlayManager.forEach((overlay) => {\n if (typeof overlay.instance.backdropClickedCallback === 'function') {\n overlay.instance.backdropClickedCallback(event);\n }\n });\n}\n\n/**\n Actually show the backdrop.\n */\nfunction doBackdropShow(zIndex, instance) {\n document.body.classList.add('u-coral-noscroll');\n\n if (!backdropEl) {\n backdropEl = document.createElement('div');\n backdropEl.className = '_coral-Underlay';\n document.body.appendChild(backdropEl);\n\n backdropEl.addEventListener('click', handleBackdropClick);\n }\n\n // Show just under the provided zIndex\n // Since we always increment by 10, this will never collide\n backdropEl.style.zIndex = zIndex - 1;\n\n // Set flag for testing\n backdropEl._isOpen = true;\n\n // Start animation\n backdropEl.style.display = '';\n window.requestAnimationFrame(() => {\n // Add the class on the next animation frame so backdrop has time to exist\n // Otherwise, the animation for opacity will not work.\n backdropEl.classList.add('is-open');\n\n cancelBackdropHide();\n });\n\n hideEverythingBut(instance);\n}\n\n/**\n @base BaseOverlay\n @classdesc The base element for Overlay components\n */\nclass BaseOverlay extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {};\n base.call(this._elements);\n }\n\n /**\n Whether to trap tabs and keep them within the overlay. See {@link OverlayTrapFocusEnum}.\n\n @type {String}\n @default OverlayTrapFocusEnum.OFF\n @htmlattribute trapfocus\n */\n get trapFocus() {\n return this._trapFocus || trapFocus.OFF;\n }\n\n set trapFocus(value) {\n value = transform.string(value).toLowerCase();\n this._trapFocus = validate.enumeration(trapFocus)(value) && value || trapFocus.OFF;\n\n if (this._trapFocus === trapFocus.ON) {\n // Give ourselves tabIndex if we are not focusable\n if (this.tabIndex < 0) {\n /** @ignore */\n this.tabIndex = 0;\n }\n\n // Insert elements\n this.insertBefore(this._elements.topTabCapture, this.firstElementChild);\n this.appendChild(this._elements.intermediateTabCapture);\n this.appendChild(this._elements.bottomTabCapture);\n\n // Add listeners\n this._handleTabCaptureFocus = this._handleTabCaptureFocus.bind(this);\n this._handleRootKeypress = this._handleRootKeypress.bind(this);\n this._vent.on('keydown', this._handleRootKeypress);\n this._vent.on('focus', '[coral-tabcapture]', this._handleTabCaptureFocus);\n\n } else if (this._trapFocus === trapFocus.OFF) {\n // Remove elements\n this._elements.topTabCapture && this._elements.topTabCapture.remove();\n this._elements.intermediateTabCapture && this._elements.intermediateTabCapture.remove();\n this._elements.bottomTabCapture && this._elements.bottomTabCapture.remove();\n\n // Remove listeners\n this._vent.off('keydown', this._handleRootKeypress);\n this._vent.off('focus', '[coral-tabcapture]', this._handleTabCaptureFocus);\n }\n }\n\n /**\n Whether to return focus to the previously focused element when closed. See {@link OverlayReturnFocusEnum}.\n\n @type {String}\n @default OverlayReturnFocusEnum.OFF\n @htmlattribute returnfocus\n */\n get returnFocus() {\n return this._returnFocus || returnFocus.OFF;\n }\n\n set returnFocus(value) {\n value = transform.string(value).toLowerCase();\n this._returnFocus = validate.enumeration(returnFocus)(value) && value || returnFocus.OFF;\n }\n\n /**\n returns element that will receive focus when overlay is closed\n @returns {HTMLElement}element passed via returnFocusTo()\n */\n get returnFocusToElement() {\n return this._returnFocusToElement;\n }\n\n /**\n returns element that will receive focus when overlay is hidden\n @returns {HTMLElement} element cached\n */\n get elementToFocusWhenHidden() {\n return this._elementToFocusWhenHidden;\n }\n\n /**\n Whether the browser should scroll the document to bring the newly-focused element into view. See {@link OverlayScrollOnFocusEnum}.\n\n @type {String}\n @default OverlayScrollOnFocusEnum.ON\n @htmlattribute scrollonfocus\n */\n get scrollOnFocus() {\n return this._scrollOnFocus || scrollOnFocus.ON;\n }\n\n set scrollOnFocus(value) {\n value = transform.string(value).toLowerCase();\n this._scrollOnFocus = validate.enumeration(scrollOnFocus)(value) && value || scrollOnFocus.ON;\n }\n\n /**\n Whether to focus the overlay, when opened or not. By default the overlay itself will get the focus. It also accepts\n an instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type'. If the selector returns\n multiple elements, it will focus the first element inside the overlay that matches the selector.\n See {@link OverlayFocusOnShowEnum}.\n\n @type {HTMLElement|String}\n @default OverlayFocusOnShowEnum.ON\n @htmlattribute focusonshow\n */\n get focusOnShow() {\n return this._focusOnShow || focusOnShow.ON;\n }\n\n set focusOnShow(value) {\n if (typeof value === 'string' || value instanceof HTMLElement) {\n this._focusOnShow = value;\n }\n }\n\n /**\n Whether this overlay is open or not.\n\n @type {Boolean}\n @default false\n @htmlattribute open\n @htmlattributereflected\n @emits {coral-overlay:open}\n @emits {coral-overlay:close}\n @emits {coral-overlay:beforeopen}\n @emits {coral-overlay:beforeclose}\n */\n get open() {\n return this._open || false;\n }\n\n set open(value) {\n const silenced = this._silenced;\n\n value = transform.booleanAttr(value);\n\n // Used for global animations\n this.trigger('coral-overlay:_animate');\n\n const beforeEvent = this.trigger(value ? 'coral-overlay:beforeopen' : 'coral-overlay:beforeclose');\n\n if (!beforeEvent.defaultPrevented) {\n const open = this._open = value;\n this._reflectAttribute('open', open);\n\n // Remove aria-hidden attribute before we show.\n // Otherwise, screen readers will not announce\n // Doesn't matter when we set aria-hidden true (nothing being announced)\n if (open) {\n this.removeAttribute('aria-hidden');\n } else {\n this.setAttribute('aria-hidden', !open);\n }\n\n // Don't do anything if we're not in the DOM yet\n // This prevents errors related to allocating a zIndex we don't need\n if (this.parentNode) {\n // Do this check afterwards as we may have been appended inside of _show()\n if (open) {\n // Set z-index\n this._pushOverlay();\n\n if (this.returnFocus === returnFocus.ON) {\n this._elementToFocusWhenHidden =\n // cached element\n this._elementToFocusWhenHidden ||\n // element passed via returnFocusTo()\n this._returnFocusToElement ||\n // element that had focus before opening the overlay\n (document.activeElement === document.body ? null : document.activeElement);\n }\n } else {\n // Release zIndex\n this._popOverlay();\n }\n }\n\n // Don't force reflow\n window.requestAnimationFrame(() => {\n // Keep it silenced\n this._silenced = silenced;\n\n if (open) {\n if (this.trapFocus === trapFocus.ON) {\n // Make sure tab capture elements are positioned correctly\n if (\n // Tab capture elements are no longer at the bottom\n this._elements.topTabCapture !== this.firstElementChild ||\n this._elements.bottomTabCapture !== this.lastElementChild ||\n // Tab capture elements have been separated\n this._elements.bottomTabCapture.previousElementSibling !== this._elements.intermediateTabCapture\n ) {\n this.insertBefore(this._elements.intermediateTabCapture, this.firstElementChild);\n this.appendChild(this._elements.intermediateTabCapture);\n this.appendChild(this._elements.bottomTabCapture);\n }\n }\n\n // visibility should revert to whatever is specified in CSS, so that transition renders.\n this.style.visibility = '';\n\n // The default style should be display: none for overlays\n // Show ourselves first for centering calculations etc\n this.style.display = '';\n\n // Do it in the next frame to make the animation happen\n window.requestAnimationFrame(() => {\n this.classList.add('is-open');\n });\n\n const openComplete = () => {\n if (this.open) {\n this._debounce(() => {\n // handles the focus behavior based on accessibility recommendations\n this._handleFocus();\n\n this.trigger('coral-overlay:open');\n this._silenced = false;\n });\n }\n };\n\n if (this._overlayAnimationTime) {\n // Wait for animation to complete\n commons.transitionEnd(this, openComplete);\n } else {\n // Execute immediately\n openComplete();\n }\n } else {\n // Fade out\n this.classList.remove('is-open');\n\n const closeComplete = () => {\n if (!this.open) {\n\n // When the CSS transition has finished, set visibility to browser default, `visibility: visible`,\n // to ensure that the overlay will be included in accessibility name or description\n // of an element that references it using `aria-labelledby` or `aria-describedby`.\n this.style.visibility = 'visible';\n\n // makes sure the focus is returned per accessibility recommendations\n this._handleReturnFocus();\n\n // Hide self\n this.style.display = 'none';\n\n this._debounce(() => {\n // Inform child overlays that we're closing\n this._closeChildOverlays();\n\n this.trigger('coral-overlay:close');\n this._silenced = false;\n });\n }\n };\n\n if (this._overlayAnimationTime) {\n // Wait for animation to complete\n commons.transitionEnd(this, closeComplete);\n } else {\n // Execute immediately\n closeComplete();\n }\n }\n });\n }\n }\n\n _closeChildOverlays() {\n const components = this.querySelectorAll(COMPONENTS_WITH_OVERLAY);\n\n // Close all children overlays and components with overlays\n for (let i = 0 ; i < components.length ; i++) {\n const component = components[i];\n\n // Overlay component\n if (component.hasAttribute('open')) {\n component.removeAttribute('open');\n }\n // Component that uses an overlay\n else if (component._elements && component._elements.overlay && component._elements.overlay.hasAttribute('open')) {\n component._elements.overlay.removeAttribute('open');\n }\n }\n }\n\n /** @private */\n _debounce(f) {\n // Used to avoid triggering open/close event continuously\n window.clearTimeout(this._debounceId);\n this._debounceId = window.setTimeout(() => {\n f();\n }, 10);\n }\n\n /**\n Check if this overlay is the topmost.\n\n @protected\n */\n _isTopOverlay() {\n const top = OverlayManager.top();\n return top && top.instance === this;\n }\n\n /**\n Push the overlay to the top of the stack.\n\n @protected\n */\n _pushOverlay() {\n OverlayManager.push(this);\n }\n\n /**\n Remove the overlay from the stack.\n\n @protected\n */\n _popOverlay() {\n OverlayManager.pop(this);\n\n // Automatically hide the backdrop if required\n hideOrRepositionBackdrop();\n }\n\n /**\n Show the backdrop.\n\n @protected\n */\n _showBackdrop() {\n const overlay = OverlayManager.get(this);\n\n // Overlay is not tracked unless the component is in the DOM\n // Hence, we need to check\n if (overlay) {\n overlay.backdrop = true;\n doBackdropShow(overlay.zIndex, this);\n }\n\n // Mark on the instance that the backdrop has been requested for this overlay\n this._requestedBackdrop = true;\n\n // Mark that the backdrop was requested when not attached to the DOM\n // This allows us to know whether to push the overlay when the component is attached\n if (!this.parentNode) {\n this._showBackdropOnAttached = true;\n }\n\n if (this.trapFocus === trapFocus.ON) {\n createDocumentTabCaptureEls();\n }\n }\n\n /**\n Show the backdrop.\n\n @protected\n */\n _hideBackdrop() {\n const overlay = OverlayManager.get(this);\n\n if (overlay) {\n overlay.backdrop = false;\n\n // If that was the last overlay using the backdrop, hide it\n hideOrRepositionBackdrop();\n }\n\n // Mark on the instance that the backdrop is no longer needed\n this._requestedBackdrop = false;\n }\n\n /**\n Handles keypresses on the root of the overlay and marshalls focus accordingly.\n\n @protected\n */\n _handleRootKeypress(event) {\n if (event.target === this && event.keyCode === TAB_KEY) {\n // Skip the top tabcapture and focus on the first focusable element\n this._focusOn('first');\n\n // Stop the normal tab behavior\n event.preventDefault();\n }\n }\n\n /**\n Handles focus events on tab capture elements.\n\n @protected\n */\n _handleTabCaptureFocus(event) {\n // Avoid moving around if we're trying to focus on coral-tabcapture\n if (this._ignoreTabCapture) {\n this._ignoreTabCapture = false;\n return;\n }\n\n // Focus on the correct tabbable element\n const target = event.target;\n const which = target === this._elements.intermediateTabCapture ? 'first' : 'last';\n\n this._focusOn(which);\n }\n\n /**\n Handles the focus behavior. When \"on\" is specified it would try to find the first tababble descendent in the\n content and if there are no valid candidates it will focus the element itself.\n\n @protected\n */\n _handleFocus() {\n // ON handles the focusing per accessibility recommendations\n if (this.focusOnShow === focusOnShow.ON) {\n this._focusOn('first');\n if (this._elementToFocusWhenHidden) {\n this._elementToFocusWhenHidden.setAttribute('aria-expanded', 'true');\n }\n } else if (this.focusOnShow instanceof HTMLElement) {\n this.focusOnShow.focus(preventScroll(this));\n } else if (typeof this.focusOnShow === 'string' && this.focusOnShow !== focusOnShow.OFF) {\n // we need to add :not([coral-tabcapture]) to avoid selecting the tab captures\n const selectedElement = this.querySelector(`${this.focusOnShow}:not([coral-tabcapture])`);\n\n if (selectedElement) {\n selectedElement.focus(preventScroll(this));\n }\n // in case the selector does not match, it should fallback to the default behavior\n else {\n this._focusOn('first');\n }\n }\n }\n\n /**\n @protected\n */\n _handleReturnFocus() {\n if (this.returnFocus === returnFocus.ON && this._elementToFocusWhenHidden) {\n if (document.activeElement && !this.contains(document.activeElement)) {\n // Don't return focus if the user focused outside of the overlay\n return;\n }\n\n this._elementToFocusWhenHidden.setAttribute('aria-expanded', 'false');\n\n // Return focus, ignoring tab capture if it is an overlay\n this._elementToFocusWhenHidden._ignoreTabCapture = true;\n this._elementToFocusWhenHidden.focus(preventScroll(this));\n this._elementToFocusWhenHidden._ignoreTabCapture = false;\n\n // Drop the reference to avoid memory leaks\n this._elementToFocusWhenHidden = null;\n }\n }\n\n /**\n Focus on the first or last element.\n\n @param {String} which\n one of \"first\" or \"last\"\n @protected\n */\n _focusOn(which) {\n const focusableTarget = this._getFocusableElement(which);\n\n // if we found a focusing target we focus it\n if (focusableTarget) {\n focusableTarget.focus(preventScroll(this));\n }\n // otherwise the element itself should get focus\n else {\n this.focus(preventScroll(this));\n }\n }\n\n _getFocusableElements() {\n return Array.prototype.filter.call(this.querySelectorAll(commons.FOCUSABLE_ELEMENT_SELECTOR), item => item.offsetParent !== null && !item.hasAttribute('coral-tabcapture'));\n }\n\n _getFocusableElement(which) {\n let focusableTarget;\n\n if (which === 'first' || which === 'last') {\n const focusableElements = this._getFocusableElements();\n focusableTarget = focusableElements[which === 'first' ? 'shift' : 'pop']();\n }\n\n return focusableTarget;\n }\n\n /**\n Open the overlay and set the z-index accordingly.\n\n @returns {BaseOverlay} this, chainable\n */\n show() {\n this.open = true;\n\n return this;\n }\n\n /**\n Close the overlay.\n\n @returns {BaseOverlay} this, chainable\n */\n hide() {\n this.open = false;\n\n return this;\n }\n\n /**\n Set the element that focus should be returned to when the overlay is hidden.\n\n @param {HTMLElement} element\n The element to return focus to. This must be a DOM element, not a jQuery object or selector.\n\n @returns {BaseOverlay} this, chainable\n */\n returnFocusTo(element) {\n if (this.returnFocus === returnFocus.OFF) {\n // Switch on returning focus if it's off\n this.returnFocus = returnFocus.ON;\n }\n\n // If the element is not focusable,\n if (!element.matches(commons.FOCUSABLE_ELEMENT_SELECTOR)) {\n // add tabindex so that it is programmatically focusable.\n element.setAttribute('tabindex', -1);\n\n // On blur, restore element to its prior, not-focusable state\n const tempVent = new Vent(element);\n tempVent.on('blur.afterFocus', (event) => {\n // Wait a frame before testing whether focus has moved to an open overlay or to some other element.\n window.requestAnimationFrame(() => {\n // If overlay remains open, don't remove tabindex event handler until after it has been closed\n const top = OverlayManager.top();\n if (top && top.instance.contains(document.activeElement)) {\n return;\n }\n tempVent.off('blur.afterFocus');\n event.matchedTarget.removeAttribute('tabindex');\n });\n }, true);\n }\n\n this._returnFocusToElement = element;\n return this;\n }\n\n static get _OverlayManager() {\n return OverlayManager;\n }\n\n /**\n Returns {@link BaseOverlay} trap focus options.\n\n @return {OverlayTrapFocusEnum}\n */\n static get trapFocus() {\n return trapFocus;\n }\n\n /**\n Returns {@link BaseOverlay} return focus options.\n\n @return {OverlayReturnFocusEnum}\n */\n static get returnFocus() {\n return returnFocus;\n }\n\n /**\n Returns {@link BaseOverlay} scroll focus options.\n\n @return {OverlayScrollOnFocusEnum}\n */\n static get scrollOnFocus() {\n return scrollOnFocus;\n }\n\n /**\n Returns {@link BaseOverlay} focus on show options.\n\n @return {OverlayFocusOnShowEnum}\n */\n static get focusOnShow() {\n return focusOnShow;\n }\n\n /**\n Returns {@link BaseOverlay} fadetime in milliseconds.\n\n @return {Number}\n */\n static get FADETIME() {\n return FADETIME;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n trapfocus: 'trapFocus',\n returnfocus: 'returnFocus',\n focusonshow: 'focusOnShow',\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'trapfocus',\n 'returnfocus',\n 'focusonshow',\n 'open'\n ]);\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n if (!this.hasAttribute('trapfocus')) {\n this.trapFocus = this.trapFocus;\n }\n if (!this.hasAttribute('returnfocus')) {\n this.returnFocus = this.returnFocus;\n }\n if (!this.hasAttribute('focusonshow')) {\n this.focusOnShow = this.focusOnShow;\n }\n if (!this.hasAttribute('scrollonfocus')) {\n this.scrollOnFocus = this.scrollOnFocus;\n }\n\n if (this.open) {\n this._pushOverlay();\n\n if (this._showBackdropOnAttached) {\n // Show the backdrop again\n this._showBackdrop();\n }\n } else {\n // If overlay is closed, make sure that it is hidden with `display: none`,\n // but set `visibility: visible` to ensure that the overlay will be included in accessibility name or description\n // of an element that references it using `aria-labelledby` or `aria-describedby`.\n this.style.display = 'none';\n this.style.visibility = 'visible';\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.open) {\n // Release zIndex as we're not in the DOM any longer\n // When we're re-added, we'll get a new zIndex\n this._popOverlay();\n\n if (this._requestedBackdrop) {\n // Mark that we'll need to show the backdrop when attached\n this._showBackdropOnAttached = true;\n }\n }\n }\n\n /**\n Called when the {@link BaseOverlay} is clicked.\n\n @function backdropClickedCallback\n @protected\n */\n\n /**\n Triggered before the {@link BaseOverlay} is opened with show() or instance.open = true.\n\n @typedef {CustomEvent} coral-overlay:beforeopen\n\n @property {function} preventDefault\n Call to stop the overlay from opening.\n */\n\n /**\n Triggered after the {@link BaseOverlay} is opened with show() or instance.open = true\n\n @typedef {CustomEvent} coral-overlay:open\n */\n\n /**\n Triggered before the {@link BaseOverlay} is closed with hide() or instance.open = false.\n\n @typedef {CustomEvent} coral-overlay:beforeclose\n\n @property {function} preventDefault\n Call to stop the overlay from closing.\n */\n\n /**\n Triggered after the {@link BaseOverlay} is closed with hide() or instance.open = false\n\n @typedef {CustomEvent} coral-overlay:close\n */\n};\n\nexport default BaseOverlay;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 228, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 229, "kind": "variable", "name": "COMPONENTS_WITH_OVERLAY", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~COMPONENTS_WITH_OVERLAY", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 230, "kind": "variable", "name": "startZIndex", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~startZIndex", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 43, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 231, "kind": "variable", "name": "TAB_KEY", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~TAB_KEY", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 46, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 232, "kind": "variable", "name": "overlayStack", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~overlayStack", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 49, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 233, "kind": "variable", "name": "OverlayManager", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~OverlayManager", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 50, "undocument": true, "type": { "types": [ "{}" ] }, "ignore": true }, { "__docId__": 234, "kind": "function", "name": "preventScroll", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~preventScroll", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Return focus option", "lineNumber": 55, "params": [ { "name": "instance", "types": [ "*" ] } ], "return": { "types": [ "{\"preventScroll\": *}" ] }, "ignore": true }, { "__docId__": 235, "kind": "function", "name": "cancelBackdropHide", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~cancelBackdropHide", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 64, "undocument": true, "params": [], "return": null, "ignore": true }, { "__docId__": 236, "kind": "function", "name": "hideEverythingBut", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~hideEverythingBut", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Set aria-hidden on every immediate child except the one passed, which should not be hidden.", "lineNumber": 71, "params": [ { "name": "instance", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 237, "kind": "function", "name": "doRepositionBackdrop", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~doRepositionBackdrop", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Actually reposition the backdrop to be under the topmost overlay.", "lineNumber": 105, "params": [], "return": null, "ignore": true }, { "__docId__": 238, "kind": "function", "name": "createDocumentTabCaptureEls", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~createDocumentTabCaptureEls", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Create the global tab capture element.", "lineNumber": 209, "params": [], "return": null, "ignore": true }, { "__docId__": 239, "kind": "function", "name": "hideDocumentTabCaptureEls", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~hideDocumentTabCaptureEls", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Called after all overlays are hidden and we shouldn't capture the first tab into the page.", "lineNumber": 267, "params": [], "return": null, "ignore": true }, { "__docId__": 240, "kind": "function", "name": "showEverything", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~showEverything", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Show or restore the aria-hidden state of every child of body.", "lineNumber": 277, "params": [], "return": null, "ignore": true }, { "__docId__": 241, "kind": "function", "name": "doBackdropHide", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~doBackdropHide", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Actually hide the backdrop.", "lineNumber": 290, "params": [], "return": null, "ignore": true }, { "__docId__": 242, "kind": "function", "name": "hideOrRepositionBackdrop", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~hideOrRepositionBackdrop", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Hide the backdrop if no overlays are using it.", "lineNumber": 313, "params": [], "return": null, "ignore": true }, { "__docId__": 243, "kind": "function", "name": "handleBackdropClick", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~handleBackdropClick", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Handles clicks to the backdrop, calling backdropClickedCallback for every overlay", "lineNumber": 346, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 244, "kind": "function", "name": "doBackdropShow", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~doBackdropShow", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Actually show the backdrop.", "lineNumber": 357, "params": [ { "name": "zIndex", "types": [ "*" ] }, { "name": "instance", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 245, "kind": "class", "name": "BaseOverlay", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for Overlay components", "lineNumber": 392, "unknown": [ { "tagName": "@base", "tagValue": "BaseOverlay" }, { "tagName": "@classdesc", "tagValue": "The base element for Overlay components" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 246, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#constructor", "access": "public", "description": null, "lineNumber": 394, "ignore": true }, { "__docId__": 247, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_elements", "access": "private", "description": null, "lineNumber": 398, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 248, "kind": "member", "name": "trapFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#trapFocus", "access": "public", "description": "Whether to trap tabs and keep them within the overlay. See {@link OverlayTrapFocusEnum}.\n
  • OverlayTrapFocusEnum.OFF by default.
", "lineNumber": 409, "unknown": [ { "tagName": "@default", "tagValue": "OverlayTrapFocusEnum.OFF" }, { "tagName": "@htmlattribute", "tagValue": "trapfocus" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 250, "kind": "member", "name": "_trapFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_trapFocus", "access": "private", "description": null, "lineNumber": 415, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 251, "kind": "member", "name": "tabIndex", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#tabIndex", "access": "public", "description": null, "lineNumber": 421, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 254, "kind": "member", "name": "returnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#returnFocus", "access": "public", "description": "Whether to return focus to the previously focused element when closed. See {@link OverlayReturnFocusEnum}.\n
  • OverlayReturnFocusEnum.OFF by default.
", "lineNumber": 454, "unknown": [ { "tagName": "@default", "tagValue": "OverlayReturnFocusEnum.OFF" }, { "tagName": "@htmlattribute", "tagValue": "returnfocus" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 256, "kind": "member", "name": "_returnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_returnFocus", "access": "private", "description": null, "lineNumber": 460, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 257, "kind": "member", "name": "returnFocusToElement", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#returnFocusToElement", "access": "public", "description": "returns element that will receive focus when overlay is closed", "lineNumber": 467, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement}element passed via returnFocusTo()" } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "{HTMLElement}element passed via returnFocusTo()" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 258, "kind": "member", "name": "elementToFocusWhenHidden", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#elementToFocusWhenHidden", "access": "public", "description": "returns element that will receive focus when overlay is hidden", "lineNumber": 475, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement} element cached" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "element cached" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 259, "kind": "member", "name": "scrollOnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#scrollOnFocus", "access": "public", "description": "Whether the browser should scroll the document to bring the newly-focused element into view. See {@link OverlayScrollOnFocusEnum}.\n
  • OverlayScrollOnFocusEnum.ON by default.
", "lineNumber": 486, "unknown": [ { "tagName": "@default", "tagValue": "OverlayScrollOnFocusEnum.ON" }, { "tagName": "@htmlattribute", "tagValue": "scrollonfocus" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 261, "kind": "member", "name": "_scrollOnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_scrollOnFocus", "access": "private", "description": null, "lineNumber": 492, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 262, "kind": "member", "name": "focusOnShow", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#focusOnShow", "access": "public", "description": "Whether to focus the overlay, when opened or not. By default the overlay itself will get the focus. It also accepts\nan instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type'. If the selector returns\nmultiple elements, it will focus the first element inside the overlay that matches the selector.\nSee {@link OverlayFocusOnShowEnum}.\n
  • OverlayFocusOnShowEnum.ON by default.
", "lineNumber": 505, "unknown": [ { "tagName": "@default", "tagValue": "OverlayFocusOnShowEnum.ON" }, { "tagName": "@htmlattribute", "tagValue": "focusonshow" } ], "type": { "nullable": null, "types": [ "HTMLElement", "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 264, "kind": "member", "name": "_focusOnShow", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_focusOnShow", "access": "private", "description": null, "lineNumber": 511, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 265, "kind": "member", "name": "open", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#open", "access": "public", "description": "Whether this overlay is open or not.\n
  • false by default.
  • reflected
", "lineNumber": 527, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "open" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "emits": [ { "types": [ "coral-overlay:open" ], "description": "" }, { "types": [ "coral-overlay:close" ], "description": "" }, { "types": [ "coral-overlay:beforeopen" ], "description": "" }, { "types": [ "coral-overlay:beforeclose" ], "description": "" } ], "modality": "both" }, { "__docId__": 267, "kind": "member", "name": "_elementToFocusWhenHidden", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_elementToFocusWhenHidden", "access": "private", "description": null, "lineNumber": 563, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 268, "kind": "member", "name": "_silenced", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_silenced", "access": "private", "description": null, "lineNumber": 580, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 271, "kind": "method", "name": "_closeChildOverlays", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_closeChildOverlays", "access": "private", "description": null, "lineNumber": 669, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 272, "kind": "method", "name": "_debounce", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_debounce", "access": "private", "description": null, "lineNumber": 688, "ignore": true, "params": [ { "name": "f", "types": [ "*" ] } ], "return": null }, { "__docId__": 273, "kind": "member", "name": "_debounceId", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_debounceId", "access": "private", "description": null, "lineNumber": 691, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 274, "kind": "method", "name": "_isTopOverlay", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_isTopOverlay", "access": "protected", "description": "Check if this overlay is the topmost.", "lineNumber": 701, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 275, "kind": "method", "name": "_pushOverlay", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_pushOverlay", "access": "protected", "description": "Push the overlay to the top of the stack.", "lineNumber": 711, "ignore": true, "params": [], "return": null }, { "__docId__": 276, "kind": "method", "name": "_popOverlay", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_popOverlay", "access": "protected", "description": "Remove the overlay from the stack.", "lineNumber": 720, "ignore": true, "params": [], "return": null }, { "__docId__": 277, "kind": "method", "name": "_showBackdrop", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_showBackdrop", "access": "protected", "description": "Show the backdrop.", "lineNumber": 732, "ignore": true, "params": [], "return": null }, { "__docId__": 278, "kind": "member", "name": "_requestedBackdrop", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_requestedBackdrop", "access": "private", "description": null, "lineNumber": 743, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 279, "kind": "member", "name": "_showBackdropOnAttached", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_showBackdropOnAttached", "access": "private", "description": null, "lineNumber": 748, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 280, "kind": "method", "name": "_hideBackdrop", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_hideBackdrop", "access": "protected", "description": "Show the backdrop.", "lineNumber": 761, "ignore": true, "params": [], "return": null }, { "__docId__": 282, "kind": "method", "name": "_handleRootKeypress", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_handleRootKeypress", "access": "protected", "description": "Handles keypresses on the root of the overlay and marshalls focus accordingly.", "lineNumber": 780, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 283, "kind": "method", "name": "_handleTabCaptureFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_handleTabCaptureFocus", "access": "protected", "description": "Handles focus events on tab capture elements.", "lineNumber": 795, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 284, "kind": "member", "name": "_ignoreTabCapture", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_ignoreTabCapture", "access": "private", "description": null, "lineNumber": 798, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 285, "kind": "method", "name": "_handleFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_handleFocus", "access": "protected", "description": "Handles the focus behavior. When \"on\" is specified it would try to find the first tababble descendent in the\ncontent and if there are no valid candidates it will focus the element itself.", "lineNumber": 815, "ignore": true, "params": [], "return": null }, { "__docId__": 286, "kind": "method", "name": "_handleReturnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_handleReturnFocus", "access": "protected", "description": "", "lineNumber": 841, "ignore": true, "params": [], "return": null }, { "__docId__": 288, "kind": "method", "name": "_focusOn", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_focusOn", "access": "protected", "description": "Focus on the first or last element.", "lineNumber": 867, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "which", "description": "one of \"first\" or \"last\"" } ], "ignore": true, "return": null }, { "__docId__": 289, "kind": "method", "name": "_getFocusableElements", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_getFocusableElements", "access": "private", "description": null, "lineNumber": 880, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 290, "kind": "method", "name": "_getFocusableElement", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_getFocusableElement", "access": "private", "description": null, "lineNumber": 884, "undocument": true, "ignore": true, "params": [ { "name": "which", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 291, "kind": "method", "name": "show", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#show", "access": "public", "description": "Open the overlay and set the z-index accordingly.", "lineNumber": 900, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseOverlay} this, chainable" } ], "return": { "nullable": null, "types": [ "BaseOverlay" ], "spread": false, "description": "this, chainable" }, "params": [] }, { "__docId__": 293, "kind": "method", "name": "hide", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#hide", "access": "public", "description": "Close the overlay.", "lineNumber": 911, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseOverlay} this, chainable" } ], "return": { "nullable": null, "types": [ "BaseOverlay" ], "spread": false, "description": "this, chainable" }, "params": [] }, { "__docId__": 295, "kind": "method", "name": "returnFocusTo", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#returnFocusTo", "access": "public", "description": "Set the element that focus should be returned to when the overlay is hidden.", "lineNumber": 925, "unknown": [ { "tagName": "@returns", "tagValue": "{BaseOverlay} this, chainable" } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "element", "description": "The element to return focus to. This must be a DOM element, not a jQuery object or selector." } ], "return": { "nullable": null, "types": [ "BaseOverlay" ], "spread": false, "description": "this, chainable" } }, { "__docId__": 297, "kind": "member", "name": "_returnFocusToElement", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#_returnFocusToElement", "access": "private", "description": null, "lineNumber": 952, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 298, "kind": "member", "name": "_OverlayManager", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay._OverlayManager", "access": "private", "description": null, "lineNumber": 956, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 299, "kind": "member", "name": "trapFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.trapFocus", "access": "public", "description": "Returns {@link BaseOverlay} trap focus options.", "lineNumber": 965, "return": { "nullable": null, "types": [ "OverlayTrapFocusEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 300, "kind": "member", "name": "returnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.returnFocus", "access": "public", "description": "Returns {@link BaseOverlay} return focus options.", "lineNumber": 974, "return": { "nullable": null, "types": [ "OverlayReturnFocusEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 301, "kind": "member", "name": "scrollOnFocus", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.scrollOnFocus", "access": "public", "description": "Returns {@link BaseOverlay} scroll focus options.", "lineNumber": 983, "return": { "nullable": null, "types": [ "OverlayScrollOnFocusEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 302, "kind": "member", "name": "focusOnShow", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.focusOnShow", "access": "public", "description": "Returns {@link BaseOverlay} focus on show options.", "lineNumber": 992, "return": { "nullable": null, "types": [ "OverlayFocusOnShowEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 303, "kind": "member", "name": "FADETIME", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.FADETIME", "access": "public", "description": "Returns {@link BaseOverlay} fadetime in milliseconds.", "lineNumber": 1001, "return": { "nullable": null, "types": [ "Number" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 304, "kind": "member", "name": "_attributePropertyMap", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay._attributePropertyMap", "access": "private", "description": null, "lineNumber": 1005, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 305, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.observedAttributes", "access": "public", "description": null, "lineNumber": 1014, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 306, "kind": "method", "name": "connectedCallback", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#connectedCallback", "access": "public", "description": null, "lineNumber": 1024, "ignore": true, "params": [], "return": null }, { "__docId__": 311, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#render", "access": "public", "description": null, "lineNumber": 1057, "ignore": true, "params": [], "return": null }, { "__docId__": 312, "kind": "method", "name": "disconnectedCallback", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay#disconnectedCallback", "access": "public", "description": null, "lineNumber": 1064, "ignore": true, "params": [], "return": null }, { "__docId__": 313, "kind": "typedef", "name": "coral-overlay:beforeopen", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.coral-overlay:beforeopen", "access": "public", "description": "Triggered before the {@link BaseOverlay} is opened with show() or instance.open = true.", "properties": [ { "nullable": null, "types": [ "function" ], "spread": false, "optional": false, "name": "preventDefault", "description": "Call to stop the overlay from opening." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-overlay:beforeopen" } }, { "__docId__": 314, "kind": "typedef", "name": "coral-overlay:open", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.coral-overlay:open", "access": "public", "description": "Triggered after the {@link BaseOverlay} is opened with show() or instance.open = true", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-overlay:open" } }, { "__docId__": 315, "kind": "typedef", "name": "coral-overlay:beforeclose", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.coral-overlay:beforeclose", "access": "public", "description": "Triggered before the {@link BaseOverlay} is closed with hide() or instance.open = false.", "properties": [ { "nullable": null, "types": [ "function" ], "spread": false, "optional": false, "name": "preventDefault", "description": "Call to stop the overlay from closing." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-overlay:beforeclose" } }, { "__docId__": 316, "kind": "typedef", "name": "coral-overlay:close", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/BaseOverlay.js~BaseOverlay.coral-overlay:close", "access": "public", "description": "Triggered after the {@link BaseOverlay} is closed with hide() or instance.open = false", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-overlay:close" } }, { "__docId__": 318, "kind": "file", "name": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n Enumeration for {@link BaseOverlay} trap options.\n\n @typedef {Object} OverlayTrapFocusEnum\n\n @property {String} ON\n Focus is trapped such that the use cannot focus outside of the overlay.\n @property {String} OFF\n The user can focus outside the overlay as normal.\n */\nconst trapFocus = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link BaseOverlay} scroll focus options.\n\n @typedef {Object} OverlayScrollOnFocusEnum\n\n @property {String} ON\n Scroll the document to bring the newly-focused element into view.\n @property {String} OFF\n Document will not scroll on focus.\n */\nconst scrollOnFocus = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link BaseOverlay} return focus options.\n\n @typedef {Object} OverlayReturnFocusEnum\n\n @property {String} ON\n When the overlay is closed, the element that was focused before the it was shown will be focused again.\n @property {String} OFF\n Nothing will be focused when the overlay is closed.\n */\nconst returnFocus = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link BaseOverlay} focus behavior options.\n\n @typedef {Object} OverlayFocusOnShowEnum\n\n @property {String} ON\n When the overlay is opened, it will be focused.\n @property {String} OFF\n The overlay will not focus itself when opened.\n */\nconst focusOnShow = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n The time it should take for {@link BaseOverlay} to fade in milliseconds.\n Important: This should be greater than or equal to the CSS transition time.\n\n @typedef {Number} OverlayFadeTime\n */\nconst FADETIME = 350;\n\nexport {trapFocus, returnFocus, focusOnShow, scrollOnFocus, FADETIME};\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-base-overlay/src/scripts/enums.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 319, "kind": "typedef", "name": "OverlayTrapFocusEnum", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/enums.js~OverlayTrapFocusEnum", "access": "public", "description": "Enumeration for {@link BaseOverlay} trap options.", "lineNumber": 23, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Focus is trapped such that the use cannot focus outside of the overlay." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "The user can focus outside the overlay as normal." } ], "type": { "types": [ "Object" ], "optional": false, "name": "OverlayTrapFocusEnum" } }, { "__docId__": 320, "kind": "typedef", "name": "OverlayReturnFocusEnum", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/enums.js~OverlayReturnFocusEnum", "access": "public", "description": "Enumeration for {@link BaseOverlay} return focus options.", "lineNumber": 53, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "When the overlay is closed, the element that was focused before the it was shown will be focused again." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Nothing will be focused when the overlay is closed." } ], "type": { "types": [ "Object" ], "optional": false, "name": "OverlayReturnFocusEnum" } }, { "__docId__": 321, "kind": "typedef", "name": "OverlayFocusOnShowEnum", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/enums.js~OverlayFocusOnShowEnum", "access": "public", "description": "Enumeration for {@link BaseOverlay} focus behavior options.", "lineNumber": 68, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "When the overlay is opened, it will be focused." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "The overlay will not focus itself when opened." } ], "type": { "types": [ "Object" ], "optional": false, "name": "OverlayFocusOnShowEnum" } }, { "__docId__": 322, "kind": "typedef", "name": "OverlayScrollOnFocusEnum", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/enums.js~OverlayScrollOnFocusEnum", "access": "public", "description": "Enumeration for {@link BaseOverlay} scroll focus options.", "lineNumber": 38, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Scroll the document to bring the newly-focused element into view." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Document will not scroll on focus." } ], "type": { "types": [ "Object" ], "optional": false, "name": "OverlayScrollOnFocusEnum" } }, { "__docId__": 323, "kind": "typedef", "name": "OverlayFadeTime", "memberof": "coral-spectrum/coral-base-overlay/src/scripts/enums.js", "static": true, "longname": "coral-spectrum/coral-base-overlay/src/scripts/enums.js~OverlayFadeTime", "access": "public", "description": "The time it should take for {@link BaseOverlay} to fade in milliseconds.\nImportant: This should be greater than or equal to the CSS transition time.", "lineNumber": 79, "type": { "types": [ "Number" ], "optional": false, "name": "OverlayFadeTime" } }, { "__docId__": 324, "kind": "file", "name": "coral-spectrum/coral-collection/src/scripts/Collection.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport listToArray from './listToArray';\n\n/**\n Unique id used to idenfity the collection.\n\n @private\n */\nlet nextID = 0;\n\n/**\n Attribute used to identify the items of a collection.\n\n @private\n */\nconst COLLECTION_ID = 'coral-collection-id-';\n\n/**\n Selector used to determine if nested items should be allowed.\n\n @private\n */\nconst SCOPE_SELECTOR = ':scope > ';\n\n/** @private */\nfunction getTagSelector(tag, nativeTag) {\n return nativeTag ? `${nativeTag}[is=\"${tag}\"]` : tag;\n}\n\n/**\n Helper function used to determine if the item should be filtered. If the filter is undefined, then the\n item will pass the filter.\n\n @param {HTMLElement} item\n The item that should be filtered.\n @param {Function} filter\n Function used to filter the item\n\n @returns {Boolean} true if the item passes the filter, otherwise false.\n\n @private\n */\nfunction filterItem(item, filter) {\n return typeof filter !== 'function' || filter(item);\n}\n\n/**\n Collection provides a standardized way to manipulate items in a component.\n */\nclass Collection {\n /**\n @param {HTMLElement} options.host\n The element that hosts the collection.\n @param {String} options.itemTagName\n The tag name of the elements that constitute a collection item.\n @param {String} options.itemBaseTagName\n The optional base tag name of the elements that constitute a collection item. This is required for elements that\n extend native elements, like Button.\n @param {String} [options.itemSelector]\n Optional, derived from itemTagName and itemBaseTagName by default. Used to query the host element for its\n collection items.\n @param {HTMLElement} [options.container]\n Optional element that wraps the collection. Defines where the new items will be added when add method\n is called. Is the same as options.host by default.\n @param {CollectionFilter} [options.filter]\n Optional function used to filter the results.\n @param {CollectionOnItemAdded} [options.onItemAdded]\n Function called once an item is added to the DOM. If the Collection has been configured to handle the items\n automatically, the callback will be called once the collection detects that the item has been added to the DOM and\n not synchronously with add().\n @param {CollectionOnItemRemoved} [options.onItemRemoved]\n Function called once an item is removed from the DOM. If the Collection has been configured to handle the items\n automatically, the callback will be called once the collection detects that the item has been removed from the DOM\n not synchronously with add().\n @param {CollectionOnChange} [options.onCollectionChange]\n Function called after there has been a change in the collection. This allows components to handle state changes\n after an item(s) has been added or removed. This callback will only be called if the Collection is configured to\n handle the items automatically.\n is true.\n */\n constructor(options) {\n options = options || {};\n\n // we create an unique collection identifier\n this._id = nextID++;\n\n this._host = options.host;\n this._itemTagName = options.itemTagName;\n this._itemBaseTagName = options.itemBaseTagName;\n\n this._itemTagNameFilter = [];\n this._itemBaseTagName && this._itemTagNameFilter.push(this._itemBaseTagName.toUpperCase());\n this._itemTagName && this._itemTagNameFilter.push(this._itemTagName.toUpperCase());\n\n this._itemSelector = options.itemSelector || getTagSelector(this._itemTagName, this._itemBaseTagName);\n\n // the container where the new items are added\n this._container = options.container || this._host;\n this._filter = options.filter;\n\n this._onlyHandleChildren = typeof options.onlyHandleChildren === 'boolean' ? options.onlyHandleChildren : false;\n\n // internal variable to determine if collection events will be handled internally\n this._handleItems = false;\n\n // we provide support for the :scope selector and swap it for an id\n if (this._itemSelector && this._itemSelector.indexOf(SCOPE_SELECTOR) === 0) {\n this._container.id = this._container.id || COLLECTION_ID + this._id;\n // we create a special selector to make sure that the items are direct children of the container. given that\n // :scope is not fully supported by all browsers, we use an id to query\n this._allItemsSelector = this._itemSelector.replace(SCOPE_SELECTOR, `#${this._container.id} > `);\n\n // we remove the :scope from the selector to be able to use it to determine if the item matches the collection\n this._itemSelector = this._itemSelector.replace(SCOPE_SELECTOR, '');\n // in case they match, we enable this optimization\n if (this._itemSelector === this._itemTagName) {\n this._useItemTagName = this._itemSelector.toUpperCase();\n }\n }\n // live collections are not supported when nested items is used\n else {\n this._allItemsSelector = this._itemSelector;\n\n // live collections can only be used when a tagname is used to query the items\n if (this._container && this._allItemsSelector === this._itemTagName) {\n this._liveCollection = true;\n this._useItemTagName = this._allItemsSelector.toUpperCase();\n }\n }\n\n this._onItemAdded = options.onItemAdded;\n this._onItemRemoved = options.onItemRemoved;\n this._onCollectionChange = options.onCollectionChange;\n }\n\n /**\n Number of items inside the Collection.\n\n @type {Number}\n @default 0\n */\n get length() {\n return this.getAll().length;\n }\n\n /**\n Adds an item to the Collection. The item can be either a HTMLElement or an Object with the item\n properties. If the index is not provided the element appended to the end. If options.onItemAdded was\n provided, it will be called after the element is added from the DOM.\n\n @param {HTMLElement|Object} item\n The item to add to the Collection.\n @param {HTMLElement} [insertBefore]\n Existing item used as a reference to insert the new item before. If the value is null, then the new\n item will be added at the end.\n\n @emits {coral-collection:add}\n\n @returns {HTMLElement} the item added.\n */\n add(item, insertBefore) {\n // container and itemtagname are the minimum options that need to be provided to automatically handle this function\n if (this._container && this._itemTagName) {\n if (!(item instanceof HTMLElement)) {\n // creates an instance of an item from the object\n if (this._itemBaseTagName) {\n item = document.createElement(this._itemBaseTagName, {is: this._itemTagName}).set(item, true);\n } else {\n item = document.createElement(this._itemTagName).set(item, true);\n }\n }\n\n // inserts the element in the specified container\n this._container.insertBefore(item, insertBefore || null);\n\n // when items are handled automatically there is no need to call this immediately\n if (!this._handleItems && typeof this._onItemAdded === 'function' && this._host && filterItem(item, this._filter)) {\n this._onItemAdded.call(this._host, item);\n }\n\n return item;\n }\n\n throw new Error('Please provide host and itemTagName or override add() to provide your own implementation.');\n }\n\n /**\n Removes all the items from the Collection.\n\n @returns {Array.} an Array with all the removed items.\n */\n clear() {\n const items = this.getAll();\n\n const removed = [];\n\n for (let i = items.length - 1 ; i > -1 ; i--) {\n removed.push(this.remove(items[i]));\n }\n\n return removed;\n }\n\n /**\n Returns an array with all the items inside the Collection. Each element is of type HTMLElement.\n\n @returns {Array.} an Array with all the items inside the collection.\n */\n getAll() {\n // in order to perform the automatic getAll query, the _host and _allItemsSelector must be provided\n if (this._container && this._allItemsSelector) {\n let items = this._liveCollection ?\n // instead of querying the DOM, we just convert the live collection to an array, this way we obtain a\n // \"snapshot\" of the DOM\n Array.from(this._container.getElementsByTagName(this._allItemsSelector)) :\n Array.from(this._container.querySelectorAll(this._allItemsSelector));\n\n if (this._filter) {\n items = items.filter(this._filter);\n }\n\n return items;\n }\n\n throw new Error('Please provide host and itemTagName or override getAll() to provide your own implementation.');\n }\n\n /**\n Removes the given item from the Collection. If options.onItemRemoved was provided, it will be called\n after the element is removed from the DOM.\n\n @param {HTMLElement} item\n The item to add to the Collection.\n\n @emits {coral-collection:remove}\n\n @returns {HTMLElement} the item removed.\n */\n remove(item) {\n if (item.parentNode) {\n item.parentNode.removeChild(item);\n\n // when items are handled automatically there is no need to call this immediatelly\n if (!this._handleItems && typeof this._onItemRemoved === 'function' && this._host && filterItem(item, this._filter)) {\n this._onItemRemoved.call(this._host, item);\n }\n }\n\n return item;\n }\n\n /**\n Returns the first item of the collection.\n\n @returns {?HTMLElement} the first item of the collection.\n */\n first() {\n // Use getAll() so filter() is applied\n return this.getAll()[0] || null;\n }\n\n /**\n Returns the last item of the collection.\n\n @returns {?HTMLElement} the last item of the collection.\n */\n last() {\n // Use getAll() so filter() is applied\n const all = this.getAll();\n return all[all.length - 1] || null;\n }\n\n /**\n Checks if the given Node belongs to the current collection. It is said that a Node belongs to a given collection\n if it passes options.filter and it matches options.itemSelector.\n\n @param {Node} node\n The node to check if it belongs to the collection.\n\n @returns {Boolean} true if the node is part of the collection, otherwise false.\n\n @protected\n */\n _isPartOfCollection(node) {\n // Only element nodes are allowed\n let tagName = node.tagName;\n\n return node.nodeType === Node.ELEMENT_NODE &&\n (this._itemTagNameFilter.length === 0 || this._itemTagNameFilter.includes(tagName)) &&\n filterItem(node, this._filter) &&\n // this is an optimization to avoid using matches\n (this._useItemTagName ? this._useItemTagName === tagName : node.matches(this._itemSelector));\n }\n\n /**\n Handles the attachment of an item to the collection. It triggers automatically the collection event.\n\n @param {HTMLElement} item\n The item that was attached to the collection.\n\n @emits {coral-collection:add}\n\n @protected\n */\n _onItemAttached(item) {\n // if options.onItemAdded was provided, we call the function\n if (typeof this._onItemAdded === 'function') {\n this._onItemAdded.call(this._host, item);\n }\n\n // the usage of trigger assumes that the host is a coral component\n this._host.trigger('coral-collection:add', {item});\n }\n\n /**\n Handles the detachment of a item to the collection. It triggers automatically the collection event.\n\n @param {HTMLElement} item\n The item that was detached of the collection\n\n @emits {coral-collection:remove}\n\n @protected\n */\n _onItemDetached(item) {\n // if options.onItemRemoved was provided, we call the function\n if (typeof this._onItemRemoved === 'function') {\n this._onItemRemoved.call(this._host, item);\n }\n\n // the usage of trigger assumes that the host is a coral component\n this._host.trigger('coral-collection:remove', {item});\n }\n\n /**\n Handles the collection changes. It automatically triggers the collection change event.\n @param {Array} addedNodes The items that was added to the collection\n @param {Array} removedNodes The items that was removed from the collection\n @emits {coral-collection:change}\n @protected\n */\n _onCollectionMutation(addedNodes, removedNodes) {\n // if options.onCollectionChange was provided, we call the function\n if (typeof this._onCollectionChange === 'function') {\n this._onCollectionChange.call(this._host, addedNodes, removedNodes);\n }\n\n // the usage of trigger assumes that the host is a coral component\n this._host.trigger('coral-collection:change', {\n addedItems: addedNodes,\n removedItems: removedNodes\n });\n }\n\n /**\n Enables the automatic detection of collection items. The collection will take care of triggering the appropriate\n collection event when an item is added or removed, as well the related callbacks. Components can decide to skip the\n initialization of the starting items by providing skipInitialItems as false.\n\n @param {Boolean} [skipInitialItems=false]\n If true, onItemAdded will be called for every starting item. A collection event will not\n be triggered for these items.\n\n @protected\n */\n _startHandlingItems(skipInitialItems) {\n if (this._host && this._container) {\n // we reuse the observer if it already exists, this way we do not need to disconnect it if this function is called\n // again\n this._observer = this._observer || new MutationObserver(this._handleMutation.bind(this));\n\n // this changes the way that _onItemAdded and _onItemRemoved behave, since they well be delayed until a mutation\n // detects them\n this._handleItems = true;\n\n if (this._onlyHandleChildren) {\n this._observer.observe(this._container, {\n // we only need to observe for items that were added and removed, no need to check attributes and contents\n childList: true,\n });\n } else {\n this._observer.observe(this._container, {\n // we only need to observe for items that were added and removed, no need to check attributes and contents\n childList: true,\n // we need to listen to subtree mutations as items may not be direct children\n subtree: true\n });\n }\n\n // by default we handle the initial items unless otherwise indicated\n if (skipInitialItems !== true) {\n // since we are handling the items for the component, we need to make sure the _onItemAdded is called for the\n // initial items. collection events will not be triggered for these items as they represent the initial state\n let items;\n let itemCount = 0;\n\n if (typeof this._onItemAdded === 'function' || typeof this._onCollectionChange === 'function') {\n items = this.getAll();\n itemCount = items.length;\n }\n\n if (typeof this._onItemAdded === 'function') {\n for (let i = 0 ; i < itemCount ; i++) {\n this._onItemAdded.call(this._host, items[i]);\n }\n }\n\n // we only call the _onCollectionChange callback if there are items inside the collection\n if (itemCount > 0 && typeof this._onCollectionChange === 'function') {\n this._onCollectionChange.call(this._host, items, []);\n }\n }\n } else {\n throw new Error('Please provide options.host and/or options.container to enable handling the items.');\n }\n }\n\n /**\n Stops handling the items.\n\n @protected\n */\n _stopHandlingItems() {\n if (this._observer) {\n this._observer.disconnect();\n }\n }\n\n /**\n Handles every time that an element is added or removed from the options.container. By default the\n collection events will be triggered. If options.onItemAdded or options.onItemRemoved were\n provided, they will be called where it applies.\n\n @param Array. mutations\n Array that contains the MutationRecord> relevant to every registered mutation.\n\n @protected\n */\n _handleMutation(mutations) {\n let mutation;\n const mutationsCount = mutations.length;\n let item;\n let addedNodes;\n let addedNodesCount;\n let removedNodes;\n let removedNodesCount;\n const validAddedNodes = [];\n const validRemovedNodes = [];\n\n // we need to count every addition and removal to notify the component that the collection changed\n let itemChanges = 0;\n for (let i = 0 ; i < mutationsCount ; i++) {\n mutation = mutations[i];\n\n addedNodes = mutation.addedNodes;\n addedNodesCount = addedNodes.length;\n for (let j = 0 ; j < addedNodesCount ; j++) {\n item = addedNodes[j];\n\n // filters the item\n if (this._isPartOfCollection(item)) {\n itemChanges++;\n validAddedNodes.push(item);\n this._onItemAttached(item);\n }\n }\n\n removedNodes = mutation.removedNodes;\n removedNodesCount = removedNodes.length;\n for (let k = 0 ; k < removedNodesCount ; k++) {\n item = removedNodes[k];\n\n // filters the item\n if (this._isPartOfCollection(item)) {\n itemChanges++;\n validRemovedNodes.push(item);\n this._onItemDetached(item);\n }\n }\n }\n\n // if changes were done to the collection we need to notify the component. we do this after all the mutations were\n // processed to make sure we only do it once\n if (itemChanges !== 0 && this._host) {\n this._onCollectionMutation(validAddedNodes, validRemovedNodes);\n }\n }\n\n /**\n Triggered when an item is added to the {@link Collection}. {@link Collection} events are not synchronous so the DOM\n may reflect a different reality although every addition or removal will be reported.\n\n @typedef {CustomEvent} coral-collection:add\n\n @property {HTMLElement} detail.item\n The item that was added.\n */\n\n /**\n Triggered when an item is removed from a {@link Collection}. {@link Collection} events are not synchronous so the DOM\n may reflect a different reality although every addition or removal will be reported.\n\n @typedef {CustomEvent} coral-collection:remove\n\n @property {HTMLElement} detail.item\n The item that was removed.\n */\n\n /**\n * Triggered when either items are added or removed from {@link Collection}. {@link Collection} events are not synchronous so the DOM\n * may reflect a different reality although every addition or removal will be reported. This event describes that {@link Collection} has\n * changed or modified.\n *\n * @event coral-collection:change\n * @type {Object}\n * @property {Array} detail.addedItems - Items that are added to collection\n * @property {Array} detail.removedItems - Items that are removed from collection\n */\n\n /**\n Signature of the function called to determine if an element should be included in the {@link Collection}. If the function\n returns true for the given element it will be part of the collection, otherwise it will be excluded.\n\n @typedef {function} CollectionFilter\n\n @param {HTMLElement} element\n The item to check whether it should be part of the collection.\n\n @returns {Boolean} true if should be part of the collection, otherwise false.\n */\n\n /**\n Signature of the function called when ever an item is added to the {@link Collection}.\n\n @typedef {function} CollectionOnItemAdded\n\n @param {HTMLElement} item\n The item that was added to the collection.\n */\n\n /**\n Signature of the function called when ever an item is removed from the {@link Collection}.\n\n @typedef {function} CollectionOnItemRemoved\n\n @param {HTMLElement} item\n The item that was added to the collection.\n */\n\n /**\n Signature of the function called when there is a change in the {@link Collection}. The items that where added and removed\n will be provided.\n\n @typedef {function} CollectionOnChange\n\n @param {Array.} addedNodes\n An array that contains the items that were added to the collection.\n @param {Array.} removedNodes\n An array that contains the items that were removed from the collection.\n */\n}\n\nexport default Collection;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-collection/src/scripts/Collection.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 325, "kind": "variable", "name": "nextID", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~nextID", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Unique id used to idenfity the collection.", "lineNumber": 20, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 326, "kind": "variable", "name": "COLLECTION_ID", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~COLLECTION_ID", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Attribute used to identify the items of a collection.", "lineNumber": 27, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 327, "kind": "variable", "name": "SCOPE_SELECTOR", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~SCOPE_SELECTOR", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Selector used to determine if nested items should be allowed.", "lineNumber": 34, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 328, "kind": "function", "name": "getTagSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~getTagSelector", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 37, "ignore": true, "params": [ { "name": "tag", "types": [ "*" ] }, { "name": "nativeTag", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 329, "kind": "function", "name": "filterItem", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~filterItem", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Helper function used to determine if the item should be filtered. If the filter is undefined, then the\nitem will pass the filter.", "lineNumber": 54, "unknown": [ { "tagName": "@returns", "tagValue": "{Boolean} true if the item passes the filter, otherwise false." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item that should be filtered." }, { "nullable": null, "types": [ "Function" ], "spread": false, "optional": false, "name": "filter", "description": "Function used to filter the item" } ], "return": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": "true if the item passes the filter, otherwise false." }, "ignore": true }, { "__docId__": 330, "kind": "class", "name": "Collection", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Collection}", "description": "Collection provides a standardized way to manipulate items in a component.", "lineNumber": 61, "interface": false }, { "__docId__": 331, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#constructor", "access": "public", "description": "", "lineNumber": 92, "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "options.host", "description": "The element that hosts the collection." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "options.itemTagName", "description": "The tag name of the elements that constitute a collection item." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "options.itemBaseTagName", "description": "The optional base tag name of the elements that constitute a collection item. This is required for elements that\nextend native elements, like Button." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "name": "options.itemSelector", "description": "Optional, derived from itemTagName and itemBaseTagName by default. Used to query the host element for its\ncollection items." }, { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": true, "name": "options.container", "description": "Optional element that wraps the collection. Defines where the new items will be added when add method\nis called. Is the same as options.host by default." }, { "nullable": null, "types": [ "CollectionFilter" ], "spread": false, "optional": true, "name": "options.filter", "description": "Optional function used to filter the results." }, { "nullable": null, "types": [ "CollectionOnItemAdded" ], "spread": false, "optional": true, "name": "options.onItemAdded", "description": "Function called once an item is added to the DOM. If the Collection has been configured to handle the items\nautomatically, the callback will be called once the collection detects that the item has been added to the DOM and\nnot synchronously with add()." }, { "nullable": null, "types": [ "CollectionOnItemRemoved" ], "spread": false, "optional": true, "name": "options.onItemRemoved", "description": "Function called once an item is removed from the DOM. If the Collection has been configured to handle the items\nautomatically, the callback will be called once the collection detects that the item has been removed from the DOM\nnot synchronously with add()." }, { "nullable": null, "types": [ "CollectionOnChange" ], "spread": false, "optional": true, "name": "options.onCollectionChange", "description": "Function called after there has been a change in the collection. This allows components to handle state changes\nafter an item(s) has been added or removed. This callback will only be called if the Collection is configured to\nhandle the items automatically.\nis true." } ] }, { "__docId__": 332, "kind": "member", "name": "_id", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_id", "access": "private", "description": null, "lineNumber": 96, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 333, "kind": "member", "name": "_host", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_host", "access": "private", "description": null, "lineNumber": 98, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 334, "kind": "member", "name": "_itemTagName", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_itemTagName", "access": "private", "description": null, "lineNumber": 99, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 335, "kind": "member", "name": "_itemBaseTagName", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_itemBaseTagName", "access": "private", "description": null, "lineNumber": 100, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 336, "kind": "member", "name": "_itemTagNameFilter", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_itemTagNameFilter", "access": "private", "description": null, "lineNumber": 102, "undocument": true, "ignore": true, "type": { "types": [ "*[]" ] } }, { "__docId__": 339, "kind": "member", "name": "_itemSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_itemSelector", "access": "private", "description": null, "lineNumber": 106, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 340, "kind": "member", "name": "_container", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_container", "access": "private", "description": null, "lineNumber": 109, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 341, "kind": "member", "name": "_filter", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_filter", "access": "private", "description": null, "lineNumber": 110, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 342, "kind": "member", "name": "_onlyHandleChildren", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onlyHandleChildren", "access": "private", "description": null, "lineNumber": 112, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 343, "kind": "member", "name": "_handleItems", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_handleItems", "access": "private", "description": null, "lineNumber": 115, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 344, "kind": "member", "name": "_allItemsSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_allItemsSelector", "access": "private", "description": null, "lineNumber": 122, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 346, "kind": "member", "name": "_useItemTagName", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_useItemTagName", "access": "private", "description": null, "lineNumber": 128, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 348, "kind": "member", "name": "_liveCollection", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_liveCollection", "access": "private", "description": null, "lineNumber": 137, "undocument": true, "ignore": true, "type": { "types": [ "boolean" ] } }, { "__docId__": 350, "kind": "member", "name": "_onItemAdded", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onItemAdded", "access": "private", "description": null, "lineNumber": 142, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 351, "kind": "member", "name": "_onItemRemoved", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onItemRemoved", "access": "private", "description": null, "lineNumber": 143, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 352, "kind": "member", "name": "_onCollectionChange", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onCollectionChange", "access": "private", "description": null, "lineNumber": 144, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 353, "kind": "member", "name": "length", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#length", "access": "public", "description": "Number of items inside the Collection.\n
  • 0 by default.
", "lineNumber": 153, "unknown": [ { "tagName": "@default", "tagValue": "0" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 354, "kind": "method", "name": "add", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#add", "access": "public", "description": "Adds an item to the Collection. The item can be either a HTMLElement or an Object with the item\nproperties. If the index is not provided the element appended to the end. If options.onItemAdded was\nprovided, it will be called after the element is added from the DOM.", "lineNumber": 172, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement} the item added." } ], "params": [ { "nullable": null, "types": [ "HTMLElement", "Object" ], "spread": false, "optional": false, "name": "item", "description": "The item to add to the Collection." }, { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": true, "name": "insertBefore", "description": "Existing item used as a reference to insert the new item before. If the value is null, then the new\nitem will be added at the end." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "the item added." }, "emits": [ { "types": [ "coral-collection:add" ], "description": "" } ] }, { "__docId__": 355, "kind": "method", "name": "clear", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#clear", "access": "public", "description": "Removes all the items from the Collection.", "lineNumber": 203, "unknown": [ { "tagName": "@returns", "tagValue": "{Array.} an Array with all the removed items." } ], "return": { "nullable": null, "types": [ "Array." ], "spread": false, "description": "an Array with all the removed items." }, "params": [] }, { "__docId__": 356, "kind": "method", "name": "getAll", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#getAll", "access": "public", "description": "Returns an array with all the items inside the Collection. Each element is of type HTMLElement.", "lineNumber": 220, "unknown": [ { "tagName": "@returns", "tagValue": "{Array.} an Array with all the items inside the collection." } ], "return": { "nullable": null, "types": [ "Array." ], "spread": false, "description": "an Array with all the items inside the collection." }, "params": [] }, { "__docId__": 357, "kind": "method", "name": "remove", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#remove", "access": "public", "description": "Removes the given item from the Collection. If options.onItemRemoved was provided, it will be called\nafter the element is removed from the DOM.", "lineNumber": 250, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement} the item removed." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item to add to the Collection." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "the item removed." }, "emits": [ { "types": [ "coral-collection:remove" ], "description": "" } ] }, { "__docId__": 358, "kind": "method", "name": "first", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#first", "access": "public", "description": "Returns the first item of the collection.", "lineNumber": 268, "unknown": [ { "tagName": "@returns", "tagValue": "{?HTMLElement} the first item of the collection." } ], "return": { "nullable": true, "types": [ "HTMLElement" ], "spread": false, "description": "the first item of the collection." }, "params": [] }, { "__docId__": 359, "kind": "method", "name": "last", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#last", "access": "public", "description": "Returns the last item of the collection.", "lineNumber": 278, "unknown": [ { "tagName": "@returns", "tagValue": "{?HTMLElement} the last item of the collection." } ], "return": { "nullable": true, "types": [ "HTMLElement" ], "spread": false, "description": "the last item of the collection." }, "params": [] }, { "__docId__": 360, "kind": "method", "name": "_isPartOfCollection", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_isPartOfCollection", "access": "protected", "description": "Checks if the given Node belongs to the current collection. It is said that a Node belongs to a given collection\nif it passes options.filter and it matches options.itemSelector.", "lineNumber": 295, "unknown": [ { "tagName": "@returns", "tagValue": "{Boolean} true if the node is part of the collection, otherwise false." } ], "params": [ { "nullable": null, "types": [ "Node" ], "spread": false, "optional": false, "name": "node", "description": "The node to check if it belongs to the collection." } ], "return": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": "true if the node is part of the collection, otherwise false." }, "ignore": true }, { "__docId__": 361, "kind": "method", "name": "_onItemAttached", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onItemAttached", "access": "protected", "description": "Handles the attachment of an item to the collection. It triggers automatically the collection event.", "lineNumber": 316, "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item that was attached to the collection." } ], "emits": [ { "types": [ "coral-collection:add" ], "description": "" } ], "ignore": true, "return": null }, { "__docId__": 362, "kind": "method", "name": "_onItemDetached", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onItemDetached", "access": "protected", "description": "Handles the detachment of a item to the collection. It triggers automatically the collection event.", "lineNumber": 336, "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item that was detached of the collection" } ], "emits": [ { "types": [ "coral-collection:remove" ], "description": "" } ], "ignore": true, "return": null }, { "__docId__": 363, "kind": "method", "name": "_onCollectionMutation", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_onCollectionMutation", "access": "protected", "description": "Handles the collection changes. It automatically triggers the collection change event.", "lineNumber": 353, "params": [ { "nullable": null, "types": [ "Array" ], "spread": false, "optional": false, "name": "addedNodes", "description": "The items that was added to the collection" }, { "nullable": null, "types": [ "Array" ], "spread": false, "optional": false, "name": "removedNodes", "description": "The items that was removed from the collection" } ], "emits": [ { "types": [ "coral-collection:change" ], "description": "" } ], "ignore": true, "return": null }, { "__docId__": 364, "kind": "method", "name": "_startHandlingItems", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_startHandlingItems", "access": "protected", "description": "Enables the automatic detection of collection items. The collection will take care of triggering the appropriate\ncollection event when an item is added or removed, as well the related callbacks. Components can decide to skip the\ninitialization of the starting items by providing skipInitialItems as false.", "lineNumber": 377, "params": [ { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "defaultValue": "false", "defaultRaw": false, "name": "skipInitialItems", "description": "If true, onItemAdded will be called for every starting item. A collection event will not\nbe triggered for these items." } ], "ignore": true, "return": null }, { "__docId__": 365, "kind": "member", "name": "_observer", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_observer", "access": "private", "description": null, "lineNumber": 381, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 367, "kind": "method", "name": "_stopHandlingItems", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_stopHandlingItems", "access": "protected", "description": "Stops handling the items.", "lineNumber": 434, "ignore": true, "params": [], "return": null }, { "__docId__": 368, "kind": "method", "name": "_handleMutation", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection#_handleMutation", "access": "protected", "description": "Handles every time that an element is added or removed from the options.container. By default the\ncollection events will be triggered. If options.onItemAdded or options.onItemRemoved were\nprovided, they will be called where it applies.", "lineNumber": 450, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "Array.", "description": "mutations\nArray that contains the MutationRecord> relevant to every registered mutation." } ], "ignore": true, "return": null }, { "__docId__": 369, "kind": "typedef", "name": "coral-collection:add", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.coral-collection:add", "access": "public", "description": "Triggered when an item is added to the {@link Collection}. {@link Collection} events are not synchronous so the DOM\nmay reflect a different reality although every addition or removal will be reported.", "properties": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "detail.item", "description": "The item that was added." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-collection:add" } }, { "__docId__": 370, "kind": "typedef", "name": "coral-collection:remove", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.coral-collection:remove", "access": "public", "description": "Triggered when an item is removed from a {@link Collection}. {@link Collection} events are not synchronous so the DOM\nmay reflect a different reality although every addition or removal will be reported.", "properties": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "detail.item", "description": "The item that was removed." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-collection:remove" } }, { "__docId__": 371, "kind": "typedef", "name": "CollectionFilter", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.CollectionFilter", "access": "public", "description": "Signature of the function called to determine if an element should be included in the {@link Collection}. If the function\nreturns true for the given element it will be part of the collection, otherwise it will be excluded.", "unknown": [ { "tagName": "@returns", "tagValue": "{Boolean} true if should be part of the collection, otherwise false." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "element", "description": "The item to check whether it should be part of the collection." } ], "return": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": "true if should be part of the collection, otherwise false." }, "type": { "types": [ "function" ], "optional": false, "name": "CollectionFilter" } }, { "__docId__": 372, "kind": "typedef", "name": "CollectionOnItemAdded", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.CollectionOnItemAdded", "access": "public", "description": "Signature of the function called when ever an item is added to the {@link Collection}.", "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item that was added to the collection." } ], "type": { "types": [ "function" ], "optional": false, "name": "CollectionOnItemAdded" } }, { "__docId__": 373, "kind": "typedef", "name": "CollectionOnItemRemoved", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.CollectionOnItemRemoved", "access": "public", "description": "Signature of the function called when ever an item is removed from the {@link Collection}.", "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The item that was added to the collection." } ], "type": { "types": [ "function" ], "optional": false, "name": "CollectionOnItemRemoved" } }, { "__docId__": 374, "kind": "typedef", "name": "CollectionOnChange", "memberof": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection.CollectionOnChange", "access": "public", "description": "Signature of the function called when there is a change in the {@link Collection}. The items that where added and removed\nwill be provided.", "params": [ { "nullable": null, "types": [ "Array." ], "spread": false, "optional": false, "name": "addedNodes", "description": "An array that contains the items that were added to the collection." }, { "nullable": null, "types": [ "Array." ], "spread": false, "optional": false, "name": "removedNodes", "description": "An array that contains the items that were removed from the collection." } ], "type": { "types": [ "function" ], "optional": false, "name": "CollectionOnChange" } }, { "__docId__": 375, "kind": "file", "name": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {commons} from '../../../coral-utils';\nimport Collection from './Collection';\nimport listToArray from './listToArray';\n\n/**\n Collection capable of handling non-nested items with a selected attribute. It is useful to manage the\n internal state of selection. It currently does not support options.filter for the selection related functions.\n */\nclass SelectableCollection extends Collection {\n constructor(options) {\n super(options);\n\n if (this._filter) {\n commons._log('warn', 'Coral.SelectableCollection does not support the options.filter');\n }\n\n // disabled items will not be a selection candicate although hidden items might\n this._selectableItemSelector = this._allItemsSelector.split(',').map(selector => `${selector}:not([disabled])`).join(',');\n this._selectedItemSelector = this._allItemsSelector.split(',').map(selector => `${selector}[selected]`).join(',');\n this._deselectAllExceptSelector = this._selectedItemSelector;\n }\n\n /**\n Returns the selectable items. Items that are disabled quality for selection. On the other hand, hidden items\n can be selected as this is the default behavior in HTML. Please note that an already selected item could be\n returned, since the selection could be toggled.\n\n @returns {Array.}\n an array of items whose selection could be toggled.\n\n @protected\n */\n _getSelectableItems() {\n return Array.from(this._container.querySelectorAll(this._selectableItemSelector));\n }\n\n /**\n Returns the first selectable item. Items that are disabled quality for selection. On the other hand, hidden items\n can be selected as this is the default behavior in HTML. Please note that an already selected item could be\n returned, since the selection could be toggled.\n\n @returns {HTMLElement}\n an item whose selection could be toggled.\n\n @protected\n */\n _getFirstSelectable() {\n return this._container.querySelector(this._selectableItemSelector) || null;\n }\n\n /**\n Returns the last selectable item. Items that are disabled quality for selection. On the other hand, hidden items\n can be selected as this is the default behavior in HTML. Please note that an already selected item could be\n returned, since the selection could be toggled.\n\n @returns {HTMLElement}\n an item whose selection could be toggled.\n\n @protected\n */\n _getLastSelectable() {\n const items = this._container.querySelectorAll(this._selectableItemSelector);\n return items[items.length - 1] || null;\n }\n\n /**\n Returns the previous selectable item.\n\n @param {HTMLElement} item\n The reference item.\n\n @returns {HTMLElement}\n an item whose selection could be toggled.\n\n @protected\n */\n _getPreviousSelectable(item) {\n const items = this.getAll();\n let index = items.indexOf(item);\n let sibling = index > 0 ? items[index - 1] : null;\n\n while (sibling) {\n if (sibling.matches(this._selectableItemSelector)) {\n break;\n } else {\n index--;\n sibling = index > 0 ? items[index - 1] : null;\n }\n }\n\n // in case the item is not specified, or it is not inside the collection, we need to return the first selectable\n return sibling || (item.matches(this._selectableItemSelector) ? item : this._getFirstSelectable());\n }\n\n /**\n Returns the next selectable item.\n\n @param {HTMLElement} item\n The reference item.\n\n @returns {HTMLElement}\n an item whose selection could be toggled.\n\n @protected\n */\n _getNextSelectable(item) {\n const items = this.getAll();\n let index = items.indexOf(item);\n let sibling = index < items.length - 1 ? items[index + 1] : null;\n\n while (sibling) {\n if (sibling.matches(this._selectableItemSelector)) {\n break;\n } else {\n index++;\n sibling = index < items.length - 1 ? items[index + 1] : null;\n }\n }\n\n return sibling || item;\n }\n\n /**\n Returns the first item that is selected in the Collection. It allows to configure the attribute used for selection\n so that components that use 'selected' and 'active' can share the same implementation.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection.\n\n @returns HTMLElement the first selected item.\n\n @protected\n */\n _getFirstSelected(selectedAttribute) {\n let selector = this._selectedItemSelector;\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${selectedAttribute}]`);\n }\n\n return this._container.querySelector(selector) || null;\n }\n\n /**\n Returns the last item that is selected in the Collection. It allows to configure the attribute used for selection\n so that components that use 'selected' and 'active' can share the same implementation.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection.\n\n @returns HTMLElment the last selected item.\n\n @protected\n */\n _getLastSelected(selectedAttribute) {\n let selector = this._selectedItemSelector;\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${selectedAttribute}]`);\n }\n\n // last-of-type did not work so we need to query all\n const items = this._container.querySelectorAll(selector);\n return items[items.length - 1] || null;\n }\n\n /**\n Returns an array that contains all the items that are selected.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection.\n\n @protected\n\n @returns Array. an array with all the selected items.\n */\n _getAllSelected(selectedAttribute) {\n let selector = this._selectedItemSelector;\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${selectedAttribute}]`);\n }\n return Array.from(this._container.querySelectorAll(selector));\n }\n\n /**\n Deselects all the items except the first selected item in the Collection. By default the selected\n attribute will be removed. The attribute to remove is configurable via the selectedAttribute parameter.\n The selected attribute will be removed no matter if the item is disabled or hidden.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection. This attribute will be removed from the matching elements.\n\n @protected\n */\n _deselectAllExceptFirst(selectedAttribute) {\n let selector = this._deselectAllExceptSelector;\n const attributeToRemove = selectedAttribute || 'selected';\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${selectedAttribute}]`);\n }\n\n // we select all the selected attributes except the last one\n const items = this._container.querySelectorAll(selector);\n const itemsCount = items.length;\n\n // ignores the first item of the list, everything else is deselected\n for (let i = 1 ; i < itemsCount ; i++) {\n // we use remoteAttribute since we do not know if the element is upgraded\n items[i].removeAttribute(attributeToRemove);\n }\n }\n\n /**\n Deselects all the items except the last selected item in the Collecton. By default the selected\n attribute will be removed. The attribute to remove is configurable via the selectedAttribute parameter.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection. This attribute will be removed from the matching elements.\n\n @protected\n */\n _deselectAllExceptLast(selectedAttribute) {\n let selector = this._deselectAllExceptSelector;\n const attributeToRemove = selectedAttribute || 'selected';\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${selectedAttribute}]`);\n }\n\n // we query for all matching items with the given attribute\n const items = this._container.querySelectorAll(selector);\n // we ignore the last item\n const itemsCount = items.length - 1;\n\n for (let i = 0 ; i < itemsCount ; i++) {\n // we use remoteAttribute since we do not know if the element is upgraded\n items[i].removeAttribute(attributeToRemove);\n }\n }\n\n /**\n Deselects all the items except the given item. The provided attribute will be remove from all matching items. By\n default the selected attribute will be removed. The attribute to remove is configurable via the\n selectedAttribute parameter.\n\n @name Coral.SelectableCollection#_deselectAllExcept\n @function\n\n @param {HTMLElement} [itemOrSelectedAttribute]\n The item to keep selected. If the item is not provided, all elements will be deselected.\n\n @param {String} [selectedAttribute=selected]\n the attribute that will be used to check for selection. This attribute will be removed from the matching elements.\n\n @protected\n */\n _deselectAllExcept(itemOrSelectedAttribute, selectedAttribute) {\n // if no selectedAttribute we use the unmodified selector as default\n let selector = this._deselectAllExceptSelector;\n\n let item;\n let attributeToRemove;\n // an item was not provided so we use it as 'selectedAttribute'\n if (typeof itemOrSelectedAttribute === 'string') {\n item = null;\n attributeToRemove = itemOrSelectedAttribute || 'selected';\n selector = selector.replace('[selected]', `[${attributeToRemove}]`);\n } else {\n item = itemOrSelectedAttribute;\n attributeToRemove = selectedAttribute || 'selected';\n\n if (typeof selectedAttribute === 'string') {\n selector = selector.replace('[selected]', `[${attributeToRemove}]`);\n }\n }\n\n // we query for all matching items with the given attribute\n const items = this._container.querySelectorAll(selector);\n const itemsCount = items.length;\n\n for (let i = 0 ; i < itemsCount ; i++) {\n // we use remoteAttribute since we do not know if the element is upgraded\n if (item !== items[i]) {\n items[i].removeAttribute(attributeToRemove);\n }\n }\n }\n}\n\nexport default SelectableCollection;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-collection/src/scripts/SelectableCollection.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 376, "kind": "class", "name": "SelectableCollection", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js", "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SelectableCollection}", "description": "Collection capable of handling non-nested items with a selected attribute. It is useful to manage the\ninternal state of selection. It currently does not support options.filter for the selection related functions.", "lineNumber": 21, "interface": false, "extends": [ "coral-spectrum/coral-collection/src/scripts/Collection.js~Collection" ] }, { "__docId__": 377, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#constructor", "access": "public", "description": null, "lineNumber": 22, "undocument": true }, { "__docId__": 378, "kind": "member", "name": "_selectableItemSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_selectableItemSelector", "access": "private", "description": null, "lineNumber": 30, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 379, "kind": "member", "name": "_selectedItemSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_selectedItemSelector", "access": "private", "description": null, "lineNumber": 31, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 380, "kind": "member", "name": "_deselectAllExceptSelector", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_deselectAllExceptSelector", "access": "private", "description": null, "lineNumber": 32, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 381, "kind": "method", "name": "_getSelectableItems", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getSelectableItems", "access": "protected", "description": "Returns the selectable items. Items that are disabled quality for selection. On the other hand, hidden items\ncan be selected as this is the default behavior in HTML. Please note that an already selected item could be\nreturned, since the selection could be toggled.", "lineNumber": 45, "unknown": [ { "tagName": "@returns", "tagValue": "{Array.}\nan array of items whose selection could be toggled." } ], "return": { "nullable": null, "types": [ "Array." ], "spread": false, "description": "an array of items whose selection could be toggled." }, "ignore": true, "params": [] }, { "__docId__": 382, "kind": "method", "name": "_getFirstSelectable", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getFirstSelectable", "access": "protected", "description": "Returns the first selectable item. Items that are disabled quality for selection. On the other hand, hidden items\ncan be selected as this is the default behavior in HTML. Please note that an already selected item could be\nreturned, since the selection could be toggled.", "lineNumber": 59, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement}\nan item whose selection could be toggled." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "an item whose selection could be toggled." }, "ignore": true, "params": [] }, { "__docId__": 383, "kind": "method", "name": "_getLastSelectable", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getLastSelectable", "access": "protected", "description": "Returns the last selectable item. Items that are disabled quality for selection. On the other hand, hidden items\ncan be selected as this is the default behavior in HTML. Please note that an already selected item could be\nreturned, since the selection could be toggled.", "lineNumber": 73, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement}\nan item whose selection could be toggled." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "an item whose selection could be toggled." }, "ignore": true, "params": [] }, { "__docId__": 384, "kind": "method", "name": "_getPreviousSelectable", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getPreviousSelectable", "access": "protected", "description": "Returns the previous selectable item.", "lineNumber": 89, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement}\nan item whose selection could be toggled." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The reference item." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "an item whose selection could be toggled." }, "ignore": true }, { "__docId__": 385, "kind": "method", "name": "_getNextSelectable", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getNextSelectable", "access": "protected", "description": "Returns the next selectable item.", "lineNumber": 118, "unknown": [ { "tagName": "@returns", "tagValue": "{HTMLElement}\nan item whose selection could be toggled." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "The reference item." } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "an item whose selection could be toggled." }, "ignore": true }, { "__docId__": 386, "kind": "method", "name": "_getFirstSelected", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getFirstSelected", "access": "protected", "description": "Returns the first item that is selected in the Collection. It allows to configure the attribute used for selection\nso that components that use 'selected' and 'active' can share the same implementation.", "lineNumber": 146, "unknown": [ { "tagName": "@returns", "tagValue": "HTMLElement the first selected item." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection." } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "HTMLElement the first selected item." }, "ignore": true }, { "__docId__": 387, "kind": "method", "name": "_getLastSelected", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getLastSelected", "access": "protected", "description": "Returns the last item that is selected in the Collection. It allows to configure the attribute used for selection\nso that components that use 'selected' and 'active' can share the same implementation.", "lineNumber": 167, "unknown": [ { "tagName": "@returns", "tagValue": "HTMLElment the last selected item." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection." } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "HTMLElment the last selected item." }, "ignore": true }, { "__docId__": 388, "kind": "method", "name": "_getAllSelected", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_getAllSelected", "access": "protected", "description": "Returns an array that contains all the items that are selected.", "lineNumber": 189, "unknown": [ { "tagName": "@returns", "tagValue": "Array. an array with all the selected items." } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection." } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "Array. an array with all the selected items." }, "ignore": true }, { "__docId__": 389, "kind": "method", "name": "_deselectAllExceptFirst", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_deselectAllExceptFirst", "access": "protected", "description": "Deselects all the items except the first selected item in the Collection. By default the selected\nattribute will be removed. The attribute to remove is configurable via the selectedAttribute parameter.\nThe selected attribute will be removed no matter if the item is disabled or hidden.", "lineNumber": 208, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection. This attribute will be removed from the matching elements." } ], "ignore": true, "return": null }, { "__docId__": 390, "kind": "method", "name": "_deselectAllExceptLast", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_deselectAllExceptLast", "access": "protected", "description": "Deselects all the items except the last selected item in the Collecton. By default the selected\nattribute will be removed. The attribute to remove is configurable via the selectedAttribute parameter.", "lineNumber": 236, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection. This attribute will be removed from the matching elements." } ], "ignore": true, "return": null }, { "__docId__": 391, "kind": "method", "name": "_deselectAllExcept", "memberof": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-collection/src/scripts/SelectableCollection.js~SelectableCollection#_deselectAllExcept", "access": "protected", "description": "Deselects all the items except the given item. The provided attribute will be remove from all matching items. By\ndefault the selected attribute will be removed. The attribute to remove is configurable via the\nselectedAttribute parameter.", "lineNumber": 271, "unknown": [ { "tagName": "@function", "tagValue": "" } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": true, "name": "itemOrSelectedAttribute", "description": "The item to keep selected. If the item is not provided, all elements will be deselected." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "selected", "defaultRaw": "selected", "name": "selectedAttribute", "description": "the attribute that will be used to check for selection. This attribute will be removed from the matching elements." } ], "ignore": true, "return": null }, { "__docId__": 392, "kind": "file", "name": "coral-spectrum/coral-collection/src/scripts/listToArray.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/** @private */\nexport default function listToArray(list) {\n const res = [];\n for (let i = 0, listCount = res.length = list.length ; i < listCount ; i++) {\n res[i] = list[i];\n }\n return res;\n}\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-collection/src/scripts/listToArray.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 393, "kind": "function", "name": "listToArray", "memberof": "coral-spectrum/coral-collection/src/scripts/listToArray.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-collection/src/scripts/listToArray.js~listToArray", "access": "private", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{listToArray}", "description": null, "lineNumber": 14, "ignore": true, "params": [ { "name": "list", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 394, "kind": "file", "name": "coral-spectrum/coral-compat/src/scripts/CustomElements.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/* eslint-disable-next-line no-empty-function */\nconst f = () => {\n};\n\n// Mostly empty functions to avoid breaking code\nif (!window.CustomElements) {\n window.CustomElements = {\n flags: {}\n };\n window.CustomElements.upgrade = f;\n window.CustomElements.upgradeAll = f;\n window.CustomElements.instanceof = (el, ins) => el instanceof ins;\n window.CustomElements.upgradeDocumentTree = f;\n window.CustomElements.upgradeSubtree = f;\n window.CustomElements.addModule = f;\n window.CustomElements.initializeModules = f;\n window.CustomElements.takeRecords = f;\n window.CustomElements.takeRecords = f;\n window.CustomElements.watchShadow = f;\n}\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-compat/src/scripts/CustomElements.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 395, "kind": "function", "name": "f", "memberof": "coral-spectrum/coral-compat/src/scripts/CustomElements.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-compat/src/scripts/CustomElements.js~f", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Copyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.", "lineNumber": 14, "params": [], "return": null, "ignore": true }, { "__docId__": 396, "kind": "file", "name": "coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Patch to be able to use document.createElement(tagName, customElement) from custom elements v0\nconst documentCreateElement = document.createElement;\ndocument.createElement = function createElement() {\n if (typeof arguments[1] === 'string') {\n arguments[1] = {is: arguments[1]};\n }\n return documentCreateElement.apply(this, arguments);\n};\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 397, "kind": "variable", "name": "documentCreateElement", "memberof": "coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js", "static": true, "longname": "coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js~documentCreateElement", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Copyright 2019 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.", "lineNumber": 14, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 398, "kind": "function", "name": "createElement", "memberof": "coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-compat/src/scripts/document.createElement-patch.js~createElement", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 15, "undocument": true, "params": [], "return": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 399, "kind": "file", "name": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\nimport {SelectableCollection} from '../../../coral-collection';\nimport {transform, validate, Keys} from '../../../coral-utils';\n\n// Key codes\nconst PAGE_UP = 33;\nconst PAGE_DOWN = 34;\nconst LEFT_ARROW = 37;\nconst UP_ARROW = 38;\n\n/**\n Enumeration for {@link Accordion} variants.\n\n @typedef {Object} AccordionVariantEnum\n\n @property {String} DEFAULT\n Default look and feel.\n @property {String} QUIET\n Not supported. Falls back to DEFAULT.\n @property {String} LARGE\n Not supported. Falls back to DEFAULT.\n */\nconst variant = {\n DEFAULT: 'default',\n QUIET: 'quiet',\n LARGE: 'large'\n};\n\n// the accordions's base classname\nconst CLASSNAME = '_coral-Accordion';\n\n/**\n @class Coral.Accordion\n @classdesc An Accordion component consisting of multiple collapsible items.\n @htmltag coral-accordion\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Accordion = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Attach events\n this._delegateEvents({\n 'click coral-accordion-item:not([disabled]) ._coral-Accordion-itemHeader': '_onItemClick',\n\n 'key:space ._coral-Accordion-itemHeader': '_onToggleItemKey',\n 'key:return ._coral-Accordion-itemHeader': '_onToggleItemKey',\n 'key:pageup ._coral-Accordion-itemHeader': '_focusPreviousItem',\n 'key:left ._coral-Accordion-itemHeader': '_focusPreviousItem',\n 'key:up ._coral-Accordion-itemHeader': '_focusPreviousItem',\n 'key:pagedown ._coral-Accordion-itemHeader': '_focusNextItem',\n 'key:right ._coral-Accordion-itemHeader': '_focusNextItem',\n 'key:down ._coral-Accordion-itemHeader': '_focusNextItem',\n 'key:home ._coral-Accordion-itemHeader': '_onHomeKey',\n 'key:end ._coral-Accordion-itemHeader': '_onEndKey',\n 'keydown ._coral-Accordion-itemHeader': '_onItemContentKeyDown',\n\n // private\n 'coral-accordion-item:_selectedchanged': '_onItemSelectedChanged'\n });\n\n // Used for eventing\n this._oldSelection = [];\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n The Accordion's variant. See {@link AccordionVariantEnum}.\n\n @type {String}\n @default AccordionVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {Collection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-accordion-item',\n // allows accordions to be nested\n itemSelector: ':scope > coral-accordion-item',\n onlyHandleChildren: true,\n onItemAdded: this._validateSelection,\n onItemRemoved: this._validateSelection\n });\n }\n return this._items;\n }\n\n /**\n Indicates whether the accordion accepts multiple selected items.\n @type {Boolean}\n @default false\n @htmlattribute multiple\n @htmlattributereflected\n */\n get multiple() {\n return this._multiple || false;\n }\n\n set multiple(value) {\n this._multiple = transform.booleanAttr(value);\n this._reflectAttribute('multiple', this._multiple);\n\n this._validateSelection();\n }\n\n /**\n Returns an Array containing the set selected items.\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.items._getAllSelected();\n }\n\n /**\n Returns the first selected item in the Accordion. The value null is returned if no element is\n selected.\n @type {AccordionItem}\n @readonly\n */\n get selectedItem() {\n return this.items._getFirstSelected();\n }\n\n /**\n The heading level for Accordion items within the Accordion\n\n @type {Number}\n @default 3\n @htmlattribute level\n @htmlattributereflected\n */\n get level() {\n return this._level || 3;\n }\n\n set level(value) {\n value = transform.number(value);\n if (validate.valueMustChange(value, this._level) && value > 0 && value < 7) {\n this._level = value;\n this._reflectAttribute('level', this._level);\n this.items.getAll().forEach(item => item.setAttribute('level', this._level));\n }\n }\n\n /** @private **/\n get _tabTarget() {\n return this.__tabTarget || null;\n }\n\n set _tabTarget(value) {\n this.__tabTarget = value;\n\n // Set all but the current set _tabTarget to not be a tab target:\n this.items.getAll().forEach((item) => {\n item._isTabTarget = item === value;\n });\n }\n\n /** @private */\n _onHomeKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._focusItem(this.items._getFirstSelectable());\n }\n\n /** @private */\n _onEndKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._focusItem(this.items._getLastSelectable());\n }\n\n /**\n References:\n http://www.w3.org/WAI/PF/aria-practices/#accordion &\n\n Handlers for when focus is on an element inside of the panel:\n http://test.cita.illinois.edu/aria/tabpanel/tabpanel2.php\n\n @private\n */\n _onItemContentKeyDown(event) {\n // Required since sometimes the value is a number\n const key = parseFloat(event.keyCode);\n const item = event.matchedTarget.parentNode;\n\n switch (key) {\n case UP_ARROW:\n case LEFT_ARROW:\n // Set focus on the tab button for the currently displayed tab.\n if ((event.metaKey || event.ctrlKey) && Keys.filterInputs(event)) {\n event.preventDefault();\n event.stopPropagation();\n\n this._focusItem(item);\n }\n break;\n case PAGE_UP:\n // Show the previous tab and set focus on its corresponding tab button. Shows the last tab in the panel if\n // current tab is the first one.\n if (event.metaKey || event.ctrlKey) {\n event.preventDefault();\n event.stopPropagation();\n\n const prevItem = this.items._getPreviousSelectable(item);\n this._toggleItemSelection(prevItem);\n this._focusItem(prevItem);\n }\n break;\n case PAGE_DOWN:\n // Show the next tab and set focus on its corresponding tab button. Shows the first tab in the panel if current\n // tab is the last one.\n if (event.metaKey || event.ctrlKey) {\n event.preventDefault();\n event.stopPropagation();\n\n const nextItem = this.items._getNextSelectable(item);\n this._toggleItemSelection(nextItem);\n this._focusItem(nextItem);\n }\n break;\n }\n }\n\n /** @private */\n _focusPreviousItem(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._focusItem(this.items._getPreviousSelectable(event.target.closest('coral-accordion-item')));\n }\n\n /** @private */\n _focusNextItem(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._focusItem(this.items._getNextSelectable(event.target.closest('coral-accordion-item')));\n }\n\n /** @private */\n _onItemClick(event) {\n // Clickable elements included in an item header shouldn't automatically trigger the selection of that item\n if (event.target.hasAttribute('coral-interactive') || event.target.closest('[coral-interactive]')) {\n return;\n }\n\n // The click was performed on the header so we select the item (parentNode) the selection is toggled\n const item = event.target.closest('coral-accordion-item');\n if (item) {\n event.preventDefault();\n event.stopPropagation();\n\n this._toggleItemSelection(item);\n this._focusItem(item);\n }\n }\n\n /** @private */\n _onToggleItemKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const item = event.target.closest('coral-accordion-item');\n this._toggleItemSelection(item);\n this._focusItem(item);\n }\n\n /** @private */\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _validateSelection(item) {\n const selectedItems = this.selectedItems;\n\n if (!this.multiple) {\n // Last selected item wins if multiple selection while not allowed\n item = item || selectedItems[selectedItems.length - 1];\n\n if (item && item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n }\n\n // set items level appropriately\n if (item && item.getAttribute('level') !== this.level) {\n item.setAttribute('level', this.level);\n }\n\n this._resetTabTarget();\n\n this._triggerChangeEvent();\n }\n\n /** @private */\n _triggerChangeEvent() {\n const selectedItems = this.selectedItems;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && this._arraysAreDifferent(selectedItems, oldSelection)) {\n // We differentiate whether multiple is on or off and return an array or HTMLElement respectively\n if (this.multiple) {\n this.trigger('coral-accordion:change', {\n oldSelection: oldSelection,\n selection: selectedItems\n });\n } else {\n // Return all items if we just switched from multiple=true to multiple=false and we had >1 selected items\n this.trigger('coral-accordion:change', {\n oldSelection: oldSelection.length > 1 ? oldSelection : oldSelection[0] || null,\n selection: selectedItems[0] || null\n });\n }\n\n this._oldSelection = selectedItems;\n }\n }\n\n /** @private */\n _arraysAreDifferent(selection, oldSelection) {\n let diff = [];\n\n if (oldSelection.length === selection.length) {\n diff = oldSelection.filter((item) => selection.indexOf(item) === -1);\n }\n\n // since we guarantee that they are arrays, we can start by comparing their size\n return oldSelection.length !== selection.length || diff.length !== 0;\n }\n\n /**\n Determine what item should get focus (if any) when the user tries to tab into the accordion. This should be the\n first selected panel, or the first selectable panel otherwise. When neither is available, to Accordion cannot be\n tabbed into.\n\n @private\n */\n _resetTabTarget() {\n if (!this._resetTabTargetScheduled) {\n this._resetTabTargetScheduled = true;\n\n window.requestAnimationFrame(() => {\n this._resetTabTargetScheduled = false;\n\n // since hidden items cannot have focus, we need to make sure the tabTarget is not hidden\n const selectedItems = this.items._getAllSelected();\n\n this._tabTarget = selectedItems.length ? selectedItems[0] : this.items._getFirstSelectable();\n });\n }\n }\n\n /** @private */\n _toggleItemSelection(item) {\n if (item) {\n item[item.hasAttribute('selected') ? 'removeAttribute' : 'setAttribute']('selected', '');\n }\n }\n\n /** @private */\n _focusItem(item) {\n if (item) {\n item._elements.button.focus();\n }\n\n this._tabTarget = item;\n }\n\n /**\n Returns {@link Accordion} variants.\n\n @return {AccordionVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['variant', 'multiple', 'level']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n\n // WAI-ARIA 1.1\n this.setAttribute('role', 'region');\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n this._validateSelection();\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItems;\n\n // Don't trigger animations on rendering\n window.requestAnimationFrame(() => {\n this.classList.add(`${CLASSNAME}--animated`);\n });\n }\n\n /**\n Triggered when {@link Accordion} selected item has changed.\n\n @typedef {CustomEvent} coral-accordion:change\n\n @property {AccordionItem} detail.oldSelection\n The prior selected item(s).\n @property {AccordionItem} detail.selection\n The newly selected item(s).\n */\n});\n\nexport default Accordion;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 400, "kind": "variable", "name": "PAGE_UP", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~PAGE_UP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 401, "kind": "variable", "name": "PAGE_DOWN", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~PAGE_DOWN", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 402, "kind": "variable", "name": "LEFT_ARROW", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~LEFT_ARROW", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 403, "kind": "variable", "name": "UP_ARROW", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~UP_ARROW", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 404, "kind": "typedef", "name": "AccordionVariantEnum", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~AccordionVariantEnum", "access": "public", "description": "Enumeration for {@link Accordion} variants.", "lineNumber": 36, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "Default look and feel." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "Not supported. Falls back to DEFAULT." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LARGE", "description": "Not supported. Falls back to DEFAULT." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AccordionVariantEnum" } }, { "__docId__": 405, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 43, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 406, "kind": "variable", "name": "Accordion", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~Accordion", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Accordion}", "description": "An Accordion component consisting of multiple collapsible items.", "lineNumber": 52, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Accordion" }, { "tagName": "@classdesc", "tagValue": "An Accordion component consisting of multiple collapsible items." }, { "tagName": "@htmltag", "tagValue": "coral-accordion" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Accordion();" ], "see": [ "../examples/#accordion" ], "type": { "types": [ "*" ] } }, { "__docId__": 407, "kind": "typedef", "name": "coral-accordion:change", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/Accordion.js~coral-accordion:change", "access": "public", "description": "Triggered when {@link Accordion} selected item has changed.", "properties": [ { "nullable": null, "types": [ "AccordionItem" ], "spread": false, "optional": false, "name": "detail.oldSelection", "description": "The prior selected item(s)." }, { "nullable": null, "types": [ "AccordionItem" ], "spread": false, "optional": false, "name": "detail.selection", "description": "The newly selected item(s)." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-accordion:change" } }, { "__docId__": 408, "kind": "file", "name": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\nimport base from '../templates/base';\nimport {commons, transform, validate} from '../../../coral-utils';\nimport {Icon} from '../../../coral-component-icon';\n\nconst CLASSNAME = '_coral-Accordion-item';\n\n/**\n @class Coral.Accordion.Item\n @classdesc A Accordion item component\n @htmltag coral-accordion-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst AccordionItem = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {\n // Create or fetch the content zones\n label: this.querySelector('coral-accordion-item-label') || document.createElement('coral-accordion-item-label'),\n content: this.querySelector('coral-accordion-item-content') || document.createElement('coral-accordion-item-content')\n };\n\n base.call(this._elements, {Icon});\n }\n\n /**\n The label of this accordion item.\n\n @type {AccordionItemLabel}\n @contentzone\n */\n get label() {\n return this._getContentZone(this._elements.label);\n }\n\n set label(value) {\n this._setContentZone('label', value, {\n handle: 'label',\n tagName: 'coral-accordion-item-label',\n insert: function (label) {\n this._setAria(this._elements.button, this._elements.content);\n\n this._elements.button.appendChild(label);\n }\n });\n }\n\n /**\n The content of this accordion item.\n\n @type {AccordionItemContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-accordion-item-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}Content`);\n\n // WAI-ARIA 1.1\n content.setAttribute('role', 'region');\n\n this._setAria(this._elements.button, content);\n\n this.appendChild(content);\n }\n });\n }\n\n /**\n Whether the item is selected. If the item has an element with the `coral-interactive` attribute and is clicked,\n then the toggling of the accordion item will not occur.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n let _value = transform.booleanAttr(value);\n let _selected = this.hasAttribute('disabled') ? false : _value;\n\n if(this._selected === _selected) {\n return;\n }\n\n this._selected = _selected;\n this._reflectAttribute('selected', this._selected);\n\n // Read it before applying is-open which adds additional padding\n const scrollHeight = this._elements.content.scrollHeight;\n\n this.classList.toggle('is-open', this._selected);\n this._elements.button.setAttribute('aria-expanded', this._selected);\n\n if (!this._selected) {\n this._elements.content.style.height = `${scrollHeight}px`;\n // We read the offset height to force a reflow, this is needed to start the transition between absolute values\n // https://blog.alexmaccaw.com/css-transitions under Redrawing\n // eslint-disable-next-line no-unused-vars\n const offsetHeight = this._elements.content.offsetHeight;\n }\n\n this._elements.content.style.height = this._selected ? `${scrollHeight}px` : '0';\n\n if (this._selected) {\n commons.transitionEnd(this._elements.content, () => {\n this._elements.content.style.height = '';\n });\n }\n\n if(!this._selected) {\n this._elements.content.setAttribute('aria-hidden', 'true');\n this._elements.content.style.visibility = 'hidden';\n } else {\n this._elements.content.setAttribute('aria-hidden', 'false');\n this._elements.content.style.visibility = 'visible';\n }\n\n this.trigger('coral-accordion-item:_selectedchanged');\n }\n\n /**\n Whether this item is disabled.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this._elements.button[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', '');\n\n this.selected = this.selected;\n }\n\n\n /**\n The heading level for the Accordion item\n\n @type {Number}\n @default 3\n @htmlattribute level\n @htmlattributereflected\n */\n get level() {\n return this._level || 3;\n }\n\n set level(value) {\n value = transform.number(value);\n // If the value has changed,\n if (!validate.valueMustChange(value, this._level)) {\n return;\n }\n // and the value is greater than 0\n if (value > 0) {\n // set the value and reflect the attribute.\n this._level = value;\n this._reflectAttribute('level', this._level);\n\n // If the new value is not equal to the default,\n if (value !== 3) {\n // override the aria-level on the h3 element.\n this._elements.heading.setAttribute('aria-level', this._level);\n return;\n }\n }\n\n // If the value is the default or invalid, remove the aria-level override from the h3 element.\n this._elements.heading.removeAttribute('aria-level');\n }\n\n /** @private **/\n get _isTabTarget() {\n return this.__isTabTarget || false;\n }\n\n set _isTabTarget(value) {\n this.__isTabTarget = value;\n\n if (this.disabled) {\n this._elements.button.removeAttribute('tabindex');\n } else {\n this._elements.button.setAttribute('tabindex', '0');\n }\n }\n\n _setAria(button, content) {\n button.id = button.id || commons.getUID();\n content.id = content.id || commons.getUID();\n\n button.setAttribute('aria-controls', content.id);\n content.setAttribute('aria-labelledby', button.id);\n }\n\n /**\n Handles the focus of the item.\n\n @ignore\n */\n focus() {\n this._elements.label.focus();\n }\n\n get _contentZones() {\n return {'coral-accordion-item-label': 'label', 'coral-accordion-item-content': 'content'};\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', 'disabled', 'level']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n this.setAttribute('role', 'presentation');\n\n // Support cloneNode\n const template = this.querySelector('._coral-Accordion-itemHeading');\n if (template) {\n template.remove();\n }\n\n // Move content into the content zone if not specified\n if (!this._elements.content.parentNode) {\n while (this.firstChild) {\n this._elements.content.appendChild(this.firstChild);\n }\n }\n\n this.appendChild(this._elements.heading);\n\n // Assign the content zones, moving them into place in the process\n this.label = this._elements.label;\n this.content = this._elements.content;\n\n // Defaults\n this.selected = this.selected;\n }\n});\n\nexport default AccordionItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 409, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 410, "kind": "variable", "name": "AccordionItem", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js", "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItem.js~AccordionItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Accordion}", "description": "A Accordion item component", "lineNumber": 28, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Accordion.Item" }, { "tagName": "@classdesc", "tagValue": "A Accordion item component" }, { "tagName": "@htmltag", "tagValue": "coral-accordion-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Accordion.Item();" ], "see": [ "../examples/#accordion" ], "type": { "types": [ "*" ] } }, { "__docId__": 411, "kind": "file", "name": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Accordion.Item.Content\n @classdesc Accordion item's content component\n @htmltag coral-accordion-item-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-accordion-item-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-accordion/src/scripts/AccordionItemContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 412, "kind": "function", "name": "AccordionItemContent", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemContent.js~AccordionItemContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Accordion}", "description": "Accordion item's content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Accordion.Item.Content" }, { "tagName": "@classdesc", "tagValue": "Accordion item's content component" }, { "tagName": "@htmltag", "tagValue": "coral-accordion-item-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Accordion.Item.Content();" ], "see": [ "../examples/#accordion" ], "params": [] }, { "__docId__": 413, "kind": "file", "name": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemLabel.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Accordion.Item.Label\n @classdesc Accordion item's label component\n @htmltag coral-accordion-item-label\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-accordion-item-label');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-accordion/src/scripts/AccordionItemLabel.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 414, "kind": "function", "name": "AccordionItemLabel", "memberof": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemLabel.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-accordion/src/scripts/AccordionItemLabel.js~AccordionItemLabel", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Accordion}", "description": "Accordion item's label component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Accordion.Item.Label" }, { "tagName": "@classdesc", "tagValue": "Accordion item's label component" }, { "tagName": "@htmltag", "tagValue": "coral-accordion-item-label" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Accordion.Item.Label();" ], "see": [ "../examples/#accordion" ], "params": [] }, { "__docId__": 415, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\nimport '../../../coral-component-popover';\nimport getFirstSelectableWrappedItem from './getFirstSelectableWrappedItem';\nimport {commons} from '../../../coral-utils';\n\nconst CLASSNAME = '_coral-ActionBar';\n\n/**\n @class Coral.ActionBar\n @classdesc An ActionBar component containing arbitrary items. An item can either be added to the left or the right side\n of the bar. All items that do not fit into the bar are hidden but still accessible.\n @htmltag coral-actionbar\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ActionBar = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Attach events\n this._delegateEvents({\n 'key:up': '_onFocusPreviousItem',\n 'key:left': '_onFocusPreviousItem',\n 'key:down': '_onFocusNextItem',\n 'key:right': '_onFocusNextItem',\n 'global:resize': '_onResizeWindow'\n });\n\n // Prepare templates\n this._elements = {\n // Fetch or create the content zone elements\n primary: this.querySelector('coral-actionbar-primary') || document.createElement('coral-actionbar-primary'),\n secondary: this.querySelector('coral-actionbar-secondary') || document.createElement('coral-actionbar-secondary')\n };\n\n // Reference on all items\n this._items = this.getElementsByTagName('coral-actionbar-item');\n\n // Debounce wait time in milliseconds\n this._wait = 50;\n\n // bind this._onLayout so it can be removed again\n this._onLayout = this._onLayout.bind(this);\n this._debounceOnLayout = this._debounceOnLayout.bind(this);\n\n // use the smart strategy instead of re-rendering every frame\n this._recalculateLayoutOnMutation();\n }\n\n /**\n The primary (left) container of the ActionBar.\n\n @type {ActionBarPrimary}\n @contentzone\n */\n get primary() {\n return this._getContentZone(this._elements.primary);\n }\n\n set primary(value) {\n this._setContentZone('primary', value, {\n handle: 'primary',\n tagName: 'coral-actionbar-primary',\n insert: function (content) {\n // primary has to be before secondary if available\n this.insertBefore(content, this.secondary);\n }\n });\n }\n\n /**\n The secondary (right) container of the ActionBar.\n\n @type {ActionBarSecondary}\n @contentzone\n */\n get secondary() {\n return this._getContentZone(this._elements.secondary);\n }\n\n set secondary(value) {\n this._setContentZone('secondary', value, {\n handle: 'secondary',\n tagName: 'coral-actionbar-secondary',\n insert: function (content) {\n this.appendChild(content);\n }\n });\n }\n\n /** @ignore */\n _recalculateLayoutOnMutation() {\n // recalculate layout on dom element size change + on dom mutation\n // http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/\n\n // relayout any time the dom changes\n this._observer = new MutationObserver(() => {\n this._debounceOnLayout();\n });\n\n // Watch for changes\n this._observer.observe(this, {\n attributes: true,\n childList: true,\n characterData: true,\n subtree: true\n });\n }\n\n /** @ignore */\n _onFocusPreviousItem(event) {\n // stops the page from scrolling\n event.preventDefault();\n\n const previousItem = this._getPreviousSelectableWrappedItem(event.target);\n if (previousItem !== null) {\n previousItem.focus();\n }\n }\n\n /** @ignore */\n _onFocusNextItem(event) {\n // stops the page from scrolling\n event.preventDefault();\n\n const nextWrappedItem = this._getNextSelectableWrappedItem(event.target);\n if (nextWrappedItem !== null) {\n nextWrappedItem.focus();\n }\n }\n\n /** @ignore */\n _onResizeWindow() {\n // just close all popovers for now when screen is resized\n // there might be more popovers, then the 'more' popovers\n const popovers = this.getElementsByTagName('coral-popover');\n for (let i = 0 ; i < popovers.length ; i++) {\n popovers[i].removeAttribute('open');\n }\n\n // force a relayout (needed especially if framerate during resize drops e.g.: in FF)\n this._debounceOnLayout();\n }\n\n /** @ignore */\n _onLayout() {\n if (!this.primary || !this.primary._elements || !this.primary._elements.overlay ||\n !this.secondary || !this.secondary._elements || !this.secondary._elements.overlay) {\n // while containers are not cached or no items are rendered do nothing\n return;\n }\n\n if (this.primary._elements.overlay.open === true || this.secondary._elements.overlay.open === true) {\n // while popovers are open do not relayout\n return;\n }\n\n const ERROR_MARGIN = 78;\n\n const primaryMore = this.primary._elements.moreButton;\n const secondaryMore = this.secondary._elements.moreButton;\n const leftItems = this.primary.items.getAll();\n const rightItems = this.secondary.items.getAll().reverse();\n let itemLeft = null;\n let itemRight = null;\n const widthCache = this._newWidthCache();\n const leftMoreButtonWidth = leftItems.length > 0 ? widthCache.getOuterWidth(primaryMore) : 0;\n const rightMoreButtonWidth = rightItems.length > 0 ? widthCache.getOuterWidth(secondaryMore) : 0;\n\n // Make it possible to set left/right padding to the containers\n const borderWidthLeftContainer = this.primary.offsetWidth - this.primary.getBoundingClientRect().width;\n const borderWidthRightContainer = this.secondary.offsetWidth - this.secondary.getBoundingClientRect().width;\n\n const primaryLeftOffset = this.primary.offsetLeft;\n const secondaryRightOffset = this.offsetWidth - (this.secondary.offsetLeft + this.secondary.offsetWidth);\n\n let availableWidth = this.offsetWidth - primaryLeftOffset - secondaryRightOffset - leftMoreButtonWidth -\n rightMoreButtonWidth - borderWidthLeftContainer - borderWidthRightContainer - ERROR_MARGIN;\n let currentUsedWidth = 0;\n let leftVisibleItems = 0;\n let rightVisibleItems = 0;\n let moreButtonLeftVisible = false;\n let moreButtonRightVisible = false;\n let showItem = false;\n let itemWidth = 0;\n\n for (let i = 0 ; i < leftItems.length || i < rightItems.length ; i++) {\n itemLeft = i < leftItems.length ? leftItems[i] : null;\n itemRight = i < rightItems.length ? rightItems[i] : null;\n\n // first calculate visibility of left item\n showItem = false;\n if (itemLeft !== null) {\n if (itemLeft.hidden || itemLeft.style.display === 'none') {\n // item is hidden on purpose (we don't use it for layouting but do also not move offscreen) needed as it\n // might already have been moved offscreen before\n this._moveToScreen(itemLeft);\n } else {\n // if item is not hidden on purpose (hiding by actionBar due to space problems does not count) => layout\n // element\n if (!moreButtonLeftVisible && (this.primary.threshold <= 0 || leftVisibleItems < this.primary.threshold)) {\n // if threshold is not reached so far\n itemWidth = widthCache.getOuterWidth(itemLeft);\n\n if (currentUsedWidth + itemWidth < availableWidth) {\n // if there is still enough space to show another item\n showItem = true;\n } else if (leftVisibleItems === leftItems.length - 1 &&\n currentUsedWidth + itemWidth < availableWidth + leftMoreButtonWidth\n ) {\n // if this is the last item and so far there have been no items hidden => don't show more button\n showItem = true;\n }\n }\n\n if (showItem) {\n leftVisibleItems += 1;\n currentUsedWidth += itemWidth;\n this._moveToScreen(itemLeft);\n } else {\n this._hideItem(itemLeft);\n moreButtonLeftVisible = true;\n }\n\n if (leftVisibleItems === leftItems.length) {\n // left more button not needed => more free space available\n availableWidth += leftMoreButtonWidth;\n moreButtonLeftVisible = false;\n }\n }\n }\n\n // then calculate visibility of right item\n showItem = false;\n if (itemRight !== null) {\n if (itemRight.hidden || itemRight.style.display === 'none') {\n // item is hidden on purpose (we don't use it for layouting but do also not move offscreen) needed as it\n // might already have been moved offscreen before\n this._moveToScreen(itemRight);\n } else {\n // if item is not hidden on purpose (hiding by actionBar due to space problems does not count) => layout\n // element\n if (!moreButtonRightVisible && (this.secondary.threshold <= 0 || rightVisibleItems < this.secondary.threshold)) {\n // if threshold is not reached so far\n itemWidth = widthCache.getOuterWidth(itemRight);\n\n if (currentUsedWidth + itemWidth < availableWidth) {\n // if there is still enough space to show another item\n showItem = true;\n } else if (rightVisibleItems === rightItems.length - 1 &&\n currentUsedWidth + itemWidth < availableWidth + rightMoreButtonWidth\n ) {\n // if this is the last item and so far there have been no items hidden => don't show more button\n showItem = true;\n }\n }\n\n if (showItem) {\n rightVisibleItems += 1;\n currentUsedWidth += itemWidth;\n this._moveToScreen(itemRight);\n } else {\n this._hideItem(itemRight);\n moreButtonRightVisible = true;\n }\n\n if (rightVisibleItems === rightItems.length) {\n // left more button not needed => more free space available\n availableWidth += rightMoreButtonWidth;\n moreButtonRightVisible = false;\n }\n }\n }\n }\n\n // Handle tabs\n const primarySelectable = this.primary.items._getAllSelectable();\n const secondarySelectable = this.secondary.items._getAllSelectable();\n for (let i = 0 ; i < this._items.length ; i++) {\n this._toggleItemTabbable(this._items[i], false);\n }\n\n // LEFT: Show or hide more buttons\n if (moreButtonLeftVisible) {\n this._moveToScreen(primaryMore, true);\n\n if (primarySelectable.length === 0) {\n this._toggleItemTabbable(primaryMore, true);\n } else {\n this._toggleItemTabbable(primaryMore, false);\n this._toggleItemTabbable(primarySelectable[0], true);\n }\n } else {\n this._moveToScreen(primaryMore, false);\n this._toggleItemTabbable(primaryMore, false);\n this._toggleItemTabbable(primarySelectable[0], true);\n }\n\n // RIGHT: Show or hide more buttons\n if (moreButtonRightVisible) {\n this._moveToScreen(secondaryMore, true);\n\n if (secondarySelectable.length === 0) {\n this._toggleItemTabbable(secondaryMore, true);\n } else {\n this._toggleItemTabbable(secondaryMore, false);\n this._toggleItemTabbable(secondarySelectable[0], true);\n }\n } else {\n this._moveToScreen(secondaryMore, false);\n this._toggleItemTabbable(secondaryMore, false);\n\n const tabbableItem = this.secondary.items._getAllSelectable()[0];\n if (tabbableItem) {\n this._toggleItemTabbable(tabbableItem, true);\n }\n }\n\n // re-calculate layout on element resize\n if (!this._resizeListenerAttached) {\n commons.addResizeListener(this, this._debounceOnLayout);\n commons.addResizeListener(this.primary, this._debounceOnLayout);\n commons.addResizeListener(this.secondary, this._debounceOnLayout);\n\n this._resizeListenerAttached = true;\n }\n }\n\n /** @ignore */\n _getNextSelectableWrappedItem(currentItem) {\n if (currentItem.parentNode.tagName === 'CORAL-ACTIONBAR-ITEM') {\n // currentItem is wrapped\n currentItem = currentItem.parentNode;\n }\n\n const selectableItems = this._getAllSelectableItems(currentItem);\n const length = selectableItems.length;\n const index = selectableItems.indexOf(currentItem);\n\n if (index >= 0 && length > index + 1) {\n // if there is a next selectable element return it\n return getFirstSelectableWrappedItem(selectableItems[index + 1]);\n } else {\n for (let i = 0 ; i < length ; i++) {\n if (selectableItems[i].contains(currentItem) && length > i + 1) {\n return getFirstSelectableWrappedItem(selectableItems[i + 1]);\n }\n }\n }\n\n return null;\n }\n\n /** @ignore */\n _getPreviousSelectableWrappedItem(currentItem) {\n if (currentItem.parentNode.tagName === 'CORAL-ACTIONBAR-ITEM') {\n // currentItem is wrapped\n currentItem = currentItem.parentNode;\n }\n\n const selectableItems = this._getAllSelectableItems(currentItem);\n const index = selectableItems.indexOf(currentItem);\n\n if (index > 0) {\n // if there is a previous selectable element return it\n return getFirstSelectableWrappedItem(selectableItems[index - 1]);\n } else {\n for (let i = 1 ; i < selectableItems.length ; i++) {\n if (selectableItems[i].contains(currentItem)) {\n return getFirstSelectableWrappedItem(selectableItems[i - 1]);\n }\n }\n }\n\n return null;\n }\n\n /** @ignore */\n _getAllSelectableItems(currentItem) {\n let selectableItems = [];\n\n if (this.primary._elements.overlay.open === true || this.secondary._elements.overlay.open === true) {\n // if popover is open only items in popover can be selected\n const popoverItems = this.primary._elements.overlay.open === true ? this.primary._itemsInPopover :\n this.secondary._itemsInPopover;\n let item = null;\n\n for (let i = 0 ; i < popoverItems.length ; i++) {\n item = popoverItems[i];\n if (!item.hasAttribute('disabled') &&\n !item.hasAttribute('hidden') &&\n item.style.display !== 'none' &&\n getFirstSelectableWrappedItem(item)\n ) {\n selectableItems.push(item);\n }\n }\n } else {\n // concat selectable items from left side of the bar and right side of the bar\n const leftSelectableItems = this.primary.items._getAllSelectable();\n const rightSelectableItems = this.secondary.items._getAllSelectable();\n if (currentItem) {\n if (this.primary.contains(currentItem)) {\n selectableItems = leftSelectableItems;\n } else if (this.secondary.contains(currentItem)) {\n selectableItems = rightSelectableItems;\n }\n } else {\n selectableItems = leftSelectableItems.concat(rightSelectableItems);\n }\n }\n\n return selectableItems;\n }\n\n /** @ignore */\n _newWidthCache() {\n return {\n _items: [],\n _outerWidth: [],\n getOuterWidth: function (item) {\n let index = this._items.indexOf(item);\n if (index < 0) {\n // if item was not cached in current frame => cache it\n this._items.push(item);\n\n const width = item.offsetWidth;\n this._outerWidth.push(width);\n index = this._outerWidth.length - 1;\n }\n\n return this._outerWidth[index];\n }\n };\n }\n\n /** @ignore */\n _forceWebkitRedraw(el) {\n const isWebkit = 'WebkitAppearance' in document.documentElement.style;\n\n if (isWebkit && el.style.display !== 'none') {\n el.style.display = 'none';\n\n // no need to store this anywhere, the reference would be enough\n this._cachedOffsetHeight = el.offsetHeight;\n\n el.style.display = '';\n }\n }\n\n /** @ignore */\n _hideItem(item, hide) {\n if (hide === false) {\n this._moveToScreen(item);\n } else if (!item.hasAttribute('coral-actionbar-offscreen')) {\n // actually just move element offscreen to be able to measure the size while calculating the layout\n item.setAttribute('coral-actionbar-offscreen', '');\n item.style.visibility = 'hidden';\n // if I do not force a browser redraw webkit has layouting problems\n this._forceWebkitRedraw(item);\n }\n }\n\n /** @ignore */\n _moveToScreen(item, show) {\n if (show === false) {\n this._hideItem(item);\n } else if (item.hasAttribute('coral-actionbar-offscreen')) {\n // actually just move element onscreen again (see _hideItem)\n item.removeAttribute('coral-actionbar-offscreen');\n item.style.visibility = '';\n // if I do not force a browser redraw webkit has layouting problems\n this._forceWebkitRedraw(item);\n }\n }\n\n /** @ignore */\n _toggleItemTabbable(item, tabbable) {\n this._ignoreLayout = true;\n // item might be wrapped (for now remove/add tabindex only on the first wrapped item)\n item = getFirstSelectableWrappedItem(item);\n\n if (item !== null) {\n item.setAttribute('tabindex', tabbable ? 0 : -1);\n }\n }\n\n /** @ignore */\n _debounceOnLayout() {\n if (this._ignoreLayout) {\n this._ignoreLayout = false;\n return;\n }\n\n // Debounce\n if (this._timeout !== null) {\n window.clearTimeout(this._timeout);\n }\n\n this._timeout = window.setTimeout(() => {\n this._timeout = null;\n this._onLayout();\n }, this._wait);\n }\n\n _moveDirectItemChildren() {\n const items = Array.prototype.filter.call(this.children, child => child.nodeName === 'CORAL-ACTIONBAR-ITEM');\n const frag = document.createDocumentFragment();\n\n // Move them to the frag\n items.forEach((item) => {\n frag.appendChild(item);\n });\n\n // Add the frag to primary content zone\n this._elements.primary.appendChild(frag);\n }\n\n get _contentZones() {\n return {\n 'coral-actionbar-primary': 'primary',\n 'coral-actionbar-secondary': 'secondary'\n };\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Move direct items into primary content zone\n this._moveDirectItemChildren();\n\n // Cleanup resize helpers object (cloneNode support)\n const resizeHelpers = this.querySelectorAll('object');\n for (let i = 0 ; i < resizeHelpers.length ; ++i) {\n const resizeElement = resizeHelpers[i];\n if (resizeElement.parentNode === this) {\n this.removeChild(resizeElement);\n }\n }\n\n const primary = this._elements.primary;\n const secondary = this._elements.secondary;\n\n if (!primary.hasAttribute('role')) {\n primary.setAttribute('role', 'toolbar');\n }\n if (!secondary.hasAttribute('role')) {\n secondary.setAttribute('role', 'toolbar');\n }\n\n // we need to know if the content zone was provided to stop the voracious behavior\n let primaryProvided = primary.parentNode === this;\n\n // as a way to transition to the new content zones, we need to provide support for the old container tag. we copy\n // everything from these containers into the corresponding content zones, including the configurations\n const containers = Array.prototype.slice.call(this.getElementsByTagName('coral-actionbar-container'));\n\n let legacyContainer;\n let targetContainer;\n for (let j = 0, containersCount = containers.length ; j < containersCount ; j++) {\n legacyContainer = containers[j];\n\n // move first container content to new primary element\n if (j === 0) {\n targetContainer = primary;\n // overrides the previous configuration as we support older containers\n primaryProvided = true;\n } else if (j === 1) {\n targetContainer = secondary;\n }\n\n // it may happen that more than 2 containers were provided, in such case we simply ignore it\n if (targetContainer) {\n // we need to copy the existing configuration to the new content zone\n if (legacyContainer.hasAttribute('threshold')) {\n targetContainer.setAttribute('threshold', legacyContainer.getAttribute('threshold'));\n }\n if (legacyContainer.hasAttribute('morebuttontext')) {\n targetContainer.setAttribute('morebuttontext', legacyContainer.getAttribute('morebuttontext'));\n }\n\n // @todo: are we copying the more button?\n while (legacyContainer.firstChild) {\n targetContainer.appendChild(legacyContainer.firstChild);\n }\n }\n\n this.removeChild(legacyContainer);\n }\n\n // to prevent the content zone being voracious, we only move the children if primary was not explicitely provided\n if (!primaryProvided) {\n while (this.firstChild) {\n primary.appendChild(this.firstChild);\n }\n }\n\n // Call content zone inserts\n this.primary = this._elements.primary;\n this.secondary = this._elements.secondary;\n\n // force one layout\n this._onLayout();\n }\n});\n\nexport default ActionBar;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 416, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 417, "kind": "variable", "name": "ActionBar", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBar.js~ActionBar", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "An ActionBar component containing arbitrary items. An item can either be added to the left or the right side\nof the bar. All items that do not fit into the bar are hidden but still accessible.", "lineNumber": 29, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar" }, { "tagName": "@classdesc", "tagValue": "An ActionBar component containing arbitrary items. An item can either be added to the left or the right side\nof the bar. All items that do not fit into the bar are hidden but still accessible." }, { "tagName": "@htmltag", "tagValue": "coral-actionbar" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ActionBar();" ], "see": [ "../examples/#actionbar" ], "type": { "types": [ "*" ] } }, { "__docId__": 418, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {commons} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\nimport {BaseComponent} from '../../../coral-base-component';\nimport BaseActionBarContainer from './BaseActionBarContainer';\nimport '../../../coral-component-list';\n\nconst CLASSNAME = '_coral-ActionBar-container';\n\n/**\n Enumeration for {@link ActionBarContainer} positions.\n\n @typedef {Object} ActionBarContainerPositionEnum\n\n @property {String} PRIMARY\n Primary (left) ActionBar container.\n @property {String} SECONDARY\n Secondary (right) ActionBar container.\n @property {String} INVALID\n Invalid ActionBar container.\n */\nconst position = {\n PRIMARY: 'primary',\n SECONDARY: 'secondary',\n INVALID: 'invalid'\n};\n\n/**\n @class Coral.ActionBar.Container\n @classdesc An ActionBar container component\n @htmltag coral-actionbar-container\n @extends {HTMLElement}\n @extends {BaseComponent}\n\n @deprecated\n */\nconst ActionBarContainer = Decorator(class extends BaseActionBarContainer(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n commons._log('warn', `Coral.ActionBar.Container: coral-actionbar-container has been deprecated.\n Please use coral-actionbar-primary and coral-actionbar-secondary instead`);\n }\n\n /**\n The container position inside the actionbar.\n\n @private\n @type {String}\n @readonly\n @default ActionBarContainerPositionEnum.INVALID\n */\n get _position() {\n if (this.parentNode) {\n const containers = this.parentNode.getElementsByTagName('coral-actionbar-container');\n\n if (containers.length > 0 && containers[0] === this) {\n return position.PRIMARY;\n } else if (containers.length > 1 && containers[1] === this) {\n return position.SECONDARY;\n }\n }\n\n return position.INVALID;\n }\n\n /** @ignore */\n _attachMoreButtonToContainer() {\n if (this.parentNode && this.parentNode.secondary === this) {\n this.insertBefore(this._elements.moreButton, this.firstChild);\n } else {\n // add the button to the left/primary contentzone\n this.appendChild(this._elements.moreButton);\n }\n }\n\n /**\n Returns {@link ActionBarContainer} positions.\n\n @return {ActionBarContainerPositionEnum}\n */\n static get position() {\n return position;\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Cleanup resize helpers object (cloneNode support)\n const resizeHelpers = this.getElementsByTagName('object');\n for (let i = 0 ; i < resizeHelpers.length ; ++i) {\n const resizeElement = resizeHelpers[i];\n if (resizeElement.parentNode === this) {\n this.removeChild(resizeElement);\n }\n }\n\n // Cleanup 'More' button\n this._elements.moreButton = this.querySelector('[coral-actionbar-more]');\n if (this._elements.moreButton) {\n this.removeChild(this._elements.moreButton);\n }\n\n // Cleanup 'More' popover\n this._elements.overlay = this.querySelector('[coral-actionbar-popover]');\n if (this._elements.overlay) {\n this.removeChild(this._elements.overlay);\n }\n\n // Init 'More' button\n this._elements.moreButton.label.textContent = this.moreButtonText;\n // 'More' button might be moved later in dom when Container is attached to parent\n this.appendChild(this._elements.moreButton);\n\n // Init 'More' popover\n this._elements.overlay.target = this._elements.moreButton;\n\n // Insert popover always as firstChild to ensure element order (cloneNode support)\n this.insertBefore(this._elements.overlay, this.firstChild);\n\n this._attachMoreButtonToContainer();\n }\n});\n\nexport default ActionBarContainer;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 419, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 420, "kind": "typedef", "name": "ActionBarContainerPositionEnum", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js~ActionBarContainerPositionEnum", "access": "public", "description": "Enumeration for {@link ActionBarContainer} positions.", "lineNumber": 33, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "PRIMARY", "description": "Primary (left) ActionBar container." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SECONDARY", "description": "Secondary (right) ActionBar container." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INVALID", "description": "Invalid ActionBar container." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ActionBarContainerPositionEnum" } }, { "__docId__": 421, "kind": "variable", "name": "ActionBarContainer", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainer.js~ActionBarContainer", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "An ActionBar container component", "lineNumber": 48, "deprecated": true, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar.Container" }, { "tagName": "@classdesc", "tagValue": "An ActionBar container component" }, { "tagName": "@htmltag", "tagValue": "coral-actionbar-container" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ActionBar.Container();" ], "see": [ "../examples/#actionbar" ], "type": { "types": [ "*" ] } }, { "__docId__": 422, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SelectableCollection} from '../../../coral-collection';\nimport getFirstSelectableWrappedItem from './getFirstSelectableWrappedItem';\n\n/**\n @class Coral.ActionBar.Container.Collection\n @classdesc The ActionBar container collection\n @extends {SelectableCollection}\n */\nclass ActionBarContainerCollection extends SelectableCollection {\n add(item, before) {\n // in the left actionBar container always insert elements before the 'more' button in right actionBar always append\n // at the end\n if (!before && this._host.tagName === 'CORAL-ACTIONBAR-PRIMARY') {\n const moreButton = this._host._elements.moreButton;\n before = this._host.contains(moreButton) ? moreButton : null;\n }\n\n return super.add(item, before);\n }\n\n clear() {\n const items = super.clear();\n\n this._host._itemsInPopover = [];\n\n return items;\n }\n\n _getAllSelectable() {\n const selectableItems = [];\n\n let child = null;\n for (let i = 0 ; i < this._host.children.length ; i++) {\n child = this._host.children[i];\n if (\n !child.hasAttribute('disabled') &&\n !child.hasAttribute('hidden') &&\n !child.hasAttribute('coral-actionbar-offscreen') &&\n child !== this._host._elements.overlay &&\n getFirstSelectableWrappedItem(child)\n ) {\n selectableItems.push(child);\n }\n }\n\n return selectableItems;\n }\n\n _getAllOffScreen() {\n return Array.prototype.slice.call(this._host.querySelectorAll(`${this._itemTagName}[coral-actionbar-offscreen]`));\n }\n}\n\nexport default ActionBarContainerCollection;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 423, "kind": "class", "name": "ActionBarContainerCollection", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "The ActionBar container collection", "lineNumber": 21, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar.Container.Collection" }, { "tagName": "@classdesc", "tagValue": "The ActionBar container collection" } ], "interface": false, "extends": [ "SelectableCollection" ], "examples": [ "JS constructor\nnew Coral.ActionBar.Container.Collection();" ], "see": [ "../examples/#actionbar" ] }, { "__docId__": 424, "kind": "method", "name": "add", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection#add", "access": "public", "description": null, "lineNumber": 22, "undocument": true, "params": [ { "name": "item", "types": [ "*" ] }, { "name": "before", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 425, "kind": "method", "name": "clear", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection#clear", "access": "public", "description": null, "lineNumber": 33, "undocument": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 426, "kind": "method", "name": "_getAllSelectable", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection#_getAllSelectable", "access": "private", "description": null, "lineNumber": 41, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 427, "kind": "method", "name": "_getAllOffScreen", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarContainerCollection.js~ActionBarContainerCollection#_getAllOffScreen", "access": "private", "description": null, "lineNumber": 61, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 428, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ActionBar-item';\n\n/**\n @class Coral.ActionBar.Item\n @classdesc An ActionBar item component\n @htmltag coral-actionbar-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ActionBarItem = Decorator(class extends BaseComponent(HTMLElement) {\n // @compat\n get content() {\n return this;\n }\n\n set content(value) {\n // Support configs\n if (typeof value === 'object') {\n for (const prop in value) {\n /** @ignore */\n this[prop] = value[prop];\n }\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n});\n\nexport default ActionBarItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 429, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 16, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 430, "kind": "variable", "name": "ActionBarItem", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarItem.js~ActionBarItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "An ActionBar item component", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar.Item" }, { "tagName": "@classdesc", "tagValue": "An ActionBar item component" }, { "tagName": "@htmltag", "tagValue": "coral-actionbar-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ActionBar.Item();" ], "see": [ "../examples/#actionbar" ], "type": { "types": [ "*" ] } }, { "__docId__": 431, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\nimport getFirstSelectableWrappedItem from './getFirstSelectableWrappedItem';\nimport ActionBarContainer from './BaseActionBarContainer';\n\nconst CLASSNAME = '_coral-ActionBar-primary';\n\n/**\n @class Coral.ActionBar.Primary\n @classdesc An ActionBar primary component\n @htmltag coral-actionbar-primary\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ActionBarPrimary = Decorator(class extends ActionBarContainer(BaseComponent(HTMLElement)) {\n /** @ignore */\n _returnElementsFromPopover() {\n let item = null;\n let wrappedItem = null;\n\n for (let i = 0 ; i < this._itemsInPopover.length ; i++) {\n item = this._itemsInPopover[i];\n\n item.style.visibility = 'hidden';\n\n // remove tabindex again\n wrappedItem = getFirstSelectableWrappedItem(item);\n if (wrappedItem && wrappedItem.hasAttribute('tabindex')) {\n wrappedItem.setAttribute('tabindex', -1);\n }\n\n this.insertBefore(item, this._elements.moreButton);\n\n // Reset popover id, target\n if (item._button && item._popover) {\n item._popover.id = item._popoverId;\n if (item._popover.target) {\n item._popover.target = item._button;\n }\n }\n }\n }\n\n /** @ignore */\n _attachMoreButtonToContainer() {\n // add the button to the left/primary contentzone\n this.appendChild(this._elements.moreButton);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this._attachMoreButtonToContainer();\n }\n});\n\nexport default ActionBarPrimary;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 432, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 433, "kind": "variable", "name": "ActionBarPrimary", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarPrimary.js~ActionBarPrimary", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "An ActionBar primary component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar.Primary" }, { "tagName": "@classdesc", "tagValue": "An ActionBar primary component" }, { "tagName": "@htmltag", "tagValue": "coral-actionbar-primary" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ActionBar.Primary();" ], "see": [ "../examples/#actionbar" ], "type": { "types": [ "*" ] } }, { "__docId__": 434, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\nimport getFirstSelectableWrappedItem from './getFirstSelectableWrappedItem';\nimport ActionBarContainer from './BaseActionBarContainer';\n\nconst CLASSNAME = '_coral-ActionBar-secondary';\n\n/**\n @class Coral.ActionBar.Secondary\n @classdesc An ActionBar secondary component\n @htmltag coral-actionbar-secondary\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ActionBarSecondary = Decorator(class extends ActionBarContainer(BaseComponent(HTMLElement)) {\n /** @ignore */\n _returnElementsFromPopover() {\n let item = null;\n let wrappedItem = null;\n\n for (let i = this._itemsInPopover.length - 1 ; i >= 0 ; i--) {\n item = this._itemsInPopover[i];\n\n item.style.visibility = 'hidden';\n\n // remove tabindex again\n wrappedItem = getFirstSelectableWrappedItem(item);\n if (wrappedItem && wrappedItem.hasAttribute('tabindex')) {\n wrappedItem.setAttribute('tabindex', -1);\n }\n\n this.insertBefore(item, this.firstChild.nextSibling);\n\n // Reset popover id, target\n if (item._button && item._popover) {\n item._popover.id = item._popoverId;\n if (item._popover.target) {\n item._popover.target = item._button;\n }\n }\n }\n }\n\n /** @ignore */\n _attachMoreButtonToContainer() {\n this.insertBefore(this._elements.moreButton, this.firstChild);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this._attachMoreButtonToContainer();\n }\n});\n\nexport default ActionBarSecondary;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 435, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 436, "kind": "variable", "name": "ActionBarSecondary", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/ActionBarSecondary.js~ActionBarSecondary", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ActionBar}", "description": "An ActionBar secondary component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ActionBar.Secondary" }, { "tagName": "@classdesc", "tagValue": "An ActionBar secondary component" }, { "tagName": "@htmltag", "tagValue": "coral-actionbar-secondary" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ActionBar.Secondary();" ], "see": [ "../examples/#actionbar" ], "type": { "types": [ "*" ] } }, { "__docId__": 437, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport ActionBarContainerCollection from './ActionBarContainerCollection';\nimport {Button} from '../../../coral-component-button';\nimport '../../../coral-component-anchorbutton';\nimport moreOverlay from '../templates/moreOverlay';\nimport moreButton from '../templates/moreButton';\nimport overlayContent from '../templates/overlayContent';\nimport {commons, transform, i18n} from '../../../coral-utils';\n\n// Matches private Coral classes in class attribute\nconst REG_EXP = /_coral([^\\s]+)/g;\n\nconst copyAttributes = (from, to) => {\n const excludedAttributes = ['is', 'id', 'variant', 'size'];\n\n for (let i = 0 ; i < from.attributes.length ; i++) {\n const attr = from.attributes[i];\n\n if (excludedAttributes.indexOf(attr.nodeName) === -1) {\n if (attr.nodeName === 'class') {\n // Filter out private Coral classes\n to.setAttribute(attr.nodeName, `${to.className} ${attr.nodeValue.replace(REG_EXP, '')}`);\n } else {\n to.setAttribute(attr.nodeName, attr.nodeValue);\n }\n }\n }\n};\n\n/**\n @base BaseActionBarContainer\n @classdesc The base element for action bar containers\n */\nclass BaseActionBarContainer extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {};\n this._itemsInPopover = [];\n moreButton.call(this._elements, {i18n});\n moreOverlay.call(this._elements, {commons});\n overlayContent.call(this._elements, {\n items: this._itemsInPopover,\n copyAttributes\n });\n\n // Return focus to overlay by default\n this._elements.overlay.focusOnShow = this._elements.overlay;\n\n const overlayId = this._elements.overlay.id;\n const events = {};\n events[`global:capture:coral-overlay:beforeopen #${overlayId}`] = '_onOverlayBeforeOpen';\n events[`global:capture:coral-overlay:beforeclose #${overlayId}`] = '_onOverlayBeforeClose';\n // Keyboard interaction\n events[`global:key:down #${overlayId}`] = '_onOverlayKeyDown';\n events[`global:key:up #${overlayId}`] = '_onOverlayKeyUp';\n\n // Events\n this._delegateEvents(events);\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n Returns the inner overlay to allow customization.\n\n @type {Popover}\n @readonly\n */\n get overlay() {\n return this._elements.overlay;\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {ActionBarContainerCollection}\n @readonly\n */\n get items() {\n // Construct the collection on first request:\n if (!this._items) {\n this._items = new ActionBarContainerCollection({\n host: this,\n itemTagName: 'coral-actionbar-item',\n onItemAdded: this._styleItem\n });\n }\n\n return this._items;\n }\n\n /**\n The amount of items that are maximally visible inside the container. Using a value <= 0 will disable this\n feature and show as many items as possible.\n\n @type {Number}\n @default -1\n @htmlattribute threshold\n @htmlattributereflected\n */\n get threshold() {\n return typeof this._threshold === 'number' ? this._threshold : -1;\n }\n\n set threshold(value) {\n this._threshold = transform.number(value);\n this._reflectAttribute('threshold', this._threshold);\n }\n\n /**\n If there are more ActionBarItems inside the ActionBar than currently can be shown, then a \"more\" Button with the\n following text will be rendered (and some ActionBarItems will be hidden inside of a Popover).\n\n @type {String}\n @default \"\"\n @htmlattribute morebuttontext\n */\n get moreButtonText() {\n return this._moreButtonText || '';\n }\n\n set moreButtonText(value) {\n this._moreButtonText = transform.string(value);\n\n if (this._elements.moreButton) {\n // moreButton might not have been created so far\n this._elements.moreButtonLabel.innerHTML = this._moreButtonText;\n this._elements.moreButton[this._moreButtonText.trim() === '' ? 'setAttribute' : 'removeAttribute']('title', i18n.get('More'));\n }\n }\n\n /**\n Style item content\n */\n _styleItem(item) {\n const button = item.querySelector('button[is=\"coral-button\"]') || item.querySelector('a[is=\"coral-anchorbutton\"]');\n if (button) {\n button.classList.add('_coral-ActionBar-button');\n\n const oldVariant = button.getAttribute('variant');\n if (oldVariant === Button.variant.ACTION || oldVariant === Button.variant.QUIET_ACTION) {\n return;\n }\n\n button.setAttribute('variant', oldVariant === Button.variant.QUIET ? Button.variant.QUIET_ACTION : Button.variant.ACTION);\n }\n }\n\n /**\n Called after popover.open is set to true, but before the transition of the popover is done. Show elements inside\n the actionbar, that are hidden due to space problems.\n\n @ignore\n */\n _onOverlayBeforeOpen(event) {\n // there might be popovers in popover => ignore them\n if (event.target !== this._elements.overlay) {\n return;\n }\n\n this._itemsInPopover = this.items._getAllOffScreen();\n\n if (this._itemsInPopover.length < 1) {\n return;\n }\n\n // Set focus to first focusable descendant of the overlay by default\n this._elements.overlay.focusOnShow = 'on';\n\n this._itemsInPopover.forEach((item) => {\n item.style.visibility = '';\n // Store the button and popover on the item\n item._button = item.querySelector(':scope > button[is=\"coral-button\"]') || item.querySelector(':scope > a[is=\"coral-anchorbutton\"]');\n item._popover = item.querySelector('coral-popover');\n if (item._popover) {\n item._popoverId = item._popover.id;\n }\n });\n\n // Whether a ButtonList or AnchorList should be rendered\n this._itemsInPopover.isButtonList = this._itemsInPopover.every(item => item._button && item._button.tagName === 'BUTTON');\n this._itemsInPopover.isAnchorList = this._itemsInPopover.every(item => item._button && item._button.tagName === 'A');\n\n // show the current popover (hidden needed to disable fade time of popover)\n this._elements.overlay.hidden = false;\n\n // render popover content\n const popover = this._elements.overlay;\n popover.content.innerHTML = '';\n popover.content.appendChild(overlayContent.call(this._elements, {\n items: this._itemsInPopover,\n copyAttributes\n }));\n }\n\n /**\n Called after popover.open is set to false, but before the transition of the popover is done.\n Make items visible again, that now do fit into the actionbar.\n @ignore\n */\n _onOverlayBeforeClose(event) {\n // there might be popovers in popover => ignore them\n if (event.target !== this._elements.overlay) {\n return;\n }\n\n const focusedItem = document.activeElement.parentNode;\n\n // we need to check if item has 'hasAttribute' because it is not present on the document\n const isFocusedItemInsideActionBar = this.parentNode.contains(focusedItem);\n const isFocusedItemOffscreen = focusedItem.hasAttribute && focusedItem.hasAttribute('coral-actionbar-offscreen');\n if (isFocusedItemInsideActionBar && isFocusedItemOffscreen) {\n // if currently an element is focused, that should not be visible (or is no actionbar-item) => select 'more'\n // button\n this._elements.moreButton.focus();\n }\n\n // hide the popover(needed to disable fade time of popover)\n this._elements.overlay.hidden = true;\n this._elements.overlay.focusOnShow = this._elements.overlay;\n\n // close any popovers, that might be inside the 'more' popover\n const childPopovers = this._elements.overlay.getElementsByTagName('coral-popover');\n for (let i = 0 ; i < childPopovers.length ; i++) {\n childPopovers[i].open = false;\n }\n\n // return all elements from popover\n this._returnElementsFromPopover();\n\n // clear cached items from popover\n this._itemsInPopover = [];\n\n // clear overlay\n this._elements.overlay.content.innerHTML = '';\n }\n\n _onOverlayKeyDown(event) {\n event.preventDefault();\n\n // Focus first item\n this._elements.anchorList && this._elements.anchorList._focusFirstItem(event);\n this._elements.buttonList && this._elements.buttonList._focusFirstItem(event);\n }\n\n _onOverlayKeyUp(event) {\n event.preventDefault();\n\n // Focus last item\n this._elements.anchorList && this._elements.anchorList._focusLastItem(event);\n this._elements.buttonList && this._elements.buttonList._focusLastItem(event);\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n morebuttontext: 'moreButtonText'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['morebuttontext', 'threshold']);\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // Cleanup resize helpers object (cloneNode support)\n const resizeHelpers = this.getElementsByTagName('object');\n for (let i = 0 ; i < resizeHelpers.length ; ++i) {\n const resizeElement = resizeHelpers[i];\n if (resizeElement.parentNode === this) {\n this.removeChild(resizeElement);\n }\n }\n\n // Cleanup 'More' button\n const more = this.querySelector('[coral-actionbar-more]');\n if (more) {\n this.removeChild(more);\n }\n\n // Cleanup 'More' popover\n const popover = this.querySelector('[coral-actionbar-popover]');\n if (popover) {\n this.removeChild(popover);\n }\n\n // Copy more text\n this._elements.moreButton.label.textContent = this.moreButtonText;\n\n // Init 'More' popover\n this._elements.overlay.target = this._elements.moreButton;\n\n // Create empty frag\n const frag = document.createDocumentFragment();\n\n // 'More' button might be moved later in dom when Container is attached to parent\n frag.appendChild(this._elements.moreButton);\n frag.appendChild(this._elements.overlay);\n\n // Render template\n this.appendChild(frag);\n\n // Style the items to match action items\n this.items.getAll().forEach(item => this._styleItem(item));\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n};\n\nexport default BaseActionBarContainer;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 438, "kind": "variable", "name": "REG_EXP", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~REG_EXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 439, "kind": "function", "name": "copyAttributes", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~copyAttributes", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 24, "undocument": true, "params": [ { "name": "from", "types": [ "*" ] }, { "name": "to", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 440, "kind": "class", "name": "BaseActionBarContainer", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js", "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "The base element for action bar containers", "lineNumber": 45, "unknown": [ { "tagName": "@base", "tagValue": "BaseActionBarContainer" }, { "tagName": "@classdesc", "tagValue": "The base element for action bar containers" } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 441, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#constructor", "access": "public", "description": null, "lineNumber": 47, "ignore": true }, { "__docId__": 442, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_elements", "access": "private", "description": null, "lineNumber": 51, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 443, "kind": "member", "name": "_itemsInPopover", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_itemsInPopover", "access": "private", "description": null, "lineNumber": 52, "undocument": true, "ignore": true, "type": { "types": [ "*[]" ] } }, { "__docId__": 444, "kind": "member", "name": "overlay", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#overlay", "access": "public", "description": "Returns the inner overlay to allow customization.\n
  • read-only
", "lineNumber": 84, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Popover" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 445, "kind": "member", "name": "items", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#items", "access": "public", "description": "The Collection Interface that allows interacting with the items that the component contains.\n
  • read-only
", "lineNumber": 94, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "ActionBarContainerCollection" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 446, "kind": "member", "name": "_items", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_items", "access": "private", "description": null, "lineNumber": 97, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 447, "kind": "member", "name": "threshold", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#threshold", "access": "public", "description": "The amount of items that are maximally visible inside the container. Using a value <= 0 will disable this\nfeature and show as many items as possible.\n
  • -1 by default.
  • reflected
", "lineNumber": 116, "unknown": [ { "tagName": "@default", "tagValue": "-1" }, { "tagName": "@htmlattribute", "tagValue": "threshold" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 449, "kind": "member", "name": "_threshold", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_threshold", "access": "private", "description": null, "lineNumber": 121, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 450, "kind": "member", "name": "moreButtonText", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#moreButtonText", "access": "public", "description": "If there are more ActionBarItems inside the ActionBar than currently can be shown, then a \"more\" Button with the\nfollowing text will be rendered (and some ActionBarItems will be hidden inside of a Popover).\n
  • \"\" by default.
", "lineNumber": 133, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" }, { "tagName": "@htmlattribute", "tagValue": "morebuttontext" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 452, "kind": "member", "name": "_moreButtonText", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_moreButtonText", "access": "private", "description": null, "lineNumber": 138, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 453, "kind": "method", "name": "_styleItem", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_styleItem", "access": "private", "description": "Style item content", "lineNumber": 150, "ignore": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 454, "kind": "method", "name": "_onOverlayBeforeOpen", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_onOverlayBeforeOpen", "access": "private", "description": "Called after popover.open is set to true, but before the transition of the popover is done. Show elements inside\nthe actionbar, that are hidden due to space problems.", "lineNumber": 170, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 456, "kind": "method", "name": "_onOverlayBeforeClose", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_onOverlayBeforeClose", "access": "private", "description": "Called after popover.open is set to false, but before the transition of the popover is done.\nMake items visible again, that now do fit into the actionbar.", "lineNumber": 216, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 458, "kind": "method", "name": "_onOverlayKeyDown", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_onOverlayKeyDown", "access": "private", "description": null, "lineNumber": 253, "undocument": true, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 459, "kind": "method", "name": "_onOverlayKeyUp", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#_onOverlayKeyUp", "access": "private", "description": null, "lineNumber": 261, "undocument": true, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 460, "kind": "member", "name": "_attributePropertyMap", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer._attributePropertyMap", "access": "private", "description": null, "lineNumber": 269, "undocument": true, "modality": "readonly", "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 461, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer.observedAttributes", "access": "public", "description": null, "lineNumber": 276, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 462, "kind": "method", "name": "connectedCallback", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#connectedCallback", "access": "public", "description": null, "lineNumber": 281, "ignore": true, "params": [], "return": null }, { "__docId__": 463, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#render", "access": "public", "description": null, "lineNumber": 294, "ignore": true, "params": [], "return": null }, { "__docId__": 464, "kind": "method", "name": "disconnectedCallback", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/BaseActionBarContainer.js~BaseActionBarContainer#disconnectedCallback", "access": "public", "description": null, "lineNumber": 339, "ignore": true, "params": [], "return": null }, { "__docId__": 465, "kind": "file", "name": "coral-spectrum/coral-component-actionbar/src/scripts/getFirstSelectableWrappedItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {commons} from '../../../coral-utils';\n\n/** @ignore */\nexport default function getFirstSelectableWrappedItem(wrapperItem) {\n // util method to get first selectable item inside a wrapper item\n if (!wrapperItem) {\n return null;\n }\n\n if (wrapperItem.hasAttribute('coral-actionbar-more')) {\n // more buttons are no 'real' actionbar items => not wrapped\n return wrapperItem;\n }\n\n let child = null;\n for (let i = 0 ; i < wrapperItem.children.length ; i++) {\n child = wrapperItem.children[i];\n\n // maybe filter even more elements? (opacity, display='none', position='absolute' ...)\n if (child.offsetParent && (child.matches(commons.FOCUSABLE_ELEMENT_SELECTOR) || child.matches('a:not([href])')) && !child.hasAttribute('disabled')) {\n return child;\n }\n }\n\n // search at 2nd level, some elements like coral-fileupload has selectable items inside them\n for (let i = 0 ; i < wrapperItem.children.length ; i++) {\n child = wrapperItem.children[i];\n for (let j = 0 ; j < child.children.length ; j++) {\n let subChild = child.children[j];\n // maybe filter even more elements? (opacity, display='none', position='absolute' ...)\n if (subChild.offsetParent && (subChild.matches(commons.FOCUSABLE_ELEMENT_SELECTOR) || child.matches('a:not([href])'))) {\n return subChild;\n }\n }\n }\n\n return null;\n}\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-actionbar/src/scripts/getFirstSelectableWrappedItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 466, "kind": "function", "name": "getFirstSelectableWrappedItem", "memberof": "coral-spectrum/coral-component-actionbar/src/scripts/getFirstSelectableWrappedItem.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-actionbar/src/scripts/getFirstSelectableWrappedItem.js~getFirstSelectableWrappedItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{getFirstSelectableWrappedItem}", "description": null, "lineNumber": 16, "ignore": true, "params": [ { "name": "wrapperItem", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 467, "kind": "file", "name": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Icon} from '../../../coral-component-icon';\nimport {transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link Alert} variants.\n\n @typedef {Object} AlertVariantEnum\n\n @property {String} ERROR\n An alert with a warning icon to indicate that an error has occurred.\n @property {String} WARNING\n An alert with a warning icon to warn the user of something important.\n @property {String} SUCCESS\n An alert with a question mark icon to notify the user of a successful operation.\n @property {String} HELP\n A neutral alert with a question icon to help the user with non-critical information.\n @property {String} INFO\n An alert with an info icon to inform the user of non-critical information.\n */\nconst variant = {\n ERROR: 'error',\n WARNING: 'warning',\n SUCCESS: 'success',\n HELP: 'help',\n INFO: 'info'\n};\n\n/**\n Enumeration for {@link Alert} sizes.\n\n @typedef {Object} AlertSizeEnum\n\n @property {String} SMALL\n A small alert, usually employed for single line alerts without headers.\n @property {String} LARGE\n Not supported. Falls back to SMALL.\n */\nconst size = {\n SMALL: 'S',\n LARGE: 'L'\n};\n\nconst CLASSNAME = '_coral-Alert';\n\n// An array of all possible variant classnames\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantValue in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);\n}\n\n// Used to map icon with variant\nconst capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);\n\n/**\n @class Coral.Alert\n @classdesc An Alert component used as static indicators of an operation's result, or as messages to highlight\n information to the user. It does not include a close button by default, but you can add it manually by adding the\n coral-close attribute on an element contained by the Alert.\n @htmltag coral-alert\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Alert = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {\n // Fetch or create the content zone elements\n header: this.querySelector('coral-alert-header') || document.createElement('coral-alert-header'),\n content: this.querySelector('coral-alert-content') || document.createElement('coral-alert-content'),\n footer: this.querySelector('coral-alert-footer') || document.createElement('coral-alert-footer')\n };\n\n // Events\n this._delegateEvents({\n 'click [coral-close]': '_onCloseClick'\n });\n }\n\n /**\n The alert variant style to use. See {@link AlertVariantEnum}.\n\n @type {String}\n @default AlertVariantEnum.INFO\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.INFO;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.INFO;\n this._reflectAttribute('variant', this._variant);\n\n this._insertTemplate();\n\n // Remove all variant classes\n this.classList.remove(...ALL_VARIANT_CLASSES);\n\n // Set new variant class\n // Don't use this._className; use the constant\n // This lets popover get our styles for free\n this.classList.add(`${CLASSNAME}--${this._variant}`);\n }\n\n /**\n The size of the alert. It accepts both lower and upper case sizes. See {@link AlertVariantEnum}.\n\n @type {String}\n @default AlertSizeEnum.SMALL\n @htmlattribute size\n @htmlattributereflected\n */\n get size() {\n return this._size || size.SMALL;\n }\n\n set size(value) {\n value = transform.string(value).toUpperCase();\n this._size = validate.enumeration(size)(value) && value || size.SMALL;\n this._reflectAttribute('size', this._size);\n }\n\n /**\n The alert header element.\n\n @type {AlertHeader}\n @contentzone\n */\n get header() {\n return this._getContentZone(this._elements.header);\n }\n\n set header(value) {\n this._setContentZone('header', value, {\n handle: 'header',\n tagName: 'coral-alert-header',\n insert: function (header) {\n header.classList.add(`${CLASSNAME}-header`);\n this.insertBefore(header, this.firstChild);\n }\n });\n }\n\n /**\n The alert content element.\n\n @type {AlertContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-alert-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}-content`);\n // After the header\n this.insertBefore(content, this.header.nextElementSibling);\n }\n });\n }\n\n /**\n The alert footer element.\n\n @type {AlertFooter}\n @contentzone\n */\n get footer() {\n return this._getContentZone(this._elements.footer);\n }\n\n set footer(value) {\n this._setContentZone('footer', value, {\n handle: 'footer',\n tagName: 'coral-alert-footer',\n insert: function (footer) {\n footer.classList.add(`${CLASSNAME}-footer`);\n // After the content\n this.insertBefore(footer, this.content.nextElementSibling);\n }\n });\n }\n\n /**\n @ignore\n @todo maybe this should be base or something\n */\n _onCloseClick(event) {\n const dismissTarget = event.matchedTarget;\n const dismissValue = dismissTarget.getAttribute('coral-close');\n if (!dismissValue || this.matches(dismissValue)) {\n this.hidden = true;\n event.stopPropagation();\n }\n\n this._trackEvent('close', 'coral-alert', event);\n }\n\n _insertTemplate() {\n if (this._elements.icon) {\n this._elements.icon.remove();\n }\n\n let variantValue = this.variant;\n\n // Warning icon is same as ERROR icon\n if (variantValue === variant.WARNING || variantValue === variant.ERROR) {\n variantValue = 'alert';\n }\n\n // Inject the SVG icon\n const iconName = capitalize(variantValue);\n this.insertAdjacentHTML('afterbegin', Icon._renderSVG(`spectrum-css-icon-${iconName}Medium`, ['_coral-Alert-icon', `_coral-UIIcon-${iconName}Medium`]));\n this._elements.icon = this.querySelector('._coral-Alert-icon');\n }\n\n get _contentZones() {\n return {\n 'coral-alert-header': 'header',\n 'coral-alert-content': 'content',\n 'coral-alert-footer': 'footer'\n };\n }\n\n /**\n Returns {@link Alert} variants.\n\n @return {AlertVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /**\n Returns {@link Alert} sizes.\n\n @return {AlertSizeEnum}\n */\n static get size() {\n return size;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['variant', 'size']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n this.setAttribute('role', 'alert');\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.INFO;\n }\n if (!this._size) {\n this.size = size.SMALL;\n }\n\n for (const contentZone in this._contentZones) {\n const element = this._elements[this._contentZones[contentZone]];\n // Remove it so we can process children\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }\n\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.TEXT_NODE ||\n child.nodeType === Node.ELEMENT_NODE && !child.classList.contains('_coral-Alert-icon')) {\n // Add non-template elements to the content\n this._elements.content.appendChild(child);\n } else {\n // Remove anything else element\n this.removeChild(child);\n }\n }\n\n this._insertTemplate();\n\n // Assign the content zones so the insert functions will be called\n for (const contentZone in this._contentZones) {\n const contentZoneName = this._contentZones[contentZone];\n\n /** @ignore */\n this[contentZoneName] = this._elements[contentZoneName];\n }\n }\n});\n\nexport default Alert;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-alert/src/scripts/Alert.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 468, "kind": "typedef", "name": "AlertVariantEnum", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~AlertVariantEnum", "access": "public", "description": "Enumeration for {@link Alert} variants.", "lineNumber": 34, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ERROR", "description": "An alert with a warning icon to indicate that an error has occurred." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "WARNING", "description": "An alert with a warning icon to warn the user of something important." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SUCCESS", "description": "An alert with a question mark icon to notify the user of a successful operation." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "HELP", "description": "A neutral alert with a question icon to help the user with non-critical information." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INFO", "description": "An alert with an info icon to inform the user of non-critical information." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AlertVariantEnum" } }, { "__docId__": 469, "kind": "typedef", "name": "AlertSizeEnum", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~AlertSizeEnum", "access": "public", "description": "Enumeration for {@link Alert} sizes.", "lineNumber": 52, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SMALL", "description": "A small alert, usually employed for single line alerts without headers." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LARGE", "description": "Not supported. Falls back to SMALL." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AlertSizeEnum" } }, { "__docId__": 470, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 57, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 471, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 60, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 472, "kind": "function", "name": "capitalize", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~capitalize", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 66, "undocument": true, "params": [ { "name": "s", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 473, "kind": "variable", "name": "Alert", "memberof": "coral-spectrum/coral-component-alert/src/scripts/Alert.js", "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/Alert.js~Alert", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Alert}", "description": "An Alert component used as static indicators of an operation's result, or as messages to highlight\ninformation to the user. It does not include a close button by default, but you can add it manually by adding the\ncoral-close attribute on an element contained by the Alert.", "lineNumber": 77, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Alert" }, { "tagName": "@classdesc", "tagValue": "An Alert component used as static indicators of an operation's result, or as messages to highlight\ninformation to the user. It does not include a close button by default, but you can add it manually by adding the\ncoral-close attribute on an element contained by the Alert." }, { "tagName": "@htmltag", "tagValue": "coral-alert" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Alert();" ], "see": [ "../examples/#alert" ], "type": { "types": [ "*" ] } }, { "__docId__": 474, "kind": "file", "name": "coral-spectrum/coral-component-alert/src/scripts/AlertContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Alert.Content\n @classdesc The Alert default content\n @htmltag coral-alert-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-alert-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-alert/src/scripts/AlertContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 475, "kind": "function", "name": "AlertContent", "memberof": "coral-spectrum/coral-component-alert/src/scripts/AlertContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/AlertContent.js~AlertContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Alert}", "description": "The Alert default content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Alert.Content" }, { "tagName": "@classdesc", "tagValue": "The Alert default content" }, { "tagName": "@htmltag", "tagValue": "coral-alert-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Alert.Content();" ], "see": [ "../examples/#alert" ], "params": [] }, { "__docId__": 476, "kind": "file", "name": "coral-spectrum/coral-component-alert/src/scripts/AlertFooter.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Alert.Footer\n @classdesc The Alert footer content\n @htmltag coral-alert-footer\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-alert-footer');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-alert/src/scripts/AlertFooter.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 477, "kind": "function", "name": "AlertFooter", "memberof": "coral-spectrum/coral-component-alert/src/scripts/AlertFooter.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/AlertFooter.js~AlertFooter", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Alert}", "description": "The Alert footer content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Alert.Footer" }, { "tagName": "@classdesc", "tagValue": "The Alert footer content" }, { "tagName": "@htmltag", "tagValue": "coral-alert-footer" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Alert.Footer();" ], "see": [ "../examples/#alert" ], "params": [] }, { "__docId__": 478, "kind": "file", "name": "coral-spectrum/coral-component-alert/src/scripts/AlertHeader.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Alert.Header\n @classdesc The Alert header content\n @htmltag coral-alert-header\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-alert-header');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-alert/src/scripts/AlertHeader.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 479, "kind": "function", "name": "AlertHeader", "memberof": "coral-spectrum/coral-component-alert/src/scripts/AlertHeader.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-alert/src/scripts/AlertHeader.js~AlertHeader", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Alert}", "description": "The Alert header content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Alert.Header" }, { "tagName": "@classdesc", "tagValue": "The Alert header content" }, { "tagName": "@htmltag", "tagValue": "coral-alert-header" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Alert.Header();" ], "see": [ "../examples/#alert" ], "params": [] }, { "__docId__": 480, "kind": "file", "name": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseButton} from '../../../coral-base-button';\nimport {transform, commons} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n// Key code\nconst SPACE = 32;\n\n/**\n @class Coral.AnchorButton\n @classdesc A Link component rendering as a button allowing us to style an anchor element that both looks and behaves\n like a button rather than a link. It can receive keyboard focus regardless of whether or not it has an href\n attribute, can be activated using either the SPACE key or the ENTER key, and is identified to\n assistive technology as a button element.\n @htmltag coral-anchorbutton\n @htmlbasetag a\n @extends {HTMLAnchorElement}\n @extends {BaseComponent}\n @extends {BaseButton}\n */\nconst AnchorButton = Decorator(class extends BaseButton(BaseComponent(HTMLAnchorElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n keydown: '_onKeyDown',\n keyup: '_onKeyUp'\n }));\n\n // cannot use the events hash because events on disabled items are not reported\n this.addEventListener('click', this._onDisabledClick.bind(this));\n }\n\n /**\n Disables the button from user interaction.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this.setAttribute('tabindex', this._disabled ? '-1' : '0');\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n }\n\n /**\n Keyboard handling per the WAI-ARIA button widget design pattern:\n https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role\n\n @ignore\n */\n _onKeyDown(event) {\n if (event.keyCode === SPACE) {\n event.preventDefault();\n this.click();\n this.classList.add('is-selected');\n }\n }\n\n /** @ignore */\n _onKeyUp(event) {\n if (event.keyCode === SPACE) {\n event.preventDefault();\n this.classList.remove('is-selected');\n }\n }\n\n /** @ignore */\n _onDisabledClick(event) {\n if (this.disabled) {\n event.preventDefault();\n }\n }\n\n // Override content zone name\n get _contentZones() {\n return {'coral-anchorbutton-label': 'label'};\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['disabled']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // a11y\n this.setAttribute('role', 'button');\n if (!this.disabled) {\n // Force tabindex and aria-disabled attribute reflection\n this.setAttribute('tabindex', '0');\n this.removeAttribute('aria-disabled');\n }\n }\n});\n\nexport default AnchorButton;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 481, "kind": "variable", "name": "SPACE", "memberof": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js", "static": true, "longname": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js~SPACE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 482, "kind": "variable", "name": "AnchorButton", "memberof": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js", "static": true, "longname": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButton.js~AnchorButton", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{AnchorButton}", "description": "A Link component rendering as a button allowing us to style an anchor element that both looks and behaves\nlike a button rather than a link. It can receive keyboard focus regardless of whether or not it has an href\nattribute, can be activated using either the SPACE key or the ENTER key, and is identified to\nassistive technology as a button element.", "lineNumber": 33, "unknown": [ { "tagName": "@class", "tagValue": "Coral.AnchorButton" }, { "tagName": "@classdesc", "tagValue": "A Link component rendering as a button allowing us to style an anchor element that both looks and behaves\nlike a button rather than a link. It can receive keyboard focus regardless of whether or not it has an href\nattribute, can be activated using either the SPACE key or the ENTER key, and is identified to\nassistive technology as a button element." }, { "tagName": "@htmltag", "tagValue": "coral-anchorbutton" }, { "tagName": "@htmlbasetag", "tagValue": "a" }, { "tagName": "@extends", "tagValue": "{HTMLAnchorElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseButton}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.AnchorButton();" ], "see": [ "../examples/#anchorbutton" ], "type": { "types": [ "*" ] } }, { "__docId__": 483, "kind": "file", "name": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButtonLabel.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.AnchorButton.Label\n @classdesc The AnchorButton label content\n @htmltag coral-anchorbutton-label\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-anchorbutton-label');\n\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButtonLabel.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 484, "kind": "function", "name": "AnchorButtonLabel", "memberof": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButtonLabel.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-anchorbutton/src/scripts/AnchorButtonLabel.js~AnchorButtonLabel", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{AnchorButton}", "description": "The AnchorButton label content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.AnchorButton.Label" }, { "tagName": "@classdesc", "tagValue": "The AnchorButton label content" }, { "tagName": "@htmltag", "tagValue": "coral-anchorbutton-label" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.AnchorButton.Label();" ], "see": [ "../examples/#anchorbutton" ], "params": [] }, { "__docId__": 485, "kind": "file", "name": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {Tag} from '../../../coral-component-taglist';\nimport {SelectableCollection} from '../../../coral-collection';\nimport AutocompleteItem from './AutocompleteItem';\nimport {Textfield} from '../../../coral-component-textfield';\nimport {Icon} from '../../../coral-component-icon';\nimport '../../../coral-component-button';\nimport '../../../coral-component-list';\nimport '../../../coral-component-popover';\nimport '../../../coral-component-wait';\nimport base from '../templates/base';\nimport loadIndicator from '../templates/loadIndicator';\nimport {transform, validate, commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Autocomplete';\n\n/**\n The distance, in pixels, from the bottom of the List at which we assume the user has scrolled\n to the bottom of the list.\n @type {Number}\n @ignore\n */\nconst SCROLL_BOTTOM_THRESHOLD = 50;\n\n/**\n The number of milliseconds for which scroll events should be debounced.\n @type {Number}\n @ignore\n */\nconst SCROLL_DEBOUNCE = 100;\n\n/**\n Enumeration for {@link Autocomplete} variants.\n\n @typedef {Object} AutocompleteVariantEnum\n\n @property {String} DEFAULT\n A default, gray Autocomplete.\n @property {String} QUIET\n An Autocomplete with no border or background.\n */\nconst variant = {\n DEFAULT: 'default',\n QUIET: 'quiet'\n};\n\n/**\n Enumeration for {@link Autocomplete} match options.\n\n @typedef {Object} AutocompleteMatchEnum\n\n @property {String} STARTSWITH\n Include only matches that start with the user provided value.\n @property {String} CONTAINS\n Include only matches that contain the user provided value.\n */\nconst match = {\n STARTSWITH: 'startswith',\n CONTAINS: 'contains'\n};\n\n/**\n @class Coral.Autocomplete\n @classdesc An Autocomplete component that allows users to search and select from a list of options.\n @htmltag coral-autocomplete\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst Autocomplete = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Template\n this._elements = {};\n base.call(this._elements, {Icon, commons, i18n});\n\n this._elements.tagList.reset = () => {\n // Kill inner tagList reset so it doesn't interfer with the autocomplete reset\n };\n\n // Pre-define labellable element\n this._labellableElement = this._elements.input;\n\n const overlayId = this._elements.overlay.id;\n const events = {\n // ARIA Autocomplete role keyboard interaction\n // http://www.w3.org/TR/wai-aria-practices/#autocomplete\n 'key:up [handle=\"input\"]': '_handleInputUpKeypress',\n 'key:alt+up [handle=\"input\"]': '_handleInputUpKeypress',\n 'key:down [handle=\"input\"]': '_handleInputDownKeypress',\n 'key:alt+down [handle=\"input\"]': '_handleInputDownKeypress',\n 'key:tab [handle=\"input\"]': '_handleInputTabKeypress',\n 'key:shift+tab [handle=\"input\"]': '_handleListFocusShift',\n 'capture:change [handle=\"input\"]': '_handleInput',\n 'input [handle=\"input\"]': '_handleInputEvent',\n\n // Manually listen to keydown event due to CUI-3973\n 'keydown': '_handleInputKeypressEnter',\n\n // Interaction\n 'click [handle=\"trigger\"]': '_handleTriggerClick',\n 'mousedown [handle=\"trigger\"]': '_handleTriggerMousedown',\n\n // Focus\n 'capture:blur': '_handleFocusOut',\n 'global:click': '_onGlobalClick',\n 'global:touchstart': '_onGlobalClick',\n\n // Taglist\n 'coral-collection:add [handle=\"tagList\"]': '_handleTagAdded',\n 'coral-collection:remove [handle=\"tagList\"]': '_handleTagRemoved',\n 'change [handle=\"tagList\"]': '_preventTagListChangeEvent',\n\n // Items\n 'coral-autocomplete-item:_valuechanged': '_handleItemValueChange',\n 'coral-autocomplete-item:_selectedchanged': '_handleItemSelectedChange',\n 'coral-autocomplete-item:_contentchanged': '_handleItemContentChange'\n };\n\n // Interaction\n events[`global:key:shift+tab #${overlayId} [is=\"coral-buttonlist-item\"]`] = '_handleListFocusShift';\n events[`global:key:esc`] = '_handleListFocusShift';\n\n // Overlay\n events[`global:capture:coral-overlay:positioned #${overlayId}`] = '_onOverlayPositioned';\n events[`global:capture:coral-overlay:open #${overlayId}`] = '_onOverlayOpenOrClose';\n events[`global:capture:coral-overlay:close #${overlayId}`] = '_onOverlayOpenOrClose';\n\n // SelectList\n events[`global:key:enter #${overlayId} button[is=\"coral-buttonlist-item\"]`] = '_handleSelect';\n events[`global:capture:mousedown #${overlayId} button[is=\"coral-buttonlist-item\"]`] = '_handleSelect';\n events[`global:capture:scroll #${overlayId} [handle=\"selectList\"]`] = '_onScroll';\n events[`global:capture:mousewheel #${overlayId} [handle=\"selectList\"]`] = '_onMouseWheel';\n events[`global:capture:mousedown #${overlayId} [handle=\"selectList\"]`] = '_onMouseDown';\n\n // Events\n this._delegateEvents(events);\n\n // A map of values to tags\n this._tagMap = {};\n\n // A list of selected values\n this._values = [];\n\n // A list of options objects\n this._options = [];\n\n // A map of option values to their content\n this._optionsMap = {};\n\n // Used for reset\n this._initialSelectedValues = [];\n\n // Bind the debounced scroll method\n this._handleScrollBottom = this._handleScrollBottom.bind(this);\n\n // Listen for mutations\n this._observer = new MutationObserver(this._handleMutation.bind(this));\n this._startObserving();\n }\n\n /**\n Returns the inner overlay to allow customization.\n\n @type {Popover}\n @readonly\n */\n get overlay() {\n return this._elements.overlay;\n }\n\n /**\n The item collection.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // Construct the collection on first request:\n if (!this._items) {\n this._items = new SelectableCollection({\n itemTagName: 'coral-autocomplete-item',\n host: this\n });\n }\n\n return this._items;\n }\n\n /**\n Indicates if the autocomplete is a single or multiple mode. In multiple mode, the user can select multiple\n values.\n\n @type {Boolean}\n @default false\n @htmlattribute multiple\n @htmlattributereflected\n */\n get multiple() {\n return this._multiple || false;\n }\n\n set multiple(value) {\n this._multiple = transform.booleanAttr(value);\n this._reflectAttribute('multiple', this._multiple);\n\n this._setName(this.name);\n\n if (this._multiple) {\n this._elements.tagList.hidden = false;\n } else {\n this._elements.tagList.hidden = true;\n this._elements.tagList.items.clear();\n }\n\n this.labelledBy = this.labelledBy;\n }\n\n /**\n Amount of time, in milliseconds, to wait after typing a character before the suggestion is shown.\n\n @type {Number}\n @default 200\n @htmlattribute delay\n */\n get delay() {\n return typeof this._delay === 'number' ? this._delay : 200;\n }\n\n set delay(value) {\n value = transform.number(value);\n\n if (typeof value === 'number' && value >= 0) {\n this._delay = transform.number(value);\n }\n }\n\n /**\n Set to true to restrict the selected value to one of the given options from the suggestions.\n When set to false, users can enter anything.\n\n NOTE: This API is under review and may be removed or changed in a subsequent release.\n @ignore\n\n @type {Boolean}\n @default false\n @htmlattribute forceselection\n @htmlattributereflected\n */\n get forceSelection() {\n return this._forceSelection || false;\n }\n\n set forceSelection(value) {\n this._forceSelection = transform.booleanAttr(value);\n this._reflectAttribute('forceselection', this._forceSelection);\n }\n\n /**\n A hint to the user of what can be entered.\n\n @type {String}\n @default \"\"\n @htmlattribute placeholder\n @htmlattributereflected\n */\n get placeholder() {\n return this._elements.input.placeholder;\n }\n\n set placeholder(value) {\n this._elements.input.placeholder = value;\n this._reflectAttribute('placeholder', this.placeholder);\n }\n\n /**\n Max length for the Input field\n\n @type {Number}\n @htmlattribute maxlength\n @htmlattributereflected\n */\n get maxLength() {\n return this._elements.input.maxLength;\n }\n\n set maxLength(value) {\n this._elements.input.maxLength = value;\n this._reflectAttribute('maxlength', this._elements.input.maxLength);\n }\n\n /**\n The Autocomplete's variant. See {@link AutocompleteVariantEnum}.\n\n @type {AutocompleteVariantEnum}\n @default AutocompleteVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n if (this._variant === variant.QUIET) {\n this._elements.inputGroup.classList.add('_coral-InputGroup--quiet');\n this._elements.input.variant = Textfield.variant.QUIET;\n this._elements.trigger.classList.add('_coral-FieldButton--quiet');\n } else {\n this._elements.inputGroup.classList.remove('_coral-InputGroup--quiet');\n this._elements.input.variant = Textfield.variant.DEFAULT;\n this._elements.trigger.classList.remove('_coral-FieldButton--quiet');\n }\n }\n\n /**\n The match mode. See {@link AutocompleteMatchEnum}.\n\n @type {String}\n @default AutocompleteMatchEnum.CONTAINS\n @htmlattribute match\n */\n get match() {\n return this._match || match.CONTAINS;\n }\n\n set match(value) {\n if (typeof value === 'function') {\n this._match = value;\n this._matchFunction = value;\n } else {\n value = transform.string(value).toLowerCase();\n this._match = validate.enumeration(match)(value) && value || match.CONTAINS;\n\n if (this._match === match.STARTSWITH) {\n this._matchFunction = this._optionStartsWithValue;\n } else if (this._match === match.CONTAINS) {\n this._matchFunction = this._optionContainsValue;\n }\n }\n }\n\n /**\n Indicates that the component is currently loading remote data. This will set the wait indicator inside the list.\n\n @type {Boolean}\n @default false\n @htmlattribute loading\n */\n get loading() {\n return this._loading || false;\n }\n\n set loading(value) {\n this._loading = transform.booleanAttr(value);\n\n if (this._loading) {\n const overlay = this._elements.overlay;\n\n // we decide first if we need to scroll to the bottom since adding the load will change the dimensions\n const scrollToBottom = overlay.scrollTop >= overlay.scrollHeight - overlay.clientHeight;\n\n // if it does not exist we create it\n if (!this._elements.loadIndicator) {\n loadIndicator.call(this._elements);\n }\n\n // inserts the item at the end\n this._elements.selectList.appendChild(this._elements.loadIndicator);\n\n // we make the load indicator visible\n if (scrollToBottom) {\n overlay.scrollTop = overlay.scrollHeight;\n }\n } else if (this._elements.loadIndicator) {\n this._elements.loadIndicator.remove();\n }\n }\n\n /**\n Returns an Array containing the set selected items.\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.items._getAllSelected();\n }\n\n /**\n Returns the first selected item in the Autocomplete. The value null is returned if no element is\n selected.\n @type {?HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getAllSelected()[0] || null;\n }\n\n /**\n The current value, as submitted during form submission.\n When {@link Coral.Autocomplete#multiple} is true, the first selected value will be returned.\n\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n // Get the first value (or empty string)\n const values = this.values;\n return values && values.length > 0 ? values[0] : '';\n }\n\n set value(value) {\n this.values = [transform.string(value)];\n }\n\n /**\n The current values, as submitted during form submission.\n When {@link Coral.Autocomplete#multiple} is false, this will be an array of length 1.\n\n @type {Array.}\n */\n get values() {\n return this._values;\n }\n\n set values(values) {\n if (values === undefined || values === null) {\n values = [];\n }\n\n if (Array.isArray(values)) {\n // if value was set to empty string\n if (values.length === 1 && values[0] === '') {\n values = [];\n }\n\n let i;\n let value;\n const selectedValues = [];\n\n // Valid values only\n if (this.forceSelection) {\n // Add each valid value\n for (i = 0 ; i < values.length ; i++) {\n value = values[i];\n if (this._optionsMap[value] !== undefined) {\n selectedValues.push(value);\n }\n }\n }\n // Any value goes\n else {\n for (i = 0 ; i < values.length ; i++) {\n value = values[i];\n selectedValues.push(value);\n }\n }\n\n if (this.multiple) {\n // Remove existing tags, DOM selection, etc\n // This is a full override\n this._clearValues();\n\n // Add each tag\n for (i = 0 ; i < selectedValues.length ; i++) {\n value = selectedValues[i];\n\n // Ensure the item is selected if it's present in the DOM\n // This keeps the DOM in sync with the JS API and prevents bugs like CUI-5681\n this._selectItem(value);\n\n // Add the value to the tag list\n this._addValue(value, null, true);\n }\n } else {\n // Set value\n this._values = selectedValues.length > 0 ? [selectedValues[0]] : [];\n this._reflectCurrentValue();\n }\n }\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._getName();\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._setName(value);\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n // Add to outer component\n this._elements.inputGroup.classList.toggle('is-invalid', this.invalid);\n this._elements.trigger.classList.toggle('is-invalid', this.invalid);\n this._elements.input.invalid = this.invalid;\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this._elements.inputGroup.classList.toggle('is-disabled', this._disabled);\n\n this._elements.input.disabled = this._disabled;\n\n const disabledOrReadOnly = this._disabled || this.readOnly;\n this._elements.trigger.disabled = disabledOrReadOnly;\n this._elements.tagList.disabled = disabledOrReadOnly;\n // Prevents the overlay to be shown\n this._elements.inputGroup.disabled = disabledOrReadOnly;\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.input.readOnly = this._readOnly;\n\n const readOnlyOrDisabled = this._readOnly || this.disabled;\n this._elements.trigger.readOnly = readOnlyOrDisabled;\n this._elements.tagList.readOnly = readOnlyOrDisabled;\n // Prevents the overlay to be shown\n this._elements.inputGroup.disabled = readOnlyOrDisabled;\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this._elements.input.required = this._required;\n }\n\n /**\n Inherited from {@link BaseFormField#labelled}.\n */\n get labelled() {\n return super.labelled;\n }\n\n set labelled(value) {\n super.labelled = value;\n\n this[this.labelled ? 'setAttribute' : 'removeAttribute']('aria-label', this.labelled);\n this._elements.selectList[this.labelled ? 'setAttribute' : 'removeAttribute']('aria-label', this.labelled);\n\n if (this.labelled && this.multiple) {\n this._elements.tagList.setAttribute('aria-label', this.labelled);\n } else {\n this._elements.tagList.removeAttribute('aria-label');\n }\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n this[this.labelledBy ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.labelledBy);\n this._elements.selectList[this.labelledBy ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.labelledBy);\n\n if (this.labelledBy && this.multiple) {\n this._elements.tagList.setAttribute('aria-labelledby', this.labelledBy);\n } else {\n this._elements.tagList.removeAttribute('aria-labelledby');\n }\n }\n\n /**\n @ignore\n\n Not supported anymore.\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n this._icon = transform.string(value);\n this._reflectAttribute('icon', this._icon);\n }\n\n /** @private */\n _getName() {\n if (this.multiple) {\n return this._elements.tagList.name;\n }\n\n return this._elements.field.name;\n }\n\n /**\n Set the name accordingly for multiple/single mode so the form submits contain only the right fields.\n\n @private\n */\n _setName(value) {\n if (this.multiple) {\n this._elements.tagList.name = value;\n this._elements.field.name = '';\n } else {\n this._elements.field.name = value;\n this._elements.tagList.name = '';\n }\n }\n\n /** @private */\n _startObserving() {\n this._observer.observe(this, {\n // Only watch the childList\n // Items will tell us if selected/value/content changes\n childList: true\n });\n }\n\n /**\n Stop watching for mutations. This should be done before manually updating observed properties.\n\n @protected\n */\n _stopObserving() {\n this._observer.disconnect();\n }\n\n // Override to do nothing\n _onInputChange(event) {\n // stops the current event\n event.stopPropagation();\n\n if (!this.multiple) {\n const inputText = this._elements.input.value.toLowerCase();\n\n if (this.forceSelection || inputText === '') {\n // We need a way to deselect item in single selection mode\n // 1) by using an empty string if this.forceSelection === false\n // 2) by using an invalid string if this.forceSelection === true\n const items = this.items.getAll();\n for (let i = 0 ; i < items.length ; i++) {\n if (items[i].value.toLowerCase() !== inputText) {\n items[i].selected = false;\n }\n }\n }\n }\n }\n\n /**\n Handle mutations to children and childList. This is used to keep the options in sync with DOM changes.\n\n @private\n */\n _handleMutation(mutations) {\n for (let i = 0 ; i < mutations.length ; i++) {\n const mutation = mutations[i];\n const target = mutation.target;\n\n if (mutation.type === 'childList' && target === this) {\n this._setStateFromDOM();\n return;\n }\n }\n }\n\n /**\n Update the option set and selected options from the DOM.\n\n @private\n */\n _setStateFromDOM() {\n this._createOptionsFromDOM();\n this._setSelectedFromDOM();\n }\n\n /**\n Create the set of options from nodes in the DOM.\n\n @private\n */\n _createOptionsFromDOM() {\n // Reset options array and value to content map\n this._options.length = 0;\n this._optionsMap = {};\n\n this.items.getAll().forEach((item) => {\n // Don't use properties as children may not be initialized yet\n const itemObj = {\n value: item.getAttribute('value'),\n icon: item.getAttribute('icon'),\n disabled: item.hasAttribute('disabled'),\n content: item.innerHTML.replace(/\\s{2,}/g, ' ').trim(),\n text: item.innerText\n };\n this._options.push(itemObj);\n this._optionsMap[itemObj.value] = itemObj;\n });\n\n // @todo update value in hidden field if changed value = old value?\n }\n\n /** @private */\n _setInputValues(value, content) {\n this._elements.field.value = value;\n\n // Set text into input if in \"multiple selection mode\" or in \"single selection mode and content is not empty\"\n // otherwise keep the current text for us (should be marked red)\n if (this.multiple || content !== '') {\n this._elements.input.value = content.trim();\n }\n }\n\n /** @private */\n _reflectCurrentValue() {\n // Use empty string if no values\n const value = this._values.length > 0 ? this._values[0] : '';\n\n // Reflect the value in the field for form submit\n this._elements.field.value = value;\n\n let content = '';\n if (value !== '') {\n // Find the object with the corresponding content\n const itemObj = this._optionsMap[value];\n\n if (itemObj) {\n // Reflect the content in the input\n /*\n prefence would be first given to innerText instead of innerHtml\n as special characters like '&' transformed as ;amp in case of innerHtml.\n */\n content = itemObj.text && itemObj.text !== '' ? itemObj.text : itemObj.content;\n } else {\n // Just use the provided value\n content = value;\n }\n }\n\n this._setInputValues(value, content);\n }\n\n /**\n Update the option set and selected options from the DOM\n @ignore\n */\n _setSelectedFromDOM() {\n const selectedItems = this.selectedItems;\n\n if (selectedItems.length) {\n // Use this.hasAttribute('multiple') instead of this.multiple here, as this method is called from _render and element might not be ready\n if (this.hasAttribute('multiple')) {\n // Remove current tags\n this._resetValues();\n\n // Add new ones\n for (let i = 0 ; i < selectedItems.length ; i++) {\n const value = selectedItems[i].getAttribute('value');\n const content = selectedItems[i].innerHTML;\n this._addValue(value, content, true);\n }\n } else {\n // Select last\n const last = selectedItems[selectedItems.length - 1];\n\n // Deselect others\n this._deselectExcept(last, selectedItems);\n\n // Set value from the attribute\n // We don't want to use the property as the sub-component may not have been upgraded yet\n this.value = last.getAttribute('value');\n }\n } else if (!this.hasAttribute('value')) {\n if (this.hasAttribute('multiple')) {\n this._resetValues();\n } else {\n this.value = '';\n }\n }\n }\n\n /**\n De-select every item except the provided item.\n\n @param {HTMLElement} exceptItem\n The item not to select\n @param {Array.} [items]\n The set of items to consider when deselecting. If not provided, the current set of selected items is used.\n\n @private\n */\n _deselectExcept(exceptItem, items) {\n const selectedItems = items || this.selectedItems;\n\n // Deselect others\n this._stopObserving();\n for (let i = 0 ; i < selectedItems.length ; i++) {\n if (selectedItems[i] !== exceptItem) {\n selectedItems[i].removeAttribute('selected');\n }\n }\n this._startObserving();\n }\n\n /**\n Add a tag to the taglist.\n\n @private\n */\n _addValue(value, content, asHTML) {\n if (!content) {\n // Find the content\n const itemObj = this._optionsMap[value];\n if (itemObj) {\n content = itemObj.content;\n } else {\n // Just use the value\n content = value;\n }\n }\n\n // Add to selected values\n const index = this._values.indexOf(value);\n if (index === -1) {\n this._values.push(value);\n }\n\n const labelContent = {};\n if (asHTML) {\n labelContent.innerHTML = content;\n } else {\n labelContent.textContent = content;\n }\n\n // Create a new tag\n const tag = new Tag().set({\n label: labelContent,\n value: value\n });\n\n // Add to map\n this._tagMap[value] = tag;\n\n // Add to taglist\n this._elements.tagList.items.add(tag);\n\n // make sure to remove text from input box (to easily choose next item)\n this._setInputValues('', '');\n }\n\n /**\n Remove a tag from the taglist.\n\n @private\n */\n _removeValue(value) {\n // Remove from selected values\n const index = this._values.indexOf(value);\n\n if (index === -1) {\n // Get out if we don't have the value\n return;\n }\n\n this._values.splice(index, 1);\n\n // Select autocomplete item\n const item = this.querySelector(`coral-autocomplete-item[value=${JSON.stringify(value)}]`);\n\n if (item) {\n if (item.hasAttribute('selected')) {\n this._stopObserving();\n item.removeAttribute('selected');\n this._startObserving();\n }\n }\n\n // Look up the tag by value\n const tag = this._tagMap[value];\n\n if (tag) {\n // Remove from map\n this._tagMap[value] = null;\n\n // Remove from taglist\n this._elements.tagList.items.remove(tag);\n }\n\n if (index !== -1) {\n // Emit the change event when a value is removed but only after a user interaction\n this.trigger('change');\n }\n }\n\n /**\n Remove all tags from the taglist.\n\n @private\n */\n _clearValues() {\n this._resetValues();\n\n // Deselect items\n this._stopObserving();\n const items = this.querySelectorAll('coral-autocomplete-item[selected]');\n for (let i = 0 ; i < items.length ; i++) {\n items[i].removeAttribute('selected');\n }\n\n this._startObserving();\n }\n\n /**\n Reset values without affecting the DOM.\n\n @private\n */\n _resetValues() {\n // Reset values\n this._values = [];\n\n // Drop references to tags\n this._tagMap = {};\n\n // Clear taglist\n this._elements.tagList.items.clear();\n }\n\n /** @private */\n _focusNextItem() {\n // Display focus on next item in the selectList\n const selectList = this._elements.selectList;\n const currentItem = selectList.querySelector('.is-focused');\n const input = this._elements.input;\n const items = selectList._getSelectableItems();\n let index;\n let item;\n\n if (currentItem) {\n index = items.indexOf(currentItem);\n if (index < items.length - 1) {\n item = items[index + 1];\n }\n } else if (items && items.length > 0) {\n item = items[0];\n }\n\n window.requestAnimationFrame(() => {\n if (item) {\n if (currentItem) {\n currentItem.classList.remove('is-focused');\n }\n this._scrollItemIntoView(item);\n item.classList.add('is-focused');\n input.setAttribute('aria-activedescendant', item.id);\n }\n if (!selectList.querySelector('.is-focused')) {\n input.removeAttribute('aria-activedescendant');\n }\n });\n }\n\n /** @private */\n _focusPreviousItem() {\n // Display focus on previous item in the selectList\n const selectList = this._elements.selectList;\n const currentItem = selectList.querySelector('.is-focused');\n const input = this._elements.input;\n const items = selectList._getSelectableItems();\n let index;\n let item;\n\n if (currentItem) {\n index = items.indexOf(currentItem);\n if (index > 0) {\n item = items[index - 1];\n }\n currentItem.classList.remove('is-focused');\n } else if (items && items.length > 0) {\n item = items[items.length - 1];\n }\n\n window.requestAnimationFrame(() => {\n if (item) {\n this._scrollItemIntoView(item);\n item.classList.add('is-focused');\n input.setAttribute('aria-activedescendant', item.id);\n }\n if (!selectList.querySelector('.is-focused')) {\n input.removeAttribute('aria-activedescendant');\n }\n });\n }\n\n /** @private */\n _showSuggestions() {\n // Get value from the input\n const inputValue = this._elements.input.value.toLowerCase().trim();\n\n // Since we're showing fresh suggestions, clear the existing suggestions\n this.clearSuggestions();\n\n // Trigger an event\n const event = this.trigger('coral-autocomplete:showsuggestions', {\n // Pass user input\n value: inputValue,\n // Started at zero here, always\n start: 0\n });\n\n // Flag to indicate that the private method is called before public showSuggestions method\n this._showSuggestionsCalled = true;\n\n if (event.defaultPrevented) {\n // Set loading mode\n this.loading = true;\n\n // Show the menu\n this.showSuggestions();\n } else {\n // Show suggestions that match in the DOM\n this.addSuggestions(this._getMatches(inputValue, this._optionContainsValue));\n this.showSuggestions();\n }\n }\n\n _onOverlayPositioned(event) {\n // stops propagation cause the event is internal to the component\n event.stopImmediatePropagation();\n\n if (this._elements.overlay.open) {\n this._elements.overlay.style.width = `${this.offsetWidth}px`;\n }\n }\n\n _onGlobalClick(event) {\n if (!this._elements.overlay.open) {\n return;\n }\n\n const eventTargetWithinOverlayTarget = this._elements.inputGroup.contains(event.target);\n const eventTargetWithinItself = this._elements.overlay.contains(event.target);\n if (!eventTargetWithinOverlayTarget && !eventTargetWithinItself) {\n this.hideSuggestions();\n }\n }\n\n /** @private */\n _onScroll() {\n this._isOverlayScrolling = true;\n window.clearTimeout(this._scrollTimeout);\n this._scrollTimeout = window.setTimeout(this._handleScrollBottom, SCROLL_DEBOUNCE);\n }\n\n /** @private */\n _onMouseWheel(event) {\n const selectList = this._elements.selectList;\n // If scrolling with mouse wheel and if it has hit the top or bottom boundary\n // `SCROLL_BOTTOM_THRESHOLD` is ignored when hitting scroll bottom to allow debounced loading\n if (event.deltaY < 0 && selectList.scrollTop === 0 || event.deltaY > 0 && selectList.scrollTop >= selectList.scrollHeight - selectList.clientHeight) {\n event.preventDefault();\n }\n }\n\n _onMouseDown(event) {\n this._isOverlayScrollBarClicked = event.matchedTarget.clientWidth <= event.offsetX;\n }\n\n /** @private */\n _handleScrollBottom() {\n const selectList = this._elements.selectList;\n\n if (selectList.scrollTop >= selectList.scrollHeight - selectList.clientHeight - SCROLL_BOTTOM_THRESHOLD) {\n const inputValue = this._elements.input.value;\n\n // Do not clear the suggestions here, instead we'll expect them to append\n\n // Trigger an event\n const event = this.trigger('coral-autocomplete:showsuggestions', {\n // Pass user input\n value: inputValue,\n start: selectList.items.length\n });\n\n if (event.defaultPrevented) {\n // Set loading mode\n this.loading = true;\n }\n }\n }\n\n /** @private */\n _handleFocusOut(event) {\n const selectList = this._elements.selectList;\n const target = event.target;\n const inputBlur = target === this._elements.input;\n\n if (this._blurTimeout) {\n clearTimeout(this._blurTimeout);\n }\n\n // This is to hack around the fact that you cannot determine which element gets focus in a blur event\n // Firefox doesn't support focusout/focusin, so we're left doing awful things\n this._blurTimeout = window.setTimeout(() => {\n const relatedTarget = document.activeElement;\n const focusOutside = !this.contains(relatedTarget) && !this._elements.overlay.contains(relatedTarget);\n\n // If focus has moved out of the autocomplete, it's an input event\n if (inputBlur && focusOutside && !this.multiple) {\n this._handleInput(event);\n }\n // Nothing was focused\n else if (!relatedTarget || ((inputBlur || relatedTarget !== document.body) &&\n // Focus is now outside of the autocomplete component\n focusOutside ||\n // Focus has shifted from the selectList to another element inside of the autocomplete component\n selectList.contains(target) && !selectList.contains(relatedTarget))) {\n this.hideSuggestions();\n }\n }, 0);\n }\n\n /** @private */\n _handleListFocusShift(event) {\n if (this._elements.overlay.open) {\n // Stop focus shift\n event.preventDefault();\n event.stopImmediatePropagation();\n\n this._hideSuggestionsAndFocus();\n }\n }\n\n /** @private */\n _hideSuggestionsAndFocus() {\n // Hide the menu and focus on the input\n this.hideSuggestions();\n this._elements.input.focus();\n }\n\n /** @private */\n _handleTriggerClick() {\n if (this._elements.overlay.classList.contains('is-open')) {\n this._hideSuggestionsAndFocus();\n } else {\n // Focus on the input so down arrow works as expected\n // Per @mijordan\n this._showSuggestions();\n this._elements.input.focus();\n }\n }\n\n /** @private */\n _handleTriggerMousedown() {\n this._elements.trigger.focus();\n }\n\n /** @private */\n _handleListItemFocus(event) {\n const item = event.matchedTarget;\n const selectList = this._elements.selectList;\n const currentItem = selectList.querySelector('.is-focused');\n const input = this._elements.input;\n\n if (currentItem) {\n currentItem.classList.remove('is-focused');\n input.removeAttribute('aria-activedescendant');\n }\n if (!item.disabled) {\n this._scrollItemIntoView(item);\n item.classList.add('is-focused');\n input.setAttribute('aria-activedescendant', item.id);\n }\n }\n\n /** @private */\n _scrollItemIntoView(item) {\n const itemRect = item.getBoundingClientRect();\n const selectListRect = this._elements.selectList.getBoundingClientRect();\n if (itemRect.top < selectListRect.top) {\n item.scrollIntoView();\n } else if (itemRect.bottom > selectListRect.bottom) {\n item.scrollIntoView(false);\n }\n }\n\n /** @private */\n _getMatches(value, optionMatchesValue) {\n optionMatchesValue = optionMatchesValue || this._matchFunction;\n\n const matches = [];\n\n for (let i = 0 ; i < this._options.length ; i++) {\n if (optionMatchesValue(this._options[i], value)) {\n matches.push(this._options[i]);\n }\n }\n\n if (!matches.length) {\n // If there are no matches in _options,\n // Check for matches in list, which could have been added after mounting the element\n const buttons = this._elements.selectList.items.getAll();\n for (let i = 0 ; i < buttons.length ; i++) {\n const option = {\n value: buttons[i].value,\n content: buttons[i].textContent.trim()\n };\n if (optionMatchesValue(option, value)) {\n matches.push(option);\n }\n }\n }\n\n return matches;\n }\n\n /** @private */\n _handleInputKeypressEnter(event) {\n // Sigh, CUI-3973 Hitting enter quickly after typing causes form to submit\n if (event.which === 13) {\n this._handleInput(event);\n }\n }\n\n /** @private */\n _handleInputEvent() {\n // Any input makes this valid again\n this.invalid = false;\n\n if (this.delay) {\n // Wait until the use has stopped typing for delay milliseconds before getting suggestions\n window.clearTimeout(this._timeout);\n this._timeout = window.setTimeout(this._showSuggestions.bind(this), this.delay);\n } else {\n // Immediately get suggestions\n this._showSuggestions();\n }\n }\n\n /** @private */\n _handleInput(event) {\n // Don't set value and hide suggestions while scrolling overlay\n if (this._isOverlayScrolling || this._isOverlayScrollBarClicked) {\n this._isOverlayScrolling = false;\n this._isOverlayScrollBarClicked = false;\n return;\n }\n\n // Stop the event\n event.preventDefault();\n\n let focusedItemValue;\n\n // If a selectList item has focus, set the input value to the value of the selected item.\n if (this._elements.overlay.open && this._elements.input.getAttribute('aria-activedescendant')) {\n const focusedItem = this._elements.selectList.querySelector('.is-focused');\n if (focusedItem) {\n // Use the text content value of the item for comparison\n focusedItemValue = focusedItem.textContent.trim();\n }\n }\n\n const value = focusedItemValue || this._elements.input.value;\n\n let isChange = false;\n\n // Get all exact matches\n const exactMatches = this._getMatches(value, this._optionEqualsValue);\n\n if (exactMatches.length) {\n // Find perfect case sensitive match else defaults to first one\n const exactMatch = exactMatches.filter((option) => option.content === value)[0] || exactMatches[0];\n\n isChange = this.value !== exactMatch.value;\n\n // Select the matched item\n this._selectItem(exactMatch.value, exactMatch.content, false);\n\n if (this.multiple) {\n if (value.trim()) {\n // Add tag for non-empty values\n this._addValue(exactMatch.value, exactMatch.content, false);\n }\n } else {\n // Set value\n this.value = exactMatch.value;\n }\n\n // value can't be invalid as an exact match is selected\n if (this.forceSelection) {\n this.invalid = false;\n }\n\n // Hide the suggestions so the result can be seen\n this.hideSuggestions();\n\n // Emit the change event when a selection is made from an exact match\n if (isChange === true) {\n this.trigger('change');\n }\n } else if (this.forceSelection) {\n // Invalid\n if (this.multiple) {\n this.invalid = value !== '' || (this.values.length === 1 && this.values[0] === '' || this.values.length === 0);\n } else {\n this.invalid = true;\n }\n // Leave suggestions open if nothing matches\n } else {\n // DO NOT select the corresponding item, as this would add an item\n // This would result in adding items that match what the user typed, resulting in selections\n // this._selectItem(value);\n\n isChange = this.value !== value;\n\n if (this.multiple) {\n if (value.trim()) {\n // Add tag for non-empty values\n this._addValue(value, null, false);\n }\n } else {\n // Set value\n this.value = value;\n }\n\n // Hide the suggestions so the result can be seen\n this.hideSuggestions();\n\n // Emit the change event when arbitrary data is entered\n if (isChange === true) {\n this.trigger('change');\n }\n }\n\n this._updateButtonAccessibilityLabel();\n }\n\n /**\n This ensures the collection API is up to date with selected items, even if they come from suggestions.\n\n @private\n */\n _selectItem(value, content, asHTML) {\n // Don't get caught up with internal changes\n this._stopObserving();\n\n // Select autocomplete item if it's there\n const item = this.querySelector(`coral-autocomplete-item[value=${JSON.stringify(value)}]`);\n if (item) {\n // Select the existing item\n item.setAttribute('selected', '');\n } else {\n const labelContent = {};\n content = typeof content === 'undefined' ? value : content;\n if (asHTML) {\n labelContent.innerHTML = content;\n } else {\n labelContent.textContent = content;\n }\n\n // Add a new, selected item\n this.items.add(new AutocompleteItem().set({\n value: value,\n content: labelContent,\n selected: true\n }));\n }\n\n // Resume watching for changes\n this._startObserving();\n }\n\n /** @private */\n _handleInputUpKeypress(event) {\n // Stop any consequences of pressing the key\n event.preventDefault();\n\n if (this._elements.overlay.open) {\n if (event.altKey) {\n this.hideSuggestions();\n } else {\n this._focusPreviousItem();\n }\n } else {\n // Show the menu and do not focus on the first item\n // Implements behavior of http://www.w3.org/TR/wai-aria-practices/#autocomplete\n this._showSuggestions();\n }\n }\n\n /** @private */\n _handleInputDownKeypress(event) {\n // Stop any consequences of pressing the key\n event.preventDefault();\n\n if (this._elements.overlay.open) {\n this._focusNextItem();\n } else {\n // Show the menu and do not focus on the first item\n // Implements behavior of http://www.w3.org/TR/wai-aria-practices/#autocomplete\n this._showSuggestions();\n }\n }\n\n /** @private */\n _handleInputTabKeypress(event) {\n // if the select list is open and a list item has focus, prevent default to trap focus.\n if (this._elements.overlay.open && this._elements.input.getAttribute('aria-activedescendant')) {\n event.preventDefault();\n }\n }\n\n /**\n Handle selections in the selectList.\n\n @ignore\n */\n _handleSelect(event) {\n const selectListItem = event.matchedTarget;\n\n if (!selectListItem || selectListItem.disabled) {\n // @todo it doesn't seem like this should ever happen, but it does\n return;\n }\n\n // Select the corresponding item, or add one if it doesn't exist\n this._selectItem(selectListItem.value, selectListItem.content.innerHTML, true);\n\n if (!this.multiple) {\n this.value = selectListItem.value;\n\n // Make sure the value is changed\n // The setter won't run if we set the same value again\n // This forces the DOM to update\n this._setInputValues(this.value, selectListItem.content.textContent, false);\n } else {\n // Add to values\n this._addValue(selectListItem.value, selectListItem.content.innerHTML, true);\n }\n\n // Focus on the input element\n // We have to wait a frame here because the item steals focus when selected\n window.requestAnimationFrame(() => {\n this._elements.input.focus();\n });\n\n // Hide the options when option is selected in all cases\n this.hideSuggestions();\n\n // Emit the change event when a selection is made\n this.trigger('change');\n }\n\n /**\n Don't let the internal change event bubble and confuse users\n\n @ignore\n */\n _preventTagListChangeEvent(event) {\n event.stopImmediatePropagation();\n }\n\n _handleTagAdded() {\n // Forces tags to wrap\n this._elements.tagList.style.width = `${this.offsetWidth}px`;\n }\n\n /**\n Handle tags that are removed by the user.\n\n @ignore\n */\n _handleTagRemoved(event) {\n // Get the tag from the event\n const tagValue = event.detail.item.value;\n\n // Remove from values only if there is no other tags with the same value are attached (as this component constantly adds and removes tags)\n // this._elements.tagList.values does not seem to work so iterate over the tags to check values\n let removeValue = true;\n const tags = this._elements.tagList.items.getAll();\n for (let i = 0 ; i < tags.length ; i++) {\n if (tags[i].value === tagValue) {\n removeValue = false;\n break;\n }\n }\n\n if (removeValue) {\n this._removeValue(tagValue);\n }\n\n // If all tags were removed, return focus to the input\n if (this.selectedItems.length === 0) {\n this._elements.input.focus();\n }\n\n this._updateButtonAccessibilityLabel();\n }\n\n /**\n Handles value changes on a child item.\n\n @private\n */\n _handleItemValueChange(event) {\n // stop event propogation\n event.stopImmediatePropagation();\n\n // Update option map from scratch\n // @todo use attributeOldValue mutationobserver option and update map instead of re-creating\n this._createOptionsFromDOM();\n }\n\n /**\n Handles content changes on a child item.\n\n @private\n */\n _handleItemContentChange(event) {\n // stop event propogation\n event.stopImmediatePropagation();\n\n // Update option map from scratch with new content\n this._createOptionsFromDOM();\n }\n\n /**\n Handles selected changes on a child item.\n\n @private\n */\n _handleItemSelectedChange(event) {\n // stop event propogation\n event.stopImmediatePropagation();\n\n const target = event.target;\n const selected = target.hasAttribute('selected');\n if (this.multiple) {\n this[selected ? '_addValue' : '_removeValue'](target.value, target.content.innerHTML, true);\n } else if (selected) {\n // Set the input text accordingly\n this._elements.input.value = target.content.textContent.replace(/\\s{2,}/g, ' ').trim();\n // Set the value accordingly\n this.value = target.value;\n // value can't be invalid as an item is selected\n this.invalid = false;\n\n // Deselect the other elements if selected programatically changed\n this._deselectExcept(target);\n }\n // Remove values if deselected\n // Only do this if we're the current value\n // If the selected item was changed, this.value will be different\n else if (this.value === target.value) {\n this.value = '';\n\n // CUI-5533 Since checks inside of _handleInput will assume the value hasn't change,\n // We need to trigger here\n this.trigger('change');\n }\n }\n\n /**\n Check if the given option partially matches the given value.\n\n @param {HTMLElement} option\n The option to test\n @param {String} value\n The value to test\n\n @returns {Boolean} true if the value matches, false if not.\n\n @protected\n */\n _optionContainsValue(option, value) {\n value = (typeof value === 'string' ? value : '').toLowerCase();\n return (option.text || option.content).toLowerCase().indexOf(value) !== -1;\n }\n\n /**\n Check if the given option starts with the given value.\n\n @param {HTMLElement} option\n The option to test\n @param {String} value\n The value to test\n\n @returns {Boolean} true if the value matches, false if not.\n\n @protected\n */\n _optionStartsWithValue(option, value) {\n value = (typeof value === 'string' ? value : '').toLowerCase();\n return option.content.toLowerCase().trim().indexOf(value) === 0;\n }\n\n /**\n Check if the given option exactly matches the given value.\n\n @param {HTMLElement} option\n The option to test\n @param {String} value\n The value to test\n\n @returns {Boolean} true if the value matches, false if not.\n\n @protected\n */\n _optionEqualsValue(option, value) {\n value = (typeof value === 'string' ? value : '').toLowerCase();\n return option.content.toLowerCase().trim() === value;\n }\n\n /**\n Updates label on toggle button to communicate number of suggestions in list.\n\n @param {Number} num\n The number of suggestions available\n @private\n */\n _updateButtonAccessibilityLabel(num) {\n let str = i18n.get('Show suggestions');\n\n if (num === 1) {\n str = i18n.get('Show suggestion');\n } else if (num > 1) {\n str = i18n.get('Show {0} suggestions', num);\n }\n\n this._elements.trigger.setAttribute('aria-label', str);\n this._elements.trigger.setAttribute('title', str);\n }\n\n /**\n Clears the current selected value or items.\n */\n clear() {\n this.value = '';\n this._elements.input.clear();\n\n if (this.multiple) {\n this._clearValues();\n }\n }\n\n /**\n Clear the list of suggestions.\n */\n clearSuggestions() {\n this._elements.selectList.items.clear();\n this._updateButtonAccessibilityLabel();\n }\n\n /**\n A suggestion object.\n\n @typedef {Object} AutocompleteSuggestion\n\n @property {String} value\n The form submission value to use when this suggestion is selected.\n @property {String} [content=value]\n The content to disable in the suggestion dropdown.\n */\n\n /**\n Add the provided list of suggestions and clear loading status.\n\n @param {Array.} suggestions\n The list of suggestions to show.\n @param {Boolean} clear\n If true, existing suggestions will be cleared.\n */\n addSuggestions(suggestions, clear) {\n // Disable loading mode\n this.loading = false;\n\n if (clear) {\n // Remove existing selectList items\n this.clearSuggestions();\n }\n\n // Add items to the selectlist\n for (let i = 0 ; i < suggestions.length ; i++) {\n const value = suggestions[i].value;\n const content = suggestions[i].content;\n const icon = suggestions[i].icon;\n const disabled = !!suggestions[i].disabled;\n\n // Only add the item if it's not a selected value or we're in single mode\n if (!this.multiple || this.values.indexOf(value) === -1) {\n this._elements.selectList.items.add({\n value: value,\n type: 'button',\n icon: icon,\n disabled: disabled,\n id: commons.getUID(),\n tabIndex: -1,\n content: {\n innerHTML: content\n }\n });\n this._elements.selectList.items.last().setAttribute('role', 'option');\n }\n }\n\n if (!suggestions.length && !this._elements.selectList.items.length) {\n // Show \"no results\" when no suggestions are found at all\n this._elements.selectList.items.add({\n type: 'button',\n content: {\n innerHTML: `${i18n.get('No matching results.')}`\n },\n disabled: true\n });\n this._elements.selectList.items.last().setAttribute('role', 'status');\n this._elements.selectList.items.last().setAttribute('aria-live', 'polite');\n this._elements.input.removeAttribute('aria-activedescendant');\n this._updateButtonAccessibilityLabel();\n } else {\n this._updateButtonAccessibilityLabel(this._elements.selectList.items.length);\n }\n }\n\n /**\n Shows the suggestion UI.\n */\n showSuggestions() {\n if (!this._showSuggestionsCalled) {\n this._showSuggestions();\n } else {\n this._showSuggestionsCalled = false;\n }\n\n // Just show\n this._elements.overlay.open = true;\n\n // Force overlay repositioning (e.g because of remote loading)\n requestAnimationFrame(() => {\n this._elements.overlay._onAnimate();\n this._elements.overlay.reposition();\n });\n\n this._elements.input.setAttribute('aria-expanded', 'true');\n this._elements.trigger.setAttribute('aria-expanded', 'true');\n }\n\n /**\n Hides the suggestion UI.\n */\n hideSuggestions() {\n this._elements.overlay.open = false;\n\n this._elements.input.setAttribute('aria-expanded', 'false');\n this._elements.trigger.setAttribute('aria-expanded', 'false');\n this._elements.input.removeAttribute('aria-activedescendant');\n\n // Don't let the suggestions show\n window.clearTimeout(this._timeout);\n\n // Trigger an event\n this.trigger('coral-autocomplete:hidesuggestions');\n }\n\n /**\n Matches the accessibility to the state of the popover.\n\n @ignore\n */\n _onOverlayOpenOrClose(event) {\n if (this._elements.overlay.open) {\n this._elements.input.setAttribute('aria-expanded', 'true');\n this._elements.trigger.setAttribute('aria-expanded', 'true');\n } else {\n this._elements.input.setAttribute('aria-expanded', 'false');\n this._elements.trigger.setAttribute('aria-expanded', 'false');\n this._elements.input.removeAttribute('aria-activedescendant');\n }\n }\n\n /**\n Inherited from {@link BaseFormField#reset}.\n */\n reset() {\n // reset the values to the initial values\n this.values = this._initialSelectedValues;\n }\n\n /**\n Returns {@link Autocomplete} match options.\n\n @return {AutocompleteMatchEnum}\n */\n static get match() {\n return match;\n }\n\n /**\n Returns {@link Autocomplete} variants.\n\n @return {AutocompleteVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n forceselection: 'forceSelection',\n maxlength: 'maxLength'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'multiple',\n 'delay',\n 'forceselection',\n 'placeholder',\n 'maxlength',\n 'icon',\n 'match',\n 'loading',\n 'variant'\n ]);\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Container role per ARIA Autocomplete\n this.setAttribute('role', 'group');\n\n // Input attributes per ARIA Autocomplete\n this._elements.input.setAttribute('role', 'combobox');\n this._elements.input.setAttribute('aria-autocomplete', 'list');\n this._elements.input.setAttribute('aria-haspopup', 'listbox');\n this._elements.input.setAttribute('aria-expanded', 'false');\n this._elements.input.setAttribute('aria-controls', this._elements.selectList.id);\n\n // Trigger button attributes per ARIA Autocomplete\n this._elements.trigger.setAttribute('aria-haspopup', 'listbox');\n this._elements.trigger.setAttribute('aria-expanded', 'false');\n this._elements.trigger.setAttribute('aria-controls', this._elements.selectList.id);\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n\n // Create a fragment\n const frag = document.createDocumentFragment();\n\n // Render the template\n frag.appendChild(this._elements.field);\n frag.appendChild(this._elements.inputGroup);\n frag.appendChild(this._elements.tagList);\n frag.appendChild(this._elements.overlay);\n\n this._elements.overlay.target = this._elements.trigger;\n\n // Clean up\n while (this.firstChild) {\n const child = this.firstChild;\n // Only works if all root template elements have a handle attribute\n if (child.nodeType === Node.TEXT_NODE || child.hasAttribute && !child.hasAttribute('handle')) {\n // Add non-template elements to the content\n frag.appendChild(child);\n } else {\n // Remove anything else\n this.removeChild(child);\n }\n }\n\n // Append the fragment to the component\n this.appendChild(frag);\n\n // Set the state from the DOM when initialized\n this._setStateFromDOM();\n\n // save initial selection (used for reset)\n this._initialSelectedValues = this.values.slice(0);\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n\n /**\n Triggered when the {@link Autocomplete} could accept external data to be loaded by the user.\n If preventDefault() is called, then a loading indicator will be shown.\n {@link Autocomplete#loading} should be set to false to indicate that the data has been successfully loaded.\n\n @typedef {CustomEvent} coral-autocomplete:showsuggestions\n\n @property {String} detail.value\n The user input.\n */\n\n /**\n Triggered when the {@link Autocomplete} hides the suggestions.\n This is typically used to cancel a load request because the suggestions will not be shown anymore.\n\n @typedef {CustomEvent} coral-autocomplete:hidesuggestions\n */\n});\n\nexport default Autocomplete;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 486, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 29, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 487, "kind": "variable", "name": "SCROLL_BOTTOM_THRESHOLD", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~SCROLL_BOTTOM_THRESHOLD", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "The distance, in pixels, from the bottom of the List at which we assume the user has scrolled\nto the bottom of the list.", "lineNumber": 37, "ignore": true, "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null } }, { "__docId__": 488, "kind": "variable", "name": "SCROLL_DEBOUNCE", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~SCROLL_DEBOUNCE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "The number of milliseconds for which scroll events should be debounced.", "lineNumber": 44, "ignore": true, "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null } }, { "__docId__": 489, "kind": "typedef", "name": "AutocompleteVariantEnum", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~AutocompleteVariantEnum", "access": "public", "description": "Enumeration for {@link Autocomplete} variants.", "lineNumber": 56, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "A default, gray Autocomplete." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "An Autocomplete with no border or background." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AutocompleteVariantEnum" } }, { "__docId__": 490, "kind": "typedef", "name": "AutocompleteMatchEnum", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~AutocompleteMatchEnum", "access": "public", "description": "Enumeration for {@link Autocomplete} match options.", "lineNumber": 71, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "STARTSWITH", "description": "Include only matches that start with the user provided value." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "CONTAINS", "description": "Include only matches that contain the user provided value." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AutocompleteMatchEnum" } }, { "__docId__": 491, "kind": "variable", "name": "Autocomplete", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~Autocomplete", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Autocomplete}", "description": "An Autocomplete component that allows users to search and select from a list of options.", "lineNumber": 84, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Autocomplete" }, { "tagName": "@classdesc", "tagValue": "An Autocomplete component that allows users to search and select from a list of options." }, { "tagName": "@htmltag", "tagValue": "coral-autocomplete" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Autocomplete();" ], "see": [ "../examples/#autocomplete" ], "type": { "types": [ "*" ] } }, { "__docId__": 492, "kind": "typedef", "name": "AutocompleteSuggestion", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~AutocompleteSuggestion", "access": "public", "description": "A suggestion object.", "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "value", "description": "The form submission value to use when this suggestion is selected." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": true, "defaultValue": "value", "defaultRaw": "value", "name": "content", "description": "The content to disable in the suggestion dropdown." } ], "type": { "types": [ "Object" ], "optional": false, "name": "AutocompleteSuggestion" } }, { "__docId__": 493, "kind": "typedef", "name": "coral-autocomplete:showsuggestions", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~coral-autocomplete:showsuggestions", "access": "public", "description": "Triggered when the {@link Autocomplete} could accept external data to be loaded by the user.\nIf preventDefault() is called, then a loading indicator will be shown.\n{@link Autocomplete#loading} should be set to false to indicate that the data has been successfully loaded.", "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "detail.value", "description": "The user input." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-autocomplete:showsuggestions" } }, { "__docId__": 494, "kind": "typedef", "name": "coral-autocomplete:hidesuggestions", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/Autocomplete.js~coral-autocomplete:hidesuggestions", "access": "public", "description": "Triggered when the {@link Autocomplete} hides the suggestions.\nThis is typically used to cancel a load request because the suggestions will not be shown anymore.", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-autocomplete:hidesuggestions" } }, { "__docId__": 495, "kind": "file", "name": "coral-spectrum/coral-component-autocomplete/src/scripts/AutocompleteItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.Autocomplete.Item\n @classdesc The Autocomplete Item\n @htmltag coral-autocomplete-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst AutocompleteItem = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this._observer = new MutationObserver(this._handleMutation.bind(this));\n this._observer.observe(this, {\n characterData: true,\n childList: true,\n subtree: true\n });\n }\n\n /**\n Value of the item. textContent is used if not provided.\n\n @type {String}\n @default \"\"\n @htmlattribute value\n @htmlattributereflected\n */\n get value() {\n // keep spaces to only 1 max and trim to mimic native select option behavior\n return typeof this._value === 'undefined' ?\n this.getAttribute('value') || this.textContent.replace(/\\s{2,}/g, ' ').trim() :\n this._value;\n }\n\n set value(value) {\n let _value = transform.string(value);\n\n if(this._value === _value) {\n return;\n }\n\n this._value = _value;\n this._reflectAttribute('value', this._value);\n\n this.trigger('coral-autocomplete-item:_valuechanged');\n }\n\n // @compat\n get content() {\n return this;\n }\n\n set content(value) {\n // Support configs\n if (typeof value === 'object') {\n for (const prop in value) {\n /** @ignore */\n this[prop] = value[prop];\n }\n }\n }\n\n /**\n Whether this item is selected.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n let _selected = transform.booleanAttr(value);\n\n if(this._selected === _selected) {\n return;\n }\n\n this._selected = _selected;\n this._reflectAttribute('selected', this._selected);\n\n this.trigger('coral-autocomplete-item:_selectedchanged');\n }\n\n /**\n Whether this item is disabled.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n }\n\n /** @private */\n _handleMutation() {\n this.trigger('coral-autocomplete-item:_contentchanged', {\n content: this.textContent\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', 'disabled', 'value']);\n }\n});\n\nexport default AutocompleteItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-autocomplete/src/scripts/AutocompleteItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 496, "kind": "variable", "name": "AutocompleteItem", "memberof": "coral-spectrum/coral-component-autocomplete/src/scripts/AutocompleteItem.js", "static": true, "longname": "coral-spectrum/coral-component-autocomplete/src/scripts/AutocompleteItem.js~AutocompleteItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Autocomplete}", "description": "The Autocomplete Item", "lineNumber": 24, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Autocomplete.Item" }, { "tagName": "@classdesc", "tagValue": "The Autocomplete Item" }, { "tagName": "@htmltag", "tagValue": "coral-autocomplete-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Autocomplete.Item();" ], "see": [ "../examples/#autocomplete" ], "type": { "types": [ "*" ] } }, { "__docId__": 497, "kind": "file", "name": "coral-spectrum/coral-component-banner/src/scripts/Banner.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Banner';\n\n/**\n Enumeration for {@link Banner} variants.\n\n @typedef {Object} BannerVariantEnum\n\n @property {String} ERROR\n A banner to indicate that an error has occurred.\n @property {String} WARNING\n A banner to warn the user of something important.\n @property {String} INFO\n A banner to inform the user of non-critical information.\n */\nconst variant = {\n ERROR: 'error',\n WARNING: 'warning',\n INFO: 'info'\n};\n\n// An array of all possible variant classnames\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantValue in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);\n}\n\n/**\n @class Coral.Banner\n @classdesc A Banner component\n @htmltag coral-banner\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Banner = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Fetch content zones\n this._elements = {\n header: this.querySelector('coral-banner-header') || document.createElement('coral-banner-header'),\n content: this.querySelector('coral-banner-content') || document.createElement('coral-banner-content')\n };\n }\n\n /**\n The banner variant style to use. See {@link BannerVariantEnum}.\n\n @type {String}\n @default BannerVariantEnum.INFO\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.INFO;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.INFO;\n this._reflectAttribute('variant', this._variant);\n\n // Remove all variant classes\n this.classList.remove(...ALL_VARIANT_CLASSES);\n\n // Set new variant class\n this.classList.add(`${CLASSNAME}--${this._variant}`);\n }\n\n /**\n The banner's header.\n\n @type {BannerHeader}\n @contentzone\n */\n get header() {\n return this._getContentZone(this._elements.header);\n }\n\n set header(value) {\n this._setContentZone('header', value, {\n handle: 'header',\n tagName: 'coral-banner-header',\n insert: function (header) {\n header.classList.add(`${CLASSNAME}-header`);\n this.insertBefore(header, this.firstChild);\n }\n });\n }\n\n /**\n The banner's content.\n\n @type {BannerContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-banner-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}-content`);\n this.appendChild(content);\n }\n });\n }\n\n get _contentZones() {\n return {\n 'coral-banner-header': 'header',\n 'coral-banner-content': 'content'\n };\n }\n\n /**\n Returns {@link Banner} variants.\n\n @return {BannerVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return ['variant'];\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.INFO;\n }\n\n const header = this._elements.header;\n const content = this._elements.content;\n\n // When the content zone was not created, we need to make sure that everything is added inside it as a content.\n if (!content.parentNode) {\n while (this.firstChild) {\n const child = this.firstChild;\n\n // Don't move header into content\n if (child === header) {\n child.remove();\n } else {\n content.appendChild(this.firstChild);\n }\n }\n }\n\n // Assign content zones\n this.header = this._elements.header;\n this.content = this._elements.content;\n }\n});\n\nexport default Banner;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-banner/src/scripts/Banner.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 498, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-banner/src/scripts/Banner.js", "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/Banner.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 499, "kind": "typedef", "name": "BannerVariantEnum", "memberof": "coral-spectrum/coral-component-banner/src/scripts/Banner.js", "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/Banner.js~BannerVariantEnum", "access": "public", "description": "Enumeration for {@link Banner} variants.", "lineNumber": 31, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ERROR", "description": "A banner to indicate that an error has occurred." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "WARNING", "description": "A banner to warn the user of something important." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INFO", "description": "A banner to inform the user of non-critical information." } ], "type": { "types": [ "Object" ], "optional": false, "name": "BannerVariantEnum" } }, { "__docId__": 500, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-banner/src/scripts/Banner.js", "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/Banner.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 38, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 501, "kind": "variable", "name": "Banner", "memberof": "coral-spectrum/coral-component-banner/src/scripts/Banner.js", "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/Banner.js~Banner", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Banner}", "description": "A Banner component", "lineNumber": 50, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Banner" }, { "tagName": "@classdesc", "tagValue": "A Banner component" }, { "tagName": "@htmltag", "tagValue": "coral-banner" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Banner();" ], "see": [ "../examples/#banner" ], "type": { "types": [ "*" ] } }, { "__docId__": 502, "kind": "file", "name": "coral-spectrum/coral-component-banner/src/scripts/BannerContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Banner.Content\n @classdesc A Banner Content component\n @htmltag coral-banner-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-banner-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-banner/src/scripts/BannerContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 503, "kind": "function", "name": "BannerContent", "memberof": "coral-spectrum/coral-component-banner/src/scripts/BannerContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/BannerContent.js~BannerContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Banner}", "description": "A Banner Content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Banner.Content" }, { "tagName": "@classdesc", "tagValue": "A Banner Content component" }, { "tagName": "@htmltag", "tagValue": "coral-banner-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Banner.Content();" ], "see": [ "../examples/#banner" ], "params": [] }, { "__docId__": 504, "kind": "file", "name": "coral-spectrum/coral-component-banner/src/scripts/BannerHeader.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Banner.Header\n @classdesc A Banner Header component\n @htmltag coral-banner-header\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-banner-header');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-banner/src/scripts/BannerHeader.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 505, "kind": "function", "name": "BannerHeader", "memberof": "coral-spectrum/coral-component-banner/src/scripts/BannerHeader.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-banner/src/scripts/BannerHeader.js~BannerHeader", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Banner}", "description": "A Banner Header component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Banner.Header" }, { "tagName": "@classdesc", "tagValue": "A Banner Header component" }, { "tagName": "@htmltag", "tagValue": "coral-banner-header" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Banner.Header();" ], "see": [ "../examples/#banner" ], "params": [] }, { "__docId__": 506, "kind": "file", "name": "coral-spectrum/coral-component-button/src/scripts/Button.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseButton} from '../../../coral-base-button';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.Button\n @classdesc A Button component containing text and/or an icon.\n @htmltag coral-button\n @htmlbasetag button\n @extends {HTMLButtonElement}\n @extends {BaseComponent}\n @extends {BaseButton}\n */\nconst Button = Decorator(class extends BaseButton(BaseComponent(HTMLButtonElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(this._events);\n }\n});\n\nexport default Button;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-button/src/scripts/Button.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 507, "kind": "variable", "name": "Button", "memberof": "coral-spectrum/coral-component-button/src/scripts/Button.js", "static": true, "longname": "coral-spectrum/coral-component-button/src/scripts/Button.js~Button", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Button}", "description": "A Button component containing text and/or an icon.", "lineNumber": 26, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Button" }, { "tagName": "@classdesc", "tagValue": "A Button component containing text and/or an icon." }, { "tagName": "@htmltag", "tagValue": "coral-button" }, { "tagName": "@htmlbasetag", "tagValue": "button" }, { "tagName": "@extends", "tagValue": "{HTMLButtonElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseButton}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Button();" ], "see": [ "../examples/#button" ], "type": { "types": [ "*" ] } }, { "__docId__": 508, "kind": "file", "name": "coral-spectrum/coral-component-button/src/scripts/ButtonLabel.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Button.Label\n @classdesc The Button label content\n @htmltag coral-button-label\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-button-label');\n\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-button/src/scripts/ButtonLabel.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 509, "kind": "function", "name": "ButtonLabel", "memberof": "coral-spectrum/coral-component-button/src/scripts/ButtonLabel.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-button/src/scripts/ButtonLabel.js~ButtonLabel", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Button}", "description": "The Button label content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Button.Label" }, { "tagName": "@classdesc", "tagValue": "The Button label content" }, { "tagName": "@htmltag", "tagValue": "coral-button-label" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Button.Label();" ], "see": [ "../examples/#button" ], "params": [] }, { "__docId__": 510, "kind": "file", "name": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {Button} from '../../../coral-component-button';\nimport {SelectableCollection} from '../../../coral-collection';\nimport base from '../templates/base';\nimport {transform, validate, commons} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link ButtonGroup} selection options.\n\n @typedef {Object} ButtonGroupSelectionModeEnum\n\n @property {String} NONE\n None is default, selection of buttons doesn't happen based on click.\n @property {String} SINGLE\n Single selection mode, button group behaves like radio input elements.\n @property {String} MULTIPLE\n Multiple selection mode, button group behaves like checkbox input elements.\n */\nconst selectionMode = {\n NONE: 'none',\n SINGLE: 'single',\n MULTIPLE: 'multiple'\n};\n\n/** @const Selector used to recognized an item of the ButtonGroup */\nconst ITEM_SELECTOR = 'button[is=\"coral-button\"]';\n\n/**\n Extracts the value from the item in case no explicit value was provided.\n @param {HTMLElement} item\n the item whose value will be extracted.\n @returns {String} the value that will be submitted for this item.\n @private\n */\nconst itemValueFromDOM = function (item) {\n const attr = item.getAttribute('value');\n // checking explicitely for null allows to differenciate between non set values and empty strings\n return attr !== null ? attr : item.textContent.replace(/\\s{2,}/g, ' ').trim();\n};\n\nconst CLASSNAME = '_coral-ButtonGroup';\n\n/**\n @class Coral.ButtonGroup\n @classdesc A ButtonGroup component that can be used as a selection form field.\n @htmltag coral-buttongroup\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst ButtonGroup = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Store template\n this._elements = {};\n base.call(this._elements);\n\n // Pre-define labellable element\n this._labellableElement = this;\n\n // save initial selection (used for reset)\n this._initalSelectedValues = [];\n\n // Attach events\n this._delegateEvents(commons.extend(this._events, {\n 'click button[is=\"coral-button\"]': '_onButtonClick',\n\n 'capture:focus button[is=\"coral-button\"]': '_onButtonFocus',\n 'capture:blur button[is=\"coral-button\"]': '_onButtonBlur',\n\n 'key:up button[is=\"coral-button\"]': '_onButtonKeyUpLeft',\n 'key:left button[is=\"coral-button\"]': '_onButtonKeyUpLeft',\n 'key:down button[is=\"coral-button\"]': '_onButtonKeyDownRight',\n 'key:right button[is=\"coral-button\"]': '_onButtonKeyDownRight',\n 'key:home button[is=\"coral-button\"]': '_onButtonKeyHome',\n 'key:end button[is=\"coral-button\"]': '_onButtonKeyEnd',\n\n 'coral-button:_valuechanged button[is=\"coral-button\"]': '_onButtonValueChanged',\n 'coral-button:_selectedchanged button[is=\"coral-button\"]': '_onButtonSelectedChanged'\n }));\n\n // Init the mutation observer but we don't handle the initial items in the constructor\n this.items._startHandlingItems(true);\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // we do lazy initialization of the collection\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemBaseTagName: 'button',\n itemTagName: 'coral-button',\n itemSelector: ITEM_SELECTOR,\n onlyHandleChildren: true,\n onItemAdded: this._onItemAdded,\n onItemRemoved: this._onItemRemoved,\n onCollectionChange: this._onCollectionChange\n });\n }\n\n return this._items;\n }\n\n /**\n Selection mode of Button group\n\n @type {String}\n @default ButtonGroupSelectionModeEnum.NONE\n @htmlattribute selectionmode\n @htmlattributereflected\n */\n get selectionMode() {\n return this._selectionMode || selectionMode.NONE;\n }\n\n set selectionMode(value) {\n value = transform.string(value).toLowerCase();\n this._selectionMode = validate.enumeration(selectionMode)(value) && value || selectionMode.NONE;\n this._reflectAttribute('selectionmode', this._selectionMode);\n\n // update select element if multiple\n // this is required while appplying default selection\n // if selection mode is single first elem gets selected but for multiple its not\n this._elements.nativeSelect.multiple = this._selectionMode === selectionMode.MULTIPLE;\n\n // Sync\n if (this._selectionMode === selectionMode.SINGLE) {\n this.setAttribute('role', 'radiogroup');\n\n // makes sure the internal options are properly initialized\n this._syncItemOptions();\n\n // we make sure the selection is valid by explicitly finding a candidate or making sure just 1 item is\n // selected\n this._validateSelection();\n } else if (this._selectionMode === selectionMode.MULTIPLE) {\n this.setAttribute('role', 'group');\n\n // makes sure the internal options are properly initialized\n this._syncItemOptions();\n } else {\n this.setAttribute('role', 'group');\n\n this._removeItemOptions();\n }\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.nativeSelect.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.nativeSelect.name = value;\n }\n\n /**\n This field's current value.\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n return this._elements.nativeSelect.value;\n }\n\n set value(value) {\n if (this.selectionMode === selectionMode.NONE) {\n return;\n }\n\n // we proceed to select the provided value\n this._selectItemByValue([value]);\n }\n\n /**\n Returns an Array containing the selected buttons.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n if (this.selectionMode === selectionMode.MULTIPLE) {\n return this.items._getAllSelected();\n }\n\n const item = this.selectedItem;\n return item ? [item] : [];\n }\n\n /**\n Returns the first selected button in the Button Group. The value null is returned if no button is\n selected.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.selectionMode === selectionMode.MULTIPLE ?\n this.items._getFirstSelected() :\n this.items._getLastSelected();\n }\n\n /**\n Current selected values as submitted during form submission.\n\n @type {Array.}\n */\n get values() {\n const values = [];\n\n // uses the nativeSelect since it holds the truth of what will be submitted with the form\n const selectedOptions = this._elements.nativeSelect.querySelectorAll(':checked');\n for (let i = 0, selectedOptionsCount = selectedOptions.length ; i < selectedOptionsCount ; i++) {\n values.push(selectedOptions[i].value);\n }\n\n return values;\n }\n\n set values(values) {\n if (Array.isArray(values) && this.selectionMode !== selectionMode.NONE) {\n // just keeps the first value if selectionMode is not multiple\n if (this.selectionMode !== selectionMode.MULTIPLE && values.length > 1) {\n values = [values[0]];\n }\n\n // we proceed to select the provided values\n this._selectItemByValue(values);\n }\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n const isDisabled = this.disabled || this.readOnly;\n this._elements.nativeSelect.disabled = isDisabled;\n // Also update for all the items the disabled property so it matches the native select.\n this.items.getAll().forEach((item) => {\n item.disabled = isDisabled;\n });\n this[isDisabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', isDisabled);\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.nativeSelect.disabled = this.readOnly || this.disabled;\n // Also update for all the items the disabled property so it matches the native select.\n this.items.getAll().forEach((item) => {\n item.disabled = this.disabled || this.readOnly && !item.hasAttribute('selected');\n item[this.readOnly ? 'setAttribute' : 'removeAttribute']('aria-disabled', true);\n });\n // aria-readonly is not permitted on elements with role=\"radiogroup\" or role=\"group\"\n this.removeAttribute('aria-readonly');\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this._elements.nativeSelect.required = this.required;\n // aria-required is permitted on elements with role=\"radiogroup\" but not with role=\"group\"\n if (this.selectionMode !== selectionMode.SINGLE) {\n this.removeAttribute('aria-required');\n }\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n this._elements.nativeSelect.setAttribute('aria-labelledby', this.labelledBy);\n }\n\n /**\n Inherited from {@link BaseFormField#reset}.\n */\n reset() {\n // reset the values to the initial values\n this.values = this._initalSelectedValues;\n }\n\n /** @private */\n _onButtonClick(event) {\n // uses matchTarget to make sure the buttons is handled and not an internal component\n const item = event.matchedTarget;\n\n this._onButtonFocus(event);\n\n if (this.readOnly) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n if (this.selectionMode === selectionMode.SINGLE) {\n // prevent event only if selectionMode is not of type none\n event.preventDefault();\n\n // first unselect the other element\n const selectedItems = this.items._getAllSelected();\n\n // we deselect the previously selected item\n if (selectedItems.length !== 0 && selectedItems[0] !== item) {\n this._toggleItemSelection(selectedItems[0], false);\n }\n\n // forces the selection on the clicked item\n this._toggleItemSelection(item, true);\n\n // if the same button was clicked we do not need to trigger an event\n if (selectedItems[0] !== item) {\n this.trigger('change');\n }\n } else if (this.selectionMode === selectionMode.MULTIPLE) {\n // prevent event only if selectionMode is not of type none\n event.preventDefault();\n\n this._toggleItemSelection(item);\n\n // since we toggle the selection we always trigger a change event\n this.trigger('change');\n }\n }\n\n /** @private */\n _onButtonFocus(event) {\n const item = event.matchedTarget;\n const buttons = this.items.getAll();\n const buttonsCount = buttons.length;\n\n let button;\n for (let i = 0 ; i < buttonsCount ; i++) {\n // stores the reference\n button = buttons[i];\n button.setAttribute('tabindex', button === item ? 0 : -1);\n }\n }\n\n /** @private */\n _onButtonBlur(event) {\n const item = event.matchedTarget;\n const buttons = this.items.getAll();\n const buttonsCount = buttons.length;\n\n let button;\n let tabindex;\n const selectedItemsLength = this.selectedItems.length;\n const firstSelectable = this.items._getFirstSelectable();\n let isSelected = false;\n for (let i = 0 ; i < buttonsCount ; i++) {\n // stores the reference\n button = buttons[i];\n isSelected = button.hasAttribute('selected');\n if (this.selectionMode === selectionMode.SINGLE) {\n // selected item should be tabbable\n tabindex = isSelected ? 0 : -1;\n } else if (this.selectionMode === selectionMode.MULTIPLE) {\n tabindex =\n // if no items are selected, first item should be tabbable\n !selectedItemsLength && i === 0 ||\n // if the element losing focus is selected, it should be tabbable\n isSelected && button === item ||\n // if the element losing focus is not selected, the last selected item should be tabbable\n !item.hasAttribute('selected') &&\n button === (this.selectedItems[selectedItemsLength - 1] || firstSelectable) ? 0 : -1;\n } else {\n // first item should be tabbable\n tabindex = button === firstSelectable ? 0 : -1;\n }\n button.setAttribute('tabindex', tabindex);\n }\n }\n\n /** @private */\n _onButtonKeyUpLeft(event) {\n event.preventDefault();\n\n const item = event.matchedTarget;\n let button = item.previousElementSibling;\n\n // skip disabled items\n while (!button || (button.disabled || button.nodeName !== 'BUTTON')) {\n if (!button) {\n button = this.items._getLastSelectable();\n } else {\n button = button.previousElementSibling;\n }\n }\n\n if (button !== item) {\n if (this.selectionMode === selectionMode.SINGLE) {\n button.click();\n }\n this._setFocusToButton(button);\n }\n }\n\n /** @private */\n _onButtonKeyDownRight(event) {\n event.preventDefault();\n\n const item = event.matchedTarget;\n let button = item.nextElementSibling;\n\n // skip disabled items\n while (!button || (button.disabled || button.nodeName !== 'BUTTON')) {\n if (!button) {\n button = this.items._getFirstSelectable();\n } else {\n button = button.nextElementSibling;\n }\n }\n\n if (button !== item) {\n if (this.selectionMode === selectionMode.SINGLE) {\n button.click();\n }\n this._setFocusToButton(button);\n }\n }\n\n /** @private */\n _onButtonKeyHome(event) {\n event.preventDefault();\n\n const item = event.matchedTarget;\n const button = this.items._getFirstSelectable();\n\n if (button !== item) {\n if (this.selectionMode === selectionMode.SINGLE) {\n button.click();\n }\n this._setFocusToButton(button);\n }\n }\n\n /** @private */\n _onButtonKeyEnd(event) {\n event.preventDefault();\n\n const item = event.matchedTarget;\n const button = this.items._getLastSelectable();\n\n if (button !== item) {\n if (this.selectionMode === selectionMode.SINGLE) {\n button.click();\n }\n this._setFocusToButton(button);\n }\n }\n\n /** @private */\n _setFocusToButton(button) {\n if (button) {\n button.focus();\n }\n }\n\n /** @private */\n _onItemAdded(item) {\n // Store variant to be able to reset it when item is removed\n item._initialVariant = item._initialVariant || item.variant;\n\n // Force action variant\n if (!(item.variant === Button.variant.ACTION || item.variant === Button.variant.QUIET_ACTION)) {\n item.variant = item.variant === Button.variant.QUIET ? Button.variant.QUIET_ACTION : Button.variant.ACTION;\n }\n\n if (this.selectionMode !== selectionMode.NONE) {\n if (this.selectionMode === selectionMode.SINGLE) {\n item.setAttribute('role', 'radio');\n item.setAttribute('tabindex', item.hasAttribute('selected') ? 0 : -1);\n } else {\n item.setAttribute('role', 'checkbox');\n }\n item.setAttribute('aria-checked', item.hasAttribute('selected'));\n } else {\n item.removeAttribute('role');\n }\n\n item.disabled = this.disabled || this.readOnly && !item.hasAttribute('selected');\n\n item[this.readOnly ? 'setAttribute' : 'removeAttribute']('aria-disabled', true);\n\n this._addItemOption(item);\n\n // Handle the case where we might have multiple items selected while single selection mode is on\n if (this.selectionMode === selectionMode.SINGLE) {\n const selectedItems = this.items._getAllSelected();\n // The last added item will stay selected\n if (selectedItems.length > 1 && item.hasAttribute('selected')) {\n item.removeAttribute('selected');\n }\n }\n }\n\n /** @private */\n _onItemRemoved(item) {\n // Restore variant\n item.variant = item._initialVariant;\n item._initialVariant = undefined;\n item.removeAttribute('role');\n\n if (!item.parentNode) {\n // Remove the item from the initial selected values\n const index = this._initalSelectedValues.indexOf(item.value);\n if (index !== -1) {\n this._initalSelectedValues.splice(index, 1);\n }\n }\n\n // delete option\n if (item.option) {\n item.option.parentNode.removeChild(item.option);\n item.option = undefined;\n }\n }\n\n /** @private */\n _onCollectionChange() {\n // we need to make sure that the state of the selectionMode is valid\n this._validateSelection();\n }\n\n /** @private */\n _onButtonSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n const button = event.target;\n const isSelected = button.hasAttribute('selected');\n\n // when in single mode, we need to make sure the current selection is valid\n if (this.selectionMode === selectionMode.SINGLE) {\n this._validateSelection(isSelected ? button : null);\n } else {\n // we simply toggle the selection\n this._toggleItemSelection(button, isSelected);\n }\n }\n\n /** @private */\n _onButtonValueChanged(event) {\n event.stopImmediatePropagation();\n\n const button = event.target;\n // Make sure option is attached before setting the value\n if (this.selectionMode !== selectionMode.NONE) {\n button.option.value = itemValueFromDOM(button);\n }\n }\n\n /**\n Toggles the selected state of the item. When selected is provided, it is set as the current state. If\n the value is ommited, then the selected is toggled.\n\n @param {HTMLElement} item\n Item whose selection needs to be updated.\n @param {Boolean} [selected]\n Whether the item is selected. If it is not provided, then it is toggled.\n\n @private\n */\n _toggleItemSelection(item, selected) {\n const ariaCheckedAttr = item.getAttribute('aria-checked');\n const tabIndexAttr = item.getAttribute('tabindex');\n\n // if selected is provided it is used to enforce the selection, otherwise we toggle the current state\n selected = typeof selected !== 'undefined' ? selected : !item.hasAttribute('selected');\n\n // only manipulates the attributes when necessary to avoid unnecessary mutations\n if (selected) {\n if (!item.hasAttribute('selected')) {\n item.setAttribute('selected', '');\n }\n\n if (ariaCheckedAttr !== 'true') {\n item.setAttribute('aria-checked', true);\n }\n\n if (this.selectionMode === selectionMode.SINGLE && tabIndexAttr !== '0') {\n item.setAttribute('tabindex', 0);\n }\n } else if (!selected) {\n if (item.hasAttribute('selected')) {\n item.removeAttribute('selected');\n }\n\n if (this.selectionMode !== selectionMode.NONE) {\n if (ariaCheckedAttr !== 'false') {\n item.setAttribute('aria-checked', false);\n }\n\n if (this.selectionMode === selectionMode.SINGLE && tabIndexAttr !== '-1') {\n item.setAttribute('tabindex', -1);\n }\n } else {\n item.removeAttribute('aria-checked');\n item.removeAttribute('tabindex');\n }\n }\n\n // if element.option is present - absent when selection mode changed to none\n if (item.option) {\n item.option.selected = selected;\n }\n }\n\n _selectItemByValue(values) {\n // queries all the buttons to change their selection state\n const buttons = this.items.getAll();\n let item;\n\n for (let i = 0, buttonsCount = buttons.length ; i < buttonsCount ; i++) {\n // stores the reference\n item = buttons[i];\n\n // if the value is inside the new values array it should be selected\n this._toggleItemSelection(item, values.indexOf(itemValueFromDOM(item)) !== -1);\n }\n }\n\n /** @private */\n _setInitialValues() {\n if (this.selectionMode !== selectionMode.NONE) {\n const selectedItems = this.selectedItems;\n for (let i = 0, selectedItemsCount = selectedItems.length ; i < selectedItemsCount ; i++) {\n // Store _initalSelectedValues for reset\n this._initalSelectedValues.push(selectedItems[i].value);\n\n // Same goes for native select\n this._addItemOption(selectedItems[i]);\n }\n }\n }\n\n /** @private */\n _addItemOption(item) {\n if (this.selectionMode === selectionMode.NONE) {\n return;\n }\n\n // if already attached return\n if (item.option) {\n return;\n }\n\n const option = document.createElement('option');\n option.value = itemValueFromDOM(item);\n\n if (item.hasAttribute('selected')) {\n option.setAttribute('selected', '');\n }\n\n // add it to DOM. In single selectionMode the first item gets selected automatically\n item.option = option;\n this._elements.nativeSelect.add(option);\n\n // we make sure the options reflect the state of the button\n this._toggleItemSelection(item, item.hasAttribute('selected'));\n }\n\n /** @private */\n _removeItemOptions() {\n // Find all buttons and try attaching corresponding option elem\n const buttons = this.items.getAll();\n\n let item;\n for (let i = 0, buttonsCount = buttons.length ; i < buttonsCount ; i++) {\n // stores the reference\n item = buttons[i];\n\n item.removeAttribute('role');\n item.removeAttribute('aria-checked');\n\n // single we are removing the options, selection must also go away\n if (item.hasAttribute('selected')) {\n this._toggleItemSelection(item, false);\n }\n\n // we clear the related option element\n if (item.option) {\n item.option.parentNode.removeChild(item.option);\n delete item.option;\n }\n }\n }\n\n /** @private */\n _syncItemOptions() {\n // finds all buttons and try attaching corresponding option elem\n const buttons = this.items.getAll();\n const buttonsCount = buttons.length;\n let i = 0;\n\n let role = null;\n if (this.selectionMode === selectionMode.SINGLE) {\n role = 'radio';\n } else if (this.selectionMode === selectionMode.MULTIPLE) {\n role = 'checkbox';\n }\n\n let button;\n let isSelected = false;\n\n for (i ; i < buttonsCount ; i++) {\n // try attaching corresponding input element\n this._addItemOption(buttons[i]);\n }\n\n // We need to set the right state for the native select AFTER all buttons have been added\n // (as we can't disable options while there is only one option attached [at least in FF])\n for (i = buttonsCount - 1 ; i >= 0 ; i--) {\n button = buttons[i];\n isSelected = button.hasAttribute('selected');\n button.option.selected = isSelected;\n button.setAttribute('aria-checked', isSelected);\n\n if (role) {\n button.setAttribute('role', role);\n } else {\n button.removeAttribute('role');\n }\n }\n }\n\n /** @private */\n _validateSelection(item) {\n // when selectionMode = single, we need to force a selection\n if (this.selectionMode === selectionMode.SINGLE) {\n // gets the current selection\n const selection = this.items._getAllSelected();\n const selectionCount = selection.length;\n\n // if no item is currently selected, we need to find a candidate\n if (selectionCount === 0) {\n // gets the first candidate for selection\n const selectable = this.items._getFirstSelectable();\n\n if (selectable) {\n this._toggleItemSelection(selectable, true);\n }\n }\n // more items are selected, so we find a single item and deselect everything else\n else if (selectionCount > 1) {\n // if no item was provided we force the selection on the first item\n item = item || selection[0];\n\n // we make sure the item is selected, this is important to match the options with the selection\n this._toggleItemSelection(item, true);\n\n for (let i = 0 ; i < selectionCount ; i++) {\n if (selection[i] !== item) {\n this._toggleItemSelection(selection[i], false);\n }\n }\n }\n }\n }\n\n /**\n Returns {@link ButtonGroup} selection options.\n\n @return {ButtonGroupSelectionModeEnum}\n */\n static get selectionMode() {\n return selectionMode;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n selectionmode: 'selectionMode'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'selectionmode',\n 'selectionMode'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._selectionMode) {\n this.selectionMode = selectionMode.NONE;\n }\n\n // Create a fragment\n const frag = document.createDocumentFragment();\n\n // Render the template\n frag.appendChild(this._elements.nativeSelect);\n\n // Clean up\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.TEXT_NODE ||\n child.getAttribute('handle') !== 'nativeSelect') {\n // Add non-template elements to the content\n frag.appendChild(child);\n } else {\n // Remove anything else\n this.removeChild(child);\n }\n }\n\n // Append the fragment to the component\n this.appendChild(frag);\n\n // Need to store and set the initially selected values in the native select so that it can reset\n this._setInitialValues();\n\n // Call onItemAdded and onCollectionChange on the existing items\n this.items._startHandlingItems();\n }\n});\n\nexport default ButtonGroup;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 511, "kind": "typedef", "name": "ButtonGroupSelectionModeEnum", "memberof": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "static": true, "longname": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js~ButtonGroupSelectionModeEnum", "access": "public", "description": "Enumeration for {@link ButtonGroup} selection options.", "lineNumber": 33, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "NONE", "description": "None is default, selection of buttons doesn't happen based on click." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SINGLE", "description": "Single selection mode, button group behaves like radio input elements." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MULTIPLE", "description": "Multiple selection mode, button group behaves like checkbox input elements." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ButtonGroupSelectionModeEnum" } }, { "__docId__": 512, "kind": "variable", "name": "ITEM_SELECTOR", "memberof": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "static": true, "longname": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js~ITEM_SELECTOR", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 40, "unknown": [ { "tagName": "@const", "tagValue": "Selector used to recognized an item of the ButtonGroup" } ], "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 513, "kind": "function", "name": "itemValueFromDOM", "memberof": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js~itemValueFromDOM", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Extracts the value from the item in case no explicit value was provided.", "lineNumber": 49, "unknown": [ { "tagName": "@returns", "tagValue": "{String} the value that will be submitted for this item." } ], "params": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "item", "description": "the item whose value will be extracted." } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "the value that will be submitted for this item." }, "ignore": true }, { "__docId__": 514, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "static": true, "longname": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 55, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 515, "kind": "variable", "name": "ButtonGroup", "memberof": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js", "static": true, "longname": "coral-spectrum/coral-component-buttongroup/src/scripts/ButtonGroup.js~ButtonGroup", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ButtonGroup}", "description": "A ButtonGroup component that can be used as a selection form field.", "lineNumber": 65, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ButtonGroup" }, { "tagName": "@classdesc", "tagValue": "A ButtonGroup component that can be used as a selection form field." }, { "tagName": "@htmltag", "tagValue": "coral-buttongroup" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ButtonGroup();" ], "see": [ "../examples/#buttongroup" ], "type": { "types": [ "*" ] } }, { "__docId__": 516, "kind": "file", "name": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {DateTime} from '../../../coral-datetime';\nimport '../../../coral-component-button';\nimport {Icon} from '../../../coral-component-icon';\nimport calendar from '../templates/calendar';\nimport container from '../templates/container';\nimport table from '../templates/table';\nimport {transform, commons, i18n, Keys} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/** @ignore */\nfunction isDateInRange(date, startDate, endDate) {\n if (!date) {\n return false;\n }\n\n if (startDate === null && endDate === null) {\n return true;\n }\n else if (startDate === null) {\n return date.toDate() <= endDate;\n }\n else if (endDate === null) {\n return date.toDate() >= startDate;\n }\n\n return startDate <= date.toDate() && date.toDate() <= endDate;\n}\n\n/** @ignore */\nfunction toMoment(value, format) {\n if (value === 'today') {\n return new DateTime.Moment().startOf('day');\n }\n else if (DateTime.Moment.isMoment(value)) {\n return value.isValid() ? value.clone() : null;\n }\n\n // if the value provided is a date it does not make sense to provide a format to parse the date\n const result = new DateTime.Moment(value, value instanceof Date ? null : format);\n return result.isValid() ? result.startOf('day') : null;\n}\n\n/** @ignore */\nfunction validateAsChangedAndValidMoment(newValue, oldValue) {\n // if the value is undefined we change it to null since moment considers both to be different\n newValue = newValue || null;\n oldValue = oldValue || null;\n\n if (newValue !== oldValue && !new DateTime.Moment(newValue).isSame(oldValue, 'day')) {\n return newValue === null || newValue.isValid();\n }\n\n return false;\n}\n\n/**\n Slides in new month tables, slides out old tables, and then cleans up the leftovers when it is done.\n\n @ignore\n */\nfunction TableAnimator(host) {\n this.host = host;\n\n this._addContainerIfNotPresent = (width, height) => {\n if (!this.container) {\n // Get a fresh container for the animation:\n container.call(\n this,\n {\n width,\n height\n }\n );\n this.host.appendChild(this.container);\n }\n };\n\n this._removeContainerIfEmpty = () => {\n if (this.container && this.container.children.length === 0) {\n this.host.removeChild(this.container);\n this.container = null;\n }\n };\n\n this.slide = (newTable, direction) => {\n const replace = direction === undefined;\n const isLeft = direction === 'left';\n const oldTable = this.oldTable;\n\n // Should the replace flag be raised, or no old table be present, then do a non-transitioned (re)place and exit\n if (replace || !oldTable) {\n if (oldTable) {\n oldTable.parentNode.removeChild(oldTable);\n }\n this.host.insertBefore(newTable, this.host.firstChild);\n this.oldTable = newTable;\n return;\n }\n\n const boundingClientRect = oldTable.getBoundingClientRect();\n const width = boundingClientRect.width;\n let height = boundingClientRect.height;\n this._addContainerIfNotPresent(width, height);\n\n // Add both the old and the new table to the container:\n this.container.appendChild(oldTable);\n this.container.appendChild(newTable);\n\n // Set the existing table to start from being in full view, and mark it to transition on `left` changing\n oldTable.classList.add('_coral-Calendar-table--transit');\n\n commons.transitionEnd(oldTable, () => {\n oldTable.parentNode.removeChild(oldTable);\n this._removeContainerIfEmpty();\n });\n\n // Set the new table to start out of view (either left or right depending on the direction of the slide), and mark\n // it to transition on `left` changing\n newTable.classList.add('_coral-Calendar-table--transit');\n newTable.style.left = `${isLeft ? width : -width}px`;\n\n // When the transition is done, have the transition class lifted\n commons.transitionEnd(newTable, () => {\n newTable.classList.remove('_coral-Calendar-table--transit');\n this.host.appendChild(newTable);\n this._removeContainerIfEmpty();\n });\n\n // Force a redraw by querying the browser for its offsetWidth. Without this, the re-positioning code later on\n // would not lead to a transition. Note that there's no significance to the resulting value being assigned to\n // 'height'\n height = this.container.offsetWidth;\n\n // Set the `left` positions to transition to:\n oldTable.style.left = `${isLeft ? -width : width}px`;\n newTable.style.left = 0;\n\n this.oldTable = newTable;\n };\n}\n\n/** @ignore */\nconst ARRAYOF6 = [0, 0, 0, 0, 0, 0];\n\n/** @ignore */\nconst ARRAYOF7 = [0, 0, 0, 0, 0, 0, 0];\n\n/** @ignore */\nconst INTERNAL_FORMAT = 'YYYY-MM-DD';\n\n/** @ignore */\nconst timeUnit = {\n YEAR: 'year',\n MONTH: 'month',\n WEEK: 'week',\n DAY: 'day'\n};\n\nconst CLASSNAME = '_coral-Calendar';\n\n/**\n @class Coral.Calendar\n @classdesc A Calendar component that can be used as a date selection form field. Leverages {@link momentJS} if loaded\n on the page.\n @htmltag coral-calendar\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst Calendar = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Default value\n this._value = null;\n\n this._delegateEvents(commons.extend(this._events, {\n 'click ._coral-Calendar-nextMonth,._coral-Calendar-prevMonth': '_onNextOrPreviousMonthClick',\n 'click ._coral-Calendar-body ._coral-Calendar-date': '_onDayClick',\n 'capture:focus ._coral-Calendar-body': '_onBodyFocus',\n 'mousedown ._coral-Calendar-body ._coral-Calendar-date': '_onDayMouseDown',\n 'key:up ._coral-Calendar-body': '_onUpKey',\n 'key:right ._coral-Calendar-body': '_onRightKey',\n 'key:down ._coral-Calendar-body': '_onDownKey',\n 'key:left ._coral-Calendar-body': '_onLeftKey',\n 'key:home ._coral-Calendar-body': '_onHomeOrEndKey',\n 'key:end ._coral-Calendar-body': '_onHomeOrEndKey',\n 'key:pageup': '_onPageUpKey',\n 'key:pagedown': '_onPageDownKey',\n\n // On OSX we use Command+Page Up\n 'key:meta+pageup': '_onCtrlPageUpKey',\n // On OSX we use Command+Page Down\n 'key:meta+pagedown': '_onCtrlPageDownKey',\n // On Windows, we use CTRL+Page Up\n 'key:ctrl+pageup': '_onCtrlPageUpKey',\n // On Windows, we use CTRL+Page Down\n 'key:ctrl+pagedown': '_onCtrlPageDownKey',\n\n // Use alt+pageup/alt+pagedown and shift+pageup/shift+pagedown to jump by year\n 'key:alt+pageup': '_onCtrlPageUpKey',\n 'key:alt+pagedown': '_onCtrlPageDownKey',\n 'key:shift+pageup': '_onCtrlPageUpKey',\n 'key:shift+pagedown': '_onCtrlPageDownKey',\n\n 'key:enter ._coral-Calendar-body': '_onEnterKey',\n 'key:return ._coral-Calendar-body': '_onEnterKey',\n 'key:space ._coral-Calendar-body': '_onEnterKey'\n }));\n\n // Prepare templates\n this._elements = {};\n calendar.call(this._elements, {commons, i18n, Icon});\n\n // Pre-define labellable element\n this._labellableElement = this;\n\n // Internal keeper of the month that is currently on display.\n this._cursor = null;\n\n // Internal keeper for the id of the currently focused date cell or the cell that would receive focus when the\n // calendar body receives focus.\n this._activeDescendant = null;\n this._animator = new TableAnimator(this._elements.body);\n }\n\n /**\n Defines the start day for the week, 0 = Sunday, 1 = Monday etc., as depicted on the calendar days grid.\n\n @type {Number}\n @default 0\n @htmlattribute startday\n */\n get startDay() {\n if (this._startDay) {\n return this._startDay;\n }\n\n if (typeof DateTime.Moment.localeData(i18n.locale).firstDayOfWeek !== 'undefined') {\n return DateTime.Moment.localeData(i18n.locale).firstDayOfWeek();\n }\n\n return 0;\n }\n\n set startDay(value) {\n value = transform.number(value);\n if (value >= 0 && value < 7) {\n this._startDay = value;\n\n this._renderCalendar();\n }\n }\n\n /**\n The format used to display the current month and year.\n 'MMMM YYYY' is supported by default. Include momentjs to support additional format string options see\n http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"MMMM YYYY\"\n @htmlattribute headerformat\n */\n get headerFormat() {\n return this._headerFormat || 'MMMM YYYY';\n }\n\n set headerFormat(value) {\n this._headerFormat = transform.string(value);\n this._renderCalendar();\n }\n\n /**\n The minimal selectable date in the Calendar view. When passed a string, it needs to be 'YYYY-MM-DD' formatted.\n\n @type {String|Date}\n @default null\n @htmlattribute min\n */\n get min() {\n return this._min ? this._min.toDate() : null;\n }\n\n set min(value) {\n value = toMoment(value, this.valueFormat);\n\n if (validateAsChangedAndValidMoment(value, this._min)) {\n this._min = value;\n this._renderCalendar();\n }\n }\n\n /**\n The max selectable date in the Calendar view. When passed a string, it needs to be 'YYYY-MM-DD'\n formatted.\n\n @type {String|Date}\n @default null\n @htmlattribute max\n */\n get max() {\n return this._max ? this._max.toDate() : null;\n }\n\n set max(value) {\n value = toMoment(value, this.valueFormat);\n\n if (validateAsChangedAndValidMoment(value, this._max)) {\n this._max = value;\n this._renderCalendar();\n }\n }\n\n /**\n The format to use on expressing the selected date as a string on the value attribute.\n 'YYYY-MM-DD' is supported by default. Include momentjs to support additional format string options see\n http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"YYYY-MM-DD\"\n @htmlattribute valueformat\n @htmlattributereflected\n */\n get valueFormat() {\n return this._valueFormat || INTERNAL_FORMAT;\n }\n\n set valueFormat(value) {\n value = transform.string(value);\n\n const setValueFormat = (newValue) => {\n this._valueFormat = newValue;\n this._reflectAttribute('valueformat', this._valueFormat);\n };\n\n // Once the valueFormat is set, we make sure the value is also correct\n if (!this._valueFormat && this._originalValue) {\n setValueFormat(value);\n this.value = this._originalValue;\n }\n else {\n setValueFormat(value);\n this._elements.input.value = this.value;\n }\n }\n\n /**\n The value returned, or set, as a Date. If the value is '' it will return null.\n\n @type {Date}\n @default null\n */\n get valueAsDate() {\n return this._value ? this._value.toDate() : null;\n }\n\n set valueAsDate(value) {\n if (value instanceof Date) {\n this._valueAsDate = new DateTime.Moment(value);\n this.value = this._valueAsDate;\n }\n else {\n this._valueAsDate = null;\n this.value = '';\n }\n }\n\n /**\n The current value. When set to 'today', the value is coerced into the clients local date expressed as string\n formatted in accordance to the set valueFormat.\n\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n return this._value ? this._value.format(this.valueFormat) : '';\n }\n\n set value(value) {\n // This is used to change the value if valueformat is also set but afterwards\n this._originalValue = value;\n\n value = toMoment(value, this.valueFormat);\n\n if (validateAsChangedAndValidMoment(value, this._value)) {\n this._value = value;\n this._elements.input.value = this.value;\n\n // resets the view cursor, so the selected month will be in view\n this._cursor = null;\n\n this._renderCalendar();\n this.required = this.required;\n }\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.input.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.input.name = value;\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this.classList.toggle('is-required', this._required && this._value === null);\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this._elements.prev.disabled = this._disabled;\n this._elements.next.disabled = this._disabled;\n this._elements.body[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this._elements.body[this._disabled ? 'removeAttribute' : 'setAttribute']('tabindex', '0');\n\n this._renderCalendar();\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n this._renderCalendar();\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.prev.disabled = this._readOnly;\n this._elements.next.disabled = this._readOnly;\n this._elements.body[this._readOnly ? 'removeAttribute' : 'setAttribute']('tabindex', '0');\n this.classList.toggle('is-readOnly', this._readOnly);\n }\n\n /** @ignore */\n _renderCalendar(slide) {\n const cursor = this._requireCursor();\n const displayYear = cursor.year();\n const displayMonth = cursor.month();\n const oldTable = this._animator.oldTable;\n\n this._elements.heading.innerHTML = new DateTime.Moment([displayYear, displayMonth, 1]).format(this.headerFormat);\n\n const newTable = this._renderTable(displayYear, displayMonth + 1);\n\n if (oldTable) {\n commons.transitionEnd(newTable, () => {\n this._setActiveDescendant();\n });\n }\n\n this._animator.slide(newTable, slide);\n\n const el = this._elements.body.querySelector('.is-selected');\n\n // This will be overwritten later if there is any other function setting the attribute\n this._activeDescendant = el ? el.id : null;\n\n this._setActiveDescendant();\n }\n\n /**\n Returns true if moment specified is before min.\n\n @param {moment} currentMoment\n A moment to test.\n @param {String} unit\n Year, Month, Week, Day\n @returns {Boolean}\n true if moment specified is before min\n\n @ignore\n */\n _isBeforeMin(currentMoment, unit) {\n const min = this.min ? new DateTime.Moment(this.min) : null;\n return min && currentMoment.isBefore(min, unit);\n }\n\n /**\n Returns true if moment specified is after max.\n\n @param {moment} currentMoment\n A moment to test.\n @param {String} unit\n Year, Month, Week, Day\n @returns {Boolean}\n true if moment specified is after max\n\n @ignore\n */\n _isAfterMax(currentMoment, unit) {\n const max = this.max ? new DateTime.Moment(this.max) : null;\n return max && currentMoment.isAfter(max, unit);\n }\n\n /**\n Returns true if moment specified is greater than or equal to min and less than or equal to max.\n\n @param {moment} currentMoment\n A moment to test.\n @param {String} unit\n Year, Month, Week, Day\n @returns {Boolean}\n true if moment specified falls within min/max date range.\n\n @ignore\n */\n _isInRange(currentMoment, unit) {\n return !(this._isBeforeMin(currentMoment, unit) || this._isAfterMax(currentMoment, unit));\n }\n\n /**\n Updates the aria-activedescendant property for the calendar grid to communicate the currently focused date, or the\n date that should get focus when the grid receives focus, to assistive technology.\n\n @ignore\n */\n _setActiveDescendant() {\n let el;\n\n const isActiveDescendantMissing = () => !this._activeDescendant || !this._elements.body.querySelector(`#${this._activeDescendant} [data-date]`);\n\n if (isActiveDescendantMissing()) {\n this._activeDescendant = null;\n\n el = this._elements.body.querySelector('.is-selected');\n this._activeDescendant = el && el.id;\n\n if (isActiveDescendantMissing()) {\n const currentMoment = this._value;\n\n if (currentMoment) {\n const dates = this._elements.body.querySelectorAll('[data-date]');\n\n if (this._isBeforeMin(currentMoment)) {\n el = dates[0];\n }\n else if (this._isAfterMax(currentMoment)) {\n el = dates.length ? dates[dates.length - 1] : null;\n }\n }\n else {\n el = this._elements.body.querySelector('.is-focused') || this._elements.body.querySelector('.is-today');\n }\n\n if (el) {\n this._activeDescendant = el.parentElement.id;\n }\n }\n }\n\n el = this._elements.body.querySelector('.is-focused');\n if (el) {\n el.classList.remove('is-focused');\n }\n\n this._elements.body[this._activeDescendant ? 'setAttribute' : 'removeAttribute']('aria-activedescendant', this._activeDescendant);\n\n this._updateTableCaption();\n\n if (!this._activeDescendant) {\n return;\n }\n\n el = document.getElementById(this._activeDescendant);\n\n if (!el) {\n return;\n }\n\n const newTable = this.querySelector('._coral-Calendar-table--transit');\n const isTransitioning = newTable !== null;\n\n if (isTransitioning) {\n window.requestAnimationFrame(() => {\n el.querySelector('._coral-Calendar-date').classList.add('is-focused');\n });\n }\n else {\n // Focus the selected date\n el.querySelector('._coral-Calendar-date').classList.add('is-focused');\n }\n }\n\n /**\n Updates the table caption which serves as a live region to announce the currently focused date to assistive\n technology, improving compatibility across operating systems, browsers and screen readers.\n\n @ignore\n */\n _updateTableCaption() {\n const caption = this._elements.body.querySelector('caption');\n\n if (!caption) {\n return;\n }\n\n if (caption.firstChild) {\n caption.removeChild(caption.firstChild);\n }\n if (this._activeDescendant) {\n const activeDescendant = this._elements.body.querySelector(`#${this._activeDescendant}`);\n const captionText = document.createTextNode(activeDescendant.getAttribute('title'));\n caption.appendChild(captionText);\n }\n }\n\n /** @ignore */\n _renderTable(year, month) {\n const firstDate = new DateTime.Moment([year, month - 1, 1]);\n let monthStartsAt = (firstDate.day() - this.startDay) % 7;\n const dateLocal = this._value ? this._value.clone().startOf('day') : null;\n\n if (monthStartsAt < 0) {\n monthStartsAt += 7;\n }\n\n const data = {\n i18n: i18n,\n commons: commons,\n // eslint-disable-next-line no-unused-vars\n dayNames: ARRAYOF7.map((currentIndex, index) => {\n const dayMoment = new DateTime.Moment().day((index + this.startDay) % 7);\n return {\n dayAbbr: dayMoment.format('dd'),\n dayFullName: dayMoment.format('dddd')\n };\n }, this),\n\n // eslint-disable-next-line no-unused-vars, arrow-body-style\n weeks: ARRAYOF6.map((currentWeekIndex, weekIndex) => {\n // eslint-disable-next-line no-unused-vars\n return ARRAYOF7.map((currentDayIndex, dayIndex) => {\n const result = {};\n const cssClass = this.disabled ? ['is-disabled'] : [];\n let ariaSelected = false;\n let ariaInvalid = false;\n const day = weekIndex * 7 + dayIndex - monthStartsAt;\n const cursor = new DateTime.Moment([year, month - 1]);\n // we use add() since 'day' could be a negative value\n cursor.add(day, 'days');\n\n const isCurrentMonth = cursor.month() + 1 === parseFloat(month);\n const dayOfWeek = new DateTime.Moment().day((dayIndex + this.startDay) % 7).format('dddd');\n const isToday = cursor.isSame(new DateTime.Moment(), 'day');\n\n const cursorLocal = cursor.clone().startOf('day');\n\n if (isToday) {\n cssClass.push('is-today');\n }\n\n if (dateLocal && cursorLocal.isSame(dateLocal, 'day')) {\n ariaSelected = true;\n cssClass.push('is-selected');\n if (this.invalid) {\n ariaInvalid = true;\n cssClass.push('is-invalid');\n }\n }\n\n if (isCurrentMonth) {\n cssClass.push('is-currentMonth');\n if (!this.disabled && isDateInRange(cursor, this.min, this.max)) {\n result.dateAttr = cursorLocal.format(INTERNAL_FORMAT);\n result.weekIndex = cursor.week();\n result.formattedDate = cursor.format('LL');\n }\n else {\n cssClass.push('is-disabled');\n }\n }\n else {\n cssClass.push('is-outsideMonth');\n }\n\n result.isDisabled = this.disabled || !result.dateAttr;\n result.dateText = cursor.date();\n result.cssClass = cssClass.join(' ');\n result.isToday = isToday;\n result.ariaSelected = ariaSelected;\n result.ariaInvalid = ariaInvalid;\n result.dateLabel = dayOfWeek;\n result.weekIndex = cursor.week();\n\n return result;\n }, this);\n }, this)\n };\n\n const handles = {};\n table.call(handles, data);\n\n return handles.table;\n }\n\n /** @ignore */\n _requireCursor() {\n let cursor = this._cursor;\n if (!cursor || !cursor.isValid()) {\n // When its unknown what month we should be showing, use the set date. If that is not available, use 'today'\n cursor = (this._value ? this._value.clone().startOf('day') : new DateTime.Moment()).startOf('month');\n this._cursor = cursor;\n }\n\n return cursor;\n }\n\n /**\n Navigate to previous or next timeUnit interval.\n\n @param {String} unit\n Year, Month, Week, Day\n @param {Boolean} isNext\n Whether to navigate forward or backward.\n\n @private\n */\n _gotoPreviousOrNextTimeUnit(unit, isNext) {\n const direction = isNext ? 'left' : 'right';\n const operator = isNext ? 'add' : 'subtract';\n const el = this._elements.body.querySelector('._coral-Calendar-date.is-focused');\n let currentActive;\n let currentMoment;\n let newMoment;\n let difference;\n\n if (el) {\n currentActive = el.dataset.date;\n currentMoment = new DateTime.Moment(currentActive);\n newMoment = currentMoment[operator](1, unit);\n\n // make sure new moment is in range before transitioning\n if (!this._isInRange(newMoment)) {\n // advance to closest value in range\n if (this._isBeforeMin(newMoment)) {\n newMoment = this.min;\n }\n else if (this._isAfterMax(newMoment)) {\n newMoment = this.max;\n }\n newMoment = new DateTime.Moment(newMoment);\n }\n difference = Math.abs(new DateTime.Moment(currentActive).diff(newMoment, 'days'));\n this._getToNewMoment(direction, operator, difference);\n this._setActiveDescendant();\n }\n else {\n this._requireCursor();\n\n // if cursor is out of range\n if (!this._isInRange(this._cursor)) {\n // advance to closest value in range\n if (this._isBeforeMin(this._cursor)) {\n newMoment = this.min;\n }\n else if (this._isAfterMax(this._cursor)) {\n newMoment = this.max;\n }\n newMoment = new DateTime.Moment(newMoment);\n difference = Math.abs(this._cursor.diff(newMoment, 'days'));\n this._getToNewMoment(direction, operator, difference);\n this._setActiveDescendant();\n return;\n }\n\n this._cursor[operator](1, unit);\n this._renderCalendar(direction);\n }\n }\n\n /**\n Checks if the Calendar is valid or not. This is done by checking that the current value is between the\n provided min and max values. This check is only performed on user interaction.\n @ignore\n */\n _validateCalendar() {\n const isInvalid = !(this._value === null || isDateInRange(this._value, this.min, this.max));\n\n if (this.invalid !== isInvalid) {\n this.invalid = isInvalid;\n }\n }\n\n /** @ignore */\n _onNextOrPreviousMonthClick(event) {\n event.preventDefault();\n\n this._gotoPreviousOrNextTimeUnit(\n event.altKey || event.metaKey || event.shiftKey ? timeUnit.YEAR : timeUnit.MONTH,\n this._elements.next === event.matchedTarget\n );\n event.matchedTarget.focus();\n this._validateCalendar();\n }\n\n /** @ignore */\n _getToNewMoment(direction, operator, difference) {\n const el = this._elements.body.querySelector('._coral-Calendar-date.is-focused');\n let currentActive;\n\n if (el) {\n currentActive = el.dataset.date;\n }\n else {\n this._requireCursor();\n currentActive = this._cursor.format(INTERNAL_FORMAT);\n }\n\n const currentMoment = new DateTime.Moment(currentActive);\n const currentMonth = currentMoment.month();\n const currentYear = currentMoment.year();\n const newMoment = currentMoment[operator](difference, 'days');\n const newMonth = newMoment.month();\n const newYear = newMoment.year();\n const newMomentValue = newMoment.format(INTERNAL_FORMAT);\n\n if (newMonth !== currentMonth) {\n this._requireCursor();\n this._cursor[operator](1, 'months');\n this._renderCalendar(direction);\n }\n else if (newMonth === currentMonth && newYear !== currentYear) {\n this._requireCursor();\n this._cursor[operator](1, 'years');\n this._renderCalendar(direction);\n }\n\n const dateQuery = `._coral-Calendar-date[data-date^=${JSON.stringify(newMomentValue)}]`;\n const newDescendant = this._elements.body.querySelector(dateQuery);\n if (newDescendant) {\n this._activeDescendant = newDescendant.parentNode.getAttribute('id');\n }\n }\n\n /** @ignore */\n _onDayMouseDown(event) {\n this._activeDescendant = event.target.parentNode.id;\n this._setActiveDescendant();\n this._elements.body.focus();\n this._validateCalendar();\n }\n\n /** @ignore */\n _onDayClick(event) {\n event.preventDefault();\n\n this._elements.body.focus();\n\n const date = new DateTime.Moment(event.target.dataset.date, INTERNAL_FORMAT);\n let dateLocal;\n\n // Carry over any user set time info\n if (this._value) {\n dateLocal = this._value.clone();\n }\n\n // Set attribute so a change event will be triggered if the user has selected a different date\n if (validateAsChangedAndValidMoment(date, dateLocal)) {\n this.value = date;\n this.trigger('change');\n }\n\n this._validateCalendar();\n }\n\n /** @ignore */\n _onEnterKey(event) {\n event.preventDefault();\n\n const el = this._elements.body.querySelector('._coral-Calendar-date.is-focused');\n\n if (el) {\n el.click();\n }\n\n this._validateCalendar();\n }\n\n /** @ignore */\n _onUpKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._gotoPreviousOrNextTimeUnit(timeUnit.WEEK, false);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onDownKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._gotoPreviousOrNextTimeUnit(timeUnit.WEEK, true);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onRightKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._gotoPreviousOrNextTimeUnit(timeUnit.DAY, true);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onLeftKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n this._gotoPreviousOrNextTimeUnit(timeUnit.DAY, false);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onHomeOrEndKey(event) {\n event.preventDefault();\n event.stopPropagation();\n const isHome = event.keyCode === Keys.keyToCode('home');\n const direction = '';\n const operator = isHome ? 'subtract' : 'add';\n const el = this._elements.body.querySelector('._coral-Calendar-date.is-focused');\n\n if (el) {\n const currentActive = el.dataset.date;\n const currentMoment = new DateTime.Moment(currentActive);\n const difference = isHome ? currentMoment.date() - 1 : currentMoment.daysInMonth() - currentMoment.date();\n this._getToNewMoment(direction, operator, difference);\n this._setActiveDescendant();\n }\n\n this._validateCalendar();\n }\n\n /** @ignore */\n _onPageDownKey(event) {\n event.preventDefault();\n event.stopPropagation();\n this._gotoPreviousOrNextTimeUnit(timeUnit.MONTH, true);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onPageUpKey(event) {\n event.preventDefault();\n event.stopPropagation();\n this._gotoPreviousOrNextTimeUnit(timeUnit.MONTH, false);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onCtrlPageDownKey(event) {\n event.preventDefault();\n event.stopPropagation();\n this._gotoPreviousOrNextTimeUnit(timeUnit.YEAR, true);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onCtrlPageUpKey(event) {\n event.preventDefault();\n event.stopPropagation();\n this._gotoPreviousOrNextTimeUnit(timeUnit.YEAR, false);\n this._validateCalendar();\n }\n\n /** @ignore */\n _onBodyFocus() {\n if (Boolean(this._value)) {\n this._setActiveDescendant();\n this._validateCalendar();\n }\n }\n\n /**\n sets focus to appropriate descendant\n */\n focus() {\n const focusedElement = this._elements.body.querySelector('.is-focused');\n if (focusedElement !== document.activeElement && !this.disabled) {\n this._setActiveDescendant();\n this._elements.body.focus();\n }\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n startday: 'startDay',\n headerformat: 'headerFormat',\n valueformat: 'valueFormat'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'startday',\n 'headerformat',\n 'min',\n 'max',\n 'valueformat',\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this.setAttribute('role', 'group');\n\n // Default reflected attribute\n if (!this._valueFormat) {\n this.valueFormat = INTERNAL_FORMAT;\n }\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.input);\n frag.appendChild(this._elements.header);\n frag.appendChild(this._elements.body);\n\n /// Clean Up (cloneNode support)\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n\n this.appendChild(frag);\n\n // Render the calendar body if it's empty\n if (!this._elements.body.firstElementChild) {\n this._renderCalendar();\n }\n }\n});\n\nexport default Calendar;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 517, "kind": "function", "name": "isDateInRange", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~isDateInRange", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 25, "ignore": true, "params": [ { "name": "date", "types": [ "*" ] }, { "name": "startDate", "types": [ "*" ] }, { "name": "endDate", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 518, "kind": "function", "name": "toMoment", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~toMoment", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 44, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] }, { "name": "format", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 519, "kind": "function", "name": "validateAsChangedAndValidMoment", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~validateAsChangedAndValidMoment", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 58, "ignore": true, "params": [ { "name": "newValue", "types": [ "*" ] }, { "name": "oldValue", "types": [ "*" ] } ], "return": { "types": [ "boolean" ] } }, { "__docId__": 520, "kind": "function", "name": "TableAnimator", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~TableAnimator", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Slides in new month tables, slides out old tables, and then cleans up the leftovers when it is done.", "lineNumber": 75, "ignore": true, "params": [ { "name": "host", "types": [ "*" ] } ], "return": null }, { "__docId__": 521, "kind": "variable", "name": "ARRAYOF6", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~ARRAYOF6", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 157, "ignore": true, "type": { "types": [ "number[]" ] } }, { "__docId__": 522, "kind": "variable", "name": "ARRAYOF7", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~ARRAYOF7", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 160, "ignore": true, "type": { "types": [ "number[]" ] } }, { "__docId__": 523, "kind": "variable", "name": "INTERNAL_FORMAT", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~INTERNAL_FORMAT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 163, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 524, "kind": "variable", "name": "timeUnit", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~timeUnit", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 166, "ignore": true, "type": { "types": [ "{\"YEAR\": string, \"MONTH\": string, \"WEEK\": string, \"DAY\": string}" ] } }, { "__docId__": 525, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 173, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 526, "kind": "variable", "name": "Calendar", "memberof": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js", "static": true, "longname": "coral-spectrum/coral-component-calendar/src/scripts/Calendar.js~Calendar", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Calendar}", "description": "A Calendar component that can be used as a date selection form field. Leverages {@link momentJS} if loaded\non the page.", "lineNumber": 184, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Calendar" }, { "tagName": "@classdesc", "tagValue": "A Calendar component that can be used as a date selection form field. Leverages {@link momentJS} if loaded\non the page." }, { "tagName": "@htmltag", "tagValue": "coral-calendar" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Calendar();" ], "see": [ "../examples/#calendar" ], "type": { "types": [ "*" ] } }, { "__docId__": 527, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/Card.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport base from '../templates/base';\nimport {commons, transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst COLOR_HINT_REG_EXP = /^#[0-9A-F]{6}$/i;\n\n/**\n Enumeration for {@link Card} variants.\n\n @typedef {Object} CardVariantEnum\n\n @property {String} DEFAULT\n Default card variant that shows the asset, overlay and content in their default positions.\n @property {String} QUIET\n Quiet card variant that shows the asset, overlay and content in their default positions.\n @property {String} CONDENSED\n Condensed card variant where the overlay is hidden and the content is shown over the image.\n @property {String} INVERTED\n Condensed card variant where the overlay is hidden and the content is shown over the image with a dark style.\n @property {String} ASSET\n Card variant where only the asset is shown.\n */\nconst variant = {\n DEFAULT: 'default',\n QUIET: 'quiet',\n CONDENSED: 'condensed',\n INVERTED: 'inverted',\n ASSET: 'asset'\n};\n\n// the card's base classname\nconst CLASSNAME = '_coral-Card';\n\n// builds a string containing all possible variant classnames. this will be used to remove classnames when the variant\n// changes\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantValue in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);\n}\n\n/**\n @class Coral.Card\n @classdesc A Card component to display content in different variations.\n @htmltag coral-card\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Card = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {\n // Fetch or create the content zone elements\n asset: this.querySelector('coral-card-asset') || document.createElement('coral-card-asset'),\n content: this.querySelector('coral-card-content') || document.createElement('coral-card-content'),\n info: this.querySelector('coral-card-info') || document.createElement('coral-card-info'),\n overlay: this.querySelector('coral-card-overlay') || document.createElement('coral-card-overlay'),\n title : this.querySelector('coral-card-title') || document.createElement('coral-card-title'),\n };\n base.call(this._elements);\n\n // Events\n this._delegateEvents({\n 'capture:load coral-card-asset img': '_onLoad'\n });\n }\n\n /**\n The Asset of the card.\n\n @type {CardAsset}\n @contentzone\n */\n get asset() {\n return this._getContentZone(this._elements.asset);\n }\n\n set asset(value) {\n this._setContentZone('asset', value, {\n handle: 'asset',\n tagName: 'coral-card-asset',\n insert: function (asset) {\n this.insertBefore(asset, this.info || this._elements.wrapper || null);\n }\n });\n }\n\n /**\n Hints the height of the asset that is going to be loaded. This prepares the size so that when the image is\n loaded no reflow is triggered. Both assetHeight and assetWidth need to be specified\n for this feature to take effect.\n\n @type {String}\n @default \"\"\n @htmlattribute assetheight\n */\n get assetHeight() {\n return this._assetHeight || '';\n }\n\n set assetHeight(value) {\n this._assetHeight = transform.number(value);\n\n // Avoid a forced reflow by executing following in the next frame\n window.requestAnimationFrame(() => {\n // both hint dimensions need to be set in order to use this feature\n if (!this._loaded && this._elements.asset && this.assetWidth && this._assetHeight) {\n // gets the width without the border of the card\n const clientRect = this.getBoundingClientRect();\n const width = clientRect.right - clientRect.left;\n // calculates the image ratio used to resize the height\n const ratio = width / this.assetWidth;\n\n // the image is considered \"low resolution\"\n // @todo: check this after removal of lowResolution\n if (ratio > 1) {\n // 32 = $card-asset-lowResolution-padding * 2\n this._elements.asset.style.height = `${this._assetHeight + 32}px`;\n }\n // for non-low resolution images, condensed and inverted cards do not require the height to be set\n else if (this.variant !== variant.CONDENSED && this.variant !== variant.INVERTED) {\n this._elements.asset.style.height = `${ratio * this._assetHeight}px`;\n }\n }\n });\n }\n\n /**\n Hints the width of the asset that is going to be loaded. This prepares the size so that when the image is\n loaded no reflow is triggered. Both assetHeight and assetWidth need to be specified\n for this feature to take effect.\n\n @type {String}\n @default \"\"\n @htmlattribute assetwidth\n */\n get assetWidth() {\n return this._assetWidth || '';\n }\n\n set assetWidth(value) {\n this._assetWidth = transform.number(value);\n }\n\n /**\n @type {String}\n @default \"\"\n @htmlattribute colorhint\n */\n get colorHint() {\n return this._colorHint || '';\n }\n\n set colorHint(value) {\n if (COLOR_HINT_REG_EXP.test(value)) {\n this._colorHint = value;\n\n // if the image is already loaded we do not add the color hint to the asset\n if (!this._loaded) {\n this._elements.asset.style['background-color'] = this._colorHint;\n }\n }\n }\n\n /**\n The Content of the card.\n\n @type {CardContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-card-content',\n insert: function (content) {\n // Ensure title comes first\n const title = content.querySelector('coral-card-title');\n if (title) {\n content.insertBefore(title, content.firstChild);\n }\n\n this._elements.wrapper.insertBefore(content, this.overlay || null);\n }\n });\n }\n\n /**\n The information area of the card, which is placed over all the content. It is typically used for alerts.\n\n @type {CardInfo}\n @contentzone\n */\n get info() {\n return this._getContentZone(this._elements.info);\n }\n\n set info(value) {\n this._setContentZone('info', value, {\n handle: 'info',\n tagName: 'coral-card-info',\n insert: function (info) {\n this.appendChild(info);\n }\n });\n }\n\n /**\n Fixes the width of the card. By default cards will take the width of their containers allowing them to interact\n nicely with grids. Whenever they are used standalone fixing the width might be desired.\n\n @type {Boolean}\n @default false\n @htmlattribute fixedwidth\n @htmlattributereflected\n */\n get fixedWidth() {\n return this._fixedWidth || false;\n }\n\n set fixedWidth(value) {\n this._fixedWidth = transform.booleanAttr(value);\n this._reflectAttribute('fixedwidth', this._fixedWidth);\n\n this.classList.toggle(`${CLASSNAME}--fixedWidth`, this._fixedWidth);\n }\n\n /**\n The Overlay of the card.\n\n @type {CardOverlay}\n @contentzone\n */\n get overlay() {\n return this._getContentZone(this._elements.overlay);\n }\n\n set overlay(value) {\n this._setContentZone('overlay', value, {\n handle: 'overlay',\n tagName: 'coral-card-overlay',\n insert: function (overlay) {\n this._elements.wrapper.appendChild(overlay);\n }\n });\n }\n\n /**\n Whether the card is stacked or not. This is used to represent several assets grouped together.\n\n @type {Boolean}\n @default false\n @htmlattribute stacked\n @htmlattributereflected\n */\n get stacked() {\n return this._stacked || false;\n }\n\n set stacked(value) {\n this._stacked = transform.booleanAttr(value);\n this._reflectAttribute('stacked', this._stacked);\n\n this.classList.toggle(`${CLASSNAME}--stacked`, this._stacked);\n }\n\n /**\n The card's variant. It determines which sections of the Card and in which position they are shown.\n See {@link CardVariantEnum}.\n\n @type {String}\n @default CardVariantEnum.DEFAULT\n @htmlattribute variant\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n this.classList.remove(...ALL_VARIANT_CLASSES);\n\n if (this._variant !== variant.DEFAULT) {\n this.classList.add(`${CLASSNAME}--${this._variant}`);\n }\n\n this.assetHeight = this.assetHeight;\n }\n\n /** @ignore */\n _onLoad(event) {\n // @todo fix me for multiple images\n // sets the image as loaded\n this._loaded = true;\n\n // removes the height style since the asset has been completely loaded\n this._elements.asset.style.height = '';\n\n // enables the transition\n event.target.classList.remove('is-loading');\n }\n\n get _contentZones() {\n return {\n 'coral-card-asset': 'asset',\n 'coral-card-content': 'content',\n 'coral-card-info': 'info',\n 'coral-card-overlay': 'overlay'\n };\n }\n\n /**\n Returns {@link Card} variants.\n\n @return {CardVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n assetwidth: 'assetWidth',\n assetheight: 'assetHeight',\n colorhint: 'colorHint',\n fixedwidth: 'fixedWidth'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'assetwidth',\n 'assetheight',\n 'colorhint',\n 'fixedwidth',\n 'variant',\n 'stacked'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n\n const content = this._elements.content;\n const asset = this._elements.asset;\n const title = this._elements.title;\n const titleId = commons.getUID();\n\n // Set title attributes after a frame to allow any inner text changes to be applied first\n commons.nextFrame(() => {\n if (title) {\n setTimeout(function() {\n title.setAttribute(\"title\", title.innerText);\n title.setAttribute(\"aria-label\", title.innerText);\n title.setAttribute(\"id\", titleId);\n }, 1);\n }\n });\n\n // Prepares images to be loaded nicely\n const images = asset.querySelectorAll('img');\n const imagesCount = images.length;\n for (let i = 0 ; i < imagesCount ; i++) {\n const image = images[i];\n if (!image.hasAttribute(\"alt\")) {\n image.setAttribute(\"alt\", \"\");\n }\n if (!image.complete) {\n image.classList.add('is-loading');\n }\n }\n\n for (const contentZone in this._contentZones) {\n const element = this._elements[this._contentZones[contentZone]];\n // Remove it so we can process children\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n }\n\n // Moves everything into the main content zone\n while (this.firstChild) {\n const child = this.firstChild;\n // Removes the empty spaces\n if (child.nodeType === Node.TEXT_NODE && child.textContent.trim() !== '' ||\n child.nodeType === Node.ELEMENT_NODE && child.getAttribute('handle') !== 'wrapper') {\n // Add non-template elements to the content\n content.appendChild(child);\n }\n // Remove anything else element\n else {\n this.removeChild(child);\n }\n }\n\n // Assign the content zones so the insert functions will be called\n this.overlay = this._elements.overlay;\n this.content = content;\n this.info = this._elements.info;\n\n this.appendChild(this._elements.wrapper);\n\n // The 'asset' setter knows to insert the element just before the wrapper node.\n this.asset = asset;\n\n // In case a lot of alerts are added, they will not overflow the card\n // Also check whether any alerts are available\n requestAnimationFrame(()=> {\n this.classList.toggle(`${CLASSNAME}--overflow`, this.info.childNodes.length && this.info.scrollHeight > this.clientHeight);\n });\n }\n});\n\nexport default Card;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/Card.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 528, "kind": "variable", "name": "COLOR_HINT_REG_EXP", "memberof": "coral-spectrum/coral-component-card/src/scripts/Card.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/Card.js~COLOR_HINT_REG_EXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 529, "kind": "typedef", "name": "CardVariantEnum", "memberof": "coral-spectrum/coral-component-card/src/scripts/Card.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/Card.js~CardVariantEnum", "access": "public", "description": "Enumeration for {@link Card} variants.", "lineNumber": 36, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "Default card variant that shows the asset, overlay and content in their default positions." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "Quiet card variant that shows the asset, overlay and content in their default positions." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "CONDENSED", "description": "Condensed card variant where the overlay is hidden and the content is shown over the image." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INVERTED", "description": "Condensed card variant where the overlay is hidden and the content is shown over the image with a dark style." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ASSET", "description": "Card variant where only the asset is shown." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CardVariantEnum" } }, { "__docId__": 530, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-card/src/scripts/Card.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/Card.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 45, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 531, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-card/src/scripts/Card.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/Card.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 49, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 532, "kind": "variable", "name": "Card", "memberof": "coral-spectrum/coral-component-card/src/scripts/Card.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/Card.js~Card", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card component to display content in different variations.", "lineNumber": 61, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card" }, { "tagName": "@classdesc", "tagValue": "A Card component to display content in different variations." }, { "tagName": "@htmltag", "tagValue": "coral-card" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Card();" ], "see": [ "../examples/#card" ], "type": { "types": [ "*" ] } }, { "__docId__": 533, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardAsset.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Asset\n @classdesc The Card Asset\n @htmltag coral-card-asset\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-asset');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardAsset.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 534, "kind": "function", "name": "CardAsset", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardAsset.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardAsset.js~CardAsset", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "The Card Asset", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Asset" }, { "tagName": "@classdesc", "tagValue": "The Card Asset" }, { "tagName": "@htmltag", "tagValue": "coral-card-asset" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Asset();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 535, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Content\n @classdesc The Card Content\n @htmltag coral-card-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 536, "kind": "function", "name": "CardContent", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardContent.js~CardContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "The Card Content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Content" }, { "tagName": "@classdesc", "tagValue": "The Card Content" }, { "tagName": "@htmltag", "tagValue": "coral-card-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Content();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 537, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardContext.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Context\n @classdesc A Card context component\n @htmltag coral-card-context\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-context');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardContext.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 538, "kind": "function", "name": "CardContext", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardContext.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardContext.js~CardContext", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card context component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Context" }, { "tagName": "@classdesc", "tagValue": "A Card context component" }, { "tagName": "@htmltag", "tagValue": "coral-card-context" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Context();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 539, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardDescription.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Description\n @classdesc A Card description component\n @htmltag coral-card-description\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-description');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardDescription.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 540, "kind": "function", "name": "CardDescription", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardDescription.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardDescription.js~CardDescription", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card description component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Description" }, { "tagName": "@classdesc", "tagValue": "A Card description component" }, { "tagName": "@htmltag", "tagValue": "coral-card-description" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Description();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 541, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardInfo.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Info\n @classdesc The Card Info\n @htmltag coral-card-info\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-info');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardInfo.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 542, "kind": "function", "name": "CardInfo", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardInfo.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardInfo.js~CardInfo", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "The Card Info", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Info" }, { "tagName": "@classdesc", "tagValue": "The Card Info" }, { "tagName": "@htmltag", "tagValue": "coral-card-info" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Info();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 543, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardOverlay.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Overlay\n @classdesc The Card Overlay\n @htmltag coral-card-overlay\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-overlay');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardOverlay.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 544, "kind": "function", "name": "CardOverlay", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardOverlay.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardOverlay.js~CardOverlay", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "The Card Overlay", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Overlay" }, { "tagName": "@classdesc", "tagValue": "The Card Overlay" }, { "tagName": "@htmltag", "tagValue": "coral-card-overlay" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Overlay();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 545, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardProperty.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {commons} from '../../../coral-utils';\nimport '../../../coral-component-icon';\nimport icon from '../templates/icon';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Card-property';\n\n/**\n @class Coral.Card.Property\n @classdesc A Card property component\n @htmltag coral-card-property\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CardProperty = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {\n content: this.querySelector('coral-card-property-content') || document.createElement('coral-card-property-content')\n };\n icon.call(this._elements);\n }\n\n /**\n The property's content zone\n\n @type {CardPropertyContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-card-property-content',\n insert: function (content) {\n this.appendChild(content);\n }\n });\n }\n\n /**\n Specifies the icon name used inside the property. See {@link Icon} for valid icon names.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n */\n get icon() {\n return this._elements.icon.icon;\n }\n\n set icon(value) {\n this._elements.icon.icon = value;\n\n // removes the icon element from the DOM since there is no valid icon. this causes the content to have the\n // correct styling\n if (this.icon === '') {\n this._elements.icon.remove();\n } else if (!this._elements.icon.parentNode) {\n this.insertBefore(this._elements.icon, this.firstChild);\n }\n }\n\n /**\n Specifies the alternative text to be used for the icon.\n\n @type {String}\n @default \"\"\n @htmlattribute iconalt\n */\n get iconAlt() {\n return this._elements.icon ? this._elements.icon.getAttribute('alt') : undefined;\n }\n\n set iconAlt(value) {\n this._elements.icon && this._elements.icon.setAttribute('alt', value);\n }\n\n /**\n Specifies the title attribute to be used for the icon.\n\n @type {String}\n @default \"\"\n @htmlattribute icontitle\n */\n get iconTitle() {\n return this._elements.icon ? this._elements.icon.getAttribute('title') : undefined;\n }\n\n set iconTitle(value) {\n this._elements.icon && this._elements.icon.setAttribute('title', value);\n }\n\n get _contentZones() {\n return {'coral-card-property-content': 'content'};\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n iconalt: 'iconAlt',\n icontitle: 'iconTitle',\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['icon', 'iconalt', 'icontitle']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME, 'coral-Body--small');\n\n // Create a fragment\n const frag = document.createDocumentFragment();\n\n // Render the main template\n if (this.icon) {\n frag.appendChild(this._elements.icon);\n }\n\n const content = this._elements.content;\n\n // Remove it so we can process children\n if (content.parentNode) {\n content.parentNode.removeChild(content);\n }\n\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.TEXT_NODE ||\n child.nodeType === Node.ELEMENT_NODE && child.getAttribute('handle') !== 'icon') {\n // Add non-template elements to the label\n content.appendChild(child);\n } else {\n this.removeChild(child);\n }\n }\n\n // Add the frag to the component\n this.appendChild(frag);\n\n // Assign the content zones, moving them into place in the process\n this.content = content;\n\n // Adjusting icon aria-label attribute as per coral-card-property title attribute\n\n var parentElement;\n if (this._elements && this._elements.icon) {\n parentElement = this._elements.icon.parentElement;\n if (parentElement !== null && parentElement.hasAttribute(\"title\")) {\n const iconParentTitle = parentElement.getAttribute(\"title\");\n this._elements.icon.setAttribute(\"aria-label\", iconParentTitle);\n }\n }\n \n }\n});\n\nexport default CardProperty;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardProperty.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 546, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardProperty.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardProperty.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 547, "kind": "variable", "name": "CardProperty", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardProperty.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardProperty.js~CardProperty", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card property component", "lineNumber": 28, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Property" }, { "tagName": "@classdesc", "tagValue": "A Card property component" }, { "tagName": "@htmltag", "tagValue": "coral-card-property" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Property();" ], "see": [ "../examples/#card" ], "type": { "types": [ "*" ] } }, { "__docId__": 548, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardPropertyContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Property.Content\n @classdesc A Card Property Content component\n @htmltag coral-card-property-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-property-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardPropertyContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 549, "kind": "function", "name": "CardPropertyContent", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardPropertyContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardPropertyContent.js~CardPropertyContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card Property Content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Property.Content" }, { "tagName": "@classdesc", "tagValue": "A Card Property Content component" }, { "tagName": "@htmltag", "tagValue": "coral-card-property-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Property.Content();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 550, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardPropertyList.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.Card.PropertyList\n @classdesc The Card PropertyList component\n @htmltag coral-card-propertylist\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CardPropertyList = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add('u-coral-clearFix');\n\n // Empty it if no items\n if (this.innerHTML.trim() === '') {\n this.textContent = '';\n }\n }\n});\n\nexport default CardPropertyList;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardPropertyList.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 551, "kind": "variable", "name": "CardPropertyList", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardPropertyList.js", "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardPropertyList.js~CardPropertyList", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "The Card PropertyList component", "lineNumber": 23, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.PropertyList" }, { "tagName": "@classdesc", "tagValue": "The Card PropertyList component" }, { "tagName": "@htmltag", "tagValue": "coral-card-propertylist" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.PropertyList();" ], "see": [ "../examples/#card" ], "type": { "types": [ "*" ] } }, { "__docId__": 552, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardSubtitle.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Subtitle\n @classdesc A Card sub title component\n @htmltag coral-card-subtitle\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-subtitle');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardSubtitle.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 553, "kind": "function", "name": "CardSubtitle", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardSubtitle.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardSubtitle.js~CardSubtitle", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card sub title component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Subtitle" }, { "tagName": "@classdesc", "tagValue": "A Card sub title component" }, { "tagName": "@htmltag", "tagValue": "coral-card-subtitle" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Subtitle();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 554, "kind": "file", "name": "coral-spectrum/coral-component-card/src/scripts/CardTitle.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Card.Title\n @classdesc A Card title component\n @htmltag coral-card-title\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-card-title');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-card/src/scripts/CardTitle.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 555, "kind": "function", "name": "CardTitle", "memberof": "coral-spectrum/coral-component-card/src/scripts/CardTitle.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-card/src/scripts/CardTitle.js~CardTitle", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Card}", "description": "A Card title component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Card.Title" }, { "tagName": "@classdesc", "tagValue": "A Card title component" }, { "tagName": "@htmltag", "tagValue": "coral-card-title" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Card.Title();" ], "see": [ "../examples/#card" ], "params": [] }, { "__docId__": 556, "kind": "file", "name": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {commons, transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-CharacterCount';\n\n/**\n Enumeration for {@link CharacterCount} targets.\n\n @typedef {Object} CharacterCountTargetEnum\n\n @property {String} PREVIOUS\n Relates the CharacterCount to the previous sibling.\n @property {String} NEXT\n Relates the CharacterCount to the next sibling.\n */\nconst target = {\n PREVIOUS: '_prev',\n NEXT: '_next'\n};\n\n/**\n @class Coral.CharacterCount\n @classdesc A CharacterCount component that indicates the remaining characters in a Textfield or Textarea.\n @htmltag coral-charactercount\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CharacterCount = Decorator(class extends BaseComponent(HTMLElement) {\n /**\n The target Textfield or Textarea for this component. It accepts values from {@link CharacterCountTargetEnum},\n as well as any DOM element or CSS selector.\n\n @type {HTMLElement|String}\n @default CharacterCountTargetEnum.PREVIOUS\n @htmlattribute target\n */\n get target() {\n return this._target || target.PREVIOUS;\n }\n\n set target(value) {\n if (typeof value === 'string' || value instanceof Node) {\n this._target = value;\n\n // Remove previous event listener\n if (this._targetEl) {\n this._targetEl.removeEventListener('input', this._refreshCharCount.bind(this));\n }\n\n // Get the target DOM element\n if (value === target.NEXT) {\n this._targetEl = this.nextElementSibling;\n } else if (value === target.PREVIOUS) {\n this._targetEl = this.previousElementSibling;\n } else if (typeof value === 'string') {\n this._targetEl = document.querySelector(value);\n } else {\n this._targetEl = value;\n }\n\n if (this._targetEl) {\n this._targetEl.addEventListener('input', this._refreshCharCount.bind(this));\n\n // Try to get maxlength from target element\n if (this._targetEl.getAttribute('maxlength')) {\n this.maxLength = this._targetEl.getAttribute('maxlength');\n }\n }\n }\n }\n\n /**\n Maximum character length for the TextField/TextArea (will be read from target field markup if able).\n\n @type {Number}\n @default null\n @htmlattribute maxlength\n @htmlattributereflected\n */\n get maxLength() {\n return this._maxLength || null;\n }\n\n set maxLength(value) {\n this._maxLength = transform.number(value);\n this._reflectAttribute('maxlength', this._maxLength);\n\n this._refreshCharCount();\n }\n\n /** @ignore */\n _getCharCount() {\n let elementLength = 0;\n if (this._targetEl && this._targetEl.value) {\n elementLength = this._targetEl.value.length;\n }\n\n return this._maxLength ? this._maxLength - elementLength : elementLength;\n }\n\n /** @ignore */\n _refreshCharCount() {\n const currentCount = this._getCharCount();\n /** @ignore */\n this.innerHTML = currentCount;\n const isMaxExceeded = currentCount < 0;\n if (this._targetEl) {\n this._targetEl.classList.toggle('is-invalid', isMaxExceeded);\n this.classList.toggle('is-invalid', isMaxExceeded);\n }\n }\n\n /**\n Returns {@link CharacterCount} target options.\n\n @return {CharacterCountTargetEnum}\n */\n static get target() {\n return target;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n maxlength: 'maxLength'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['target', 'maxlength']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME, 'coral-Body--S');\n\n // Set defaults\n this.target = this.target;\n\n // Refresh once connected\n this._refreshCharCount();\n }\n});\n\nexport default CharacterCount;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 557, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js", "static": true, "longname": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 558, "kind": "typedef", "name": "CharacterCountTargetEnum", "memberof": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js", "static": true, "longname": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js~CharacterCountTargetEnum", "access": "public", "description": "Enumeration for {@link CharacterCount} targets.", "lineNumber": 29, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "PREVIOUS", "description": "Relates the CharacterCount to the previous sibling." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "NEXT", "description": "Relates the CharacterCount to the next sibling." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CharacterCountTargetEnum" } }, { "__docId__": 559, "kind": "variable", "name": "CharacterCount", "memberof": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js", "static": true, "longname": "coral-spectrum/coral-component-charactercount/src/scripts/CharacterCount.js~CharacterCount", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CharacterCount}", "description": "A CharacterCount component that indicates the remaining characters in a Textfield or Textarea.", "lineNumber": 41, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CharacterCount" }, { "tagName": "@classdesc", "tagValue": "A CharacterCount component that indicates the remaining characters in a Textfield or Textarea." }, { "tagName": "@htmltag", "tagValue": "coral-charactercount" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CharacterCount();" ], "see": [ "../examples/#charactercount" ], "type": { "types": [ "*" ] } }, { "__docId__": 560, "kind": "file", "name": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {Icon} from '../../../coral-component-icon';\nimport base from '../templates/base';\nimport {transform, commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst IS_IE_OR_EDGE = navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0 ||\n window.navigator.userAgent.indexOf('Edge') !== -1;\n\nconst CLASSNAME = '_coral-Checkbox';\n\n/**\n @class Coral.Checkbox\n @classdesc A Checkbox component to be used as a form field.\n @htmltag coral-checkbox\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst Checkbox = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // @polyfill ie\n this._delegateEvents(commons.extend(this._events, {\n click: '_onClick',\n mousedown: '_onMouseDown'\n }));\n\n // Prepare templates\n this._elements = {\n // Try to find the label content zone or create one\n label: this.querySelector('coral-checkbox-label') || document.createElement('coral-checkbox-label')\n };\n base.call(this._elements, {commons, i18n, Icon});\n\n // Pre-define labellable element\n this._labellableElement = this._elements.input;\n\n // Check if the label is empty whenever we get a mutation\n this._observer = new MutationObserver(this._hideLabelIfEmpty.bind(this));\n\n // Watch for changes to the label element's children\n this._observer.observe(this._elements.labelWrapper, {\n // Catch changes to childList\n childList: true,\n // Catch changes to textContent\n characterData: true,\n // Monitor any child node\n subtree: true\n });\n }\n\n /**\n Checked state for the checkbox.\n\n @type {Boolean}\n @default false\n @htmlattribute checked\n @htmlattributereflected\n @emits {change}\n */\n get checked() {\n return this._checked || false;\n }\n\n set checked(value) {\n this._checked = transform.booleanAttr(value);\n this._reflectAttribute('checked', this._checked);\n\n this._elements.input.checked = this._checked;\n }\n\n /**\n Indicates that the checkbox is neither on nor off.\n\n @type {Boolean}\n @default false\n @htmlattribute indeterminate\n @htmlattributereflected\n */\n get indeterminate() {\n return this._indeterminate || false;\n }\n\n set indeterminate(value) {\n this._indeterminate = transform.booleanAttr(value);\n this._reflectAttribute('indeterminate', this._indeterminate);\n\n this.classList.toggle('is-indeterminate', this._indeterminate);\n this._elements.input.indeterminate = this._indeterminate;\n this._elements.input[this._indeterminate ? 'setAttribute' : 'removeAttribute']('aria-checked', 'mixed');\n }\n\n /**\n The checkbox's label element.\n\n @type {CheckboxLabel}\n @contentzone\n */\n get label() {\n return this._getContentZone(this._elements.label);\n }\n\n set label(value) {\n this._setContentZone('label', value, {\n handle: 'label',\n tagName: 'coral-checkbox-label',\n insert: function (label) {\n this._elements.labelWrapper.appendChild(label);\n }\n });\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.input.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.input.name = value;\n }\n\n /**\n The value that will be submitted when the checkbox is checked. Changing this value will not trigger an event.\n\n @type {String}\n @default \"on\"\n @htmlattribute value\n */\n get value() {\n return this._elements.input.value || 'on';\n }\n\n set value(value) {\n this._elements.input.value = value;\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n this._elements.input.disabled = this._disabled;\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this._elements.input.required = this._required;\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this.classList.toggle('is-readOnly', this._readOnly);\n this._elements.input.tabIndex = this._readOnly ? -1 : 0;\n }\n\n /**\n Inherited from {@link BaseFormField#labelled}.\n */\n get labelled() {\n return super.labelled;\n }\n\n set labelled(value) {\n super.labelled = value;\n\n this._hideLabelIfEmpty();\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n this._hideLabelIfEmpty();\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n // it uses the name as the first fallback since it is not localized, otherwise it uses the label\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.name ? `${this.name}=${this.value}` : '') || (this.label || this).textContent.replace(/\\s{2,}/g, ' ').trim() :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /*\n Indicates to the formField that the 'checked' property needs to be set in this component.\n\n @protected\n */\n get _componentTargetProperty() {\n return 'checked';\n }\n\n /*\n Indicates to the formField that the 'checked' property has to be extracted from the event.\n\n @protected\n */\n get _eventTargetProperty() {\n return 'checked';\n }\n\n /** @private */\n _onInputChange(event) {\n // stops the current event\n event.stopPropagation();\n\n /** @ignore */\n this[this._componentTargetProperty] = event.target[this._eventTargetProperty];\n\n // resets the indeterminate state after user interaction\n this.indeterminate = false;\n\n // Explicitly re-emit the change event after the property has been set\n if (this._triggerChangeEvent) {\n // @polyfill ie/edge\n if (IS_IE_OR_EDGE) {\n // We need 1 additional frame in case the indeterminate state is set manually on change event\n window.requestAnimationFrame(() => {\n this.trigger('change');\n });\n } else {\n this.trigger('change');\n }\n }\n }\n\n /**\n @private\n @polyfill ie/edge\n */\n _onClick(event) {\n // Force the check/uncheck and trigger the change event since IE won't.\n if (IS_IE_OR_EDGE && this.indeterminate) {\n // Other browsers like Chrome and Firefox will trigger the change event and set indeterminate = false. So we\n // verify if indeterminate was changed and if not, we manually check/uncheck and trigger the change event.\n this.checked = !this.checked;\n this._onInputChange(event);\n }\n // Handle the click() just like the native checkbox\n else if (event.target === this) {\n this.indeterminate = false;\n this.checked = !this.checked;\n this.trigger('change');\n }\n\n this._trackEvent(this.checked ? 'checked' : 'unchecked', 'coral-checkbox', event);\n }\n\n /**\n Forces checkbox to receive focus on mousedown\n @ignore\n */\n _onMouseDown() {\n const target = this._elements.input;\n window.requestAnimationFrame(() => {\n if (target !== document.activeElement) {\n target.focus();\n }\n });\n }\n\n /**\n Hide the label if it's empty\n @ignore\n */\n _hideLabelIfEmpty() {\n const label = this._elements.label;\n\n // If it's empty and has no non-textnode children, hide the label\n const hiddenValue = !(label.children.length === 0 && label.textContent.replace(/\\s*/g, '') === '');\n\n // Toggle the screen reader text\n this._elements.labelWrapper.style.margin = !hiddenValue ? '0' : '';\n this._elements.screenReaderOnly.hidden = !!hiddenValue || !!this.labelledBy || !!this.labelled;\n }\n\n /**\n Inherited from {@link BaseFormField#clear}.\n */\n clear() {\n this.checked = false;\n }\n\n /**\n Inherited from {@link BaseFormField#reset}.\n */\n reset() {\n this.checked = this._initialCheckedState;\n }\n\n get _contentZones() {\n return {'coral-checkbox-label': 'label'};\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['indeterminate', 'checked']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Create a fragment\n const frag = document.createDocumentFragment();\n\n const templateHandleNames = ['input', 'checkbox', 'labelWrapper'];\n\n // Render the main template\n frag.appendChild(this._elements.input);\n frag.appendChild(this._elements.checkbox);\n frag.appendChild(this._elements.labelWrapper);\n\n const label = this._elements.label;\n\n // Remove it so we can process children\n if (label.parentNode) {\n label.parentNode.removeChild(label);\n }\n\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.TEXT_NODE ||\n child.nodeType === Node.ELEMENT_NODE && templateHandleNames.indexOf(child.getAttribute('handle')) === -1) {\n // Add non-template elements to the label\n label.appendChild(child);\n } else {\n // Remove anything else (e.g labelWrapper)\n this.removeChild(child);\n }\n }\n\n // Add the frag to the component\n this.appendChild(frag);\n\n // Assign the content zones, moving them into place in the process\n this.label = label;\n\n // Cache the initial checked state of the checkbox (in order to implement reset)\n this._initialCheckedState = this.checked;\n\n // Check if we need to hide the label\n // We must do this because IE does not catch mutations when nodes are not in the DOM\n this._hideLabelIfEmpty();\n }\n});\n\nexport default Checkbox;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 561, "kind": "variable", "name": "IS_IE_OR_EDGE", "memberof": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js", "static": true, "longname": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js~IS_IE_OR_EDGE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 562, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js", "static": true, "longname": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 563, "kind": "variable", "name": "Checkbox", "memberof": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js", "static": true, "longname": "coral-spectrum/coral-component-checkbox/src/scripts/Checkbox.js~Checkbox", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Checkbox}", "description": "A Checkbox component to be used as a form field.", "lineNumber": 33, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Checkbox" }, { "tagName": "@classdesc", "tagValue": "A Checkbox component to be used as a form field." }, { "tagName": "@htmltag", "tagValue": "coral-checkbox" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Checkbox();" ], "see": [ "../examples/#checkbox" ], "type": { "types": [ "*" ] } }, { "__docId__": 564, "kind": "file", "name": "coral-spectrum/coral-component-checkbox/src/scripts/CheckboxLabel.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Checkbox.Label\n @classdesc The Checkbox label\n @htmltag coral-checkbox-label\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-checkbox-label');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-checkbox/src/scripts/CheckboxLabel.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 565, "kind": "function", "name": "CheckboxLabel", "memberof": "coral-spectrum/coral-component-checkbox/src/scripts/CheckboxLabel.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-checkbox/src/scripts/CheckboxLabel.js~CheckboxLabel", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Checkbox}", "description": "The Checkbox label", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Checkbox.Label" }, { "tagName": "@classdesc", "tagValue": "The Checkbox label" }, { "tagName": "@htmltag", "tagValue": "coral-checkbox-label" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Checkbox.Label();" ], "see": [ "../examples/#checkbox" ], "params": [] }, { "__docId__": 566, "kind": "file", "name": "coral-spectrum/coral-component-checkboxgroup/src/scripts/CheckboxGroup.js", "content": "/**\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFieldGroup} from '../../../coral-base-fieldgroup';\nimport '../../../coral-component-checkbox';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.CheckboxGroup\n @classdesc A CheckboxGroup component to group checkbox fields\n @htmltag coral-checkboxgroup\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFieldGroup}\n */\nconst CheckboxGroup = Decorator(class extends BaseFieldGroup(BaseComponent(HTMLElement)) {\n /** @private */\n get _itemTagName() {\n // Used for Collection\n return 'coral-checkbox';\n }\n\n /**\n Returns an Array containing the selected field group items.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.items._getAllSelected('checked');\n }\n});\n\nexport default CheckboxGroup;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-checkboxgroup/src/scripts/CheckboxGroup.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 567, "kind": "variable", "name": "CheckboxGroup", "memberof": "coral-spectrum/coral-component-checkboxgroup/src/scripts/CheckboxGroup.js", "static": true, "longname": "coral-spectrum/coral-component-checkboxgroup/src/scripts/CheckboxGroup.js~CheckboxGroup", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CheckboxGroup}", "description": "A CheckboxGroup component to group checkbox fields", "lineNumber": 26, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CheckboxGroup" }, { "tagName": "@classdesc", "tagValue": "A CheckboxGroup component to group checkbox fields" }, { "tagName": "@htmltag", "tagValue": "coral-checkboxgroup" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFieldGroup}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CheckboxGroup();" ], "see": [ "../examples/#checkboxgroup" ], "type": { "types": [ "*" ] } }, { "__docId__": 568, "kind": "file", "name": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {DateTime} from '../../../coral-datetime';\nimport '../../../coral-component-textfield';\nimport '../../../coral-component-select';\nimport base from '../templates/base';\nimport {transform, commons, validate, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n// Default for display and value format\nconst DEFAULT_HOUR_FORMAT = 'HH';\nconst DEFAULT_MINUTE_FORMAT = 'mm';\nconst DEFAULT_TIME_FORMAT = `${DEFAULT_HOUR_FORMAT}:${DEFAULT_MINUTE_FORMAT}`;\n\n// Used to extract the time format from a date format\nconst AUTHORIZED_TOKENS = '(A|a|H{1,2}|h{1,2}|k{1,2}|m{1,2})';\nconst TIME_REG_EXP = new RegExp(`${AUTHORIZED_TOKENS}.*${AUTHORIZED_TOKENS}|${AUTHORIZED_TOKENS}`);\nconst HOUR_REG_EXP = new RegExp('h{1,2}|H{1,2}|k{1,2}');\nconst MIN_REG_EXP = new RegExp('m{1,2}');\n\n/**\n Enumeration for {@link Clock} variants.\n\n @typedef {Object} ClockVariantEnum\n\n @property {String} DEFAULT\n A default, gray Clock.\n @property {String} QUIET\n A Clock with no border or background.\n */\nconst variant = {\n DEFAULT: 'default',\n QUIET: 'quiet'\n};\n\nconst CLASSNAME = '_coral-Clock';\n\n// builds an array containing all possible variant classnames. this will be used to remove classnames when the variant\n// changes\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantValue in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);\n}\n\n/**\n @class Coral.Clock\n @classdesc A Clock component that can be used as a time selection form field. Leverages {@link momentJS} if loaded\n on the page.\n @htmltag coral-clock\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst Clock = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Default value\n this._value = '';\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n 'change [handle=\"period\"]': '_onPeriodChange'\n }));\n\n // Prepare templates\n this._elements = {};\n this._template = base.call(this._elements, {commons, i18n});\n\n // Pre-define labellable element\n this._labellableElement = this;\n\n // Add aria-errormessage attribute to coral-clock element\n this.errorID = (this.id || commons.getUID()) + \"-coral-clock-error-label\";\n\n // Prevent typing in specific characters which can be added to number inputs\n const forbiddenChars = [\"-\", \"+\", \"e\", \",\", \".\"];\n this.addEventListener(\"keydown\", (e) => {\n if (forbiddenChars.includes(e.key)) {\n e.preventDefault();\n }\n });\n }\n\n /**\n The format used to display the selected time to the user. If the user manually types a time, this format\n will be used to parse the value. 'HH:mm' is supported by default. Include momentjs to support additional format\n string options see http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"HH:mm\"\n @htmlattribute displayformat\n @htmlattributereflected\n */\n get displayFormat() {\n return this._displayFormat || DEFAULT_TIME_FORMAT;\n }\n\n set displayFormat(value) {\n this._displayFormat = this._extractTimeFormat(transform.string(value).trim(), TIME_REG_EXP, DEFAULT_TIME_FORMAT);\n this._reflectAttribute('displayformat', this._displayFormat);\n\n this._syncDisplay();\n }\n\n /**\n The format to use on expressing the time as a string on the value attribute. The value\n will be sent to the server using this format. If an empty string is provided, then the default value per type\n will be used. 'HH:mm' is supported by default. Include momentjs to support additional format string options\n see http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"HH:mm\"\n @htmlattribute valueformat\n @htmlattributereflected\n */\n get valueFormat() {\n return this._valueFormat || DEFAULT_TIME_FORMAT;\n }\n\n set valueFormat(value) {\n const setValueFormat = (newValue) => {\n this._valueFormat = this._extractTimeFormat(transform.string(newValue).trim(), TIME_REG_EXP, DEFAULT_TIME_FORMAT);\n this._reflectAttribute('valueformat', this._valueFormat);\n };\n\n // Once the valueFormat is set, we make sure the value is also correct\n if (!this._valueFormat && this._originalValue) {\n setValueFormat(value);\n this.value = this._originalValue;\n } else {\n setValueFormat(value);\n this._elements.input.value = this.value;\n }\n }\n\n /**\n The current value as a Date. If the value is \"\" or an invalid date, null will be returned.\n\n @type {Date}\n @default null\n */\n get valueAsDate() {\n return this._value ? new Date(this._value.toDate().getTime()) : null;\n }\n\n set valueAsDate(value) {\n this.value = value instanceof Date ? new DateTime.Moment(value, null, true).format(this.valueFormat) : '';\n }\n\n /**\n The clock's variant. See {@link ClockVariantEnum}.\n\n @type {String}\n @default ClockVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n // passes down the variant to the underlying components\n this._elements.hours.variant = this._variant;\n this._elements.minutes.variant = this._variant;\n this._elements.period.variant = this._variant;\n\n // removes every existing variant\n this.classList.remove(...ALL_VARIANT_CLASSES);\n\n if (this._variant !== variant.DEFAULT) {\n this.classList.add(`${CLASSNAME}--${this._variant}`);\n }\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.input.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.input.name = value;\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n\n this._elements.hours.disabled = this._disabled;\n this._elements.minutes.disabled = this._disabled;\n // stops the form submission\n this._elements.input.disabled = this._disabled;\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n this._elements.hours.invalid = this._invalid;\n this._elements.minutes.invalid = this._invalid;\n this._elements.hours.setAttribute(\"aria-errormessage\", this.errorID);\n this._elements.minutes.setAttribute(\"aria-errormessage\", this.errorID);\n\n const ERROR_LABEL_ELEMENT_CLASS = \"._coral-Clock .coral-Form-errorlabel\";\n const errorLabel = this.querySelector(ERROR_LABEL_ELEMENT_CLASS);\n\n if (this._elements.hours.invalid || this._elements.minutes.invalid) {\n errorLabel.setAttribute(\"id\", this.errorID);\n errorLabel.setAttribute(\"aria-live\", \"assertive\");\n errorLabel.hidden = false;\n errorLabel.style.display = \"table-caption\";\n errorLabel.style[\"caption-side\"] = \"bottom\";\n } else {\n errorLabel.setAttribute(\"aria-live\", \"off\");\n errorLabel.hidden = true;\n }\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this._elements.hours.required = this._required;\n this._elements.minutes.required = this._required;\n this._elements.input.required = this._required;\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.hours.readOnly = this._readOnly;\n this._elements.minutes.readOnly = this._readOnly;\n this._elements.input.readOnly = this._readOnly;\n }\n\n /**\n This field's current value.\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n return this._getValueAsString(this._value, this.valueFormat);\n }\n\n set value(value) {\n value = typeof value === 'string' ? value : '';\n // This is used to change the value if valueformat is also set but afterwards\n this._originalValue = value;\n\n // we do strict conversion of the values\n const time = new DateTime.Moment(value, this.valueFormat, true);\n this._value = time.isValid() ? time : '';\n this._elements.input.value = this.value;\n\n this._syncValueAsText();\n this._syncDisplay();\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n // Get current aria-labelledby attribute on the labellable element.\n let labelledBy = this.getAttribute('aria-labelledby');\n\n // If a labelledBy attribute has been defined,\n if (labelledBy) {\n // and strip the valueAsText element id from the end of the aria-labelledby string.\n labelledBy = labelledBy.replace(this._elements.valueAsText.id, '').trim();\n\n // If the resulting labelledBy string is empty, return null.\n if (!labelledBy.length) {\n labelledBy = null;\n }\n }\n return labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n // The specified labelledBy property.\n const labelledBy = this.labelledBy;\n\n // An array of element ids to label control, the last being the valueAsText element id.\n const ids = [this._elements.valueAsText.id];\n\n // If a labelledBy property exists,\n if (labelledBy) {\n // prepend the labelledBy value to the ids array\n ids.unshift(labelledBy);\n\n // Set aria-labelledby attribute on the labellable element joining ids array into space-delimited list of ids.\n this.setAttribute('aria-labelledby', ids.join(' '));\n } else {\n // labelledBy property is null, remove the aria-labelledby attribute.\n this.removeAttribute('aria-labelledby');\n }\n }\n\n /**\n Ignore the date part and use the time part only\n\n @private\n */\n _extractTimeFormat(format, regExp, defaultFormat) {\n const match = regExp.exec(format);\n return match && match.length && match[0] !== '' ? match[0] : defaultFormat;\n }\n\n /**\n Sync time display based on the format\n\n @private\n */\n _syncDisplay() {\n const hourFormat = this._extractTimeFormat(this.displayFormat, HOUR_REG_EXP, DEFAULT_HOUR_FORMAT);\n const minuteFormat = this._extractTimeFormat(this.displayFormat, MIN_REG_EXP, DEFAULT_MINUTE_FORMAT);\n\n this._elements.hours.placeholder = hourFormat;\n this._elements.minutes.placeholder = minuteFormat;\n\n this._elements.hours.value = this._getValueAsString(this._value, hourFormat);\n this._elements.minutes.value = this._getValueAsString(this._value, minuteFormat);\n\n this._syncPeriod();\n this._syncValueAsText();\n }\n\n /**\n Sync period selector based on the format\n\n @private\n */\n _syncPeriod() {\n const period = this._elements.period;\n const time = this._value;\n const am = i18n.get('am');\n const pm = i18n.get('pm');\n const items = period.items.getAll();\n\n if (time && time.isValid()) {\n if (time.hours() < 12) {\n period.value = 'am';\n } else {\n period.value = 'pm';\n }\n }\n\n // Check for am/pm\n if (this.displayFormat.indexOf('a') !== -1) {\n items[0].textContent = am;\n items[1].textContent = pm;\n this._togglePeriod(true);\n } else if (this.displayFormat.indexOf('A') !== -1) {\n items[0].textContent = am.toUpperCase();\n items[1].textContent = pm.toUpperCase();\n this._togglePeriod(true);\n } else {\n this._togglePeriod(false);\n }\n }\n\n /** @private */\n _togglePeriod(show) {\n this.classList.toggle(`${CLASSNAME}--extended`, show);\n this._elements.period.hidden = !show;\n }\n\n /** @private */\n _onPeriodChange(event) {\n // stops the event from leaving the component\n event.stopImmediatePropagation();\n\n const time = this._value;\n const period = this._elements.period;\n\n // we check if a change event needs to be triggered since it was produced via user interaction\n if (time && time.isValid()) {\n if (this.displayFormat.indexOf('h') !== -1) {\n if (period.value === 'am') {\n time.subtract(12, 'h');\n } else {\n time.add(12, 'h');\n }\n }\n\n this.value = time.format(this.valueFormat);\n this.trigger('change');\n }\n }\n\n _syncValueAsText() {\n this._elements.valueAsText.textContent = this._getValueAsString(this._value, this.displayFormat);\n\n if (!this.getAttribute('aria-labelledby')) {\n this.labelledBy = this.labelledBy;\n }\n }\n\n /**\n Kills the internal _onInputChange from BaseFormField because it does not check the target.\n\n @private\n */\n _onInputChange(event) {\n // stops the event from leaving the component\n event.stopImmediatePropagation();\n\n let newTime = new DateTime.Moment();\n const oldTime = this._value;\n\n let hours = parseInt(this._elements.hours.value, 10);\n const minutes = parseInt(this._elements.minutes.value, 10);\n\n if (window.isNaN(hours) || window.isNaN(minutes)) {\n newTime = '';\n } else {\n if (!this._elements.period.hidden &&\n this.displayFormat.indexOf('h') !== -1 &&\n this._elements.period.value === 'pm') {\n hours += 12;\n }\n\n newTime.hours(hours);\n newTime.minutes(minutes);\n }\n\n // we check if a change event needs to be triggered since it was produced via user interaction\n if (newTime && newTime.isValid()) {\n // @polyfill ie\n this.invalid = false;\n\n if (!newTime.isSame(oldTime, 'hour') || !newTime.isSame(oldTime, 'minute')) {\n this.value = newTime.format(this.valueFormat);\n this.trigger('change');\n }\n } else {\n // @polyfill ie\n this.invalid = true;\n // does not sync the inputs so allow the user to continue typing the date\n this._value = '';\n\n if (newTime !== oldTime) {\n this.trigger('change');\n }\n }\n }\n\n /**\n Helper class that converts the internal moment value into a String using the provided date format. If the value is\n invalid, empty string will be returned.\n\n @param {?Moment} value\n The value representing the date. It has to be a moment object or null\n @param {String} format\n The Date format to be used.\n\n @returns {String} a String representing the value in the given format.\n\n @ignore\n */\n _getValueAsString(value, format) {\n return value && value.isValid() ? value.format(format) : '';\n }\n\n focus() {\n // Sets focus to appropriate descendant\n if (!this.contains(document.activeElement)) {\n this._elements.hours.focus();\n }\n }\n\n /**\n Returns {@link Clock} variants.\n\n @return {ClockVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n displayformat: 'displayFormat',\n valueformat: 'valueFormat'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'displayformat',\n 'valueformat',\n 'variant'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n this.setAttribute('role', 'group');\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n if (!this._valueFormat) {\n this.valueFormat = DEFAULT_TIME_FORMAT;\n }\n if (!this._displayFormat) {\n this.displayFormat = DEFAULT_TIME_FORMAT;\n }\n\n // clean up to be able to clone it\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n\n // Render template\n this.appendChild(this._template);\n\n this._syncDisplay();\n }\n});\n\nexport default Clock;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-clock/src/scripts/Clock.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 569, "kind": "variable", "name": "DEFAULT_HOUR_FORMAT", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~DEFAULT_HOUR_FORMAT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 570, "kind": "variable", "name": "DEFAULT_MINUTE_FORMAT", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~DEFAULT_MINUTE_FORMAT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 24, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 571, "kind": "variable", "name": "DEFAULT_TIME_FORMAT", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~DEFAULT_TIME_FORMAT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 25, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 572, "kind": "variable", "name": "AUTHORIZED_TOKENS", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~AUTHORIZED_TOKENS", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 28, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 573, "kind": "variable", "name": "TIME_REG_EXP", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~TIME_REG_EXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 29, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 574, "kind": "variable", "name": "HOUR_REG_EXP", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~HOUR_REG_EXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 30, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 575, "kind": "variable", "name": "MIN_REG_EXP", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~MIN_REG_EXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 31, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 576, "kind": "typedef", "name": "ClockVariantEnum", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~ClockVariantEnum", "access": "public", "description": "Enumeration for {@link Clock} variants.", "lineNumber": 43, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "A default, gray Clock." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "A Clock with no border or background." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ClockVariantEnum" } }, { "__docId__": 577, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 48, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 578, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 52, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 579, "kind": "variable", "name": "Clock", "memberof": "coral-spectrum/coral-component-clock/src/scripts/Clock.js", "static": true, "longname": "coral-spectrum/coral-component-clock/src/scripts/Clock.js~Clock", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Clock}", "description": "A Clock component that can be used as a time selection form field. Leverages {@link momentJS} if loaded\non the page.", "lineNumber": 66, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Clock" }, { "tagName": "@classdesc", "tagValue": "A Clock component that can be used as a time selection form field. Leverages {@link momentJS} if loaded\non the page." }, { "tagName": "@htmltag", "tagValue": "coral-clock" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Clock();" ], "see": [ "../examples/#clock" ], "type": { "types": [ "*" ] } }, { "__docId__": 580, "kind": "file", "name": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport base from '../templates/base';\nimport {Overlay} from '../../../coral-component-overlay';\nimport '../../../coral-component-popover';\nimport PopperJS from 'popper.js';\nimport {transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link CoachMark} sizes.\n\n @typedef {Object} CoachMarkSizeEnum\n\n @property {String} SMALL\n A small sized coach mark.\n @property {String} MEDIUM\n A default sized coach mark.\n */\nconst size = {\n SMALL: 'S',\n MEDIUM: 'M'\n};\n\n/**\n Enumeration for {@link CoachMark} variants.\n\n @typedef {Object} CoachMarkVariantEnum\n\n @property {String} DEFAULT\n The default styled coach mark.\n @property {String} LIGHT\n A styled coach mark for dark backgrounds.\n @property {String} DARK\n A styled coach mark for light backgrounds.\n */\nconst variant = {\n DEFAULT: 'default',\n LIGHT: 'light',\n DARK: 'dark',\n};\n\nconst CLASSNAME = '_coral-CoachMarkIndicator';\n\n/**\n @class Coral.CoachMark\n @classdesc A coach mark component to highlight UI elements on the page.\n @htmltag coral-coachmark\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CoachMark = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {};\n this._template = base.call(this._elements);\n }\n\n /**\n The element the coach mark should position relative to. It accepts values from {@link OverlayTargetEnum}, as\n well as a DOM element or a CSS selector. If a CSS selector is provided, the first matching element will be used.\n\n @type {?HTMLElement|String}\n @default null\n */\n get target() {\n return this._target || null;\n }\n\n set target(value) {\n // We don't want to validate that the value must change here\n // If a selector is provided, we'll take the first element matching that selector\n // If the DOM is modified and the user wants a new target with the same selector,\n // They should be able to set target = 'selector' again and get a different element\n if (value === null || typeof value === 'string' || value instanceof Node) {\n this._target = value;\n\n requestAnimationFrame(() => {\n const targetElement = Overlay._getTarget(this);\n\n if (targetElement) {\n // Initialize popper only if we have a target\n this._popper = this._popper || new PopperJS(targetElement, this);\n\n // Update target only if valid\n if (targetElement) {\n this._popper.reference = targetElement;\n }\n\n this._popper.options.placement = 'top';\n\n this._popper.modifiers.forEach((modifier) => {\n if (modifier.name === 'offset') {\n const lengthOffset = targetElement.clientHeight / 2 + this.clientHeight / 2;\n modifier.offset = `0, -${lengthOffset}`;\n } else if (modifier.name === 'preventOverflow') {\n modifier.padding = 0;\n }\n });\n\n this._popper.update();\n }\n });\n }\n }\n\n /**\n The coach mark size. See {@link CoachMarkSizeEnum}.\n\n @type {String}\n @default CoachMarkSizeEnum.MEDIUM\n @htmlattribute size\n @htmlattributereflected\n */\n get size() {\n return this._size || size.MEDIUM;\n }\n\n set size(value) {\n value = transform.string(value).toUpperCase();\n this._size = validate.enumeration(size)(value) && value || size.MEDIUM;\n this._reflectAttribute('size', this._size);\n\n this.classList.toggle(`${CLASSNAME}--quiet`, this._size === size.SMALL);\n }\n\n /**\n The coach mark variant. See {@link CoachMarkVariantEnum}.\n\n @type {String}\n @default CoachMarkVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n this.classList.toggle(`${CLASSNAME}--light`, this._variant === variant.LIGHT);\n this.classList.toggle(`${CLASSNAME}--dark`, this._variant === variant.DARK);\n }\n\n /**\n Returns {@link CoachMark} sizes options.\n\n @return {CoachMarkSizeEnum}\n */\n static get size() {\n return size;\n }\n\n /**\n Returns {@link CoachMark} variant options.\n\n @return {CoachMarkVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'size',\n 'variant',\n 'target'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (!this._size) {\n this.size = size.MEDIUM;\n }\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n\n // Support cloneNode\n const template = this.getElementsByClassName('_coral-CoachMarkIndicator-ring');\n while (template.length) {\n template[0].remove();\n }\n\n // Render template\n this.appendChild(this._template);\n }\n});\n\nexport default CoachMark;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 581, "kind": "typedef", "name": "CoachMarkSizeEnum", "memberof": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "static": true, "longname": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js~CoachMarkSizeEnum", "access": "public", "description": "Enumeration for {@link CoachMark} sizes.", "lineNumber": 31, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SMALL", "description": "A small sized coach mark." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MEDIUM", "description": "A default sized coach mark." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CoachMarkSizeEnum" } }, { "__docId__": 582, "kind": "typedef", "name": "CoachMarkVariantEnum", "memberof": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "static": true, "longname": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js~CoachMarkVariantEnum", "access": "public", "description": "Enumeration for {@link CoachMark} variants.", "lineNumber": 48, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "The default styled coach mark." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LIGHT", "description": "A styled coach mark for dark backgrounds." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DARK", "description": "A styled coach mark for light backgrounds." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CoachMarkVariantEnum" } }, { "__docId__": 583, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "static": true, "longname": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 54, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 584, "kind": "variable", "name": "CoachMark", "memberof": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js", "static": true, "longname": "coral-spectrum/coral-component-coachmark/src/scripts/CoachMark.js~CoachMark", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CoachMark}", "description": "A coach mark component to highlight UI elements on the page.", "lineNumber": 63, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CoachMark" }, { "tagName": "@classdesc", "tagValue": "A coach mark component to highlight UI elements on the page." }, { "tagName": "@htmltag", "tagValue": "coral-coachmark" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CoachMark();" ], "see": [ "../examples/#coachmark" ], "type": { "types": [ "*" ] } }, { "__docId__": 585, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @base BaseColorInputAbstractSubview\n @classdesc An abstract subview class that other subviews should extend.\n */\nclass BaseColorInputAbstractSubview extends superClass {\n /** @ignore */\n constructor() {\n super();\n\n this._events = {\n 'click ._coral-ColorInput-preview': '_onPreviewClicked'\n };\n\n // export a static variable used by all subviews\n this.constructor._lastValidColor = null;\n }\n\n /** @ignore */\n _onPreviewClicked() {\n if (this._colorinput.valueAsColor !== null) {\n this.constructor._lastValidColor = this._colorinput.valueAsColor;\n this._colorinput._setActiveColor(null);\n } else if (this.constructor._lastValidColor !== null) {\n this._colorinput._setActiveColor(this.constructor._lastValidColor);\n }\n }\n\n /** @ignore */\n _beforeOverlayOpen() {\n // overwrite callback in subclass if needed\n }\n\n /** @ignore */\n _onColorInputChange() {\n // overwrite callback in subclass if needed\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this.closest('._coral-ColorInput-overlay');\n\n if (overlay && overlay._colorinput) {\n // save references to bound callbacks (in order to be able to remove them again from event system)\n this.__beforeOverlayOpen = this._beforeOverlayOpen.bind(this);\n this.__onColorInputChange = this._onColorInputChange.bind(this);\n\n // cache colorinput if this component is attached to dom\n this._colorinput = overlay._colorinput;\n this._colorinput.on('coral-overlay:beforeopen', this.__beforeOverlayOpen);\n this._colorinput.on('coral-colorinput:_valuechange', this.__onColorInputChange);\n\n // trigger one change initially\n this._onColorInputChange();\n }\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this._colorinput) {\n this._colorinput.off('coral-overlay:beforeopen', this.__beforeOverlayOpen);\n this._colorinput.off('coral-colorinput:_valuechange', this.__onColorInputChange);\n }\n\n this._colorinput = null;\n }\n};\n\nexport default BaseColorInputAbstractSubview;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 586, "kind": "class", "name": "BaseColorInputAbstractSubview", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "", "description": "An abstract subview class that other subviews should extend.", "lineNumber": 17, "unknown": [ { "tagName": "@base", "tagValue": "BaseColorInputAbstractSubview" }, { "tagName": "@classdesc", "tagValue": "An abstract subview class that other subviews should extend." } ], "interface": false, "extends": [ "superClass" ] }, { "__docId__": 587, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#constructor", "access": "public", "description": null, "lineNumber": 19, "ignore": true }, { "__docId__": 588, "kind": "member", "name": "_events", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#_events", "access": "private", "description": null, "lineNumber": 22, "undocument": true, "ignore": true, "type": { "types": [ "{\"click ._coral-ColorInput-preview\": string}" ] } }, { "__docId__": 589, "kind": "method", "name": "_onPreviewClicked", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#_onPreviewClicked", "access": "private", "description": null, "lineNumber": 31, "ignore": true, "params": [], "return": null }, { "__docId__": 590, "kind": "method", "name": "_beforeOverlayOpen", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#_beforeOverlayOpen", "access": "private", "description": null, "lineNumber": 41, "ignore": true, "params": [], "return": null }, { "__docId__": 591, "kind": "method", "name": "_onColorInputChange", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#_onColorInputChange", "access": "private", "description": null, "lineNumber": 46, "ignore": true, "params": [], "return": null }, { "__docId__": 592, "kind": "method", "name": "connectedCallback", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#connectedCallback", "access": "public", "description": null, "lineNumber": 51, "ignore": true, "params": [], "return": null }, { "__docId__": 593, "kind": "member", "name": "__beforeOverlayOpen", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#__beforeOverlayOpen", "access": "private", "description": null, "lineNumber": 58, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 594, "kind": "member", "name": "__onColorInputChange", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#__onColorInputChange", "access": "private", "description": null, "lineNumber": 59, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 595, "kind": "member", "name": "_colorinput", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#_colorinput", "access": "private", "description": null, "lineNumber": 62, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 596, "kind": "method", "name": "disconnectedCallback", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/BaseColorInputAbstractSubview.js~BaseColorInputAbstractSubview#disconnectedCallback", "access": "public", "description": null, "lineNumber": 72, "ignore": true, "params": [], "return": null }, { "__docId__": 598, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {transform} from '../../../coral-utils';\n\n// try to stay in same color space as long as possible (because of conversions being not 100% accurate ...)\n/** @ignore */\nconst colorSpace = {\n RGB: 'rgb',\n HEX: 'hex',\n CMYK: 'cmyk',\n HSB: 'hsb',\n HSL: 'hsl'\n};\n\n/**\n Transforms part of a color (r,g,b) into a hex value.\n\n @static\n @param {Number} x\n value between 0-255\n\n @return {String} Hex representation\n @ignore\n */\nfunction _hex(x) {\n return `0${x.toString(16)}`.slice(-2);\n}\n\n/** @ignore */\nfunction _slice(str, startStr) {\n let sliced = [];\n\n str = transform.string(str).toLowerCase();\n startStr = transform.string(startStr).toLowerCase();\n\n if (str.indexOf(startStr) !== -1) {\n sliced = str.substring(str.indexOf(startStr) + startStr.length, str.lastIndexOf(')')).split(/,\\s*/);\n }\n\n return sliced;\n}\n\n/**\n Parse an rgb value into an object.\n e.g.: 'rgb(0,0,0)' => {r:0, g:0, b:0}\n\n @static\n @param {String} rgbStr\n The string representing the rgb value\n\n @return {Object} {r, g, b} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseRGB(rgbStr) {\n const sliced = _slice(rgbStr, 'rgb(');\n\n if (sliced.length !== 3) {\n return null;\n }\n\n const r = parseInt(sliced[0], 10);\n const g = parseInt(sliced[1], 10);\n const b = parseInt(sliced[2], 10);\n\n if (isNaN(r) || isNaN(g) || isNaN(b)) {\n return null;\n }\n\n if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {\n return null;\n }\n\n return {r, g, b};\n}\n\n/**\n Serialize an rgb object into a string.\n e.g.: {r:0, g:0, b:0} => 'rgb(0,0,0)'\n\n @static\n @param {Object} rgb\n @return {String} rgbStr The string representing the rgb value\n @ignore\n */\nfunction _serializeRGB(rgb) {\n if (rgb) {\n return `rgb(${rgb.r},${rgb.g},${rgb.b})`;\n }\n\n return '';\n}\n\n/**\n Parse an rgba value into an object.\n e.g.: 'rgba(0,0,0,0.5)' => {r:0, g:0, b:0, a:0.5}\n\n @static\n @param {String} rgbaStr\n The string representing the rgba value.\n\n @return {Object} {r, g, b, a} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseRGBA(rgbaStr) {\n const sliced = _slice(rgbaStr, 'rgba(');\n\n if (sliced.length !== 4) {\n return null;\n }\n\n const r = parseInt(sliced[0], 10);\n const g = parseInt(sliced[1], 10);\n const b = parseInt(sliced[2], 10);\n const a = parseFloat(sliced[3]);\n\n if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {\n return null;\n }\n\n if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || a < 0 || a > 1) {\n return null;\n }\n\n return {r, g, b, a};\n}\n\n/**\n Serialize an rgba object into a string.\n e.g.: {r:0, g:0, b:0, a:0.5} => 'rgb(0,0,0,0.5)'\n\n @static\n @param {Object} rgba\n @return {String} rgbaStr The string representing the rgba value\n @ignore\n */\nfunction _serializeRGBA(rgba) {\n if (rgba) {\n return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;\n }\n return '';\n}\n\n/**\n Parse an cmyk value into an object.\n e.g.: 'cmyk(0, 100, 50, 0)' => {c:0, m:100, y:50, k:0}\n\n @static\n @param {String} cmykStr\n The string representing the cmyk value.\n\n @return {Object} {c, m, y, k} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseCMYK(cmykStr) {\n const sliced = _slice(cmykStr, 'cmyk(');\n\n if (sliced.length !== 4) {\n return null;\n }\n\n const c = parseFloat(sliced[0]);\n const m = parseFloat(sliced[1]);\n const y = parseFloat(sliced[2]);\n const k = parseFloat(sliced[3]);\n\n if (isNaN(c) || isNaN(m) || isNaN(y) || isNaN(k)) {\n return null;\n }\n\n if (c < 0 || c > 100 || m < 0 || m > 100 || y < 0 || y > 100 || k < 0 || k > 100) {\n return null;\n }\n\n return {c, m, y, k};\n}\n\n/**\n Serialize an cmyk object into a string.\n e.g.: {c:0, m:100, y:50, k:0} => 'cmyk(0, 100, 50, 0)'\n\n @static\n @param {Object} cmyk\n @return {String} cmykStr The string representing the cmyk value\n @ignore\n */\nfunction _serializeCMYK(cmyk) {\n if (cmyk) {\n // make sure there are not more than 2 digits after dot\n const c = parseFloat(cmyk.c.toFixed(2));\n const m = parseFloat(cmyk.m.toFixed(2));\n const y = parseFloat(cmyk.y.toFixed(2));\n const k = parseFloat(cmyk.k.toFixed(2));\n\n return `cmyk(${c},${m},${y},${k})`;\n }\n return '';\n}\n\n/**\n Parse an hex value into a number. Corrects a hex value, if it is represented by 3 or 6 characters with or without\n '#'.\n\n @static\n @param {String} hexStr The string representing the hex value\n @return {Number} Returns a number representing the parsed hex value\n @ignore\n */\nfunction _parseHex(hexStr) {\n hexStr = transform.string(hexStr).replace('#', '');\n\n if (hexStr.length === 3) {\n hexStr = hexStr.charAt(0) + hexStr.charAt(0) +\n hexStr.charAt(1) + hexStr.charAt(1) +\n hexStr.charAt(2) + hexStr.charAt(2);\n }\n\n // test if this could be a hex value\n const isOk = (/^[0-9A-F]{6}$/i).test(hexStr);\n if (!isOk) {\n return null;\n }\n\n return parseInt(hexStr, 16);\n}\n\n/**\n Transforms a hex color into RGB representation.\n\n @static\n @param {Number} hex\n The color hex representation.\n\n @return {Object} {r, g, b}\n @ignore\n */\nfunction _hexToRgb(hex) {\n // explicitly test null (0 is valid)\n if (hex !== null) {\n return {\n r: hex >> 16,\n // eslint-disable-next-line no-extra-parens\n g: (hex & 0x00FF00) >> 8,\n // eslint-disable-next-line no-extra-parens\n b: (hex & 0x0000FF)\n };\n }\n return null;\n}\n\n/**\n Serialize a hex number into a string.\n\n @static\n @param {Number} hex\n @return {String}\n @ignore\n */\nfunction _serializeHex(hex) {\n // explicitly test null (0 is valid)\n if (hex !== null) {\n const rgb = _hexToRgb(hex);\n return `#${_hex(rgb.r) + _hex(rgb.g) + _hex(rgb.b)}`;\n }\n\n return '';\n}\n\n/**\n Transforms a RGB color into HEX representation.\n\n @static\n @param {Object} rgb\n @return {Number} hex The color hex representation\n @ignore\n */\nfunction _rgbToHex(rgb) {\n if (rgb) {\n return _parseHex(_hex(rgb.r) + _hex(rgb.g) + _hex(rgb.b));\n }\n return null;\n}\n\n/**\n Transforms a cmyk color into RGB representation. Converting CMYK to RGB will incur slight loss because both color\n spaces are not absolute and there will be some round-off error in the conversion process.\n\n @static\n @param {Object} cmyk\n @return {Object} {r, g, b}\n @ignore\n */\nfunction _cmykToRgb(cmyk) {\n if (!cmyk) {\n return null;\n }\n\n const result = {\n r: 0,\n g: 0,\n b: 0\n };\n\n const c = parseFloat(cmyk.c) / 100;\n const m = parseFloat(cmyk.m) / 100;\n const y = parseFloat(cmyk.y) / 100;\n const k = parseFloat(cmyk.k) / 100;\n\n result.r = 1 - Math.min(1, c * (1 - k) + k);\n result.g = 1 - Math.min(1, m * (1 - k) + k);\n result.b = 1 - Math.min(1, y * (1 - k) + k);\n\n result.r = Math.round(result.r * 255);\n result.g = Math.round(result.g * 255);\n result.b = Math.round(result.b * 255);\n\n return result;\n}\n\n/**\n Transforms a rgb color into cmyk representation. Converting CMYK to RGB will incur slight loss because both color\n spaces are not absolute and there will be some round-off error in the conversion process.\n\n @static\n @param {Object} rgb\n @return {Object} {c, m, y, k}\n @ignore\n */\nfunction _rgbToCmyk(rgb) {\n if (!rgb) {\n return null;\n }\n\n const result = {\n c: 0,\n m: 0,\n y: 0,\n k: 0\n };\n\n if (rgb.r === 0 && rgb.g === 0 && rgb.b === 0) {\n result.k = 100;\n return result;\n }\n\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n\n result.k = Math.min(1 - r, 1 - g, 1 - b);\n result.c = (1 - r - result.k) / (1 - result.k);\n result.m = (1 - g - result.k) / (1 - result.k);\n result.y = (1 - b - result.k) / (1 - result.k);\n\n result.c = Math.round(result.c * 100);\n result.m = Math.round(result.m * 100);\n result.y = Math.round(result.y * 100);\n result.k = Math.round(result.k * 100);\n\n return result;\n}\n\n/**\n Parse an hsb value into an object.\n e.g.: 'hsb(360,100,0)' => {h:360, s:100, b:0}\n\n @static\n @param {String} hsbStr\n The string representing the hsb value.\n\n @return {Object} {h, s, b} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseHSB(hsbStr) {\n const sliced = _slice(hsbStr, 'hsb(');\n\n if (sliced.length !== 3) {\n return null;\n }\n\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(sliced[0]);\n const s = parseFloat(sliced[1]);\n const b = parseFloat(sliced[2]);\n\n if (isNaN(h) || isNaN(s) || isNaN(b)) {\n return null;\n }\n\n if (h < 0 || h > 360 || s < 0 || s > 100 || b < 0 || b > 100) {\n return null;\n }\n\n return {h, s, b};\n}\n\n/**\n Serialize an hsb object into a string.\n e.g.: {h:0, s:0, b:0} => 'hsb(0,0,0)'\n\n @static\n @param {Object} hsb\n @return {String} hsb The string representing the hsb value\n @ignore\n */\nfunction _serializeHSB(hsb) {\n if (hsb) {\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(hsb.h.toFixed(2));\n const s = parseFloat(hsb.s.toFixed(2));\n const b = parseFloat(hsb.b.toFixed(2));\n\n return `hsb(${h},${s},${b})`;\n }\n\n return '';\n}\n\n/**\n Transforms a HSB (same as HSV) color into RGB representation.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n b (brightness has a value between 0-100 percent)\n\n @static\n @param {Object} hsb\n @return {Object} {r, g, b}\n @ignore\n */\nfunction _hsbToRgb(hsb) {\n if (!hsb) {\n return null;\n }\n\n const h = hsb.h / 360;\n const s = hsb.s / 100;\n const v = hsb.b / 100;\n\n let r, g, b;\n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n switch (i % 6) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n case 5:\n r = v;\n g = p;\n b = q;\n break;\n }\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n Transforms a RGB color into HSB (same as HSV) representation.\n\n @static\n @param {Object} rgb\n @return {Object} {h, s, b}\n @ignore\n */\nfunction _rgbToHsb(rgb) {\n if (!rgb) {\n return null;\n }\n\n const r = rgb.r;\n const g = rgb.g;\n const b = rgb.b;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const d = max - min;\n let h;\n const s = max === 0 ? 0 : d / max;\n const v = max / 255;\n\n switch (max) {\n case min:\n h = 0;\n break;\n case r:\n h = g - b + d * (g < b ? 6 : 0);\n h /= 6 * d;\n break;\n case g:\n h = b - r + d * 2;\n h /= 6 * d;\n break;\n case b:\n h = r - g + d * 4;\n h /= 6 * d;\n break;\n }\n\n return {\n h: h * 360,\n s: s * 100,\n b: v * 100\n };\n}\n\n/**\n Parse an hsl value into an object.\n e.g.: 'hsl(360,100,0)' => {h:360, s:100, b:0}\n\n @static\n @param {String} hslStr\n The string representing the hsl value.\n\n @return {Object} {h, s, l} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseHSL(hslStr) {\n const sliced = _slice(hslStr, 'hsl(');\n\n if (sliced.length !== 3) {\n return null;\n }\n\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(sliced[0]);\n const s = parseFloat(sliced[1]);\n const l = parseFloat(sliced[2]);\n\n if (isNaN(h) || isNaN(s) || isNaN(l)) {\n return null;\n }\n\n if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100) {\n return null;\n }\n\n return {h, s, l};\n}\n\n/**\n Serialize an hsl object into a string.\n e.g.: {h:0, s:0, l:0} => 'hsl(0,0%,0%)'\n\n @static\n @param {Object} hsl\n @return {String} hsb The string representing the hsb value\n @ignore\n */\nfunction _serializeHSL(hsl) {\n if (hsl) {\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(hsl.h.toFixed(2));\n const s = parseFloat(hsl.s.toFixed(2));\n const l = parseFloat(hsl.l.toFixed(2));\n\n return `hsl(${h},${s}%,${l}%)`;\n }\n\n return '';\n}\n\n/**\n Transforms a HSL color into RGB representation.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n l (lightness has a value between 0-100 percent)\n\n @static\n @param {Object} hsl\n @return {Object} {r, g, b}\n @ignore\n */\nfunction _hslToRgb(hsl) {\n if (!hsl) {\n return null;\n }\n\n const h = hsl.h / 360;\n const s = hsl.s / 100;\n const l = hsl.l / 100;\n\n let r;\n let g;\n let b;\n\n if (s === 0) {\n // achromatic\n r = g = b = l;\n } else {\n const hue2rgb = (p, q, t) => {\n if (t < 0) {\n t += 1;\n }\n if (t > 1) {\n t -= 1;\n }\n if (t < 1 / 6) {\n return p + (q - p) * 6 * t;\n }\n if (t < 1 / 2) {\n return q;\n }\n if (t < 2 / 3) {\n return p + (q - p) * (2 / 3 - t) * 6;\n }\n return p;\n };\n\n const qValue = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const pValue = 2 * l - qValue;\n r = hue2rgb(pValue, qValue, h + 1 / 3);\n g = hue2rgb(pValue, qValue, h);\n b = hue2rgb(pValue, qValue, h - 1 / 3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n}\n\n/**\n Transforms an RGB color into HSL representation.\n\n @static\n @param {Object} rgb\n @return {Object} {h, s, l}\n @ignore\n */\nfunction _rgbToHsl(rgb) {\n if (!rgb) {\n return null;\n }\n\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n let h;\n let s;\n const l = (max + min) / 2;\n\n if (max === min) {\n // achromatic\n h = s = 0;\n } else {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n case g:\n h = (b - r) / d + 2;\n break;\n case b:\n h = (r - g) / d + 4;\n break;\n }\n h /= 6;\n }\n\n return {\n h: h * 360,\n s: s * 100,\n l: l * 100\n };\n}\n\n/**\n Parse an hsla value into an object.\n e.g.: 'hsla(360,100%,0%,0.5)' => {h:360, s:100, l:0, 0.5}\n\n @static\n @param {String} hslaStr\n The string representing the hsl value.\n\n @return {Object} {h, s, l, a} Returns null if string could not be parsed\n @ignore\n */\nfunction _parseHSLA(hslaStr) {\n const sliced = _slice(hslaStr, 'hsla(');\n\n if (sliced.length !== 4) {\n return null;\n }\n\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(sliced[0]);\n const s = parseFloat(sliced[1]);\n const l = parseFloat(sliced[2]);\n const a = parseFloat(sliced[3]);\n\n if (isNaN(h) || isNaN(s) || isNaN(l)) {\n return null;\n }\n\n if (h < 0 || h > 360 || s < 0 || s > 100 || l < 0 || l > 100 || a < 0 || a > 1) {\n return null;\n }\n\n return {h, s, l, a};\n}\n\n/**\n Serialize an hsla object into a string.\n e.g.: {h:0, s:0, l:0, a:0.5} => 'hsl(0,0%,0%,0.5)'\n\n @static\n @param {Object} hsla\n @return {String} hsb The string representing the hsb value\n @ignore\n */\nfunction _serializeHSLA(hsla) {\n if (hsla) {\n // make sure there are not more than 2 digits after dot\n const h = parseFloat(hsla.h.toFixed(2));\n const s = parseFloat(hsla.s.toFixed(2));\n const l = parseFloat(hsla.l.toFixed(2));\n const a = parseFloat(hsla.a.toFixed(2));\n\n return `hsla(${h},${s}%,${l}%,${a})`;\n }\n\n return '';\n}\n\n/**\n Color is used to get a color in different color spaces, calculate tints and shades etc.\n */\nclass Color {\n /** @ignore */\n constructor() {\n // Set defaults\n this._colorSpace = colorSpace.HEX;\n this._value = '';\n this._alpha = 1;\n }\n\n /**\n The value of the color. This value can be set in different formats (HEX, RGB, RGBA, HSB, HSL, HSLA and CMYK).\n Corrects a hex value, if it is represented by 3 or 6 characters with or without '#'.\n\n e.g:\n HEX: #FFFFFF\n RGB: rgb(16,16,16)\n RGBA: rgba(215,40,40,0.9)\n HSB: hsb(360,100,100)\n HSL: hsl(360,100%,100%)\n HSLA: hsla(360,100%,100%,0.9)\n CMYK: cmyk(0,100,50,0)\n\n @type {String}\n @default \"\"\n */\n get value() {\n return this._value;\n }\n\n set value(value) {\n // Two color formats with alpha values\n const rgba = _parseRGBA(value);\n const hsla = _parseHSLA(value);\n\n const rgb = _parseRGB(value);\n const cmyk = _parseCMYK(value);\n const hsb = _parseHSB(value);\n const hsl = _parseHSL(value);\n const hex = _parseHex(value);\n\n if (rgba !== null) {\n this._colorSpace = colorSpace.RGB;\n this.alpha = rgba.a;\n value = _serializeRGB({\n r: rgba.r,\n g: rgba.g,\n b: rgba.b\n });\n } else if (hsla !== null) {\n this._colorSpace = colorSpace.HSL;\n this.alpha = hsla.a;\n value = _serializeHSL({\n h: hsla.h,\n s: hsla.s,\n l: hsla.l\n });\n } else if (rgb !== null) {\n this._colorSpace = colorSpace.RGB;\n } else if (cmyk !== null) {\n this._colorSpace = colorSpace.CMYK;\n } else if (hsb !== null) {\n this._colorSpace = colorSpace.HSB;\n } else if (hsl !== null) {\n this._colorSpace = colorSpace.HSL;\n } else if (hex !== null) {\n this._colorSpace = colorSpace.HEX;\n } else {\n // restore defaults\n this._colorSpace = colorSpace.HEX;\n value = '';\n }\n\n this._value = value;\n }\n\n /**\n The alpha value of the color (value between 0-1).\n\n @type {Number}\n @default 1\n */\n get alpha() {\n return this._alpha;\n }\n\n set alpha(value) {\n if (isNaN(value) || value < 0 || value > 1) {\n return;\n }\n this._alpha = transform.number(value);\n }\n\n /**\n The rgb values of the color (value between 0-255).\n e.g.: {r:0, g:0, b:0}\n\n @type {Object}\n @default null\n */\n get rgb() {\n let rgb = null;\n if (this._colorSpace === colorSpace.RGB) {\n rgb = _parseRGB(this.value);\n } else if (this._colorSpace === colorSpace.HEX) {\n const hex = _parseHex(this.value);\n rgb = _hexToRgb(hex);\n } else if (this._colorSpace === colorSpace.CMYK) {\n const cmyk = _parseCMYK(this.value);\n rgb = _cmykToRgb(cmyk);\n } else if (this._colorSpace === colorSpace.HSB) {\n const hsb = _parseHSB(this.value);\n rgb = _hsbToRgb(hsb);\n } else if (this._colorSpace === colorSpace.HSL) {\n const hsl = _parseHSL(this.value);\n rgb = _hslToRgb(hsl);\n }\n return rgb;\n }\n\n set rgb(value) {\n this.value = _serializeRGB(value);\n }\n\n /**\n The serialized rgb values of the color (r,g,b values between 0-255).\n e.g: 'rgb(0,0,0)'\n\n @type {String}\n @default \"\"\n */\n get rgbValue() {\n return _serializeRGB(this.rgb);\n }\n\n set rgbValue(value) {\n this.value = value;\n }\n\n /**\n The rgba values of the color (r,g,b values between 0-255 and a between 0-1).\n e.g: {r:0, g:0, b:0, a:1}\n\n @type {Object}\n @default null\n */\n get rgba() {\n const rgb = this.rgb;\n if (rgb) {\n return {\n r: rgb.r,\n g: rgb.g,\n b: rgb.b,\n a: this.alpha\n };\n }\n\n return null;\n }\n\n set rgba(value) {\n this.value = _serializeRGBA(value);\n }\n\n /**\n The serialized rgba values of the color (r,g,b values between 0-255 and alpha between 0-1).\n e.g: 'rgba(0,0,0,1)'\n\n @type {String}\n @default \"\"\n */\n get rgbaValue() {\n return _serializeRGBA(this.rgba);\n }\n\n set rgbaValue(value) {\n this.value = value;\n }\n\n /**\n The hex value of the color.\n\n @type {Number}\n @default null\n */\n get hex() {\n // as hex color space is essentially just the same as rgb and there is no loss in conversion, we can do it this way\n return _rgbToHex(this.rgb);\n }\n\n set hex(value) {\n this.value = _serializeHex(value);\n }\n\n /**\n The serialized hex value of the color.\n e.g: '#94CD4B'\n\n @type {String}\n @default \"\"\n */\n get hexValue() {\n return _serializeHex(this.hex);\n }\n\n set hexValue(value) {\n this.value = value;\n }\n\n /**\n The cmyk values of the color (all values between 0-100).\n e.g: {c:0, m:100, y:0, k:100}\n\n @type {Object}\n @default null\n */\n get cmyk() {\n let cmyk = null;\n let rgb = null;\n if (this._colorSpace === colorSpace.RGB) {\n rgb = _parseRGB(this.value);\n cmyk = _rgbToCmyk(rgb);\n } else if (this._colorSpace === colorSpace.HEX) {\n const hex = _parseHex(this.value);\n rgb = _hexToRgb(hex);\n cmyk = _rgbToCmyk(rgb);\n } else if (this._colorSpace === colorSpace.CMYK) {\n cmyk = _parseCMYK(this.value);\n } else if (this._colorSpace === colorSpace.HSB) {\n const hsb = _parseHSB(this.value);\n rgb = _hsbToRgb(hsb);\n cmyk = _rgbToCmyk(rgb);\n } else if (this._colorSpace === colorSpace.HSL) {\n const hsl = _parseHSL(this.value);\n rgb = _hslToRgb(hsl);\n cmyk = _rgbToCmyk(rgb);\n }\n return cmyk;\n }\n\n set cmyk(value) {\n this.value = _serializeCMYK(value);\n }\n\n /**\n The serialized cmyk values of the color (all values between 0-100).\n e.g: 'cmyk(100,100,100,100)'\n\n @type {String}\n @default \"\"\n */\n get cmykValue() {\n return _serializeCMYK(this.cmyk);\n }\n\n set cmykValue(value) {\n this.value = value;\n }\n\n /**\n The hsb values of the color.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n b (brightness has a value between 0-100 percent)\n\n @type {Object}\n @default null\n */\n get hsb() {\n let hsb = null;\n let rgb = null;\n if (this._colorSpace === colorSpace.RGB) {\n rgb = _parseRGB(this.value);\n hsb = _rgbToHsb(rgb);\n } else if (this._colorSpace === colorSpace.HEX) {\n const hex = _parseHex(this.value);\n rgb = _hexToRgb(hex);\n hsb = _rgbToHsb(rgb);\n } else if (this._colorSpace === colorSpace.CMYK) {\n const cmyk = _parseCMYK(this.value);\n rgb = _cmykToRgb(cmyk);\n hsb = _rgbToHsb(rgb);\n } else if (this._colorSpace === colorSpace.HSB) {\n hsb = _parseHSB(this.value);\n } else if (this._colorSpace === colorSpace.HSL) {\n const hsl = _parseHSL(this.value);\n rgb = _hslToRgb(hsl);\n hsb = _rgbToHsb(rgb);\n }\n return hsb;\n }\n\n set hsb(value) {\n this.value = _serializeHSB(value);\n }\n\n /**\n The serialized hsb values of the color (s and b values between 0-100, h between 0-360).\n e.g: 'hsb(360,100,100)'\n\n @type {String}\n @default \"\"\n */\n get hsbValue() {\n return _serializeHSB(this.hsb);\n }\n\n set hsbValue(value) {\n this.value = value;\n }\n\n /*\n The hsl values of the color.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n l (lightness has a value between 0-100 percent)\n\n @type {Object}\n @default null\n */\n get hsl() {\n let hsl = null;\n let rgb = null;\n if (this._colorSpace === colorSpace.RGB) {\n rgb = _parseRGB(this.value);\n hsl = _rgbToHsl(rgb);\n } else if (this._colorSpace === colorSpace.HEX) {\n const hex = _parseHex(this.value);\n rgb = _hexToRgb(hex);\n hsl = _rgbToHsl(rgb);\n } else if (this._colorSpace === colorSpace.CMYK) {\n const cmyk = _parseCMYK(this.value);\n rgb = _cmykToRgb(cmyk);\n hsl = _rgbToHsl(rgb);\n } else if (this._colorSpace === colorSpace.HSB) {\n const hsb = _parseHSB(this.value);\n rgb = _hsbToRgb(hsb);\n hsl = _rgbToHsl(rgb);\n } else if (this._colorSpace === colorSpace.HSL) {\n hsl = _parseHSL(this.value);\n }\n return hsl;\n }\n\n set hsl(value) {\n this.value = _serializeHSL(value);\n }\n\n /**\n The serialized hsl values of the color (s and l values between 0-100 in percent, h between 0-360).\n e.g: 'hsl(360,100%,100%)'\n\n @type {String}\n @default \"\"\n */\n get hslValue() {\n return _serializeHSL(this.hsl);\n }\n\n set hslValue(value) {\n this.value = value;\n }\n\n /**\n The hsla values of the color.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n l (lightness has a value between 0-100 percent)\n a (alpha has a value between 0-1)\n\n @type {Object}\n @default null\n */\n get hsla() {\n const hsl = this.hsl;\n if (hsl) {\n return {\n h: hsl.h,\n s: hsl.s,\n l: hsl.l,\n a: this.alpha\n };\n }\n\n return null;\n }\n\n set hsla(value) {\n this.value = _serializeHSLA(value);\n }\n\n /**\n The serialized hsla values of the color.\n h (hue has value between 0-360 degree)\n s (saturation has a value between 0-100 percent)\n l (lightness has a value between 0-100 percent)\n a (alpha has a value between 0-1)\n e.g: 'hsla(360,50%,50%,0.9)'\n\n @type {String}\n @default \"\"\n */\n get hslaValue() {\n return _serializeHSLA(this.hsla);\n }\n\n set hslaValue(value) {\n this.value = value;\n }\n\n /**\n Clone this color.\n\n @type {Color}\n */\n clone() {\n const clone = new this.constructor();\n clone.value = this.value;\n clone.alpha = this.alpha;\n return clone;\n }\n\n /**\n Test if this Color is similar to another color.\n\n @type {Boolean}\n @param {Color} compareColor\n The color to compare this color too.\n\n @param {Boolean} [allowSlightColorDifference=true]\n While converting between color spaces slight loses might happen => we should normally consider colors equal,\n even if they are minimally different.\n\n */\n isSimilarTo(compareColor, allowSlightColorDifference) {\n if (this.rgb === null && (!compareColor || compareColor.rgb === null)) {\n // Consider an rgb of null equal to a null object (or another value of null)\n return true;\n }\n\n if (!compareColor || compareColor.rgb === null || this.rgb === null) {\n return false;\n }\n\n let allowedRgbDifference = 1;\n let allowedAlphaDifference = 0.01;\n\n if (allowSlightColorDifference === false) {\n allowedRgbDifference = 0;\n allowedAlphaDifference = 0;\n }\n\n const rgb = this.rgb;\n const rgb2 = compareColor.rgb;\n\n const rDiff = Math.abs(rgb2.r - rgb.r);\n const gDiff = Math.abs(rgb2.g - rgb.g);\n const bDiff = Math.abs(rgb2.b - rgb.b);\n const aDiff = Math.abs(this.alpha - compareColor.alpha);\n\n if (rDiff <= allowedRgbDifference && gDiff <= allowedRgbDifference && bDiff <= allowedRgbDifference && aDiff <= allowedAlphaDifference) {\n return true;\n }\n\n return false;\n }\n\n /**\n Calculates an array of lighter colors.\n\n @type {Array}\n @param {Number} amount\n Amount of tint colors to generate.\n\n */\n calculateTintColors(amount) {\n const tintColors = [];\n let tintColor = null;\n\n const rgb = this.rgb;\n if (rgb) {\n const r = rgb.r;\n const g = rgb.g;\n const b = rgb.b;\n\n let tintFactor = 1;\n\n for (let i = 1 ; i <= amount ; i++) {\n tintFactor = i / (amount + 1);\n tintColor = this.clone();\n // alpha value kept from original\n tintColor.rgb = {\n r: r + (255 - r) * tintFactor,\n g: g + (255 - g) * tintFactor,\n b: b + (255 - b) * tintFactor\n };\n\n tintColors.push(tintColor);\n }\n }\n\n return tintColors;\n }\n\n /**\n Calculates an array of darker colors.\n\n @type {Array}\n @param {Number} amount\n Amount of shade colors to generate.\n\n */\n calculateShadeColors(amount) {\n const shadeColors = [];\n let shadeColor = null;\n\n const rgb = this.rgb;\n if (rgb) {\n const r = rgb.r;\n const g = rgb.g;\n const b = rgb.b;\n\n let shadeFactor = 1;\n\n for (let i = 1 ; i <= amount ; i++) {\n shadeFactor = i / (amount + 1);\n shadeColor = this.clone();\n // alpha value kept from original\n shadeColor.rgb = {\n r: r * (1 - shadeFactor),\n g: g * (1 - shadeFactor),\n b: b * (1 - shadeFactor)\n };\n\n shadeColors.push(shadeColor);\n }\n }\n\n return shadeColors;\n }\n}\n\nexport default Color;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 599, "kind": "variable", "name": "colorSpace", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~colorSpace", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "ignore": true, "type": { "types": [ "{\"RGB\": string, \"HEX\": string, \"CMYK\": string, \"HSB\": string, \"HSL\": string}" ] } }, { "__docId__": 600, "kind": "function", "name": "_hex", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_hex", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms part of a color (r,g,b) into a hex value.", "lineNumber": 35, "ignore": true, "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "x", "description": "value between 0-255" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "Hex representation" } }, { "__docId__": 601, "kind": "function", "name": "_slice", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_slice", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 40, "ignore": true, "params": [ { "name": "str", "types": [ "*" ] }, { "name": "startStr", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 602, "kind": "function", "name": "_parseRGB", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseRGB", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an rgb value into an object.\ne.g.: 'rgb(0,0,0)' => {r:0, g:0, b:0}", "lineNumber": 64, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "rgbStr", "description": "The string representing the rgb value" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b} Returns null if string could not be parsed" } }, { "__docId__": 603, "kind": "function", "name": "_serializeRGB", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeRGB", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an rgb object into a string.\ne.g.: {r:0, g:0, b:0} => 'rgb(0,0,0)'", "lineNumber": 95, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgb", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "rgbStr The string representing the rgb value" } }, { "__docId__": 604, "kind": "function", "name": "_parseRGBA", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseRGBA", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an rgba value into an object.\ne.g.: 'rgba(0,0,0,0.5)' => {r:0, g:0, b:0, a:0.5}", "lineNumber": 114, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "rgbaStr", "description": "The string representing the rgba value." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b, a} Returns null if string could not be parsed" } }, { "__docId__": 605, "kind": "function", "name": "_serializeRGBA", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeRGBA", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an rgba object into a string.\ne.g.: {r:0, g:0, b:0, a:0.5} => 'rgb(0,0,0,0.5)'", "lineNumber": 146, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgba", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "rgbaStr The string representing the rgba value" } }, { "__docId__": 606, "kind": "function", "name": "_parseCMYK", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseCMYK", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an cmyk value into an object.\ne.g.: 'cmyk(0, 100, 50, 0)' => {c:0, m:100, y:50, k:0}", "lineNumber": 164, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "cmykStr", "description": "The string representing the cmyk value." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{c, m, y, k} Returns null if string could not be parsed" } }, { "__docId__": 607, "kind": "function", "name": "_serializeCMYK", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeCMYK", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an cmyk object into a string.\ne.g.: {c:0, m:100, y:50, k:0} => 'cmyk(0, 100, 50, 0)'", "lineNumber": 196, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "cmyk", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "cmykStr The string representing the cmyk value" } }, { "__docId__": 608, "kind": "function", "name": "_parseHex", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseHex", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an hex value into a number. Corrects a hex value, if it is represented by 3 or 6 characters with or without\n'#'.", "lineNumber": 218, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hexStr", "description": "The string representing the hex value" } ], "return": { "nullable": null, "types": [ "Number" ], "spread": false, "description": "Returns a number representing the parsed hex value" } }, { "__docId__": 609, "kind": "function", "name": "_hexToRgb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_hexToRgb", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a hex color into RGB representation.", "lineNumber": 246, "ignore": true, "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "hex", "description": "The color hex representation." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b}" } }, { "__docId__": 610, "kind": "function", "name": "_serializeHex", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeHex", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize a hex number into a string.", "lineNumber": 268, "ignore": true, "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "hex", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "" } }, { "__docId__": 611, "kind": "function", "name": "_rgbToHex", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_rgbToHex", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a RGB color into HEX representation.", "lineNumber": 286, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgb", "description": "" } ], "return": { "nullable": null, "types": [ "Number" ], "spread": false, "description": "hex The color hex representation" } }, { "__docId__": 612, "kind": "function", "name": "_cmykToRgb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_cmykToRgb", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a cmyk color into RGB representation. Converting CMYK to RGB will incur slight loss because both color\nspaces are not absolute and there will be some round-off error in the conversion process.", "lineNumber": 302, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "cmyk", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b}" } }, { "__docId__": 613, "kind": "function", "name": "_rgbToCmyk", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_rgbToCmyk", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a rgb color into cmyk representation. Converting CMYK to RGB will incur slight loss because both color\nspaces are not absolute and there will be some round-off error in the conversion process.", "lineNumber": 338, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgb", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{c, m, y, k}" } }, { "__docId__": 614, "kind": "function", "name": "_parseHSB", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseHSB", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an hsb value into an object.\ne.g.: 'hsb(360,100,0)' => {h:360, s:100, b:0}", "lineNumber": 383, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hsbStr", "description": "The string representing the hsb value." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{h, s, b} Returns null if string could not be parsed" } }, { "__docId__": 615, "kind": "function", "name": "_serializeHSB", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeHSB", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an hsb object into a string.\ne.g.: {h:0, s:0, b:0} => 'hsb(0,0,0)'", "lineNumber": 415, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "hsb", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "hsb The string representing the hsb value" } }, { "__docId__": 616, "kind": "function", "name": "_hsbToRgb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_hsbToRgb", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a HSB (same as HSV) color into RGB representation.\nh (hue has value between 0-360 degree)\ns (saturation has a value between 0-100 percent)\nb (brightness has a value between 0-100 percent)", "lineNumber": 439, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "hsb", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b}" } }, { "__docId__": 617, "kind": "function", "name": "_rgbToHsb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_rgbToHsb", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a RGB color into HSB (same as HSV) representation.", "lineNumber": 501, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgb", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{h, s, b}" } }, { "__docId__": 618, "kind": "function", "name": "_parseHSL", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseHSL", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an hsl value into an object.\ne.g.: 'hsl(360,100,0)' => {h:360, s:100, b:0}", "lineNumber": 553, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hslStr", "description": "The string representing the hsl value." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{h, s, l} Returns null if string could not be parsed" } }, { "__docId__": 619, "kind": "function", "name": "_serializeHSL", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeHSL", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an hsl object into a string.\ne.g.: {h:0, s:0, l:0} => 'hsl(0,0%,0%)'", "lineNumber": 585, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "hsl", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "hsb The string representing the hsb value" } }, { "__docId__": 620, "kind": "function", "name": "_hslToRgb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_hslToRgb", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms a HSL color into RGB representation.\nh (hue has value between 0-360 degree)\ns (saturation has a value between 0-100 percent)\nl (lightness has a value between 0-100 percent)", "lineNumber": 609, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "hsl", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{r, g, b}" } }, { "__docId__": 621, "kind": "function", "name": "_rgbToHsl", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_rgbToHsl", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Transforms an RGB color into HSL representation.", "lineNumber": 667, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "rgb", "description": "" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{h, s, l}" } }, { "__docId__": 622, "kind": "function", "name": "_parseHSLA", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_parseHSLA", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Parse an hsla value into an object.\ne.g.: 'hsla(360,100%,0%,0.5)' => {h:360, s:100, l:0, 0.5}", "lineNumber": 720, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hslaStr", "description": "The string representing the hsl value." } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "{h, s, l, a} Returns null if string could not be parsed" } }, { "__docId__": 623, "kind": "function", "name": "_serializeHSLA", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~_serializeHSLA", "access": "private", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Serialize an hsla object into a string.\ne.g.: {h:0, s:0, l:0, a:0.5} => 'hsl(0,0%,0%,0.5)'", "lineNumber": 753, "ignore": true, "params": [ { "nullable": null, "types": [ "Object" ], "spread": false, "optional": false, "name": "hsla", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "hsb The string representing the hsb value" } }, { "__docId__": 624, "kind": "class", "name": "Color", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Color}", "description": "Color is used to get a color in different color spaces, calculate tints and shades etc.", "lineNumber": 770, "interface": false }, { "__docId__": 625, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#constructor", "access": "public", "description": null, "lineNumber": 772, "ignore": true }, { "__docId__": 626, "kind": "member", "name": "_colorSpace", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#_colorSpace", "access": "private", "description": null, "lineNumber": 774, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 627, "kind": "member", "name": "_value", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#_value", "access": "private", "description": null, "lineNumber": 775, "undocument": true, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 628, "kind": "member", "name": "_alpha", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#_alpha", "access": "private", "description": null, "lineNumber": 776, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 629, "kind": "member", "name": "value", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#value", "access": "public", "description": "The value of the color. This value can be set in different formats (HEX, RGB, RGBA, HSB, HSL, HSLA and CMYK).\nCorrects a hex value, if it is represented by 3 or 6 characters with or without '#'.\n\ne.g:\nHEX: #FFFFFF\nRGB: rgb(16,16,16)\nRGBA: rgba(215,40,40,0.9)\nHSB: hsb(360,100,100)\nHSL: hsl(360,100%,100%)\nHSLA: hsla(360,100%,100%,0.9)\nCMYK: cmyk(0,100,50,0)\n
  • \"\" by default.
", "lineNumber": 795, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 642, "kind": "member", "name": "alpha", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#alpha", "access": "public", "description": "The alpha value of the color (value between 0-1).\n
  • 1 by default.
", "lineNumber": 851, "unknown": [ { "tagName": "@default", "tagValue": "1" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 645, "kind": "member", "name": "rgb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#rgb", "access": "public", "description": "The rgb values of the color (value between 0-255).\ne.g.: {r:0, g:0, b:0}\n
  • null by default.
", "lineNumber": 869, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Object" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 648, "kind": "member", "name": "rgbValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#rgbValue", "access": "public", "description": "The serialized rgb values of the color (r,g,b values between 0-255).\ne.g: 'rgb(0,0,0)'\n
  • \"\" by default.
", "lineNumber": 900, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 651, "kind": "member", "name": "rgba", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#rgba", "access": "public", "description": "The rgba values of the color (r,g,b values between 0-255 and a between 0-1).\ne.g: {r:0, g:0, b:0, a:1}\n
  • null by default.
", "lineNumber": 915, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Object" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 654, "kind": "member", "name": "rgbaValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#rgbaValue", "access": "public", "description": "The serialized rgba values of the color (r,g,b values between 0-255 and alpha between 0-1).\ne.g: 'rgba(0,0,0,1)'\n
  • \"\" by default.
", "lineNumber": 940, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 657, "kind": "member", "name": "hex", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hex", "access": "public", "description": "The hex value of the color.\n
  • null by default.
", "lineNumber": 954, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 660, "kind": "member", "name": "hexValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hexValue", "access": "public", "description": "The serialized hex value of the color.\ne.g: '#94CD4B'\n
  • \"\" by default.
", "lineNumber": 970, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 663, "kind": "member", "name": "cmyk", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#cmyk", "access": "public", "description": "The cmyk values of the color (all values between 0-100).\ne.g: {c:0, m:100, y:0, k:100}\n
  • null by default.
", "lineNumber": 985, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Object" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 666, "kind": "member", "name": "cmykValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#cmykValue", "access": "public", "description": "The serialized cmyk values of the color (all values between 0-100).\ne.g: 'cmyk(100,100,100,100)'\n
  • \"\" by default.
", "lineNumber": 1020, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 669, "kind": "member", "name": "hsb", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hsb", "access": "public", "description": "The hsb values of the color.\nh (hue has value between 0-360 degree)\ns (saturation has a value between 0-100 percent)\nb (brightness has a value between 0-100 percent)\n
  • null by default.
", "lineNumber": 1037, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Object" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 672, "kind": "member", "name": "hsbValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hsbValue", "access": "public", "description": "The serialized hsb values of the color (s and b values between 0-100, h between 0-360).\ne.g: 'hsb(360,100,100)'\n
  • \"\" by default.
", "lineNumber": 1072, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 675, "kind": "member", "name": "hsl", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hsl", "access": "public", "description": "null", "lineNumber": 1089, "undocument": true, "modality": "both", "type": { "types": [ "*" ] } }, { "__docId__": 678, "kind": "member", "name": "hslValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hslValue", "access": "public", "description": "The serialized hsl values of the color (s and l values between 0-100 in percent, h between 0-360).\ne.g: 'hsl(360,100%,100%)'\n
  • \"\" by default.
", "lineNumber": 1124, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 681, "kind": "member", "name": "hsla", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hsla", "access": "public", "description": "The hsla values of the color.\nh (hue has value between 0-360 degree)\ns (saturation has a value between 0-100 percent)\nl (lightness has a value between 0-100 percent)\na (alpha has a value between 0-1)\n
  • null by default.
", "lineNumber": 1142, "unknown": [ { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "Object" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 684, "kind": "member", "name": "hslaValue", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#hslaValue", "access": "public", "description": "The serialized hsla values of the color.\nh (hue has value between 0-360 degree)\ns (saturation has a value between 0-100 percent)\nl (lightness has a value between 0-100 percent)\na (alpha has a value between 0-1)\ne.g: 'hsla(360,50%,50%,0.9)'\n
  • \"\" by default.
", "lineNumber": 1171, "unknown": [ { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 687, "kind": "method", "name": "clone", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#clone", "access": "public", "description": "Clone this color.", "lineNumber": 1184, "type": { "nullable": null, "types": [ "Color" ], "spread": false, "description": null }, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 688, "kind": "method", "name": "isSimilarTo", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#isSimilarTo", "access": "public", "description": "Test if this Color is similar to another color.", "lineNumber": 1203, "params": [ { "nullable": null, "types": [ "Color" ], "spread": false, "optional": false, "name": "compareColor", "description": "The color to compare this color too." }, { "nullable": null, "types": [ "Boolean" ], "spread": false, "optional": true, "defaultValue": "true", "defaultRaw": true, "name": "allowSlightColorDifference", "description": "While converting between color spaces slight loses might happen => we should normally consider colors equal,\neven if they are minimally different." } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "return": { "types": [ "boolean" ] } }, { "__docId__": 689, "kind": "method", "name": "calculateTintColors", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#calculateTintColors", "access": "public", "description": "Calculates an array of lighter colors.", "lineNumber": 1244, "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "amount", "description": "Amount of tint colors to generate." } ], "type": { "nullable": null, "types": [ "Array" ], "spread": false, "description": null }, "return": { "types": [ "*" ] } }, { "__docId__": 690, "kind": "method", "name": "calculateShadeColors", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/Color.js~Color#calculateShadeColors", "access": "public", "description": "Calculates an array of darker colors.", "lineNumber": 1281, "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "amount", "description": "Amount of shade colors to generate." } ], "type": { "nullable": null, "types": [ "Array" ], "spread": false, "description": null }, "return": { "types": [ "*" ] } }, { "__docId__": 691, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport Color from './Color';\nimport ColorInputItem from './ColorInputItem';\nimport {SelectableCollection} from '../../../coral-collection';\nimport {Icon} from '../../../coral-component-icon';\nimport '../../../coral-component-textfield';\nimport '../../../coral-component-button';\nimport '../../../coral-component-popover';\nimport './ColorInputColorProperties';\nimport './ColorInputSwatches';\nimport base from '../templates/base';\nimport {validate, transform, commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ColorInput';\n\n/**\n Enumeration for {@link ColorInput} variants.\n\n @typedef {Object} ColorInputVariantEnum\n\n @property {String} DEFAULT\n Use ColorInput as a formfield (default).\n @property {String} SWATCH\n Use a simple swatch as ColorInput.\n */\nconst variant = {\n DEFAULT: 'default',\n SWATCH: 'swatch'\n};\n\n/**\n Enumeration for {@link ColorInput} auto generated colors options.\n\n @typedef {Object} ColorInputAutoGenerateColorsEnum\n\n @property {String} OFF\n Disable auto generation.\n @property {String} SHADES\n Automatically generate shades (darker colors) of all colors.\n @property {String} TINTS\n Automatically generate tints (lighter colors) of all colors.\n */\nconst autoGenerateColors = {\n OFF: 'off',\n SHADES: 'shades',\n TINTS: 'tints'\n};\n\n/**\n Enumeration for {@link ColorInput} swatches display options.\n\n @typedef {Object} ColorInputShowSwatchesEnum\n\n @property {String} ON\n Display swatches view (default).\n @property {String} OFF\n Hide swatches view.\n */\nconst showSwatches = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link ColorInput} color properties display options.\n\n @typedef {Object} ColorInputShowPropertiesEnum\n\n @property {String} ON\n Display color properties view (default).\n @property {String} OFF\n Hide color properties view.\n */\nconst showProperties = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link ColorInput} default colors display options.\n\n @typedef {Object} ColorInputShowDefaultColorsEnum\n\n @property {String} ON\n Display default colors (default).\n @property {String} OFF\n Hide default colors.\n */\nconst showDefaultColors = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n @class Coral.ColorInput\n @classdesc A ColorInput component than can be used as a form field to select from a list of color options.\n @htmltag coral-colorinput\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst ColorInput = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {};\n base.call(this._elements, {commons, i18n});\n\n const overlay = this._elements.overlay;\n const overlayId = overlay.id;\n\n // Add a reference to this\n overlay._colorinput = this;\n\n // Extend form field events\n const events = commons.extend(this._events, {\n 'key:down ._coral-ColorInput-input:not([readonly])': '_onKeyDown',\n 'key:down [handle=\"colorPreview\"]': '_onKeyDown',\n 'click [handle=\"colorPreview\"]': '_onColorPreviewClick',\n 'key:esc input': '_onKeyEsc',\n 'key:enter input': '_onKeyEsc',\n\n // private\n 'coral-colorinput-item:_selectedchanged': '_onItemSelectedChanged'\n });\n\n // Overlay\n events[`global:capture:coral-overlay:beforeopen #${overlayId}`] = '_beforeOverlayOpen';\n events[`global:capture:coral-overlay:close #${overlayId}`] = '_onOverlayClose';\n events[`global:key:esc #${overlayId}`] = '_onKeyEsc';\n\n // Events\n this._delegateEvents(events);\n\n // Pre-define labellable element\n this._labellableElement = this._elements.input;\n\n // Used for eventing\n this._oldSelection = null;\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n Returns the inner overlay to allow customization.\n\n @type {Popover}\n @readonly\n */\n get overlay() {\n return this._elements.overlay;\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-colorinput-item',\n onItemAdded: this._onItemAdded,\n onItemRemoved: this._onItemRemoved\n });\n }\n return this._items;\n }\n\n /**\n The selected item in the ColorInput.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getLastSelected();\n }\n\n /**\n The ColorInput variant. See {@link ColorInputVariantEnum}.\n\n @default ColorInputVariantEnum.DEFAULT\n @type {String}\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n if (this._variant === variant.SWATCH) {\n this.classList.add('_coral-ColorInput--swatch');\n this._elements.input.setAttribute('tabindex', -1);\n this._elements.colorPreview.removeAttribute('tabindex');\n } else {\n this.classList.remove('_coral-ColorInput--swatch');\n this._elements.input.removeAttribute('tabindex');\n }\n \n this._syncColorPreviewIcon();\n }\n\n /**\n Convenient property to get/set the the current color. If the value is no valid color it will return\n null (The getter will return a copy of the current selected color).\n\n @type {Color}\n */\n get valueAsColor() {\n if (!this._color) {\n this._color = new Color();\n }\n\n // sync this._color with the hidden field if necessary\n const newColor = new Color();\n newColor.value = this.value;\n if (!this._color.isSimilarTo(newColor, true)) {\n this._color.value = newColor.value;\n this._color.alpha = newColor.alpha;\n }\n\n if (this._color.rgb === null) {\n return null;\n }\n\n return this._color.clone();\n }\n\n set valueAsColor(value) {\n if (!this._color) {\n this._color = new Color();\n }\n\n if (!value) {\n // clear color values\n this._color.value = '';\n this.value = '';\n } else {\n // set color values\n this._color = value;\n\n if (value.alpha < 1) {\n // if an alpha value is used store rgba in the hidden field (it is the only format that can store alpha)\n this.value = value.rgbaValue;\n } else {\n this.value = value.value;\n }\n }\n }\n\n /**\n Should shades (darker colors) or tints (lighter colors) automatically be generated.\n See {@link ColorInputAutoGenerateColorsEnum}.\n\n @default Coral.ColorInput.autoGenerateColors.OFF\n @type {String}\n @htmlattribute autogeneratecolors\n */\n get autoGenerateColors() {\n return this._autoGenerateColors || autoGenerateColors.OFF;\n }\n\n set autoGenerateColors(value) {\n value = transform.string(value).toLowerCase();\n this._autoGenerateColors = validate.enumeration(autoGenerateColors)(value) && value || autoGenerateColors.OFF;\n\n this._recalculateGeneratedColors();\n }\n\n /**\n Whether swatches view should be displayed. See {@link ColorInputSwatches}.\n\n @default ColorInputShowSwatchesEnum.ON\n @type {ColorInputSwatches}\n @htmlattribute showswatches\n */\n get showSwatches() {\n return this._showSwatches || showSwatches.ON;\n }\n\n set showSwatches(value) {\n value = transform.string(value).toLowerCase();\n this._showSwatches = validate.enumeration(showSwatches)(value) && value || showSwatches.ON;\n\n this._showOrHideView(this._elements.swatchesView, this._showSwatches === showSwatches.OFF);\n }\n\n /**\n Whether properties view should be displayed. See {@link ColorInputColorProperties}.\n\n @default ColorInputShowPropertiesEnum.ON\n @type {String}\n @htmlattribute showproperties\n */\n get showProperties() {\n return this._showProperties || showProperties.ON;\n }\n\n set showProperties(value) {\n value = transform.string(value).toLowerCase();\n this._showProperties = validate.enumeration(showProperties)(value) && value || showProperties.ON;\n\n this._showOrHideView(this._elements.propertiesView, this._showProperties === showProperties.OFF);\n }\n\n /**\n Whether default colors should be displayed. Link {@link ColorInputShowDefaultColorsEnum}.\n\n @default ColorInputShowDefaultColorsEnum.ON\n @type {String}\n @htmlattribute showdefaultcolors\n */\n get showDefaultColors() {\n return this._showDefaultColors || showDefaultColors.ON;\n }\n\n set showDefaultColors(value) {\n value = transform.string(value).toLowerCase();\n this._showDefaultColors = validate.enumeration(showDefaultColors)(value) && value || showDefaultColors.ON;\n\n const defaultPalette = this._elements.defaultPalette;\n if (this._showDefaultColors === showDefaultColors.ON) {\n if (!defaultPalette.parentNode) {\n this.insertBefore(defaultPalette, this.firstChild || null);\n }\n } else if (defaultPalette.parentNode) {\n defaultPalette.parentNode.removeChild(defaultPalette);\n }\n }\n\n /**\n Short hint that describes the expected value of the ColorInput. It is displayed when the ColorInput is empty\n and the variant is {@link Coral.ColorInput.variant.DEFAULT}\n\n @type {String}\n @default \"\"\n @htmlattribute placeholder\n @htmlattributereflected\n */\n get placeholder() {\n return this._elements.input.placeholder;\n }\n\n set placeholder(value) {\n this._reflectAttribute('placeholder', value);\n this._elements.input.placeholder = value;\n }\n\n /**\n The value of the color. This value can be set in 5 different formats (HEX, RGB, RGBA, HSB and CMYK). Corrects a\n hex value, if it is represented by 3 or 6 characters with or without '#'\n\n e.g:\n HEX: #FFFFFF\n RGB: rgb(16,16,16)\n RGBA: rgba(215,40,40,0.9)\n RGBA: hsb(360,100,100)\n CMYK: cmyk(0,100,50,0)\n\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n return this._value || '';\n }\n\n set value(value) {\n const oldColor = new Color();\n oldColor.value = this.value;\n\n const newColor = new Color();\n newColor.value = value;\n\n if (!newColor.isSimilarTo(oldColor, false)) {\n this._value = value;\n\n // make sure right ColorInput.Item is selected even if input field was set by hand\n this._selectColorInputColor(newColor);\n\n // trigger a change event\n this.trigger('coral-colorinput:_valuechange');\n }\n\n // always set the input to the current value\n this._elements.input.value = this.value;\n\n this._updateColorPreview();\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.input.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.input.name = value;\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n\n this._elements.input.disabled = this.disabled;\n this._elements.colorPreview.disabled = this._disabled || this.readOnly;\n\n this._syncColorPreviewIcon();\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n this._elements.input.invalid = this.invalid;\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n\n this._elements.input.required = this._required;\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.input.readOnly = this._readOnly;\n this._elements.colorPreview.disabled = this.disabled || this._readOnly;\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n // Sync input aria-labelledby\n this._elements.input[value ? 'setAttribute' : 'removeAttribute']('aria-labelledby', value);\n\n // in case the user focuses the buttons, he will still get a notion of the usage of the component\n if (this.labelledBy) {\n this.setAttribute('aria-labelledby', this.labelledBy);\n this._elements.colorPreview.setAttribute('aria-labelledby',\n [this.labelledBy,\n this._elements.colorPreview.label.id].join(' '));\n } else {\n this.removeAttribute('aria-labelledby');\n this._elements.colorPreview.removeAttribute('aria-labelledby');\n }\n }\n\n /** @private */\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _onItemAdded(item) {\n this._validateSelection(item);\n\n if (this._elements.overlay.open) {\n // simply close the overlay whenever a color is added\n this._elements.overlay.open = false;\n }\n }\n\n /** @private */\n _onItemRemoved() {\n if (this._elements.overlay.open) {\n // simply close the overlay whenever a color is removed\n this._elements.overlay.open = false;\n }\n }\n\n /** @private */\n _validateSelection(item) {\n const selectedItems = this.items._getAllSelected();\n\n // Last selected item wins\n item = item || selectedItems[selectedItems.length - 1];\n\n if (item && item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n\n this._triggerChangeEvent();\n }\n\n /** @private */\n _triggerChangeEvent() {\n const selectedItem = this.selectedItem;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && selectedItem !== oldSelection) {\n // update hidden fields\n if (selectedItem) {\n this.value = selectedItem.getAttribute('value');\n }\n\n this.trigger('coral-colorinput:change', {\n oldSelection: oldSelection,\n selection: selectedItem\n });\n\n this._oldSelection = selectedItem;\n }\n }\n\n /** @ignore */\n _onColorPreviewClick(event) {\n // restore focus to appropriate element when overlay closes\n this._elements.overlay.returnFocusTo(this.variant === variant.SWATCH ? event.matchedTarget : this._elements.input);\n }\n\n _onInputChange(event) {\n if (event.target === this._elements.input) {\n // only handle changes to the hidden input field ...\n\n // stops the current event\n event.stopPropagation();\n\n const color = new Color();\n color.value = event.target[this._eventTargetProperty];\n\n this._setActiveColor(color);\n }\n }\n\n /** @ignore */\n _onKeyDown(event) {\n event.stopPropagation();\n\n // restore focus to appropriate element when overlay closes\n this._elements.overlay.returnFocusTo(this.variant === variant.SWATCH ? event.matchedTarget : this._elements.input);\n\n this._elements.overlay.open = true;\n }\n\n /** @ignore */\n _onKeyEsc(event) {\n if (!this._elements.overlay.open) {\n return;\n }\n\n event.stopPropagation();\n\n this._elements.overlay.open = false;\n }\n\n /** @ignore */\n _beforeOverlayOpen() {\n // Make sure appropriate tabbable descendant will receive focus\n if (this.showProperties === showProperties.ON) {\n this._elements.overlay.focusOnShow = this._elements.propertiesView._elements.colorPreview2;\n } else if (this.showSwatches === showSwatches.ON) {\n this._elements.overlay.focusOnShow =\n this._elements.overlay.querySelector('coral-colorinput-swatch[selected] > button') ||\n 'coral-colorinput-swatch > button';\n }\n\n // set aria-expanded state\n this._elements.input.setAttribute('aria-expanded', true);\n this._elements.colorPreview.setAttribute('aria-expanded', true);\n }\n\n /** @ignore */\n _onOverlayClose() {\n // set aria-expanded state\n this._elements.input.setAttribute('aria-expanded', true);\n this._elements.colorPreview.setAttribute('aria-expanded', false);\n }\n\n /**\n Checks if the current input is valid or not. This check will only be performed on user interaction.\n\n @ignore\n */\n _validateInputValue() {\n this.invalid = this.value !== '' && this.valueAsColor === null;\n }\n\n /** @ignore */\n _showOrHideView(view, hide) {\n view.hidden = hide;\n // Remove both classes and add only the required one\n this._elements.overlay.classList.remove('_coral-ColorInput-onlySwatchesView', '_coral-ColorInput-onlyPropertiesView');\n\n if (!this._elements.propertiesView.hidden && this._elements.swatchesView.hidden) {\n this._elements.overlay.classList.add('_coral-ColorInput-onlyPropertiesView');\n } else if (this._elements.propertiesView.hidden && !this._elements.swatchesView.hidden) {\n this._elements.overlay.classList.add('_coral-ColorInput-onlySwatchesView');\n }\n\n // Update accessibility label for colorPreview button when only swatches are shown\n if (this.showProperties === showProperties.OFF &&\n this.showSwatches === showSwatches.ON) {\n this._elements.colorPreview.label.textContent = i18n.get('Swatches');\n if (this.previousElementSibling) {\n this.previousElementSibling.setAttribute('aria-label', i18n.get('Confirm hex value'));\n }\n this._elements.overlay.setAttribute('aria-label', i18n.get('Swatches'));\n } else {\n this._elements.colorPreview.label.textContent = i18n.get('Color Picker');\n this._elements.overlay.setAttribute('aria-label', i18n.get('Color Picker'));\n }\n }\n\n /** @ignore */\n _recalculateGeneratedColors() {\n // remove old generated tint colors\n const childrenList = this.querySelectorAll('coral-colorinput-item[coral-colorinput-generatedcolor]');\n const childrenListLength = childrenList.length;\n for (let i = 0 ; i < childrenListLength ; i++) {\n childrenList[i].remove();\n }\n\n if (this.autoGenerateColors !== autoGenerateColors.OFF) {\n const colorElements = this.items.getAll();\n\n let colorEl = null;\n let color = null;\n let colorIndex = 0;\n let generatedIndex = 0;\n\n let generatedColorEl = null;\n let generatedColors = [];\n\n for (colorIndex = 0 ; colorIndex < colorElements.length ; colorIndex++) {\n colorEl = colorElements[colorIndex];\n color = new Color();\n color.value = colorEl.value;\n\n generatedColors = this.autoGenerateColors === autoGenerateColors.TINTS ? color.calculateTintColors(5) : color.calculateShadeColors(5);\n\n for (generatedIndex = generatedColors.length - 1 ; generatedIndex >= 0 ; generatedIndex--) {\n generatedColorEl = new ColorInputItem();\n // be sure to add alpha\n generatedColorEl.value = generatedColors[generatedIndex].rgbaValue;\n generatedColorEl.setAttribute('coral-colorinput-generatedcolor', '');\n colorEl.parentNode.insertBefore(generatedColorEl, colorEl.nextSibling);\n }\n }\n }\n }\n\n /** @ignore */\n _syncColorPreviewIcon() {\n const colorPreview = this._elements.colorPreview;\n\n colorPreview.icon = this.disabled && this.variant === variant.SWATCH ? 'lockClosed' : '';\n colorPreview.iconSize = Icon.size.SMALL;\n }\n\n /** @ignore */\n _setActiveColor(color) {\n // method used by subviews to set a color and trigger a change event if needed\n const oldColor = this.valueAsColor ? this.valueAsColor : new Color();\n this.valueAsColor = color;\n\n if (!oldColor.isSimilarTo(this.valueAsColor, false)) {\n // test if current color is invalid\n this._validateInputValue();\n\n // trigger a change event (change events should only be triggered when an user interaction happened)\n this.trigger('change');\n }\n }\n\n /** @ignore */\n _selectColorInputColor(newColor) {\n let selectColorInItems = true;\n\n if (this.selectedItem) {\n const selectedColor = new Color();\n selectedColor.value = this.selectedItem.value;\n\n // only select color if it is not already selected\n selectColorInItems = !selectedColor.isSimilarTo(newColor, true);\n }\n\n if (selectColorInItems) {\n // select right color in this.items (if necessary and possible)\n const selectedItem = this.selectedItem;\n if (selectedItem) {\n selectedItem.removeAttribute('selected');\n }\n\n const colorElements = this.items.getAll();\n const colorElementsCount = colorElements.length;\n\n let color = null;\n for (let i = 0 ; i < colorElementsCount ; i++) {\n color = new Color();\n color.value = colorElements[i].getAttribute('value');\n\n if (color.isSimilarTo(newColor, true)) {\n colorElements[i].setAttribute('selected', '');\n break;\n }\n }\n }\n }\n\n /** @private */\n _setDefaultSelectedItem() {\n const selectedItem = this.selectedItem;\n const value = this.value;\n\n // Sync selectedItem if value is set\n if (value && !selectedItem) {\n const color = new Color();\n color.value = value;\n this._selectColorInputColor(color);\n }\n\n // Also sync color preview\n this._updateColorPreview();\n }\n\n _updateColorPreview() {\n const isValueEmpty = this.value === '';\n\n // update color preview\n const currentColor = this.valueAsColor;\n this._elements.colorPreview.style.backgroundColor = currentColor ? currentColor.rgbaValue : '';\n this.classList.toggle('_coral-ColorInput--novalue', isValueEmpty);\n\n // Update preview in overlay\n const preview = this._elements.overlay.querySelector('._coral-ColorInput-preview');\n if (preview) {\n preview.classList.toggle('_coral-ColorInput-preview--novalue', isValueEmpty);\n }\n this._elements.input.setAttribute(\"aria-label\", this._items._container._color._value);\n }\n\n /**\n Returns {@link ColorInput} variants.\n\n @return {ColorInputVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /**\n Returns {@link ColorInput} auto generated colors options.\n\n @return {ColorInputAutoGenerateColorsEnum}\n */\n static get autoGenerateColors() {\n return autoGenerateColors;\n }\n\n /**\n Returns {@link ColorInput} swatches display options.\n\n @return {ColorInputShowSwatchesEnum}\n */\n static get showSwatches() {\n return showSwatches;\n }\n\n /**\n Returns {@link ColorInput} color properties display options.\n\n @return {ColorInputShowDefaultColorsEnum}\n */\n static get showDefaultColors() {\n return showDefaultColors;\n }\n\n /**\n Returns {@link ColorInput} default colors display options.\n\n @return {ColorInputShowPropertiesEnum}\n */\n static get showProperties() {\n return showProperties;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n autogeneratecolors: 'autoGenerateColors',\n showswatches: 'showSwatches',\n showproperties: 'showProperties',\n showdefaultcolors: 'showDefaultColors'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'variant',\n 'autogeneratecolors',\n 'showswatches',\n 'showproperties',\n 'showdefaultcolors',\n 'placeholder'\n ]);\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this.setAttribute('role', 'group');\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.defaultPalette);\n frag.appendChild(this._elements.input);\n frag.appendChild(this._elements.buttonWrapper);\n frag.appendChild(this._elements.overlay);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } else {\n frag.appendChild(child);\n }\n }\n\n // we use 'this' so properly aligns to the input\n this._elements.overlay.target = this._elements.colorPreview;\n\n this.appendChild(frag);\n\n // Make sure colors are generated\n this.autoGenerateColors = this.autoGenerateColors;\n this.showDefaultColors = this.showDefaultColors;\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n\n // Make sure we don't have multiple items selected\n this._validateSelection();\n\n // If value is set to default palette item value, we have to make sure it's selected\n this._setDefaultSelectedItem();\n\n // We can trigger events gain\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItem;\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n});\n\nexport default ColorInput;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 692, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 28, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 693, "kind": "typedef", "name": "ColorInputVariantEnum", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInputVariantEnum", "access": "public", "description": "Enumeration for {@link ColorInput} variants.", "lineNumber": 40, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "Use ColorInput as a formfield (default)." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SWATCH", "description": "Use a simple swatch as ColorInput." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColorInputVariantEnum" } }, { "__docId__": 694, "kind": "typedef", "name": "ColorInputAutoGenerateColorsEnum", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInputAutoGenerateColorsEnum", "access": "public", "description": "Enumeration for {@link ColorInput} auto generated colors options.", "lineNumber": 57, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Disable auto generation." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SHADES", "description": "Automatically generate shades (darker colors) of all colors." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "TINTS", "description": "Automatically generate tints (lighter colors) of all colors." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColorInputAutoGenerateColorsEnum" } }, { "__docId__": 695, "kind": "typedef", "name": "ColorInputShowSwatchesEnum", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInputShowSwatchesEnum", "access": "public", "description": "Enumeration for {@link ColorInput} swatches display options.", "lineNumber": 73, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Display swatches view (default)." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Hide swatches view." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColorInputShowSwatchesEnum" } }, { "__docId__": 696, "kind": "typedef", "name": "ColorInputShowPropertiesEnum", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInputShowPropertiesEnum", "access": "public", "description": "Enumeration for {@link ColorInput} color properties display options.", "lineNumber": 88, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Display color properties view (default)." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Hide color properties view." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColorInputShowPropertiesEnum" } }, { "__docId__": 697, "kind": "typedef", "name": "ColorInputShowDefaultColorsEnum", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInputShowDefaultColorsEnum", "access": "public", "description": "Enumeration for {@link ColorInput} default colors display options.", "lineNumber": 103, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Display default colors (default)." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Hide default colors." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColorInputShowDefaultColorsEnum" } }, { "__docId__": 698, "kind": "variable", "name": "ColorInput", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInput.js~ColorInput", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput component than can be used as a form field to select from a list of color options.", "lineNumber": 116, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput" }, { "tagName": "@classdesc", "tagValue": "A ColorInput component than can be used as a form field to select from a list of color options." }, { "tagName": "@htmltag", "tagValue": "coral-colorinput" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 699, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport BaseColorInputAbstractSubview from './BaseColorInputAbstractSubview';\nimport Color from './Color';\nimport '../../../coral-component-button';\nimport '../../../coral-component-textfield';\nimport './ColorInputSlider';\nimport propertiesSubview from '../templates/colorProperties';\nimport {commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ColorInput-colorProperties';\n\n/**\n @class Coral.ColorInput.ColorProperties\n @classdesc A ColorInput Color properties component\n @htmltag coral-colorinput-colorproperties\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseColorInputAbstractSubview}\n */\nconst ColorInputColorProperties = Decorator(class extends BaseColorInputAbstractSubview(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n this._delegateEvents(commons.extend(this._events, {\n 'change [handle=\"redSlider\"]': '_onRedSliderChange',\n 'change [handle=\"greenSlider\"]': '_onGreenSliderChange',\n 'change [handle=\"blueSlider\"]': '_onBlueSliderChange',\n 'change [handle=\"alphaSlider\"]': '_onAlphaSliderChange',\n 'change ._coral-ColorInput-editHex': '_onChangeHex',\n 'change ._coral-ColorInput-editRgba': '_onChangeRgba'\n }));\n\n // Templates\n this._elements = {};\n propertiesSubview.call(this._elements, {commons, i18n});\n }\n\n /** @ignore */\n _onColorInputChange() {\n const newColor = this._colorinput.valueAsColor;\n const colorPreview = this._elements.colorPreview2;\n let rgba;\n\n if (!newColor) {\n // update the colorPreview background color, state, and label\n colorPreview.setAttribute('aria-pressed', 'true');\n colorPreview.setAttribute('aria-label', i18n.get('Color not set'));\n\n // reset Hex value to empty\n this._elements.hexInput.value = '';\n } else {\n rgba = newColor.rgba;\n\n // update the colorPreview background color, state, and label\n colorPreview.style.backgroundColor = newColor.rgbValue;\n colorPreview.setAttribute('aria-pressed', 'false');\n colorPreview.setAttribute('aria-label', i18n.get('{value}, Color', {\n value: parseFloat(rgba.a) === 1 ? newColor.value : newColor.rgbaValue\n }));\n\n // update the Hex input value\n this._elements.hexInput.value = newColor.hexValue.substr(1);\n }\n\n const prefixes = ['red', 'green', 'blue', 'alpha'];\n const prefixesLength = prefixes.length;\n let prefix;\n let abbr;\n let isAlpha;\n let val;\n\n // update rgba slider and input values\n for (let i = 0 ; i < prefixesLength ; i++) {\n prefix = prefixes[i];\n abbr = prefix.substr(0, 1);\n isAlpha = i === prefixesLength - 1;\n\n // default slider and input value\n val = isAlpha ? 100 : 127;\n\n // with new color, get appropriate RGBA value\n if (newColor) {\n if (!rgba) {\n val = '';\n } else if (isAlpha) {\n val = parseInt(rgba[abbr] * 100, 10);\n } else {\n val = rgba[abbr];\n }\n }\n\n // update the slider and input values\n this._elements[`${prefix}Slider`].value = this._elements[`${prefix}Input`].value = val;\n }\n\n if (colorPreview === document.activeElement) {\n // force blur and focus on colorButton so that new color or state is announced\n colorPreview.blur();\n\n // delay focus by 100ms so that screen reader has time to adjust to label with updated color value\n window.setTimeout(() => {\n colorPreview.focus();\n }, 100);\n }\n }\n\n /** @ignore */\n _onRedSliderChange(event) {\n this._elements.redInput.value = this._elements.redSlider.value;\n this._onChangeRgba(event);\n }\n\n /** @ignore */\n _onGreenSliderChange(event) {\n this._elements.greenInput.value = this._elements.greenSlider.value;\n this._onChangeRgba(event);\n }\n\n /** @ignore */\n _onBlueSliderChange(event) {\n this._elements.blueInput.value = this._elements.blueSlider.value;\n this._onChangeRgba(event);\n }\n\n /** @ignore */\n _onAlphaSliderChange(event) {\n this._elements.alphaInput.value = this._elements.alphaSlider.value;\n this._onChangeRgba(event);\n }\n\n /** @ignore */\n _onChangeHex(event) {\n event.stopPropagation();\n\n // Value of hexInput field is without '#'.\n const value = `#${this._elements.hexInput.value}`;\n const color = new Color();\n color.value = value;\n\n if (color.hex === null) {\n // no valid color value\n this._elements.hexInput.value = '';\n // Save last valid color\n if (this._colorinput.valueAsColor !== null) {\n this.constructor._lastValidColor = this._colorinput.valueAsColor;\n }\n this._colorinput._setActiveColor(null);\n } else {\n this._colorinput._setActiveColor(color);\n }\n }\n\n /** @ignore */\n _onChangeRgba(event) {\n event.stopPropagation();\n\n const r = parseInt(this._elements.redInput.value, 10);\n const g = parseInt(this._elements.greenInput.value, 10);\n const b = parseInt(this._elements.blueInput.value, 10);\n const a = parseInt(this._elements.alphaInput.value, 10);\n\n let colorValid = true;\n if (isNaN(r) || r < 0 || r > 255) {\n colorValid = false;\n this._elements.redInput.value = '';\n }\n\n if (isNaN(g) || g < 0 || g > 255) {\n colorValid = false;\n this._elements.greenInput.value = '';\n }\n\n if (isNaN(b) || b < 0 || b > 255) {\n colorValid = false;\n this._elements.blueInput.value = '';\n }\n\n if (isNaN(a) || a < 0 || a > 100) {\n colorValid = false;\n this._elements.alphaInput.value = '';\n }\n\n if (colorValid) {\n const color = new Color();\n color.rgba = {\n r: r,\n g: g,\n b: b,\n a: a / 100\n };\n this._colorinput._setActiveColor(color);\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Support cloneNode\n const subview = this.querySelector('._coral-ColorInput-propertiesSubview');\n if (subview) {\n subview.remove();\n }\n\n this.appendChild(this._elements.propertiesSubview);\n }\n});\n\nexport default ColorInputColorProperties;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 700, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 701, "kind": "variable", "name": "ColorInputColorProperties", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputColorProperties.js~ColorInputColorProperties", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput Color properties component", "lineNumber": 33, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput.ColorProperties" }, { "tagName": "@classdesc", "tagValue": "A ColorInput Color properties component" }, { "tagName": "@htmltag", "tagValue": "coral-colorinput-colorproperties" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseColorInputAbstractSubview}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput.ColorProperties();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 702, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport Color from './Color';\nimport {transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.ColorInput.Item\n @classdesc A ColorInput Item component\n @htmltag coral-colorinput-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ColorInputItem = Decorator(class extends BaseComponent(HTMLElement) {\n /**\n The value of the color. This value can be set in different formats (HEX, RGB, RGBA, HSB, HSL, HSLA and CMYK).\n Corrects a hex value, if it is represented by 3 or 6 characters with or without '#'.\n\n e.g:\n HEX: #FFFFFF\n RGB: rgb(16,16,16)\n RGBA: rgba(215,40,40,0.9)\n HSB: hsb(360,100,100)\n HSL: hsl(360,100,100)\n HSLA: hsla(360,100%,100%, 0.9)\n CMYK: cmyk(0,100,50,0)\n\n @type {String}\n @default \"\"\n @htmlattribute value\n @htmlattributereflected\n */\n get value() {\n return this._value || '';\n }\n\n set value(value) {\n // invalid values fallback to empty string\n const color = new Color();\n color.value = value;\n\n // invalid values fallback to empty string\n this._value = color.rgb !== null ? value : '';\n this._reflectAttribute('value', this._value);\n }\n\n /**\n Whether the Item is selected.\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n value = transform.booleanAttr(value);\n\n this._selected = value;\n this._reflectAttribute('selected', this._selected);\n\n this.classList.toggle('is-selected', this._selected);\n this.setAttribute('aria-selected', this._selected);\n\n this.trigger('coral-colorinput-item:_selectedchanged');\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', 'value']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // adds the role to support accessibility\n this.setAttribute('role', 'option');\n }\n});\n\nexport default ColorInputItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInputItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 703, "kind": "variable", "name": "ColorInputItem", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputItem.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputItem.js~ColorInputItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput Item component", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput.Item" }, { "tagName": "@classdesc", "tagValue": "A ColorInput Item component" }, { "tagName": "@htmltag", "tagValue": "coral-colorinput-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput.Item();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 704, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ExtensibleSlider, Slider} from '../../../coral-component-slider';\nimport '../../../coral-component-tooltip';\nimport sliderBase from '../templates/sliderBase';\nimport {transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAMES = ['_coral-ColorInput-slider', '_coral-Slider--color'];\n\n/**\n @class Coral.ColorInput.Slider\n @classdesc A ColorInput Slider component\n @htmltag coral-colorinput-slider\n @extends {Slider}\n */\nconst ColorInputSlider = Decorator(class extends ExtensibleSlider {\n /**\n The gradient shown as slider background as space separated values (at least 2 values needed).\n e.g: #ff0000 #ffff00 #00ff00 #00ffff #0000ff #ff00ff #ff0000\n\n @type {String}\n @default \"\"\n @htmlattribute gradient\n */\n get gradient() {\n return this._gradient || '';\n }\n\n set gradient(value) {\n this._gradient = transform.string(value);\n\n const bar = this._elements.bar;\n const barStyle = bar.style;\n\n const stops = this.gradient.split(' ');\n const amountStops = stops.length;\n\n // remove old gradients\n barStyle.backgroundImage = 'none';\n barStyle.filter = '';\n\n if (amountStops < 2) {\n return;\n }\n\n let partialGradientStr = '';\n for (let i = 0 ; i < amountStops ; i++) {\n partialGradientStr += `, ${stops[i]} ${Math.abs(i * 100 / (amountStops - 1))}%`;\n }\n\n barStyle.backgroundImage = `-moz-linear-gradient(to right${partialGradientStr})`;\n barStyle.backgroundImage = `-ms-linear-gradient(to right${partialGradientStr})`;\n barStyle.backgroundImage = `-o-linear-gradient(to right${partialGradientStr})`;\n barStyle.backgroundImage = `-webkit-linear-gradient(to right${partialGradientStr})`;\n barStyle.backgroundImage = `linear-gradient(to right${partialGradientStr})`;\n barStyle.filter = `progid:DXImageTransform.Microsoft.gradient(startColorstr='${stops[0]}', endColorstr='${stops[1]}', gradientType=1)`;\n }\n\n _moveHandles() {\n const calculatePercent = (value) => (value - this.min) / (this.max - this.min) * 100;\n const labelValue = [];\n\n // Set the handle position as a percentage based on the stored values\n this._elements.handles.forEach((handle, index) => {\n const percent = calculatePercent(this._values[index]);\n handle.style.left = `${percent}%`;\n\n labelValue.push(this._getLabel(this._values[index]));\n });\n\n this._elements.labelValue.textContent = labelValue.length > 1 ? labelValue.join(' - ') : labelValue[0];\n }\n\n /** @override */\n _getTemplate() {\n return sliderBase;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['gradient']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(...CLASSNAMES);\n }\n});\n\nexport default ColorInputSlider;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 705, "kind": "variable", "name": "CLASSNAMES", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js~CLASSNAMES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string[]" ] }, "ignore": true }, { "__docId__": 706, "kind": "variable", "name": "ColorInputSlider", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSlider.js~ColorInputSlider", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput Slider component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput.Slider" }, { "tagName": "@classdesc", "tagValue": "A ColorInput Slider component" }, { "tagName": "@htmltag", "tagValue": "coral-colorinput-slider" }, { "tagName": "@extends", "tagValue": "{Slider}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput.Slider();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 707, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport BaseColorInputAbstractSubview from './BaseColorInputAbstractSubview';\nimport Color from './Color';\nimport '../../../coral-component-button';\nimport colorButton from '../templates/colorButton';\nimport {commons, i18n, transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ColorInput-swatch';\n\n/**\n @class Coral.ColorInput.Swatch\n @classdesc A ColorInput Swatch component\n @htmltag coral-colorinput-swatch\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseColorInputAbstractSubview}\n */\nconst ColorInputSwatch = Decorator(class extends BaseColorInputAbstractSubview(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(this._events);\n\n // Templates\n this._elements = {};\n colorButton.call(this._elements);\n }\n\n /**\n Whether the Item is selected.\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n value = transform.booleanAttr(value);\n\n if (!value || value && !this.disabled) {\n this._selected = value;\n this._reflectAttribute('selected', this.disabled ? false : this._selected);\n this.removeAttribute('aria-selected', this._selected);\n\n this.classList.toggle('is-selected', this._selected);\n this._elements.colorButton.setAttribute('aria-selected', this._selected);\n\n this._elements.colorButton.tabIndex = this.tabIndex;\n this.removeAttribute('tabindex');\n\n this._elements.colorButton[this._selected ? 'setAttribute' : 'removeAttribute']('aria-label',\n `${i18n.get('checked')} ${this._elements.colorButton.label.textContent}`);\n\n this.trigger('coral-colorinput-swatch:_selectedchanged');\n }\n }\n\n /**\n The Coral.ColorInput.Item that the swatch is a visual representation of. It accepts a DOM element or a CSS selector.\n If a CSS selector is provided, the first matching element will be used.\n\n @type {HTMLElement|String}\n @default null\n @htmlattribute targetcolor\n */\n get targetColor() {\n return this._targetColor || null;\n }\n\n set targetColor(value) {\n if (typeof value === 'string') {\n value = this.querySelector(value);\n }\n\n // Store new value\n this._targetColor = value;\n\n let cssColorValue = '';\n let hexColorValue = '';\n\n if (this._targetColor) {\n const color = new Color();\n color.value = this._targetColor.value;\n cssColorValue = color.rgbaValue;\n hexColorValue = color.hexValue;\n }\n\n // Update background color and text label for color swatch\n if (cssColorValue) {\n this._elements.colorButton.style.backgroundColor = cssColorValue;\n this._elements.colorButton.label.textContent = hexColorValue;\n this.setAttribute('data-value', hexColorValue);\n } else {\n this._elements.colorButton.classList.add('_coral-ColorInput-swatch-novalue');\n this._elements.colorButton.label.textContent = i18n.get('unset');\n this.setAttribute('data-value', '');\n }\n }\n\n /**\n Whether the color preview is disabled or not.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._elements.colorButton.disabled;\n }\n\n set disabled(value) {\n this._elements.colorButton.disabled = value;\n this._reflectAttribute('disabled', this.disabled);\n }\n\n /**\n The tabindex of the color preview button.\n So that we don't wind up with nested focusable elements,\n the internal colorButton should should receive the tabIndex property,\n while the coral-colorinput-swatch should reflect the value using the _tabindex attribute.\n\n @type {Integer}\n @default -1\n @htmlattribute tabindex\n @htmlattributereflected\n */\n get tabIndex() {\n return this._elements.colorButton.tabIndex;\n }\n\n set tabIndex(value) {\n this._elements.colorButton.tabIndex = value;\n this.removeAttribute('tabindex');\n }\n\n /** @ignore */\n _onColorInputChange() {\n if (this.targetColor) {\n // sync selections\n this.selected = this.targetColor.selected;\n }\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n tabindex: 'tabIndex',\n targetcolor: 'targetColor'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'selected',\n 'tabindex',\n 'disabled',\n 'targetcolor'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME, 'u-coral-clearFix');\n\n // adds the role to support accessibility\n this.setAttribute('role', 'presentation');\n\n // Support cloneNode\n const button = this.querySelector('[handle=\"colorButton\"]');\n if (button) {\n button.remove();\n }\n\n this.appendChild(this._elements.colorButton);\n }\n});\n\nexport default ColorInputSwatch;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 708, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 709, "kind": "variable", "name": "ColorInputSwatch", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatch.js~ColorInputSwatch", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput Swatch component", "lineNumber": 31, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput.Swatch" }, { "tagName": "@classdesc", "tagValue": "A ColorInput Swatch component" }, { "tagName": "@htmltag", "tagValue": "coral-colorinput-swatch" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseColorInputAbstractSubview}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput.Swatch();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 710, "kind": "file", "name": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport BaseColorInputAbstractSubview from './BaseColorInputAbstractSubview';\nimport ColorInputSwatch from './ColorInputSwatch';\nimport Color from './Color';\nimport {SelectableCollection} from '../../../coral-collection';\nimport swatchesHeader from '../templates/swatchesHeader';\nimport {commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ColorInput-swatches';\n\n/**\n @class Coral.ColorInput.Swatches\n @classdesc A ColorInput Swatches component\n @htmltag coral-colorinput-swatches\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseColorInputAbstractSubview}\n */\nconst ColorInputSwatches = Decorator(class extends BaseColorInputAbstractSubview(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n 'click coral-colorinput-swatch': '_onSwatchClicked',\n 'keydown ._coral-ColorInput-swatch': '_onKeyDown',\n 'capture:focus coral-colorinput-swatch': '_onFocus',\n\n // private\n 'coral-colorinput-swatch:_selectedchanged': '_onItemSelectedChanged'\n }));\n\n // Templates\n this._elements = {};\n swatchesHeader.call(this._elements, {commons, i18n});\n\n // Used for eventing\n this._oldSelection = null;\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-colorinput-swatch',\n onItemAdded: this._validateSelection\n });\n }\n return this._items;\n }\n\n /**\n The selected item.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getLastSelected();\n }\n\n /** @private */\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _validateSelection(item) {\n const selectedItems = this.items._getAllSelected();\n\n // Last selected item wins\n item = item || selectedItems[selectedItems.length - 1];\n\n if (item && item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n\n this._triggerChangeEvent();\n }\n\n /** @private */\n _triggerChangeEvent() {\n const selectedItem = this.selectedItem;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && selectedItem !== oldSelection) {\n // update hidden fields\n if (selectedItem) {\n this.value = selectedItem.value;\n }\n\n this.trigger('coral-colorinput-swatches:change', {\n oldSelection: oldSelection,\n selection: selectedItem\n });\n\n this._oldSelection = selectedItem;\n }\n }\n\n /** @ignore */\n _beforeOverlayOpen() {\n // relayout swatches if items have been added/removed/moved...\n const colorElements = this._colorinput.items.getAll();\n let colorsElementsChanged = false;\n if (!this._cachedColorElements) {\n colorsElementsChanged = true;\n } else if (this._cachedColorElements.length !== colorElements.length) {\n colorsElementsChanged = true;\n } else if (this._cachedColorElements.length === colorElements.length) {\n for (let i = 0 ; i < colorElements.length ; i++) {\n if (this._cachedColorElements[i] !== colorElements[i]) {\n colorsElementsChanged = true;\n break;\n }\n }\n }\n\n this._cachedColorElements = colorElements;\n\n if (colorsElementsChanged) {\n this._layoutColorSwatch();\n }\n\n this._ensureKeyboardAccess();\n }\n\n /** @ignore */\n _onColorInputChange() {\n this._ensureKeyboardAccess();\n }\n\n /**\n If no swatch is selected, make sure that the first swatch is tabbable\n @ignore\n */\n _ensureKeyboardAccess() {\n if (!this.querySelector('coral-colorinput-swatch[selected]')) {\n const firstSwatch = this.querySelector('coral-colorinput-swatch');\n if (firstSwatch) {\n firstSwatch.tabIndex = 0;\n }\n }\n }\n\n /** @ignore */\n _layoutColorSwatch() {\n // Clear container before adding elements to avoid multiple addition\n this._elements.swatchesContainer.innerHtml = '';\n const colors = this._colorinput.items.getAll();\n\n const colorsLength = colors.length;\n let swatchSelected = false;\n for (let colorCount = 0 ; colorCount < colorsLength ; colorCount++) {\n const color = colors[colorCount];\n\n const swatch = new ColorInputSwatch();\n this._elements.swatchesContainer.appendChild(swatch);\n swatch.targetColor = color;\n\n if (color.selected) {\n swatch[color.selected ? 'setAttribute' : 'removeAttribute']('selected', color.selected);\n swatchSelected = true;\n }\n\n // Update color button tabindex depending on selected state\n swatch.tabIndex = swatch.selected ? 0 : -1;\n }\n\n // If no swatch is selected, make sure that the first swatch is focusable\n if (!swatchSelected) {\n this._ensureKeyboardAccess();\n }\n }\n\n /** @ignore */\n _onSwatchClicked(event) {\n event.stopPropagation();\n\n const colorButton = event.target;\n const swatch = colorButton.closest('coral-colorinput-swatch');\n\n if (!swatch.selected) {\n const color = new Color();\n color.value = swatch.targetColor ? swatch.targetColor.value : '';\n this._colorinput._setActiveColor(color);\n swatch.selected = true;\n }\n swatch.firstChild.focus();\n }\n\n /** @ignore */\n _onKeyDown(event) {\n const overlay = this._colorinput._elements.overlay;\n\n // only if overlay is open\n if (!overlay.open) {\n return;\n }\n\n const allItems = this.items.getAll();\n\n const currentIndex = allItems.indexOf(event.matchedTarget);\n let preventDefault = true;\n let newIndex = currentIndex;\n\n switch (event.which) {\n // return\n case 13:\n // Wait a frame before closing so that focus is restored correctly\n window.requestAnimationFrame(() => {\n overlay.open = false;\n });\n break;\n // left arrow\n case 37:\n newIndex -= 1;\n break;\n // up arrow\n case 38:\n newIndex -= 4;\n break;\n // right arrow\n case 39:\n newIndex += 1;\n break;\n // down arrow\n case 40:\n newIndex += 4;\n break;\n default:\n preventDefault = false;\n break;\n }\n\n // If any action has been taken prevent event propagation\n if (preventDefault) {\n event.preventDefault();\n\n if (newIndex < 0 || newIndex >= allItems.length) {\n return;\n }\n\n // show right page in carousel and focus right swatch\n const swatch = allItems[newIndex];\n const color = new Color();\n\n color.value = swatch.targetColor ? swatch.targetColor.value : '';\n this._colorinput._setActiveColor(color);\n swatch.selected = true;\n\n swatch.firstChild.focus();\n }\n }\n\n /**\n Ensure that only one swatch can receive tab focus at a time\n @ignore\n */\n _onFocus(event) {\n const allItems = this.items.getAll();\n\n for (let i = 0 ; i < allItems.length ; i++) {\n const swatch = allItems[i];\n if (!swatch.contains(event.matchedTarget)) {\n swatch.tabIndex = -1;\n }\n }\n\n event.matchedTarget.tabIndex = 0;\n if (document.activeElement !== event.matchedTarget.firstChild) {\n event.matchedTarget.firstChild.focus();\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // adds the role to support accessibility\n this.setAttribute('role', 'listbox');\n\n // Support cloneNode\n const swatchesSubview = this.querySelector('._coral-ColorInput-swatchesSubview');\n if (swatchesSubview) {\n swatchesSubview.remove();\n }\n\n // add header\n this.appendChild(this._elements.swatchesSubview);\n\n // add accessibility label\n this.setAttribute('aria-labelledby', this._elements.swatchesHeaderTitle.id);\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n this._validateSelection();\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItem;\n }\n});\n\nexport default ColorInputSwatches;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 711, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 712, "kind": "variable", "name": "ColorInputSwatches", "memberof": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js", "static": true, "longname": "coral-spectrum/coral-component-colorinput/src/scripts/ColorInputSwatches.js~ColorInputSwatches", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorInput}", "description": "A ColorInput Swatches component", "lineNumber": 32, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorInput.Swatches" }, { "tagName": "@classdesc", "tagValue": "A ColorInput Swatches component" }, { "tagName": "@htmltag", "tagValue": "coral-colorinput-swatches" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseColorInputAbstractSubview}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorInput.Swatches();" ], "see": [ "../examples/#colorinput" ], "type": { "types": [ "*" ] } }, { "__docId__": 713, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {BaseComponent} from '../../../coral-base-component';\nimport colorArea from '../templates/colorArea';\nimport {validate, transform, events, commons, i18n, Keys} from '../../../coral-utils';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport colorUtil from \"./ColorUtil\";\n\nconst CLASSNAME = '_coral-ColorPicker-ColorArea';\n\n/**\n @class Coral.ColorPicker.ColorArea\n @classdesc A ColorPicker area component to select Saturation and Value\n @htmltag coral-colorpicker-colorarea\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nclass ColorArea extends BaseComponent(HTMLElement) {\n constructor() {\n super();\n\n this._delegateEvents(commons.extend(this._events, {\n 'key:up': '_handleKey',\n 'key:right': '_handleKey',\n 'key:down': '_handleKey',\n 'key:left': '_handleKey',\n 'key:pageUp': '_handleKey',\n 'key:pageDown': '_handleKey',\n 'key:home': '_handleKey',\n 'key:end': '_handleKey',\n \n 'input': '_onInputChangeHandler',\n \n 'touchstart': '_onMouseDown',\n 'mousedown': '_onMouseDown',\n 'capture:focus': '_focus',\n 'capture:blur': '_blur'\n }));\n \n // Templates\n this._elements = {};\n colorArea.call(this._elements, {commons, i18n});\n // default values\n this._x = 1;\n this._y = 1;\n this._hue = 120;\n this._minX = 0;\n this._minY = 0;\n this._maxX = 1;\n this._maxY = 1;\n this._stepX = 0.01;\n this._stepY = 0.01;\n }\n\n /** @ignore */ \n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.colorAreaGradient);\n frag.appendChild(this._elements.colorHandle);\n frag.appendChild(this._elements.sliderX);\n frag.appendChild(this._elements.sliderY);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } \n else {\n frag.appendChild(child);\n }\n }\n\n this.appendChild(frag);\n\n // These should be used to set a property since property handler aren't called until elements are attached to dom.\n // Attribute values are delivered to change-listeners even if element isn't attached to dom yet, so attributes \n // can be set to e.g. this._elements.colorHandle.\n this._handle = this.querySelector('._coral-ColorPicker-ColorArea-colorHandle');\n this._sliderX = this.querySelector('._coral-ColorPicker-ColorArea-slider[name=\"x\"]');\n this._sliderY = this.querySelector('._coral-ColorPicker-ColorArea-slider[name=\"y\"]');\n this._gradient = this.querySelector('._coral-ColorPicker-ColorArea-gradient');\n this._updateHue(this._hue);\n this.x = this._x;\n this.y = this._y;\n this._updateHandle(this._hue, this.x, this.y, this.color);\n this._reflectAttribute('color', this.color);\n }\n\n /** \n The ColorArea label.\n @default ''\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get label() {\n return this._label;\n }\n \n set label(value) {\n this._label = value;\n this._reflectAttribute('label', this._label);\n if(this._elements.sliderX.getAttribute('aria-label') !== this._label) {\n this._elements.sliderX.setAttribute('aria-label', this._label);\n this._elements.sliderY.setAttribute('aria-label', this._label);\n }\n } \n\n /** \n The ColorArea x value. value should be in multiple of x-step size.\n @default 1\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get x() {\n return this._x;\n }\n \n set x(value) {\n let rawX = Number(value, 10);\n if(parseFloat(rawX).toFixed(3) !== parseFloat(this._x).toFixed(3)) {\n if(isNaN(rawX)) {\n rawX = this._minX;\n } \n this._x = this._snapValueToStep(rawX, this._minX, this._maxX, this._stepX);\n this._reflectAttribute('x', this._x);\n this.color = this._toHsvString(this._hue, this._x, this.y);\n }\n this._elements.sliderX.setAttribute('aria-valuetext', `${i18n.get('Saturation')}: ${Math.round(this._x / (this._maxX - this._minX) * 100)}%`);\n this._elements.sliderX.setAttribute('title', this.color);\n this._elements.sliderX.setAttribute('value', this._x);\n }\n\n /** @private */\n _toHsvString(hue, x, y) {\n const s = `${Math.round(this._x / (this._maxX - this._minX) * 100)}%`;\n const v = `${Math.round(this._y / (this._maxY - this._minY) * 100)}%`;\n return `hsv(${this._hue}, ${s}, ${v})`;\n }\n\n /** \n The ColorArea y value. value should be in multiple of y-step size.\n @default 1\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get y() {\n return this._y;\n }\n \n set y(value) {\n let rawY = Number(value, 10);\n if(parseFloat(rawY).toFixed(3) !== parseFloat(this._y).toFixed(3)) {\n if(isNaN(rawY)) {\n rawY = this._minY;\n }\n this._y = this._snapValueToStep(rawY, this._minY, this._maxY, this._stepY);\n this._reflectAttribute('y', this._y);\n this.color = this._toHsvString(this._hue, this.x, this._y);\n }\n this._elements.sliderY.setAttribute('aria-valuetext', `${i18n.get('Brightness')}: ${Math.round(this._y / (this._maxY - this._minY) * 100)}%`);\n this._elements.sliderY.setAttribute('title', this.color);\n this._elements.sliderY.setAttribute('value', this._y);\n }\n \n /**\n The ColorArea color string in hsla format.\n @default hsla(0, 100%, 50%, 1)\n @type {String}\n @htmlattribute color\n @htmlattributereflected\n */ \n get color() {\n return colorUtil.toHslString(this._hue, new TinyColor({h:this._hue, s:this.x, v:this.y}).toHslString());\n }\n \n set color(value) {\n let color = new TinyColor(value);\n if(!color.isValid) {\n color = new TinyColor(\"hsla(120, 100%, 50%, 1)\");\n value = color.toHslString();\n }\n \n // if color strings are equal or colors are equivalent \n if(this.color === value || new TinyColor(this.color).toString(color.format) === color) {\n return;\n }\n\n const {h,s,v} = colorUtil.extractHsv(value);\n if(h !== this._hue) {\n this._updateHue(colorUtil.getHue(value)); \n }\n if(s !== this._x) {\n this.x = s;\n }\n if(v !== this.Y) {\n this.y = v;\n }\n this._updateHandle(this._hue, this.x, this.y, this.color);\n this._reflectAttribute('color', this.color);\n }\n \n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'label',\n 'x',\n 'y',\n 'disabled',\n 'color'\n ]);\n } \n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this._elements.sliderX[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.sliderY[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.colorHandle[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n }\n \n focus() {\n this._sliderX.focus();\n }\n\n /** @private **/\n _updateHue(hue) {\n this._hue = hue;\n if(this._gradient){\n this._gradient.style.background = `linear-gradient(to top, black 0%, hsla(${this._hue}, 100%, 0%, 0) 100%),\n linear-gradient(to right, white 0%, hsla(${this._hue}, 100%, 0%, 0) 100%),\n hsl(${this._hue}, 100%, 50%)`;\n } \n }\n\n /** @private */ \n _snapValueToStep(rawValue, min, max, step) {\n const remainder = (rawValue - min) % step;\n let snappedValue = rawValue;\n \n if (Math.abs(remainder) * 2 >= step) {\n snappedValue = rawValue - remainder + step;\n } \n else {\n snappedValue = rawValue - remainder;\n }\n if (snappedValue < min) {\n snappedValue = min;\n } \n else if (snappedValue > max) {\n snappedValue = min + Math.floor((max - min) / step) * step;\n }\n return snappedValue;\n }\n \n /** @private */\n _updateHandle(hue, x, y, colorStr) {\n let percent = 100 - ((y - this._minY) / (this._maxY - this._minY) * 100);\n if(this._handle) {\n this._handle.style.top = `${percent}%`;\n }\n \n percent = (x - this._minX) / (this._maxX - this._minX) * 100;\n if(this._handle) {\n this._handle.style.left = `${percent}%`;\n } \n this._elements.colorHandle.setAttribute('color', colorStr); \n }\n \n /** @private */ \n _focusHandle(isFocused) {\n if(this._handle) {\n if(isFocused === true) {\n this._handle.focus(); \n } \n else {\n this._handle.blur(); \n }\n }\n }\n\n /** @private */ \n _changeValue(x, y) {\n if(this.x !== x || this.y !== y) {\n var currX = this.x;\n var currY = this.y;\n this.x = x;\n this.y = y;\n if(this.x !== currX || this.y !== currY) {\n this.trigger('change');\n }\n }\n }\n\n _focusX() {\n this._sliderX.focus();\n }\n\n _focusY() {\n this._sliderY.focus();\n } \n/******* Events Handling **************/\n\n /** @private */\n _onInputChangeHandler(event) {\n this._focusHandle(true);\n event.stopPropagation();\n if(event.target === this._sliderX) {\n this._changeValue(event.target.value, this.y);\n } \n else {\n this._changeValue(this.x, event.target.value);\n }\n }\n\n /** @private */\n _handleKey(event) {\n this._focusHandle(true);\n event.preventDefault();\n event.stopPropagation();\n let y = this.y;\n let x = this.x;\n // increase\n if (event.keyCode === Keys.keyToCode('up') ||\n event.keyCode === Keys.keyToCode('pageUp')) {\n y += this._stepY;\n this._focusY();\n }\n // decrease\n else if (event.keyCode === Keys.keyToCode('down') ||\n event.keyCode === Keys.keyToCode('pageDown')) {\n y -= this._stepY;\n this._focusY();\n }\n\n // increase\n if (event.keyCode === Keys.keyToCode('right')) {\n x += this._stepX;\n this._focusX();\n }\n // decrease\n else if (event.keyCode === Keys.keyToCode('left')) {\n x -= this._stepX;\n this._focusX();\n }\n \n // min\n else if (event.keyCode === Keys.keyToCode('home')) {\n x = this._minX;\n y = this._minY;\n this._focusX();\n }\n // max\n else if (event.keyCode === Keys.keyToCode('end')) {\n x = this._maxX;\n y = this._maxY;\n this._focusX();\n }\n \n this._changeValue(x, y); \n }\n \n /** @private */\n _onMouseDown() {\n if (event instanceof MouseEvent) {\n if ((event.which || event.button) !== 1) {\n return;\n }\n }\n event.preventDefault();\n \n this._handle.classList.add('is-dragged');\n document.body.classList.add('u-coral-closedHand');\n this.focus();\n this._focusHandle(true);\n \n const {x,y} = this._getValuesFromCoord(this._getPoint(event));\n this._changeValue(x, y);\n \n const classNameSelector = \".\" + CLASSNAME;\n this._draggingHandler = this._handleDragging.bind(this);\n this._mouseUpHandler = this._mouseUp.bind(this); \n \n events.on('mousemove.CoralArea', this._draggingHandler);\n events.on('mouseup.CoralArea', this._mouseUpHandler);\n\n events.on('touchmove.CoralArea', this._draggingHandler);\n events.on('touchend.CoralArea', this._mouseUpHandler);\n events.on('touchcancel.CoralArea', this._mouseUpHandler); \n }\n\n /** @private */\n _getValuesFromCoord(point) {\n const boundingClientRect = this.getBoundingClientRect();\n const height = boundingClientRect.height;\n const width = boundingClientRect.width;\n let posY = point.clientY;\n let posX = point.clientX;\n \n if(posY < boundingClientRect.top) {\n posY = boundingClientRect.top;\n }\n else if(posY > boundingClientRect.bottom) {\n posY = boundingClientRect.bottom;\n }\n\n if(posX < boundingClientRect.left) {\n posX = boundingClientRect.left;\n }\n else if(posX > boundingClientRect.right) {\n posX = boundingClientRect.right;\n }\n \n let positionFraction = (height -(posY - boundingClientRect.top)) / height; \n const rawY = this._minY + positionFraction * (this._maxY - this._minY);\n\n positionFraction = (posX - boundingClientRect.left) / width; \n const rawX = this._minX + positionFraction * (this._maxX - this._minX);\n \n return {x: rawX, y: rawY};\n }\n \n /** @private */\n _handleDragging(event) {\n const {x,y} = this._getValuesFromCoord(this._getPoint(event));\n this._changeValue(x, y);\n event.preventDefault();\n } \n\n /** @private */\n _mouseUp(event) {\n this._handle.style.cursor = 'grab';\n this._handle.classList.remove('is-dragged');\n document.body.classList.remove('u-coral-closedHand');\n this._focusHandle(false); \n const classNameSelector = \".\" + CLASSNAME;\n \n events.off('mousemove.CoralArea', this._draggingHandler);\n events.off('touchmove.CoralArea', this._draggingHandler);\n events.off('mouseup.CoralArea', this._mouseUpHandler);\n events.off('touchend.CoralArea', this._mouseUpHandler);\n events.off('touchcancel.CoralArea', this._mouseUpHandler);\n\n this._currentHandle = null;\n this._draggingHandler = null;\n this._mouseUpHandler = null; \n }\n \n /**\n @private\n @return {Object} which contains the real coordinates\n */\n _getPoint(event) {\n if (event.changedTouches && event.changedTouches.length > 0) {\n return event.changedTouches[0];\n } \n else if (event.touches && event.touches.length > 0) {\n return event.touches[0];\n }\n\n return event;\n }\n\n /**\n Handles \"focusin\" event.\n\n @private\n */\n _focus(event) {\n this._focusHandle(true);\n }\n \n /**\n Handles \"focusout\" event.\n\n @private\n */\n _blur(event) {\n this._focusHandle(false);\n } \n}\nexport default ColorArea;", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 714, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 715, "kind": "class", "name": "ColorArea", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorPicker}", "description": "A ColorPicker area component to select Saturation and Value", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorPicker.ColorArea" }, { "tagName": "@classdesc", "tagValue": "A ColorPicker area component to select Saturation and Value" }, { "tagName": "@htmltag", "tagValue": "coral-colorpicker-colorarea" } ], "interface": false, "extends": [ "HTMLElement", "BaseComponent" ], "expressionExtends": "BaseComponent(HTMLElement)", "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorPicker.ColorArea();" ], "see": [ "../examples/#colorpicker" ] }, { "__docId__": 716, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#constructor", "access": "public", "description": null, "lineNumber": 28, "undocument": true }, { "__docId__": 717, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_elements", "access": "private", "description": null, "lineNumber": 50, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 718, "kind": "member", "name": "_x", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_x", "access": "private", "description": null, "lineNumber": 53, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 719, "kind": "member", "name": "_y", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_y", "access": "private", "description": null, "lineNumber": 54, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 720, "kind": "member", "name": "_hue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_hue", "access": "private", "description": null, "lineNumber": 55, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 721, "kind": "member", "name": "_minX", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_minX", "access": "private", "description": null, "lineNumber": 56, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 722, "kind": "member", "name": "_minY", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_minY", "access": "private", "description": null, "lineNumber": 57, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 723, "kind": "member", "name": "_maxX", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_maxX", "access": "private", "description": null, "lineNumber": 58, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 724, "kind": "member", "name": "_maxY", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_maxY", "access": "private", "description": null, "lineNumber": 59, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 725, "kind": "member", "name": "_stepX", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_stepX", "access": "private", "description": null, "lineNumber": 60, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 726, "kind": "member", "name": "_stepY", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_stepY", "access": "private", "description": null, "lineNumber": 61, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 727, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#render", "access": "public", "description": null, "lineNumber": 65, "ignore": true, "params": [], "return": null }, { "__docId__": 728, "kind": "member", "name": "_handle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_handle", "access": "private", "description": null, "lineNumber": 94, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 729, "kind": "member", "name": "_sliderX", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_sliderX", "access": "private", "description": null, "lineNumber": 95, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 730, "kind": "member", "name": "_sliderY", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_sliderY", "access": "private", "description": null, "lineNumber": 96, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 731, "kind": "member", "name": "_gradient", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_gradient", "access": "private", "description": null, "lineNumber": 97, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 734, "kind": "member", "name": "label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#label", "access": "public", "description": " \nThe ColorArea label.\n
  • '' by default.
  • reflected
", "lineNumber": 112, "unknown": [ { "tagName": "@default", "tagValue": "''" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 736, "kind": "member", "name": "_label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_label", "access": "private", "description": null, "lineNumber": 117, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 737, "kind": "member", "name": "x", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#x", "access": "public", "description": " \nThe ColorArea x value. value should be in multiple of x-step size.\n
  • 1 by default.
  • reflected
", "lineNumber": 132, "unknown": [ { "tagName": "@default", "tagValue": "1" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 741, "kind": "method", "name": "_toHsvString", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_toHsvString", "access": "private", "description": null, "lineNumber": 152, "ignore": true, "params": [ { "name": "hue", "types": [ "*" ] }, { "name": "x", "types": [ "*" ] }, { "name": "y", "types": [ "*" ] } ], "return": { "types": [ "string" ] } }, { "__docId__": 742, "kind": "member", "name": "y", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#y", "access": "public", "description": " \nThe ColorArea y value. value should be in multiple of y-step size.\n
  • 1 by default.
  • reflected
", "lineNumber": 165, "unknown": [ { "tagName": "@default", "tagValue": "1" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 746, "kind": "member", "name": "color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#color", "access": "public", "description": "The ColorArea color string in hsla format.\n
  • hsla(0, 100%, 50%, 1) by default.
  • reflected
", "lineNumber": 191, "unknown": [ { "tagName": "@default", "tagValue": "hsla(0, 100%, 50%, 1)" }, { "tagName": "@htmlattribute", "tagValue": "color" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 750, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea.observedAttributes", "access": "public", "description": null, "lineNumber": 222, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 751, "kind": "member", "name": "disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#disabled", "access": "public", "description": "Whether this field is disabled or not.\n
  • false by default.
  • reflected
", "lineNumber": 239, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "disabled" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 753, "kind": "member", "name": "_disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_disabled", "access": "private", "description": null, "lineNumber": 244, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 754, "kind": "method", "name": "focus", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#focus", "access": "public", "description": null, "lineNumber": 254, "undocument": true, "params": [], "return": null }, { "__docId__": 755, "kind": "method", "name": "_updateHue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_updateHue", "access": "private", "description": null, "lineNumber": 259, "ignore": true, "params": [ { "name": "hue", "types": [ "*" ] } ], "return": null }, { "__docId__": 757, "kind": "method", "name": "_snapValueToStep", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_snapValueToStep", "access": "private", "description": null, "lineNumber": 269, "ignore": true, "params": [ { "name": "rawValue", "types": [ "*" ] }, { "name": "min", "types": [ "*" ] }, { "name": "max", "types": [ "*" ] }, { "name": "step", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 758, "kind": "method", "name": "_updateHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_updateHandle", "access": "private", "description": null, "lineNumber": 289, "ignore": true, "params": [ { "name": "hue", "types": [ "*" ] }, { "name": "x", "types": [ "*" ] }, { "name": "y", "types": [ "*" ] }, { "name": "colorStr", "types": [ "*" ] } ], "return": null }, { "__docId__": 759, "kind": "method", "name": "_focusHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_focusHandle", "access": "private", "description": null, "lineNumber": 303, "ignore": true, "params": [ { "name": "isFocused", "types": [ "*" ] } ], "return": null }, { "__docId__": 760, "kind": "method", "name": "_changeValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_changeValue", "access": "private", "description": null, "lineNumber": 315, "ignore": true, "params": [ { "name": "x", "types": [ "*" ] }, { "name": "y", "types": [ "*" ] } ], "return": null }, { "__docId__": 763, "kind": "method", "name": "_focusX", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_focusX", "access": "private", "description": null, "lineNumber": 327, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 764, "kind": "method", "name": "_focusY", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_focusY", "access": "private", "description": null, "lineNumber": 331, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 765, "kind": "method", "name": "_onInputChangeHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_onInputChangeHandler", "access": "private", "description": null, "lineNumber": 337, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 766, "kind": "method", "name": "_handleKey", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_handleKey", "access": "private", "description": null, "lineNumber": 349, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 767, "kind": "method", "name": "_onMouseDown", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_onMouseDown", "access": "private", "description": null, "lineNumber": 396, "ignore": true, "params": [], "return": null }, { "__docId__": 768, "kind": "member", "name": "_draggingHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_draggingHandler", "access": "private", "description": null, "lineNumber": 413, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 769, "kind": "member", "name": "_mouseUpHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_mouseUpHandler", "access": "private", "description": null, "lineNumber": 414, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 770, "kind": "method", "name": "_getValuesFromCoord", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_getValuesFromCoord", "access": "private", "description": " @private", "lineNumber": 425, "ignore": true, "params": [ { "name": "point", "types": [ "*" ] } ], "return": { "types": [ "{\"x\": *, \"y\": *}" ] } }, { "__docId__": 771, "kind": "method", "name": "_handleDragging", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_handleDragging", "access": "private", "description": null, "lineNumber": 456, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 772, "kind": "method", "name": "_mouseUp", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_mouseUp", "access": "private", "description": null, "lineNumber": 463, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 773, "kind": "member", "name": "_currentHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_currentHandle", "access": "private", "description": null, "lineNumber": 476, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 776, "kind": "method", "name": "_getPoint", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_getPoint", "access": "private", "description": "", "lineNumber": 485, "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "which contains the real coordinates" }, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ] }, { "__docId__": 777, "kind": "method", "name": "_focus", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_focus", "access": "private", "description": "Handles \"focusin\" event.", "lineNumber": 501, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 778, "kind": "method", "name": "_blur", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorArea.js~ColorArea#_blur", "access": "private", "description": "Handles \"focusout\" event.", "lineNumber": 510, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 779, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorFormats.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n \n const ColorFormats = {\n HSL: \"hsl\",\n HSV: \"hsv\",\n RGB: \"rgb\",\n PRGB: \"prgb\",\n HEX : \"hex\",\n HEX3: \"hex3\",\n HEX4: \"hex4\",\n HEX8: \"hex8\",\n NAME: \"name\" \n};\n\nexport default ColorFormats;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorFormats.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 780, "kind": "variable", "name": "ColorFormats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorFormats.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorFormats.js~ColorFormats", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorFormats}", "description": "Copyright 2021 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.", "lineNumber": 13, "type": { "types": [ "{\"HSL\": string, \"HSV\": string, \"RGB\": string, \"PRGB\": string, \"HEX\": string, \"HEX3\": string, \"HEX4\": string, \"HEX8\": string, \"NAME\": string}" ] } }, { "__docId__": 781, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {BaseComponent} from '../../../coral-base-component';\nimport subView from '../templates/colorHandle';\nimport {validate, transform, commons, i18n} from '../../../coral-utils';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport colorUtil from \"./ColorUtil\";\n\nconst CLASSNAME = '_coral-ColorPicker-colorHandle';\n\n/**\n @class Coral.ColorPicker.ColorHandle\n @classdesc A ColorHandle component\n @htmltag coral-colorpicker-colorhandle\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nclass ColorHandle extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this._delegateEvents(commons.extend(this._events, {\n }));\n\n // Templates\n this._elements = {};\n subView.call(this._elements, {commons, i18n});\n this._color = new TinyColor(\"hsla(0, 100%, 50%, 1)\");\n this._hue = 0;\n }\n \n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.colorHandleSubView);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } \n else {\n frag.appendChild(child);\n }\n }\n\n this.appendChild(frag);\n \n this._subView = this.querySelector(\"._coral-ColorPicker-colorHandle-color\");\n this.color = colorUtil.toHslString(this._hue, this._color.toHslString());\n }\n \n /** @ignore */\n focus() {\n this.classList.add(\"is-focused\");\n }\n \n /** @ignore */\n blur() {\n this.classList.remove(\"is-focused\");\n }\n \n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n }\n\n /** \n The ColorSlider color.\n @default hsla(0, 100%, 50%, 1)\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get color() {\n return this._color.toHslString();\n }\n \n set color(value) {\n let color = new TinyColor(value);\n if(!color.isValid) {\n color = new TinyColor(\"hsla(0, 100%, 50%, 1)\");\n value = color.toHslString();\n }\n this._color = color;\n this._hue = colorUtil.getHue(value);\n this._reflectAttribute('color', colorUtil.toHslString(this._hue, this._color.toHslString())); \n if(this._subView){\n this._subView.style[\"background-color\"] = colorUtil.toHslString(this._hue, this._color.toHslString());\n }\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'disabled',\n 'color'\n ]);\n }\n \n}\nexport default ColorHandle;", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 782, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 783, "kind": "class", "name": "ColorHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorPicker}", "description": "A ColorHandle component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorPicker.ColorHandle" }, { "tagName": "@classdesc", "tagValue": "A ColorHandle component" }, { "tagName": "@htmltag", "tagValue": "coral-colorpicker-colorhandle" } ], "interface": false, "extends": [ "HTMLElement", "BaseComponent" ], "expressionExtends": "BaseComponent(HTMLElement)", "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorPicker.ColorHandle();" ], "see": [ "../examples/#colorpicker" ] }, { "__docId__": 784, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#constructor", "access": "public", "description": null, "lineNumber": 29, "ignore": true }, { "__docId__": 785, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#_elements", "access": "private", "description": null, "lineNumber": 36, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 786, "kind": "member", "name": "_color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#_color", "access": "private", "description": null, "lineNumber": 38, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 787, "kind": "member", "name": "_hue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#_hue", "access": "private", "description": null, "lineNumber": 39, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 788, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#render", "access": "public", "description": null, "lineNumber": 43, "ignore": true, "params": [], "return": null }, { "__docId__": 789, "kind": "member", "name": "_subView", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#_subView", "access": "private", "description": null, "lineNumber": 66, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 791, "kind": "method", "name": "focus", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#focus", "access": "public", "description": null, "lineNumber": 71, "ignore": true, "params": [], "return": null }, { "__docId__": 792, "kind": "method", "name": "blur", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#blur", "access": "public", "description": null, "lineNumber": 76, "ignore": true, "params": [], "return": null }, { "__docId__": 793, "kind": "member", "name": "disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#disabled", "access": "public", "description": "Whether this field is disabled or not.\n
  • false by default.
  • reflected
", "lineNumber": 87, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "disabled" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 795, "kind": "member", "name": "_disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#_disabled", "access": "private", "description": null, "lineNumber": 92, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 796, "kind": "member", "name": "color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle#color", "access": "public", "description": " \nThe ColorSlider color.\n
  • hsla(0, 100%, 50%, 1) by default.
  • reflected
", "lineNumber": 106, "unknown": [ { "tagName": "@default", "tagValue": "hsla(0, 100%, 50%, 1)" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 800, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorHandle.js~ColorHandle.observedAttributes", "access": "public", "description": null, "lineNumber": 125, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 801, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport ColorFormats from './ColorFormats';\nimport '../../../coral-component-textfield';\nimport '../../../coral-component-button';\nimport '../../../coral-component-popover';\nimport base from '../templates/base';\nimport {validate, transform, commons, i18n} from '../../../coral-utils';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport colorUtil from \"./ColorUtil\";\n\nconst CLASSNAME = '_coral-ColorPicker';\n\n/**\n @class Coral.ColorPicker\n @classdesc A ColorPicker component than can be used as a form field to select from a list of color options.\n @htmltag coral-colorpicker\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nclass ColorPicker extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n // Prepare templates\n this._elements = {};\n base.call(this._elements, {commons, i18n});\n\n const overlay = this._elements.overlay;\n const overlayId = overlay.id;\n\n // Extend form field events\n const events = commons.extend(this._events, {\n 'key:down ._coral-ColorPicker-input:not([readonly])': '_onKeyDown',\n 'key:down [handle=\"colorPreview\"]': '_onKeyDown',\n 'click [handle=\"colorPreview\"]': '_onColorPreviewClick',\n 'key:esc input': '_onKeyEsc',\n 'key:enter input': '_onKeyEsc',\n 'capture:change [handle=\"input\"]': '_onColorInputChange',\n 'change [handle=\"propertiesView\"]': '_onPropertyChange'\n });\n\n // Overlay\n events[`global:capture:coral-overlay:beforeopen #${overlayId}`] = '_beforeOverlayOpen';\n events[`global:capture:coral-overlay:close #${overlayId}`] = '_onOverlayClose';\n events[`global:key:esc #${overlayId}`] = '_onKeyEsc';\n\n // Events\n this._delegateEvents(events);\n this.value = \"\";\n this._format = ColorFormats.HSL;\n this._sendChaneEvent = this._chaneEventDebounced();\n }\n \n /** @ignore */ \n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n \n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this.setAttribute('role', 'group');\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.input);\n frag.appendChild(this._elements.buttonWrapper);\n frag.appendChild(this._elements.overlay);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } \n else {\n frag.appendChild(child);\n }\n }\n\n this.appendChild(frag);\n\n // These should be used to set a property since property handler aren't called until elements are attached to dom.\n // Attribute values are delivered to change-listeners even if element isn't attached to dom yet, so attributes \n // can be set to e.g. this._elements.colorPreview.\n this._input = this.querySelector(\"[handle='input']\");\n this._preview = this.querySelector(\"[handle='colorPreview']\");\n this._overlay = this.querySelector(\"[handle='overlay']\");\n this._overlay.setAttribute('aria-live', 'off');\n this._properties = this._overlay.querySelector(\"[handle='propertiesView']\");\n this._update(this._value);\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'value',\n 'formats',\n 'disabled',\n 'label',\n 'labelledby',\n 'readonly'\n ]);\n } \n\n\n /** @ignore */\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n labelledby: 'labelledBy',\n readonly: 'readOnly'\n });\n } \n /** \n The ColorPicker label.\n @default 'Select Color'\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get label() {\n return this._label || i18n.get('Color Picker');\n }\n \n set label(value) {\n this._label = value;\n this._reflectAttribute('label', this.label);\n this._elements.input.setAttribute('aria-label', this.label);\n } \n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */ \n get labelledBy() {\n return super.labelledBy;\n }\n \n set labelledBy(value) {\n super.labelledBy = value;\n\n // Sync input aria-labelledby\n this._elements.input[value ? 'setAttribute' : 'removeAttribute']('aria-labelledby', value);\n\n // in case the user focuses the buttons, he will still get a notion of the usage of the component\n if (this.labelledBy) {\n this.setAttribute('aria-labelledby', this.labelledBy);\n this._elements.colorPreview.setAttribute('aria-labelledby',\n [this.labelledBy,\n this._elements.colorPreview.label.id].join(' '));\n } \n else {\n this.removeAttribute('aria-labelledby');\n this._elements.colorPreview.removeAttribute('aria-labelledby');\n }\n } \n \n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n this._elements.input[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.colorPreview[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n this._elements.input[this._readOnly ? 'setAttribute' : 'removeAttribute']('readonly', this._readOnly);\n this._elements.colorPreview[(this.disabled || this._readOnly) ? 'setAttribute' : 'removeAttribute']('disabled', this.disabled || this._readOnly);\n }\n \n /** \n The ColorPicker value. value should be a valid color in supported format.\n @default Empty\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get value() {\n return this._value;\n }\n \n set value(value) {\n this._update(value);\n } \n\n /**\n The ColorPicker formats. comma separated formats should be in supported formats.\n Any invalid/unsupported format is ignored.\n Values selected in any other format will be converted to this format.\n @default ColorFormats.HSL\n @type {String}\n @htmlattribute formats\n @htmlattributereflected\n */ \n get formats() {\n return this._formats || \"\";\n }\n \n set formats(value) {\n let formats = value.split(',');\n formats = colorUtil.getValidFormats(formats);\n if(formats.length > 0) {\n this._formats = formats;\n this._format = formats[0];\n this._reflectAttribute('formats', this._formats);\n this._elements.propertiesView.setAttribute('formats', value);\n // refresh color in this new format\n this._update(colorUtil.formatColorString(this.value, this._format));\n }\n } \n \n /** @private */\n _update(value) {\n if(this.value === value) {\n return;\n }\n \n // sync UI for empty value\n this.classList[ (value == \"\") ? 'add' : 'remove']('_coral-ColorPicker--novalue');\n this._elements.colorPreview.classList[ (value == \"\") ? 'add' : 'remove']('_coral-ColorPicker-preview--novalue'); \n // Empty value isn't invalid.\n let color = new TinyColor(value);\n let isInvalid = (value !== \"\" && !color.isValid);\n this[isInvalid ? 'setAttribute' : 'removeAttribute']('invalid', \"true\");\n this._elements.input[isInvalid ? 'setAttribute' : 'removeAttribute']('invalid', \"true\"); \n if(color.isValid && (!this._formats || this._formats.indexOf(color.format) !== -1)) {\n this._format = color.format;\n }\n this._value = (value == \"\" || !color.isValid) ? value : colorUtil.formatColorString(value, this._format);\n this._elements.input.value = this._value;\n this._elements.propertiesView.setAttribute('color', this._value);\n this._elements.colorPreview.style[\"background-color\"] = new TinyColor(this._value).toHslString();\n }\n\n _debounce(func, timeout = 1000) {\n let timer;\n return (...args) => {\n clearTimeout(timer);\n timer = setTimeout(() => { func.apply(this, args); }, timeout);\n };\n }\n\n _chaneEventDebounced() {\n var self = this;\n return this._debounce(function() {\n self.trigger('change');\n }, 1000); \n }\n \n /** @private */\n _change(color) {\n this._update(color);\n var self = this;\n this._sendChaneEvent();\n }\n /***************** Interaction handlers***********/\n /** @private */\n _onKeyDown(event) {\n event.stopPropagation();\n // restore focus to appropriate element when overlay closes\n this._elements.overlay.returnFocusTo(event.matchedTarget);\n this._elements.overlay.open = true;\n }\n \n /** @private */\n _onKeyEsc(event) {\n if (!this._elements.overlay.open) {\n return;\n }\n\n event.stopPropagation();\n\n this._elements.overlay.open = false;\n }\n \n /** @private */\n _onColorPreviewClick(event) {\n // restore focus to appropriate element when overlay closes\n this._elements.overlay.returnFocusTo(event.matchedTarget);\n } \n\n /** @private */\n _beforeOverlayOpen() {\n // set aria-expanded state\n this._elements.input.setAttribute('aria-expanded', true);\n this._elements.colorPreview.setAttribute('aria-expanded', true);\n }\n \n _onOverlayClose() {\n // set aria-expanded state\n this._elements.input.setAttribute('aria-expanded', true);\n this._elements.colorPreview.setAttribute('aria-expanded', false);\n }\n \n /** @private */ \n _onColorInputChange(event) {\n this._update(this._input.value);\n }\n \n /** @private */\n _onPropertyChange(event) {\n event.stopImmediatePropagation();\n this._change(event.detail ? event.detail : this._properties.color);\n }\n}\nexport default ColorPicker;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 802, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 24, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 803, "kind": "class", "name": "ColorPicker", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorPicker}", "description": "A ColorPicker component than can be used as a form field to select from a list of color options.", "lineNumber": 34, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorPicker" }, { "tagName": "@classdesc", "tagValue": "A ColorPicker component than can be used as a form field to select from a list of color options." }, { "tagName": "@htmltag", "tagValue": "coral-colorpicker" } ], "interface": false, "extends": [ "HTMLElement", "BaseComponent", "BaseFormField" ], "expressionExtends": "BaseFormField(BaseComponent(HTMLElement))", "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorPicker();" ], "see": [ "../examples/#colorpicker" ] }, { "__docId__": 804, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#constructor", "access": "public", "description": null, "lineNumber": 36, "ignore": true }, { "__docId__": 805, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_elements", "access": "private", "description": null, "lineNumber": 39, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 807, "kind": "member", "name": "_format", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_format", "access": "private", "description": null, "lineNumber": 64, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 808, "kind": "member", "name": "_sendChaneEvent", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_sendChaneEvent", "access": "private", "description": null, "lineNumber": 65, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 809, "kind": "method", "name": "connectedCallback", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#connectedCallback", "access": "public", "description": null, "lineNumber": 69, "ignore": true, "params": [], "return": null }, { "__docId__": 810, "kind": "method", "name": "disconnectedCallback", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#disconnectedCallback", "access": "public", "description": null, "lineNumber": 82, "ignore": true, "params": [], "return": null }, { "__docId__": 811, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#render", "access": "public", "description": null, "lineNumber": 94, "ignore": true, "params": [], "return": null }, { "__docId__": 812, "kind": "member", "name": "_input", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_input", "access": "private", "description": null, "lineNumber": 124, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 813, "kind": "member", "name": "_preview", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_preview", "access": "private", "description": null, "lineNumber": 125, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 814, "kind": "member", "name": "_overlay", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_overlay", "access": "private", "description": null, "lineNumber": 126, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 815, "kind": "member", "name": "_properties", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_properties", "access": "private", "description": null, "lineNumber": 128, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 816, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker.observedAttributes", "access": "public", "description": null, "lineNumber": 133, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 817, "kind": "member", "name": "_attributePropertyMap", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker._attributePropertyMap", "access": "private", "description": null, "lineNumber": 146, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 818, "kind": "member", "name": "label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#label", "access": "public", "description": " \nThe ColorPicker label.\n
  • 'Select Color' by default.
  • reflected
", "lineNumber": 159, "unknown": [ { "tagName": "@default", "tagValue": "'Select Color'" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 820, "kind": "member", "name": "_label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_label", "access": "private", "description": null, "lineNumber": 164, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 821, "kind": "member", "name": "labelledBy", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#labelledBy", "access": "public", "description": "Inherited from {@link BaseFormField#labelledBy}.", "lineNumber": 172, "modality": "both", "type": { "types": [ "*" ] } }, { "__docId__": 823, "kind": "member", "name": "disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#disabled", "access": "public", "description": "Whether this field is disabled or not.\n
  • false by default.
  • reflected
", "lineNumber": 202, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "disabled" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 825, "kind": "member", "name": "_disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_disabled", "access": "private", "description": null, "lineNumber": 207, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 826, "kind": "member", "name": "readOnly", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#readOnly", "access": "public", "description": "Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n
  • false by default.
  • reflected
", "lineNumber": 222, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "readonly" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 828, "kind": "member", "name": "_readOnly", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_readOnly", "access": "private", "description": null, "lineNumber": 227, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 829, "kind": "member", "name": "value", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#value", "access": "public", "description": " \nThe ColorPicker value. value should be a valid color in supported format.\n
  • Empty by default.
  • reflected
", "lineNumber": 240, "unknown": [ { "tagName": "@default", "tagValue": "Empty" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 831, "kind": "member", "name": "formats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#formats", "access": "public", "description": "The ColorPicker formats. comma separated formats should be in supported formats.\nAny invalid/unsupported format is ignored.\nValues selected in any other format will be converted to this format.\n
  • ColorFormats.HSL by default.
  • reflected
", "lineNumber": 257, "unknown": [ { "tagName": "@default", "tagValue": "ColorFormats.HSL" }, { "tagName": "@htmlattribute", "tagValue": "formats" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 833, "kind": "member", "name": "_formats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_formats", "access": "private", "description": null, "lineNumber": 265, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 835, "kind": "method", "name": "_update", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_update", "access": "private", "description": " @private", "lineNumber": 275, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 837, "kind": "member", "name": "_value", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_value", "access": "private", "description": null, "lineNumber": 291, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 838, "kind": "method", "name": "_debounce", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_debounce", "access": "private", "description": null, "lineNumber": 297, "undocument": true, "ignore": true, "params": [ { "name": "func", "types": [ "*" ] }, { "name": "timeout", "optional": true, "types": [ "number" ], "defaultRaw": 1000, "defaultValue": "1000" } ], "return": { "types": [ "*" ] } }, { "__docId__": 839, "kind": "method", "name": "_chaneEventDebounced", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_chaneEventDebounced", "access": "private", "description": null, "lineNumber": 305, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 840, "kind": "method", "name": "_change", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_change", "access": "private", "description": " @private", "lineNumber": 313, "ignore": true, "params": [ { "name": "color", "types": [ "*" ] } ], "return": null }, { "__docId__": 841, "kind": "method", "name": "_onKeyDown", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onKeyDown", "access": "private", "description": " @private", "lineNumber": 320, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 842, "kind": "method", "name": "_onKeyEsc", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onKeyEsc", "access": "private", "description": " @private", "lineNumber": 328, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 843, "kind": "method", "name": "_onColorPreviewClick", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onColorPreviewClick", "access": "private", "description": " @private", "lineNumber": 339, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 844, "kind": "method", "name": "_beforeOverlayOpen", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_beforeOverlayOpen", "access": "private", "description": " @private", "lineNumber": 345, "ignore": true, "params": [], "return": null }, { "__docId__": 845, "kind": "method", "name": "_onOverlayClose", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onOverlayClose", "access": "private", "description": null, "lineNumber": 351, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 846, "kind": "method", "name": "_onColorInputChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onColorInputChange", "access": "private", "description": " @private", "lineNumber": 358, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 847, "kind": "method", "name": "_onPropertyChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorPicker.js~ColorPicker#_onPropertyChange", "access": "private", "description": " @private", "lineNumber": 363, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 848, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport '../../../coral-component-select';\nimport ColorFormats from './ColorFormats';\nimport propertiesSubview from '../templates/colorProperties';\nimport {validate, transform, commons, i18n} from '../../../coral-utils';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport colorUtil from \"./ColorUtil\";\n\nconst CLASSNAME = '_coral-ColorPicker-properties';\n\n/**\n @class Coral.ColorPicker.ColorProperties\n @classdesc A ColorPicker Color properties component\n @htmltag coral-colorpicker-properties\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nclass ColorProperties extends BaseComponent(HTMLElement) {\n constructor() {\n super();\n\n this._delegateEvents(commons.extend(this._events, {\n 'change [handle=\"propertyHue\"]': '_onHueChange',\n 'change [handle=\"propertySL\"]': '_onSLChange',\n 'change [handle=\"formatSelector\"]': '_onFormatChange',\n 'capture:change [handle=\"colorInput\"]': '_onColorInputChange',\n 'input [handle=\"colorInput\"]': \"_onColorInputChange\"\n }));\n \n\n // Templates\n this._elements = {};\n propertiesSubview.call(this._elements, {commons, i18n});\n this._hue = 240; \n this._s = 1;\n this._l = 0.5;\n this._a = 1;\n this._format = ColorFormats.HSV;\n }\n \n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.propertiesSubview);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } \n else {\n frag.appendChild(child);\n }\n }\n\n this.appendChild(frag);\n //these should be used to set a property since property handler aren't called until elements are attached to dom.\n // Attribute values are delivered to change-listeners even if element isn't attached to dom yet.\n this._colorArea = this.querySelector(\"[handle='propertySL']\");\n this._colorSliderHue = this.querySelector(\"[handle='propertyHue']\");\n this._formatSelector = this.querySelector(\"[handle='formatSelector']\");\n this._colorInput = this.querySelector(\"[handle='colorInput']\");\n // update color in all subviews\n this._updateFormat(this._format);\n this._updateHue(this._hue);\n this._updateSL(this._s, this._l);\n this._updateAlpha(this._a);\n this._updateValue();\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n\n this._elements.propertySL[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.propertyHue[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.formatSelector[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.colorInput[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n }\n\n /**\n The ColorProperties formats. comma separated formats should be in supported formats.\n First format will be used as default format.\n Values selected in any other format will be converted to default format.\n @default ColorFormats.HSL\n @type {Array}\n @htmlattribute formats\n @htmlattributereflected\n */ \n get formats() {\n return this._formats || \"\";\n }\n \n set formats(value) {\n if(value == \"\") {\n return;\n }\n let formats = value.split(',');\n formats = colorUtil.getValidFormats(formats);\n if(formats.length > 0) {\n this._formats = formats;\n this._format = formats[0];\n this._elements.formatSelector.setAttribute('value', this._format);\n // update input value to this format\n this._elements.colorInput.value = this.color;\n // populate format selector list\n let selList = this._elements.formatSelector.querySelectorAll('coral-select-item');\n selList.forEach(function(element) {\n if(formats.indexOf(element.value) == -1) {\n element.remove();\n }\n });\n this._reflectAttribute('formats', this._formats);\n }\n }\n \n /**\n The ColorProperties color string.\n @default hsla(0, 100%, 50%, 1)\n @type {String}\n @htmlattribute color\n @htmlattributereflected\n */ \n get color() {\n return colorUtil.formatColorString(colorUtil.toHslString(this._hue, this._getColorFromProps()), this._format);\n }\n \n set color(value) {\n let color = new TinyColor(value);\n if(!color.isValid) {\n color = new TinyColor(\"hsla(240, 100%, 50%, 1)\");\n value = color.toHslString();\n }\n \n if(this.color === value) {\n return;\n }\n \n this._updateFormat(color.format);\n this._updateHue(colorUtil.getHue(value));\n this._updateSL(color.toHsl().s, color.toHsl().l);\n this._updateAlpha(color.a);\n this._updateValue();\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'disabled',\n 'color',\n 'formats'\n ]);\n } \n\n /** @private */\n _onHueChange(event) {\n event.stopImmediatePropagation();\n this._updateHue(this._colorSliderHue.value);\n this.trigger('change');\n }\n\n /** @private */\n _onSLChange(event) {\n event.stopImmediatePropagation();\n const color = new TinyColor({h: this._hue, s: this._colorArea.x, v: this._colorArea.y});\n this._updateSL(color.toHsl().s, color.toHsl().l);\n this.trigger('change');\n }\n \n /** @private */\n _onFormatChange(event) {\n event.stopImmediatePropagation();\n this._updateFormat(this._formatSelector.value);\n this.trigger('change');\n }\n\n /** @private */\n _onColorInputChange(event) {\n const inputColorText = this._colorInput.value;\n const color = new TinyColor(inputColorText);\n if (!color.isValid) {\n return;\n }\n const cursorLoc = event.target.selectionStart;\n event.stopImmediatePropagation();\n this.color = this._colorInput.value;\n // trigger picker change event & send input color as event details to set it in picker input\n this.trigger('change', inputColorText);\n // restore user input color text in textfield\n this._colorInput.value = inputColorText;\n // set cursor to last user input location\n event.target.setSelectionRange(cursorLoc, cursorLoc);\n }\n \n /** @private */\n _updateFormat(format) {\n this._format = format;\n this._elements.formatSelector.setAttribute('value', this._format);\n this._updateValue();\n }\n\n /** @private */\n _updateHue(hue) {\n this._hue = Math.round(hue);\n const color = this._getColorFromProps();\n this._elements.propertyHue.setAttribute('color', colorUtil.toHslString(this._hue, color.toHslString()));\n // need to update hue in ColorArea but not s and v, so get s and v from ColorArea\n this._elements.propertySL.setAttribute('color', this._toHsvString(this._hue, this._elements.propertySL.x, this._elements.propertySL.y));\n this._updateValue();\n }\n \n /** @private */\n _updateSL(s, l) {\n this._s = s;\n this._l = l;\n const color = new TinyColor({h:this._hue, s:this._s, l:this._l});\n this._elements.propertySL.setAttribute('color', colorUtil.toHslString(this._hue, color.toHslString()));\n this._updateValue();\n }\n \n /** @private */\n _updateAlpha(a) {\n this._a = a;\n this._updateValue();\n }\n\n /** @private */\n _toHsvString(hue, x, y) {\n const s = `${Math.round(x * 100)}%`;\n const v = `${Math.round(y * 100)}%`;\n return `hsv(${this._hue}, ${s}, ${v})`;\n }\n \n /** @private */\n _getColorFromProps() {\n return new TinyColor({h:this._hue, s:this._s, l:this._l, a:this._a});\n }\n \n /** @private */ \n _updateValue() {\n this._reflectAttribute('color', this.color);\n this._elements.colorInput.value = this.color;\n }\n}\n\nexport default ColorProperties;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 849, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 850, "kind": "class", "name": "ColorProperties", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorPicker}", "description": "A ColorPicker Color properties component", "lineNumber": 30, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorPicker.ColorProperties" }, { "tagName": "@classdesc", "tagValue": "A ColorPicker Color properties component" }, { "tagName": "@htmltag", "tagValue": "coral-colorpicker-properties" } ], "interface": false, "extends": [ "HTMLElement", "BaseComponent" ], "expressionExtends": "BaseComponent(HTMLElement)", "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorPicker.ColorProperties();" ], "see": [ "../examples/#colorpicker" ] }, { "__docId__": 851, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#constructor", "access": "public", "description": null, "lineNumber": 31, "undocument": true }, { "__docId__": 852, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_elements", "access": "private", "description": null, "lineNumber": 44, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 853, "kind": "member", "name": "_hue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_hue", "access": "private", "description": null, "lineNumber": 46, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 854, "kind": "member", "name": "_s", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_s", "access": "private", "description": null, "lineNumber": 47, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 855, "kind": "member", "name": "_l", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_l", "access": "private", "description": null, "lineNumber": 48, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 856, "kind": "member", "name": "_a", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_a", "access": "private", "description": null, "lineNumber": 49, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 857, "kind": "member", "name": "_format", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_format", "access": "private", "description": null, "lineNumber": 50, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 858, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#render", "access": "public", "description": null, "lineNumber": 53, "undocument": true, "params": [], "return": null }, { "__docId__": 859, "kind": "member", "name": "_colorArea", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_colorArea", "access": "private", "description": null, "lineNumber": 77, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 860, "kind": "member", "name": "_colorSliderHue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_colorSliderHue", "access": "private", "description": null, "lineNumber": 78, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 861, "kind": "member", "name": "_formatSelector", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_formatSelector", "access": "private", "description": null, "lineNumber": 79, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 862, "kind": "member", "name": "_colorInput", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_colorInput", "access": "private", "description": null, "lineNumber": 80, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 863, "kind": "member", "name": "disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#disabled", "access": "public", "description": "Whether this field is disabled or not.\n
  • false by default.
  • reflected
", "lineNumber": 96, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "disabled" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 865, "kind": "member", "name": "_disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_disabled", "access": "private", "description": null, "lineNumber": 101, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 866, "kind": "member", "name": "formats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#formats", "access": "public", "description": "The ColorProperties formats. comma separated formats should be in supported formats.\nFirst format will be used as default format.\nValues selected in any other format will be converted to default format.\n
  • ColorFormats.HSL by default.
  • reflected
", "lineNumber": 121, "unknown": [ { "tagName": "@default", "tagValue": "ColorFormats.HSL" }, { "tagName": "@htmlattribute", "tagValue": "formats" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Array" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 868, "kind": "member", "name": "_formats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_formats", "access": "private", "description": null, "lineNumber": 132, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 870, "kind": "member", "name": "color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#color", "access": "public", "description": "The ColorProperties color string.\n
  • hsla(0, 100%, 50%, 1) by default.
  • reflected
", "lineNumber": 155, "unknown": [ { "tagName": "@default", "tagValue": "hsla(0, 100%, 50%, 1)" }, { "tagName": "@htmlattribute", "tagValue": "color" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 872, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties.observedAttributes", "access": "public", "description": null, "lineNumber": 178, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 873, "kind": "method", "name": "_onHueChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_onHueChange", "access": "private", "description": null, "lineNumber": 187, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 874, "kind": "method", "name": "_onSLChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_onSLChange", "access": "private", "description": null, "lineNumber": 194, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 875, "kind": "method", "name": "_onFormatChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_onFormatChange", "access": "private", "description": null, "lineNumber": 202, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 876, "kind": "method", "name": "_onColorInputChange", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_onColorInputChange", "access": "private", "description": null, "lineNumber": 209, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 878, "kind": "method", "name": "_updateFormat", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_updateFormat", "access": "private", "description": null, "lineNumber": 227, "ignore": true, "params": [ { "name": "format", "types": [ "*" ] } ], "return": null }, { "__docId__": 880, "kind": "method", "name": "_updateHue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_updateHue", "access": "private", "description": null, "lineNumber": 234, "ignore": true, "params": [ { "name": "hue", "types": [ "*" ] } ], "return": null }, { "__docId__": 882, "kind": "method", "name": "_updateSL", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_updateSL", "access": "private", "description": null, "lineNumber": 244, "ignore": true, "params": [ { "name": "s", "types": [ "*" ] }, { "name": "l", "types": [ "*" ] } ], "return": null }, { "__docId__": 885, "kind": "method", "name": "_updateAlpha", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_updateAlpha", "access": "private", "description": null, "lineNumber": 253, "ignore": true, "params": [ { "name": "a", "types": [ "*" ] } ], "return": null }, { "__docId__": 887, "kind": "method", "name": "_toHsvString", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_toHsvString", "access": "private", "description": null, "lineNumber": 259, "ignore": true, "params": [ { "name": "hue", "types": [ "*" ] }, { "name": "x", "types": [ "*" ] }, { "name": "y", "types": [ "*" ] } ], "return": { "types": [ "string" ] } }, { "__docId__": 888, "kind": "method", "name": "_getColorFromProps", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_getColorFromProps", "access": "private", "description": null, "lineNumber": 266, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 889, "kind": "method", "name": "_updateValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorProperties.js~ColorProperties#_updateValue", "access": "private", "description": null, "lineNumber": 271, "ignore": true, "params": [], "return": null }, { "__docId__": 890, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {BaseComponent} from '../../../coral-base-component';\nimport view from '../templates/colorSlider';\nimport {validate, transform, events, commons, i18n, Keys} from '../../../coral-utils';\nimport { TinyColor } from '@ctrl/tinycolor';\nimport colorUtil from \"./ColorUtil\";\n\nconst CLASSNAME = '_coral-ColorPicker-ColorSlider';\n\n/**\n @@base ColorSlider\n @classdesc A ColorPicker color slider component\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nclass ColorSlider extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this._delegateEvents(commons.extend(this._events, {\n 'key:up': '_handleKey',\n 'key:right': '_handleKey',\n 'key:down': '_handleKey',\n 'key:left': '_handleKey',\n 'key:pageUp': '_handleKey',\n 'key:pageDown': '_handleKey',\n 'key:home': '_handleKey',\n 'key:end': '_handleKey',\n \n 'input': '_onInputChangeHandler',\n \n 'touchstart': '_onMouseDown',\n 'mousedown': '_onMouseDown',\n 'capture:focus': '_focus',\n 'capture:blur': '_blur'\n }));\n\n // Templates\n this._elements = {};\n view.call(this._elements, {commons, i18n});\n \n // default value\n this._label = \"\";\n this._value = 180;\n this._color = new TinyColor(\"hsla(180, 100%, 50%, 1)\");\n this._hue = 180;\n this._min = 0;\n this._max = 100;\n this._step = 1;\n }\n \n /** @ignore */ \n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.checkerboard);\n frag.appendChild(this._elements.colorHandle);\n frag.appendChild(this._elements.slider);\n\n // Support cloneNode\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('handle')) {\n this.removeChild(child);\n } \n else {\n frag.appendChild(child);\n }\n }\n\n this.appendChild(frag);\n \n this._syncInputSliderAttrs();\n // These should be used to set a property since property handler aren't called until elements are attached to dom.\n // Attribute values are delivered to change-listeners even if element isn't attached to dom yet, so attributes \n // can be set to e.g. this._elements.colorHandle. \n this._handle = this.querySelector('._coral-ColorPicker-ColorSlider-colorHandle');\n this._slider = this.querySelector('._coral-ColorPicker-ColorSlider-slider');\n this._updateValue(this._hue);\n }\n\n /** \n The ColorSlider label.\n @default 'Hue'\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get label() {\n return this._label;\n }\n \n set label(value) {\n this._label = value;\n this._reflectAttribute('label', this._label);\n this._syncInputSliderAttrs();\n } \n\n /** \n The ColorSlider value. value should be in multiple of step size.\n @default 0\n @type {String}\n @htmlattribute label\n @htmlattributereflected\n */ \n get value() {\n return this._value;\n }\n \n set value(value) {\n if(this._value !== value) {\n this._updateValue(value);\n }\n }\n\n /**\n The ColorSlider color string in hsla format.\n @default hsla(0, 100%, 50%, 1)\n @type {String}\n @htmlattribute color\n @htmlattributereflected\n */ \n get color() {\n return colorUtil.toHslString(this._hue, this._color.toHslString());\n }\n \n set color(value) {\n if(this.color === value) {\n return;\n }\n let color = new TinyColor(value);\n if(!color.isValid) {\n color = new TinyColor(\"hsla(180, 100%, 50%, 1)\");\n value = color.toHslString();\n }\n this._hue = colorUtil.getHue(value);\n this._updateValue(this._hue);\n }\n \n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'label',\n 'value',\n 'disabled',\n 'color'\n ]);\n } \n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this._elements.slider[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n this._elements.colorHandle[this._disabled ? 'setAttribute' : 'removeAttribute']('disabled', this._disabled);\n }\n \n focus() {\n this._slider.focus();\n }\n\n /** @private */ \n _colorFromValue(value) {\n return new TinyColor({ h: value, s: 1, l: .5, a:1 });\n }\n \n /** @private */\n _syncInputSliderAttrs() {\n if(Number(this._elements.slider.getAttribute('min')) !== this._min) {\n this._elements.slider.setAttribute('min', this._min);\n }\n \n if(Number(this._elements.slider.getAttribute('max')) !== this._max) {\n this._elements.slider.setAttribute('max', this._max);\n }\n \n if(Number(this._elements.slider.getAttribute('step')) !== this._step) {\n this._elements.slider.setAttribute('step', this._step);\n } \n \n if(this._elements.slider.getAttribute('aria-label') !== this._label) {\n this._elements.slider.setAttribute('aria-label', this._label);\n }\n }\n\n /** @private */ \n _snapValueToStep(rawValue, min, max, step) {\n const remainder = (rawValue - min) % step;\n let snappedValue = rawValue;\n \n if (Math.abs(remainder) * 2 >= step) {\n snappedValue = rawValue - remainder + step;\n } \n else {\n snappedValue = rawValue - remainder;\n }\n if (snappedValue < min) {\n snappedValue = min;\n } \n else if (snappedValue > max) {\n snappedValue = min + Math.floor((max - min) / step) * step;\n }\n return snappedValue;\n }\n \n /** @private */\n _updateHandlePosition() {\n const percent = 100 - ((this._value - this._min) / (this._max - this._min) * 100);\n if(this._handle) {\n this._handle.style.top = `${percent}%`;\n }\n }\n \n /** @private */ \n _focusHandle(isFocused) {\n if(this._handle) {\n if(isFocused === true) {\n this._handle.focus(); \n } \n else {\n this._handle.blur(); \n }\n }\n }\n\n /** @private */ \n _updateValue(value) {\n let rawValue = Number(value, 10);\n if(isNaN(rawValue)) {\n rawValue = this._min;\n }\n \n this._value = this._snapValueToStep(rawValue, this._min, this._max, this._step);\n this._hue = this._value;\n // update color\n this._color = this._colorFromValue(this._value);\n this._elements.colorHandle.setAttribute('color', colorUtil.toHslString(this._hue, this._color.toHslString()));\n this._reflectAttribute('color', colorUtil.toHslString(this._hue, this._color.toHslString()));\n this._reflectAttribute('value', this._value);\n this._elements.slider.setAttribute('value', this._value);\n this._updateHandlePosition();\n }\n\n /** @private */ \n _changeValue(value) {\n if(value !== this.value) {\n var currVal = this.value;\n this._updateValue(value);\n if(currVal !== this.value) {\n this.trigger('change');\n }\n }\n }\n\n/******* Events Handling **************/\n\n /** @private */\n _onInputChangeHandler(event) {\n this.focus();\n this._focusHandle(true);\n event.stopPropagation();\n this._changeValue(event.target.value);\n }\n\n /** @private */\n _handleKey(event) {\n this.focus();\n this._focusHandle(true);\n event.preventDefault();\n event.stopPropagation();\n let value = this._value;\n // increase\n if (event.keyCode === Keys.keyToCode('up') ||\n event.keyCode === Keys.keyToCode('right') ||\n event.keyCode === Keys.keyToCode('pageUp')) {\n value += this._step;\n }\n // decrease\n else if (event.keyCode === Keys.keyToCode('down') ||\n event.keyCode === Keys.keyToCode('left') ||\n event.keyCode === Keys.keyToCode('pageDown')) {\n value -= this._step;\n }\n // min\n else if (event.keyCode === Keys.keyToCode('home')) {\n value = this._min;\n }\n // max\n else if (event.keyCode === Keys.keyToCode('end')) {\n value = this._max;\n }\n this._changeValue(value); \n }\n \n /** @private */\n _onMouseDown() {\n if (event instanceof MouseEvent) {\n if ((event.which || event.button) !== 1) {\n return;\n }\n }\n event.preventDefault();\n \n this._handle.classList.add('is-dragged');\n document.body.classList.add('u-coral-closedHand');\n this.focus();\n this._focusHandle(true);\n this._changeValue(this._getValueFromCoord(this._getPoint(event).clientY));\n \n const classNameSelector = \".\" + CLASSNAME;\n this._draggingHandler = this._handleDragging.bind(this);\n this._mouseUpHandler = this._mouseUp.bind(this); \n \n events.on('mousemove.CoralSlider', this._draggingHandler);\n events.on('mouseup.CoralSlider', this._mouseUpHandler);\n\n events.on('touchmove.CoralSlider', this._draggingHandler);\n events.on('touchend.CoralSlider', this._mouseUpHandler);\n events.on('touchcancel.CoralSlider', this._mouseUpHandler); \n }\n\n /** @private */\n _getValueFromCoord(posY) {\n const boundingClientRect = this.getBoundingClientRect();\n const height = boundingClientRect.height;\n if(posY < boundingClientRect.top) {\n posY = boundingClientRect.top;\n }\n else if(posY > boundingClientRect.bottom) {\n posY = boundingClientRect.bottom;\n }\n const positionFraction = (height -(posY - boundingClientRect.top)) / height; \n const rawValue = this._min + positionFraction * (this._max - this._min);\n return this._snapValueToStep(rawValue, this._min, this._max, this._step);\n }\n \n /** @private */\n _handleDragging(event) {\n this._changeValue(this._getValueFromCoord(this._getPoint(event).clientY));\n event.preventDefault();\n } \n\n /** @private */\n _mouseUp(event) {\n this._handle.style.cursor = 'grab';\n this._handle.classList.remove('is-dragged');\n document.body.classList.remove('u-coral-closedHand');\n this._focusHandle(false); \n const classNameSelector = \".\" + CLASSNAME;\n \n events.off('mousemove.CoralSlider', this._draggingHandler);\n events.off('touchmove.CoralSlider', this._draggingHandler);\n events.off('mouseup.CoralSlider', this._mouseUpHandler);\n events.off('touchend.CoralSlider', this._mouseUpHandler);\n events.off('touchcancel.CoralSlider', this._mouseUpHandler);\n\n this._currentHandle = null;\n this._draggingHandler = null;\n this._mouseUpHandler = null; \n }\n \n /**\n @private\n @return {Object} which contains the real coordinates\n */\n _getPoint(event) {\n if (event.changedTouches && event.changedTouches.length > 0) {\n return event.changedTouches[0];\n } \n else if (event.touches && event.touches.length > 0) {\n return event.touches[0];\n }\n\n return event;\n }\n\n /**\n Handles \"focusin\" event.\n\n @private\n */\n _focus(event) {\n this._focusHandle(true);\n }\n \n /**\n Handles \"focusout\" event.\n\n @private\n */\n _blur(event) {\n this._focusHandle(false);\n }\n \n}\nexport default ColorSlider;", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 891, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 892, "kind": "class", "name": "ColorSlider", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorSlider}", "description": "A ColorPicker color slider component", "lineNumber": 26, "unknown": [ { "tagName": "@classdesc", "tagValue": "A ColorPicker color slider component" } ], "interface": false, "extends": [ "HTMLElement", "BaseComponent" ], "expressionExtends": "BaseComponent(HTMLElement)" }, { "__docId__": 893, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#constructor", "access": "public", "description": null, "lineNumber": 28, "ignore": true }, { "__docId__": 894, "kind": "member", "name": "_elements", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_elements", "access": "private", "description": null, "lineNumber": 50, "undocument": true, "ignore": true, "type": { "types": [ "{}" ] } }, { "__docId__": 895, "kind": "member", "name": "_label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_label", "access": "private", "description": null, "lineNumber": 54, "undocument": true, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 896, "kind": "member", "name": "_value", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_value", "access": "private", "description": null, "lineNumber": 55, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 897, "kind": "member", "name": "_color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_color", "access": "private", "description": null, "lineNumber": 56, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 898, "kind": "member", "name": "_hue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_hue", "access": "private", "description": null, "lineNumber": 57, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 899, "kind": "member", "name": "_min", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_min", "access": "private", "description": null, "lineNumber": 58, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 900, "kind": "member", "name": "_max", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_max", "access": "private", "description": null, "lineNumber": 59, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 901, "kind": "member", "name": "_step", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_step", "access": "private", "description": null, "lineNumber": 60, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 902, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#render", "access": "public", "description": null, "lineNumber": 64, "ignore": true, "params": [], "return": null }, { "__docId__": 903, "kind": "member", "name": "_handle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_handle", "access": "private", "description": null, "lineNumber": 93, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 904, "kind": "member", "name": "_slider", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_slider", "access": "private", "description": null, "lineNumber": 94, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 905, "kind": "member", "name": "label", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#label", "access": "public", "description": " \nThe ColorSlider label.\n
  • 'Hue' by default.
  • reflected
", "lineNumber": 105, "unknown": [ { "tagName": "@default", "tagValue": "'Hue'" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 908, "kind": "member", "name": "value", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#value", "access": "public", "description": " \nThe ColorSlider value. value should be in multiple of step size.\n
  • 0 by default.
  • reflected
", "lineNumber": 122, "unknown": [ { "tagName": "@default", "tagValue": "0" }, { "tagName": "@htmlattribute", "tagValue": "label" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 910, "kind": "member", "name": "color", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#color", "access": "public", "description": "The ColorSlider color string in hsla format.\n
  • hsla(0, 100%, 50%, 1) by default.
  • reflected
", "lineNumber": 139, "unknown": [ { "tagName": "@default", "tagValue": "hsla(0, 100%, 50%, 1)" }, { "tagName": "@htmlattribute", "tagValue": "color" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 913, "kind": "member", "name": "observedAttributes", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider.observedAttributes", "access": "public", "description": null, "lineNumber": 157, "ignore": true, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 914, "kind": "member", "name": "disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#disabled", "access": "public", "description": "Whether this field is disabled or not.\n
  • false by default.
  • reflected
", "lineNumber": 173, "unknown": [ { "tagName": "@default", "tagValue": "false" }, { "tagName": "@htmlattribute", "tagValue": "disabled" }, { "tagName": "@htmlattributereflected", "tagValue": "" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 916, "kind": "member", "name": "_disabled", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_disabled", "access": "private", "description": null, "lineNumber": 178, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 917, "kind": "method", "name": "focus", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#focus", "access": "public", "description": null, "lineNumber": 187, "undocument": true, "params": [], "return": null }, { "__docId__": 918, "kind": "method", "name": "_colorFromValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_colorFromValue", "access": "private", "description": null, "lineNumber": 192, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 919, "kind": "method", "name": "_syncInputSliderAttrs", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_syncInputSliderAttrs", "access": "private", "description": null, "lineNumber": 197, "ignore": true, "params": [], "return": null }, { "__docId__": 920, "kind": "method", "name": "_snapValueToStep", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_snapValueToStep", "access": "private", "description": null, "lineNumber": 216, "ignore": true, "params": [ { "name": "rawValue", "types": [ "*" ] }, { "name": "min", "types": [ "*" ] }, { "name": "max", "types": [ "*" ] }, { "name": "step", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 921, "kind": "method", "name": "_updateHandlePosition", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_updateHandlePosition", "access": "private", "description": null, "lineNumber": 236, "ignore": true, "params": [], "return": null }, { "__docId__": 922, "kind": "method", "name": "_focusHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_focusHandle", "access": "private", "description": null, "lineNumber": 244, "ignore": true, "params": [ { "name": "isFocused", "types": [ "*" ] } ], "return": null }, { "__docId__": 923, "kind": "method", "name": "_updateValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_updateValue", "access": "private", "description": null, "lineNumber": 256, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 927, "kind": "method", "name": "_changeValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_changeValue", "access": "private", "description": null, "lineNumber": 274, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 928, "kind": "method", "name": "_onInputChangeHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_onInputChangeHandler", "access": "private", "description": null, "lineNumber": 287, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 929, "kind": "method", "name": "_handleKey", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_handleKey", "access": "private", "description": null, "lineNumber": 295, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 930, "kind": "method", "name": "_onMouseDown", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_onMouseDown", "access": "private", "description": null, "lineNumber": 325, "ignore": true, "params": [], "return": null }, { "__docId__": 931, "kind": "member", "name": "_draggingHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_draggingHandler", "access": "private", "description": null, "lineNumber": 340, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 932, "kind": "member", "name": "_mouseUpHandler", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_mouseUpHandler", "access": "private", "description": null, "lineNumber": 341, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 933, "kind": "method", "name": "_getValueFromCoord", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_getValueFromCoord", "access": "private", "description": " @private", "lineNumber": 352, "ignore": true, "params": [ { "name": "posY", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 934, "kind": "method", "name": "_handleDragging", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_handleDragging", "access": "private", "description": null, "lineNumber": 367, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 935, "kind": "method", "name": "_mouseUp", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_mouseUp", "access": "private", "description": null, "lineNumber": 373, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 936, "kind": "member", "name": "_currentHandle", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_currentHandle", "access": "private", "description": null, "lineNumber": 386, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 939, "kind": "method", "name": "_getPoint", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_getPoint", "access": "private", "description": "", "lineNumber": 395, "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "which contains the real coordinates" }, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ] }, { "__docId__": 940, "kind": "method", "name": "_focus", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_focus", "access": "private", "description": "Handles \"focusin\" event.", "lineNumber": 411, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 941, "kind": "method", "name": "_blur", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSlider.js~ColorSlider#_blur", "access": "private", "description": "Handles \"focusout\" event.", "lineNumber": 420, "ignore": true, "params": [ { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 942, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport ColorSlider from './ColorSlider';\nimport { TinyColor } from '@ctrl/tinycolor';\n\nconst CLASSNAME = '_coral-ColorPicker-ColorSlider-hue';\n\n/**\n @class Coral.ColorPicker.ColorSliderHue\n @classdesc A ColorPicker color slider hue component to select Hue\n @htmltag coral-colorpicker-colorsliderhue\n @extends {ColorSlider}\n */\nclass ColorSliderHue extends ColorSlider {\n /** @ignore */\n constructor() {\n super();\n this._min = 0;\n this._max = 360;\n this._step = 1; \n }\n\n /** @private */ \n _updateValue(value) {\n super._updateValue(value);\n this._elements.slider.setAttribute('aria-valuetext', `${this.value}°`);\n }\n \n /** @ignore */ \n render() {\n super.render();\n this.classList.add(CLASSNAME);\n this._updateValue(this.value);\n }\n\n /** @private */ \n _colorFromValue(value) {\n return new TinyColor({ h: value, s: 1, l: .50, a:1 });\n } \n}\nexport default ColorSliderHue;", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 943, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 15, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 944, "kind": "class", "name": "ColorSliderHue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColorPicker}", "description": "A ColorPicker color slider hue component to select Hue", "lineNumber": 23, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColorPicker.ColorSliderHue" }, { "tagName": "@classdesc", "tagValue": "A ColorPicker color slider hue component to select Hue" }, { "tagName": "@htmltag", "tagValue": "coral-colorpicker-colorsliderhue" } ], "interface": false, "extends": [ "ColorSlider" ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColorPicker.ColorSliderHue();" ], "see": [ "../examples/#colorpicker" ] }, { "__docId__": 945, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#constructor", "access": "public", "description": null, "lineNumber": 25, "ignore": true }, { "__docId__": 946, "kind": "member", "name": "_min", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#_min", "access": "private", "description": null, "lineNumber": 27, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 947, "kind": "member", "name": "_max", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#_max", "access": "private", "description": null, "lineNumber": 28, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 948, "kind": "member", "name": "_step", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#_step", "access": "private", "description": null, "lineNumber": 29, "undocument": true, "ignore": true, "type": { "types": [ "number" ] } }, { "__docId__": 949, "kind": "method", "name": "_updateValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#_updateValue", "access": "private", "description": null, "lineNumber": 33, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 950, "kind": "method", "name": "render", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#render", "access": "public", "description": null, "lineNumber": 39, "ignore": true, "params": [], "return": null }, { "__docId__": 951, "kind": "method", "name": "_colorFromValue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorSliderHue.js~ColorSliderHue#_colorFromValue", "access": "private", "description": null, "lineNumber": 46, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 952, "kind": "file", "name": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport { TinyColor } from '@ctrl/tinycolor';\nimport ColorFormats from './ColorFormats';\n\nclass ColorUtil {\n\n constructor() {}\n /**\n Utility function to convert a color to Hsl string.\n\n @param {String} hue\n The hue value which is preserved in color conversion.\n @param {String} colorString\n The color string\n */\n toHslString(hue, colorString) {\n const color = new TinyColor(colorString);\n const hueExp = /(^hs[v|l]a?\\()\\d{1,3}/; \n return color.toHslString().replace(hueExp, `$1${hue}`);\n }\n\n /**\n Utility function to convert a color to Hsv string.\n\n @param {String} hue\n The hue value which is preserved in color conversion.\n @param {String} colorString\n The color string\n */\n toHsvString(hue, colorString) {\n const color = new TinyColor(colorString);\n const hueExp = /(^hs[v|l]a?\\()\\d{1,3}/; \n return color.toHsvString().replace(hueExp, `$1${hue}`);\n }\n\n /**\n Utility function to extract h,s and v from a color string.\n @param {String} colorString\n The color string\n */\n extractHsv(colorString) {\n const exp = /^hsva?\\((\\d{1,3}),\\s*(\\d{1,3}%),\\s*(\\d{1,3}%)/;\n if(!colorString.startsWith(\"hsv\")) {\n colorString = new TinyColor(colorString).toHsvString();\n } \n let groups = exp.exec(colorString);\n const h = parseInt(groups[1]);\n const s = parseInt(groups[2])/100;\n const v = parseInt(groups[3])/100;\n return {h:h, s:s, v:v};\n }\n \n /**\n Utility function to extract hue.\n @param {String} colorString\n The color string\n */\n getHue(colorString) {\n if(colorString.startsWith('hs')) {\n const hueExp = /^hs[v|l]a?\\((\\d{1,3})/;\n const values = hueExp.exec(colorString);\n const [, h] = values;\n return Number(h);\n } \n else {\n return new TinyColor(colorString).toHsv().h;\n } \n }\n\n /**\n Utility function to validate given formats in supported formats and return a list of formats.\n Any invalid/unsupported format is ignored.\n @param {Array} formats \n An array of formats to validate\n */ \n getValidFormats(formats) {\n const supportedFormats = Object.values(ColorFormats);\n let validFormats = [];\n formats.forEach(function(value){\n if(supportedFormats.indexOf(value) !== -1) {\n validFormats.push(value);\n }\n });\n return validFormats;\n }\n\n /**\n Utility function to convert a color into a desired format.\n @param {String} color \n The color string\n @param {String} format\n A color format\n */ \n formatColorString(color, format) {\n const hue = this.getHue(color);\n if(format === ColorFormats.HSV) {\n return this.toHsvString(hue, color);\n }\n else if(format === ColorFormats.HSL) {\n return this.toHslString(hue, color);\n } \n else {\n return new TinyColor(color).toString(format);\n }\n }\n \n}\n\nconst colorUtil = new ColorUtil();\nexport default colorUtil;\n ", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 953, "kind": "class", "name": "ColorUtil", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 15, "pseudoExport": true, "undocument": true, "interface": false }, { "__docId__": 954, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#constructor", "access": "public", "description": null, "lineNumber": 17, "undocument": true }, { "__docId__": 955, "kind": "method", "name": "toHslString", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#toHslString", "access": "public", "description": "Utility function to convert a color to Hsl string.", "lineNumber": 26, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hue", "description": "The hue value which is preserved in color conversion." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "colorString", "description": "The color string" } ], "return": { "types": [ "*" ] } }, { "__docId__": 956, "kind": "method", "name": "toHsvString", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#toHsvString", "access": "public", "description": "Utility function to convert a color to Hsv string.", "lineNumber": 40, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "hue", "description": "The hue value which is preserved in color conversion." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "colorString", "description": "The color string" } ], "return": { "types": [ "*" ] } }, { "__docId__": 957, "kind": "method", "name": "extractHsv", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#extractHsv", "access": "public", "description": "Utility function to extract h,s and v from a color string.", "lineNumber": 51, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "colorString", "description": "The color string" } ], "return": { "types": [ "{\"h\": *, \"s\": *, \"v\": *}" ] } }, { "__docId__": 958, "kind": "method", "name": "getHue", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#getHue", "access": "public", "description": "Utility function to extract hue.", "lineNumber": 68, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "colorString", "description": "The color string" } ], "return": { "types": [ "*" ] } }, { "__docId__": 959, "kind": "method", "name": "getValidFormats", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#getValidFormats", "access": "public", "description": "Utility function to validate given formats in supported formats and return a list of formats.\nAny invalid/unsupported format is ignored.", "lineNumber": 86, "params": [ { "nullable": null, "types": [ "Array" ], "spread": false, "optional": false, "name": "formats", "description": "An array of formats to validate" } ], "return": { "types": [ "*" ] } }, { "__docId__": 960, "kind": "method", "name": "formatColorString", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil#formatColorString", "access": "public", "description": "Utility function to convert a color into a desired format.", "lineNumber": 104, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "color", "description": "The color string" }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "format", "description": "A color format" } ], "return": { "types": [ "*" ] } }, { "__docId__": 961, "kind": "variable", "name": "colorUtil", "memberof": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js", "static": true, "longname": "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~colorUtil", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{colorUtil}", "description": null, "lineNumber": 120, "undocument": true, "type": { "types": [ "coral-spectrum/coral-component-colorpicker/src/scripts/ColorUtil.js~ColorUtil" ] } }, { "__docId__": 962, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport accessibilityState from '../templates/accessibilityState';\nimport {BaseComponent} from '../../../coral-base-component';\nimport ColumnViewCollection from './ColumnViewCollection';\nimport isInteractiveTarget from './isInteractiveTarget';\nimport selectionMode from './selectionMode';\nimport {transform, validate, commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-MillerColumns';\n\nconst scrollTo = (element, to, duration, scrollCallback) => {\n if (duration <= 0) {\n if (scrollCallback) {\n scrollCallback();\n }\n return;\n }\n\n const difference = to - element.scrollLeft;\n const perTick = difference / duration * 10;\n\n window.setTimeout(() => {\n element.scrollLeft = element.scrollLeft + perTick;\n if (element.scrollLeft === to) {\n if (scrollCallback) {\n scrollCallback();\n }\n } else {\n scrollTo(element, to, duration - 10, scrollCallback);\n }\n }, 10);\n};\n\n/**\n @class Coral.ColumnView\n @classdesc A ColumnView component to display and allow users to browse and select items in a dynamic tree structure\n (e.g. a filesystem or multi-level navigation).\n @htmltag coral-columnview\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ColumnView = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Content zone\n this._elements = {\n accessibilityState: this.querySelector('span[handle=\"accessibilityState\"]')\n };\n\n if (!this._elements.accessibilityState) {\n // Templates\n accessibilityState.call(this._elements, {commons});\n this._elements.accessibilityState.removeAttribute('aria-hidden');\n this._elements.accessibilityState.hidden = true;\n }\n\n // Events\n this._delegateEvents({\n // Prevents text selection while selecting multiple items\n 'global:keyup': '_onGlobalKeyUp',\n 'global:keydown': '_onGlobalKeyDown',\n\n 'key:up': '_onKeyUp',\n 'key:down': '_onKeyDown',\n 'key:right': '_onKeyRight',\n 'key:left': '_onKeyLeft',\n 'key:shift+up': '_onKeyShiftAndUp',\n 'key:shift+down': '_onKeyShiftAndDown',\n 'key:space': '_onKeySpace',\n 'key:control+a': '_onKeyCtrlA',\n 'key:command+a': '_onKeyCtrlA',\n 'key:control+shift+a': '_onKeyCtrlShiftA',\n 'key:command+shift+a': '_onKeyCtrlShiftA',\n 'key:esc': '_onKeyCtrlShiftA',\n\n 'capture:focus coral-columnview-item': '_onItemFocus',\n\n 'mousedown coral-columnview-item': '_onItemMouseDown',\n 'mouseup coral-columnview-item': '_onItemMouseUp',\n\n // column events\n 'coral-columnview-column:_loaditems': '_onColumnLoadItems',\n 'coral-columnview-column:_activeitemchanged': '_onColumnActiveItemChanged',\n 'coral-columnview-column:_selecteditemchanged': '_onColumnSelectedItemChanged'\n });\n\n // Defaults\n this._oldActiveItem = null;\n this._oldSelection = [];\n\n // default value of inner flag to process events\n this._bulkSelectionChange = false;\n\n // initializes the mutation observer that used to detect when new items are added or removed\n this._observer = new MutationObserver(this._handleMutation.bind(this));\n this._observer.observe(this, {\n // only watch the childList, items will tell us if selected/value/content changes\n childList: true\n });\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n this.columns._startHandlingItems(true);\n }\n\n /**\n Collection that holds all the columns inside the ColumnView.\n\n @type {ColumnViewCollection}\n @readonly\n */\n get columns() {\n // constructs the collection on first request\n if (!this._columns) {\n this._columns = new ColumnViewCollection({\n host: this,\n itemTagName: 'coral-columnview-column',\n onlyHandleChildren: true\n });\n }\n\n return this._columns;\n }\n\n /**\n Collection used to represent the coral-columnview-item across all columns.\n\n @type {ColumnViewCollection}\n @readonly\n\n @private\n */\n get items() {\n // constructs the collection on first request\n if (!this._items) {\n this._items = new ColumnViewCollection({\n host: this,\n itemTagName: 'coral-columnview-item'\n });\n }\n\n return this._items;\n }\n\n /**\n Selection mode of the ColumnView. See {@link ColumnViewSelectionModeEnum}.\n\n @type {String}\n @default ColumnViewSelectionModeEnum.NONE\n @htmlattribute selectionmode\n @htmlattributereflected\n */\n get selectionMode() {\n return this._selectionMode || selectionMode.NONE;\n }\n\n set selectionMode(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(selectionMode)(value) && value || selectionMode.NONE;\n\n this._reflectAttribute('selectionmode', value);\n \n if(validate.valueMustChange(this._selectionMode, value)) {\n this._selectionMode = value;\n\n // propagates the selection mode to the columns\n let columns = this.columns.getAll();\n columns.forEach((item) => {\n item.setAttribute('_selectionmode', value);\n });\n \n this.classList.remove(`${CLASSNAME}--selection`);\n \n if (value !== selectionMode.NONE) {\n this.classList.add(`${CLASSNAME}--selection`);\n }\n \n // @a11y\n this.setAttribute('aria-multiselectable', value === selectionMode.MULTIPLE);\n }\n }\n\n /**\n First selected item of the ColumnView.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.selectionMode !== selectionMode.NONE ? this.items._getFirstSelected() : null;\n }\n\n /**\n Array containing the set selected items. The items will match only one column since selection across columns is\n not allowed.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.selectionMode !== selectionMode.NONE ? this.items._getAllSelected() : [];\n }\n\n /**\n Active Item that corresponds to the last item in the path.\n\n @type {HTMLElement}\n @readonly\n */\n get activeItem() {\n return this.items._getAllActive().pop() || null;\n }\n\n /** @private */\n _onColumnActiveItemChanged(event) {\n // this is a private event and should not leave the column view\n event.stopImmediatePropagation();\n\n // ignores event handling due to bulk select operation\n if (this._bulkSelectionChange) {\n return;\n }\n\n const column = event.target;\n\n // clears the internal selection cursor\n this._handleKeyboardMultiselect(null);\n\n this._bulkSelectionChange = true;\n\n if (!event.detail.activeItem) {\n // all items to the right must be removed. we do this at the end to be able to extract the values before\n // removing everything\n this._afterItemSelectedInColumn(column);\n } else {\n // when there is an active item, selection must not exist\n this.items._deselectAllExcept();\n\n // we need to deactivate every item to the right of the new active item to keep a correct DOM representation\n let nextColumn = column.nextElementSibling;\n while (nextColumn) {\n // We ignore preview columns\n if (nextColumn.tagName === 'CORAL-COLUMNVIEW-COLUMN' && nextColumn.items) {\n nextColumn.items._deactivateAll();\n }\n\n nextColumn = nextColumn.nextElementSibling;\n }\n }\n\n this._bulkSelectionChange = false;\n\n // we trigger the appropiate events\n this._validateColumnViewChange();\n }\n\n /**\n Requests external data to be loaded.\n\n @emits {coral-columnview:loaditems}\n\n @private\n */\n _onColumnLoadItems(event) {\n // this is a private event and should not leave the column view\n event.stopImmediatePropagation();\n\n this._updateAriaLevel(event.target);\n this._ensureTabbableItem();\n\n // triggers an event to indicate more data could be loaded\n this.trigger('coral-columnview:loaditems', {\n column: event.target,\n start: event.detail.start,\n item: event.detail.item\n });\n }\n\n /**\n Handle when first selectable item is added and make sure it is tabbable.\n @param {HTMLElement} [item]\n @private\n */\n _onItemAdd() {\n window.requestAnimationFrame(() => this._ensureTabbableItem());\n }\n\n /**\n Handle when item is removed, make sure that at least one element is tabbable, or if there are no items, and add listener to handle when item is added.\n @param {HTMLElement} [item]\n Item that was removed.\n @private\n */\n _onItemRemoved() {\n window.requestAnimationFrame(() => this._ensureTabbableItem());\n }\n\n /* @private */\n _ensureTabbableItem() {\n this._vent.off('coral-collection:add', this._onItemAdd);\n this._vent.off('coral-collection:remove', this._onItemRemoved);\n // Ensures that item will receive focus\n if (!this.selectedItem && !this.activeItem) {\n const selectableItems = this.items._getSelectableItems();\n // If there are no selectable items, stop listening for items being removed and start listening for the next item added.\n if (!selectableItems.length) {\n this._vent.off('coral-collection:remove', this._onItemRemoved);\n this._vent.on('coral-collection:add', this._onItemAdd);\n } else {\n // Otherwise, if there is a selectable item, make sure it has a tabIndex.\n selectableItems[0].tabIndex = 0;\n // Listen for item removal so that we can handle the edge case where all items have been removed.\n this._vent.on('coral-collection:remove', this._onItemRemoved);\n }\n } else if (this.selectedItem && this.selectedItem.tabIndex !== 0) {\n // If the selectedItem is not tabbable, make sure that it has tabIndex === 0\n this.selectedItem.tabIndex = 0;\n } else if (this.activeItem && this.activeItem.tabIndex !== 0) {\n // If the activeItem is not tabbable, make sure that it has tabIndex === 0\n this.activeItem.tabIndex = 0;\n }\n }\n\n /** @private */\n _onColumnSelectedItemChanged(event) {\n // this is a private event and should not leave the column view\n event.stopImmediatePropagation();\n\n // ignores event handling due to bulk select operation\n if (this._bulkSelectionChange || this.selectionMode === selectionMode.NONE) {\n return;\n }\n\n this._bulkSelectionChange = true;\n // we need to deselect any other selection that is not part of the same column\n this._oldSelection.forEach((el) => {\n if (event.detail.selection.indexOf(el) === -1) {\n el.removeAttribute('selected');\n }\n });\n this._bulkSelectionChange = false;\n\n // we trigger the appropiate events\n this._validateColumnViewChange();\n }\n\n /** @private */\n _onGlobalKeyUp(event) {\n // removes the class to stop selection\n if (event.keyCode === 16 && !isInteractiveTarget(event.target)) {\n this.classList.remove('is-unselectable');\n }\n }\n\n /** @private */\n _onGlobalKeyDown(event) {\n // adds a class that prevents the text selection, otherwise shift + click would select the text\n if (event.keyCode === 16 || !isInteractiveTarget(event.target)) {\n this.classList.add('is-unselectable');\n }\n }\n\n /** @private */\n _onKeyShiftAndUp(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't select items when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n if (this.selectionMode === selectionMode.NONE) {\n this._onKeyUp(event);\n return;\n }\n\n // using _oldSelection since it should be equivalent to this.items._getSelectedItems() but faster\n const oldSelectedItems = this._oldSelection;\n\n this._isKeyBoardMultiselect = true;\n\n // first make sure to select the active item as we want to multiselect\n if (oldSelectedItems.length === 0) {\n const activeItem = this.activeItem;\n\n if (activeItem) {\n activeItem.setAttribute('selected', '');\n }\n }\n\n // gets all the selected items of the active column. calling _getSelectedItems() will include the active item\n // if it was selected\n const selectedItems = this.items._getAllSelected();\n // reference of the last selected item to know the direction of the selection while using the multiselection\n const lastSelected = this._lastSelected;\n\n let selectedItem;\n // when no previous selection is stored we need to initialize it with the current information\n if (!lastSelected) {\n selectedItem = selectedItems[0].previousElementSibling;\n // selects the item\n selectedItem.setAttribute('selected', '');\n } else if (lastSelected.item) {\n selectedItem = lastSelected.item;\n\n // we have reached the upper selection limit\n if (selectedItem.matches(':first-child')) {\n this._isKeyBoardMultiselect = false;\n return;\n }\n\n if (!lastSelected.direction || lastSelected.direction === 'up') {\n selectedItem = selectedItem.previousElementSibling;\n selectedItem.setAttribute('selected', '');\n } else {\n if (selectedItem !== lastSelected.firstSelectedItem) {\n selectedItem.removeAttribute('selected');\n } else {\n // switches the direction if this was the last item selected\n lastSelected.direction = 'up';\n }\n\n selectedItem = selectedItem.previousElementSibling;\n selectedItem.setAttribute('selected', '');\n }\n }\n\n // stores the reference and direction to be able to perform the multiple selection correctly\n this._lastSelected = {\n item: selectedItem,\n direction: lastSelected && lastSelected.direction ? lastSelected.direction : 'up',\n firstSelectedItem: lastSelected && lastSelected.firstSelectedItem ?\n lastSelected.firstSelectedItem :\n selectedItem.nextElementSibling\n };\n\n if (selectedItem && selectedItem !== document.activeElement) {\n selectedItem.focus();\n }\n\n this._isKeyBoardMultiselect = false;\n }\n\n /** @private */\n _onKeyShiftAndDown(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't select items when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n if (this.selectionMode === selectionMode.NONE) {\n this._onKeyDown(event);\n return;\n }\n\n // using _oldSelection since it should be equivalent to this.items._getSelectedItems() but faster\n const oldSelectedItems = this._oldSelection;\n\n this._isKeyBoardMultiselect = true;\n\n // first make sure to select the active item as we want to multiselect\n if (oldSelectedItems.length === 0) {\n const activeItem = this.activeItem;\n\n if (activeItem) {\n activeItem.setAttribute('selected', '');\n }\n }\n\n // gets all the selected items of the active column. calling _getSelectedItems() will include the active item\n // if it was selected\n const selectedItems = this.items._getAllSelected();\n\n // reference of the last selected item to know the direction of the selection while using the multiselection\n const lastSelected = this._lastSelected;\n\n let selectedItem;\n // when no previous selection is stored we need to initialize it with the current information\n if (!lastSelected) {\n selectedItem = selectedItems[selectedItems.length - 1].nextElementSibling;\n // selects the item\n selectedItem.setAttribute('selected', '');\n } else if (lastSelected.item) {\n selectedItem = lastSelected.item;\n\n // we have reached the lower selection limit\n if (selectedItem.matches(':last-child')) {\n this._isKeyBoardMultiselect = false;\n return;\n }\n\n if (!lastSelected.direction || lastSelected.direction === 'down') {\n selectedItem = selectedItem.nextElementSibling;\n selectedItem.setAttribute('selected', '');\n } else {\n if (selectedItem !== lastSelected.firstSelectedItem) {\n selectedItem.removeAttribute('selected');\n } else {\n // switches the direction if this was the last item selected\n lastSelected.direction = 'down';\n }\n\n selectedItem = selectedItem.nextElementSibling;\n selectedItem.setAttribute('selected', '');\n }\n }\n\n // stores the reference and direction to be able to perform the multiple selection correctly\n this._lastSelected = {\n item: selectedItem,\n direction: lastSelected && lastSelected.direction ? lastSelected.direction : 'down',\n firstSelectedItem: lastSelected && lastSelected.firstSelectedItem ?\n lastSelected.firstSelectedItem :\n selectedItem.previousElementSibling\n };\n\n if (selectedItem && selectedItem !== document.activeElement) {\n selectedItem.focus();\n }\n\n this._isKeyBoardMultiselect = false;\n }\n\n /** @private */\n _onKeyUp(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't navigate items when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // selection will win over active buttons, because they are the right most item. using _oldSelection since it\n // should be equivalent to this.items._getSelectedItems() but faster\n const selectedItems = this._oldSelection;\n\n let item;\n if (selectedItems.length !== 0) {\n const selectedItem = matchedTarget;\n\n item = selectedItem.previousElementSibling;\n if (!item) {\n item = selectedItem;\n }\n }\n // when there is no active item to select, we get the last item of the column. this way users can interact with\n // the column view when there is nothing selected or activated\n else if (this._oldActiveItem === null) {\n item = this.items._getLastSelectable();\n } else {\n item = this._oldActiveItem.previousElementSibling;\n }\n\n // we use click instead of selected to force the deselection of the other items\n if (item && item !== document.activeElement) {\n item.focus();\n if (this.selectionMode === selectionMode.NONE ||\n selectedItems.length === 0 ||\n // For use case in cascading schema editor,\n // where the focused item is not in the same column as the selected items,\n // we should activate the item so that coral-columnview:activeitemchange gets called.\n item.parentElement !== selectedItems[0].parentElement) {\n item.click();\n }\n }\n }\n\n /** @private */\n _onKeyDown(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't navigate items when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // selection will win over active buttons, because they are the right most item. using _oldSelection since it\n // should be equivalent to this.items._getSelectedItems() but faster\n const selectedItems = this._oldSelection;\n\n let item;\n if (selectedItems.length !== 0) {\n const selectedItem = matchedTarget;\n\n item = selectedItem.nextElementSibling;\n\n // when\n if (!item) {\n item = matchedTarget;\n }\n }\n // when there is no active item to select, we get the first item of the column. this way users can interact with\n // the column view when there is nothing selected or activated\n else if (this._oldActiveItem === null) {\n item = this.items._getFirstSelectable();\n } else {\n item = this._oldActiveItem.nextElementSibling;\n }\n\n // we use click instead of selected to force the deselection of the other items\n if (item && item !== document.activeElement) {\n item.focus();\n if (this.selectionMode === selectionMode.NONE ||\n selectedItems.length === 0 ||\n // For use case in cascading schema editor,\n // where the focused item is not in the same column as the selected items,\n // we should activate the item so that coral-columnview:activeitemchange gets called.\n item.parentElement !== selectedItems[0].parentElement) {\n item.click();\n }\n }\n }\n\n /** @private */\n _onKeyRight(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n if (matchedTarget.variant !== ColumnView.Item.variant.DRILLDOWN) {\n return false;\n }\n\n if (isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // we can only navigate right when there is a column on the right side to navigate to\n let nextColumn;\n // using _oldSelection since it should be equivalent to this.items._getSelectedItems() but faster\n let selectedItems = this._oldSelection;\n\n // when there is an active item, we use the item containing the active item as reference\n if (matchedTarget) {\n nextColumn = matchedTarget.closest('coral-columnview-column').nextElementSibling;\n }\n // otherwise when there is selection, we use the item containing the selected items as reference\n else if (selectedItems.length !== 0) {\n nextColumn = selectedItems[0].closest('coral-columnview-column').nextElementSibling;\n }\n\n if (nextColumn && nextColumn.tagName === 'CORAL-COLUMNVIEW-COLUMN') {\n // we need to make sure the column is initialized\n commons.ready(nextColumn, () => this._focusAndActivateFirstSelectableItem(nextColumn));\n }\n }\n\n /** @private */\n _onKeyLeft(event) {\n if (isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // we can only navigate left when there is a column on the left side to navigate to\n let previousColumn;\n // using _oldSelection since it should be equivalent to this.items._getSelectedItems() but faster\n const selectedItems = this._oldSelection;\n\n // when there is selection, we use the previous column as a reference\n if (selectedItems.length !== 0) {\n previousColumn = selectedItems[0].closest('coral-columnview-column').previousElementSibling;\n }\n // otherwise we use the activeItems as a reference\n else if (this.activeItem) {\n const col = this.activeItem.closest('coral-columnview-column');\n previousColumn = event.target.closest('coral-columnview-preview') ? col : col.previousElementSibling;\n }\n\n if (previousColumn && previousColumn.tagName === 'CORAL-COLUMNVIEW-COLUMN') {\n // we need to make sure the column is initialized\n const activeDescendant = previousColumn.activeItem || previousColumn.items._getFirstSelected() || previousColumn.items._getFirstSelectable();\n if (activeDescendant && activeDescendant !== document.activeElement) {\n activeDescendant.focus();\n if (this.selectionMode === selectionMode.NONE ||\n selectedItems.length === 0) {\n activeDescendant.click();\n }\n }\n }\n }\n\n /** @private */\n _onKeySpace(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't select item when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // using _oldSelection since it should be equivalent to this.items._getSelectedItems() but faster\n const selectedItems = this._oldSelection;\n let activeDescendant;\n\n // when there is a selection, we need to activate the first item of the selection\n if (selectedItems.length !== 0) {\n activeDescendant = matchedTarget;\n if (activeDescendant.hasAttribute('selected', '')) {\n if (selectedItems.length === 1) {\n activeDescendant.setAttribute('active', '');\n } else {\n activeDescendant.removeAttribute('selected', '');\n }\n } else {\n activeDescendant.setAttribute('selected', '');\n }\n } else {\n const activeItem = this.activeItem || matchedTarget;\n // toggles the selection between active and selected\n if (activeItem && this.selectionMode !== selectionMode.NONE) {\n // select the item\n activeItem.setAttribute('selected', '');\n activeDescendant = activeItem;\n }\n }\n }\n\n /** @private */\n _onKeyCtrlA(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't select item when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n if (this.selectionMode === selectionMode.MULTIPLE) {\n const currentColumn = matchedTarget.closest('coral-columnview-column');\n currentColumn.items._selectAll();\n } else if (this.selectionMode === selectionMode.SINGLE) {\n if (!matchedTarget.hasAttribute('selected')) {\n matchedTarget.setAttribute('selected', '');\n }\n }\n }\n\n /** @private */\n _onKeyCtrlShiftA(event) {\n const matchedTarget = this._getRealMatchedTarget(event);\n\n // don't select item when focus is within the preview\n if (matchedTarget.closest('coral-columnview-preview') || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n if (this.selectionMode !== selectionMode.NONE) {\n const currentColumn = matchedTarget.closest('coral-columnview-column');\n currentColumn.items._deselectAndDeactivateAllExcept(matchedTarget);\n if (!matchedTarget.hasAttribute('active')) {\n matchedTarget.setAttribute('active', '');\n }\n }\n }\n\n /** @private */\n _onItemFocus(event) {\n if (isInteractiveTarget(event.target)) {\n return;\n }\n\n const matchedTarget = this._getRealMatchedTarget(event);\n if (!this.activeItem && !this._oldSelection.length && !matchedTarget._flagMouseDown) {\n matchedTarget.setAttribute('active', '');\n }\n this.items._getSelectableItems().forEach(item => {\n item.tabIndex = item === matchedTarget ? 0 : -1;\n });\n\n if (matchedTarget.contains(document.activeElement)) {\n matchedTarget.focus();\n }\n }\n\n /** @ignore */\n _onItemMouseDown(event) {\n if (isInteractiveTarget(event.target)) {\n return;\n }\n var matchedTarget = this._getRealMatchedTarget(event);\n matchedTarget._flagMouseDown = true;\n }\n\n /** @ignore */\n _onItemMouseUp(event) {\n if (isInteractiveTarget(event.target)) {\n return;\n }\n var matchedTarget = this._getRealMatchedTarget(event);\n delete matchedTarget._flagMouseDown;\n }\n\n /** @ignore */\n _updateAriaLevel(column) {\n const colIndex = this.columns.getAll().indexOf(column);\n const level = colIndex + 1;\n if (column.items) {\n let items = column.items.getAll();\n items.filter((item, index) => {\n item.setAttribute('aria-posinset', index + 1);\n item.setAttribute('aria-setsize', items.length);\n return !item.hasAttribute('aria-level');\n }).forEach((item) => {\n item.setAttribute('aria-level', level);\n });\n }\n\n // root column has role=\"presentation\"\n if (colIndex === 0) {\n column.setAttribute('role', 'presentation');\n // and should not be labeled.\n return;\n }\n\n // Make sure the column group has a label so that it can be navigated with VoiceOver\n if (!column.hasAttribute('aria-labelledby')) {\n if (!column.hasAttribute('aria-label')) {\n column.setAttribute('aria-label', (this.getAttribute('aria-label') || '…'));\n }\n } else if (column.getAttribute('aria-label') === (this.getAttribute('aria-label') || '…')) {\n column.removeAttribute('aria-label');\n }\n }\n\n /** @private */\n _arraysAreDifferent(selection, oldSelection) {\n let diff = [];\n\n if (oldSelection.length === selection.length) {\n diff = oldSelection.filter((item) => selection.indexOf(item) === -1);\n }\n\n // since we guarantee that they are arrays, we can start by comparing their size\n return oldSelection.length !== selection.length || diff.length !== 0;\n }\n\n /** @private */\n _handleKeyboardMultiselect(newSelectedItem) {\n if (!this._isKeyBoardMultiselect) {\n this._lastSelected = undefined;\n\n // if there is a new selected item save this (but without direction info)\n if (newSelectedItem) {\n this._lastSelected = {\n item: newSelectedItem,\n direction: null,\n firstSelectedItem: newSelectedItem\n };\n }\n }\n }\n\n /**\n Scrolls the given {@link Coral.ColumnView.Column} into view.\n\n @param {HTMLElement} column\n The column that needs to be scrolled into view.\n @param {Boolean} clearEmptyColumns\n Remove empty columns once animation is done.\n @param {Boolean} triggerEvent\n\n @private\n */\n _scrollColumnIntoView(column, clearEmptyColumns, triggerEvent) {\n // @todo: improve animation effect when key is kept press\n let left = 0;\n let duration;\n\n // we return if the column is not inside the current column view\n if (!this.contains(column)) {\n return;\n }\n\n // make sure to clear columns next to this column if animation is done\n const completeCallback = () => {\n if (clearEmptyColumns) {\n this._removeEmptyColumnsWithSmoothTransition(triggerEvent);\n }\n };\n\n // scroll right to the given column\n if (column.getBoundingClientRect().left + column.offsetWidth >= this.offsetWidth) {\n let next = column.nextElementSibling;\n while (next) {\n next.parentNode.removeChild(next);\n next = column.nextElementSibling;\n }\n\n left = this.scrollWidth - this.offsetWidth;\n duration = left - this.scrollLeft;\n scrollTo(this, left, duration, completeCallback);\n } else if (clearEmptyColumns) {\n this._removeEmptyColumnsWithSmoothTransition(triggerEvent);\n }\n }\n\n /**\n Handling of the column view after selecting an item.\n\n @param {HTMLElement} column\n\n @private\n */\n _afterItemSelectedInColumn(column) {\n // @todo: emptying the columns allows them to be queried\n this._emptyColumnsNextToColumn(column);\n this._scrollColumnIntoView(column, true, true);\n }\n\n /**\n Empties all the columns to the right of the provided column.\n\n @param {HTMLElement} column\n\n @private\n */\n _emptyColumnsNextToColumn(column) {\n if (column !== null) {\n let next = column.nextElementSibling;\n while (next && next.innerHTML.length) {\n next.innerHTML = '';\n next = next.nextElementSibling;\n }\n }\n }\n\n /**\n Remove all empty columns with a smooth transition. Optionally the navigate event is triggered when all the extra\n columns are removed from the DOM.\n\n @param {Boolean} triggerEvent\n Whether the navigate event must be triggered.\n\n @private\n */\n _removeEmptyColumnsWithSmoothTransition(triggerEvent) {\n // fade width of empty items to 0 before removing the columns (for better usability while navigating)\n const emptyColumns = Array.prototype.filter.call(this.querySelectorAll('coral-columnview-column, coral-columnview-preview'), el => !el.firstChild);\n\n if (emptyColumns.length) {\n emptyColumns.forEach((column, i) => {\n column.style.visibility = 'hidden';\n column.classList.add('is-collapsing');\n commons.transitionEnd(column, () => {\n column.remove();\n if (i === emptyColumns.length - 1 && triggerEvent) {\n this._validateNavigation(this.columns.last());\n }\n });\n column.style.width = 0;\n });\n } else if (triggerEvent) {\n this._validateNavigation(this.columns.last());\n }\n }\n\n /** @private */\n _triggerCollectionEvents(addedNodes, removedNodes) {\n let item;\n const addedNodesCount = addedNodes.length;\n for (let i = 0 ; i < addedNodesCount ; i++) {\n item = addedNodes[i];\n if (this.activeItem) {\n // @a11y add aria-owns attribute to active item to express relationship of added column to the active item\n this.activeItem.setAttribute('aria-owns', item.id);\n\n // @a11y column or preview should be labelled by active item\n item.setAttribute('aria-labelledby', this.activeItem.content.id);\n\n // @a11y preview should provide description for active item\n if (item.tagName === 'CORAL-COLUMNVIEW-PREVIEW') {\n this.activeItem.setAttribute('aria-describedby', item.id);\n }\n }\n\n if (item.tagName === 'CORAL-COLUMNVIEW-COLUMN') {\n // we use the property since the item may not be ready\n item.setAttribute('_selectionmode', this.selectionMode);\n this.trigger('coral-collection:add', {item});\n this._updateAriaLevel(item);\n }\n }\n\n // @todo: check if special handling is needed when selected column is removed\n const removedNodesCount = removedNodes.length;\n for (let j = 0 ; j < removedNodesCount ; j++) {\n item = removedNodes[j];\n // @todo: should I handle it specially if it was selected? should a selection and active event be triggered?\n if (item.tagName === 'CORAL-COLUMNVIEW-COLUMN') {\n this.trigger('coral-collection:remove', {item});\n }\n }\n }\n\n /** @private */\n _setStateFromDOM() {\n // @todo: should I trigger change events?\n // initial state of the columnview\n this._oldActiveItem = this.activeItem;\n this._oldSelection = this.selectedItems;\n\n this._ensureTabbableItem();\n\n if (this.columns) {\n var columns = this.columns.getAll();\n var self = this;\n columns.forEach(function (column) {\n self._updateAriaLevel(column);\n });\n }\n }\n\n /** @private */\n _handleMutation(mutations) {\n const mutationsCount = mutations.length;\n for (let i = 0 ; i < mutationsCount ; i++) {\n const mutation = mutations[i];\n\n // we handle the collection events\n this._triggerCollectionEvents(mutation.addedNodes, mutation.removedNodes);\n }\n\n // sets the internal state based on the existing columns\n this._setStateFromDOM();\n }\n\n /**\n Determines if something of the internal state of the component has changed. Active item event is always triggered\n first and then the selection event.\n\n @private\n */\n _validateColumnViewChange() {\n // we evaluate first the active event since we always need to trigger active first and then selection\n const activeItem = this.activeItem;\n const oldActiveItem = this._oldActiveItem;\n\n // same column events are only triggered if the active item changed, otherwise they are ignored\n if (activeItem !== oldActiveItem) {\n this.trigger('coral-columnview:activeitemchange', {activeItem, oldActiveItem});\n\n // we cache the old active item to be able to report correct change events\n this._oldActiveItem = activeItem;\n }\n\n // when there is no selection we avoid triggering any change event but we do not stop items from having the\n // selected attribute\n if (this.selectionMode === selectionMode.NONE) {\n return;\n }\n\n const newSelection = this.selectedItems;\n const oldSelection = this._oldSelection || [];\n\n // use first newly selected item for new selection\n const newSelectedItems = newSelection.filter((item) => oldSelection.indexOf(item) === -1);\n this._handleKeyboardMultiselect(newSelectedItems.length > 0 ? newSelectedItems[0] : null);\n\n if (this._arraysAreDifferent(newSelection, oldSelection)) {\n this.trigger('coral-columnview:change', {\n selection: newSelection,\n oldSelection: oldSelection\n });\n\n // changes the old selection array since we selected something new\n this._oldSelection = newSelection;\n\n // announce the selection state for the focused item\n this._announceActiveElementState();\n }\n }\n\n /**\n Triggers the navigation event. Navigation would happen when a) a new column is added, and it is ready to be\n used or b) columns are removed and the active changed. In case the column is actually a preview column, the event\n will only be triggered when there is no selection (meanning a real navigation was performed).\n\n @param {HTMLElement} column\n Last column of the ColumnView.\n\n @emits {coral-columnview:navigate}\n\n @private\n */\n _validateNavigation(column) {\n // we use _oldSelection because it is faster\n if (column.tagName === 'CORAL-COLUMNVIEW-PREVIEW' && this._oldSelection.length !== 0) {\n return;\n }\n\n this.trigger('coral-columnview:navigate', {\n activeItem: this.activeItem,\n column: column\n });\n }\n\n /* @private */\n _announceActiveElementState() {\n // @a11y Add live region element to ensure announcement of selected state\n const accessibilityState = this._elements.accessibilityState;\n\n // @a11y accessibility state string should announce in document lang, rather than item lang.\n accessibilityState.setAttribute('lang', i18n.locale);\n\n // @a11y append live region content element\n if (!this.contains(accessibilityState)) {\n this.appendChild(accessibilityState);\n }\n\n // utility method to clean up accessibility state\n function resetAccessibilityState() {\n accessibilityState.hidden = true;\n accessibilityState.setAttribute('aria-live', 'off');\n accessibilityState.innerHTML = '';\n }\n\n resetAccessibilityState();\n\n if (this._addTimeout || this._removeTimeout) {\n clearTimeout(this._addTimeout);\n clearTimeout(this._removeTimeout);\n }\n\n // we use setTimeout instead of nextFrame to give screen reader\n // more time to respond to live region update in order to announce\n // complete text content when the state changes.\n this._addTimeout = window.setTimeout(() => {\n const activeElement = document.activeElement.closest('coral-columnview-item') || document.activeElement;\n\n if (!this.contains(activeElement) || activeElement.tagName !== 'CORAL-COLUMNVIEW-ITEM') {\n return;\n }\n\n const span = document.createElement('span');\n const contentSpan = document.createElement('span');\n const lang = !activeElement.hasAttribute('lang') && activeElement.closest('[lang]') ? activeElement.closest('[lang]').getAttribute('lang') : activeElement.getAttribute('lang');\n if (lang && lang !== i18n.locale) {\n contentSpan.setAttribute('lang', lang);\n }\n contentSpan.innerText = activeElement._elements.content.innerText;\n span.appendChild(contentSpan);\n span.appendChild(\n document.createTextNode(\n i18n.get(activeElement.selected ? ', checked' : ', unchecked')\n )\n );\n accessibilityState.hidden = false;\n accessibilityState.setAttribute('aria-live', 'assertive');\n accessibilityState.appendChild(span);\n\n // give screen reader 2 secs before clearing the live region, to provide enough time for announcement\n this._removeTimeout = window.setTimeout(() => {\n resetAccessibilityState();\n if(accessibilityState.parentNode) {\n this._elements.accessibilityState = accessibilityState.parentNode.removeChild(accessibilityState);\n }\n }, 2000);\n }, 20);\n }\n\n /**\n * Helper function to extract the correct matchedTarget from the event.\n *\n * Tests can interact with ColumnView directly where the key events are triggered on\n * the ColumnView itself. In that case the event.matchedTarget point to the ColumnView\n * instead of the ColumnViewItem, in other word the active or selected element.\n *\n * @private\n **/\n _getRealMatchedTarget(event) {\n if (event.matchedTarget.nodeName !== 'CORAL-COLUMNVIEW') {\n return event.matchedTarget;\n }\n if (event.matchedTarget.contains(document.activeElement) && document.activeElement.nodeName === 'CORAL-COLUMNVIEW-ITEM') {\n return document.activeElement;\n }\n if (event.matchedTarget.selectedItem) {\n return event.matchedTarget.selectedItem;\n }\n if (event.matchedTarget.activeItem) {\n return event.matchedTarget.activeItem;\n }\n }\n\n _focusAndActivateFirstSelectableItem(column) {\n let item;\n let selectedItems = this.selectedItems;\n\n if (column.items) {\n item = column.items._getFirstSelectable();\n } else if (column.tagName === 'CORAL-COLUMNVIEW-PREVIEW') {\n item = selectedItems[0] || this.activeItem;\n }\n\n if (item && item !== document.activeElement) {\n item.focus();\n if (this.selectionMode === selectionMode.NONE ||\n this._oldSelection.length === 0 ||\n selectedItems.length === 0 ||\n // For use case in cascading schema editor,\n // where the focused item is not in the same column as the selected items,\n // we should activate the item so that coral-columnview:activeitemchange gets called.\n item.parentElement !== selectedItems[0].parentElement) {\n item.click();\n }\n }\n }\n\n /** @ignore */\n focus() {\n // selected items go first because there is no active item in a column with selection\n const item = this.selectedItems[0] || this.activeItem;\n if (item && item !== document.activeElement) {\n item.focus();\n }\n }\n\n /**\n Sets the next column given a reference column. This will handle cleaning the DOM and removing any columns as\n required.\n\n @param {HTMLElement} newColumn\n The new column to add to the column view. It will be placed next to the referenceColumn if\n provided.\n @param {HTMLElement} referenceColumn\n The column that will be used as a reference to place the new column. This column needs to be already inside the\n DOM.\n @param {Boolean} [scrollToColumn = true]\n Whether the columnview show scroll to have the newColumn visible.\n\n @emits {coral-columnview:navigate}\n */\n setNextColumn(newColumn, referenceColumn, scrollToColumn) {\n scrollToColumn = typeof scrollToColumn === 'undefined' || scrollToColumn;\n\n const column = referenceColumn || null;\n\n let columnReplacedContainedFocus = false;\n\n // handles the case where the first column needs to be added\n if (column === null || !this.contains(column)) {\n this.appendChild(newColumn);\n } else {\n const nextColumn = column.nextElementSibling;\n\n if (nextColumn) {\n columnReplacedContainedFocus = nextColumn.contains(document.activeElement);\n this._emptyColumnsNextToColumn(column);\n const before = nextColumn.nextElementSibling;\n this.removeChild(nextColumn);\n this.insertBefore(newColumn, before);\n } else {\n this.appendChild(newColumn);\n }\n }\n\n // if we want to scroll to it, we need for it to be ready due to measurements\n commons.ready(newColumn, () => {\n if (scrollToColumn) {\n // event is not triggered because it is handled separately\n this._scrollColumnIntoView(newColumn, true, false);\n }\n\n // we notify that the columnview navigated and it is ready to be used\n this._validateNavigation(newColumn);\n\n // if the column the newColumn replaces contained focus, restore focus to an item in the newColumn\n if (columnReplacedContainedFocus && !newColumn.contains(document.activeElement)) {\n this._focusAndActivateFirstSelectableItem(newColumn);\n }\n });\n }\n\n /**\n Returns {@link ColumnView} selection options.\n\n @return {ColumnViewSelectionModeEnum}\n */\n static get selectionMode() {\n return selectionMode;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n selectionmode: 'selectionMode'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'selectionmode'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // @a11y\n this.setAttribute('role', 'tree');\n // @a11y: the columnview needs to be focusable to handle a11y properly\n this.tabIndex = -1;\n // @a11y: the columnview should be labelled so that its entire content\n // is not read as its accessibility name\n if (!this.hasAttribute('aria-label') && !this.hasAttribute('aria-labelledby')) {\n this.setAttribute('aria-label', i18n.get('Column View'));\n }\n\n // Default reflect attributes\n if (!this._selectionMode) {\n this._selectionMode = selectionMode.NONE;\n }\n\n // no need to wait for the mutation observers\n this._setStateFromDOM();\n }\n\n /**\n Triggered when additional items can be loaded into the {@link ColumnView}. This will happen when the current column can\n still hold more items, when the user scrolls down the current column or when a new column needs to be loaded. If\n preventDefault() is called, then a loading indicator will be shown.\n {@link ColumnViewColumn#loading} should be set to false to indicate that the data has been successfully\n loaded.\n\n @typedef {CustomEvent} coral-columnview:loaditems\n\n @property {ColumnViewColumn} detail.column\n The column that is requesting more items. While doing pagination, it will become the target of the loaded items.\n @property {Number} detail.start\n Indicates the current amount of items in the column to do pagination. If item is\n available, start will be 0 to denote that the column should be loaded from the start.\n @property {ColumnViewItem} detail.item\n The item that initialized the load. If item is provided, it means that a new column needs to be added after\n the load is performed. In this scenario, column will be refer to the column that holds the item.\n */\n\n /**\n Triggered when the selection inside the {@link ColumnViewColumn} changes. In case both the selection and the active item change,\n the coral-columnview:activeitemchange will be triggered first.\n\n @typedef {CustomEvent} coral-columnview:change\n\n @property {ColumnViewColumn} detail.column\n The column whose selection changed.\n @property {ColumnViewItem|Array.} detail.selection\n The new selection of the Column.\n @property {ColumnViewItem|Array.} detail.oldSelection\n The old selection of the Column.\n */\n\n /**\n Triggered when the active item of the {@link ColumnViewColumn} changes.\n\n @typedef {CustomEvent} coral-columnview:activeitemchange\n\n @property {ColumnViewColumn} detail.column\n The column whose active item has changed.\n @property {ColumnViewItem} detail.activeItem\n The currently active item of the column.\n @property {ColumnViewItem} detail.oldActiveItem\n The item of the column that was active before.\n */\n\n /**\n Triggered when the {@link ColumnView} navigation is complete and the new columns are ready.\n\n @typedef {CustomEvent} coral-columnview:navigate\n\n @property {ColumnViewColumn} detail.column\n The last Column of the ColumnView that is used to determine the path. If the navigate was triggered because a\n new {@link ColumnViewColumn} was added, then it will match that column. In case the path was\n reduced, the column will match the last column.\n @property {ColumnViewItem} detail.activeItem\n The currently active item of the ColumnView.\n */\n});\n\nexport default ColumnView;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 963, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 964, "kind": "function", "name": "scrollTo", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~scrollTo", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "params": [ { "name": "element", "types": [ "*" ] }, { "name": "to", "types": [ "*" ] }, { "name": "duration", "types": [ "*" ] }, { "name": "scrollCallback", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 965, "kind": "variable", "name": "ColumnView", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~ColumnView", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "A ColumnView component to display and allow users to browse and select items in a dynamic tree structure\n(e.g. a filesystem or multi-level navigation).", "lineNumber": 54, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView" }, { "tagName": "@classdesc", "tagValue": "A ColumnView component to display and allow users to browse and select items in a dynamic tree structure\n(e.g. a filesystem or multi-level navigation)." }, { "tagName": "@htmltag", "tagValue": "coral-columnview" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView();" ], "see": [ "../examples/#columnview" ], "type": { "types": [ "*" ] } }, { "__docId__": 966, "kind": "typedef", "name": "coral-columnview:loaditems", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~coral-columnview:loaditems", "access": "public", "description": "Triggered when additional items can be loaded into the {@link ColumnView}. This will happen when the current column can\nstill hold more items, when the user scrolls down the current column or when a new column needs to be loaded. If\npreventDefault() is called, then a loading indicator will be shown.\n{@link ColumnViewColumn#loading} should be set to false to indicate that the data has been successfully\nloaded.", "properties": [ { "nullable": null, "types": [ "ColumnViewColumn" ], "spread": false, "optional": false, "name": "detail.column", "description": "The column that is requesting more items. While doing pagination, it will become the target of the loaded items." }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "detail.start", "description": "Indicates the current amount of items in the column to do pagination. If item is\navailable, start will be 0 to denote that the column should be loaded from the start." }, { "nullable": null, "types": [ "ColumnViewItem" ], "spread": false, "optional": false, "name": "detail.item", "description": "The item that initialized the load. If item is provided, it means that a new column needs to be added after\nthe load is performed. In this scenario, column will be refer to the column that holds the item." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-columnview:loaditems" } }, { "__docId__": 967, "kind": "typedef", "name": "coral-columnview:change", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~coral-columnview:change", "access": "public", "description": "Triggered when the selection inside the {@link ColumnViewColumn} changes. In case both the selection and the active item change,\nthe coral-columnview:activeitemchange will be triggered first.", "properties": [ { "nullable": null, "types": [ "ColumnViewColumn" ], "spread": false, "optional": false, "name": "detail.column", "description": "The column whose selection changed." }, { "nullable": null, "types": [ "ColumnViewItem", "Array." ], "spread": false, "optional": false, "name": "detail.selection", "description": "The new selection of the Column." }, { "nullable": null, "types": [ "ColumnViewItem", "Array." ], "spread": false, "optional": false, "name": "detail.oldSelection", "description": "The old selection of the Column." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-columnview:change" } }, { "__docId__": 968, "kind": "typedef", "name": "coral-columnview:activeitemchange", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~coral-columnview:activeitemchange", "access": "public", "description": "Triggered when the active item of the {@link ColumnViewColumn} changes.", "properties": [ { "nullable": null, "types": [ "ColumnViewColumn" ], "spread": false, "optional": false, "name": "detail.column", "description": "The column whose active item has changed." }, { "nullable": null, "types": [ "ColumnViewItem" ], "spread": false, "optional": false, "name": "detail.activeItem", "description": "The currently active item of the column." }, { "nullable": null, "types": [ "ColumnViewItem" ], "spread": false, "optional": false, "name": "detail.oldActiveItem", "description": "The item of the column that was active before." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-columnview:activeitemchange" } }, { "__docId__": 969, "kind": "typedef", "name": "coral-columnview:navigate", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnView.js~coral-columnview:navigate", "access": "public", "description": "Triggered when the {@link ColumnView} navigation is complete and the new columns are ready.", "properties": [ { "nullable": null, "types": [ "ColumnViewColumn" ], "spread": false, "optional": false, "name": "detail.column", "description": "The last Column of the ColumnView that is used to determine the path. If the navigate was triggered because a\nnew {@link ColumnViewColumn} was added, then it will match that column. In case the path was\nreduced, the column will match the last column." }, { "nullable": null, "types": [ "ColumnViewItem" ], "spread": false, "optional": false, "name": "detail.activeItem", "description": "The currently active item of the ColumnView." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-columnview:navigate" } }, { "__docId__": 970, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SelectableCollection} from '../../../coral-collection';\n\n/**\n @class Coral.ColumnView.Collection\n @classdesc The ColumnView collection\n @extends {SelectableCollection}\n */\nclass ColumnViewCollection extends SelectableCollection {\n _deselectAndDeactivateAllExcept(item) {\n this\n .getAll()\n .forEach((el) => {\n if (el.hasAttribute('selected') || el.hasAttribute('active')) {\n el.removeAttribute('selected');\n if (el !== item) {\n el.removeAttribute('active');\n }\n }\n });\n }\n\n _deactivateAll() {\n this._deselectAllExcept(null, 'active');\n }\n\n _deactivateAllExceptFirst() {\n this._deselectAllExceptFirst('active');\n }\n\n _getAllActive() {\n return this._getAllSelected('active');\n }\n\n _selectAll() {\n this\n .getAll()\n .forEach((el) => {\n if (!el.hasAttribute('selected')) {\n el.setAttribute('selected', '');\n }\n });\n }\n}\n\nexport default ColumnViewCollection;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 971, "kind": "class", "name": "ColumnViewCollection", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "The ColumnView collection", "lineNumber": 20, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Collection" }, { "tagName": "@classdesc", "tagValue": "The ColumnView collection" } ], "interface": false, "extends": [ "SelectableCollection" ], "examples": [ "JS constructor\nnew Coral.ColumnView.Collection();" ], "see": [ "../examples/#columnview" ] }, { "__docId__": 972, "kind": "method", "name": "_deselectAndDeactivateAllExcept", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection#_deselectAndDeactivateAllExcept", "access": "private", "description": null, "lineNumber": 21, "undocument": true, "ignore": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 973, "kind": "method", "name": "_deactivateAll", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection#_deactivateAll", "access": "private", "description": null, "lineNumber": 34, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 974, "kind": "method", "name": "_deactivateAllExceptFirst", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection#_deactivateAllExceptFirst", "access": "private", "description": null, "lineNumber": 38, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 975, "kind": "method", "name": "_getAllActive", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection#_getAllActive", "access": "private", "description": null, "lineNumber": 42, "undocument": true, "ignore": true, "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 976, "kind": "method", "name": "_selectAll", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewCollection.js~ColumnViewCollection#_selectAll", "access": "private", "description": null, "lineNumber": 46, "undocument": true, "ignore": true, "params": [], "return": null }, { "__docId__": 977, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport ColumnViewCollection from './ColumnViewCollection';\nimport isInteractiveTarget from './isInteractiveTarget';\nimport selectionMode from './selectionMode';\nimport {commons, transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-MillerColumns-item';\n\n// The number of milliseconds for which scroll events should be debounced.\nconst SCROLL_DEBOUNCE = 100;\n\n// Height if every item to avoid using offsetHeight during calculations.\nconst ITEM_HEIGHT = 40;\n\n// Flag to check if window load was called\nlet WINDOW_LOAD = false;\nwindow.addEventListener('load', () => {\n WINDOW_LOAD = true;\n});\n\n/**\n @class Coral.ColumnView.Column\n @classdesc A ColumnView Column component\n @htmltag coral-columnview-column\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ColumnViewColumn = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents({\n // we need to use capture as scroll events do not bubble\n 'capture:scroll coral-columnview-column-content': '_onContentScroll',\n 'click coral-columnview-column-content': '_onColumnContentClick',\n\n // item interaction\n 'click coral-columnview-item': '_onItemClick',\n 'click [coral-columnview-itemselect]': '_onItemSelectClick',\n\n // item events\n 'coral-columnview-item:_activechanged coral-columnview-item': '_onItemActiveChange',\n 'coral-columnview-item:_selectedchanged coral-columnview-item': '_onItemSelectedChange'\n });\n\n // Content zone\n this._elements = {\n content: this.querySelector('coral-columnview-column-content') || document.createElement('coral-columnview-column-content')\n };\n\n // default values\n this._bulkSelectionChange = false;\n this._oldSelection = [];\n this._oldActiveItem = null;\n\n // cache bound event handler functions\n this._onDebouncedScroll = this._onDebouncedScroll.bind(this);\n this._toggleItemSelection = this._toggleItemSelection.bind(this);\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n The current active item.\n\n @type {HTMLElement}\n @readonly\n @default null\n */\n get activeItem() {\n return this.items._getAllActive()[0] || null;\n }\n\n /**\n The content of the column. This container is where the items should be added and is responsible for handling the\n scrolling.\n\n @type {ColumnViewColumnContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-columnview-column-content',\n insert: function (content) {\n content.classList.add('_coral-AssetList');\n this.appendChild(content);\n }\n });\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {ColumnViewCollection}\n @readonly\n */\n get items() {\n // we do lazy initialization of the collection\n if (!this._items) {\n this._items = new ColumnViewCollection({\n host: this,\n container: this._elements.content,\n itemTagName: 'coral-columnview-item',\n onItemAdded: this._toggleItemSelection,\n onCollectionChange: this._handleMutation\n });\n }\n\n return this._items;\n }\n\n /**\n Returns the first selected item in the ColumnView. The value null is returned if no element is\n selected.\n\n @type {?HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this._selectionMode !== selectionMode.NONE ? this.items._getFirstSelected() : null;\n }\n\n /**\n Returns an Array containing the set selected items inside this Column.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this._selectionMode !== selectionMode.NONE ? this.items._getAllSelected() : [];\n }\n\n /**\n Private property that indicates the selection mode. If the Coral.ColumnView.Column is not inside\n a Coral.ColumnView this value will be undefined.\n See {@link ColumnViewSelectionModeEnum}.\n\n @type {String}\n @htmlattribute _selectionmode\n @htmlattributereflected\n @private\n */\n get _selectionMode() {\n return this.__selectionMode;\n }\n\n set _selectionMode(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(selectionMode)(value) && value || null;\n\n this._reflectAttribute('_selectionmode', value);\n \n if(validate.valueMustChange(this.__selectionMode, value)) {\n this.__selectionMode = value;\n let items = this.items.getAll();\n items.forEach(item => this._toggleItemSelection(item));\n this._setStateFromDOM();\n }\n }\n\n /**\n Returns an Array containing the last selected items inside this Column in selected order.\n\n @type {Array.}\n @private\n */\n get _lastSelectedItems() {\n return this.__lastSelectedItems || this.selectedItems;\n }\n\n set _lastSelectedItems(value) {\n this.__lastSelectedItems = value;\n }\n\n /** @private */\n _onItemClick(event) {\n if (isInteractiveTarget(event.target)) {\n return;\n }\n\n // since transform will kill the modification, we trigger the event manually\n if (event.matchedTarget.hasAttribute('active')) {\n // directly calls the event since setting the attribute will not trigger an event\n this._onItemActiveChange(event);\n } else {\n // sets the item as active. while handling mouse interaction, items are not toggled\n event.matchedTarget.active = true;\n }\n }\n\n _toggleItemSelection(item) {\n item[this._selectionMode !== selectionMode.NONE ? 'setAttribute' : 'removeAttribute']('_selectable', '');\n }\n\n /** @private */\n _onItemSelectClick(event) {\n if (this._selectionMode && this._selectionMode !== selectionMode.NONE) {\n // stops propagation so that active is not called as well\n event.stopPropagation();\n\n const item = event.matchedTarget.parentElement;\n\n // toggles the selection of the item\n const isSelected = item.hasAttribute('selected');\n\n // Handle multi-selection with shiftKey\n if (!isSelected && event.shiftKey && this._selectionMode === selectionMode.MULTIPLE) {\n const lastSelectedItem = this._lastSelectedItems[this._lastSelectedItems.length - 1];\n\n if (lastSelectedItem) {\n const items = this.items.getAll();\n const lastSelectedItemIndex = items.indexOf(lastSelectedItem);\n const selectedItemIndex = items.indexOf(item);\n\n // true : selection goes up, false : selection goes down\n const direction = selectedItemIndex < lastSelectedItemIndex;\n const selectionRange = [];\n let selectionIndex = lastSelectedItemIndex;\n\n // Retrieve all items in the range\n while (selectedItemIndex !== selectionIndex) {\n selectionIndex = direction ? selectionIndex - 1 : selectionIndex + 1;\n selectionRange.push(items[selectionIndex]);\n }\n\n // Select all items in the range silently\n selectionRange.forEach((rangeItem) => {\n // Except for item which is needed to trigger the selection change event\n if (rangeItem !== item) {\n rangeItem.set('selected', true, true);\n }\n });\n }\n }\n\n item[isSelected ? 'removeAttribute' : 'setAttribute']('selected', '');\n\n // if item was selected, make it active\n if (isSelected && !this._lastSelectedItems.length) {\n item.setAttribute('active', '');\n }\n }\n }\n\n /**\n Handles the item activation, this causes the current item to get active and sets the next column to the item's\n src.\n\n @private\n */\n _onItemActiveChange(event) {\n // we stop propagation since it is a private event\n event.stopImmediatePropagation();\n\n // ignores event handling due to bulk select operation\n if (this._bulkSelectionChange) {\n return;\n }\n\n const item = event.matchedTarget;\n\n this._bulkSelectionChange = true;\n // clears the selection and keeps the item active. this force only 1 item to be active per column\n this.items._deselectAndDeactivateAllExcept(item);\n this._bulkSelectionChange = false;\n\n // we check if the selection requires an event to be triggered\n this._validateColumnChange(item);\n\n // loads data using the item as the activator and 0 as the start since it is a new column\n this._loadItems(0, item);\n }\n\n /**\n Handles selecting multiple items in the same column. Selection could result in none, a single or multiple selected\n items.\n\n @private\n */\n _onItemSelectedChange(event) {\n // we stop propagation since it is a private event\n event.stopImmediatePropagation();\n\n // item that was selected\n const item = event.target;\n const isSelected = item.selected;\n\n if (isSelected) {\n // Remember the last selected item\n this._lastSelectedItems.push(item);\n } else {\n const removedItemIndex = this._lastSelectedItems.indexOf(item);\n if (removedItemIndex !== -1) {\n this._lastSelectedItems = this._lastSelectedItems.splice(removedItemIndex, 1);\n }\n }\n\n // ignores event handling due to bulk select operation\n if (this._bulkSelectionChange) {\n return;\n }\n\n // when the item is selected, we need to enforce the selection mode\n if (isSelected) {\n this._bulkSelectionChange = true;\n // when there is selection, no item can be active\n this.items._deactivateAll();\n\n // enforces the selection mode\n if (this._selectionMode === selectionMode.SINGLE) {\n this.items._deselectAllExcept(item);\n }\n this._bulkSelectionChange = false;\n }\n\n // we make sure the change event is triggered before the load event.\n this._validateColumnChange();\n }\n\n /** @ignore */\n _tryToLoadAdditionalItems() {\n // makes sure that not too many events are triggered (only one per frame)\n if (this._bulkCollectionChange) {\n return;\n }\n\n this._bulkCollectionChange = true;\n\n // we use setTimeout instead of nextFrame because macrotasks allow for more flexibility since they are less\n // aggressive in executing the code\n window.setTimeout(() => {\n // trigger 'coral-columnview:loaditems' asynchronously in order to be sure the application is done\n // adding/removing elements. Also make sure that only one event is triggered at once\n\n // bulkCollectionChange has to be reset before loading new items\n this._bulkCollectionChange = false;\n this._loadFittingAdditionalItems();\n }, 0);\n }\n\n /** @private */\n _onContentScroll() {\n window.clearTimeout(this._scrollTimeout);\n this._scrollTimeout = window.setTimeout(this._onDebouncedScroll, SCROLL_DEBOUNCE);\n }\n\n /**\n Handles the column click. When the column body is clicked, we need to deselect everything up to that column.\n\n @private\n */\n _onColumnContentClick(event) {\n // we make sure the content was clicked directly and not an item\n if (event.target !== event.matchedTarget || isInteractiveTarget(event.target)) {\n return;\n }\n\n event.preventDefault();\n\n // ignores event handling due to bulk select operation\n if (this._bulkSelectionChange) {\n return false;\n }\n\n this._bulkSelectionChange = true;\n // clears the current column\n this.items._deselectAndDeactivateAllExcept();\n this._bulkSelectionChange = false;\n\n // we check if the selection requires an event to be triggered\n this._validateColumnChange();\n }\n\n /** @private */\n _onDebouncedScroll() {\n const threshold = 20;\n if (this.content.scrollTop + this.offsetHeight >= this.content.scrollHeight - threshold) {\n this._loadItems(this.items.length, undefined);\n }\n }\n\n /** @private */\n _arraysAreDifferent(selection, oldSelection) {\n let diff = [];\n\n if (oldSelection.length === selection.length) {\n diff = oldSelection.filter((item) => selection.indexOf(item) === -1);\n }\n\n // since we guarantee that they are arrays, we can start by comparing their size\n return oldSelection.length !== selection.length || diff.length !== 0;\n }\n\n /** @private */\n _validateColumnChange(item) {\n const newActiveItem = this.activeItem;\n const oldActiveItem = this._oldActiveItem || null;\n\n // we have to force the event in case the same active item was clicked again, but still try to avoid triggering as\n // less events as possible\n if (newActiveItem !== oldActiveItem || item === newActiveItem) {\n this.trigger('coral-columnview-column:_activeitemchanged', {\n activeItem: newActiveItem,\n oldActiveItem: oldActiveItem\n });\n\n // we cache the active item for the next time\n this._oldActiveItem = newActiveItem;\n }\n\n const newSelection = this.selectedItems;\n const oldSelection = this._oldSelection;\n\n if (this._arraysAreDifferent(newSelection, oldSelection)) {\n this.trigger('coral-columnview-column:_selecteditemchanged', {\n selection: newSelection,\n oldSelection: oldSelection\n });\n\n // changes the old selection array since we selected something new\n this._oldSelection = newSelection;\n }\n }\n\n /**\n Loads additional Items if the current items of the column to not exceed its height and a path this.next is given.\n\n @private\n */\n _loadFittingAdditionalItems() {\n const itemsCount = this.items.length;\n // this value must match $columnview-item-height\n const itemsHeight = itemsCount * ITEM_HEIGHT;\n\n // we request more items if there is still space for them. in case the values are the same, we request more data\n // just to be sure, specially when the value is 0\n if (itemsHeight <= this.offsetHeight) {\n this._loadItems(itemsCount, undefined);\n }\n }\n\n /**\n Loads additional items. If the given item is not active, no data will be requested.\n\n @param {Number} count\n Amount of items in the column.\n @param {?HTMLElement} item\n Item that triggered the load.\n\n @private\n */\n _loadItems(count, item) {\n // if the given item is not active, it should not request data\n if (!item || item.hasAttribute('active')) {\n this.trigger('coral-columnview-column:_loaditems', {\n start: count,\n item: item\n });\n }\n }\n\n /**\n Updates the active and selected options from the DOM.\n\n @ignore\n */\n _setStateFromDOM() {\n // if the selection mode has not been set, we do no try to force selection\n if (this._selectionMode) {\n // single: only the last item is selected\n if (this._selectionMode === selectionMode.SINGLE) {\n this.items._deselectAllExceptLast();\n }\n // none: deselects everything\n else if (this._selectionMode === selectionMode.NONE) {\n this.items._deselectAllExcept();\n }\n\n // makes sure only one item is active\n this.items._deactivateAllExceptFirst();\n }\n }\n\n /** @private */\n _handleMutation() {\n this._setStateFromDOM();\n\n // in case items were added removed and selection changed\n this._validateColumnChange();\n\n // checks if more items can be added after the childlist change\n this._tryToLoadAdditionalItems();\n }\n\n get _contentZones() {\n return {'coral-columnview-column-content': 'content'};\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n _selectionmode: '_selectionMode'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n '_selectionmode'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n // @a11y\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'group');\n }\n\n this.id = this.id || commons.getUID();\n\n // @todo: initial collection items needs to be triggered\n\n const content = this._elements.content;\n\n // when the content zone was not created, we need to make sure that everything is added inside it as a content.\n // this stops the content zone from being voracious\n if (!content.parentNode) {\n // move the contents of the item into the content zone\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n }\n\n // @a11y\n content.setAttribute('role', 'presentation');\n\n // Call content zone insert\n this.content = content;\n\n // handles the initial selection\n this._setStateFromDOM();\n\n // we keep a list of the last selection to determine if something changed. we need to do this after\n // validateSelection since it modifies the initial state based on the option\n this._oldSelection = this.selectedItems;\n this._oldActiveItem = this.activeItem;\n\n if (!WINDOW_LOAD) {\n // instead of being super aggressive on requesting data, we use window onload so it is scheduled after\n // all the code has been executed, this way events can be added before\n window.addEventListener('load', () => {\n this._loadFittingAdditionalItems();\n });\n } else {\n // macro-task is necessary for the same reasons as listed above\n window.setTimeout(() => {\n this._loadFittingAdditionalItems();\n });\n }\n }\n});\n\nexport default ColumnViewColumn;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 978, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 979, "kind": "variable", "name": "SCROLL_DEBOUNCE", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js~SCROLL_DEBOUNCE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 980, "kind": "variable", "name": "ITEM_HEIGHT", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js~ITEM_HEIGHT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 26, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 981, "kind": "variable", "name": "WINDOW_LOAD", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js~WINDOW_LOAD", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 29, "undocument": true, "type": { "types": [ "boolean" ] }, "ignore": true }, { "__docId__": 982, "kind": "variable", "name": "ColumnViewColumn", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumn.js~ColumnViewColumn", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "A ColumnView Column component", "lineNumber": 41, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Column" }, { "tagName": "@classdesc", "tagValue": "A ColumnView Column component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-column" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Column();" ], "see": [ "../examples/#columnview" ], "type": { "types": [ "*" ] } }, { "__docId__": 983, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumnContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Column.Content\n @classdesc ColumnView's Column content component\n @htmltag coral-columnview-column-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-column-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumnContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 984, "kind": "function", "name": "ColumnViewColumnContent", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumnContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewColumnContent.js~ColumnViewColumnContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's Column content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Column.Content" }, { "tagName": "@classdesc", "tagValue": "ColumnView's Column content component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-column-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Column.Content();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 985, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport accessibilityState from '../templates/accessibilityState';\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseLabellable} from '../../../coral-base-labellable';\nimport {Icon} from '../../../coral-component-icon';\nimport {Checkbox} from '../../../coral-component-checkbox';\nimport {commons, i18n, transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-AssetList-item';\n\n/**\n Enumeration for {@link ColumnViewItem} variants.\n\n @typedef {Object} ColumnViewItemVariantEnum\n\n @property {String} DEFAULT\n Default item variant. Contains no special decorations.\n @property {String} DRILLDOWN\n An item with a right arrow indicating that the navigation will go one level down.\n */\nconst variant = {\n DEFAULT: 'default',\n DRILLDOWN: 'drilldown'\n};\n\n/**\n Utility that identifies Chrome on macOS, which announces drilldown items as \"row 1 expanded\" or \"row 1 collapsed\" when navigating between items.\n */\nconst isChromeMacOS = !!window && !!window.chrome && /Mac/i.test(window.navigator.platform);\n\n/**\n @class Coral.ColumnView.Item\n @classdesc A ColumnView Item component\n @htmltag coral-columnview-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ColumnViewItem = Decorator(class extends BaseLabellable(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Content zone\n this._elements = {\n content: this.querySelector('coral-columnview-item-content') || document.createElement('coral-columnview-item-content'),\n thumbnail: this.querySelector('coral-columnview-item-thumbnail') || document.createElement('coral-columnview-item-thumbnail'),\n accessibilityState: this.querySelector('span[handle=\"accessibilityState\"]')\n };\n\n if (!this._elements.accessibilityState) {\n // Templates\n accessibilityState.call(this._elements, {commons});\n }\n }\n\n /**\n The content of the item.\n\n @type {ColumnViewItemContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-columnview-item-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}Label`);\n // Insert before chevron\n this.insertBefore(content, this.querySelector('._coral-AssetList-itemChildIndicator'));\n }\n });\n }\n\n /**\n The thumbnail of the item. It is used to hold an icon or an image.\n\n @type {ColumnViewItemThumbnail}\n @contentzone\n */\n get thumbnail() {\n return this._getContentZone(this._elements.thumbnail);\n }\n\n set thumbnail(value) {\n this._setContentZone('thumbnail', value, {\n handle: 'thumbnail',\n tagName: 'coral-columnview-item-thumbnail',\n insert: function (thumbnail) {\n thumbnail.classList.add(`${CLASSNAME}Thumbnail`);\n // Insert before content\n this.insertBefore(thumbnail, this.content || null);\n }\n });\n }\n\n /**\n The item's variant. See {@link ColumnViewItemVariantEnum}.\n\n @type {String}\n @default ColumnViewItemVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n\n this._reflectAttribute('variant', value);\n\n if(validate.valueMustChange(this._variant, value)) {\n this._variant = value;\n\n if (value === variant.DRILLDOWN) {\n // Render chevron on demand\n const childIndicator = this.querySelector('._coral-AssetList-itemChildIndicator');\n if (!childIndicator) {\n this.insertAdjacentHTML('beforeend', Icon._renderSVG('spectrum-css-icon-ChevronRightMedium', ['_coral-AssetList-itemChildIndicator', '_coral-UIIcon-ChevronRightMedium']));\n }\n \n this.classList.add('is-branch');\n \n // @a11y Update aria-expanded. Active drilldowns should be expanded.\n // Note: Omit aria-expanded on Chrome for macOS, because with VoiceOver tends\n // to announce drilldown items as \"row 1 expanded\" or \"row 1 collapsed\" when\n // navigating between items.\n if (this.selected || (isChromeMacOS && this.getAttribute('aria-level') === '1')) {\n this.removeAttribute('aria-expanded');\n } else {\n this.setAttribute('aria-expanded', this.active);\n }\n } else {\n this.classList.remove('is-branch');\n this.removeAttribute('aria-expanded');\n }\n }\n }\n\n /**\n Specifies the icon that will be placed inside the thumbnail. The size of the icon is always controlled by the\n component.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n @htmlattributereflected\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n value = transform.string(value);\n \n this._reflectAttribute('icon', value);\n\n if(validate.valueMustChange(this._icon, value)) {\n this._icon = value;\n\n // ignored if it is an empty string\n if (value) {\n // creates a new icon element\n if (!this._elements.icon) {\n this._elements.icon = new Icon();\n // register observer only if there present an icon field.\n super._observeLabel();\n }\n \n this._elements.icon.icon = this.icon;\n this._elements.icon.size = Icon.size.SMALL;\n \n // removes all the items, since the icon attribute has precedence\n this._elements.thumbnail.innerHTML = '';\n \n // adds the newly created icon\n this._elements.thumbnail.appendChild(this._elements.icon);\n }\n \n super._toggleIconAriaHidden();\n }\n }\n\n /**\n Whether the item is selected.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n value = transform.booleanAttr(value);\n this._reflectAttribute('selected', value);\n\n if(validate.valueMustChange(this._selected, value)) {\n this._selected = value;\n this.trigger('coral-columnview-item:_selectedchanged');\n \n // wait a frame before updating attributes\n commons.nextFrame(() => {\n this.classList.toggle('is-selected', value);\n this.setAttribute('aria-selected', value);\n \n // @a11y Update aria-expanded. Active drilldowns should be expanded.\n // Note: Omit aria-expanded on Chrome for macOS, because with VoiceOver tends\n // to announce drilldown items as \"row 1 expanded\" or \"row 1 collapsed\" when\n // navigating between items.\n if (value === variant.DRILLDOWN) {\n if (this._selected || (isChromeMacOS && this.getAttribute('aria-level') === '1')) {\n this.removeAttribute('aria-expanded');\n } else {\n this.setAttribute('aria-expanded', this.active);\n }\n }\n \n let accessibilityState = this._elements.accessibilityState;\n \n if (value) {\n \n // @a11y Panels to right of selected item are removed, so remove aria-owns and aria-describedby attributes.\n this.removeAttribute('aria-owns');\n this.removeAttribute('aria-describedby');\n \n // @a11y Update content to ensure that checked state is announced by assistive technology when the item receives focus\n accessibilityState.innerHTML = i18n.get(', checked');\n \n // @a11y append live region content element\n if (!this.contains(accessibilityState)) {\n this.appendChild(accessibilityState);\n }\n }\n // @a11y If deselecting from checked state,\n else {\n \n // @a11y remove, but retain reference to accessibilityState state\n if (accessibilityState.parentNode) {\n this._elements.accessibilityState = accessibilityState.parentNode.removeChild(accessibilityState);\n }\n \n // @a11y Update content to remove checked state\n this._elements.accessibilityState.innerHTML = '';\n }\n \n // @a11y Item should be labelled by thumbnail, content, and if appropriate accessibility state.\n let ariaLabelledby = this._elements.thumbnail.id + ' ' + this._elements.content.id;\n this.setAttribute('aria-labelledby', this.selected ? `${ariaLabelledby} ${accessibilityState.id}` : ariaLabelledby);\n \n // Sync checkbox item selector\n const itemSelector = this.querySelector('coral-checkbox[coral-columnview-itemselect]');\n if (itemSelector) {\n itemSelector[value ? 'setAttribute' : 'removeAttribute']('checked', '');\n }\n });\n }\n }\n\n /**\n Whether the item is active.\n\n @type {Boolean}\n @default false\n @htmlattribut active\n @htmlattributereflected\n */\n get active() {\n return this._active || false;\n }\n\n set active(value) {\n value = transform.booleanAttr(value);\n this._reflectAttribute('active', value);\n\n if(validate.valueMustChange(this._active, value)) {\n this._active = value;\n\n this.classList.toggle('is-navigated', value);\n this.setAttribute('aria-selected', this.hasAttribute('_selectable') ? this.selected : value);\n \n // @a11y Update aria-expanded. Active drilldowns should be expanded.\n // Note: Omit aria-expanded on Chrome for macOS, because with VoiceOver tends\n // to announce drilldown items as \"row 1 expanded\" or \"row 1 collapsed\" when\n // navigating between items.\n if (this.variant === variant.DRILLDOWN) {\n if (this.selected || (isChromeMacOS && this.getAttribute('aria-level') === '1')) {\n this.removeAttribute('aria-expanded');\n } else {\n this.setAttribute('aria-expanded', this.active);\n }\n }\n \n if (!value) {\n // @a11y Inactive items are not expanded, so remove aria-owns and aria-describedby attributes.\n this.removeAttribute('aria-owns');\n this.removeAttribute('aria-describedby');\n }\n \n this.trigger('coral-columnview-item:_activechanged');\n }\n }\n\n get _contentZones() {\n return {\n 'coral-columnview-item-content': 'content',\n 'coral-columnview-item-thumbnail': 'thumbnail'\n };\n }\n\n /** @ignore */\n attributeChangedCallback(name, oldValue, value) {\n if (name === '_selectable') {\n // Disable selection\n if (value === null) {\n this.classList.remove('is-selectable');\n }\n // Enable selection\n else {\n this.classList.add('is-selectable');\n let itemSelector = this.querySelector('[coral-columnview-itemselect]');\n\n // Render checkbox on demand\n if (!itemSelector) {\n itemSelector = new Checkbox();\n itemSelector.setAttribute('coral-columnview-itemselect', '');\n if (this.classList.contains('is-selected')) {\n itemSelector.setAttribute('checked', '');\n }\n itemSelector._elements.input.tabIndex = -1;\n itemSelector.setAttribute('labelledby', this._elements.content.id);\n\n // Add the item selector as first child\n this.insertBefore(itemSelector, this.firstChild);\n }\n }\n } else {\n super.attributeChangedCallback(name, oldValue, value);\n }\n }\n\n /**\n Returns {@link ColumnViewItem} variants.\n\n @return {ColumnViewItemVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'variant',\n 'icon',\n 'selected',\n 'active',\n '_selectable'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // @a11y\n this.setAttribute('role', 'treeitem');\n\n this.id = this.id || commons.getUID();\n\n // only set tabIndex if it is not already set\n if (!this.hasAttribute('tabindex')) {\n this.tabIndex = this.active || this.selected ? 0 : -1;\n }\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n\n const thumbnail = this._elements.thumbnail;\n const content = this._elements.content;\n\n const contentZoneProvided = content.parentNode || thumbnail.parentNode;\n\n if (!contentZoneProvided) {\n // move the contents of the item into the content zone\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n }\n\n // Assign content zones\n this.content = content;\n this.thumbnail = thumbnail;\n\n // @a11y thumbnail img element should have alt attribute\n const thumbnailImg = thumbnail.querySelector('img:not([alt])');\n if (thumbnailImg) {\n thumbnailImg.setAttribute('alt', '');\n }\n\n // @ally add aria-labelledby so that JAWS/IE announces item correctly\n thumbnail.id = thumbnail.id || commons.getUID();\n\n content.id = content.id || commons.getUID();\n\n // @a11y Add live region element to ensure announcement of selected state\n const accessibilityState = this._elements.accessibilityState;\n\n // @a11y accessibility state string should announce in document lang, rather than item lang.\n accessibilityState.setAttribute('lang', i18n.locale);\n\n // @a11y Item should be labelled by thumbnail, content, and accessibility state.\n this.setAttribute('aria-labelledby', thumbnail.id + ' ' + content.id);\n\n //adding html title, on hovering over textcontent title will be visible\n this.setAttribute('title', this.content.textContent.trim());\n }\n});\n\nexport default ColumnViewItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 986, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 987, "kind": "typedef", "name": "ColumnViewItemVariantEnum", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js~ColumnViewItemVariantEnum", "access": "public", "description": "Enumeration for {@link ColumnViewItem} variants.", "lineNumber": 33, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "Default item variant. Contains no special decorations." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DRILLDOWN", "description": "An item with a right arrow indicating that the navigation will go one level down." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColumnViewItemVariantEnum" } }, { "__docId__": 988, "kind": "variable", "name": "isChromeMacOS", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js~isChromeMacOS", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Utility that identifies Chrome on macOS, which announces drilldown items as \"row 1 expanded\" or \"row 1 collapsed\" when navigating between items.", "lineNumber": 41, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 989, "kind": "variable", "name": "ColumnViewItem", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItem.js~ColumnViewItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "A ColumnView Item component", "lineNumber": 50, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Item" }, { "tagName": "@classdesc", "tagValue": "A ColumnView Item component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Item();" ], "see": [ "../examples/#columnview" ], "type": { "types": [ "*" ] } }, { "__docId__": 990, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Item.Content\n @classdesc ColumnView's Item content component\n @htmltag coral-columnview-item-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-item-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 991, "kind": "function", "name": "ColumnViewItemContent", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemContent.js~ColumnViewItemContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's Item content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Item.Content" }, { "tagName": "@classdesc", "tagValue": "ColumnView's Item content component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-item-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Item.Content();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 992, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemThumbnail.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Item.Thumbnail\n @classdesc ColumnView's Item thumbnail component\n @htmltag coral-columnview-item-thumbnail\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-item-thumbnail');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemThumbnail.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 993, "kind": "function", "name": "ColumnViewItemThumbnail", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemThumbnail.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewItemThumbnail.js~ColumnViewItemThumbnail", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's Item thumbnail component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Item.Thumbnail" }, { "tagName": "@classdesc", "tagValue": "ColumnView's Item thumbnail component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-item-thumbnail" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Item.Thumbnail();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 994, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {commons} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-MillerColumns-item';\n\n/**\n @class Coral.ColumnView.Preview\n @classdesc A ColumnView Preview component\n @htmltag coral-columnview-preview\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ColumnViewPreview = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Content zone\n this._elements = {\n content: this.querySelector('coral-columnview-preview-content') || document.createElement('coral-columnview-preview-content')\n };\n }\n\n /**\n The content of the Preview.\n\n @type {ColumnViewPreviewContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-columnview-preview-content',\n insert: function (content) {\n content.classList.add('coral-Body--small');\n this.appendChild(content);\n }\n });\n }\n\n get _contentZones() {\n return {'coral-columnview-preview-content': 'content'};\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.setAttribute('role', 'group');\n\n this.id = this.id || commons.getUID();\n\n this.classList.add(CLASSNAME);\n\n const content = this._elements.content;\n\n // when the content zone was not created, we need to make sure that everything is added inside it as a content.\n // this stops the content zone from being voracious\n if (!content.parentNode) {\n // move the contents of the item into the content zone\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n }\n\n // Call content zone insert\n this.content = content;\n\n this._makeAccessible();\n }\n\n /** @ignore */\n _makeAccessible() {\n\n // @a11y For item values with a label, identify the value as a focusable, readOnly textbox labeled by the label.\n let elements = this.content.querySelectorAll('coral-columnview-preview-label + coral-columnview-preview-value');\n let length = elements.length;\n let i;\n let element;\n let elementLabel;\n\n // @a11y If the previous column has selected items,\n // do not include item values in the tab order,\n // so that a keyboard user can quickly advance to a subsequent toolbar.\n\n for (i = 0 ; i < length ; i++) {\n element = elements[i];\n elementLabel = element.previousElementSibling;\n elementLabel.id = elementLabel.id || commons.getUID();\n\n // force ChromeVox to read value of textbox\n if (window.cvox) {\n element.setAttribute('aria-valuetext', element.textContent);\n }\n }\n\n // @a11y Expose separator as a horizontally-oriented separator.\n elements = this.content.querySelectorAll('coral-columnview-preview-separator');\n length = elements.length;\n for (i = 0 ; i < length ; i++) {\n element = elements[i];\n element.setAttribute('role', 'separator');\n element.setAttribute('aria-orientation', 'horizontal');\n }\n\n // @a11y If the preview asset image does not include an alt attribute, set alt=\"\", so that screen readers do not announce the image url.\n elements = this.content.querySelectorAll('coral-columnview-preview-asset > img:not([alt])');\n length = elements.length;\n for (i = 0 ; i < length ; i++) {\n element = elements[i];\n element.setAttribute('alt', '');\n }\n }\n});\n\nexport default ColumnViewPreview;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 995, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 996, "kind": "variable", "name": "ColumnViewPreview", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreview.js~ColumnViewPreview", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "A ColumnView Preview component", "lineNumber": 26, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview" }, { "tagName": "@classdesc", "tagValue": "A ColumnView Preview component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview();" ], "see": [ "../examples/#columnview" ], "type": { "types": [ "*" ] } }, { "__docId__": 997, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewAsset.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Preview.Asset\n @classdesc ColumnView's preview asset component\n @htmltag coral-columnview-preview-asset\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-preview-asset');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewAsset.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 998, "kind": "function", "name": "ColumnViewPreviewAsset", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewAsset.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewAsset.js~ColumnViewPreviewAsset", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's preview asset component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview.Asset" }, { "tagName": "@classdesc", "tagValue": "ColumnView's preview asset component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview-asset" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview.Asset();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 999, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Preview.Content\n @classdesc ColumnView's preview content component\n @htmltag coral-columnview-preview-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-preview-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1000, "kind": "function", "name": "ColumnViewPreviewContent", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewContent.js~ColumnViewPreviewContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's preview content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview.Content" }, { "tagName": "@classdesc", "tagValue": "ColumnView's preview content component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview.Content();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 1001, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewLabel.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Preview.Label\n @classdesc ColumnView's preview label component\n @htmltag coral-columnview-preview-label\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-preview-label');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewLabel.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1002, "kind": "function", "name": "ColumnViewPreviewLabel", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewLabel.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewLabel.js~ColumnViewPreviewLabel", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's preview label component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview.Label" }, { "tagName": "@classdesc", "tagValue": "ColumnView's preview label component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview-label" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview.Label();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 1003, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewSeparator.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Preview.Separator\n @classdesc ColumnView's preview separator component\n @htmltag coral-columnview-preview-separator\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-preview-separator');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewSeparator.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1004, "kind": "function", "name": "ColumnViewPreviewSeparator", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewSeparator.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewSeparator.js~ColumnViewPreviewSeparator", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's preview separator component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview.Separator" }, { "tagName": "@classdesc", "tagValue": "ColumnView's preview separator component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview-separator" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview.Separator();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 1005, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewValue.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.ColumnView.Preview.Value\n @classdesc ColumnView's preview value component\n @htmltag coral-columnview-preview-value\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-columnview-preview-value');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewValue.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1006, "kind": "function", "name": "ColumnViewPreviewValue", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewValue.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/ColumnViewPreviewValue.js~ColumnViewPreviewValue", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ColumnView}", "description": "ColumnView's preview value component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ColumnView.Preview.Value" }, { "tagName": "@classdesc", "tagValue": "ColumnView's preview value component" }, { "tagName": "@htmltag", "tagValue": "coral-columnview-preview-value" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.ColumnView.Preview.Value();" ], "see": [ "../examples/#columnview" ], "params": [] }, { "__docId__": 1007, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/isInteractiveTarget.js", "content": "/**\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n\n/**\n * Helper function to test whether event.target is explicitly marked as interactive.\n *\n * Interactive elements included in an Item should respond to keyboard events without the event being handled by the Item as well.\n *\n * @private\n */\nconst isInteractiveTarget = (target) => {\n return target.hasAttribute('coral-interactive') || target.closest('[coral-interactive]') !== null;\n};\n\nexport default isInteractiveTarget;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/isInteractiveTarget.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1008, "kind": "function", "name": "isInteractiveTarget", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/isInteractiveTarget.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/isInteractiveTarget.js~isInteractiveTarget", "access": "private", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{isInteractiveTarget}", "description": "Helper function to test whether event.target is explicitly marked as interactive.\n\nInteractive elements included in an Item should respond to keyboard events without the event being handled by the Item as well.", "lineNumber": 21, "ignore": true, "params": [ { "name": "target", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1009, "kind": "file", "name": "coral-spectrum/coral-component-columnview/src/scripts/selectionMode.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n Enumeration for {@link ColumnView} selection options.\n\n @typedef {Object} ColumnViewSelectionModeEnum\n\n @property {String} NONE\n None is default, selection of items does not happen based on click.\n @property {String} SINGLE\n Single selection mode, only one item per column can be selected.\n @property {String} MULTIPLE\n Multiple selection mode, multiple items per column can be selected.\n */\nconst selectionMode = {\n NONE: 'none',\n SINGLE: 'single',\n MULTIPLE: 'multiple'\n};\n\nexport default selectionMode;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-columnview/src/scripts/selectionMode.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1010, "kind": "typedef", "name": "ColumnViewSelectionModeEnum", "memberof": "coral-spectrum/coral-component-columnview/src/scripts/selectionMode.js", "static": true, "longname": "coral-spectrum/coral-component-columnview/src/scripts/selectionMode.js~ColumnViewSelectionModeEnum", "access": "public", "description": "Enumeration for {@link ColumnView} selection options.", "lineNumber": 25, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "NONE", "description": "None is default, selection of items does not happen based on click." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SINGLE", "description": "Single selection mode, only one item per column can be selected." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MULTIPLE", "description": "Multiple selection mode, multiple items per column can be selected." } ], "type": { "types": [ "Object" ], "optional": false, "name": "ColumnViewSelectionModeEnum" } }, { "__docId__": 1011, "kind": "file", "name": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport '../../../coral-component-popover';\nimport '../../../coral-component-button';\nimport CycleButtonItem from './CycleButtonItem';\nimport {Icon} from '../../../coral-component-icon';\nimport {ButtonList, SelectList} from '../../../coral-component-list';\nimport {SelectableCollection} from '../../../coral-collection';\nimport base from '../templates/base';\nimport {transform, validate, commons} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link CycleButton} display options.\n\n @typedef {Object} CycleButtonDisplayModeEnum\n\n @property {String} ICON\n Icon display mode.\n @property {String} TEXT\n Text display mode.\n @property {String} ICON_TEXT\n Icon and text display mode.\n */\nconst displayMode = {\n ICON: 'icon',\n TEXT: 'text',\n ICON_TEXT: 'icontext'\n};\n\n/**\n Regex used to remove whitespace from selectedItem label for use as an aria-label for accessibility.\n\n @ignore\n */\nconst WHITESPACE_REGEX = /[\\t\\n\\r ]+/g;\n\n/** @ignore */\nconst ACTION_TAG_NAME = 'coral-cyclebutton-action';\n\nconst CLASSNAME = '_coral-CycleSelect';\n\n/**\n @class Coral.CycleButton\n @classdesc A CycleButton component is a simple multi-state toggle button that toggles between the possible items below\n a certain threshold, and shows them in a popover selector when above.\n @htmltag coral-cyclebutton\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CycleButton = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this._id = this.id || commons.getUID();\n\n // Templates\n this._elements = {};\n base.call(this._elements, {Icon, commons, id: this._id});\n\n const events = {\n 'click button[is=\"coral-button\"]': '_onMouseDown',\n 'click ._coral-CycleSelect-button': '_onItemClick',\n 'click coral-cyclebutton-item': '_onItemClick',\n 'key:down ._coral-CycleSelect-button[aria-expanded=false]': '_onItemClick',\n\n // private\n 'coral-cyclebutton-item:_selectedchanged': '_onItemSelectedChanged',\n 'coral-cyclebutton-item:_validateselection': '_onValidateSelection',\n 'coral-cyclebutton-item:_iconchanged coral-cyclebutton-item[selected]': '_onSelectedItemPropertyChange',\n 'coral-cyclebutton-item:_displaymodechanged coral-cyclebutton-item[selected]': '_onSelectedItemPropertyChange',\n\n 'key:pageup coral-selectlist-item, [coral-list-item]': '_onFocusPreviousItem',\n 'key:left coral-selectlist-item, [coral-list-item]': '_onFocusPreviousItem',\n 'key:up coral-selectlist-item, [coral-list-item]': '_onFocusPreviousItem',\n 'key:pagedown coral-selectlist-item, [coral-list-item]': '_onFocusNextItem',\n 'key:right coral-selectlist-item, [coral-list-item]': '_onFocusNextItem',\n 'key:down coral-selectlist-item, [coral-list-item]': '_onFocusNextItem',\n 'key:home coral-selectlist-item, [coral-list-item]': '_onFocusFirstItem',\n 'key:end coral-selectlist-item, [coral-list-item]': '_onFocusLastItem',\n\n 'capture:focus coral-selectlist-item, [coral-list-item]': '_onItemFocus',\n 'capture:blur coral-selectlist-item, [coral-list-item]': '_onItemBlur',\n\n 'coral-overlay:open': '_onOverlayOpen',\n 'coral-overlay:close': '_onOverlayClose'\n };\n\n const overlay = this._elements.overlay;\n const overlayId = overlay.id;\n\n // Overlay\n events[`global:capture:click #${overlayId} button[is=\"coral-buttonlist-item\"]`] = '_onActionClick';\n events[`global:capture:coral-selectlist:beforechange #${overlayId}`] = '_onSelectListBeforeChange';\n events[`global:capture:coral-selectlist:change #${overlayId}`] = '_onSelectListChange';\n // Keyboard interaction\n events[`global:keypress #${overlayId}`] = '_onOverlayKeyPress';\n\n // Attach events\n this._delegateEvents(events);\n\n // Used for eventing\n this._oldSelection = null;\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n this.actions._startHandlingItems(true);\n }\n\n /**\n Returns the inner overlay to allow customization.\n\n @type {Popover}\n @readonly\n */\n get overlay() {\n return this._elements.overlay;\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-cyclebutton-item',\n onItemAdded: this._onItemAdded,\n onItemRemoved: this._onItemRemoved\n });\n }\n return this._items;\n }\n\n /**\n The selected item in the CycleButton.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getLastSelected();\n }\n\n /**\n General icon of the CycleButton. The icon will be displayed no matter the selection. If the selected item has\n its own icon, it will be overwritten.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n @htmlattributereflected\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n this._icon = transform.string(value);\n this._reflectAttribute('icon', this._icon);\n\n const selectedItem = this.selectedItem;\n if (selectedItem) {\n this._renderSelectedItem(selectedItem);\n }\n }\n\n /**\n Number of items that can be directly cycled through before collapsing. If 0 is used, the items\n will never be collapsed.\n\n @type {Number}\n @default 3\n @htmlattribute threshold\n @htmlattributereflected\n */\n get threshold() {\n return typeof this._threshold === 'number' ? this._threshold : 3;\n }\n\n set threshold(value) {\n value = transform.number(value);\n if (value > -1) {\n this._threshold = value;\n this._checkExtended();\n }\n }\n\n /**\n The Collection Interface that allows interaction with the {@link CycleButtonAction} elements.\n\n @type {SelectableCollection}\n @readonly\n */\n get actions() {\n if (!this._actions) {\n this._actions = new SelectableCollection({\n host: this,\n itemTagName: ACTION_TAG_NAME,\n itemSelector: ACTION_TAG_NAME,\n onCollectionChange: this._checkExtended\n });\n }\n return this._actions;\n }\n\n /**\n The CycleButton's displayMode. This defines how the selected item is displayed. If the selected item does not\n have the necessary icon or text information then fallback to show whichever is available. The appearance of\n collapsed items in the popover are not affected by this property. The displayMode property can be set on an\n item to override the component level value when that item is selected.\n See {@link CycleButtonDisplayModeEnum}.\n\n @type {String}\n @default CycleButtonDisplayModeEnum.ICON\n @htmlattribute displaymode\n @htmlattributereflected\n */\n get displayMode() {\n return this._displayMode || displayMode.ICON;\n }\n\n set displayMode(value) {\n value = transform.string(value).toLowerCase();\n this._displayMode = validate.enumeration(displayMode)(value) && value || displayMode.ICON;\n this._reflectAttribute('displaymode', this._displayMode);\n\n const selectedItem = this.selectedItem;\n if (selectedItem) {\n this._renderSelectedItem(selectedItem);\n }\n }\n\n /** @private */\n _hasMenuItemRadioGroup() {\n return this.items.getAll().length > 0 && this.actions.getAll().length > 0;\n }\n\n /** @private */\n _onItemAdded(item) {\n if (!this.selectedItem) {\n item.setAttribute('selected', '');\n }\n else {\n this._validateSelection(item);\n }\n\n this._checkExtended();\n }\n\n /** @private */\n _onItemRemoved() {\n if (!this.selectedItem) {\n this._selectFirstItem();\n }\n\n this._checkExtended();\n }\n\n /** @private */\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _onValidateSelection(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection();\n }\n\n /** @private */\n _selectFirstItem() {\n const item = this.items._getFirstSelectable();\n if (item) {\n item.setAttribute('selected', '');\n }\n }\n\n /** @private */\n _validateSelection(item) {\n const selectedItems = this.items._getAllSelected();\n\n if (item) {\n // Deselected item\n if (!item.hasAttribute('selected') && !selectedItems.length) {\n const siblingItem = this.items._getNextSelectable(item);\n // Next selectable item is forced to be selected if selection is cleared\n if (item !== siblingItem) {\n siblingItem.setAttribute('selected', '');\n }\n }\n // Selected item\n else if (item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n }\n else if (selectedItems.length > 1) {\n // If multiple items are selected, the last one wins\n item = selectedItems[selectedItems.length - 1];\n\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n // First selectable item is forced to be selected if no selection at all\n else if (!selectedItems.length) {\n this._selectFirstItem();\n }\n\n this._renderSelectedItem(this.selectedItem);\n\n this._triggerChangeEvent();\n }\n\n /** @private */\n _triggerChangeEvent() {\n const selectedItem = this.selectedItem;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && selectedItem !== oldSelection) {\n this.trigger('coral-cyclebutton:change', {\n oldSelection: oldSelection,\n selection: selectedItem\n });\n\n this._oldSelection = selectedItem;\n }\n }\n\n _onMouseDown(event) {\n event.preventDefault();\n event.stopPropagation();\n this._trackEvent('click', 'coral-cyclebutton', event);\n }\n\n /** @private */\n _onItemClick(event) {\n event.preventDefault();\n\n const items = this.items.getAll();\n const itemCount = items.length;\n\n // When we have more than a specified number of items, use the overlay selection. If threshold is 0, then we never\n // show the popover. If there are actions, we always show the popover.\n if (this._isExtended()) {\n // we toggle the overlay if it was already open\n this[this._elements.overlay.classList.contains('is-open') ? '_hideOverlay' : '_showOverlay']();\n }\n // Unless this is the only item we have, select the next item in line:\n else if (itemCount > 1) {\n const neighbor = this.selectedItem.nextElementSibling;\n const nextItem = neighbor.nodeName === 'CORAL-CYCLEBUTTON-ITEM' ? neighbor : items[0];\n\n this._selectCycleItem(nextItem);\n this._focusItem(this._elements.button);\n }\n }\n\n /**\n Render the provided item as selected according to resolved icon and displayMode properties.\n\n @private\n */\n _renderSelectedItem(item) {\n if (!item || !item.content) {\n return;\n }\n\n // resolve effective values by checking for item and component level properties\n let effectiveDisplayMode = this.displayMode;\n const effectiveIcon = item.icon || this.icon || '';\n\n if (item.displayMode !== CycleButtonItem.displayMode.INHERIT) {\n effectiveDisplayMode = item.displayMode;\n }\n if (!item.content.textContent.trim() || !effectiveIcon.trim()) {\n // if icon or text missing then we fallback to showing whichever is available\n effectiveDisplayMode = displayMode.ICON_TEXT;\n }\n\n // manipulate button sub-component depending on display mode\n if (effectiveDisplayMode === displayMode.ICON) {\n this._elements.button.icon = effectiveIcon;\n this._elements.button.label.innerHTML = '';\n\n // @a11y\n const ariaLabel = item.content.textContent.replace(WHITESPACE_REGEX, ' ');\n this._elements.button.setAttribute('aria-label', ariaLabel);\n this._elements.button.setAttribute('title', ariaLabel);\n if (ariaLabel && effectiveIcon !== '' && this._elements.button._elements.icon) {\n this._elements.button._elements.icon.setAttribute('aria-hidden', true);\n }\n }\n else {\n // handle display modes that include text\n if (effectiveDisplayMode === displayMode.TEXT) {\n this._elements.button.icon = '';\n }\n if (effectiveDisplayMode === displayMode.ICON_TEXT) {\n this._elements.button.icon = effectiveIcon;\n if (effectiveIcon !== '' && this._elements.button._elements.icon) {\n this._elements.button._elements.icon.setAttribute('aria-hidden', true);\n }\n }\n this._elements.button.label.innerHTML = item.content.innerHTML;\n\n // @a11y we do not require aria attributes since we already show text\n this._elements.button.removeAttribute('aria-label');\n this._elements.button.removeAttribute('title');\n }\n }\n\n /**\n Update currently selected item if it's icon or displayMode properties have changed.\n\n @private\n */\n _onSelectedItemPropertyChange(event) {\n // stops propagation because the event is internal to the component\n event.stopImmediatePropagation();\n this._renderSelectedItem(event.target);\n }\n\n /** @private */\n _onSelectListBeforeChange(event) {\n if (event.detail.item.selected) {\n event.preventDefault();\n if (!this._isPopulatingLists) {\n // Hide the overlay, cleanup will be done before overlay.show()\n this._hideOverlay();\n }\n }\n }\n\n /** @private */\n _onSelectListChange(event) {\n event.stopImmediatePropagation();\n event.preventDefault();\n\n let origNode;\n const selectListItem = event.detail.selection;\n if (selectListItem) {\n origNode = selectListItem._originalItem;\n\n this._selectCycleItem(origNode);\n\n if (!this._isPopulatingLists) {\n // Hide the overlay, cleanup will be done before overlay.show()\n this._hideOverlay();\n }\n }\n\n this._trackEvent('selected', 'coral-cyclebutton-item', event, origNode);\n }\n\n _onOverlayKeyPress(event) {\n // Focus on item which text starts with pressed keys\n this._elements.selectList._onKeyPress(event);\n }\n\n /** @private */\n _onActionClick(event) {\n event.stopPropagation();\n\n const item = event.matchedTarget;\n const proxyEvent = item._originalItem.trigger('click');\n\n if (!proxyEvent.defaultPrevented) {\n this._hideOverlay();\n }\n\n this._trackEvent('selected', 'coral-cyclebutton-action', event, item);\n }\n\n /** @private */\n _isExtended() {\n const hasActions = this.actions.getAll().length > 0;\n return this.threshold > 0 && this.items.getAll().length >= this.threshold || hasActions;\n }\n\n /** @private */\n _checkExtended() {\n const isExtended = this._isExtended();\n this.classList.toggle(`${CLASSNAME}--extended`, isExtended);\n\n // @a11y\n if (isExtended) {\n this._elements.button.setAttribute('aria-controls', this._elements.overlay.id);\n this._elements.button.setAttribute('aria-haspopup', true);\n this._elements.button.setAttribute('aria-expanded', false);\n\n // Assign the button as the target for the overlay\n this._elements.overlay.target = this._elements.button;\n this._elements.overlay.hidden = false;\n\n // Regions within the overlay should have role=presentation\n this._elements.overlay.content.setAttribute('role', 'presentation');\n }\n else {\n this._elements.button.removeAttribute('aria-controls');\n this._elements.button.removeAttribute('aria-haspopup');\n this._elements.button.removeAttribute('aria-expanded');\n\n // Remove target and hide overlay\n this._elements.overlay.target = null;\n this._elements.overlay.hidden = true;\n }\n }\n\n /** @ignore */\n _focusItem(item) {\n if (item) {\n item.focus();\n }\n }\n\n /** @private */\n _onFocusPreviousItem(event) {\n event.preventDefault();\n const items = this._getSelectableItems();\n if (items.length > 1) {\n const el = event.matchedTarget;\n const index = items.indexOf(el);\n if (index > 0) {\n this._focusItem(items[index - 1]);\n }\n else if (document.activeElement !== el) {\n // make sure ButtonList doesn't wrap focus\n this._focusItem(el);\n }\n }\n }\n\n /** @private */\n _onFocusNextItem(event) {\n event.preventDefault();\n const items = this._getSelectableItems();\n if (items.length > 1) {\n const el = event.matchedTarget;\n const index = items.indexOf(el);\n if (index < items.length - 1) {\n this._focusItem(items[index + 1]);\n }\n else if (document.activeElement !== el) {\n // make sure ButtonList doesn't wrap focus\n this._focusItem(el);\n }\n }\n }\n\n /** @private */\n _onFocusFirstItem(event) {\n event.preventDefault();\n this._focusItem(this._getSelectableItems()[0]);\n }\n\n /** @private */\n _onFocusLastItem(event) {\n event.preventDefault();\n const items = this._getSelectableItems();\n this._focusItem(items[items.length - 1]);\n }\n\n /** @private */\n _getSelectableItems() {\n const items = this.items.getAll();\n const actions = this.actions.getAll();\n return items\n .concat(actions)\n .map(item => item._selectListItem || item._buttonListItem)\n .filter(item => {\n !item.hasAttribute('hidden') &&\n !item.hasAttribute('disabled') &&\n item.offsetParent !== null &&\n (item.offsetWidth > 0 || item.offsetHeight > 0);\n });\n }\n\n /** @private */\n _onItemFocus(event) {\n this._elements.selectList.classList.toggle('is-focused', true);\n event.matchedTarget.classList.toggle('focus-ring', true);\n }\n\n /** @private */\n _onItemBlur(event) {\n this._elements.selectList.classList.toggle('is-focused', false);\n event.matchedTarget.classList.toggle('focus-ring', false);\n }\n\n _onOverlayClose() {\n // @a11y\n this._elements.button.setAttribute('aria-expanded', false);\n }\n\n _onOverlayOpen() {\n // @a11y\n this._elements.button.setAttribute('aria-expanded', true);\n }\n\n /** @ignore */\n _hideOverlay() {\n this._elements.overlay.hide();\n }\n\n /** @ignore */\n _getSelectListItem(item) {\n const selectListItem = new SelectList.Item();\n\n // Needs to be reflected on the generated Item.\n selectListItem.trackingElement = item.trackingElement;\n\n // We do first the content, so that the icon is not destroyed\n const selectListItemContent = new SelectList.Item.Content();\n selectListItemContent.innerHTML = item.content.innerHTML;\n selectListItem.content = selectListItemContent;\n\n // Specify the icon\n if (item.icon) {\n selectListItem.icon = item.icon;\n }\n\n selectListItem.disabled = item.disabled;\n selectListItem.selected = item.selected;\n selectListItem.setAttribute('role', item.getAttribute('role'));\n selectListItem.setAttribute('aria-checked', item.selected);\n\n selectListItem._originalItem = item;\n item._selectListItem = selectListItem;\n\n return selectListItem;\n }\n\n /** @ignore */\n _getActionListItem(action) {\n const actionListItem = new ButtonList.Item();\n\n actionListItem.icon = action.icon;\n actionListItem.disabled = action.disabled;\n actionListItem.setAttribute('role', action.getAttribute('role'));\n actionListItem.tabIndex = action.tabIndex;\n\n // Needs to be reflected on the generated Action.\n actionListItem.trackingElement = action.trackingElement;\n actionListItem.content.innerHTML = action.content.innerHTML;\n\n actionListItem._originalItem = action;\n action._buttonListItem = actionListItem;\n\n return actionListItem;\n }\n\n /** @ignore */\n _populateLists() {\n const selectList = this._elements.selectList;\n const actionList = this._elements.actionList;\n const items = this.items.getAll();\n const actions = this.actions.getAll();\n const itemCount = items.length;\n const actionCount = actions.length;\n let selectListItem;\n let actionListItem;\n\n this._isPopulatingLists = true;\n\n // we empty the existing items before populating the lists again\n selectList.items.clear();\n actionList.items.clear();\n\n // adds the items to the selectList\n for (let i = 0 ; i < itemCount ; i++) {\n const item = items[i];\n selectListItem = this._getSelectListItem(item);\n\n selectListItem.icon = item.icon;\n selectListItem.setAttribute('aria-checked', item.selected);\n selectListItem._elements.icon.setAttribute('aria-hidden', true);\n\n selectListItem.set({\n disabled: item.disabled,\n selected: item.selected\n }, true);\n\n selectList.items.add(selectListItem);\n }\n\n // adds any additional actions to the actions buttonList\n if (actionCount > 0) {\n for (let j = 0 ; j < actionCount ; j++) {\n const action = actions[j];\n\n actionListItem = this._getActionListItem(action);\n actionListItem.disabled = action.disabled;\n actionListItem.icon = action.icon;\n actionListItem._elements.icon.setAttribute('aria-hidden', true);\n\n actionList.items.add(actionListItem);\n }\n\n this._elements.actionList.removeAttribute('hidden');\n\n if (itemCount > 0) {\n this._elements.separator.removeAttribute('hidden');\n }\n }\n else {\n this._elements.actionList.setAttribute('hidden', '');\n this._elements.separator.setAttribute('hidden', '');\n }\n\n commons.nextFrame(() => {\n this._isPopulatingLists = false;\n });\n }\n\n /** @private */\n _selectCycleItem(item) {\n item.setAttribute('selected', '');\n }\n\n /** @ignore */\n _showOverlay() {\n this._populateLists();\n\n this._elements.overlay.show();\n }\n\n /**\n Returns {@link CycleButton} display options.\n\n @return {CycleButtonDisplayModeEnum}\n */\n static get displayMode() {\n return displayMode;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n displaymode: 'displayMode'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['icon', 'threshold', 'displaymode', 'aria-label', 'aria-labelledby']);\n }\n\n /** @ignore */\n attributeChangedCallback(name, oldValue, value) {\n // The accessibility name for the button element\n if (name === 'aria-label') {\n const hasMenuItemRadioGroup = this._hasMenuItemRadioGroup();\n\n // aria-labelledby takes precedence over aria-label\n if (this.getAttribute('aria-labelledby')) {\n // Button should be labeled by the container and the button, with the selected value, itself\n this._elements.button.setAttribute('aria-labelledby', `${this.id} ${this._elements.button.id}`);\n\n // Overlay should be labeled by the container with aria-label\n this._elements.overlay.setAttribute('aria-labelledby', this.id);\n\n // With both items and actions, the items should be grouped and the group should be labeled\n // SelectList menuitemradio group should be labeled by the container with aria-label,\n // Otherwise the selectList should not be labeled independantly from the menu\n this._elements.selectList[hasMenuItemRadioGroup ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.id);\n }\n else {\n // With no aria-label, clean up aria-labelledby on _elements\n this._elements.button.removeAttribute('aria-labelledby');\n this._elements.overlay.setAttribute('aria-labelledby', this._elements.button.id);\n\n // With both items and actions, the items should be grouped and the group should be labeled\n // SelectList menuitemradio group should be labeled by the button, with the selected value, itself,\n // Otherwise the selectList should not be labeled independantly from the menu\n this._elements.selectList[hasMenuItemRadioGroup ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this._elements.button.id);\n }\n }\n // The id reference for an HTML element that labels the button element accessibility name for the button element\n else if (name === 'aria-labelledby') {\n if (value || !this.getAttribute('aria-label')) {\n this._elements.button.setAttribute('aria-labelledby', `${value} ${this._elements.button.id}`);\n this._elements.overlay.setAttribute('aria-labelledby', value || this._elements.button.id);\n this._elements.selectList[this._hasMenuItemRadioGroup() ? 'setAttribute' : 'removeAttribute']('aria-labelledby', value || this._elements.button.id);\n }\n }\n else {\n super.attributeChangedCallback(name, oldValue, value);\n }\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n if (!this.id) {\n this.id = this._id;\n }\n\n this.classList.add(CLASSNAME);\n\n // Default reflected attributes\n if (typeof this._threshold === 'undefined') {\n this.threshold = 3;\n }\n if (!this._displayMode) {\n this.displayMode = displayMode.ICON;\n }\n\n // checks the component's extended mode\n this._checkExtended();\n\n ['button', 'overlay'].forEach((handleName) => {\n const handle = this.querySelector(`[handle=\"${handleName}\"]`);\n if (handle) {\n handle.remove();\n }\n });\n\n const frag = document.createDocumentFragment();\n\n // Render the base layout\n frag.appendChild(this._elements.button);\n frag.appendChild(this._elements.overlay);\n\n // Inserting the template before the items\n this.appendChild(frag);\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n this._validateSelection();\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItem;\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n\n /**\n Triggered when the {@link CycleButton} selected item has changed.\n\n @typedef {CustomEvent} coral-cyclebutton:change\n\n @property {CycleButtonItem} detail.oldSelection\n The prior selected item(s).\n @property {CycleButtonItem} detail.selection\n The newly selected item(s).\n */\n});\n\nexport default CycleButton;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1012, "kind": "typedef", "name": "CycleButtonDisplayModeEnum", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~CycleButtonDisplayModeEnum", "access": "public", "description": "Enumeration for {@link CycleButton} display options.", "lineNumber": 36, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ICON", "description": "Icon display mode." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "TEXT", "description": "Text display mode." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ICON_TEXT", "description": "Icon and text display mode." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CycleButtonDisplayModeEnum" } }, { "__docId__": 1013, "kind": "variable", "name": "WHITESPACE_REGEX", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~WHITESPACE_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used to remove whitespace from selectedItem label for use as an aria-label for accessibility.", "lineNumber": 47, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1014, "kind": "variable", "name": "ACTION_TAG_NAME", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~ACTION_TAG_NAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 50, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 1015, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 52, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1016, "kind": "variable", "name": "CycleButton", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~CycleButton", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CycleButton}", "description": "A CycleButton component is a simple multi-state toggle button that toggles between the possible items below\na certain threshold, and shows them in a popover selector when above.", "lineNumber": 62, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CycleButton" }, { "tagName": "@classdesc", "tagValue": "A CycleButton component is a simple multi-state toggle button that toggles between the possible items below\na certain threshold, and shows them in a popover selector when above." }, { "tagName": "@htmltag", "tagValue": "coral-cyclebutton" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CycleButton();" ], "see": [ "../examples/#cyclebutton" ], "type": { "types": [ "*" ] } }, { "__docId__": 1017, "kind": "typedef", "name": "coral-cyclebutton:change", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButton.js~coral-cyclebutton:change", "access": "public", "description": "Triggered when the {@link CycleButton} selected item has changed.", "properties": [ { "nullable": null, "types": [ "CycleButtonItem" ], "spread": false, "optional": false, "name": "detail.oldSelection", "description": "The prior selected item(s)." }, { "nullable": null, "types": [ "CycleButtonItem" ], "spread": false, "optional": false, "name": "detail.selection", "description": "The newly selected item(s)." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-cyclebutton:change" } }, { "__docId__": 1018, "kind": "file", "name": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonAction.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.CycleButton.Action\n @classdesc A CycleButton Action component\n @htmltag coral-cyclebutton-action\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CycleButtonAction = Decorator(class extends BaseComponent(HTMLElement) {\n /**\n The Action's icon. See {@link Coral.Icon} for valid icon names.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n @htmlattributereflected\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n this._icon = transform.string(value);\n this._reflectAttribute('icon', this._icon);\n }\n\n // @compat\n get content() {\n return this;\n }\n\n set content(value) {\n // Support configs\n if (typeof value === 'object') {\n for (const prop in value) {\n /** @ignore */\n this[prop] = value[prop];\n }\n }\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.content || this).textContent.replace(/\\s{2,}/g, ' ').trim() || this.icon :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['icon']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // adds the role to support accessibility\n this.setAttribute('role', 'menuitem');\n this.tabIndex = -1;\n }\n});\n\nexport default CycleButtonAction;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonAction.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1019, "kind": "variable", "name": "CycleButtonAction", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonAction.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonAction.js~CycleButtonAction", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CycleButton}", "description": "A CycleButton Action component", "lineNumber": 24, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CycleButton.Action" }, { "tagName": "@classdesc", "tagValue": "A CycleButton Action component" }, { "tagName": "@htmltag", "tagValue": "coral-cyclebutton-action" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CycleButton.Action();" ], "see": [ "../examples/#cyclebutton" ], "type": { "types": [ "*" ] } }, { "__docId__": 1020, "kind": "file", "name": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {commons, transform, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enum for {CycleButtonItem} display options.\n\n @typedef {Object} CycleButtonItemDisplayModeEnum\n\n @property {String} ICON\n Icon display mode.\n @property {String} TEXT\n Text display mode.\n @property {String} ICON_TEXT\n Icon and text display mode.\n @property {String} INHERIT\n Inherit display mode.\n */\nconst displayMode = {\n ICON: 'icon',\n TEXT: 'text',\n ICON_TEXT: 'icontext',\n INHERIT: 'inherit'\n};\n\n/**\n @class Coral.CycleButton.Item\n @classdesc A CycleButton Item component\n @htmltag coral-cyclebutton-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst CycleButtonItem = Decorator(class extends BaseComponent(HTMLElement) {\n /**\n The Item's icon. See {@link Coral.Icon} for valid icon names.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n @htmlattributereflected\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n let _icon = transform.string(value);\n\n if(this._icon === _icon) {\n return;\n }\n\n this._icon = _icon;\n this._reflectAttribute('icon', this._icon);\n\n this.trigger('coral-cyclebutton-item:_iconchanged');\n }\n\n // @compat\n get content() {\n return this;\n }\n\n set content(value) {\n // Support configs\n if (typeof value === 'object') {\n for (const prop in value) {\n /** @ignore */\n this[prop] = value[prop];\n }\n }\n }\n\n /**\n Whether the Item is disabled. When set to true, this will prevent every user interacting with it.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this.disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n\n if (this._disabled && this.selected) {\n this.selected = false;\n }\n\n if (!this._disabled && !this.selected) {\n // We inform the parent to verify if this item should be selected because it's the only one left\n this.trigger('coral-cyclebutton-item:_validateselection');\n }\n }\n\n /**\n Whether the Item is selected.\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n let _selected = transform.booleanAttr(value);\n\n if(this._selected === _selected) {\n return;\n }\n \n if (!_selected || _selected && !this.disabled) {\n this._selected = _selected;\n this._reflectAttribute('selected', this.disabled ? false : this._selected);\n\n this.classList.toggle('is-selected', this._selected);\n this.setAttribute('aria-checked', this._selected);\n\n this.trigger('coral-cyclebutton-item:_selectedchanged');\n }\n }\n\n /**\n The displayMode to be used when the particular item is selected. When this value is set to inherit\n it will defer to the component level displayMode. If the selected item does not have the necessary icon or text\n information, then fallback to show whichever is available. The appearance of collapsed items in the popover are\n not affected by this property.\n See {@link CycleButtonItemDisplayModeEnum}.\n\n @type {String}\n @default CycleButtonItemDisplayModeEnum.INHERIT\n @htmlattribute displaymode\n @htmlattributereflected\n */\n get displayMode() {\n return this._displayMode || displayMode.INHERIT;\n }\n\n set displayMode(value) {\n let _value = transform.string(value).toLowerCase();\n let _displayMode = validate.enumeration(displayMode)(_value) && _value || displayMode.INHERIT;\n\n if(this._displayMode === _displayMode) {\n return;\n }\n\n this._displayMode = _displayMode;\n this._reflectAttribute('displaymode', this._displayMode);\n\n this.trigger('coral-cyclebutton-item:_displaymodechanged');\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.content || this).textContent.replace(/\\s{2,}/g, ' ').trim() || this.icon :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /**\n Returns {@link CycleButtonItem} display options.\n\n @return {CycleButtonItemDisplayModeEnum}\n */\n static get displayMode() {\n return displayMode;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n displaymode: 'displayMode'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', 'disabled', 'icon', 'displaymode']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n // adds the role to support accessibility\n this.setAttribute('role', 'menuitemradio');\n\n // Default reflected attributes\n if (!this._displayMode) {\n this.displayMode = displayMode.INHERIT;\n }\n }\n});\n\nexport default CycleButtonItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1021, "kind": "typedef", "name": "CycleButtonItemDisplayModeEnum", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js~CycleButtonItemDisplayModeEnum", "access": "public", "description": "Enum for {CycleButtonItem} display options.", "lineNumber": 31, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ICON", "description": "Icon display mode." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "TEXT", "description": "Text display mode." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ICON_TEXT", "description": "Icon and text display mode." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INHERIT", "description": "Inherit display mode." } ], "type": { "types": [ "Object" ], "optional": false, "name": "CycleButtonItemDisplayModeEnum" } }, { "__docId__": 1022, "kind": "variable", "name": "CycleButtonItem", "memberof": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js", "static": true, "longname": "coral-spectrum/coral-component-cyclebutton/src/scripts/CycleButtonItem.js~CycleButtonItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{CycleButton}", "description": "A CycleButton Item component", "lineNumber": 45, "unknown": [ { "tagName": "@class", "tagValue": "Coral.CycleButton.Item" }, { "tagName": "@classdesc", "tagValue": "A CycleButton Item component" }, { "tagName": "@htmltag", "tagValue": "coral-cyclebutton-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.CycleButton.Item();" ], "see": [ "../examples/#cyclebutton" ], "type": { "types": [ "*" ] } }, { "__docId__": 1023, "kind": "file", "name": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport {DateTime} from '../../../coral-datetime';\nimport '../../../coral-component-button';\nimport '../../../coral-component-clock';\nimport '../../../coral-component-calendar';\nimport '../../../coral-component-popover';\nimport '../../../coral-component-textfield';\nimport base from '../templates/base';\nimport overlayContent from '../templates/overlayContent';\nimport {transform, commons, validate, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enum for {@link Datepicker} variant values.\n\n @typedef {Object} DatepickerVariantEnum\n\n @property {String} DEFAULT\n A default, gray Datepicker.\n @property {String} QUIET\n A Datepicker with no border or background.\n */\nconst variant = {\n DEFAULT: 'default',\n QUIET: 'quiet'\n};\n\nconst CLASSNAME = '_coral-InputGroup';\n\n// builds a string containing all possible variant classnames. This will be used to remove\n// classnames when the variant changes.\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantKey in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantKey]}`);\n}\n\n/** @ignore */\nfunction toMoment(value, format) {\n if (value === 'today') {\n return new DateTime.Moment();\n } else if (DateTime.Moment.isMoment(value)) {\n return value.isValid() ? value.clone() : null;\n }\n\n // if the value provided is a date it does not make sense to provide a format to parse the date\n const result = new DateTime.Moment(value, value instanceof Date ? null : format);\n return result.isValid() ? result : null;\n}\n\n/**\n Enumeration for {@link Datepicker} variants.\n\n @typedef {Object} DatepickerTypeEnum\n\n @property {String} DATE\n The selection overlay contains only a calendar.\n @property {String} DATETIME\n Provides both calendar and time controls in the selection overlay.\n @property {String} TIME\n The selection overlay provides only time controls.\n */\nconst type = {\n DATE: 'date',\n DATETIME: 'datetime',\n TIME: 'time'\n};\n\n// Used to determine if the client is on a mobile device\nconst IS_MOBILE_DEVICE = navigator.userAgent.match(/iPhone|iPad|iPod|Android/i) !== null;\n\nconst NATIVE_FORMATS = {\n date: 'YYYY-MM-DD',\n datetime: 'YYYY-MM-DD[T]HH:mmZ',\n time: 'HH:mm'\n};\n\nconst isNativeFormat = (format) => {\n let res = false;\n for (const key in NATIVE_FORMATS) {\n if (format === NATIVE_FORMATS[key]) {\n res = true;\n }\n }\n return res;\n};\n\n/**\n @class Coral.Datepicker\n @classdesc A Datepicker component that can be used as a date and time selection form field. Leverages {@link momentJS}\n if loaded on the page.\n @htmltag coral-datepicker\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst Datepicker = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = {};\n base.call(this._elements, {commons, i18n});\n // Creates and stores the contents of the popover separately\n this._calendarFragment = overlayContent.call(this._elements, {commons, i18n});\n\n // Pre-define labellable element\n this._labellableElement = this._elements.input;\n\n const overlayId = this._elements.overlay.id;\n const events = {};\n events[`global:capture:click #${overlayId} coral-calendar`] = '_onCalendarDayClick';\n events[`global:capture:change #${overlayId}`] = '_onChange';\n events[`global:capture:coral-overlay:beforeopen #${overlayId}`] = '_onPopoverBeforeOpen';\n events[`global:capture:coral-overlay:open #${overlayId}`] = '_onPopoverOpenOrClose';\n events[`global:capture:coral-overlay:close #${overlayId}`] = '_onPopoverOpenOrClose';\n events['key:alt+down [handle=\"input\"],[handle=\"toggle\"]'] = '_onAltDownKey';\n events['key:down [handle=\"toggle\"]'] = '_onAltDownKey';\n events['change coral-datepicker > input[is=\"coral-textfield\"]'] = '_onInputChange';\n\n // Events\n this._delegateEvents(commons.extend(this._events, events));\n }\n\n /**\n Returns the inner overlay to allow customization.\n\n @type {Popover}\n @readonly\n */\n get overlay() {\n return this._elements.overlay;\n }\n\n /**\n The type of datepicker to show to the user. See {@link DatepickerTypeEnum}.\n\n @type {DatepickerTypeEnum}\n @default DatepickerTypeEnum.DATE\n @htmlattribute type\n @htmlattributereflected\n */\n get type() {\n return this._type || type.DATE;\n }\n\n set type(value) {\n // Flag to indicate that we are changing the type for the first time\n this._typeFormatChanged = typeof this._type === 'undefined';\n\n value = transform.string(value).toLowerCase();\n this._type = validate.enumeration(type)(value) && value || type.DATE;\n this._reflectAttribute('type', this._type);\n\n const format = NATIVE_FORMATS[this._type];\n const isTime = this._type === type.TIME;\n const isDate = this._type === type.DATE;\n\n this._elements.icon.icon = isTime ? 'clock' : 'calendar';\n\n const toggleLabel = isTime ? i18n.get('Time') : i18n.get('Calendar');\n this._elements.toggle.setAttribute('aria-label', toggleLabel);\n this._elements.toggle.setAttribute('title', toggleLabel);\n\n this._elements.clock.hidden = isDate;\n this._elements.clock.setAttribute('aria-hidden', isDate);\n\n this._elements.calendar.hidden = isTime;\n this._elements.calendar.setAttribute('aria-hidden', isTime);\n\n // Change format if we have a native format set\n if (isNativeFormat(this.valueFormat)) {\n this.valueFormat = format;\n }\n if (isNativeFormat(this.displayFormat)) {\n this.displayFormat = format;\n }\n\n this._useNativeInput = this._useNativeInput;\n\n this._typeFormatChanged = false;\n }\n\n /**\n The format used to display the selected date(time) to the user. If the user manually types a date, this format\n will be used to parse the value. When using this component on a mobile device, the display format must follow\n the format used by the native input. If an empty string is provided, then the default value per type will\n be used. The default value depends on the type, which can be one from YYYY-MM-DD,\n YYYY-MM-DD[T]HH:mmZ or HH:mm. Include momentjs to support additional format string options\n see http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"YYYY-MM-DD\"\n @htmlattribute displayformat\n @htmlattributereflected\n */\n get displayFormat() {\n // we ignore _useNativeInput when the type is datetime because it is not supported by mobile libraries\n if (this._useNativeInput && this.type !== type.DATETIME) {\n return NATIVE_FORMATS[this.type];\n }\n\n return typeof this._displayFormat === 'undefined' ? NATIVE_FORMATS[this.type] : this._displayFormat;\n }\n\n set displayFormat(value) {\n value = transform.string(value).trim();\n\n // In case a custom display format was set, we make sure that type doesn't change it to a native format\n const displayFormatAttribute = this.getAttribute('displayformat');\n if (this._typeFormatChanged && displayFormatAttribute && displayFormatAttribute !== value) {\n value = displayFormatAttribute;\n }\n\n this._displayFormat = value === '' ? NATIVE_FORMATS[this.type] : value;\n this._reflectAttribute('displayformat', this._displayFormat);\n\n this._elements.clock.displayFormat = this._displayFormat;\n this._elements.input.value = this._getValueAsString(this._value, this._displayFormat);\n }\n\n /**\n The format to use on expressing the selected date as a string on the value attribute. The value\n will be sent to the server using this format. If an empty string is provided, then the default value per type\n will be used. The default value depends on the type, which can be one from YYYY-MM-DD,\n YYYY-MM-DD[T]HH:mmZ or HH:mm. Include momentjs to support additional format string options\n see http://momentjs.com/docs/#/displaying/.\n\n @type {String}\n @default \"YYYY-MM-DD\"\n @htmlattribute valueformat\n @htmlattributereflected\n */\n get valueFormat() {\n return typeof this._valueFormat === 'undefined' ? NATIVE_FORMATS[this.type] : this._valueFormat;\n }\n\n set valueFormat(value) {\n const setValueFormat = (newValue) => {\n this._valueFormat = newValue === '' ? NATIVE_FORMATS[this.type] : newValue;\n this._reflectAttribute('valueformat', this._valueFormat);\n };\n\n value = transform.string(value).trim();\n\n // In case a custom display format was set, we make sure that type doesn't change it to a native format\n const valueFormatAttribute = this.getAttribute('valueformat');\n if (this._typeFormatChanged && valueFormatAttribute && valueFormatAttribute !== value) {\n value = valueFormatAttribute;\n }\n\n // Once the valueFormat is set, we make sure the value is also correct\n if (!this._valueFormat && this._originalValue) {\n setValueFormat(value);\n this.value = this._originalValue;\n } else {\n setValueFormat(value);\n }\n\n this._elements.calendar.valueFormat = this._valueFormat;\n this._elements.hiddenInput.value = this.value;\n }\n\n /**\n The value of the element, interpreted as a date, or null if conversion is not possible.\n\n @type {Date}\n @default null\n */\n get valueAsDate() {\n let value = this._value;\n\n // If type is DATE, then you strip out the time\n if (this.type === 'date' && value) {\n value = value.startOf('day');\n }\n\n return value ? value.toDate() : null;\n }\n\n set valueAsDate(value) {\n this._valueAsDate = value instanceof Date ? new DateTime.Moment(value) : '';\n\n this.value = this._valueAsDate;\n }\n\n /**\n The minimum date that the Datepicker will accept as valid. It must not be greated that its maximum. It accepts\n both date and string values. When a string is provided, it should match the {@link Coral.Datepicker#valueFormat}.\n\n See {@link Coral.Calendar#min}\n\n @type {String|Date}\n @default null\n @htmlattribute min\n */\n get min() {\n return this._elements.calendar.min;\n }\n\n set min(value) {\n this._elements.calendar.min = value;\n }\n\n /**\n The maximum date that the Datepicker will accept as valid. It must not be less than its minimum. It accepts both\n date and string values. When a string is provided, it should match the {@link Coral.Datepicker#valueFormat}.\n\n See {@link Coral.Calendar#max}\n\n @type {String|Date}\n @default null\n @htmlattribute max\n */\n get max() {\n return this._elements.calendar.max;\n }\n\n set max(value) {\n this._elements.calendar.max = value;\n }\n\n /**\n The format used to display the current month and year.\n 'MMMM YYYY' is supported by default. Include momentjs to support additional format string options see\n http://momentjs.com/docs/#/displaying/.\n\n See {@link Coral.Calendar#startDay}\n\n @type {String}\n @default \"MMMM YYYY\"\n @htmlattribute headerformat\n */\n get headerFormat() {\n return this._elements.calendar.headerFormat;\n }\n\n set headerFormat(value) {\n this._elements.calendar.headerFormat = value;\n }\n\n /**\n Defines the start day for the week, 0 = Sunday, 1 = Monday etc., as depicted on the calendar days grid.\n\n See {@link Coral.Calendar#startDay}\n\n @type {Number}\n @default 0\n @htmlattribute startday\n */\n get startDay() {\n return this._elements.calendar.startDay;\n }\n\n set startDay(value) {\n this._elements.calendar.startDay = value;\n }\n\n /**\n The current value. When set to \"today\", the value is coerced into the client's local date expressed as string\n formatted in accordance to the set valueFormat.\n\n See {@link Coral.Calendar#value}\n\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n return this._getValueAsString(this._value, this.valueFormat);\n }\n\n set value(value) {\n // This is used to change the value if valueformat is also set but afterwards\n this._originalValue = value;\n\n this._value = toMoment(value, this.valueFormat);\n\n this._elements.calendar.valueAsDate = this.valueAsDate;\n this._elements.clock.valueAsDate = this.valueAsDate;\n this._elements.input.value = this._getValueAsString(this._value, this.displayFormat);\n this._elements.hiddenInput.value = this.value;\n }\n\n /**\n Short hint that describes the expected value of the Datepicker. It is displayed when the Datepicker is empty.\n\n @type {String}\n @default \"\"\n @htmlattribute placeholder\n @htmlattributereflected\n */\n get placeholder() {\n return this._elements.input.placeholder;\n }\n\n set placeholder(value) {\n this._elements.input.placeholder = value;\n this._reflectAttribute('placeholder', this.placeholder);\n }\n\n /**\n The datepicker's variant. See {@link DatepickerVariantEnum}.\n\n @type {DatepickerVariantEnum}\n @default DatepickerVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n\n // passes down the variant to the underlying components\n this._elements.input.variant = this._variant;\n this._elements.toggle.classList.toggle('_coral-FieldButton--quiet', this._variant === variant.QUIET);\n\n // removes every existing variant\n this.classList.remove(...ALL_VARIANT_CLASSES);\n\n if (this._variant !== variant.DEFAULT) {\n this.classList.add(`${CLASSNAME}--${this._variant}`);\n }\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.hiddenInput.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.hiddenInput.name = value;\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this.classList.toggle('is-disabled', this._disabled);\n\n this._elements.input.disabled = this._disabled;\n this._elements.hiddenInput.disabled = this._disabled;\n this._elements.toggle.disabled = this._disabled || this.readOnly;\n this._elements.toggle.setAttribute(\"tabindex\", !this._elements.toggle.disabled ? \"0\" : \"-1\");\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n this.classList.toggle('is-invalid', this.invalid);\n this._elements.toggle.classList.toggle('is-invalid', this.invalid);\n this._elements.input.invalid = this.invalid;\n this._elements.input.setAttribute('aria-invalid', this.invalid);\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._required || false;\n }\n\n set required(value) {\n this._required = transform.booleanAttr(value);\n this._reflectAttribute('required', this._required);\n // this._elements.toggle.classList.toggle('is-invalid', this._required);\n // this._elements.input.required = this._required;\n this._elements.input.setAttribute(\"aria-required\", this._required);\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._elements.hiddenInput.readOnly = this.readOnly;\n this._elements.input.readOnly = this._readOnly;\n this._elements.toggle.disabled = this._readOnly || this.disabled;\n this._elements.toggle.setAttribute(\"tabindex\", !this._elements.toggle.disabled ? \"0\" : \"-1\");\n }\n\n /**\n Inherited from {@link BaseFormField#labelled}.\n */\n get labelled() {\n return super.labelled;\n }\n\n set labelled(value) {\n super.labelled = value;\n\n // in case the user focuses the buttons, he will still get a notion of the usage of the component\n this[this.labelled ? 'setAttribute' : 'removeAttribute']('aria-label', this.labelled);\n this._elements.overlay[this.labelled ? 'setAttribute' : 'removeAttribute']('aria-label', this.labelled);\n this._elements.calendar[this.labelled ? 'setAttribute' : 'removeAttribute']('labelled', this.labelled);\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n // in case the user focuses the buttons, he will still get a notion of the usage of the component\n this[this.labelledBy ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.labelledBy);\n this._elements.overlay[this.labelledBy ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.labelledBy);\n this._elements.calendar[this.labelledBy ? 'setAttribute' : 'removeAttribute']('aria-labelledby', this.labelledBy);\n }\n\n /**\n When true the component will default to the native input for the date selection. When\n {@link Coral.Datepicker.type.DATETIME} has been set, it will still use the Coral way because mobile browsers\n cannot handle a datetime input.\n\n @ignore\n */\n get _useNativeInput() {\n return this.__useNativeInput;\n }\n\n set _useNativeInput(value) {\n this.__useNativeInput = value;\n\n // we ignore _useNativeInput when the type is datetime because it is not supported by mobile libraries\n if (this.__useNativeInput && this.type !== type.DATETIME) {\n // Switch to native date/time picker:\n this._elements.toggle.hidden = true;\n this._elements.input.setAttribute('type', this.type);\n\n // Hide pop-over and remove related attributes:\n this._elements.overlay.hidden = true;\n this._elements.input.removeAttribute('role');\n this._elements.input.removeAttribute('aria-autocomplete');\n this._elements.input.removeAttribute('aria-haspopup');\n this._elements.input.removeAttribute('aria-expanded');\n this._elements.input.removeAttribute('aria-controls');\n } else {\n // Switch to Calendar picker\n this._elements.toggle.hidden = false;\n this._elements.input.setAttribute('type', 'text');\n\n // Show pop-over and add related attributes:\n this._elements.overlay.hidden = false;\n\n // Input attributes per ARIA Autocomplete\n this._elements.input.setAttribute('role', 'combobox');\n this._elements.input.setAttribute('aria-autocomplete', 'none');\n this._elements.input.setAttribute('aria-expanded', this._elements.overlay.open);\n this._elements.input.setAttribute('aria-controls', this._elements.overlay.id);\n\n // Trigger button attributes per ARIA Autocomplete\n this._elements.toggle.setAttribute('aria-haspopup', 'dialog');\n this._elements.toggle.setAttribute('aria-expanded', this._elements.overlay.open);\n this._elements.toggle.setAttribute('aria-controls', this._elements.overlay.id);\n }\n }\n\n /** @ignore */\n _onPopoverBeforeOpen() {\n this._elements.calendar._validateCalendar();\n this._renderCalendar();\n }\n\n /**\n Matches the accessibility to the state of the popover.\n\n @ignore\n */\n _onPopoverOpenOrClose(event) {\n // set focus to calendar grid\n if (this._elements.overlay.open) {\n if (this.type === type.TIME) {\n this._elements.clock.focus();\n } else {\n this._elements.calendar.focus();\n }\n this._elements.input.setAttribute('aria-expanded', 'true');\n this._elements.toggle.setAttribute('aria-expanded', 'true');\n this._trackEvent('open', 'coral-datepicker', event);\n } else {\n\n if(this._elements.hiddenInput.value) {\n this._elements.input.focus();\n } else {\n this._elements.toggle.focus();\n }\n\n this._elements.input.setAttribute('aria-expanded', 'false');\n this._elements.toggle.setAttribute('aria-expanded', 'false');\n this._trackEvent('close', 'coral-datepicker', event);\n }\n }\n\n /** @ignore */\n _onCalendarDayClick(event) {\n if (event.target.tagName === 'A') {\n // since a selection has been made, we close the popover. we cannot use the _onChange listener to handle this\n // because clicking on the same button will not trigger a change event\n this._elements.overlay.open = false;\n this._trackEvent('click', 'coral-datepicker', event);\n }\n }\n\n /** @ignore */\n _onInputChange(event) {\n // because we are reimplementing the form field mix in, we will have to stop the propagation and trigger the\n // 'change' event from here\n event.stopPropagation();\n\n this.value = new DateTime.Moment(event.target.value, this.displayFormat);\n this._validateValue();\n\n this.trigger('change');\n this._trackEvent('change', 'coral-datepicker', event);\n }\n\n /** @ignore */\n _onChange(event) {\n if (event.target.tagName === 'CORAL-CALENDAR' || event.target.tagName === 'CORAL-CLOCK') {\n event.stopPropagation();\n\n // we create the new value using both calendar and clock controls\n // datepicker should set the current time as default when no time is set, but a date was chosen (if in datetime\n // mode)\n this.value = this._mergeCalendarAndClockDates(true);\n this._validateValue();\n\n this.trigger('change');\n }\n }\n\n /** @private */\n _onAltDownKey(event) {\n // Stop any consequences of pressing the key\n event.preventDefault();\n\n if (!this._elements.overlay.open) {\n this._elements.overlay.open = true;\n }\n }\n\n /** @ignore */\n _validateValue() {\n // calendar validates only on user input, we have to manually force the validation\n this._elements.calendar._validateCalendar();\n\n // check if the current value is valid and update the internal state of the component\n if (this.type === type.DATE) {\n this.invalid = this._elements.calendar.invalid;\n } else if (this.type === type.TIME) {\n this.invalid = this._elements.clock.invalid;\n } else {\n this.invalid = this._elements.calendar.invalid || this._elements.clock.invalid;\n }\n }\n\n /** @ignore */\n _mergeCalendarAndClockDates(autoSetTimeIfNeeded) {\n let value = new DateTime.Moment(this._elements.calendar.valueAsDate);\n let time = this._elements.clock.valueAsDate;\n\n if (autoSetTimeIfNeeded && value && !time && this.type === type.DATETIME) {\n // datepicker should set the current time as default when no time is set, but a date was chosen (if in datetime\n // mode)\n time = new DateTime.Moment().toDate();\n }\n\n if (time) {\n if (!value.isValid()) {\n value = new DateTime.Moment();\n }\n\n value.hours(time.getHours());\n value.minutes(time.getMinutes());\n }\n\n return value;\n }\n\n /**\n Helper class that converts the internal moment value into a String using the provided date format. If the value is\n invalid, empty string will be returned.\n\n @param {?Moment} value\n The value representing the date. It has to be a moment object or null\n @param {String} format\n The Date format to be used.\n\n @ignore\n */\n _getValueAsString(value, format) {\n return value && value.isValid() ? value.format(format) : '';\n }\n\n /** @ignore */\n _renderCalendar() {\n if (this._elements.overlay.content.innerHTML === '') {\n this._elements.overlay.content.appendChild(this._calendarFragment);\n this._calendarFragment = undefined;\n }\n }\n\n /**\n Returns {@link Datepicker} variants.\n\n @return {DatepickerVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /**\n Returns {@link Datepicker} types.\n\n @return {DatepickerTypeEnum}\n */\n static get type() {\n return type;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n startday: 'startDay',\n headerformat: 'headerFormat',\n displayformat: 'displayFormat',\n valueformat: 'valueFormat'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'min',\n 'max',\n 'type',\n 'placeholder',\n 'startday',\n 'headerFormat',\n 'displayformat',\n 'valueformat',\n 'variant'\n ]);\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n const overlay = this._elements.overlay;\n // Cannot be open by default when rendered\n overlay.removeAttribute('open');\n // Restore in DOM\n if (overlay._parent) {\n overlay._parent.appendChild(overlay);\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n\n this.setAttribute('role', 'group');\n\n // Input attributes per ARIA Autocomplete\n this._elements.input.setAttribute('role', 'combobox');\n this._elements.input.setAttribute('aria-autocomplete', 'none');\n this._elements.input.setAttribute('aria-expanded', 'false');\n this._elements.input.setAttribute('aria-controls', this._elements.overlay.id);\n\n // Trigger button attributes per ARIA Autocomplete\n this._elements.toggle.setAttribute('aria-haspopup', 'dialog');\n this._elements.toggle.setAttribute('aria-expanded', 'false');\n this._elements.toggle.setAttribute('aria-controls', this._elements.overlay.id);\n\n // a11y we only have AUTO mode.\n this._useNativeInput = IS_MOBILE_DEVICE;\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n // \"type\" takes care of reflecting \"displayFormat\" and \"valueFormat\"\n if (!this._type) {\n this.type = type.DATE;\n }\n\n // clean up to be able to clone it\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n\n const frag = document.createDocumentFragment();\n\n // Render template\n frag.appendChild(this._elements.hiddenInput);\n frag.appendChild(this._elements.input);\n frag.appendChild(this._elements.toggle);\n frag.appendChild(this._elements.overlay);\n\n // Point at the button from the bottom\n this._elements.overlay.target = this._elements.toggle;\n\n this.appendChild(frag);\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n\n const overlay = this._elements.overlay;\n // In case it was moved out don't forget to remove it\n if (!this.contains(overlay)) {\n overlay._parent = overlay._repositioned ? document.body : this;\n overlay.remove();\n }\n }\n});\n\nexport default Datepicker;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1024, "kind": "typedef", "name": "DatepickerVariantEnum", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~DatepickerVariantEnum", "access": "public", "description": "Enum for {@link Datepicker} variant values.", "lineNumber": 36, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "A default, gray Datepicker." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "QUIET", "description": "A Datepicker with no border or background." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DatepickerVariantEnum" } }, { "__docId__": 1025, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 41, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1026, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 45, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 1027, "kind": "function", "name": "toMoment", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~toMoment", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 51, "ignore": true, "params": [ { "name": "value", "types": [ "*" ] }, { "name": "format", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1028, "kind": "typedef", "name": "DatepickerTypeEnum", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~DatepickerTypeEnum", "access": "public", "description": "Enumeration for {@link Datepicker} variants.", "lineNumber": 75, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DATE", "description": "The selection overlay contains only a calendar." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DATETIME", "description": "Provides both calendar and time controls in the selection overlay." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "TIME", "description": "The selection overlay provides only time controls." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DatepickerTypeEnum" } }, { "__docId__": 1029, "kind": "variable", "name": "IS_MOBILE_DEVICE", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~IS_MOBILE_DEVICE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 82, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1030, "kind": "variable", "name": "NATIVE_FORMATS", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~NATIVE_FORMATS", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 84, "undocument": true, "type": { "types": [ "{\"date\": string, \"datetime\": string, \"time\": string}" ] }, "ignore": true }, { "__docId__": 1031, "kind": "function", "name": "isNativeFormat", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~isNativeFormat", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 90, "undocument": true, "params": [ { "name": "format", "types": [ "*" ] } ], "return": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1032, "kind": "variable", "name": "Datepicker", "memberof": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js", "static": true, "longname": "coral-spectrum/coral-component-datepicker/src/scripts/Datepicker.js~Datepicker", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Datepicker}", "description": "A Datepicker component that can be used as a date and time selection form field. Leverages {@link momentJS}\nif loaded on the page.", "lineNumber": 109, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Datepicker" }, { "tagName": "@classdesc", "tagValue": "A Datepicker component that can be used as a date and time selection form field. Leverages {@link momentJS}\nif loaded on the page." }, { "tagName": "@htmltag", "tagValue": "coral-datepicker" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Datepicker();" ], "see": [ "../examples/#datepicker" ], "type": { "types": [ "*" ] } }, { "__docId__": 1033, "kind": "file", "name": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseOverlay} from '../../../coral-base-overlay';\nimport {DragAction} from '../../../coral-dragaction';\nimport {Icon} from '../../../coral-component-icon';\nimport '../../../coral-component-button';\nimport base from '../templates/base';\nimport {commons, transform, validate, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link Dialog} closable options.\n\n @typedef {Object} DialogClosableEnum\n\n @property {String} ON\n Show a close button on the dialog and close the dialog when clicked.\n @property {String} OFF\n Do not show a close button. Elements with the coral-close attribute will still close the dialog.\n */\nconst closable = {\n ON: 'on',\n OFF: 'off'\n};\n\nconst keyCodes = {\n UP: 38,\n DOWN: 40,\n LEFT: 37,\n RIGHT: 39,\n};\n\n/**\n Enumeration for {@link Dialog} keyboard interaction options.\n\n @typedef {Object} DialogInteractionEnum\n\n @property {String} ON\n Keyboard interaction is enabled.\n @property {String} OFF\n Keyboard interaction is disabled.\n */\nconst interaction = {\n ON: 'on',\n OFF: 'off'\n};\n\n/**\n Enumeration for {@link Dialog} variants.\n\n @typedef {Object} DialogVariantEnum\n\n @property {String} DEFAULT\n A default dialog without header icon.\n @property {String} ERROR\n A dialog with an error header and icon, indicating that an error has occurred.\n @property {String} WARNING\n A dialog with a warning header and icon, notifying the user of something important.\n @property {String} SUCCESS\n A dialog with a success header and icon, indicates to the user that an operation was successful.\n @property {String} HELP\n A dialog with a question header and icon, provides the user with help.\n @property {String} INFO\n A dialog with an info header and icon, informs the user of non-critical information.\n */\nconst variant = {\n DEFAULT: 'default',\n ERROR: 'error',\n WARNING: 'warning',\n SUCCESS: 'success',\n HELP: 'help',\n INFO: 'info'\n};\n\n/**\n Enumeration for {@link Dialog} backdrops.\n\n @typedef {Object} DialogBackdropEnum\n\n @property {String} NONE\n No backdrop.\n @property {String} MODAL\n A backdrop that hides the dialog when clicked.\n @property {String} STATIC\n A backdrop that does not hide the dialog when clicked.\n */\nconst backdrop = {\n NONE: 'none',\n MODAL: 'modal',\n STATIC: 'static'\n};\n\n// Used to map icon with variant\nconst capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);\n\n// The dialog's base classname\nconst CLASSNAME = '_coral-Dialog';\n// Modifier classnames\nconst FULLSCREEN_CLASSNAME = `${CLASSNAME}--fullscreenTakeover`;\n\n// A string of all possible variant classnames\nconst ALL_VARIANT_CLASSES = [];\nfor (const variantValue in variant) {\n ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);\n}\n\n/**\n @class Coral.Dialog\n @classdesc A Dialog component that supports various use cases with custom content. The Dialog can be given a size by\n using the special attribute [coral-dialog-size] as selector.\n @htmltag coral-dialog\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseOverlay}\n */\nconst Dialog = Decorator(class extends BaseOverlay(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Prepare templates\n this._elements = commons.extend(this._elements, {\n // Fetch or create the content zone elements\n header: this.querySelector('coral-dialog-header') || document.createElement('coral-dialog-header'),\n content: this.querySelector('coral-dialog-content') || document.createElement('coral-dialog-content'),\n footer: this.querySelector('coral-dialog-footer') || document.createElement('coral-dialog-footer')\n });\n base.call(this._elements, {i18n});\n\n // Events\n this._delegateEvents({\n 'coral-overlay:open': '_handleOpen',\n 'click [coral-close]': '_handleCloseClick',\n\n // Since we cover the backdrop with ourself for positioning purposes, this is implemented as a click listener\n // instead of using backdropClickedCallback\n 'click': '_handleClick',\n\n // Handle resize events\n 'global:resize': 'center',\n\n 'global:key:escape': '_handleEscape'\n });\n\n // Override defaults from Overlay\n this._trapFocus = this.constructor.trapFocus.ON;\n this._returnFocus = this.constructor.returnFocus.ON;\n this._overlayAnimationTime = this.constructor.FADETIME;\n\n // Listen for mutations\n this._headerObserver = new MutationObserver(this._hideHeaderIfEmpty.bind(this));\n\n // Watch for changes to the header element's children\n this._observeHeader();\n }\n\n /**\n Whether keyboard interaction is enabled. See {@link DialogInteractionEnum}.\n\n @type {DialogInteractionEnum}\n @default DialogInteractionEnum.ON\n */\n get interaction() {\n return this._interaction || interaction.ON;\n }\n\n set interaction(value) {\n value = transform.string(value).toLowerCase();\n this._interaction = validate.enumeration(interaction)(value) && value || interaction.ON;\n }\n\n /**\n The dialog header element.\n\n @type {DialogHeader}\n @contentzone\n */\n get header() {\n return this._getContentZone(this._elements.header);\n }\n\n set header(value) {\n this._setContentZone('header', value, {\n handle: 'header',\n tagName: 'coral-dialog-header',\n insert: function (header) {\n header.classList.add(`${CLASSNAME}-title`);\n // Position the header between the drag zone and the type icon\n this._elements.headerWrapper.insertBefore(header, this._elements.dragZone.nextElementSibling);\n },\n set: function () {\n // Stop observing the old header and observe the new one\n this._observeHeader();\n\n // Check if header needs to be hidden\n this._hideHeaderIfEmpty();\n }\n });\n }\n\n /**\n The dialog content element.\n\n @type {DialogContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-dialog-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}-content`);\n const footer = this.footer;\n // The content should always be before footer\n this._elements.wrapper.insertBefore(content, this.contains(footer) && footer || null);\n }\n });\n }\n\n /**\n The dialog footer element.\n\n @type {DialogFooter}\n @contentzone\n */\n get footer() {\n return this._getContentZone(this._elements.footer);\n }\n\n set footer(value) {\n this._setContentZone('footer', value, {\n handle: 'footer',\n tagName: 'coral-dialog-footer',\n insert: function (footer) {\n footer.classList.add(`${CLASSNAME}-footer`);\n // The footer should always be after content\n this._elements.wrapper.appendChild(footer);\n }\n });\n }\n\n /**\n The backdrop configuration for this dialog. See {@link DialogBackdropEnum}.\n\n @type {String}\n @default DialogBackdropEnum.MODAL\n @htmlattribute backdrop\n */\n get backdrop() {\n return this._backdrop || backdrop.MODAL;\n }\n\n set backdrop(value) {\n value = transform.string(value).toLowerCase();\n this._backdrop = validate.enumeration(backdrop)(value) && value || backdrop.MODAL;\n\n const showBackdrop = this._backdrop !== backdrop.NONE;\n this._elements.wrapper.classList.toggle(`${CLASSNAME}--noBackdrop`, !showBackdrop);\n\n // We're visible now, so hide or show the modal accordingly\n if (this.open && showBackdrop) {\n this._showBackdrop();\n }\n }\n\n /**\n The dialog's variant. See {@link DialogVariantEnum}.\n\n @type {String}\n @default DialogVariantEnum.DEFAULT\n @htmlattribute variant\n @htmlattributereflected\n */\n get variant() {\n return this._variant || variant.DEFAULT;\n }\n\n set variant(value) {\n value = transform.string(value).toLowerCase();\n this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;\n this._reflectAttribute('variant', this._variant);\n\n // Insert SVG icon\n this._insertTypeIcon();\n\n // Remove all variant classes\n this._elements.wrapper.classList.remove(...ALL_VARIANT_CLASSES);\n\n if (this._variant === variant.DEFAULT) {\n // ARIA\n this.setAttribute('role', 'dialog');\n } else {\n // Set new variant class\n this._elements.wrapper.classList.add(`${CLASSNAME}--${this._variant}`);\n\n // ARIA\n this.setAttribute('role', 'alertdialog');\n }\n\n const hasHeader = this.header && this.header.textContent !== '';\n\n // If the dialog has a header and is not otherwise labelled,\n if (hasHeader && !(this.hasAttribute('aria-labelledby') || this.hasAttribute('aria-label'))) {\n this.header.id = this.header.id || commons.getUID();\n\n // label the dialog with a reference to the header\n this.setAttribute('aria-labelledby', this.header.id);\n }\n\n // Provide the ARIA heading role to coral dialog header\n // depending on whether the header contains focusable elements\n if (hasHeader) {\n if (this.header.querySelector(commons.FOCUSABLE_ELEMENT_SELECTOR) !== null) {\n this.header.removeAttribute('role');\n this.header.removeAttribute('aria-level');\n } else if (!this.header.hasAttribute('role')) {\n this.header.setAttribute('role', 'heading');\n this.header.setAttribute('aria-level', '2');\n }\n }\n\n // If the dialog has no content, or the content is empty, do nothing further.\n if (!this.content || this.content.textContent === '') {\n return;\n }\n\n // If the dialog has a content,\n this.content.id = this.content.id || commons.getUID();\n\n // In an alertdialog with a content region, if the alertdialog is not otherwise described.\n if (this._variant !== variant.DEFAULT) {\n\n // with no header,\n if (!hasHeader) {\n\n // label the alertdialog with a reference to the content\n this.setAttribute('aria-labelledby', this.content.id);\n }\n\n // otherwise, if the alertdialog is not otherwise described,\n else if (!this.hasAttribute('aria-describedby')) {\n\n // ensure that the alertdialog is described by the content.\n this.setAttribute('aria-describedby', this.content.id);\n }\n } else if (this.getAttribute('aria-labelledby') === this.content.id) {\n this.removeAttribute('aria-labelledby');\n }\n }\n\n /**\n Whether the dialog should be displayed full screen (without borders or margin).\n\n @type {Boolean}\n @default false\n @htmlattribute fullscreen\n @htmlattributereflected\n */\n get fullscreen() {\n return this._fullscreen || false;\n }\n\n set fullscreen(value) {\n this._fullscreen = transform.booleanAttr(value);\n this._reflectAttribute('fullscreen', this._fullscreen);\n\n if (this._fullscreen) {\n // Full screen and movable are not compatible\n this.movable = false;\n this._elements.wrapper.classList.add(FULLSCREEN_CLASSNAME);\n } else {\n this._elements.wrapper.classList.remove(FULLSCREEN_CLASSNAME);\n }\n }\n\n /**\n Inherited from {@link BaseOverlay#open}.\n */\n get open() {\n return super.open;\n }\n\n set open(value) {\n super.open = value;\n\n // Ensure we're in the DOM\n if (this.open) {\n // If not child of document.body, we have to move it there\n this._moveToDocumentBody();\n\n // Show the backdrop, if necessary\n if (this.backdrop !== backdrop.NONE) {\n this._showBackdrop();\n }\n }\n\n // Support animation\n requestAnimationFrame(() => {\n // Support wrapped dialog\n this._elements.wrapper.classList.toggle('is-open', this.open);\n\n // Handles what to focus based on focusOnShow\n if (this.open) {\n commons.transitionEnd(this._elements.wrapper, () => {\n this._handleFocus();\n this._elements.closeButton.tabIndex = 0;\n this._elements.closeButton.removeAttribute('coral-tabcapture');\n });\n } else {\n this._elements.closeButton.tabIndex = -1;\n this._elements.closeButton.setAttribute('coral-tabcapture', '');\n }\n });\n }\n\n /**\n The dialog's icon.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n */\n get icon() {\n return this._elements.icon;\n }\n\n set icon(value) {\n this._elements.icon = value;\n }\n\n /**\n Whether the dialog should have a close button. See {@link DialogClosableEnum}.\n\n @type {String}\n @default DialogClosableEnum.OFF\n @htmlattribute closable\n @htmlattributereflected\n */\n get closable() {\n return this._closable || closable.OFF;\n }\n\n set closable(value) {\n value = transform.string(value).toLowerCase();\n this._closable = validate.enumeration(closable)(value) && value || closable.OFF;\n this._reflectAttribute('closable', this._closable);\n\n this._elements.wrapper.classList.toggle(`${CLASSNAME}--dismissible`, this._closable === closable.ON);\n }\n\n /**\n Whether the dialog can moved around by dragging the title.\n\n @type {Boolean}\n @default false\n @htmlattribute movable\n @htmlattributereflected\n */\n get movable() {\n return this._movable || false;\n }\n\n set movable(value) {\n this._movable = transform.booleanAttr(value);\n this._reflectAttribute('movable', this._movable);\n const wrapper = this;\n const header = this._elements.headerWrapper;\n\n // Movable and fullscreen are not compatible\n if (this._movable) {\n this.fullscreen = false;\n }\n\n if (this._movable) {\n const dragAction = new DragAction(this);\n dragAction.handle = this._elements.headerWrapper;\n\n if (header && wrapper) {\n if (!this.keyboardHandler) {\n this.keyboardHandler = (event) => {\n this.dialogKeyboardHandler(event, wrapper, header);\n };\n }\n\n // make sure the event is added when fullscreen is false\n commons.nextFrame(() => {\n if (!this.fullscreen) {\n commons.nextFrame(() => this.addKeyboardHandler(header, wrapper));\n }\n });\n }\n } else {\n // Disables any dragging interaction\n if (this.dragAction) {\n this.dragAction.destroy();\n }\n\n // Remove any previos added keyboard listener\n commons.nextFrame(() => {\n if (this.fullscreen) {\n this.removeKeyboardHandler(header);\n }\n });\n\n // Recenter the dialog once it's not movable anymore\n this.center();\n }\n }\n\n addKeyboardHandler(header, wrapper) {\n if (!header || !this._movable) return;\n\n header.setAttribute(\"tabindex\", 0);\n header.setAttribute(\"aria-label\", i18n.get(\"Move Dialog\"));\n \n if (!this.keyboardHandler) {\n this.keyboardHandler = (event) => {\n this.dialogKeyboardHandler(event, wrapper, header);\n };\n }\n\n header.addEventListener(\"keydown\", this.keyboardHandler);\n }\n\n removeKeyboardHandler(header) {\n if (header && this.keyboardHandler) {\n header.removeAttribute(\"tabindex\");\n header.removeAttribute(\"aria-label\");\n header.removeEventListener(\"keydown\", this.keyboardHandler);\n }\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n (this.header && this.header.textContent && this.header.textContent.replace(/\\s{2,}/g, ' ').trim() || '') :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /** @ignore */\n _observeHeader() {\n if (this._headerObserver) {\n this._headerObserver.disconnect();\n\n if (this._elements.header) {\n this._headerObserver.observe(this._elements.header, {\n // Catch changes to childList\n childList: true,\n // Catch changes to textContent\n characterData: true,\n // Monitor any child node\n subtree: true\n });\n }\n }\n }\n\n /**\n Hide the header wrapper if the header content zone is empty.\n @ignore\n */\n _hideHeaderIfEmpty() {\n const header = this._elements.header;\n\n if (header) {\n const headerWrapper = this._elements.headerWrapper;\n\n // If it's empty and has no non-textnode children, hide the header\n const hiddenValue = header.children.length === 0 && header.textContent.replace(/\\s*/g, '') === '';\n\n // Only bother if the hidden status has changed\n if (hiddenValue !== headerWrapper.hidden) {\n headerWrapper.hidden = hiddenValue;\n }\n\n this.variant = this.variant;\n }\n }\n\n _handleOpen(event) {\n this._trackEvent('display', 'coral-dialog', event);\n }\n\n /** @ignore */\n _handleEscape(event) {\n // When escape is pressed, hide ourselves\n if (this.interaction === interaction.ON && this.open && this._isTopOverlay()) {\n event.stopPropagation();\n this.open = false;\n }\n }\n\n /**\n @ignore\n @todo maybe this should be base or something\n */\n _handleCloseClick(event) {\n const dismissTarget = event.matchedTarget;\n const dismissValue = dismissTarget.getAttribute('coral-close');\n if (!dismissValue || this.matches(dismissValue)) {\n this.open = false;\n\n event.stopPropagation();\n\n this._trackEvent('close', 'coral-dialog', event);\n }\n }\n\n _handleClick(event) {\n // When we're modal, we close when our outer area (over the backdrop) is clicked\n if (event.target === this && this.backdrop === backdrop.MODAL && this._isTopOverlay()) {\n this.open = false;\n\n this._trackEvent('close', 'coral-dialog', event);\n }\n }\n\n /** @ignore */\n _moveToDocumentBody() {\n // Not in the DOM\n if (!document.body.contains(this)) {\n document.body.appendChild(this);\n }\n // In the DOM but not a direct child of body\n else if (this.parentNode !== document.body) {\n this._ignoreConnectedCallback = true;\n this._repositioned = true;\n document.body.appendChild(this);\n this._ignoreConnectedCallback = false;\n }\n }\n\n _insertTypeIcon() {\n if (this._elements.icon) {\n this._elements.icon.remove();\n }\n\n let variantValue = this.variant;\n\n // Warning icon is same as ERROR icon\n if (variantValue === variant.WARNING || variantValue === variant.ERROR) {\n variantValue = 'alert';\n }\n\n // Inject the SVG icon\n if (variantValue !== variant.DEFAULT) {\n const iconName = capitalize(variantValue);\n this._elements.headerWrapper.insertAdjacentHTML('beforeend', Icon._renderSVG(`spectrum-css-icon-${iconName}Medium`, ['_coral-Dialog-typeIcon', `_coral-UIIcon-${iconName}Medium`]));\n this._elements.icon = this._elements.headerWrapper.querySelector('._coral-Dialog-typeIcon');\n }\n }\n\n /** @ignore */\n backdropClickedCallback() {\n // When we're modal, we close when the backdrop is clicked\n if (this.backdrop === backdrop.MODAL && this._isTopOverlay()) {\n this.open = false;\n }\n }\n\n /**\n Centers the dialog in the middle of the screen.\n\n @returns {Dialog} this, chainable.\n */\n center() {\n // We're already centered in fullscreen mode\n if (this.fullscreen) {\n return;\n }\n\n // If moved we reset the position\n this.style.top = '';\n this.style.left = '';\n\n return this;\n }\n\n dialogKeyboardHandler (event, dialog, header) {\n if (document.activeElement !== header) {\n return;\n }\n\n let currentTop = parseInt(dialog.style.top) || 0;\n let currentLeft = parseInt(dialog.style.left) || 0;\n var step = 10;\n\n switch (event.keyCode) {\n case keyCodes.UP:\n dialog.style.top = (currentTop - step) + 'px';\n break;\n\n case keyCodes.DOWN:\n dialog.style.top = (currentTop + step) + 'px';\n break;\n\n case keyCodes.LEFT:\n dialog.style.left = (currentLeft - step) + 'px';\n break;\n\n case keyCodes.RIGHT:\n dialog.style.left = (currentLeft + step) + 'px';\n break;\n }\n }\n\n get _contentZones() {\n return {\n 'coral-dialog-header': 'header',\n 'coral-dialog-content': 'content',\n 'coral-dialog-footer': 'footer'\n };\n }\n\n /**\n Returns {@link Dialog} variants.\n\n @return {DialogVariantEnum}\n */\n static get variant() {\n return variant;\n }\n\n /**\n Returns {@link Dialog} backdrops.\n\n @return {DialogBackdropEnum}\n */\n static get backdrop() {\n return backdrop;\n }\n\n /**\n Returns {@link Dialog} close options.\n\n @return {DialogClosableEnum}\n */\n static get closable() {\n return closable;\n }\n\n /**\n Returns {@link Dialog} interaction options.\n\n @return {DialogInteractionEnum}\n */\n static get interaction() {\n return interaction;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'interaction',\n 'backdrop',\n 'variant',\n 'fullscreen',\n 'icon',\n 'closable',\n 'movable'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(`${CLASSNAME}-wrapper`);\n this.setAttribute(\"aria-modal\", true);\n\n // Default reflected attributes\n if (!this._variant) {\n this.variant = variant.DEFAULT;\n }\n if (!this._backdrop) {\n this.backdrop = backdrop.MODAL;\n }\n if (!this._closable) {\n this.closable = closable.OFF;\n }\n if (!this._interaction) {\n this.interaction = interaction.ON;\n }\n\n // Fetch the content zones\n const header = this._elements.header;\n const content = this._elements.content;\n const footer = this._elements.footer;\n\n // Verify if a content zone is provided\n const contentZoneProvided = this.contains(content) && content || this.contains(footer) && footer || this.contains(header) && header;\n\n // Verify if the internal wrapper exists\n let wrapper = this.querySelector(`.${CLASSNAME}`);\n\n // Case where the dialog was rendered already - cloneNode support\n if (wrapper) {\n // Remove tab captures\n Array.prototype.filter.call(this.children, (child) => child.hasAttribute('coral-tabcapture')).forEach((tabCapture) => {\n this.removeChild(tabCapture);\n });\n\n // Assign internal elements\n this._elements.headerWrapper = this.querySelector('._coral-Dialog-header');\n this._elements.closeButton = this.querySelector('._coral-Dialog-closeButton');\n\n this._elements.wrapper = wrapper;\n }\n // Case where the dialog needs to be rendered\n else {\n // Create default wrapper\n wrapper = this._elements.wrapper;\n\n // Create default header wrapper\n const headerWrapper = this._elements.headerWrapper;\n\n // Case where the dialog needs to be rendered and content zones are provided\n if (contentZoneProvided) {\n // Check if user wrapper is provided\n if (contentZoneProvided.parentNode === this) {\n // Content zone target defaults to default wrapper if no user wrapper element is provided\n this._elements.wrapper = wrapper;\n } else {\n // Content zone target defaults to user wrapper element if provided\n this._elements.wrapper = contentZoneProvided.parentNode;\n }\n\n // Move everything in the wrapper\n while (this.firstChild) {\n wrapper.appendChild(this.firstChild);\n }\n\n // Add the dialog header before the content\n if(this._elements.wrapper.contains(content)) {\n this._elements.wrapper.insertBefore(headerWrapper, content);\n } else {\n // try adding in next frame\n // so that content is a child of dialog wrapper\n commons.nextFrame(() => {\n this._elements.wrapper.insertBefore(headerWrapper, content);\n });\n }\n }\n // Case where the dialog needs to be rendered and content zones need to be created\n else {\n // Default content zone target is wrapper\n this._elements.wrapper = wrapper;\n\n // Move everything in the \"content\" content zone\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n\n // Add the content zones in the wrapper\n wrapper.appendChild(headerWrapper);\n wrapper.appendChild(content);\n wrapper.appendChild(footer);\n }\n\n // Add the wrapper to the dialog\n this.appendChild(wrapper);\n }\n\n // Only the wrapper gets the dialog class\n this._elements.wrapper.classList.add(CLASSNAME);\n // Mark the dialog with a public attribute for sizing\n this._elements.wrapper.setAttribute('coral-dialog-size', '');\n // Close button should stay under the dialog\n this._elements.wrapper.appendChild(this._elements.closeButton);\n\n // Copy styles over to new wrapper\n if (this._elements.wrapper.parentNode !== this) {\n const contentWrapper = this.querySelector('[handle=\"wrapper\"]');\n Array.prototype.forEach.call(contentWrapper.classList, style => this._elements.wrapper.classList.add(style));\n contentWrapper.removeAttribute('class');\n }\n\n // Assign content zones\n this.header = header;\n this.footer = footer;\n this.content = content;\n }\n});\n\nexport default Dialog;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1034, "kind": "typedef", "name": "DialogClosableEnum", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~DialogClosableEnum", "access": "public", "description": "Enumeration for {@link Dialog} closable options.", "lineNumber": 32, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Show a close button on the dialog and close the dialog when clicked." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Do not show a close button. Elements with the coral-close attribute will still close the dialog." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DialogClosableEnum" } }, { "__docId__": 1035, "kind": "variable", "name": "keyCodes", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~keyCodes", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 37, "undocument": true, "type": { "types": [ "{\"UP\": number, \"DOWN\": number, \"LEFT\": number, \"RIGHT\": number}" ] }, "ignore": true }, { "__docId__": 1036, "kind": "typedef", "name": "DialogInteractionEnum", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~DialogInteractionEnum", "access": "public", "description": "Enumeration for {@link Dialog} keyboard interaction options.", "lineNumber": 54, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Keyboard interaction is enabled." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "Keyboard interaction is disabled." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DialogInteractionEnum" } }, { "__docId__": 1037, "kind": "typedef", "name": "DialogVariantEnum", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~DialogVariantEnum", "access": "public", "description": "Enumeration for {@link Dialog} variants.", "lineNumber": 77, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DEFAULT", "description": "A default dialog without header icon." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ERROR", "description": "A dialog with an error header and icon, indicating that an error has occurred." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "WARNING", "description": "A dialog with a warning header and icon, notifying the user of something important." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SUCCESS", "description": "A dialog with a success header and icon, indicates to the user that an operation was successful." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "HELP", "description": "A dialog with a question header and icon, provides the user with help." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "INFO", "description": "A dialog with an info header and icon, informs the user of non-critical information." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DialogVariantEnum" } }, { "__docId__": 1038, "kind": "typedef", "name": "DialogBackdropEnum", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~DialogBackdropEnum", "access": "public", "description": "Enumeration for {@link Dialog} backdrops.", "lineNumber": 98, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "NONE", "description": "No backdrop." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MODAL", "description": "A backdrop that hides the dialog when clicked." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "STATIC", "description": "A backdrop that does not hide the dialog when clicked." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DialogBackdropEnum" } }, { "__docId__": 1039, "kind": "function", "name": "capitalize", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~capitalize", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 105, "undocument": true, "params": [ { "name": "s", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1040, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 108, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1041, "kind": "variable", "name": "FULLSCREEN_CLASSNAME", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~FULLSCREEN_CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 110, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1042, "kind": "variable", "name": "ALL_VARIANT_CLASSES", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~ALL_VARIANT_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 113, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 1043, "kind": "variable", "name": "Dialog", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js", "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/Dialog.js~Dialog", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Dialog}", "description": "A Dialog component that supports various use cases with custom content. The Dialog can be given a size by\nusing the special attribute [coral-dialog-size] as selector.", "lineNumber": 127, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Dialog" }, { "tagName": "@classdesc", "tagValue": "A Dialog component that supports various use cases with custom content. The Dialog can be given a size by\nusing the special attribute [coral-dialog-size] as selector." }, { "tagName": "@htmltag", "tagValue": "coral-dialog" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseOverlay}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Dialog();" ], "see": [ "../examples/#dialog" ], "type": { "types": [ "*" ] } }, { "__docId__": 1044, "kind": "file", "name": "coral-spectrum/coral-component-dialog/src/scripts/DialogContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Dialog.Content\n @classdesc The Dialog default content\n @htmltag coral-dialog-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-dialog-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-dialog/src/scripts/DialogContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1045, "kind": "function", "name": "DialogContent", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/DialogContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/DialogContent.js~DialogContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Dialog}", "description": "The Dialog default content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Dialog.Content" }, { "tagName": "@classdesc", "tagValue": "The Dialog default content" }, { "tagName": "@htmltag", "tagValue": "coral-dialog-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Dialog.Content();" ], "see": [ "../examples/#dialog" ], "params": [] }, { "__docId__": 1046, "kind": "file", "name": "coral-spectrum/coral-component-dialog/src/scripts/DialogFooter.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Dialog.Footer\n @classdesc The Dialog footer content\n @htmltag coral-dialog-footer\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-dialog-footer');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-dialog/src/scripts/DialogFooter.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1047, "kind": "function", "name": "DialogFooter", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/DialogFooter.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/DialogFooter.js~DialogFooter", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Dialog}", "description": "The Dialog footer content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Dialog.Footer" }, { "tagName": "@classdesc", "tagValue": "The Dialog footer content" }, { "tagName": "@htmltag", "tagValue": "coral-dialog-footer" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Dialog.Footer();" ], "see": [ "../examples/#dialog" ], "params": [] }, { "__docId__": 1048, "kind": "file", "name": "coral-spectrum/coral-component-dialog/src/scripts/DialogHeader.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Dialog.Header\n @classdesc The Dialog header content\n @htmltag coral-dialog-header\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-dialog-header');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-dialog/src/scripts/DialogHeader.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1049, "kind": "function", "name": "DialogHeader", "memberof": "coral-spectrum/coral-component-dialog/src/scripts/DialogHeader.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-dialog/src/scripts/DialogHeader.js~DialogHeader", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Dialog}", "description": "The Dialog header content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Dialog.Header" }, { "tagName": "@classdesc", "tagValue": "The Dialog header content" }, { "tagName": "@htmltag", "tagValue": "coral-dialog-header" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Dialog.Header();" ], "see": [ "../examples/#dialog" ], "params": [] }, { "__docId__": 1050, "kind": "file", "name": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport '../../../coral-component-button';\nimport base from '../templates/base';\nimport {commons, transform, validate, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n Enumeration for {@link Drawer} directions.\n\n @typedef {Object} DrawerDirectionEnum\n\n @property {String} DOWN\n A drawer with a toggle button on the bottom.\n @property {String} UP\n A drawer with a toggle button on top.\n */\nconst direction = {\n DOWN: 'down',\n UP: 'up'\n};\n\n// The drawer's base classname\nconst CLASSNAME = '_coral-Drawer';\n\n// A string of all possible direction classnames\nconst ALL_DIRECTION_CLASSES = [];\nfor (const directionValue in direction) {\n ALL_DIRECTION_CLASSES.push(`${CLASSNAME}--${direction[directionValue]}`);\n}\n\n/**\n @class Coral.Drawer\n @classdesc A Drawer component to display content that can be opened and closed with a sliding animation.\n @htmltag coral-drawer\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Drawer = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {\n content: this.querySelector('coral-drawer-content') || document.createElement('coral-drawer-content')\n };\n base.call(this._elements, {commons, i18n});\n\n // Events\n this._delegateEvents({\n 'click ._coral-Drawer-toggleButton': '_onClick'\n });\n }\n\n /**\n Whether this item is disabled or not. This will stop every user interaction with the item.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n this._elements.toggle.hidden = this._disabled;\n }\n\n /**\n The drawer's content element.\n\n @type {DrawerContent}\n @htmlttribute content\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-drawer-content',\n insert: function (content) {\n this._elements.contentWrapper.appendChild(content);\n }\n });\n }\n\n /**\n The drawer's direction. See {@link DrawerDirectionEnum}.\n\n @type {String}\n @default DrawerDirectionEnum.DOWN\n @htmlattribute direction\n @htmlattributereflected\n */\n get direction() {\n return this._direction || direction.DOWN;\n }\n\n set direction(value) {\n value = transform.string(value).toLowerCase();\n this._direction = validate.enumeration(direction)(value) && value || direction.DOWN;\n this._reflectAttribute('direction', this._direction);\n\n this.classList.remove(...ALL_DIRECTION_CLASSES);\n this.classList.add(`${CLASSNAME}--${this._direction}`);\n }\n\n /**\n Whether the Drawer is expanded or not.\n\n @type {Boolean}\n @default false\n @htmlattribute open\n @htmlattributereflected\n */\n get open() {\n return this._open || false;\n }\n\n set open(value) {\n const silenced = this._silenced;\n\n this._open = transform.booleanAttr(value);\n this._reflectAttribute('open', this._open);\n\n this._elements.toggleButton.setAttribute('aria-expanded', this._open);\n\n // eslint-disable-next-line no-unused-vars\n let offsetHeight;\n\n // Handle slider animation\n const slider = this._elements.slider;\n\n // Don't animate on initialization\n if (this._animate) {\n commons.transitionEnd(slider, () => {\n // Keep it silenced\n this._silenced = silenced;\n\n // Remove height as we want the drawer to naturally grow if content is added later\n if (this._open) {\n slider.style.height = '';\n }\n\n // Trigger once transition is finished\n this.trigger(`coral-drawer:${(this._open ? 'open' : 'close')}`);\n this._silenced = false;\n });\n\n if (!this._open) {\n // Force height to enable transition\n slider.style.height = `${slider.scrollHeight}px`;\n }\n\n // Do transition in next task as browser might batch up the height property change before painting\n window.setTimeout(() => {\n slider.style.height = this._open ? `${slider.scrollHeight}px` : 0;\n }, 10);\n } else {\n // Make sure it's animated next time\n this._animate = true;\n\n // Hide it on initialization if closed\n if (!this._open) {\n slider.style.height = 0;\n }\n }\n }\n\n /** @private */\n _onClick() {\n this.open = !this.open;\n }\n\n get _contentZones() {\n return {'coral-drawer-content': 'content'};\n }\n\n /**\n Returns {@link Drawer} direction options.\n\n @return {DrawerDirectionEnum}\n */\n static get direction() {\n return direction;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'disabled',\n 'direction',\n 'open'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME, 'coral-Well');\n\n // Default reflected attributes\n if (!this._direction) {\n this.direction = direction.DOWN;\n }\n if (!this._open) {\n this.open = false;\n }\n\n // Create a fragment\n const fragment = document.createDocumentFragment();\n\n const templateHandleNames = ['slider', 'toggle'];\n\n // Render the template\n fragment.appendChild(this._elements.slider);\n fragment.appendChild(this._elements.toggle);\n\n // Fetch or create the content content zone element\n const content = this._elements.content;\n\n // Move any remaining elements into the content sub-component\n while (this.firstChild) {\n const child = this.firstChild;\n if (child.nodeType === Node.TEXT_NODE ||\n child.nodeType === Node.ELEMENT_NODE && templateHandleNames.indexOf(child.getAttribute('handle')) === -1) {\n // Add non-template elements to the label\n content.appendChild(child);\n } else {\n // Remove anything else\n this.removeChild(child);\n }\n }\n\n // Add the frag to the component\n this.appendChild(fragment);\n\n // Assign the content zone\n this.content = content;\n }\n\n /**\n Triggered when the {@link Drawer} is opened.\n\n @typedef {CustomEvent} coral-drawer:open\n */\n\n /**\n Triggered when the {@link Drawer} is closed.\n\n @typedef {CustomEvent} coral-drawer:close\n */\n});\n\nexport default Drawer;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1051, "kind": "typedef", "name": "DrawerDirectionEnum", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~DrawerDirectionEnum", "access": "public", "description": "Enumeration for {@link Drawer} directions.", "lineNumber": 29, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DOWN", "description": "A drawer with a toggle button on the bottom." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "UP", "description": "A drawer with a toggle button on top." } ], "type": { "types": [ "Object" ], "optional": false, "name": "DrawerDirectionEnum" } }, { "__docId__": 1052, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 35, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1053, "kind": "variable", "name": "ALL_DIRECTION_CLASSES", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~ALL_DIRECTION_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 38, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 1054, "kind": "variable", "name": "Drawer", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~Drawer", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Drawer}", "description": "A Drawer component to display content that can be opened and closed with a sliding animation.", "lineNumber": 50, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Drawer" }, { "tagName": "@classdesc", "tagValue": "A Drawer component to display content that can be opened and closed with a sliding animation." }, { "tagName": "@htmltag", "tagValue": "coral-drawer" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Drawer();" ], "see": [ "../examples/#drawer" ], "type": { "types": [ "*" ] } }, { "__docId__": 1055, "kind": "typedef", "name": "coral-drawer:open", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~coral-drawer:open", "access": "public", "description": "Triggered when the {@link Drawer} is opened.", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-drawer:open" } }, { "__docId__": 1056, "kind": "typedef", "name": "coral-drawer:close", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js", "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/Drawer.js~coral-drawer:close", "access": "public", "description": "Triggered when the {@link Drawer} is closed.", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-drawer:close" } }, { "__docId__": 1057, "kind": "file", "name": "coral-spectrum/coral-component-drawer/src/scripts/DrawerContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.Drawer.Content\n @classdesc Drawer content component\n @htmltag coral-drawer-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-drawer-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-drawer/src/scripts/DrawerContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1058, "kind": "function", "name": "DrawerContent", "memberof": "coral-spectrum/coral-component-drawer/src/scripts/DrawerContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-drawer/src/scripts/DrawerContent.js~DrawerContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Drawer}", "description": "Drawer content component", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Drawer.Content" }, { "tagName": "@classdesc", "tagValue": "Drawer content component" }, { "tagName": "@htmltag", "tagValue": "coral-drawer-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.Drawer.Content();" ], "see": [ "../examples/#drawer" ], "params": [] }, { "__docId__": 1059, "kind": "file", "name": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseFormField} from '../../../coral-base-formfield';\nimport FileUploadItem from './FileUploadItem';\nimport base from '../templates/base';\nimport {transform, commons, validate} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-FileUpload';\n\nconst XHR_EVENT_NAMES = ['loadstart', 'progress', 'load', 'error', 'loadend', 'readystatechange', 'abort', 'timeout'];\n\n/**\n Enumeration for {@link FileUpload} HTTP methods that can be used to upload files.\n\n @typedef {Object} FileUploadMethodEnum\n\n @property {String} POST\n Send a POST request. Used when creating a resource.\n @property {String} PUT\n Send a PUT request. Used when replacing a resource.\n @property {String} PATCH\n Send a PATCH request. Used when partially updating a resource.\n */\nconst method = {\n POST: 'POST',\n PUT: 'PUT',\n PATCH: 'PATCH'\n};\n\n/**\n @class Coral.FileUpload\n @classdesc A FileUpload component that manages the upload process of multiple files. Child elements of FileUpload can\n be given special attributes to enable functionality:\n - [coral-fileupload-select]. Click to choose file(s), replacing existing files.\n - [coral-fileupload-dropzone]. Drag and drop files to choose file(s), replacing existing files.\n - [coral-fileupload-clear]. Click to remove all files from the queue.\n - [coral-fileupload-submit]. Click to start uploading.\n - [coral-fileupload-abort]. Click to abort all uploads.\n - [coral-fileupload-abortfile=\"filename.txt\"]. Click to abort a specific file, leaving it in the queue.\n - [coral-fileupload-removefile=\"filename.txt\"]. Click to remove a specific file from the queue.\n - [coral-fileupload-uploadfile=\"filename.txt\"]. Click to start uploading a specific file.\n\n @htmltag coral-fileupload\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseFormField}\n */\nconst FileUpload = Decorator(class extends BaseFormField(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n // Clickable hooks\n 'click [coral-fileupload-submit]': '_onSubmitButtonClick',\n 'click [coral-fileupload-clear]': 'clear',\n 'click [coral-fileupload-select]': '_showFileDialog',\n 'click [coral-fileupload-abort]': 'abort',\n 'click [coral-fileupload-abortfile]': '_onAbortFileClick',\n 'click [coral-fileupload-removefile]': '_onRemoveFileClick',\n 'click [coral-fileupload-uploadfile]': '_onUploadFileClick',\n\n // Drag & Drop zones\n 'dragenter [coral-fileupload-dropzone]': '_onDragAndDrop',\n 'dragover [coral-fileupload-dropzone]': '_onDragAndDrop',\n 'dragleave [handle=\"input\"]': '_onDragAndDrop',\n 'drop [handle=\"input\"]': '_onDragAndDrop',\n\n // Accessibility\n 'capture:focus [coral-fileupload-select]': '_onButtonFocusIn',\n 'capture:focus [handle=\"input\"]': '_onInputFocusIn',\n 'capture:blur [handle=\"input\"]': '_onInputFocusOut'\n }));\n\n // Prepare templates\n this._elements = {};\n base.call(this._elements, {commons});\n\n // Pre-define labellable element\n this._labellableElement = this._elements.input;\n\n // Used for items\n this._uploadQueue = [];\n\n // this should refer to the fileupload\n this._doAddDragClass = this._doAddDragClass.bind(this);\n this._doRemoveDragClass = this._doRemoveDragClass.bind(this);\n this._positionInputOnDropZone = this._positionInputOnDropZone.bind(this);\n\n // Reposition the input under the specified dropzone\n this._observer = new MutationObserver(this._positionInputOnDropZone);\n this._observer.observe(this, {\n childList: true,\n attributes: true,\n attributeFilter: ['coral-fileupload-dropzone'],\n subtree: true\n });\n }\n\n /**\n Name used to submit the data in a form.\n @type {String}\n @default \"\"\n @htmlattribute name\n @htmlattributereflected\n */\n get name() {\n return this._elements.input.name;\n }\n\n set name(value) {\n this._reflectAttribute('name', value);\n\n this._elements.input.name = value;\n }\n\n /**\n This field's current value.\n @type {String}\n @default \"\"\n @htmlattribute value\n */\n get value() {\n const item = this._uploadQueue ? this._getQueueItem(0) : null;\n\n // The first selected filename, or the empty string if no files are selected.\n return item ? `C:\\\\fakepath\\\\${item.file.name}` : '';\n }\n\n set value(value) {\n if (value === '' || value === null) {\n this._clearQueue();\n this._clearFileInputValue();\n } else {\n // Throws exception if value is different than an empty string or null\n throw new Error('Coral.FileUpload accepts a filename, which may only be programmatically set to empty string.');\n }\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._elements.input.disabled;\n }\n\n set disabled(value) {\n this._elements.input.disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this.disabled);\n\n this.classList.toggle('is-disabled', this.disabled);\n this._setElementState();\n }\n\n /**\n Inherited from {@link BaseFormField#invalid}.\n */\n get invalid() {\n return super.invalid;\n }\n\n set invalid(value) {\n super.invalid = value;\n\n this._elements.input.setAttribute('aria-invalid', this.invalid);\n this._setElementState();\n }\n\n /**\n Whether this field is required or not.\n @type {Boolean}\n @default false\n @htmlattribute required\n @htmlattributereflected\n */\n get required() {\n return this._elements.input.required;\n }\n\n set required(value) {\n this._elements.input.required = transform.booleanAttr(value);\n this._reflectAttribute('required', this.required);\n\n this.classList.toggle('is-required', this.required);\n this._setElementState();\n }\n\n /**\n Whether this field is readOnly or not. Indicating that the user cannot modify the value of the control.\n @type {Boolean}\n @default false\n @htmlattribute readonly\n @htmlattributereflected\n */\n get readOnly() {\n return this._readOnly || false;\n }\n\n set readOnly(value) {\n this._readOnly = transform.booleanAttr(value);\n this._reflectAttribute('readonly', this._readOnly);\n\n this._setElementState();\n }\n\n /**\n The names of the currently selected files.\n When {@link Coral.FileUpload#multiple} is false, this will be an array of length 1.\n\n @type {Array.}\n */\n get values() {\n let values = this._uploadQueue.map((item) => `C:\\\\fakepath\\\\${item.file.name}`);\n\n if (values.length && !this.multiple) {\n values = [values[0]];\n }\n\n return values;\n }\n\n set values(values) {\n if (Array.isArray(values)) {\n if (values.length) {\n this.value = values[0];\n } else {\n this.value = '';\n }\n }\n }\n\n /**\n Inherited from {@link BaseFormField#labelledBy}.\n */\n get labelledBy() {\n return super.labelledBy;\n }\n\n set labelledBy(value) {\n super.labelledBy = value;\n\n // The specified labelledBy property.\n const labelledBy = this.labelledBy;\n\n // An array of element ids to label control, the last being the select button element id.\n const ids = [];\n\n const button = this.querySelector('[coral-fileupload-select]');\n\n if (button) {\n ids.push(button.id);\n }\n\n // If a labelledBy property exists,\n if (labelledBy) {\n // prepend the labelledBy value to the ids array\n ids.unshift(labelledBy);\n }\n\n // Set aria-labelledby attribute on the labellable element joining ids array into space-delimited list of ids.\n this._elements.input.setAttribute('aria-labelledby', ids.join(' '));\n\n if (labelledBy) {\n // Set label for attribute\n const labelElement = document.getElementById(labelledBy);\n if (labelElement && labelElement.tagName === 'LABEL') {\n labelElement.setAttribute('for', this._elements.input.id);\n this._labelElement = labelElement;\n }\n }\n // Remove label for attribute\n else if (this._labelElement) {\n this._labelElement.removeAttribute('for');\n }\n }\n\n /**\n Array of additional parameters as key:value to send in addition of files.\n A parameter must contain a name key:value and optionally a value key:value.\n\n @type {Array.}\n @default []\n */\n get parameters() {\n return this._parameters || [];\n }\n\n set parameters(values) {\n // Verify that every item has a name\n const isValid = Array.isArray(values) && values.every((el) => el && el.name);\n\n if (isValid) {\n this._parameters = values;\n\n if (!this.async) {\n Array.prototype.forEach.call(this.querySelectorAll('input[type=\"hidden\"]'), (input) => {\n input.parentNode.removeChild(input);\n });\n\n // Add extra parameters\n this.parameters.forEach((param) => {\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = param.name;\n input.value = param.value;\n\n this.appendChild(input);\n });\n }\n }\n }\n\n /**\n Whether files should be uploaded asynchronously via XHR or synchronously e.g. within a\n <form> tag. One option excludes the other. Setting a new async value removes all\n files from the queue.\n\n @type {Boolean}\n @default false\n @htmlattribute async\n @htmlattributereflected\n */\n get async() {\n return this._async || false;\n }\n\n set async(value) {\n this._async = transform.booleanAttr(value);\n this._reflectAttribute('async', this._async);\n\n // Sync extra parameters in case of form submission\n if (!this._async) {\n this.parameters = this.parameters;\n }\n\n // Clear file selection\n if (this._uploadQueue) {\n this._clearQueue();\n this._clearFileInputValue();\n }\n }\n\n /**\n The URL where the upload request should be sent. When used within a <form> tag to upload\n synchronously, the action of the form is used. If an element is clicked that has a\n [coral-fileupload-submit] attribute as well as a [formaction] attribute, the action of\n the clicked element will be used. Set this property before calling {@link Coral.FileUpload#upload} to reset the\n action set by a click.\n\n @type {String}\n @default \"\"\n @htmlattribute action\n @htmlattributereflected\n */\n get action() {\n return this._action || '';\n }\n\n set action(value) {\n this._action = transform.string(value);\n this._reflectAttribute('action', this._action);\n\n // Reset button action as action was set explicitly\n this._buttonAction = null;\n }\n\n /**\n The HTTP method to use when uploading files asynchronously. When used within a <form> tag to\n upload synchronously, the method of the form is used. If an element is clicked that has a\n [coral-fileupload-submit] attribute as well as a [formmethod] attribute, the method of\n the clicked element will be used. Set this property before calling {@link FileUpload#upload} to reset the\n method set by a click.\n See {@link FileUploadMethodEnum}.\n\n @type {String}\n @default FileUploadMethodEnum.POST\n @htmlattribute method\n @htmlattributereflected\n */\n get method() {\n return this._method || method.POST;\n }\n\n set method(value) {\n value = transform.string(value).toUpperCase();\n this._method = validate.enumeration(method)(value) && value || method.POST;\n this._reflectAttribute('method', this._method);\n\n // Reset button method as method was set explcitly\n this._buttonMethod = null;\n }\n\n /**\n Whether more than one file can be chosen at the same time to upload.\n\n @type {Boolean}\n @default false\n @htmlattribute multiple\n @htmlattributereflected\n */\n get multiple() {\n return this._elements.input.multiple;\n }\n\n set multiple(value) {\n this._elements.input.multiple = transform.booleanAttr(value);\n this._reflectAttribute('multiple', this.multiple);\n }\n\n /**\n File size limit in bytes for one file. The value of 0 indicates unlimited, which is also the default.\n\n @type {Number}\n @htmlattribute sizelimit\n @htmlattributereflected\n @default 0\n */\n get sizeLimit() {\n return this._sizeLimit || 0;\n }\n\n set sizeLimit(value) {\n this._sizeLimit = transform.number(value);\n this._reflectAttribute('sizelimit', this._sizeLimit);\n }\n\n /**\n MIME types allowed for uploading (proper MIME types, wildcard '*' and file extensions are supported). To specify\n more than one value, separate the values with a comma (e.g.\n <input accept=\"audio/*,video/*,image/*\" />.\n\n @type {String}\n @default \"\"\n @htmlattribute accept\n @htmlattributereflected\n */\n get accept() {\n return this._elements.input.accept;\n }\n\n set accept(value) {\n this._elements.input.accept = value;\n this._reflectAttribute('accept', this.accept);\n }\n\n /**\n Whether the upload should start immediately after file selection.\n\n @type {Boolean}\n @default false\n @htmlattribute autostart\n @htmlattributereflected\n */\n get autoStart() {\n return this._autoStart || false;\n }\n\n set autoStart(value) {\n this._autoStart = transform.booleanAttr(value);\n this._reflectAttribute('autostart', this._autoStart);\n }\n\n /**\n Files to be uploaded.\n\n @readonly\n @default []\n @type {Array.}\n */\n get uploadQueue() {\n return this._uploadQueue;\n }\n\n /** @private */\n _onButtonFocusIn(event) {\n // Get the input\n const input = this._elements.input;\n\n // Get the button\n const button = event.matchedTarget;\n\n // Move the input to after the button\n // This lets the next focused item be the correct one according to tab order\n button.parentNode.insertBefore(input, button.nextElementSibling);\n\n if (event.relatedTarget !== input) {\n // Make sure the input gets focused on FF\n window.setTimeout(() => {\n input.focus();\n }, 100);\n }\n }\n\n /** @private */\n _onInputFocusIn() {\n // Get the input\n const input = event.matchedTarget;\n\n const button = this.querySelector('[coral-fileupload-select]');\n if (button) {\n // Remove from the tab order so shift+tab works\n button.tabIndex = -1;\n\n // So shifting focus backwards with screen reader doesn't create a focus trap\n button.setAttribute('aria-hidden', true);\n\n // Mark the button as focused\n button.classList.add('is-focused');\n\n window.requestAnimationFrame(() => {\n if (input.classList.contains('focus-ring')) {\n button.classList.add('focus-ring');\n }\n });\n }\n }\n\n /** @private */\n _onInputFocusOut() {\n // Unmark all the focused buttons\n const button = this.querySelector('[coral-fileupload-select].is-focused');\n if (button) {\n button.classList.remove('is-focused');\n button.classList.remove('focus-ring');\n \n // Wait a frame so that shifting focus backwards with screen reader doesn't create a focus trap\n window.requestAnimationFrame(() => {\n button.tabIndex = 0;\n // @a11y: aria-hidden is removed to prevent focus trap when navigating backwards using a screen reader's\n // virtual cursor\n button.removeAttribute('aria-hidden');\n });\n }\n }\n\n /** @private */\n _onAbortFileClick(event) {\n if (!this.async) {\n throw new Error('Coral.FileUpload does not support aborting file(s) upload on synchronous mode.');\n }\n\n // Get file to abort\n const fileName = event.target.getAttribute('coral-fileupload-abortfile');\n if (fileName) {\n this._abortFile(fileName);\n }\n }\n\n /** @private */\n _onRemoveFileClick(event) {\n if (!this.async) {\n throw new Error('Coral.FileUpload does not support removing a file from the queue on synchronous mode.');\n } else {\n // Get file to remove\n const fileName = event.target.getAttribute('coral-fileupload-removefile');\n if (fileName) {\n this._clearFile(fileName);\n }\n }\n }\n\n /** @private */\n _onUploadFileClick(event) {\n if (!this.async) {\n throw new Error('Coral.FileUpload does not support uploading a file from the queue on synchronous mode.');\n }\n\n // Get file to upload\n const fileName = event.target.getAttribute('coral-fileupload-uploadfile');\n if (fileName) {\n this.upload(fileName);\n }\n }\n\n /** @private */\n _onDragAndDrop(event) {\n // Set dragging classes\n if (event.type === 'dragenter' || event.type === 'dragover') {\n this._addDragClass();\n } else if (event.type === 'dragleave' || event.type === 'drop') {\n this._removeDragClass();\n }\n\n this.trigger(`coral-fileupload:${event.type}`);\n }\n\n /** @private */\n _addDragClass() {\n window.clearTimeout(this._removeClassTimeout);\n this._removeClassTimeout = window.setTimeout(this._doAddDragClass, 10);\n }\n\n /** @private */\n _doAddDragClass() {\n this.classList.add('is-dragging');\n\n const dropZone = this.querySelector('[coral-fileupload-dropzone]');\n if (dropZone) {\n dropZone.classList.add('is-dragging');\n }\n\n // Put the input on top to enable file drop\n this._elements.input.classList.remove('is-unselectable');\n }\n\n /** @private */\n _removeDragClass() {\n window.clearTimeout(this._removeClassTimeout);\n this._removeClassTimeout = window.setTimeout(this._doRemoveDragClass, 10);\n }\n\n /** @private */\n _doRemoveDragClass() {\n this.classList.remove('is-dragging');\n\n const dropZone = this.querySelector('[coral-fileupload-dropzone]');\n if (dropZone) {\n dropZone.classList.remove('is-dragging');\n }\n\n // Disable user interaction with the input\n this._elements.input.classList.add('is-unselectable');\n }\n\n /**\n Handles clicks to submit buttons\n\n @private\n */\n _onSubmitButtonClick(event) {\n const target = event.matchedTarget;\n\n // Override or reset the action/method given the button's configuration\n this._buttonAction = target.getAttribute('formaction');\n\n // Make sure the method provided by the button is valid\n const buttonMethod = transform.string(target.getAttribute('formmethod')).toUpperCase();\n this._buttonMethod = validate.enumeration(method)(buttonMethod) && buttonMethod || null;\n\n // Start the file upload\n this.upload();\n }\n\n /**\n Handles changes to the input element.\n\n @private\n */\n _onInputChange(event) {\n // Stop the current event\n event.stopPropagation();\n\n if (this.disabled) {\n return;\n }\n\n let files = [];\n const items = [];\n\n // Retrieve files for select event\n if (event.target.files && event.target.files.length) {\n this._clearQueue();\n files = event.target.files;\n\n // Verify if multiple file upload is allowed\n if (!this.multiple) {\n files = [files[0]];\n }\n }\n // Retrieve files for drop event\n else if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length) {\n this._clearQueue();\n files = event.dataTransfer.files;\n\n // Verify if multiple file upload is allowed\n if (!this.multiple) {\n files = [files[0]];\n }\n } else {\n return;\n }\n\n // Initialize items\n for (let i = 0 ; i < files.length ; i++) {\n items.push(new FileUploadItem(files[i]));\n }\n\n // Verify if file is allowed to be uploaded and trigger events accordingly\n items.forEach((item) => {\n // If file is not found in uploadQueue using filename\n if (!this._getQueueItemByFilename(item.file.name)) {\n // Check file size\n if (this.sizeLimit && item.file.size > this.sizeLimit) {\n this.trigger('coral-fileupload:filesizeexceeded', {item});\n }\n // Check mime type\n else if (this.accept && !item._isMimeTypeAllowed(this.accept)) {\n this.trigger('coral-fileupload:filemimetyperejected', {item});\n } else {\n // Add item to queue\n this._uploadQueue.push(item);\n\n this.trigger('coral-fileupload:fileadded', {item});\n }\n }\n });\n\n if (this.autoStart) {\n this.upload();\n }\n\n // Explicitly re-emit the change event\n if (this._triggerChangeEvent) {\n this.trigger('change');\n }\n\n // Clear file input once files are added to the queue to make sure next file selection will trigger a change event\n if (this.async) {\n this._clearFileInputValue();\n }\n }\n\n /**\n Sets the disabled/readonly state of elements with the associated special attributes\n\n @private\n */\n _setElementState() {\n Array.prototype.forEach.call(this.querySelectorAll(\n '[coral-fileupload-select],' +\n '[coral-fileupload-dropzone],' +\n '[coral-fileupload-submit],' +\n '[coral-fileupload-clear],' +\n '[coral-fileupload-abort],' +\n '[coral-fileupload-abortfile],' +\n '[coral-fileupload-removefile],' +\n '[coral-fileupload-uploadfile]'\n ), (item) => {\n item.classList.toggle('is-invalid', this.invalid);\n item.classList.toggle('is-disabled', this.disabled);\n item.classList.toggle('is-required', this.required);\n item.classList.toggle('is-readOnly', this.readOnly);\n item[this.disabled || this.readOnly ? 'setAttribute' : 'removeAttribute']('disabled', '');\n });\n }\n\n /** @private */\n _clearQueue() {\n this._uploadQueue.slice().forEach((item) => {\n this._clearFile(item.file.name);\n });\n }\n\n /**\n Clear file selection on the file input\n\n @private\n */\n _clearFileInputValue() {\n this._elements.input.value = '';\n }\n\n /**\n Remove a file from the upload queue.\n\n @param {String} filename\n The filename of the file to remove.\n\n @private\n */\n _clearFile(filename) {\n const item = this._getQueueItemByFilename(filename);\n if (item) {\n // Abort file upload\n this._abortFile(filename);\n\n // Remove file from queue\n this._uploadQueue.splice(this._getQueueIndex(filename), 1);\n\n this.trigger('coral-fileupload:fileremoved', {item});\n }\n }\n\n /**\n Uploads a file in the queue. If an array is provided as the first argument, it is used as the parameters.\n\n @param filename {String}\n The name of the file to upload.\n\n @private\n */\n _uploadFile(filename) {\n const item = this._getQueueItemByFilename(filename);\n if (item) {\n this._abortFile(filename);\n this._ajaxUpload(item);\n }\n }\n\n /** @private */\n _showFileDialog() {\n // Show the dialog\n // This ONLY works when the call stack traces back to another click event!\n this._elements.input.click();\n }\n\n /**\n Abort specific file upload.\n\n @param {String} filename\n The filename identifies the file to abort.\n\n @private\n */\n _abortFile(filename) {\n const item = this._getQueueItemByFilename(filename);\n if (item && item._xhr) {\n item._xhr.abort();\n item._xhr = null;\n }\n }\n\n /**\n Handles the ajax upload.\n\n @private\n */\n _ajaxUpload(item) {\n // Use the action/method provided by the last button click, if provided\n const action = this._buttonAction || this.action;\n const requestMethod = this._buttonMethod ? this._buttonMethod.toUpperCase() : this.method;\n\n // We merge the global parameters with the specific file parameters and send them all together\n const parameters = this.parameters.concat(item.parameters);\n\n const formData = new FormData();\n\n parameters.forEach((additionalParameter) => {\n formData.append(additionalParameter.name, additionalParameter.value);\n });\n\n formData.append('_charset_', 'utf-8');\n formData.append(this.name, item._originalFile);\n\n // Store the XHR on the item itself\n item._xhr = new XMLHttpRequest();\n\n // Opening before being able to set response type to avoid IE11 InvalidStateError\n item._xhr.open(requestMethod, action);\n\n // Reflect specific xhr properties\n item._xhr.timeout = item.timeout;\n item._xhr.responseType = item.responseType;\n item._xhr.withCredentials = item.withCredentials;\n\n XHR_EVENT_NAMES.forEach((name) => {\n // Progress event is the only event among other ProgressEvents that can trigger multiple times.\n // Hence it's the only one that gives away usable progress information.\n const isProgressEvent = name === 'progress';\n (isProgressEvent ? item._xhr.upload : item._xhr).addEventListener(name, (event) => {\n const detail = {\n item: item,\n action: action,\n method: requestMethod\n };\n\n if (isProgressEvent) {\n detail.lengthComputable = event.lengthComputable;\n detail.loaded = event.loaded;\n detail.total = event.total;\n }\n\n this.trigger(`coral-fileupload:${name}`, detail);\n });\n });\n\n item._xhr.send(formData);\n }\n\n /** @private */\n _getLabellableElement() {\n return this;\n }\n\n /** @private */\n _getQueueItemByFilename(filename) {\n return this._getQueueItem(this._getQueueIndex(filename));\n }\n\n /** @private */\n _getQueueItem(index) {\n return index > -1 ? this._uploadQueue[index] : null;\n }\n\n /** @private */\n _getQueueIndex(filename) {\n let index = -1;\n this._uploadQueue.some((item, i) => {\n if (item.file.name === filename) {\n index = i;\n return true;\n }\n\n return false;\n });\n return index;\n }\n\n /** @private */\n _getTargetChangeInput() {\n return this._elements.input;\n }\n\n /** @ignore */\n _positionInputOnDropZone() {\n const input = this._elements.input;\n const dropZone = this.querySelector('[coral-fileupload-dropzone]');\n\n if (dropZone) {\n const size = dropZone.getBoundingClientRect();\n\n input.style.top = `${parseInt(dropZone.offsetTop, 10)}px`;\n input.style.left = `${parseInt(dropZone.offsetLeft, 10)}px`;\n input.style.width = `${parseInt(size.width, 10)}px`;\n input.style.height = `${parseInt(size.height, 10)}px`;\n } else {\n input.style.width = '0px';\n input.style.height = '0px';\n input.style.visibility = 'hidden';\n }\n }\n\n /**\n Uploads the given filename, or all the files into the queue. It accepts extra parameters that are sent with the\n file.\n\n @param {String} [filename]\n The name of the file to upload.\n */\n upload(filename) {\n if (!this.async) {\n if (typeof filename === 'string') {\n throw new Error('Coral.FileUpload does not support uploading a file from the queue on synchronous mode.');\n }\n\n let form = this.closest('form');\n if (!form) {\n form = document.createElement('form');\n form.method = this.method.toLowerCase();\n form.enctype = 'multipart/form-data';\n form.action = this.action;\n form.hidden = true;\n\n form.appendChild(this._elements.input);\n\n Array.prototype.forEach.call(this.querySelectorAll('input[type=\"hidden\"]'), (hiddenInput) => {\n form.appendChild(hiddenInput);\n });\n\n // Make sure the form is connected before submission\n this.appendChild(form);\n }\n\n const input = document.createElement('input');\n input.type = 'hidden';\n input.name = '_charset_';\n input.value = 'utf-8';\n\n form.submit();\n } else if (typeof filename === 'string') {\n this._uploadFile(filename);\n } else {\n this._uploadQueue.forEach((item) => {\n this._abortFile(item.file.name);\n this._ajaxUpload(item);\n });\n }\n }\n\n /**\n Remove a file or all files from the upload queue.\n\n @param {String} [filename]\n The filename of the file to remove. If a filename is not provided, all files will be removed.\n */\n clear(filename) {\n if (!this.async) {\n if (typeof filename === 'string') {\n throw new Error('Coral.FileUpload does not support removing a file from the queue on synchronous mode.');\n }\n this._clearQueue();\n this._clearFileInputValue();\n } else if (typeof filename === 'string') {\n this._clearFile(filename);\n } else {\n this._clearQueue();\n }\n }\n\n /**\n Abort upload of a given file or all files in the queue.\n\n @param {String} [filename]\n The filename of the file to abort. If a filename is not provided, all files will be aborted.\n */\n abort(filename) {\n if (!this.async) {\n throw new Error('Coral.FileUpload does not support aborting file(s) upload on synchronous mode.');\n }\n\n if (typeof filename === 'string') {\n // Abort a single file\n this._abortFile(filename);\n } else {\n // Abort all files\n this._uploadQueue.forEach((item) => {\n this._abortFile(item.file.name);\n });\n }\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n sizelimit: 'sizeLimit',\n autostart: 'autoStart'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'async',\n 'action',\n 'method',\n 'multiple',\n 'sizelimit',\n 'accept',\n 'autostart'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n const button = this.querySelector('[coral-fileupload-select]');\n if (button) {\n button.id = button.id || commons.getUID();\n }\n // If no labelledby is specified, ensure input is at labelledby the select button\n this.labelledBy = this.labelledBy;\n\n // Fetch additional parameters if any\n const parameters = [];\n Array.prototype.forEach.call(this.querySelectorAll('input[type=\"hidden\"]'), (input) => {\n parameters.push({\n name: input.name,\n value: input.value\n });\n });\n this.parameters = parameters;\n\n // Remove the input if it's already there\n // A fresh input is preferred to value = '' as it may not work in all browsers\n const inputElement = this.querySelector('[handle=\"input\"]');\n if (inputElement) {\n inputElement.parentNode.removeChild(inputElement);\n }\n\n // Add the input to the component\n this.appendChild(this._elements.input);\n\n // IE11 requires one more frame or the resize listener will appear as an overlaying white box\n window.requestAnimationFrame(() => {\n // Handles the repositioning of the input to allow dropping files\n commons.addResizeListener(this, this._positionInputOnDropZone);\n });\n }\n});\n\nexport default FileUpload;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1060, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1061, "kind": "variable", "name": "XHR_EVENT_NAMES", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js~XHR_EVENT_NAMES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "type": { "types": [ "string[]" ] }, "ignore": true }, { "__docId__": 1062, "kind": "typedef", "name": "FileUploadMethodEnum", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js~FileUploadMethodEnum", "access": "public", "description": "Enumeration for {@link FileUpload} HTTP methods that can be used to upload files.", "lineNumber": 36, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "POST", "description": "Send a POST request. Used when creating a resource." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "PUT", "description": "Send a PUT request. Used when replacing a resource." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "PATCH", "description": "Send a PATCH request. Used when partially updating a resource." } ], "type": { "types": [ "Object" ], "optional": false, "name": "FileUploadMethodEnum" } }, { "__docId__": 1063, "kind": "variable", "name": "FileUpload", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUpload.js~FileUpload", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{FileUpload}", "description": "A FileUpload component that manages the upload process of multiple files. Child elements of FileUpload can\nbe given special attributes to enable functionality:\n- [coral-fileupload-select]. Click to choose file(s), replacing existing files.\n- [coral-fileupload-dropzone]. Drag and drop files to choose file(s), replacing existing files.\n- [coral-fileupload-clear]. Click to remove all files from the queue.\n- [coral-fileupload-submit]. Click to start uploading.\n- [coral-fileupload-abort]. Click to abort all uploads.\n- [coral-fileupload-abortfile=\"filename.txt\"]. Click to abort a specific file, leaving it in the queue.\n- [coral-fileupload-removefile=\"filename.txt\"]. Click to remove a specific file from the queue.\n- [coral-fileupload-uploadfile=\"filename.txt\"]. Click to start uploading a specific file.", "lineNumber": 60, "unknown": [ { "tagName": "@class", "tagValue": "Coral.FileUpload" }, { "tagName": "@classdesc", "tagValue": "A FileUpload component that manages the upload process of multiple files. Child elements of FileUpload can\nbe given special attributes to enable functionality:\n- [coral-fileupload-select]. Click to choose file(s), replacing existing files.\n- [coral-fileupload-dropzone]. Drag and drop files to choose file(s), replacing existing files.\n- [coral-fileupload-clear]. Click to remove all files from the queue.\n- [coral-fileupload-submit]. Click to start uploading.\n- [coral-fileupload-abort]. Click to abort all uploads.\n- [coral-fileupload-abortfile=\"filename.txt\"]. Click to abort a specific file, leaving it in the queue.\n- [coral-fileupload-removefile=\"filename.txt\"]. Click to remove a specific file from the queue.\n- [coral-fileupload-uploadfile=\"filename.txt\"]. Click to start uploading a specific file." }, { "tagName": "@htmltag", "tagValue": "coral-fileupload" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseFormField}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.FileUpload();" ], "see": [ "../examples/#fileupload" ], "type": { "types": [ "*" ] } }, { "__docId__": 1064, "kind": "file", "name": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MIME_TYPES from '../data/mimetypes';\nimport {transform, validate} from '../../../coral-utils';\n\n/**\n Enumeration for {@link FileUploadItem} response types.\n\n @typedef {Object} FileUploadItemResponseTypeEnum\n\n @property {String} TEXT\n String type.\n @property {String} ARRAY_BUFFER\n Array buffer type.\n @property {String} BLOB\n Blob type.\n @property {String} DOCUMENT\n Document type.\n @property {String} JSON\n JavaScript object, parsed from a JSON string returned by the server.\n */\nconst responseType = {\n TEXT: 'text',\n ARRAY_BUFFER: 'arraybuffer',\n BLOB: 'blob',\n DOCUMENT: 'document',\n JSON: 'json'\n};\n\n// eg text/plain\nconst MIME_TYPE_REGEXP = /(.+)\\/(.+)$/;\n// eg .txt\nconst FILE_EXTENSION_REGEXP = /\\.(.+)$/;\n// eg text\nconst SHORTCUT_REGEXP = /.*/;\nconst MIME_TYPE_AUDIO = 'audio/*';\nconst MIME_TYPE_IMAGE = 'image/*';\nconst MIME_TYPE_VIDEO = 'video/*';\n\n/**\n @class Coral.FileUpload.Item\n @classdesc A FileUpload item encapsulating file meta-data\n @param {File|HTMLElement} file\n The file element.\n */\nclass FileUploadItem {\n /**\n Takes a {File} as argument.\n\n @param {File} file\n */\n constructor(file) {\n this._originalFile = file;\n this._xhr = null;\n }\n\n /**\n The File.\n\n @name file\n @readonly\n @type {File}\n */\n get file() {\n return this._originalFile;\n }\n\n /**\n Array of additional parameters as key:value to be uploaded with the file.\n A parameter must contain a name key:value and optionally a value key:value.\n\n @name parameters\n @type {Array.}\n @default []\n */\n get parameters() {\n return this._parameters || [];\n }\n\n set parameters(value) {\n const isValid = Array.isArray(value) && value.every((el) => el && el.name);\n\n if (isValid) {\n this._parameters = value;\n }\n }\n\n /**\n The item xhr withCredentials property.\n\n @name withCredentials\n @type {Boolean}\n @default false\n */\n get withCredentials() {\n return this._withCredentials || false;\n }\n\n set withCredentials(value) {\n this._withCredentials = transform.boolean(value);\n }\n\n /**\n The item xhr timeout property.\n\n @name timeout\n @type {Number}\n @default 0\n */\n get timeout() {\n return this._timeout || 0;\n }\n\n set timeout(value) {\n const timeout = transform.number(value);\n if (timeout !== null) {\n this._timeout = timeout;\n if (this._xhr) {\n this._xhr.timeout = timeout;\n }\n }\n }\n\n /**\n The item xhr responseType property. See {@link FileUploadItemResponseTypeEnum}.\n\n @name responseType\n @default {FileUploadItemResponseTypeEnum.TEXT}\n @type {String}\n */\n get responseType() {\n return this._responseType || responseType.TEXT;\n }\n\n set responseType(value) {\n value = transform.string(value).toLowerCase();\n this._responseType = validate.enumeration(responseType)(value) && value || responseType.TEXT;\n if (this._xhr) {\n this._xhr.responseType = value;\n }\n }\n\n /**\n The item xhr readyState property.\n\n @name readyState\n @readonly\n @default 0\n @type {Number}\n */\n get readyState() {\n return this._xhr ? this._xhr.readyState : this._readyState || 0;\n }\n\n /**\n The item xhr responseType property. Depends on {@link Coral.FileUpload.Item#responseType}.\n\n @name response\n @readonly\n @default \"\"\n @type {String|ArrayBuffer|Blob|Document}\n */\n get response() {\n return this._xhr ? this._xhr.response : this._response || '';\n }\n\n /**\n The item xhr responseText property.\n\n @name responseText\n @readonly\n @default \"\"\n @type {String}\n */\n get responseText() {\n return this._xhr ? this._xhr.responseText : this._responseText || '';\n }\n\n /**\n The item xhr responseXML property.\n\n @name responseXML\n @readonly\n @default null\n @type {HTMLElement}\n */\n get responseXML() {\n return this._xhr ? this._xhr.responseXML : this._responseXML || null;\n }\n\n /**\n The item xhr status property.\n\n @name status\n @readonly\n @default 0\n @type {Number}\n */\n get status() {\n return this._xhr ? this._xhr.status : this._status || 0;\n }\n\n /**\n The item xhr statusText property.\n\n @name statusText\n @readonly\n @default \"\"\n @type {String}\n */\n get statusText() {\n return this._xhr ? this._xhr.statusText : this._statusText || '';\n }\n\n /** @private */\n _isMimeTypeAllowed(acceptedMimeTypes) {\n let isAllowed = false;\n\n // Unrecognized browser mime types have a file type of ''.\n const fileType = this.file.type || 'application/unknown';\n\n if (!fileType.match(MIME_TYPE_REGEXP)) {\n // File mime type is erroneous\n return false;\n }\n\n return acceptedMimeTypes.split(',').some((allowedMimeType) => {\n allowedMimeType = allowedMimeType.trim();\n\n if (allowedMimeType === '*' ||\n allowedMimeType === '.*' ||\n allowedMimeType === '*/*' ||\n fileType === 'application/unknown') {\n // Explicit wildcard case: allow any file\n // Allow unknown mime types\n isAllowed = true;\n } else if (allowedMimeType.match(MIME_TYPE_REGEXP)) {\n if (allowedMimeType === MIME_TYPE_AUDIO) {\n isAllowed = fileType.indexOf(MIME_TYPE_AUDIO.slice(0, -1)) === 0;\n } else if (allowedMimeType === MIME_TYPE_IMAGE) {\n isAllowed = fileType.indexOf(MIME_TYPE_IMAGE.slice(0, -1)) === 0;\n } else if (allowedMimeType === MIME_TYPE_VIDEO) {\n isAllowed = fileType.indexOf(MIME_TYPE_VIDEO.slice(0, -1)) === 0;\n } else {\n // Proper mime type case: directly compare with file mime type\n isAllowed = fileType === allowedMimeType;\n }\n } else if (allowedMimeType.match(FILE_EXTENSION_REGEXP)) {\n // File extension case\n const allowedMimeTypes = MIME_TYPES[allowedMimeType];\n\n // Depending on OS and browser, a file extension can map to different mime types\n // e.g .csv maps to \"text/csv\" on Mac OS and to \"application/vnd.ms-excel\" on Windows\n if (Array.isArray(allowedMimeTypes)) {\n isAllowed = allowedMimeTypes.some((mimeType) => fileType === mimeType);\n } else {\n isAllowed = fileType === MIME_TYPES[allowedMimeType];\n }\n } else if (allowedMimeType.match(SHORTCUT_REGEXP)) {\n // \"Shortcut\" case: only compare first part of the file mime type with the shortcut\n isAllowed = fileType.split('/')[0] === allowedMimeType;\n }\n\n // Break the loop if file mime type is allowed\n return isAllowed;\n });\n }\n\n /**\n Returns {@link FileUploadItem} response types.\n\n @return {FileUploadItemResponseTypeEnum}\n */\n static get responseType() {\n return responseType;\n }\n}\n\nexport default FileUploadItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1065, "kind": "typedef", "name": "FileUploadItemResponseTypeEnum", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItemResponseTypeEnum", "access": "public", "description": "Enumeration for {@link FileUploadItem} response types.", "lineNumber": 32, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "TEXT", "description": "String type." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ARRAY_BUFFER", "description": "Array buffer type." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "BLOB", "description": "Blob type." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DOCUMENT", "description": "Document type." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "JSON", "description": "JavaScript object, parsed from a JSON string returned by the server." } ], "type": { "types": [ "Object" ], "optional": false, "name": "FileUploadItemResponseTypeEnum" } }, { "__docId__": 1066, "kind": "variable", "name": "MIME_TYPE_REGEXP", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~MIME_TYPE_REGEXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 41, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 1067, "kind": "variable", "name": "FILE_EXTENSION_REGEXP", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FILE_EXTENSION_REGEXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 43, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 1068, "kind": "variable", "name": "SHORTCUT_REGEXP", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~SHORTCUT_REGEXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 45, "undocument": true, "type": { "types": [ "undefined" ] }, "ignore": true }, { "__docId__": 1069, "kind": "variable", "name": "MIME_TYPE_AUDIO", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~MIME_TYPE_AUDIO", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 46, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1070, "kind": "variable", "name": "MIME_TYPE_IMAGE", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~MIME_TYPE_IMAGE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 47, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1071, "kind": "variable", "name": "MIME_TYPE_VIDEO", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~MIME_TYPE_VIDEO", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 48, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1072, "kind": "class", "name": "FileUploadItem", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js", "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{FileUpload}", "description": "A FileUpload item encapsulating file meta-data", "lineNumber": 56, "unknown": [ { "tagName": "@class", "tagValue": "Coral.FileUpload.Item" }, { "tagName": "@classdesc", "tagValue": "A FileUpload item encapsulating file meta-data" } ], "params": [ { "nullable": null, "types": [ "File", "HTMLElement" ], "spread": false, "optional": false, "name": "file", "description": "The file element." } ], "interface": false, "examples": [ "JS constructor\nnew Coral.FileUpload.Item();" ], "see": [ "../examples/#fileupload" ] }, { "__docId__": 1073, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#constructor", "access": "public", "description": "Takes a {File} as argument.", "lineNumber": 62, "params": [ { "nullable": null, "types": [ "File" ], "spread": false, "optional": false, "name": "file", "description": "" } ] }, { "__docId__": 1074, "kind": "member", "name": "_originalFile", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_originalFile", "access": "private", "description": null, "lineNumber": 63, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1075, "kind": "member", "name": "_xhr", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_xhr", "access": "private", "description": null, "lineNumber": 64, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1076, "kind": "member", "name": "file", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#file", "access": "public", "description": "The File.\n
  • read-only
", "lineNumber": 74, "unknown": [ { "tagName": "@readonly", "tagValue": "" } ], "type": { "nullable": null, "types": [ "File" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1077, "kind": "member", "name": "parameters", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#parameters", "access": "public", "description": "Array of additional parameters as key:value to be uploaded with the file.\nA parameter must contain a name key:value and optionally a value key:value.\n
  • [] by default.
", "lineNumber": 86, "unknown": [ { "tagName": "@default", "tagValue": "[]" } ], "type": { "nullable": null, "types": [ "Array." ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 1079, "kind": "member", "name": "_parameters", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_parameters", "access": "private", "description": null, "lineNumber": 94, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1080, "kind": "member", "name": "withCredentials", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#withCredentials", "access": "public", "description": "The item xhr withCredentials property.\n
  • false by default.
", "lineNumber": 105, "unknown": [ { "tagName": "@default", "tagValue": "false" } ], "type": { "nullable": null, "types": [ "Boolean" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 1082, "kind": "member", "name": "_withCredentials", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_withCredentials", "access": "private", "description": null, "lineNumber": 110, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1083, "kind": "member", "name": "timeout", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#timeout", "access": "public", "description": "The item xhr timeout property.\n
  • 0 by default.
", "lineNumber": 120, "unknown": [ { "tagName": "@default", "tagValue": "0" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 1085, "kind": "member", "name": "_timeout", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_timeout", "access": "private", "description": null, "lineNumber": 127, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1086, "kind": "member", "name": "responseType", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#responseType", "access": "public", "description": "The item xhr responseType property. See {@link FileUploadItemResponseTypeEnum}.\n
  • {FileUploadItemResponseTypeEnum.TEXT} by default.
", "lineNumber": 141, "unknown": [ { "tagName": "@default", "tagValue": "{FileUploadItemResponseTypeEnum.TEXT}" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 1088, "kind": "member", "name": "_responseType", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_responseType", "access": "private", "description": null, "lineNumber": 147, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1089, "kind": "member", "name": "readyState", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#readyState", "access": "public", "description": "The item xhr readyState property.\n
  • read-only
  • 0 by default.
", "lineNumber": 161, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "0" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1090, "kind": "member", "name": "response", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#response", "access": "public", "description": "The item xhr responseType property. Depends on {@link Coral.FileUpload.Item#responseType}.\n
  • read-only
  • \"\" by default.
", "lineNumber": 173, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String", "ArrayBuffer", "Blob", "Document" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1091, "kind": "member", "name": "responseText", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#responseText", "access": "public", "description": "The item xhr responseText property.\n
  • read-only
  • \"\" by default.
", "lineNumber": 185, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1092, "kind": "member", "name": "responseXML", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#responseXML", "access": "public", "description": "The item xhr responseXML property.\n
  • read-only
  • null by default.
", "lineNumber": 197, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "null" } ], "type": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1093, "kind": "member", "name": "status", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#status", "access": "public", "description": "The item xhr status property.\n
  • read-only
  • 0 by default.
", "lineNumber": 209, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "0" } ], "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1094, "kind": "member", "name": "statusText", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#statusText", "access": "public", "description": "The item xhr statusText property.\n
  • read-only
  • \"\" by default.
", "lineNumber": 221, "unknown": [ { "tagName": "@readonly", "tagValue": "" }, { "tagName": "@default", "tagValue": "\"\"" } ], "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "readonly" }, { "__docId__": 1095, "kind": "method", "name": "_isMimeTypeAllowed", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem#_isMimeTypeAllowed", "access": "private", "description": null, "lineNumber": 226, "ignore": true, "params": [ { "name": "acceptedMimeTypes", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1096, "kind": "member", "name": "responseType", "memberof": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-fileupload/src/scripts/FileUploadItem.js~FileUploadItem.responseType", "access": "public", "description": "Returns {@link FileUploadItem} response types.", "lineNumber": 284, "return": { "nullable": null, "types": [ "FileUploadItemResponseTypeEnum" ], "spread": false, "description": "" }, "modality": "readonly", "type": { "types": [ "*" ] } }, { "__docId__": 1097, "kind": "file", "name": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {transform, validate, commons, i18n} from '../../../coral-utils';\nimport ICON_MAP from '../../../coral-compat/data/iconMap';\nimport SPECTRUM_ICONS_PATH from '../resources/spectrum-icons.svg';\nimport SPECTRUM_ICONS_COLOR_PATH from '../resources/spectrum-icons-color.svg';\nimport SPECTRUM_CSS_ICONS_PATH from '../resources/spectrum-css-icons.svg';\nimport loadIcons from './loadIcons';\nimport {Decorator} from '../../../coral-decorator';\nimport {SPECTRUM_ICONS, SPECTRUM_ICONS_COLOR, SPECTRUM_CSS_ICONS} from './iconCollection';\n\nconst SPECTRUM_ICONS_IDENTIFIER = 'spectrum-';\nconst SPECTRUM_COLORED_ICONS_IDENTIFIER = [\n 'ColorLight',\n 'Color_Light',\n 'ColorDark',\n 'Color_Dark',\n 'ColorActive',\n 'Color_Active',\n // Unique colored icons\n 'AdobeExperienceCloudColor',\n 'AdobeExperiencePlatformColor',\n];\n\nlet resourcesPath = (commons.options.icons || '').trim();\nif (resourcesPath.length && resourcesPath[resourcesPath.length - 1] !== '/') {\n resourcesPath += '/';\n}\n\n// @IE11\nconst IS_IE11 = !window.ActiveXObject && 'ActiveXObject' in window;\nlet iconsExternal = commons.options.iconsExternal || 'on';\nif (IS_IE11) {\n iconsExternal = 'off';\n}\n\nconst resolveIconsPath = (iconsPath) => {\n const path = commons._script.src;\n return `${path.split('/').slice(0, -iconsPath.split('/').length).join('/')}/${iconsPath}`;\n};\n\n/**\n Regex used to match URLs. Assume it's a URL if it has a slash, colon, or dot.\n\n @ignore\n */\nconst URL_REGEX = /\\/|:|\\./g;\n\n/**\n Regex used to match unresolved templates e.g. for data-binding\n\n @ignore\n */\nconst TEMPLATE_REGEX = /.*\\{\\{.+\\}\\}.*/g;\n\n/**\n Regex used to split camel case icon names into more screen-reader friendly alt text.\n\n @ignore\n */\nconst SPLIT_CAMELCASE_REGEX = /([a-z])([A-Z0-9])/g;\n\n/**\n Regex used to match the sized spectrum icon prefix\n\n @ignore\n */\nconst SPECTRUM_ICONS_IDENTIFIER_REGEX = /^spectrum(?:-css)?-icon(?:-\\d{1,3})?-/gi;\n\n/**\n Regex used match the variant postfix for an icon\n\n @ignore\n */\nconst ICONS_VARIANT_POSTFIX_REGEX = /(Outline)?(Filled)?(Small|Medium|Large)?(Color)?_?(Active|Dark|Light)?$/;\n\n/**\n Translation hint used for localizing default alt text for an icon\n\n @ignore\n */\nconst ICON_ALT_TRANSLATION_HINT = 'default icon alt text';\n\n/**\n Returns capitalized string. This is used to map the icons with their SVG counterpart.\n\n @ignore\n @param {String} s\n @return {String}\n */\nconst capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);\n\n/**\n Enumeration for {@link Icon} sizes.\n\n @typedef {Object} IconSizeEnum\n\n @property {String} EXTRA_EXTRA_SMALL\n Extra extra small size icon, typically 9px size.\n @property {String} EXTRA_SMALL\n Extra small size icon, typically 12px size.\n @property {String} SMALL\n Small size icon, typically 18px size. This is the default size.\n @property {String} MEDIUM\n Medium size icon, typically 24px size.\n @property {String} LARGE\n Large icon, typically 36px size.\n @property {String} EXTRA_LARGE\n Extra large icon, typically 48px size.\n @property {String} EXTRA_EXTRA_LARGE\n Extra extra large icon, typically 72px size.\n */\nconst size = {\n EXTRA_EXTRA_SMALL: 'XXS',\n EXTRA_SMALL: 'XS',\n SMALL: 'S',\n MEDIUM: 'M',\n LARGE: 'L',\n EXTRA_LARGE: 'XL',\n EXTRA_EXTRA_LARGE: 'XXL'\n};\n\n\n/**\n Enumeration for {@link Icon} autoAriaLabel value.\n\n @typedef {Object} IconAutoAriaLabelEnum\n\n @property {String} ON\n The aria-label attribute is automatically set based on the icon name.\n @property {String} OFF\n The aria-label attribute is not set and has to be provided explicitly.\n */\nconst autoAriaLabel = {\n ON: 'on',\n OFF: 'off'\n};\n\n// icon's base classname\nconst CLASSNAME = '_coral-Icon';\n\n// builds an array containing all possible size classnames. this will be used to remove classnames when the size\n// changes\nconst ALL_SIZE_CLASSES = [];\nfor (const sizeValue in size) {\n ALL_SIZE_CLASSES.push(`${CLASSNAME}--size${size[sizeValue]}`);\n}\n\n// Based on https://github.com/adobe/spectrum-css/tree/master/icons\nconst sizeMap = {\n XXS: 18,\n XS: 24,\n S: 18,\n M: 24,\n L: 18,\n XL: 24,\n XXL: 24\n};\n\n/**\n @class Coral.Icon\n @classdesc An Icon component. Icon ships with a set of SVG icons.\n @htmltag coral-icon\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Icon = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this._elements = {};\n }\n\n /**\n Whether aria-label is set automatically. See {@link IconAutoAriaLabelEnum}.\n\n @type {String}\n @default IconAutoAriaLabelEnum.OFF\n */\n get autoAriaLabel() {\n return this._autoAriaLabel || autoAriaLabel.OFF;\n }\n\n set autoAriaLabel(value) {\n value = transform.string(value).toLowerCase();\n value = validate.enumeration(autoAriaLabel)(value) && value || autoAriaLabel.OFF;\n if(validate.valueMustChange(this._autoAriaLabel, value)) {\n this._autoAriaLabel = value;\n this._updateAltText();\n }\n }\n\n /**\n Icon name.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n @htmlattributereflected\n */\n get icon() {\n return this._icon || '';\n }\n\n set icon(value) {\n const icon = transform.string(value).trim();\n\n // Avoid rendering the same icon\n if (icon !== this._icon || this.hasAttribute('_context')) {\n this._icon = icon;\n this._reflectAttribute('icon', this._icon);\n\n // Ignore unresolved templates\n if (this._icon.match(TEMPLATE_REGEX)) {\n return;\n }\n\n // Use the existing img\n if (this._hasRawImage) {\n this._elements.image.classList.add(CLASSNAME, `${CLASSNAME}--image`);\n this._updateAltText();\n return;\n }\n\n // Remove image and SVG elements\n ['image', 'svg'].forEach((type) => {\n const el = this._elements[type] || this.querySelector(`.${CLASSNAME}--${type}`);\n if (el) {\n el.remove();\n }\n });\n\n // Sets the desired icon\n if (this._icon) {\n // Detect if it's a URL\n if (this._icon.match(URL_REGEX)) {\n // Create an image and add it to the icon\n this._elements.image = this._elements.image || document.createElement('img');\n this._elements.image.className = `${CLASSNAME} ${CLASSNAME}--image`;\n this._elements.image.src = this.icon;\n this.appendChild(this._elements.image);\n } else {\n this._updateIcon();\n }\n }\n\n this._updateAltText();\n }\n }\n\n /**\n Size of the icon. It accepts both lower and upper case sizes. See {@link IconSizeEnum}.\n\n @type {String}\n @default IconSizeEnum.SMALL\n @htmlattribute size\n @htmlattributereflected\n */\n get size() {\n return this._size || size.SMALL;\n }\n\n set size(value) {\n const oldSize = this._size;\n\n value = transform.string(value).toUpperCase();\n value = validate.enumeration(size)(value) && value || size.SMALL;\n \n this._reflectAttribute('size', value);\n \n if(validate.valueMustChange(this._size, value)) {\n this._size = value;\n\n // removes all the existing sizes\n this.classList.remove(...ALL_SIZE_CLASSES);\n // adds the new size\n this.classList.add(`${CLASSNAME}--size${value}`);\n \n // We need to update the icon if the size changed\n if (oldSize && oldSize !== value && this.contains(this._elements.svg)) {\n this._elements.svg.remove();\n this._updateIcon();\n }\n \n this._updateAltText();\n }\n }\n\n /** @private */\n get title() {\n return this.getAttribute('title');\n }\n\n set title(value) {\n this.setAttribute('title', value);\n }\n\n /** @private */\n get alt() {\n return this.getAttribute('alt');\n }\n\n set alt(value) {\n this.setAttribute('alt', value);\n }\n\n _updateIcon() {\n let iconId = this.icon;\n\n // If icon name is passed, we have to build the icon Id based on the icon name\n if (iconId.indexOf(SPECTRUM_ICONS_IDENTIFIER) !== 0) {\n const iconMapped = ICON_MAP[iconId];\n let iconName;\n\n // Restore default state\n this.removeAttribute('_context');\n\n if (iconMapped) {\n if (iconMapped.spectrumIcon) {\n // Use the default mapped icon\n iconName = iconMapped.spectrumIcon;\n } else {\n // Verify if icon should be light or dark by looking up parents theme\n const closest = this.closest('.coral--light, .coral--dark, .coral--lightest, .coral--darkest');\n\n if (closest) {\n if (closest.classList.contains('coral--light') || closest.classList.contains('coral--lightest')) {\n // Use light icon\n iconName = iconMapped.spectrumIconLight;\n } else {\n // Use dark icon\n iconName = iconMapped.spectrumIconDark;\n }\n }\n // Use light by default\n else {\n iconName = iconMapped.spectrumIconLight;\n }\n\n // Mark icon as contextual icon because the icon name is defined based on the theme\n this.setAttribute('_context', '');\n }\n\n // Inform user about icon name changes\n if (iconName) {\n commons._log('warn', `Coral.Icon: the icon ${iconId} has been deprecated. Please use ${iconName} instead.`);\n } else {\n commons._log('warn', `Coral.Icon: the icon ${iconId} has been removed. Please contact Icons@Adobe.`);\n }\n }\n // In most cases, using the capitalized icon name maps to the spectrum icon name\n else {\n iconName = capitalize(iconId);\n }\n\n // Verify if icon name is a colored icon\n if (SPECTRUM_COLORED_ICONS_IDENTIFIER.some(identifier => iconName.indexOf(identifier) !== -1)) {\n // Colored icons are 24 by default\n iconId = `spectrum-icon-24-${iconName}`;\n } else {\n const sizeAttribute = this.getAttribute('size');\n const iconSize = sizeMap[sizeAttribute && sizeAttribute.toUpperCase() || size.SMALL];\n iconId = `spectrum-icon-${iconSize}-${iconName}`;\n }\n }\n\n // Insert SVG Icon using HTML because DOMly doesn't support document.createElementNS for element\n this.insertAdjacentHTML('beforeend', this.constructor._renderSVG(iconId));\n\n this._elements.svg = this.lastElementChild;\n }\n\n /**\n Updates the aria-label or img alt attribute depending on value of alt, title, icon and autoAriaLabel.\n\n In cases where the alt attribute has been removed or set to an empty string,\n for example, when the alt property is undefined and we add the attribute alt=''\n to explicitly override the default behavior, or when we remove an alt attribute\n thus restoring the default behavior, we make sure to update the alt text.\n @private\n */\n _updateAltText(value) {\n const hasAutoAriaLabel = this.autoAriaLabel === autoAriaLabel.ON;\n const img = this._elements.image;\n const isImage = this.contains(img);\n\n // alt should be prioritized over title\n let altText = typeof this.alt === 'string' ? this.alt : this.title;\n\n if (typeof value === 'string') {\n altText = this.alt || value;\n } else if (isImage) {\n altText = altText || img.getAttribute('alt') || img.getAttribute('title') || '';\n } else if (hasAutoAriaLabel) {\n let iconName = this.icon.replace(SPECTRUM_ICONS_IDENTIFIER_REGEX, '');\n iconName = iconName.replace(ICONS_VARIANT_POSTFIX_REGEX, '');\n altText = i18n.get(iconName.replace(SPLIT_CAMELCASE_REGEX, '$1 $2').toLowerCase(), ICON_ALT_TRANSLATION_HINT);\n }\n\n // If no other role has been set, provide the appropriate\n // role depending on whether or not the icon is an arbitrary image URL.\n const role = this.getAttribute('role');\n const roleOverride = role && (role !== 'presentation' && role !== 'img');\n if (!roleOverride) {\n this.setAttribute('role', isImage ? 'presentation' : 'img');\n }\n\n // Set accessibility attributes accordingly\n if (isImage) {\n hasAutoAriaLabel && this.removeAttribute('aria-label');\n img.setAttribute('alt', altText);\n } else if (altText === '') {\n this.removeAttribute('aria-label');\n if (!roleOverride) {\n this.removeAttribute('role');\n }\n } else if (altText) {\n this.setAttribute('aria-label', altText);\n }\n }\n\n /**\n Whether SVG icons are referenced as external resource (on/off)\n\n @return {String}\n */\n static _iconsExternal() {\n return iconsExternal;\n }\n\n /**\n Returns the SVG markup.\n\n @param {String} iconId\n @param {Array.} additionalClasses\n @return {String}\n */\n static _renderSVG(iconId, additionalClasses = []) {\n additionalClasses.unshift(CLASSNAME);\n additionalClasses.unshift(`${CLASSNAME}--svg`);\n\n let iconPath = `#${iconId}`;\n\n // If not colored icons\n if (this._iconsExternal() === 'on' && !SPECTRUM_COLORED_ICONS_IDENTIFIER.some(identifier => iconId.indexOf(identifier) !== -1)) {\n // Generate spectrum-css-icons path\n if (iconId.indexOf('spectrum-css') === 0) {\n iconPath = resourcesPath ? `${resourcesPath}${SPECTRUM_CSS_ICONS}.svg#${iconId}` : `${resolveIconsPath(SPECTRUM_CSS_ICONS_PATH)}#${iconId}`;\n }\n // Generate spectrum-icons path\n else {\n iconPath = resourcesPath ? `${resourcesPath}${SPECTRUM_ICONS}.svg#${iconId}` : `${resolveIconsPath(SPECTRUM_ICONS_PATH)}#${iconId}`;\n }\n }\n\n return `\n \n \n \n `;\n }\n\n /**\n Returns {@link Icon} sizes.\n\n @return {IconSizeEnum}\n */\n static get size() {\n return size;\n }\n\n /**\n Returns {@link Icon} autoAriaLabel options.\n\n @return {IconAutoAriaLabelEnum}\n */\n static get autoAriaLabel() {\n return autoAriaLabel;\n }\n\n /**\n Loads the SVG icons. It's requesting the icons based on the JS file path by default.\n\n @param {String} [url] SVG icons url.\n */\n static load(url) {\n const resolveIconsPath = (iconsPath) => {\n const path = commons._script.src;\n if (iconsExternal === 'js') {\n iconsPath = iconsPath.replace('.svg', '.js');\n }\n\n return `${path.split('/').slice(0, -iconsPath.split('/').length).join('/')}/${iconsPath}`;\n };\n\n if (url === SPECTRUM_ICONS) {\n url = resolveIconsPath(SPECTRUM_ICONS_PATH);\n } else if (url === SPECTRUM_ICONS_COLOR) {\n url = resolveIconsPath(SPECTRUM_ICONS_COLOR_PATH);\n } else if (url === SPECTRUM_CSS_ICONS) {\n url = resolveIconsPath(SPECTRUM_CSS_ICONS_PATH);\n }\n\n loadIcons(url);\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n autoarialabel: 'autoAriaLabel'\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['autoarialabel', 'icon', 'size', 'alt', 'title']);\n }\n\n /** @ignore */\n attributeChangedCallback(name, oldValue, value) {\n if (name === 'alt' || name === 'title') {\n this._updateAltText(value);\n } else {\n super.attributeChangedCallback(name, oldValue, value);\n }\n }\n\n /** @ignore */\n connectedCallback() {\n super.connectedCallback();\n\n // Contextual icons need to be checked again\n if (this.hasAttribute('_context')) {\n this.icon = this.icon;\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Set default size\n if (!this._size) {\n this.size = size.SMALL;\n }\n\n const img = this.querySelector(`img:not(.${CLASSNAME}--image)`);\n if (img) {\n this._elements.image = img;\n this._hasRawImage = true;\n this.icon = img.getAttribute('src');\n this._hasRawImage = false;\n }\n }\n});\n\n// Load icon collections by default\nconst iconCollections = [SPECTRUM_ICONS_COLOR];\nlet extension = '.svg';\nif (Icon._iconsExternal() === 'off' || Icon._iconsExternal() === 'js') {\n iconCollections.push(SPECTRUM_CSS_ICONS);\n iconCollections.push(SPECTRUM_ICONS);\n\n if (Icon._iconsExternal() === 'js') {\n extension = '.js';\n }\n}\niconCollections.forEach(iconSet => Icon.load(resourcesPath ? `${resourcesPath}${iconSet}${extension}` : iconSet));\n\nexport default Icon;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-icon/src/scripts/Icon.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1098, "kind": "variable", "name": "SPECTRUM_ICONS_IDENTIFIER", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~SPECTRUM_ICONS_IDENTIFIER", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1099, "kind": "variable", "name": "SPECTRUM_COLORED_ICONS_IDENTIFIER", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~SPECTRUM_COLORED_ICONS_IDENTIFIER", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 24, "undocument": true, "type": { "types": [ "string[]" ] }, "ignore": true }, { "__docId__": 1100, "kind": "variable", "name": "resourcesPath", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~resourcesPath", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 36, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1101, "kind": "variable", "name": "IS_IE11", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~IS_IE11", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 42, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1102, "kind": "variable", "name": "iconsExternal", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~iconsExternal", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 43, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1103, "kind": "function", "name": "resolveIconsPath", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~resolveIconsPath", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 48, "undocument": true, "params": [ { "name": "iconsPath", "types": [ "*" ] } ], "return": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1104, "kind": "variable", "name": "URL_REGEX", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~URL_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used to match URLs. Assume it's a URL if it has a slash, colon, or dot.", "lineNumber": 58, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1105, "kind": "variable", "name": "TEMPLATE_REGEX", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~TEMPLATE_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used to match unresolved templates e.g. for data-binding", "lineNumber": 65, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1106, "kind": "variable", "name": "SPLIT_CAMELCASE_REGEX", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~SPLIT_CAMELCASE_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used to split camel case icon names into more screen-reader friendly alt text.", "lineNumber": 72, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1107, "kind": "variable", "name": "SPECTRUM_ICONS_IDENTIFIER_REGEX", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~SPECTRUM_ICONS_IDENTIFIER_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used to match the sized spectrum icon prefix", "lineNumber": 79, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1108, "kind": "variable", "name": "ICONS_VARIANT_POSTFIX_REGEX", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~ICONS_VARIANT_POSTFIX_REGEX", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Regex used match the variant postfix for an icon", "lineNumber": 86, "ignore": true, "type": { "types": [ "undefined" ] } }, { "__docId__": 1109, "kind": "variable", "name": "ICON_ALT_TRANSLATION_HINT", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~ICON_ALT_TRANSLATION_HINT", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Translation hint used for localizing default alt text for an icon", "lineNumber": 93, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 1110, "kind": "function", "name": "capitalize", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~capitalize", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Returns capitalized string. This is used to map the icons with their SVG counterpart.", "lineNumber": 102, "ignore": true, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "s", "description": "" } ], "return": { "nullable": null, "types": [ "String" ], "spread": false, "description": "" } }, { "__docId__": 1111, "kind": "typedef", "name": "IconSizeEnum", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~IconSizeEnum", "access": "public", "description": "Enumeration for {@link Icon} sizes.", "lineNumber": 124, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_EXTRA_SMALL", "description": "Extra extra small size icon, typically 9px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_SMALL", "description": "Extra small size icon, typically 12px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SMALL", "description": "Small size icon, typically 18px size. This is the default size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MEDIUM", "description": "Medium size icon, typically 24px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "LARGE", "description": "Large icon, typically 36px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_LARGE", "description": "Extra large icon, typically 48px size." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "EXTRA_EXTRA_LARGE", "description": "Extra extra large icon, typically 72px size." } ], "type": { "types": [ "Object" ], "optional": false, "name": "IconSizeEnum" } }, { "__docId__": 1112, "kind": "typedef", "name": "IconAutoAriaLabelEnum", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~IconAutoAriaLabelEnum", "access": "public", "description": "Enumeration for {@link Icon} autoAriaLabel value.", "lineNumber": 145, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "The aria-label attribute is automatically set based on the icon name." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "The aria-label attribute is not set and has to be provided explicitly." } ], "type": { "types": [ "Object" ], "optional": false, "name": "IconAutoAriaLabelEnum" } }, { "__docId__": 1113, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 151, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1114, "kind": "variable", "name": "ALL_SIZE_CLASSES", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~ALL_SIZE_CLASSES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 155, "undocument": true, "type": { "types": [ "*[]" ] }, "ignore": true }, { "__docId__": 1115, "kind": "variable", "name": "sizeMap", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~sizeMap", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 161, "undocument": true, "type": { "types": [ "{\"XXS\": number, \"XS\": number, \"S\": number, \"M\": number, \"L\": number, \"XL\": number, \"XXL\": number}" ] }, "ignore": true }, { "__docId__": 1116, "kind": "variable", "name": "iconCollections", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~iconCollections", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 571, "undocument": true, "type": { "types": [ "undefined[]" ] }, "ignore": true }, { "__docId__": 1117, "kind": "variable", "name": "extension", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~extension", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 572, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1118, "kind": "variable", "name": "Icon", "memberof": "coral-spectrum/coral-component-icon/src/scripts/Icon.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/Icon.js~Icon", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Icon}", "description": "An Icon component. Icon ships with a set of SVG icons.", "lineNumber": 178, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Icon" }, { "tagName": "@classdesc", "tagValue": "An Icon component. Icon ships with a set of SVG icons." }, { "tagName": "@htmltag", "tagValue": "coral-icon" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Icon();" ], "see": [ "../examples/#icon" ], "type": { "types": [ "*" ] } }, { "__docId__": 1119, "kind": "file", "name": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js", "content": "/**\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nconst SPECTRUM_ICONS = 'spectrum-icons';\nconst SPECTRUM_ICONS_COLOR = 'spectrum-icons-color';\nconst SPECTRUM_CSS_ICONS = 'spectrum-css-icons';\n\nexport {\n SPECTRUM_ICONS,\n SPECTRUM_ICONS_COLOR,\n SPECTRUM_CSS_ICONS\n};\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-icon/src/scripts/iconCollection.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1120, "kind": "variable", "name": "SPECTRUM_ICONS", "memberof": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js~SPECTRUM_ICONS", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SPECTRUM_ICONS}", "description": "Copyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.", "lineNumber": 13, "type": { "types": [ "string" ] } }, { "__docId__": 1121, "kind": "variable", "name": "SPECTRUM_ICONS_COLOR", "memberof": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js~SPECTRUM_ICONS_COLOR", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SPECTRUM_ICONS_COLOR}", "description": null, "lineNumber": 14, "undocument": true, "type": { "types": [ "string" ] } }, { "__docId__": 1122, "kind": "variable", "name": "SPECTRUM_CSS_ICONS", "memberof": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js", "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/iconCollection.js~SPECTRUM_CSS_ICONS", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SPECTRUM_CSS_ICONS}", "description": null, "lineNumber": 15, "undocument": true, "type": { "types": [ "string" ] } }, { "__docId__": 1123, "kind": "file", "name": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {SPECTRUM_ICONS_COLOR} from './iconCollection';\n\nfunction handleError(string) {\n string = `Coral.Icon#load: ${string}`;\n const error = new Error(string);\n\n console.error(error.toString());\n}\n\nfunction injectSVG(svgURL) {\n // 200 for web servers, 0 for CEP panels\n if (this.status !== 200 && this.status !== 0) {\n handleError(`failed to fetch icons, server returned ${this.status}`);\n return;\n }\n\n // Parse the SVG\n const parser = new DOMParser();\n try {\n const doc = parser.parseFromString(this.responseText, 'image/svg+xml');\n const svg = doc.firstChild;\n\n // Make sure a real SVG was returned\n if (svg && svg.tagName === 'svg') {\n if (svgURL.indexOf(SPECTRUM_ICONS_COLOR) !== -1) {\n // Insert it into the body\n if (document.body) {\n document.body.appendChild(svg);\n } else {\n document.addEventListener('DOMContentLoaded', () => {\n document.body.appendChild(svg);\n });\n }\n } else {\n document.head.appendChild(svg);\n }\n } else {\n handleError('parsed SVG document contained something other than an SVG');\n }\n } catch (err) {\n handleError(`error parsing SVG: ${err}`);\n }\n}\n\nfunction loadIcons(svgURL) {\n if (svgURL.slice(-3) === '.js') {\n // Injects the SVG icons in the document\n const script = document.createElement('script');\n script.async = true;\n script.type = 'text/javascript';\n script.src = svgURL;\n document.head.appendChild(script);\n } else {\n // Request the SVG icons\n const req = new XMLHttpRequest();\n req.open('GET', svgURL, true);\n req.addEventListener('load', injectSVG.bind(req, svgURL));\n req.addEventListener('error', () => {\n handleError('Request failed');\n });\n req.send();\n }\n}\n\nexport default loadIcons;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-icon/src/scripts/loadIcons.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1124, "kind": "function", "name": "handleError", "memberof": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js~handleError", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 15, "undocument": true, "params": [ { "name": "string", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1125, "kind": "function", "name": "injectSVG", "memberof": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js~injectSVG", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "params": [ { "name": "svgURL", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1126, "kind": "function", "name": "loadIcons", "memberof": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-icon/src/scripts/loadIcons.js~loadIcons", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{loadIcons}", "description": null, "lineNumber": 57, "undocument": true, "params": [ { "name": "svgURL", "types": [ "*" ] } ], "return": null }, { "__docId__": 1127, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/AnchorList.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {commons} from '../../../coral-utils';\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseList} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-AnchorList';\n\n/**\n @class Coral.AnchorList\n @classdesc An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis.\n @htmltag coral-anchorlist\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseList}\n */\nconst AnchorList = Decorator(class extends BaseList(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n 'click [coral-list-item]': '_onItemClick'\n }));\n }\n\n /** @private */\n get _itemTagName() {\n // Used for Collection\n return 'coral-anchorlist-item';\n }\n\n /** @private */\n get _itemBaseTagName() {\n // Used for Collection\n return 'a';\n }\n\n _onItemClick(event) {\n this._trackEvent('click', 'coral-anchorlist-item', event, event.matchedTarget);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n});\n\nexport default AnchorList;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/AnchorList.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1128, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/AnchorList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/AnchorList.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1129, "kind": "variable", "name": "AnchorList", "memberof": "coral-spectrum/coral-component-list/src/scripts/AnchorList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/AnchorList.js~AnchorList", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{AnchorList}", "description": "An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis.", "lineNumber": 28, "unknown": [ { "tagName": "@class", "tagValue": "Coral.AnchorList" }, { "tagName": "@classdesc", "tagValue": "An AnchorList component that supports multi-line text, icons, and text wrapping with ellipsis." }, { "tagName": "@htmltag", "tagValue": "coral-anchorlist" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseList}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.AnchorList();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1130, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseListItem} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-AnchorList-item';\n\n/**\n @class Coral.AnchorList.Item\n @classdesc An AnchorList item component\n @htmltag coral-anchorlist-item\n @extends {HTMLAnchorElement}\n @extends {BaseComponent}\n @extends {BaseListItem}\n */\nconst AnchorListItem = Decorator(class extends BaseListItem(BaseComponent(HTMLAnchorElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents({\n click: '_onClick'\n });\n }\n\n /**\n Whether this field is disabled or not.\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return super.disabled;\n }\n\n set disabled(value) {\n super.disabled = value;\n\n if (this.disabled) {\n // It's not tabbable anymore\n this.setAttribute('tabindex', '-1');\n } else {\n // Now it's tabbable\n this.setAttribute('tabindex', '0');\n }\n }\n\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.content || this).textContent.replace(/\\s{2,}/g, ' ').trim() :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /** @private */\n _onClick(event) {\n // Support disabled property\n if (this.disabled) {\n event.preventDefault();\n }\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n});\n\nexport default AnchorListItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1131, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1132, "kind": "variable", "name": "AnchorListItem", "memberof": "coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/AnchorListItem.js~AnchorListItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{AnchorList}", "description": "An AnchorList item component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.AnchorList.Item" }, { "tagName": "@classdesc", "tagValue": "An AnchorList item component" }, { "tagName": "@htmltag", "tagValue": "coral-anchorlist-item" }, { "tagName": "@extends", "tagValue": "{HTMLAnchorElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseListItem}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.AnchorList.Item();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1133, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/ButtonList.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {commons} from '../../../coral-utils';\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseList} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ButtonList';\n\n/**\n @class Coral.ButtonList\n @classdesc A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis.\n @htmltag coral-buttonlist\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseList}\n */\nconst ButtonList = Decorator(class extends BaseList(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(commons.extend(this._events, {\n 'click [coral-list-item]': '_onItemClick'\n }));\n }\n\n /** @private */\n get _itemTagName() {\n // Used for Collection\n return 'coral-buttonlist-item';\n }\n\n /** @private */\n get _itemBaseTagName() {\n // Used for Collection\n return 'button';\n }\n\n _onItemClick(event) {\n this._trackEvent('click', 'coral-buttonlist-item', event, event.matchedTarget);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n});\n\nexport default ButtonList;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/ButtonList.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1134, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/ButtonList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ButtonList.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1135, "kind": "variable", "name": "ButtonList", "memberof": "coral-spectrum/coral-component-list/src/scripts/ButtonList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ButtonList.js~ButtonList", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ButtonList}", "description": "A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis.", "lineNumber": 28, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ButtonList" }, { "tagName": "@classdesc", "tagValue": "A ButtonList component that supports multi-line text, icons, and text wrapping with ellipsis." }, { "tagName": "@htmltag", "tagValue": "coral-buttonlist" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseList}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ButtonList();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1136, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseListItem} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-ButtonList-item';\n\n/**\n @class Coral.ButtonList.Item\n @classdesc An ButtonList item component\n @htmltag coral-buttonlist-item\n @extends {HTMLButtonElement}\n @extends {BaseComponent}\n @extends {BaseListItem}\n */\nconst ButtonListItem = Decorator(class extends BaseListItem(BaseComponent(HTMLButtonElement)) {\n /**\n Inherited from {@link BaseComponent#trackingElement}.\n */\n get trackingElement() {\n return typeof this._trackingElement === 'undefined' ?\n // keep spaces to only 1 max and trim. this mimics native html behaviors\n (this.content || this).textContent.replace(/\\s{2,}/g, ' ').trim() :\n this._trackingElement;\n }\n\n set trackingElement(value) {\n super.trackingElement = value;\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n }\n});\n\nexport default ButtonListItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1137, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 17, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1138, "kind": "variable", "name": "ButtonListItem", "memberof": "coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ButtonListItem.js~ButtonListItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{ButtonList}", "description": "An ButtonList item component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.ButtonList.Item" }, { "tagName": "@classdesc", "tagValue": "An ButtonList item component" }, { "tagName": "@htmltag", "tagValue": "coral-buttonlist-item" }, { "tagName": "@extends", "tagValue": "{HTMLButtonElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseListItem}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.ButtonList.Item();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1139, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/List.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseList} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.List\n @classdesc A List component that supports multi-line text, icons, and text wrapping with ellipsis.\n @htmltag coral-list\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseList}\n */\nconst List = Decorator(class extends BaseList(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(this._events);\n }\n});\n\nexport default List;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/List.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1140, "kind": "variable", "name": "List", "memberof": "coral-spectrum/coral-component-list/src/scripts/List.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/List.js~List", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{List}", "description": "A List component that supports multi-line text, icons, and text wrapping with ellipsis.", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.List" }, { "tagName": "@classdesc", "tagValue": "A List component that supports multi-line text, icons, and text wrapping with ellipsis." }, { "tagName": "@htmltag", "tagValue": "coral-list" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseList}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.List();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1141, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/ListDivider.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Menu-divider';\n\n/**\n @class Coral.List.Divider\n @classdesc The List divider\n @htmltag coral-list-divider\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst ListDivider = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // a11y\n this.setAttribute('role', 'separator');\n }\n});\n\nexport default ListDivider;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/ListDivider.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1142, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/ListDivider.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ListDivider.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 16, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1143, "kind": "variable", "name": "ListDivider", "memberof": "coral-spectrum/coral-component-list/src/scripts/ListDivider.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ListDivider.js~ListDivider", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{List}", "description": "The List divider", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.List.Divider" }, { "tagName": "@classdesc", "tagValue": "The List divider" }, { "tagName": "@htmltag", "tagValue": "coral-list-divider" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.List.Divider();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1144, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/ListItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {BaseListItem} from '../../../coral-base-list';\nimport {Decorator} from '../../../coral-decorator';\n\n/**\n @class Coral.List.Item\n @classdesc A List item component\n @htmltag coral-list-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n @extends {BaseListItem}\n */\nconst ListItem = Decorator(class extends BaseListItem(BaseComponent(HTMLElement)) {\n /** @ignore */\n constructor() {\n super();\n\n // Events\n this._delegateEvents(this._events);\n }\n});\n\nexport default ListItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/ListItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1145, "kind": "variable", "name": "ListItem", "memberof": "coral-spectrum/coral-component-list/src/scripts/ListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ListItem.js~ListItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{List}", "description": "A List item component", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.List.Item" }, { "tagName": "@classdesc", "tagValue": "A List item component" }, { "tagName": "@htmltag", "tagValue": "coral-list-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" }, { "tagName": "@extends", "tagValue": "{BaseListItem}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.List.Item();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1146, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/ListItemContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.List.Item.Content\n @classdesc The List item content\n @htmltag coral-list-item-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-list-item-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/ListItemContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1147, "kind": "function", "name": "ListItemContent", "memberof": "coral-spectrum/coral-component-list/src/scripts/ListItemContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/ListItemContent.js~ListItemContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{List}", "description": "The List item content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.List.Item.Content" }, { "tagName": "@classdesc", "tagValue": "The List item content" }, { "tagName": "@htmltag", "tagValue": "coral-list-item-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.List.Item.Content();" ], "see": [ "../examples/#list" ], "params": [] }, { "__docId__": 1148, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {SelectableCollection} from '../../../coral-collection';\nimport '../../../coral-component-wait';\nimport loadIndicator from '../templates/loadIndicator';\nimport {transform, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst KEYPRESS_TIMEOUT_DURATION = 1000;\n\n/**\n The distance, in pixels, from the bottom of the SelectList at which we trigger a scrollbottom event. For example, a\n value of 50 would indicate a scrollbottom event should be triggered when the user scrolls to within 50 pixels of the\n bottom.\n\n @type {Number}\n @ignore\n */\nconst SCROLL_BOTTOM_THRESHOLD = 50;\n\n/**\n The number of milliseconds for which scroll events should be debounced.\n\n @type {Number}\n @ignore\n */\nconst SCROLL_DEBOUNCE = 100;\n\n/** @ignore */\nconst ITEM_TAG_NAME = 'coral-selectlist-item';\n\n/** @ignore */\nconst GROUP_TAG_NAME = 'coral-selectlist-group';\n\nconst CLASSNAME = '_coral-Menu';\n\n/**\n @class Coral.SelectList\n @classdesc A SelectList component is a selectable list of items.\n @htmltag coral-selectlist\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst SelectList = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Attach events\n this._delegateEvents({\n 'scroll': '_onScroll',\n 'mouseenter': '_onMouseEnter',\n 'capture:blur': '_onBlur',\n\n 'click coral-selectlist-item': '_onItemClick',\n\n 'key:space coral-selectlist-item': '_onToggleItemKey',\n 'key:return coral-selectlist-item': '_onToggleItemKey',\n 'key:pageup coral-selectlist-item': '_focusPreviousItem',\n 'key:left coral-selectlist-item': '_focusPreviousItem',\n 'key:up coral-selectlist-item': '_focusPreviousItem',\n 'key:pagedown coral-selectlist-item': '_focusNextItem',\n 'key:right coral-selectlist-item': '_focusNextItem',\n 'key:down coral-selectlist-item': '_focusNextItem',\n 'key:home coral-selectlist-item': '_onHomeKey',\n 'key:end coral-selectlist-item': '_onEndKey',\n 'keypress coral-selectlist-item': '_onKeyPress',\n\n // private\n 'coral-selectlist-item:_selectedchanged': '_onItemSelectedChanged'\n });\n\n this._keypressTimeoutDuration = KEYPRESS_TIMEOUT_DURATION;\n\n // Templates\n this._elements = {};\n loadIndicator.call(this._elements);\n\n // Used for eventing\n this._oldSelection = [];\n\n // Used for interaction\n this._keypressTimeoutID = null;\n this._keypressSearchString = '';\n\n // we correctly bind the scroll event\n this._onDebouncedScroll = this._onDebouncedScroll.bind(this);\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n The Collection Interface that allows interacting with the {@link SelectListGroup} elements that the\n SelectList contains. This includes items nested inside groups. To manage items contained within a specific\n group, see {@link SelectListGroup#items}.\n\n @type {SelectableCollection}\n @readonly\n */\n get groups() {\n // just init on demand\n if (!this._groups) {\n this._groups = new SelectableCollection({\n host: this,\n itemTagName: GROUP_TAG_NAME,\n onItemAdded: this._validateSelection,\n onItemRemoved: this._validateSelection\n });\n }\n return this._groups;\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: ITEM_TAG_NAME,\n onItemAdded: this._validateSelection,\n onItemRemoved: this._validateSelection\n });\n }\n return this._items;\n }\n\n /**\n The selected item in the SelectList.\n\n @type {HTMLElement}\n @readonly\n */\n get selectedItem() {\n return this.items._getAllSelected()[0] || null;\n }\n\n /**\n The selected items of the SelectList.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.items._getAllSelected();\n }\n\n /**\n Indicates whether the SelectList accepts multiple selected items.\n @type {Boolean}\n @default false\n @htmlattribute multiple\n @htmlattributereflected\n */\n get multiple() {\n return this._multiple || false;\n }\n\n set multiple(value) {\n this._multiple = transform.booleanAttr(value);\n this._reflectAttribute('multiple', this._multiple);\n\n this[this._multiple ? 'setAttribute' : 'removeAttribute']('aria-multiselectable', this._multiple);\n\n this._validateSelection();\n }\n\n /**\n Whether items are being loaded for the SelectList. Toggling this merely shows or hides a loading indicator.\n\n @default false\n @type {Boolean}\n @htmlattribute loading\n @htmlattributereflected\n */\n get loading() {\n return this._loading || false;\n }\n\n set loading(value) {\n this._loading = transform.booleanAttr(value);\n this._reflectAttribute('loading', this._loading);\n\n const load = this._elements.loadIndicator;\n\n if (this.loading) {\n // we decide first if we need to scroll to the bottom since adding the load will change the dimentions\n const scrollToBottom = this.scrollTop >= this.scrollHeight - this.clientHeight;\n\n // inserts the item at the end\n this.appendChild(load);\n\n // we make the load indicator visible\n if (scrollToBottom) {\n /** @ignore */\n this.scrollTop = this.scrollHeight;\n }\n } else {\n load.remove();\n }\n }\n\n /** @private **/\n get _tabTarget() {\n return this.__tabTarget || null;\n }\n\n set _tabTarget(value) {\n this.__tabTarget = value;\n\n // Set all but the current set _tabTarget to not be a tab target:\n this.items._getSelectableItems().forEach((item) => {\n item.setAttribute('tabindex', !value || item === value ? 0 : -1);\n });\n }\n\n /** @private */\n _toggleItemSelection(item) {\n if (item) {\n const beforeChangeEvent = this.trigger('coral-selectlist:beforechange', {item});\n\n if (!beforeChangeEvent.defaultPrevented) {\n item[item.hasAttribute('selected') ? 'removeAttribute' : 'setAttribute']('selected', '');\n }\n }\n }\n\n /** @private */\n _onBlur() {\n // required otherwise the latest item that had the focus would get it again instead of the selected item\n this._resetTabTarget();\n }\n\n /** @private */\n _onItemClick(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const item = event.matchedTarget;\n this._toggleItemSelection(item);\n this._focusItem(item);\n }\n\n /** @private */\n _focusItem(item) {\n if (item) {\n item.focus();\n }\n\n this._tabTarget = item;\n }\n\n /** @private */\n _onToggleItemKey(event) {\n event.preventDefault();\n event.stopPropagation();\n\n const item = event.target;\n\n this._toggleItemSelection(item);\n this._focusItem(item);\n }\n\n /** @private */\n _focusPreviousItem(event) {\n event.preventDefault();\n\n this._focusItem(this.items._getPreviousSelectable(event.target));\n }\n\n /** @private */\n _focusNextItem(event) {\n event.preventDefault();\n\n this._focusItem(this.items._getNextSelectable(event.target));\n }\n\n _focusFirstItem() {\n this._focusItem(this.items._getFirstSelectable());\n }\n\n _focusLastItem() {\n this._focusItem(this.items._getLastSelectable());\n }\n\n /** @private */\n _onHomeKey(event) {\n event.preventDefault();\n\n this._focusFirstItem();\n }\n\n /** @private */\n _onEndKey(event) {\n event.preventDefault();\n\n this._focusLastItem();\n }\n\n /**\n Handles keypress event for alphanumeric search.\n\n @param {KeyboardEvent} event\n The keyboard event.\n @private\n */\n _onKeyPress(event) {\n // The string entered when the key was pressed\n const newString = String.fromCharCode(event.which);\n\n // Clear the timeout before the _keypressSearchString is cleared\n window.clearTimeout(this._keypressTimeoutID);\n\n // If the character entered does not match the last character entered, append it to the _keypressSearchString\n if (newString !== this._keypressSearchString) {\n this._keypressSearchString += newString;\n }\n\n // Set a timeout so that _keypressSearchString is cleared after 1 second\n this._keypressTimeoutID = window.setTimeout(() => {\n this._keypressSearchString = '';\n }, this._keypressTimeoutDuration);\n\n // Search within selectable items\n const selectableItems = this.items._getSelectableItems().filter(item => !item.hasAttribute('hidden') && item.offsetParent);\n\n // Remember the index of the focused item within the array of selectable items\n const currentIndex = selectableItems.indexOf(this._tabTarget);\n\n this._keypressSearchString = this._keypressSearchString.trim().toLowerCase();\n\n let start;\n // If the currentIndex is -1, meaning no item has focus, start from the beginning\n if (currentIndex === -1) {\n start = 0;\n } else if (this._keypressSearchString.length === 1) {\n // Otherwise, if there is only one character to compare, start comparing from the next item after the currently\n // focused item. This allows us to iterate through items beginning with the same character\n start = currentIndex + 1;\n } else {\n start = currentIndex;\n }\n\n let newFocusItem;\n let comparison;\n let item;\n\n // Compare _keypressSearchString against item text until a match is found\n for (let i = start ; i < selectableItems.length ; i++) {\n item = selectableItems[i];\n comparison = item.textContent.trim().toLowerCase();\n if (comparison.indexOf(this._keypressSearchString) === 0) {\n newFocusItem = item;\n break;\n }\n }\n\n // If no match is found, continue searching for a match starting from the top\n if (!newFocusItem) {\n for (let j = 0 ; j < start ; j++) {\n item = selectableItems[j];\n comparison = item.textContent.trim().toLowerCase();\n if (comparison.indexOf(this._keypressSearchString) === 0) {\n newFocusItem = item;\n break;\n }\n }\n }\n\n // If a match has been found, focus the matched item\n if (newFocusItem !== undefined) {\n this._focusItem(newFocusItem);\n\n // Keyboard is being used so apply focus-ring\n const focusedItem = this.querySelector('.focus-ring');\n if (focusedItem) {\n focusedItem.classList.remove('focus-ring');\n }\n newFocusItem.classList.add('focus-ring');\n }\n }\n\n _debounceResetTabTarget(forceFirst = false) {\n window.cancelAnimationFrame(this._resetTabTargetdebouncedId);\n this._resetTabTargetdebouncedId = window.requestAnimationFrame(() => {\n this._resetTabTarget(forceFirst);\n });\n }\n\n /**\n Determine what item should get focus (if any) when the user tries to tab into the SelectList. This should be the\n first selected item, or the first selectable item otherwise. When neither is available, it cannot be tabbed into\n the SelectList.\n\n @private\n */\n _resetTabTarget(forceFirst = false) {\n let items = this.items._getAllSelected().filter(item => !item.hasAttribute('hidden') && item.offsetParent);\n\n if (items.length === 0) {\n items = this.items._getSelectableItems().filter(item => !item.hasAttribute('hidden') && item.offsetParent);\n }\n\n this._tabTarget = forceFirst ? items[0] : (items.find(item => item.tabIndex === 0) || items[0]);\n }\n\n /** @private */\n _onScroll() {\n window.clearTimeout(this._scrollTimeout);\n this._scrollTimeout = window.setTimeout(this._onDebouncedScroll, SCROLL_DEBOUNCE);\n }\n\n _onMouseEnter() {\n if (this.contains(document.activeElement)) {\n document.activeElement.blur();\n }\n }\n\n /**\n @emits {coral-selectlist:scrollbottom}\n\n @private\n */\n _onDebouncedScroll() {\n if (this.scrollTop >= this.scrollHeight - this.clientHeight - SCROLL_BOTTOM_THRESHOLD) {\n this.trigger('coral-selectlist:scrollbottom');\n }\n }\n\n /** @private */\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _validateSelection(item) {\n const selectedItems = this.selectedItems;\n\n if (!this.multiple) {\n // Last selected item wins if multiple selection while not allowed\n item = item || selectedItems[selectedItems.length - 1];\n\n if (item && item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n }\n\n this._debounceResetTabTarget();\n\n this._triggerChangeEvent();\n }\n\n /** @private */\n _triggerChangeEvent() {\n const selectedItems = this.selectedItems;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && this._arraysAreDifferent(selectedItems, oldSelection)) {\n // We differentiate whether multiple is on or off and return an array or HTMLElement respectively\n if (this.multiple) {\n this.trigger('coral-selectlist:change', {\n oldSelection: oldSelection,\n selection: selectedItems\n });\n } else {\n // Return all items if we just switched from multiple=true to multiple=false and we had >1 selected items\n this.trigger('coral-selectlist:change', {\n oldSelection: oldSelection.length > 1 ? oldSelection : oldSelection[0] || null,\n selection: selectedItems[0] || null\n });\n }\n\n this._oldSelection = selectedItems;\n }\n }\n\n /** @private */\n _arraysAreDifferent(selection, oldSelection) {\n let diff = [];\n\n if (oldSelection.length === selection.length) {\n diff = oldSelection.filter((item) => selection.indexOf(item) === -1);\n }\n\n // since we guarantee that they are arrays, we can start by comparing their size\n return oldSelection.length !== selection.length || diff.length !== 0;\n }\n\n /** @ignore */\n focus() {\n // Avoids moving the focus once it is already inside the component\n if (!this.contains(document.activeElement)) {\n this._resetTabTarget();\n this._focusItem(this._tabTarget);\n }\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['loading', 'multiple']);\n }\n\n /** @ignore */\n render() {\n this.classList.add(CLASSNAME);\n\n // adds the role to support accessibility\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listbox');\n }\n\n if (!this.hasAttribute('aria-label')) {\n this.setAttribute('aria-label', i18n.get('List'));\n }\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n this._validateSelection();\n this._resetTabTarget();\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItems;\n }\n\n /**\n Triggered when the user scrolls to near the bottom of the {@link SelectList}. This can be useful for when additional items can\n be loaded asynchronously (i.e., infinite scrolling).\n\n @typedef {CustomEvent} coral-selectlist:scrollbottom\n */\n\n /**\n Triggered before the {@link SelectList} selected item is changed on user interaction. Can be used to cancel selection.\n\n @typedef {CustomEvent} coral-selectlist:change\n\n @property {SelectListItem} event.detail.item\n The selected item.\n */\n\n /**\n Triggered when the {@link SelectList} selected item has changed.\n\n @typedef {CustomEvent} coral-selectlist:change\n\n @property {SelectListItem} detail.oldSelection\n The prior selected item(s).\n @property {SelectListItem} detail.selection\n The newly selected item(s).\n */\n});\n\nexport default SelectList;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/SelectList.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1149, "kind": "variable", "name": "KEYPRESS_TIMEOUT_DURATION", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~KEYPRESS_TIMEOUT_DURATION", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "number" ] }, "ignore": true }, { "__docId__": 1150, "kind": "variable", "name": "SCROLL_BOTTOM_THRESHOLD", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~SCROLL_BOTTOM_THRESHOLD", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "The distance, in pixels, from the bottom of the SelectList at which we trigger a scrollbottom event. For example, a\nvalue of 50 would indicate a scrollbottom event should be triggered when the user scrolls to within 50 pixels of the\nbottom.", "lineNumber": 30, "ignore": true, "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null } }, { "__docId__": 1151, "kind": "variable", "name": "SCROLL_DEBOUNCE", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~SCROLL_DEBOUNCE", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "The number of milliseconds for which scroll events should be debounced.", "lineNumber": 38, "ignore": true, "type": { "nullable": null, "types": [ "Number" ], "spread": false, "description": null } }, { "__docId__": 1152, "kind": "variable", "name": "ITEM_TAG_NAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~ITEM_TAG_NAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 41, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 1153, "kind": "variable", "name": "GROUP_TAG_NAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~GROUP_TAG_NAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 44, "ignore": true, "type": { "types": [ "string" ] } }, { "__docId__": 1154, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 46, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1155, "kind": "variable", "name": "SelectList", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~SelectList", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SelectList}", "description": "A SelectList component is a selectable list of items.", "lineNumber": 55, "unknown": [ { "tagName": "@class", "tagValue": "Coral.SelectList" }, { "tagName": "@classdesc", "tagValue": "A SelectList component is a selectable list of items." }, { "tagName": "@htmltag", "tagValue": "coral-selectlist" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.SelectList();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1156, "kind": "typedef", "name": "coral-selectlist:scrollbottom", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~coral-selectlist:scrollbottom", "access": "public", "description": "Triggered when the user scrolls to near the bottom of the {@link SelectList}. This can be useful for when additional items can\nbe loaded asynchronously (i.e., infinite scrolling).", "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-selectlist:scrollbottom" } }, { "__docId__": 1157, "kind": "typedef", "name": "coral-selectlist:change", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~coral-selectlist:change", "access": "public", "description": "Triggered before the {@link SelectList} selected item is changed on user interaction. Can be used to cancel selection.", "properties": [ { "nullable": null, "types": [ "SelectListItem" ], "spread": false, "optional": false, "name": "event.detail.item", "description": "The selected item." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-selectlist:change" } }, { "__docId__": 1158, "kind": "typedef", "name": "coral-selectlist:change", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectList.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectList.js~coral-selectlist:change", "access": "public", "description": "Triggered when the {@link SelectList} selected item has changed.", "properties": [ { "nullable": null, "types": [ "SelectListItem" ], "spread": false, "optional": false, "name": "detail.oldSelection", "description": "The prior selected item(s)." }, { "nullable": null, "types": [ "SelectListItem" ], "spread": false, "optional": false, "name": "detail.selection", "description": "The newly selected item(s)." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-selectlist:change" } }, { "__docId__": 1159, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {SelectableCollection} from '../../../coral-collection';\nimport {transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-SelectList-group';\n\n/**\n @class Coral.SelectList.Group\n @classdesc A SelectList group component\n @htmltag coral-selectlist-group\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst SelectListGroup = Decorator(class extends BaseComponent(HTMLElement) {\n /**\n The label of the group. It reflects the label attribute to the DOM.\n\n @type {String}\n @default \"\"\n @htmlattribute label\n @htmlattributereflected\n */\n get label() {\n return this._label || '';\n }\n\n set label(value) {\n this._label = transform.string(value);\n this._reflectAttribute('label', this._label);\n\n this.setAttribute('aria-label', this._label);\n }\n\n /**\n The Collection Interface that allows interacting with the items that the component contains.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n // just init on demand\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-selectlist-item'\n });\n }\n return this._items;\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['label']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n this.setAttribute('role', 'group');\n }\n});\n\nexport default SelectListGroup;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1160, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 18, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1161, "kind": "variable", "name": "SelectListGroup", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListGroup.js~SelectListGroup", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SelectList}", "description": "A SelectList group component", "lineNumber": 27, "unknown": [ { "tagName": "@class", "tagValue": "Coral.SelectList.Group" }, { "tagName": "@classdesc", "tagValue": "A SelectList group component" }, { "tagName": "@htmltag", "tagValue": "coral-selectlist-group" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.SelectList.Group();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1162, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {transform} from '../../../coral-utils';\nimport {Icon} from '../../../coral-component-icon';\nimport checkIcon from '../templates/checkIcon';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Menu-item';\n\nconst VALID_ARIA_SELECTED_ROLES = [\n 'columnheader',\n 'gridcell',\n 'option',\n 'row',\n 'rowheader',\n 'tab',\n 'treeitem'\n];\n\nconst VALID_ARIA_SELECTED_ROLES_REGEXP = new RegExp(`^(${VALID_ARIA_SELECTED_ROLES.join('|')})$`);\n\n/**\n @class Coral.SelectList.Item\n @classdesc A SelectList item component\n @htmltag coral-selectlist-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst SelectListItem = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Templates\n this._elements = {\n // Fetch or create the content zone element\n content: this.querySelector('coral-selectlist-item-content') || document.createElement('coral-selectlist-item-content')\n };\n checkIcon.call(this._elements, {Icon});\n }\n\n /**\n Value of the item. If not explicitly set, the value of Node.textContent is returned.\n\n @type {String}\n @default \"\"\n @htmlattribute value\n @htmlattributereflected\n */\n get value() {\n return typeof this._value === 'string' ? this._value : this.textContent.replace(/\\s{2,}/g, ' ').trim();\n }\n\n set value(value) {\n this._value = transform.string(value);\n this._reflectAttribute('value', this._value);\n }\n\n /**\n The content element for the item.\n\n @type {SelectListItemContent}\n @contentzone\n */\n get content() {\n return this._getContentZone(this._elements.content);\n }\n\n set content(value) {\n this._setContentZone('content', value, {\n handle: 'content',\n tagName: 'coral-selectlist-item-content',\n insert: function (content) {\n content.classList.add(`${CLASSNAME}Label`);\n\n // Remove content icon before processing content zone\n const checkIcon = this._elements.checkIcon;\n let contentIcon;\n // @polyfill ie11\n // IE11 throws syntax error because of the \"not()\" in the selector if the element is not in the DOM.\n if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.includes('Trident/')) {\n const allContentIcons = Array.prototype.slice.call(content.querySelectorAll('coral-icon'));\n const allContentMenuIcons = Array.prototype.slice.call(content.querySelectorAll('coral-icon._coral-Menu-item-icon'));\n const contentIcons = allContentIcons.filter(icon => allContentMenuIcons.indexOf(icon) === -1);\n contentIcon = contentIcons.length > 0 ? contentIcons[0] : undefined;\n } else {\n contentIcon = content.querySelector('coral-icon:not(._coral-Menu-item-icon)');\n }\n if (contentIcon && contentIcon.icon) {\n contentIcon.remove();\n this.icon = contentIcon.icon;\n const iconElement = this._getIconElement();\n if (contentIcon.alt || contentIcon.title) {\n if (contentIcon.title) {\n iconElement.title = contentIcon.title;\n }\n if (contentIcon.alt) {\n iconElement.alt = contentIcon.alt;\n }\n } else {\n iconElement.alt = '';\n }\n }\n\n this.insertBefore(content, this.contains(checkIcon) ? checkIcon : null);\n }\n });\n }\n\n /**\n The icon to display. See {@link Icon}.\n\n @type {String}\n @default \"\"\n @htmlattribute icon\n */\n get icon() {\n const el = this._getIconElement();\n return el.icon;\n }\n\n set icon(value) {\n const el = this._getIconElement();\n if (transform.string(value) === '') {\n el.remove();\n } else {\n this.insertBefore(el, this.firstChild);\n }\n el.icon = value;\n }\n\n _getIconElement() {\n if (!this._elements.icon) {\n this._elements.icon = this.querySelector('._coral-Menu-item-icon') || new Icon();\n this._elements.icon.size = Icon.size.SMALL;\n this._elements.icon.classList.add('_coral-Menu-item-icon');\n }\n return this._elements.icon;\n }\n\n /**\n Whether the item is selected.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n let _selected = transform.booleanAttr(value);\n\n if(this._selected === _selected) {\n return;\n }\n\n this._selected = _selected;\n this._reflectAttribute('selected', this.disabled ? false : this._selected);\n\n this.classList.toggle('is-selected', this._selected);\n if (this.hasAttribute('role') &&\n VALID_ARIA_SELECTED_ROLES_REGEXP.test(this.getAttribute('role'))) {\n this.setAttribute('aria-selected', this._selected);\n }\n\n // Toggle check icon\n this._elements.checkIcon.hidden = !this._selected;\n\n this.trigger('coral-selectlist-item:_selectedchanged');\n }\n\n /**\n Whether this item is disabled.\n\n @type {Boolean}\n @default false\n @htmlattribute disabled\n @htmlattributereflected\n */\n get disabled() {\n return this._disabled || false;\n }\n\n set disabled(value) {\n this._disabled = transform.booleanAttr(value);\n this._reflectAttribute('disabled', this._disabled);\n\n this.classList.toggle('is-disabled', this._disabled);\n this[this._disabled ? 'setAttribute' : 'removeAttribute']('aria-disabled', this._disabled);\n\n this.selected = this.selected;\n }\n\n get _contentZones() {\n return {'coral-selectlist-item-content': 'content'};\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', 'disabled', 'value']);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'option');\n }\n\n // Support cloneNode\n const template = this.querySelector('._coral-SelectList-icon');\n if (template) {\n template.remove();\n }\n\n // Fetch or create the content content zone element\n const content = this._elements.content;\n\n // Move any remaining elements into the content sub-component\n if (!content.parentNode) {\n while (this.firstChild) {\n content.appendChild(this.firstChild);\n }\n }\n\n // Add template\n this.appendChild(this._elements.checkIcon);\n\n // Assign the content zones, moving them into place in the process\n this.content = content;\n }\n});\n\nexport default SelectListItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1163, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 19, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1164, "kind": "variable", "name": "VALID_ARIA_SELECTED_ROLES", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js~VALID_ARIA_SELECTED_ROLES", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 21, "undocument": true, "type": { "types": [ "string[]" ] }, "ignore": true }, { "__docId__": 1165, "kind": "variable", "name": "VALID_ARIA_SELECTED_ROLES_REGEXP", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js~VALID_ARIA_SELECTED_ROLES_REGEXP", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 31, "undocument": true, "type": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1166, "kind": "variable", "name": "SelectListItem", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js", "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListItem.js~SelectListItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SelectList}", "description": "A SelectList item component", "lineNumber": 40, "unknown": [ { "tagName": "@class", "tagValue": "Coral.SelectList.Item" }, { "tagName": "@classdesc", "tagValue": "A SelectList item component" }, { "tagName": "@htmltag", "tagValue": "coral-selectlist-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.SelectList.Item();" ], "see": [ "../examples/#list" ], "type": { "types": [ "*" ] } }, { "__docId__": 1167, "kind": "file", "name": "coral-spectrum/coral-component-list/src/scripts/SelectListItemContent.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n @class Coral.SelectList.Item.Content\n @classdesc The SelectList Item content\n @htmltag coral-selectlist-item-content\n @return {HTMLElement}\n */\nexport default () => document.createElement('coral-selectlist-item-content');\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-list/src/scripts/SelectListItemContent.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1168, "kind": "function", "name": "SelectListItemContent", "memberof": "coral-spectrum/coral-component-list/src/scripts/SelectListItemContent.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-list/src/scripts/SelectListItemContent.js~SelectListItemContent", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{SelectList}", "description": "The SelectList Item content", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.SelectList.Item.Content" }, { "tagName": "@classdesc", "tagValue": "The SelectList Item content" }, { "tagName": "@htmltag", "tagValue": "coral-selectlist-item-content" } ], "return": { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "description": "" }, "examples": [ "Markup\n", "JS constructor\nnew Coral.SelectList.Item.Content();" ], "see": [ "../examples/#list" ], "params": [] }, { "__docId__": 1169, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport MasonryItem from './MasonryItem';\nimport {SelectableCollection} from '../../../coral-collection';\nimport {validate, transform, commons, i18n} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\nimport MasonryItemAccessibilityState from \"./MasonryItemAccessibilityState\";\n\nconst CLASSNAME = '_coral-Masonry';\n\n/** @ignore */\nconst isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(window.navigator.platform);\n\n/**\n Enumeration for {@link Masonry} selection options.\n\n @typedef {Object} MasonrySelectionModeEnum\n\n @property {String} NONE\n None is default, selection of Masonry items doesn't happen based on click.\n @property {String} SINGLE\n Single selection mode, Masonry behaves like radio input elements.\n @property {String} MULTIPLE\n Multiple selection mode, Masonry behaves like checkbox input elements.\n */\nconst selectionMode = {\n NONE: 'none',\n SINGLE: 'single',\n MULTIPLE: 'multiple'\n};\n\n/**\n Enumeration for {@link Masonry} layouts.\n\n @typedef {Object} MasonryLayoutsEnum\n\n @property {String} FIXED_CENTERED\n A Layout with fixed width centered items.\n @property {String} FIXED_SPREAD\n A layout with fixed width and evenly spread items.\n @property {String} VARIABLE\n A layout with variable width items.\n @property {String} DASHBOARD\n A layout with variable width items which are expanded in their height to fill gaps.\n */\nconst layouts = {\n FIXED_CENTERED: 'fixed-centered',\n FIXED_SPREAD: 'fixed-spread',\n VARIABLE: 'variable',\n DASHBOARD: 'dashboard'\n};\n\n/**\n Enumeration values to enable/disable aria grid support for {@link Masonry}.\n\n @typedef {Object} MasonryAriaGridEnum\n\n @property {String} ON\n Turn on auto aria grid roles.\n @property {String} OFF\n OFF is default. Turn off auto aria grid roles.\n */\nconst ariaGrid = {\n ON: 'on',\n OFF: 'off'\n};\n\n// IE does not set the complete property to true if an image cannot be loaded. This code must be outside of the\n// masonry to make sure that the listener catches images which fail loading before the masonry is initalized.\n// @polyfill ie11\ndocument.addEventListener('error', (event) => {\n const target = event.target;\n if (target && target.tagName === 'IMG') {\n target._loadError = true;\n }\n}, true);\n\n// Ignore children which are being removed\nconst itemFilter = (element) => element && element.tagName === 'CORAL-MASONRY-ITEM' && !element.hasAttribute('_removing');\n\n// Filter out items being removed\nconst isRemovingOrRemoved = (item) => item.hasAttribute('_removing') || !item.parentNode;\n\n/**\n * Returns the position of the second element relative to the first element.\n */\nconst relativePosition = (el1, el2) => {\n const rect1 = el1.getBoundingClientRect();\n const rect2 = el2.getBoundingClientRect();\n return {\n left: rect2.left - rect1.left,\n top: rect2.top - rect1.top\n };\n};\n\nconst weightedDistance = (x1, y1, x2, y2, unitWidth, unitHeight) => Math.sqrt(Math.pow((x2 - x1) / unitWidth, 2) + Math.pow((y2 - y1) / unitHeight, 2));\n\nconst getPreviousItem = (item) => {\n const previousItem = item.previousElementSibling;\n return itemFilter(previousItem) ? previousItem : null;\n};\n\n/**\n @class Coral.Masonry\n @classdesc A Masonry component that allows to lay out items in a masonry grid.\n @htmltag coral-masonry\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Masonry = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // Defaults\n this._loaded = false;\n this._layouted = false;\n this._layoutScheduled = false;\n this._forceDebounce = false;\n this._debounceId = null;\n\n this._newItems = [];\n this._tabbableItem = null;\n\n //a11y\n this._defaultAriaRole = \"group\";\n\n this._ariaGrid = ariaGrid.OFF;\n this._preservedAriaRole = this._defaultAriaRole;\n this._preservedParentAriaRole = null;\n\n this._elements = {\n accessibilityState: this.querySelector('coral-masonry-item-accessibilitystate') || new MasonryItemAccessibilityState()\n };\n\n this._delegateEvents({\n 'global:resize': '_onWindowResize',\n\n // Loaded\n 'global:load': '_updateLoaded',\n 'capture:load img': '_updateLoaded',\n 'capture:error img': '_updateLoaded',\n\n // Drag and drop\n 'coral-dragaction:dragstart coral-masonry-item': '_onItemDragStart',\n 'coral-dragaction:dragover coral-masonry-item': '_onItemDragMove',\n 'coral-dragaction:dragend coral-masonry-item': '_onItemDragEnd',\n\n 'coral-masonry-item:_selecteditemchanged': '_onMasonrySelectedItemChanged',\n\n // Keyboard\n 'capture:focus coral-masonry-item': '_onItemFocus',\n\n // Selection\n 'click coral-masonry-item': '_onItemClick',\n 'key:space coral-masonry-item': '_onItemClick',\n\n // Messenger\n 'coral-masonry-item:_messengerconnected': '_onMessengerConnected'\n });\n\n // Relayout when child elements change or are added/removed\n // Should this mutation observer become a bottleneck, it could be replaced with a resize listener\n this._observer = new MutationObserver(this._scheduleLayout.bind(this, 'mutation'));\n this._observer.observe(this, {\n childList: true,\n subtree: true,\n characterData: true,\n attributes: true\n });\n\n // Used for eventing\n this._oldSelection = [];\n\n // Init the collection mutation observer\n this.items._startHandlingItems(true);\n }\n\n /**\n Allows to interact with the masonry items.\n\n @type {SelectableCollection}\n @readonly\n */\n get items() {\n if (!this._items) {\n this._items = new SelectableCollection({\n host: this,\n itemTagName: 'coral-masonry-item',\n // allows masonry to be nested\n itemSelector: ':scope > coral-masonry-item:not([_removing]):not([_placeholder])',\n onlyHandleChildren: true,\n onItemAdded: this._validateSelection,\n onItemRemoved: this._validateSelection\n });\n }\n\n return this._items;\n }\n\n /**\n Selection mode of Masonry\n\n @type {String}\n @default MasonrySelectionModeEnum.NONE\n @htmlattribute selectionmode\n @htmlattributereflected\n */\n get selectionMode() {\n return this._selectionMode || selectionMode.NONE;\n }\n\n set selectionMode(value) {\n value = transform.string(value).toLowerCase();\n this._selectionMode = validate.enumeration(selectionMode)(value) && value || selectionMode.NONE;\n this._reflectAttribute('selectionmode', this._selectionMode);\n\n const isGrid = this.ariaGrid === ariaGrid.ON && this.parentElement;\n\n if (this._selectionMode === selectionMode.NONE) {\n this.classList.remove('is-selectable');\n if (isGrid) {\n this.parentElement.removeAttribute('aria-multiselectable');\n }\n } else {\n this.classList.add('is-selectable');\n if (isGrid) {\n this.parentElement.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE);\n }\n }\n\n this._validateSelection();\n }\n\n _onItemSelectedChanged(event) {\n event.stopImmediatePropagation();\n\n this._validateSelection(event.target);\n }\n\n /** @private */\n _onMasonrySelectedItemChanged(event) {\n // this is a private event and should not leave the column view\n event.stopImmediatePropagation();\n\n // announce the selection state for the focused item\n this._announceActiveElementState.call(event.target, event);\n }\n\n _announceActiveElementState() {\n const accessibilityState = this._elements.accessibilityState;\n\n const self = this;\n const parentElement = this.parentElement;\n\n if (this._addTimeout || this._removeTimeout) {\n clearTimeout(this._addTimeout);\n clearTimeout(this._removeTimeout);\n }\n\n // we use setTimeout instead of nextFrame to give screen reader more time to respond to live region update in order to announce complete text content when the state changes.\n this._addTimeout = setTimeout(function () {\n const activeElement = document.activeElement;\n\n if (!self.contains(activeElement) || activeElement.tagName !== 'CORAL-MASONRY-ITEM') {\n return;\n }\n\n const span = document.createElement('span');\n span.appendChild(\n document.createTextNode(\n i18n.get(activeElement.selected ? 'checked' : 'not checked')\n )\n );\n accessibilityState.innerHTML = '';\n accessibilityState.hidden = false;\n accessibilityState.removeAttribute('aria-live');\n setTimeout(function () {\n accessibilityState.appendChild(span);\n\n // give screen reader 1.6 secs before clearing the live region, to provide enough time for announcement\n self._removeTimeout = setTimeout(parentElement._resetAccessibilityState, 1600, accessibilityState, self);\n }, 100);\n }, 100);\n }\n\n // utility method to clean up accessibility state\n _resetAccessibilityState(accessibilityState, self) {\n accessibilityState.setAttribute('aria-live', 'off');\n\n // @a11y only persist the checked state on macOS,\n // where VoiceOver does not announce the selected state for a gridcell.\n accessibilityState.hidden = !isMacLike || !self.selected;\n if (!isMacLike || !self.selected) {\n accessibilityState.innerHTML = '';\n }\n }\n\n /**\n Allows to interact with the masonry layout instance.\n\n @type {MasonryLayout}\n @readonly\n */\n get layoutInstance() {\n return this._layoutInstance;\n }\n\n /**\n The layout name for this masonry. Must be one of {@link Coral.Masonry.layouts}.\n See {@link MasonryLayoutsEnum}.\n\n @type {String}\n @default MasonryLayoutsEnum.FIXED_CENTERED\n @htmlattribute layout\n @htmlattributereflected\n */\n get layout() {\n return this._layout || layouts.FIXED_CENTERED;\n }\n\n set layout(value) {\n value = transform.string(value);\n const layoutEnum = this.constructor._layouts;\n\n if (value === '') {\n // Default is first registered layout which is \"fixed-centered\"\n value = Object.keys(layoutEnum)[0];\n }\n\n if (value !== this._layout) {\n if (layoutEnum[value]) {\n this._layout = value;\n this._reflectAttribute('layout', this._layout);\n\n this._scheduleLayout('new layout');\n } else {\n commons._log('Coral.Masonry: Unknown layout:', value);\n }\n }\n }\n\n /**\n The first selected item or null if no item is selected.\n\n @type {MasonryItem}\n @readonly\n */\n get selectedItem() {\n return this.items._getFirstSelected();\n }\n\n /**\n An array of all selected items.\n\n @type {Array.}\n @readonly\n */\n get selectedItems() {\n return this.items._getAllSelected();\n }\n\n // TODO this is layout specific. move to layout?\n /**\n The spacing between the items and the masonry container in pixel. If this property is not set, then it falls\n back to the CSS padding of the masonry and margin of the items.\n\n @type {?Number}\n @default null\n @htmlattribute spacing\n */\n get spacing() {\n return this._spacing || null;\n }\n\n set spacing(value) {\n value = transform.number(value);\n this._spacing = value !== null ? Math.max(0, value) : null;\n\n this._scheduleLayout('spacing');\n }\n\n /**\n Whether or not it is possible to order items with drag & drop.\n\n @type {Boolean}\n @default false\n @htmlattribute orderable\n */\n get orderable() {\n return this._orderable || false;\n }\n\n set orderable(value) {\n this._orderable = transform.booleanAttr(value);\n\n const items = this.items.getAll();\n\n for (let i = 0 ; i < items.length ; i++) {\n items[i][this._orderable ? 'setAttribute' : 'removeAttribute']('_orderable', '');\n }\n }\n\n /**\n Attribute to enable/disable auto aria grid role assignment. Value must be one of {@link MasonryAriaGridEnum}.\n Setting this property to {@link MasonryAriaGridEnum.ON} will do following to enable support for accessibility:\n - Preserve current role attribute of the parent element of {@link Masonry}, and set new role as grid.\n - Preserve current role attribute of the {@link Masonry}, and set new role as row.\n - Set role attribute of all child {@link MasonryItem} to gridcell.\n\n Setting the property to {@link MasonryAriaGridEnum.OFF} will do following:\n - Restore preserved (if any) role attribute of the parent element of {@link Masonry}.\n - Restore preserved role attribute of the {@link Masonry}.\n - Remove role attribute of all child {@link MasonryItem}.\n\n Setting the attribute to other than allowed values will fallback to {@link MasonryAriaGridEnum.OFF}.\n\n @type {String}\n @default {@link MasonryAriaGridEnum.OFF}\n @htmlattribute ariagrid\n @htmlattributereflected\n */\n get ariaGrid() {\n return this._ariaGrid || ariaGrid.OFF;\n }\n\n set ariaGrid(value) {\n value = transform.string(value);\n\n // Ensure correct values\n if (value !== ariaGrid.ON && value !== ariaGrid.OFF) {\n console.warn('Coral.Masonry: Unsupported ariaGrid value: ', value, '. Will fallback to ', ariaGrid.OFF);\n value = ariaGrid.OFF;\n }\n\n //update current state\n this._ariaGrid = value;\n this._reflectAttribute('ariagrid', this._ariaGrid);\n\n // Update role for this masonry\n if (this._ariaGrid === ariaGrid.ON) {\n // Preserve existing role and set new role\n this._preservedAriaRole = this.getAttribute('role');\n this.setAttribute('role', 'row');\n } else if (this._ariaGrid == ariaGrid.OFF) {\n // Restore or remove role\n if (this._preservedAriaRole) {\n this.setAttribute('role', this._preservedAriaRole);\n } else {\n this.removeAttribute('role');\n }\n }\n\n // Update parent and child item roles based on current state\n this._updateAriaRoleForParent(this._ariaGrid);\n this._updateAriaColumnCountForParent(this._ariaGrid);\n this._updateAriaRoleForItems(this._ariaGrid);\n }\n\n /**\n Specifies aria-label value\n\n @type {?String}\n @htmlattribute aria-label\n @htmlattributereflected\n */\n get ariaLabel() {\n return this.getAttribute('aria-label');\n }\n\n set ariaLabel(value) {\n value = transform.string(value);\n if (value === '') {\n this.removeAttribute('aria-label');\n } else {\n this._reflectAttribute('aria-label', value);\n }\n\n if (!this.parentElement || this._ariaGrid === ariaGrid.OFF) {\n return;\n }\n\n if (this.ariaLabel) {\n this.parentElement.setAttribute('aria-label', this.ariaLabel);\n } else {\n this.parentElement.removeAttribute('aria-label');\n }\n }\n\n /**\n Specifies aria-labelledby value\n\n @type {?String}\n @htmlattribute aria-labelledby\n @htmlattributereflected\n */\n get ariaLabelledby() {\n return this.getAttribute('aria-labelledby');\n }\n\n set ariaLabelledby(value) {\n value = transform.string(value);\n if (value === '') {\n this.removeAttribute('aria-labelledby');\n } else {\n this._reflectAttribute('aria-labelledby', value);\n }\n\n if (!this.parentElement || this._ariaGrid === ariaGrid.OFF) {\n return;\n }\n\n if (this.ariaLabelledby) {\n this.parentElement.setAttribute('aria-labelledby', this.ariaLabelledby);\n } else {\n this.parentElement.removeAttribute('aria-labelledby');\n }\n }\n\n /** @private */\n _updateAriaRoleForParent(activateAriaGrid) {\n if (!this.parentElement) {\n return;\n }\n\n if (activateAriaGrid === ariaGrid.ON) {\n // Save/set role for the parent as grid\n this._preservedParentAriaRole = this.parentElement.getAttribute('role');\n this.parentElement.setAttribute('role', 'grid');\n\n // parent grid should be labelled the same as coral-masonry\n if (this.ariaLabel && this.parentElement.getAttribute('aria-label') !== this.ariaLabel) {\n this._preservedParentAriaLabel = this.parentElement.getAttribute('aria-label');\n this.parentElement.setAttribute('aria-label', this.ariaLabel);\n }\n\n if (this.ariaLabelledby && this.parentElement.getAttribute('aria-labelledby') !== this.ariaLabelledby) {\n this._preservedParentAriaLabelledby = this.parentElement.getAttribute('aria-labelledby');\n this.parentElement.setAttribute('aria-labelledby', this.ariaLabelledby);\n }\n\n if (this._selectionMode === selectionMode.NONE) {\n this.parentElement.removeAttribute('aria-multiselectable');\n } else {\n this.parentElement.setAttribute('aria-multiselectable', this._selectionMode === selectionMode.MULTIPLE);\n }\n } else {\n // Restore/remove role of the parent element\n if (this._preservedParentAriaRole) {\n this.parentElement.setAttribute('role', this._preservedParentAriaRole);\n } else {\n this.parentElement.removeAttribute('role');\n }\n\n // restore the aria-label or aria-labelledby values as well\n if (this._preservedParentAriaLabel) {\n this.parentElement.setAttribute('aria-label', this._preservedParentAriaLabel);\n this._preservedParentAriaLabel = undefined;\n } else {\n this.parentElement.removeAttribute('aria-label');\n }\n\n if (this._preservedParentAriaLabelledby !== undefined) {\n this.parentElement.setAttribute('aria-labelledby', this._preservedParentAriaLabelledby);\n } else {\n this.parentElement.removeAttribute('aria-labelledby');\n }\n\n // Remove aria-colcount\n this.parentElement.removeAttribute('aria-colcount');\n\n // Remove aria-multiselectable\n this.parentElement.removeAttribute('aria-multiselectable');\n }\n }\n\n /** @private */\n _updateAriaRoleForItems(activateAriaGrid) {\n let columnIndex = 1;\n this.items.getAll().forEach((item) => {\n this._updateAriaRoleForItem(item, columnIndex++, activateAriaGrid);\n });\n }\n\n /** @private */\n _updateAriaRoleForItem(item, columnIndex, activateAriaGrid) {\n if (activateAriaGrid === ariaGrid.ON) {\n item.setAttribute('role', 'gridcell');\n item.setAttribute('aria-colindex', columnIndex);\n\n // communicate aria-selected state of all cells\n if (this.selectionMode !== selectionMode.NONE || this.parentElement.hasAttribute('aria-multiselectable')) {\n item.setAttribute('aria-selected', item.selected);\n }\n } else {\n item.removeAttribute('role');\n item.removeAttribute('aria-colindex');\n item.removeAttribute('aria-selected');\n }\n }\n\n /** @private */\n _updateAriaColumnCountForParent(activateAriaGrid) {\n if (!this.parentElement) {\n return;\n }\n\n if (activateAriaGrid === ariaGrid.ON) {\n this.parentElement.setAttribute('aria-colcount', this.items.length);\n } else {\n this.parentElement.removeAttribute('aria-colcount');\n }\n }\n\n _validateSelection(item) {\n const selectedItems = this.selectedItems;\n\n if (this.selectionMode === selectionMode.NONE) {\n this.items.getAll().forEach((item) => {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n if (item.selected) {\n item.removeAttribute('selected');\n }\n item.removeAttribute('aria-selected');\n });\n } else if (this.selectionMode === selectionMode.SINGLE) {\n // Last selected item wins if multiple selection while not allowed\n item = item || selectedItems[selectedItems.length - 1];\n\n if (item && item.hasAttribute('selected') && selectedItems.length > 1) {\n selectedItems.forEach((selectedItem) => {\n if (selectedItem !== item) {\n // Don't trigger change events\n this._preventTriggeringEvents = true;\n selectedItem.removeAttribute('selected');\n }\n });\n\n // We can trigger change events again\n this._preventTriggeringEvents = false;\n }\n }\n\n this._triggerChangeEvent();\n }\n\n _triggerChangeEvent() {\n const selectedItems = this.selectedItems;\n const oldSelection = this._oldSelection;\n\n if (!this._preventTriggeringEvents && this._arraysAreDifferent(selectedItems, oldSelection)) {\n if (this.selectionMode === selectionMode.MULTIPLE) {\n this.trigger('coral-masonry:change', {\n oldSelection: oldSelection,\n selection: selectedItems\n });\n } else {\n this.trigger('coral-masonry:change', {\n oldSelection: oldSelection.length > 1 ? oldSelection : oldSelection[0] || null,\n selection: selectedItems[0] || null\n });\n }\n\n this._oldSelection = selectedItems;\n }\n }\n\n _arraysAreDifferent(selection, oldSelection) {\n let diff = [];\n\n if (oldSelection.length === selection.length) {\n diff = oldSelection.filter((item) => selection.indexOf(item) === -1);\n }\n\n // since we guarantee that they are arrays, we can start by comparing their size\n return oldSelection.length !== selection.length || diff.length !== 0;\n }\n\n _onItemClick(event) {\n if (this.selectionMode !== selectionMode.NONE) {\n event.preventDefault();\n\n const item = event.matchedTarget;\n item[item.hasAttribute('selected') ? 'removeAttribute' : 'setAttribute']('selected', '');\n }\n }\n\n /** @private */\n _setAllSelected(selected) {\n const items = this.items.getAll();\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n if (item.hasAttribute('selected') !== selected) {\n item[selected ? 'setAttribute' : 'removeAttribute']('selected', '');\n }\n }\n }\n\n /**\n Schedules a layout for the next animation frame. Even if called many times, the layout happens still just once.\n\n @private\n */\n _scheduleLayout() {\n if (!this._forceDebounce && !this._layoutScheduled) {\n window.requestAnimationFrame(() => {\n // Skip layout if a layout was forced in between\n if (this._layoutScheduled) {\n this._doLayout();\n // Cancel potentially scheduled layout if the current layout was enforced by calling doLayout directly\n this._layoutScheduled = false;\n }\n });\n\n this._layoutScheduled = true;\n }\n }\n\n /** @private */\n _scheduleDebouncedLayout(force) {\n // Do not force debounce if the masonry isn't layouted yet. Safari sometimes triggers resize events while loading.\n if (force && this._layouted) {\n this._forceDebounce = true;\n }\n window.clearTimeout(this._debounceId);\n\n this._debounceId = window.setTimeout(() => {\n this._forceDebounce = false;\n this._scheduleLayout('window resize');\n }, 500);\n }\n\n /**\n Callback which has to be called when the dimensions have changed or the masonry turned visible.\n\n @private\n */\n _onResize() {\n if (!this._layouted) {\n // The masonry was first invisible, render it now immediately\n this._doLayout('became visible');\n } else {\n this._scheduleDebouncedLayout(false);\n }\n }\n\n /** @private */\n _onWindowResize() {\n this._scheduleDebouncedLayout(true);\n }\n\n /**\n Performs a layout. Should only be called by {@link #_scheduleLayout} if possible.\n\n @private\n */\n _doLayout() {\n const visible = !!this.offsetParent;\n const LayoutClass = this.constructor._layouts[this.layout];\n if (this._forceDebounce || !LayoutClass || !visible) {\n return;\n }\n\n if (!this._layoutInstance) {\n this._layoutInstance = new LayoutClass(this);\n }\n // Check if the layout has changed\n else if (this._layoutInstance.name !== this.layout) {\n this._layoutInstance.destroy();\n this._layoutInstance = new LayoutClass(this);\n }\n\n // Animate insertion. In the attachedCallback of the item, the is-beforeInserting class was already added. This\n // class is now removed again which allows to transition between the is-beforeInserting and is-inserting class.\n // By separating the code and batching the changes, the overhead is reduced significantly.\n let i;\n const newItems = this._newItems;\n for (i = 0 ; i < newItems.length ; i++) {\n newItems[i]._insert();\n }\n\n // Position the items\n this._layoutInstance.layout();\n this._layouted = true;\n\n // Mark newly added items as managed. Before this class is added, the items are invisible. The reason why this is\n // done here after positioning the items is that it seems to be the only way to ensure that the items are never\n // shown at the wrong position. There used to be two cases when this happened:\n // - When the masonry is first invisible and later shown because the resize event is triggered too late.\n // - In some browsers (e.g. Safari) always when items are added dynamically\n for (i = 0 ; i < newItems.length ; i++) {\n newItems[i].classList.add('is-managed');\n }\n // clear\n newItems.length = 0;\n\n // Update loaded class. Cannot be done in _updateLoaded because it has to happen after the positioning.\n this.classList.toggle('is-loaded', this._loaded);\n\n // Ensure that the tabbable item is set & still valid\n const tabbableItem = this._tabbableItem;\n if (!tabbableItem || isRemovingOrRemoved(tabbableItem)) {\n this._setTabbableItem(this.items.first());\n }\n\n // Focus the next item if the previously focused item has been removed\n const focusedItem = this._focusedItem;\n if (focusedItem) {\n if (isRemovingOrRemoved(focusedItem) && this._focusedItemNext) {\n this._focusedItemNext.focus();\n } else if (focusedItem !== document.activeElement) {\n this._focusedItem = null;\n this._focusedItemNext = null;\n }\n }\n\n // Update items, so that column indexes are correctly set\n this._updateAriaRoleForItems(this.ariaGrid);\n this._updateAriaColumnCountForParent(this.ariaGrid);\n\n // Prevent endless observation loop (skip mutations which have been caused by the layout)\n this._observer.takeRecords();\n }\n\n /** @ignore */\n _updateLoaded() {\n // Wait until complete because fonts might be loaded after interactive\n if (!this._loaded && document.readyState === 'complete') {\n let loaded = true;\n const images = this.querySelectorAll('img');\n for (let i = 0 ; i < images.length ; i++) {\n const image = images[i];\n // _loadError is set in a listener at the top of this file\n if (image.src && !image.complete && !image._loadError) {\n loaded = false;\n break;\n }\n }\n this._loaded = loaded;\n }\n // A loaded image might have made an item bigger\n this._scheduleLayout();\n }\n\n /** @private */\n _onItemConnected(event) {\n event.stopImmediatePropagation();\n\n const item = event.target;\n this._prepareItem(item);\n }\n\n _prepareItem(item) {\n // We don't care about transitions if the masonry is not in the body\n if (!document.body.contains(this)) {\n return;\n }\n\n // check if just moving\n if (!item.hasAttribute('_removing') && this !== item._masonry && !item.hasAttribute('_placeholder')) {\n item._masonry = this;\n\n // Insert animation start style. This is separated from _insert because otherwise we would have to enforce a\n // reflow between changing the classes for every item (which is slow).\n item.classList.add('is-beforeInserting');\n\n // Do it in the next frame so that the inserting animation is visible\n window.requestAnimationFrame(() => {\n this._onItemAdded(item);\n });\n }\n }\n\n _removeItem(item) {\n item.removeAttribute('_removing');\n item._masonry = null;\n\n this._onItemRemoved(item);\n }\n\n /** @private */\n _onItemDisconnected(item) {\n // We don't care about transitions if the masonry is not in the body\n if (!document.body.contains(this)) {\n return;\n }\n\n // Ignore the item being dropped after ordering\n if (item._dropping) {\n return;\n }\n\n if (!item.hasAttribute('_removing') && item.showRemoveTransition) {\n // Attach again for remove transition\n item.setAttribute('_removing', '');\n item._ignoreConnectedCallback = true;\n this.appendChild(item);\n item._ignoreConnectedCallback = false;\n commons.transitionEnd(item, () => {\n item.remove();\n this._removeItem(item);\n });\n }\n // remove transition completed\n else {\n this._removeItem(item);\n }\n }\n\n /** @private */\n _onItemAdded(item) {\n item._updateDragAction(this.orderable);\n this._newItems.push(item);\n\n // Hack to prevent flickering in some browsers which don't support custom elements natively (e.g. Safari)\n if (this._attaching && item.nextElementSibling === null) {\n this._doLayout('last item attached');\n }\n }\n\n /** @private */\n _onItemRemoved(item) {\n item._updateDragAction(false);\n item.classList.remove('is-managed');\n }\n\n /** @private */\n _onItemFocus(e) {\n const item = e.target;\n if (item === e.matchedTarget) {\n this._setTabbableItem(item);\n\n // Remember the focused item and a sibling for the case when the currently focused item is removed and another\n // item has to be selected in _doLayout\n this._focusedItem = item;\n this._focusedItemNext = [item.nextElementSibling, item.previousElementSibling].filter(itemFilter)[0];\n }\n }\n\n /** @private */\n _setTabbableItem(item) {\n if (this._tabbableItem) {\n this._tabbableItem._setTabbable(false);\n }\n if (item) {\n item._setTabbable(true);\n }\n this._tabbableItem = item;\n }\n\n /**\n @return {Boolean} true if the new position isn't further away from the center of the placeholder than the\n previous position.\n\n @private\n */\n _isApproachingPlaceholder(pos, prevPos, placeholder) {\n const placeholderPos = relativePosition(this, placeholder);\n const placeholderWidth = placeholder.offsetWidth;\n const placeholderHeight = placeholder.offsetHeight;\n const placeholderX = placeholderPos.left + placeholderWidth / 2;\n const placeholderY = placeholderPos.top + placeholderHeight / 2;\n\n // A weighted distance is used to improve the user experience with rather long/high cards\n return weightedDistance(placeholderX, placeholderY, pos.left, pos.top, placeholderWidth, placeholderHeight) <=\n weightedDistance(placeholderX, placeholderY, prevPos.left, prevPos.top, placeholderWidth, placeholderHeight);\n }\n\n /** @private */\n _onItemDragStart(e) {\n const item = e.target;\n if (item === e.matchedTarget) {\n this._layoutInstance.detach(item);\n item._oldBefore = getPreviousItem(item);\n\n const placeholder = item._dropPlaceholder = new MasonryItem();\n placeholder.setAttribute('_placeholder', '');\n\n // Add a content div with the right dimension instead of setting the dimension on the item directly. This is\n // necessary because some layouts modify the dimensions as well.\n const contentDiv = document.createElement('div');\n contentDiv.style.width = `${item.clientWidth}px`;\n contentDiv.style.height = `${item.clientHeight}px`;\n placeholder.appendChild(contentDiv);\n\n // Insert placeholder before dragged item\n placeholder.classList.add('_coral-Masonry-item--placeholder');\n\n this.insertBefore(placeholder, item);\n }\n }\n\n /** @private */\n _onItemDragMove(e) {\n const item = e.target;\n const placeholder = item._dropPlaceholder;\n if (item === e.matchedTarget && placeholder) {\n const prevPos = item._prevDragPos;\n const pos = relativePosition(this, item);\n // If the current move is approaching the previous placeholder target, then it must not move the placeholder\n // again. Otherwise it can happen with multi-column items that the items jump around hectically while dragging\n // an item.\n if (!prevPos || !this._isApproachingPlaceholder(pos, prevPos, placeholder)) {\n // Find item below cursor\n const itemBelow = this._layoutInstance.itemAt(pos.left, pos.top);\n\n if (itemBelow && itemBelow !== placeholder) {\n // If the item below (the dragged item) is preceding the placeholder, then it has to insert the placeholder\n // before the item below (the dragged item)\n if (placeholder.compareDocumentPosition(itemBelow) & document.DOCUMENT_POSITION_PRECEDING) {\n itemBelow.parentNode.insertBefore(placeholder, itemBelow);\n } else {\n itemBelow.parentNode.insertBefore(placeholder, itemBelow.nextSibling);\n }\n }\n }\n item._prevDragPos = pos;\n }\n }\n\n /** @private */\n _onItemDragEnd(e) {\n const item = e.target;\n const placeholder = item._dropPlaceholder;\n if (item === e.matchedTarget && placeholder) {\n item._dropping = true;\n // Replace the drop placeholder with this item\n this.replaceChild(item, placeholder);\n item._dropping = false;\n\n // Trigger order event\n item.trigger('coral-masonry:order', {\n item: item,\n oldBefore: item._oldBefore,\n before: getPreviousItem(item)\n }, true, false);\n\n // // Drop transition\n this._layoutInstance.reattach(item);\n item.classList.add('is-dropping');\n commons.transitionEnd(item, () => {\n item.classList.remove('is-dropping');\n });\n\n // Update items, so that column indexes are correctly set\n this._updateAriaRoleForItems(this.ariaGrid);\n }\n item._oldBefore = null;\n item._dropPlaceholder = null;\n item._prevDragPos = null;\n }\n\n get observedMessages() {\n return {\n 'coral-masonry-item:_connected': '_onItemConnected',\n 'coral-masonry-item:_selectedchanged': '_onItemSelectedChanged',\n };\n }\n\n /**\n Registry for masonry layouts.\n\n @type {Object.}\n @private\n @readonly\n */\n static get _layouts() {\n if (!this.__layouts) {\n this.__layouts = {};\n }\n\n return this.__layouts;\n }\n\n /**\n Registers a layout with the given name.\n The name can then be set at {@link Coral.Masonry.layout} to render a masonry with the this registered layout.\n\n @param {String} name of the layout\n @param {Layout} Layout class which extends {@link Coral.Masonry.Layout}\n */\n static registerLayout(name, Layout) {\n Layout.defineName(name);\n this._layouts[name] = Layout;\n }\n\n /**\n Returns {@link Masonry} layouts.\n\n @return {MasonryLayoutsEnum}\n */\n static get layouts() {\n return layouts;\n }\n\n /**\n Returns {@link Masonry} selection mode options.\n\n @return {MasonrySelectionModeEnum}\n */\n static get selectionMode() {\n return selectionMode;\n }\n\n static get _attributePropertyMap() {\n return commons.extend(super._attributePropertyMap, {\n selectionmode: 'selectionMode',\n ariagrid: 'ariaGrid',\n 'aria-label': 'ariaLabel',\n 'aria-labelledby': 'ariaLabelledby',\n });\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat([\n 'selectionmode',\n 'layout',\n 'spacing',\n 'orderable',\n 'ariagrid',\n 'aria-label',\n 'aria-labelledby'\n ]);\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // Keep the default behavior when ariaGrid is not enabled\n if (this._ariaGrid === ariaGrid.OFF) {\n // a11y\n this.setAttribute('role', this._defaultAriaRole);\n }\n\n // Default reflected attributes\n if (!this._layout) {\n this.layout = layouts.FIXED_CENTERED;\n }\n if (!this._selectionMode) {\n this.selectionMode = selectionMode.NONE;\n }\n\n // Don't trigger events once connected\n this._preventTriggeringEvents = true;\n this._validateSelection();\n this._preventTriggeringEvents = false;\n\n this._oldSelection = this.selectedItems;\n\n // Handles the resizing of the masonry\n commons.addResizeListener(this, this._onResize.bind(this));\n\n // Prepare items\n this.items.getAll().forEach((item) => {\n this._prepareItem(item);\n });\n\n // This indicates that the initial items are being attached\n this._attaching = true;\n\n window.requestAnimationFrame(() => {\n this._attaching = false;\n // Update loaded after all items have been attached\n this._updateLoaded();\n });\n }\n\n /**\n Triggered when a {@link Masonry} item is reordered.\n\n @typedef {CustomEvent} coral-masonry:order\n\n @property {MasonryItem} detail.item\n The reordered item\n @property {?MasonryItem} detail.oldBefore\n The previous item before the reordering.\n @property {?MasonryItem} detail.before\n The previous item after the reordering.\n */\n\n /**\n Triggered when {@link Masonry} selected item has changed.\n\n @typedef {CustomEvent} coral-masonry:change\n\n @property {MasonryItem} detail.oldSelection\n The prior selected item(s).\n @property {MasonryItem} detail.selection\n The newly selected item(s).\n */\n});\n\nexport default Masonry;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1170, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 20, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1171, "kind": "variable", "name": "isMacLike", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~isMacLike", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 23, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1172, "kind": "typedef", "name": "MasonrySelectionModeEnum", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~MasonrySelectionModeEnum", "access": "public", "description": "Enumeration for {@link Masonry} selection options.", "lineNumber": 37, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "NONE", "description": "None is default, selection of Masonry items doesn't happen based on click." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "SINGLE", "description": "Single selection mode, Masonry behaves like radio input elements." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "MULTIPLE", "description": "Multiple selection mode, Masonry behaves like checkbox input elements." } ], "type": { "types": [ "Object" ], "optional": false, "name": "MasonrySelectionModeEnum" } }, { "__docId__": 1173, "kind": "typedef", "name": "MasonryLayoutsEnum", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~MasonryLayoutsEnum", "access": "public", "description": "Enumeration for {@link Masonry} layouts.", "lineNumber": 57, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "FIXED_CENTERED", "description": "A Layout with fixed width centered items." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "FIXED_SPREAD", "description": "A layout with fixed width and evenly spread items." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "VARIABLE", "description": "A layout with variable width items." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "DASHBOARD", "description": "A layout with variable width items which are expanded in their height to fill gaps." } ], "type": { "types": [ "Object" ], "optional": false, "name": "MasonryLayoutsEnum" } }, { "__docId__": 1174, "kind": "typedef", "name": "MasonryAriaGridEnum", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~MasonryAriaGridEnum", "access": "public", "description": "Enumeration values to enable/disable aria grid support for {@link Masonry}.", "lineNumber": 74, "properties": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "ON", "description": "Turn on auto aria grid roles." }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "OFF", "description": "OFF is default. Turn off auto aria grid roles." } ], "type": { "types": [ "Object" ], "optional": false, "name": "MasonryAriaGridEnum" } }, { "__docId__": 1175, "kind": "function", "name": "itemFilter", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~itemFilter", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 90, "undocument": true, "params": [ { "name": "element", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1176, "kind": "function", "name": "isRemovingOrRemoved", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~isRemovingOrRemoved", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 93, "undocument": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1177, "kind": "function", "name": "relativePosition", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~relativePosition", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": "Returns the position of the second element relative to the first element.", "lineNumber": 98, "params": [ { "name": "el1", "types": [ "*" ] }, { "name": "el2", "types": [ "*" ] } ], "return": { "types": [ "{\"left\": *, \"top\": *}" ] }, "ignore": true }, { "__docId__": 1178, "kind": "function", "name": "weightedDistance", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~weightedDistance", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 107, "undocument": true, "params": [ { "name": "x1", "types": [ "*" ] }, { "name": "y1", "types": [ "*" ] }, { "name": "x2", "types": [ "*" ] }, { "name": "y2", "types": [ "*" ] }, { "name": "unitWidth", "types": [ "*" ] }, { "name": "unitHeight", "types": [ "*" ] } ], "return": null, "ignore": true }, { "__docId__": 1179, "kind": "function", "name": "getPreviousItem", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~getPreviousItem", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 109, "undocument": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": { "types": [ "*" ] }, "ignore": true }, { "__docId__": 1180, "kind": "variable", "name": "Masonry", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~Masonry", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "A Masonry component that allows to lay out items in a masonry grid.", "lineNumber": 121, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry" }, { "tagName": "@classdesc", "tagValue": "A Masonry component that allows to lay out items in a masonry grid." }, { "tagName": "@htmltag", "tagValue": "coral-masonry" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Masonry();" ], "see": [ "../examples/#masonry" ], "type": { "types": [ "*" ] } }, { "__docId__": 1181, "kind": "typedef", "name": "coral-masonry:order", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~coral-masonry:order", "access": "public", "description": "Triggered when a {@link Masonry} item is reordered.", "properties": [ { "nullable": null, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "detail.item", "description": "The reordered item" }, { "nullable": true, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "detail.oldBefore", "description": "The previous item before the reordering." }, { "nullable": true, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "detail.before", "description": "The previous item after the reordering." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-masonry:order" } }, { "__docId__": 1182, "kind": "typedef", "name": "coral-masonry:change", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/Masonry.js~coral-masonry:change", "access": "public", "description": "Triggered when {@link Masonry} selected item has changed.", "properties": [ { "nullable": null, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "detail.oldSelection", "description": "The prior selected item(s)." }, { "nullable": null, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "detail.selection", "description": "The newly selected item(s)." } ], "type": { "types": [ "CustomEvent" ], "optional": false, "name": "coral-masonry:change" } }, { "__docId__": 1183, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MasonryLayout from './MasonryLayout';\nimport {setTransition, setTransform, csspx, getPositiveNumberProperty} from './MasonryLayoutUtil';\nimport {Keys} from '../../../coral-utils';\n\n/**\n Base class for column-based masonry layouts.\n\n @class Coral.Masonry.ColumnLayout\n @classdesc A Masonry Column layout\n @extends {MasonryLayout}\n */\nclass MasonryColumnLayout extends MasonryLayout {\n /**\n Takes a {Masonry} instance as argument.\n\n @param {Masonry} masonry\n */\n constructor(masonry) {\n super(masonry);\n\n this._columns = [];\n\n const up = this._moveFocusVertically.bind(this, true);\n const down = this._moveFocusVertically.bind(this, false);\n const left = this._moveFocusHorizontally.bind(this, true);\n const right = this._moveFocusHorizontally.bind(this, false);\n const home = this._moveFocusHomeEnd.bind(this, true);\n const end = this._moveFocusHomeEnd.bind(this, false);\n\n const keys = this._keys = new Keys(masonry, {\n context: this\n });\n keys.on('up', up).on('k', up);\n keys.on('down', down).on('j', down);\n keys.on('left', left).on('h', left);\n keys.on('right', right).on('l', right);\n keys.on('home', home);\n keys.on('end', end);\n }\n\n /**\n Hook to remove layout specific style and data from the item.\n\n @param item\n @private\n */\n // eslint-disable-next-line no-unused-vars\n _resetItem(item) {\n // To override\n }\n\n /**\n Initialize layout variables.\n\n @private\n */\n _init(items) {\n const firstItem = items[0];\n const masonry = this._masonry;\n this._columnWidth = getPositiveNumberProperty(masonry, 'columnWidth', 'columnwidth', 200, 120);\n\n this._zeroOffsetLeft = -csspx(firstItem, 'marginLeft');\n // with padding\n this._masonryInnerWidth = masonry.clientWidth;\n\n const spacing = this._masonry.spacing;\n if (typeof spacing === 'number') {\n this._horSpacing = spacing;\n this._verSpacing = spacing;\n this._offsetLeft = spacing + this._zeroOffsetLeft;\n this._offsetTop = spacing - csspx(firstItem, 'marginTop');\n this._verPadding = 2 * spacing;\n this._masonryAvailableWidth = masonry.clientWidth - spacing;\n } else {\n this._horSpacing = csspx(firstItem, 'marginLeft') + csspx(firstItem, 'marginRight');\n this._verSpacing = csspx(firstItem, 'marginTop') + csspx(firstItem, 'marginBottom');\n this._offsetLeft = csspx(masonry, 'paddingLeft');\n this._offsetTop = csspx(masonry, 'paddingTop');\n this._verPadding = this._offsetTop + this._verSpacing + csspx(masonry, 'paddingBottom');\n this._masonryAvailableWidth = masonry.clientWidth - this._offsetLeft - csspx(masonry, 'paddingRight');\n }\n\n // Initialize column objects\n const columnCount = Math.max(1, Math.floor(this._masonryAvailableWidth / (this._columnWidth + this._horSpacing)));\n this._columns.length = columnCount;\n for (let ci = 0 ; ci < columnCount ; ci++) {\n this._columns[ci] = {\n height: this._offsetTop,\n items: []\n };\n }\n\n // Prepare layout data\n for (let ii = 0 ; ii < items.length ; ii++) {\n const item = items[ii];\n\n let layoutData = item._layoutData;\n if (!layoutData) {\n item._layoutData = layoutData = {};\n }\n\n // Read colspan\n layoutData.colspan = Math.min(getPositiveNumberProperty(item, 'colspan', 'colspan', 1), this._columns.length);\n }\n }\n\n /**\n Updates the width of all items.\n\n @param items\n @private\n */\n _writeStyles(items) {\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n const layoutData = item._layoutData;\n\n // Update width\n const itemWidth = Math.round(this._getItemWidth(layoutData.colspan));\n if (layoutData.width !== itemWidth) {\n item.style.width = `${itemWidth}px`;\n layoutData.width = itemWidth;\n }\n this._writeItemStyle(item);\n }\n }\n\n /**\n @param colspan column span of the item\n @return the width of the item for the given colspan\n @private\n */\n // eslint-disable-next-line no-unused-vars\n _getItemWidth(colspan) {\n // To override\n }\n\n /**\n Hook to execute layout specific item preparation.\n\n @param item\n @private\n */\n // eslint-disable-next-line no-unused-vars\n _writeItemStyle(item) {\n // To override\n }\n\n /**\n Reads the dimension of all items.\n\n @param items\n @private\n */\n _readStyles(items) {\n // Record size of items in a separate loop to avoid unneccessary reflows\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n const layoutData = item._layoutData;\n layoutData.height = Math.round(item.getBoundingClientRect().height);\n layoutData.ignored = layoutData.detached || !item.offsetParent;\n }\n }\n\n /**\n Update the position of all items.\n\n @param items\n @private\n */\n _positionItems(items) {\n let j;\n\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n const layoutData = item._layoutData;\n // Skip ignored items\n if (layoutData.ignored) {\n continue;\n }\n\n // Search for column with the least height\n const maxLength = this._columns.length - (layoutData.colspan - 1);\n let minColumnIndex = -1;\n let minColumnHeight;\n for (j = 0 ; j < maxLength ; j++) {\n // can be negative if set spacing < item css margin\n let columnHeight = this._offsetTop;\n for (let y = 0 ; y < layoutData.colspan ; y++) {\n columnHeight = Math.max(columnHeight, this._columns[j + y].height);\n }\n if (minColumnIndex === -1 || columnHeight < minColumnHeight) {\n minColumnIndex = j;\n minColumnHeight = columnHeight;\n }\n }\n\n const top = minColumnHeight;\n const left = Math.round(this._getItemLeft(minColumnIndex));\n\n // Check if position has changed\n if (layoutData.left !== left || layoutData.top !== top) {\n layoutData.columnIndex = minColumnIndex;\n layoutData.itemIndex = this._columns[minColumnIndex].items.length;\n layoutData.left = left;\n layoutData.top = top;\n\n setTransform(item, `translate(${left}px, ${top}px)`);\n }\n\n // Remember new column height to position all other items\n const newColumnHeight = top + layoutData.height + this._verSpacing;\n for (j = 0 ; j < layoutData.colspan ; j++) {\n const column = this._columns[minColumnIndex + j];\n column.height = newColumnHeight;\n column.items.push(item);\n }\n }\n }\n\n /**\n @param columnIndex\n @return the left position for the given column index\n @private\n */\n // eslint-disable-next-line no-unused-vars\n _getItemLeft(columnIndex) {\n // To override\n }\n\n /**\n @returns {number} the height of the content (independent of the current gird container height)\n @private\n */\n _getContentHeight() {\n return this._columns.reduce((height, column) => Math.max(height, column.height), 0) - this._offsetTop;\n }\n\n /**\n Hook which is called after the positioning is done.\n\n @param contentHeight\n @private\n */\n // eslint-disable-next-line no-unused-vars\n _postLayout(contentHeight) {\n // To override\n }\n\n /**\n Moves the focus vertically.\n\n @private\n */\n _moveFocusVertically(up, event) {\n const currentLayoutData = event.target._layoutData;\n if (!currentLayoutData) {\n return;\n }\n\n // Choose item above or below\n const nextItemIndex = currentLayoutData.itemIndex + (up ? -1 : 1);\n let nextItem = this._columns[currentLayoutData.columnIndex].items[nextItemIndex];\n\n if (nextItem) {\n nextItem.focus();\n // prevent scrolling at the same time\n event.preventDefault();\n } else {\n // in case there is no item in the same column, we should move to first item in next column for down\n // and last item of previous column for up key\n let columnIndex = currentLayoutData.columnIndex;\n if (up) {\n if (columnIndex > 0) {\n // move to last item of previous column\n let prevColumn = this._columns[columnIndex - 1];\n if (prevColumn) {\n nextItem = prevColumn.items[prevColumn.items.length - 1]; // last item of previous column\n }\n }\n } else {\n // down key is pressed, go to first item of next column if exists\n let columnCount = this._columns.length;\n let nextColumnIndex = columnIndex + currentLayoutData.colspan;\n if (nextColumnIndex < columnCount) {\n nextItem = this._columns[nextColumnIndex].items[0]; // first item of next column\n }\n }\n if (nextItem) {\n nextItem.focus();\n event.preventDefault(); // prevent scrolling at the same time\n }\n }\n }\n\n /**\n Moves the focus horizontally.\n\n @private\n */\n _moveFocusHorizontally(left, event) {\n const currentLayoutData = event.target._layoutData;\n if (!currentLayoutData) {\n return;\n }\n\n let nextItem;\n let items = this._masonry.items.getAll();\n let collectionItemIndex = items.indexOf(event.target);\n\n if (left) {\n if (collectionItemIndex > 0) {\n nextItem = items[collectionItemIndex - 1];\n }\n } else if (collectionItemIndex < items.length - 1) {\n nextItem = items[collectionItemIndex + 1];\n }\n\n if (nextItem) {\n nextItem.focus();\n event.preventDefault(); // prevent scrolling at the same time\n }\n }\n\n /**\n Moves the focus to first or last item based on the visual order.\n\n @private\n */\n _moveFocusHomeEnd(home, event) {\n const currentLayoutData = event.target._layoutData;\n if (!currentLayoutData) {\n return;\n }\n\n let nextItem;\n const columns = this._columns;\n\n // when home is pressed, we take the first item of the first column\n if (home) {\n nextItem = columns[0] && columns[0].items[0];\n } else {\n // when end is pressed, we take the last item of the last column; since some columns are empty, we need to\n // iterate backwards to find the first column that has items\n for (let i = columns.length - 1 ; i > -1 ; i--) {\n // since we found a column with items, we take the last item as the next one\n if (columns[i].items.length > 0) {\n nextItem = columns[i].items[columns[i].items.length - 1];\n break;\n }\n }\n }\n\n if (nextItem) {\n nextItem.focus();\n // we prevent the scrolling\n event.preventDefault();\n }\n }\n\n /** @inheritdoc */\n layout(secondTry) {\n const masonry = this._masonry;\n\n const items = masonry.items.getAll();\n if (items.length > 0) {\n // For best possible performance none of these function calls must both read and write attributes in a loop to\n // avoid unnecessary reflows.\n this._init(items);\n this._writeStyles(items);\n this._readStyles(items);\n this._positionItems(items);\n } else {\n this._columns.length = 0;\n }\n\n // Update the height of the masonry (otherwise it has a height of 0px due to the absolutely positioned items)\n const contentHeight = this._getContentHeight();\n masonry.style.height = `${contentHeight - this._verSpacing + this._verPadding}px`;\n\n // Check if the masonry has changed its width due to the changed height (can happen because of appearing/disappearing scrollbars)\n if (!secondTry && this._masonryInnerWidth !== masonry.clientWidth) {\n this.layout(true);\n } else {\n // Post layout hook for sub classes\n this._postLayout(contentHeight);\n }\n }\n\n /** @inheritdoc */\n destroy() {\n this._keys.destroy();\n\n const items = this._masonry.items.getAll();\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n item._layoutData = undefined;\n setTransform(item, '');\n this._resetItem(item);\n }\n }\n\n /** @inheritdoc */\n detach(item) {\n item._layoutData.detached = true;\n }\n\n /** @inheritdoc */\n reattach(item) {\n const layoutData = item._layoutData;\n layoutData.detached = false;\n\n const rect = item.getBoundingClientRect();\n // Disable transition while repositioning\n setTransition(item, 'none');\n item.style.left = '';\n item.style.top = '';\n setTransform(item, '');\n\n const nullRect = item.getBoundingClientRect();\n layoutData.left = rect.left - nullRect.left;\n layoutData.top = rect.top - nullRect.top;\n setTransform(item, `translate(${layoutData.left}px, ${layoutData.top}px)`);\n // Enforce position\n item.getBoundingClientRect();\n // Enable transition again\n setTransition(item, '');\n }\n\n /** @inheritdoc */\n itemAt(x, y) {\n // TODO it would be more efficient to pick first the right column\n const items = this._masonry.items.getAll();\n\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n const layoutData = item._layoutData;\n\n if (layoutData && !layoutData.ignored && (\n layoutData.left <= x && layoutData.left + layoutData.width >= x &&\n layoutData.top <= y && layoutData.top + layoutData.height >= y)) {\n return item;\n }\n }\n\n return null;\n }\n}\n\nexport default MasonryColumnLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1184, "kind": "class", "name": "MasonryColumnLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "A Masonry Column layout", "lineNumber": 24, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.ColumnLayout" }, { "tagName": "@classdesc", "tagValue": "A Masonry Column layout" } ], "interface": false, "extends": [ "MasonryLayout" ], "examples": [ "JS constructor\nnew Coral.Masonry.ColumnLayout();" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1185, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#constructor", "access": "public", "description": "Takes a {Masonry} instance as argument.", "lineNumber": 30, "params": [ { "nullable": null, "types": [ "Masonry" ], "spread": false, "optional": false, "name": "masonry", "description": "" } ] }, { "__docId__": 1186, "kind": "member", "name": "_columns", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_columns", "access": "private", "description": null, "lineNumber": 33, "undocument": true, "ignore": true, "type": { "types": [ "*[]" ] } }, { "__docId__": 1187, "kind": "method", "name": "_resetItem", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_resetItem", "access": "private", "description": "Hook to remove layout specific style and data from the item.", "lineNumber": 60, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "item", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1188, "kind": "method", "name": "_init", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_init", "access": "private", "description": "Initialize layout variables.", "lineNumber": 69, "ignore": true, "params": [ { "name": "items", "types": [ "*" ] } ], "return": null }, { "__docId__": 1189, "kind": "member", "name": "_columnWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_columnWidth", "access": "private", "description": null, "lineNumber": 72, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1190, "kind": "member", "name": "_zeroOffsetLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_zeroOffsetLeft", "access": "private", "description": null, "lineNumber": 74, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1191, "kind": "member", "name": "_masonryInnerWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_masonryInnerWidth", "access": "private", "description": null, "lineNumber": 76, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1192, "kind": "member", "name": "_horSpacing", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_horSpacing", "access": "private", "description": null, "lineNumber": 80, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1193, "kind": "member", "name": "_verSpacing", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_verSpacing", "access": "private", "description": null, "lineNumber": 81, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1194, "kind": "member", "name": "_offsetLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_offsetLeft", "access": "private", "description": null, "lineNumber": 82, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1195, "kind": "member", "name": "_offsetTop", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_offsetTop", "access": "private", "description": null, "lineNumber": 83, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1196, "kind": "member", "name": "_verPadding", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_verPadding", "access": "private", "description": null, "lineNumber": 84, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1197, "kind": "member", "name": "_masonryAvailableWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_masonryAvailableWidth", "access": "private", "description": null, "lineNumber": 85, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1204, "kind": "method", "name": "_writeStyles", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_writeStyles", "access": "private", "description": "Updates the width of all items.", "lineNumber": 125, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "items", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1205, "kind": "method", "name": "_getItemWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_getItemWidth", "access": "private", "description": "", "lineNumber": 146, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "colspan", "description": "column span of the item" } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "the width of the item for the given colspan" }, "ignore": true }, { "__docId__": 1206, "kind": "method", "name": "_writeItemStyle", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_writeItemStyle", "access": "private", "description": "Hook to execute layout specific item preparation.", "lineNumber": 157, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "item", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1207, "kind": "method", "name": "_readStyles", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_readStyles", "access": "private", "description": "Reads the dimension of all items.", "lineNumber": 167, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "items", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1208, "kind": "method", "name": "_positionItems", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_positionItems", "access": "private", "description": "Update the position of all items.", "lineNumber": 183, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "items", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1209, "kind": "method", "name": "_getItemLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_getItemLeft", "access": "private", "description": "", "lineNumber": 239, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "columnIndex", "description": "" } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "the left position for the given column index" }, "ignore": true }, { "__docId__": 1210, "kind": "method", "name": "_getContentHeight", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_getContentHeight", "access": "private", "description": "", "lineNumber": 247, "unknown": [ { "tagName": "@returns", "tagValue": "{number} the height of the content (independent of the current gird container height)" } ], "return": { "nullable": null, "types": [ "number" ], "spread": false, "description": "the height of the content (independent of the current gird container height)" }, "ignore": true, "params": [] }, { "__docId__": 1211, "kind": "method", "name": "_postLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_postLayout", "access": "private", "description": "Hook which is called after the positioning is done.", "lineNumber": 258, "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "contentHeight", "description": "" } ], "ignore": true, "return": null }, { "__docId__": 1212, "kind": "method", "name": "_moveFocusVertically", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_moveFocusVertically", "access": "private", "description": "Moves the focus vertically.", "lineNumber": 267, "ignore": true, "params": [ { "name": "up", "types": [ "*" ] }, { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 1213, "kind": "method", "name": "_moveFocusHorizontally", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_moveFocusHorizontally", "access": "private", "description": "Moves the focus horizontally.", "lineNumber": 313, "ignore": true, "params": [ { "name": "left", "types": [ "*" ] }, { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 1214, "kind": "method", "name": "_moveFocusHomeEnd", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#_moveFocusHomeEnd", "access": "private", "description": "Moves the focus to first or last item based on the visual order.", "lineNumber": 342, "ignore": true, "params": [ { "name": "home", "types": [ "*" ] }, { "name": "event", "types": [ "*" ] } ], "return": null }, { "__docId__": 1215, "kind": "method", "name": "layout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#layout", "access": "public", "description": null, "lineNumber": 374, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "params": [ { "name": "secondTry", "types": [ "*" ] } ], "return": null }, { "__docId__": 1216, "kind": "method", "name": "destroy", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#destroy", "access": "public", "description": null, "lineNumber": 403, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "params": [], "return": null }, { "__docId__": 1217, "kind": "method", "name": "detach", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#detach", "access": "public", "description": null, "lineNumber": 416, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 1218, "kind": "method", "name": "reattach", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#reattach", "access": "public", "description": null, "lineNumber": 421, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 1219, "kind": "method", "name": "itemAt", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryColumnLayout.js~MasonryColumnLayout#itemAt", "access": "public", "description": null, "lineNumber": 443, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "params": [ { "name": "x", "types": [ "*" ] }, { "name": "y", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1220, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MasonryVariableLayout from './MasonryVariableLayout';\n\n/**\n Layout with variable width items which are expanded in their height to fill gaps (which are common with colspan).\n The minimal width of the items is defined with the columnwidth attribute.\n\n @example\n \n\n @class Coral.Masonry.DashboardLayout\n @extends {MasonryVariableLayout}\n */\nclass MasonryDashboardLayout extends MasonryVariableLayout {\n /** @inheritdoc */\n _writeItemStyle(item) {\n // Reset height because otherwise getBoundingClientRect() will not return the real height\n this._resetItem(item);\n }\n\n /** @inheritdoc */\n _postLayout(contentHeight) {\n for (let columnIndex = 0 ; columnIndex < this._columns.length ; columnIndex++) {\n const column = this._columns[columnIndex];\n let nextItemTop = contentHeight + this._offsetTop;\n\n // Fill gaps by expanding the height of the items\n for (let itemIndex = column.items.length - 1 ; itemIndex >= 0 ; itemIndex--) {\n const item = column.items[itemIndex];\n const layoutData = item._layoutData;\n if (layoutData.columnIndex === columnIndex) {\n const expandedHeight = nextItemTop - layoutData.top - this._verSpacing;\n item.style.height = `${expandedHeight}px`;\n }\n nextItemTop = layoutData.top;\n }\n }\n }\n\n /** @inheritdoc */\n _resetItem(item) {\n item.style.height = '';\n }\n}\n\nexport default MasonryDashboardLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1221, "kind": "class", "name": "MasonryDashboardLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "Layout with variable width items which are expanded in their height to fill gaps (which are common with colspan).\nThe minimal width of the items is defined with the columnwidth attribute.", "examples": [ "JS constructor\nnew Coral.Masonry.DashboardLayout();", "" ], "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.DashboardLayout" } ], "interface": false, "extends": [ "MasonryVariableLayout" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1222, "kind": "method", "name": "_writeItemStyle", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout#_writeItemStyle", "access": "private", "description": null, "lineNumber": 27, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 1223, "kind": "method", "name": "_postLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout#_postLayout", "access": "private", "description": null, "lineNumber": 33, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "contentHeight", "types": [ "*" ] } ], "return": null }, { "__docId__": 1224, "kind": "method", "name": "_resetItem", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryDashboardLayout.js~MasonryDashboardLayout#_resetItem", "access": "private", "description": null, "lineNumber": 52, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "item", "types": [ "*" ] } ], "return": null }, { "__docId__": 1225, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MasonryColumnLayout from './MasonryColumnLayout';\nimport {getFirstRowFilledColumns} from './MasonryLayoutUtil';\n\n/**\n Layout with fixed width centered items. The width of the items is defined with the columnwidth\n attribute.\n\n @example\n \n\n @class Coral.Masonry.FixedCenteredLayout\n @extends {MasonryColumnLayout}\n */\nclass MasonryFixedCenteredLayout extends MasonryColumnLayout {\n /** @inheritdoc */\n _writeStyles(items) {\n this._outerColumnWidth = this._columnWidth + this._horSpacing;\n\n // If the first row isn't filled, then the items will be centered\n const filledColumns = getFirstRowFilledColumns(this._columns, items);\n this._offsetLeft += (this._masonryAvailableWidth - filledColumns * this._outerColumnWidth) / 2;\n\n super._writeStyles(items);\n }\n\n /** @inheritdoc */\n _getItemWidth(colspan) {\n return this._columnWidth * colspan + this._horSpacing * (colspan - 1);\n }\n\n /** @inheritdoc */\n _getItemLeft(columnIndex) {\n return this._offsetLeft + this._outerColumnWidth * columnIndex;\n }\n}\n\nexport default MasonryFixedCenteredLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1226, "kind": "class", "name": "MasonryFixedCenteredLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "Layout with fixed width centered items. The width of the items is defined with the columnwidth\nattribute.", "examples": [ "JS constructor\nnew Coral.Masonry.FixedCenteredLayout();", "" ], "lineNumber": 26, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.FixedCenteredLayout" } ], "interface": false, "extends": [ "MasonryColumnLayout" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1227, "kind": "method", "name": "_writeStyles", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout#_writeStyles", "access": "private", "description": null, "lineNumber": 28, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "items", "types": [ "*" ] } ], "return": null }, { "__docId__": 1228, "kind": "member", "name": "_outerColumnWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout#_outerColumnWidth", "access": "private", "description": null, "lineNumber": 29, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1229, "kind": "member", "name": "_offsetLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout#_offsetLeft", "access": "private", "description": null, "lineNumber": 33, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1230, "kind": "method", "name": "_getItemWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout#_getItemWidth", "access": "private", "description": null, "lineNumber": 39, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "colspan", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1231, "kind": "method", "name": "_getItemLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedCenteredLayout.js~MasonryFixedCenteredLayout#_getItemLeft", "access": "private", "description": null, "lineNumber": 44, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "columnIndex", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1232, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MasonryColumnLayout from './MasonryColumnLayout';\nimport {getFirstRowFilledColumns} from './MasonryLayoutUtil';\n\n/**\n Layout with fixed width and evenly spread items. The width of the items is defined with the columnwidth\n attribute.\n\n @example\n \n\n @class Coral.Masonry.FixedSpreadLayout\n @extends {MasonryColumnLayout}\n */\nclass MasonryFixedSpreadLayout extends MasonryColumnLayout {\n /** @inheritdoc */\n _writeStyles(items) {\n const columns = this._columns;\n\n // If the first row is not filled, then the items should be aligned left\n this._alignLeft = getFirstRowFilledColumns(columns, items) < columns.length;\n if (!this._alignLeft) {\n const remainingWidth = this._masonryInnerWidth - this._columnWidth * columns.length;\n this._horSpacing = remainingWidth / (columns.length + 1);\n }\n\n super._writeStyles(items);\n }\n\n /** @inheritdoc */\n _getItemWidth(colspan) {\n return this._columnWidth * colspan + this._horSpacing * (colspan - 1);\n }\n\n /** @inheritdoc */\n _getItemLeft(columnIndex) {\n return this._zeroOffsetLeft + this._columnWidth * columnIndex + this._horSpacing * (columnIndex + 1);\n }\n}\n\nexport default MasonryFixedSpreadLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1233, "kind": "class", "name": "MasonryFixedSpreadLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "Layout with fixed width and evenly spread items. The width of the items is defined with the columnwidth\nattribute.", "examples": [ "JS constructor\nnew Coral.Masonry.FixedSpreadLayout();", "" ], "lineNumber": 26, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.FixedSpreadLayout" } ], "interface": false, "extends": [ "MasonryColumnLayout" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1234, "kind": "method", "name": "_writeStyles", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout#_writeStyles", "access": "private", "description": null, "lineNumber": 28, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "items", "types": [ "*" ] } ], "return": null }, { "__docId__": 1235, "kind": "member", "name": "_alignLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout#_alignLeft", "access": "private", "description": null, "lineNumber": 32, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1236, "kind": "member", "name": "_horSpacing", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout#_horSpacing", "access": "private", "description": null, "lineNumber": 35, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1237, "kind": "method", "name": "_getItemWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout#_getItemWidth", "access": "private", "description": null, "lineNumber": 42, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "colspan", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1238, "kind": "method", "name": "_getItemLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryFixedSpreadLayout.js~MasonryFixedSpreadLayout#_getItemLeft", "access": "private", "description": null, "lineNumber": 47, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "columnIndex", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1239, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {BaseComponent} from '../../../coral-base-component';\nimport {DragAction} from '../../../coral-dragaction';\nimport '../../../coral-component-checkbox';\nimport quickactions from '../templates/quickactions';\nimport {transform, commons, validate, i18n} from '../../../coral-utils';\nimport MasonryItemAccessibilityState from './MasonryItemAccessibilityState';\nimport {Messenger} from '../../../coral-messenger';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Masonry-item';\n\n/** @ignore */\nconst isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(window.navigator.platform);\n\n/**\n @class Coral.Masonry.Item\n @classdesc A Masonry Item component\n @htmltag coral-masonry-item\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst MasonryItem = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n // messenger\n this._messenger = new Messenger(this);\n\n // Represents ownership (necessary when the item is moved which triggers callbacks)\n this._masonry = null;\n\n // Default value\n this._dragAction = null;\n\n // Template\n this._elements = {};\n\n quickactions.call(this._elements);\n }\n\n // @compat\n get content() {\n return this;\n }\n\n set content(value) {\n // Support configs\n if (typeof value === 'object') {\n for (const prop in value) {\n /** @ignore */\n this[prop] = value[prop];\n }\n }\n }\n\n /**\n Specify while disconnecting the item, should it show transition or not.\n This is useful when replacing large items, this result in delay.\n\n @type {Boolean}\n @default true\n @private No need to update in public document.\n */\n get showRemoveTransition() {\n return !(this._showRemoveTransition === false);\n }\n\n set showRemoveTransition(value) {\n this._showRemoveTransition = transform.boolean(value);\n }\n\n\n /**\n Specify whether the item is in removing state or not.\n @type {Boolean}\n */\n get removing() {\n return this.hasAttribute('_removing');\n }\n\n /**\n Whether the item is selected.\n\n @type {Boolean}\n @default false\n @htmlattribute selected\n @htmlattributereflected\n */\n get selected() {\n return this._selected || false;\n }\n\n set selected(value) {\n value = transform.booleanAttr(value);\n\n if(validate.valueMustChange(this._selected, value)) {\n this._selected = value;\n this._reflectAttribute('selected', value);\n this.trigger('coral-masonry-item:_selecteditemchanged');\n\n this.setAttribute('aria-selected', value);\n this.classList.toggle('is-selected', value);\n\n this._elements.check[value ? 'setAttribute' : 'removeAttribute']('checked', '');\n\n this._messenger.postMessage('coral-masonry-item:_selectedchanged');\n }\n }\n\n /**\n Animates the insertion of the item.\n\n @private\n */\n _insert() {\n if (this.classList.contains('is-beforeInserting')) {\n this.classList.remove('is-beforeInserting');\n this.classList.add('is-inserting');\n\n commons.transitionEnd(this, () => {\n this.classList.remove('is-inserting');\n });\n }\n }\n\n /** @private */\n _setTabbable(tabbable) {\n this.setAttribute('tabindex', tabbable ? 0 : -1);\n }\n\n /** @private */\n _updateDragAction(enabled) {\n let handle;\n if (enabled) {\n // Find handle\n if (this.getAttribute('coral-masonry-draghandle') !== null) {\n handle = this;\n } else {\n handle = this.querySelector('[coral-masonry-draghandle]');\n if (!handle) {\n // Disable drag&drop if handle wasn't found\n enabled = false;\n }\n }\n }\n\n if (enabled) {\n if (!this._dragAction) {\n this._dragAction = new DragAction(this);\n this._dragAction.dropZone = this.parentNode;\n }\n this._dragAction.handle = handle;\n } else if (this._dragAction) {\n this._dragAction.destroy();\n this._dragAction = null;\n }\n }\n\n /** @ignore */\n static get observedAttributes() {\n return super.observedAttributes.concat(['selected', '_removing', '_orderable']);\n }\n\n /** @ignore */\n attributeChangedCallback(name, oldValue, value) {\n if (name === '_removing') {\n // Do it in the next frame so that the removing animation is visible\n window.requestAnimationFrame(() => {\n this.classList.toggle('is-removing', value !== null);\n });\n } else if (name === '_orderable') {\n this._updateDragAction(value !== null);\n } else {\n super.attributeChangedCallback(name, oldValue, value);\n }\n }\n\n /** @ignore */\n _suspendCallback() {\n super._suspendCallback();\n this._messenger.disconnect();\n }\n\n /** @ignore */\n _resumeCallback() {\n this._messenger.connect();\n super._resumeCallback();\n // In case an already connected element is switched to new parent,\n // we would be ignoring the connected callback,\n // as the item will be connected to new parent, the new parent should be informed immediately\n this._messenger.postMessage('coral-masonry-item:_connected');\n }\n\n /** @ignore */\n connectedCallback() {\n this._messenger.connect();\n super.connectedCallback();\n\n // Inform masonry immediately\n this._messenger.postMessage('coral-masonry-item:_connected');\n }\n\n /** @ignore */\n render() {\n super.render();\n\n this.classList.add(CLASSNAME);\n\n // @a11y\n this.setAttribute('tabindex', '-1');\n\n // @a11y Add live region element to ensure announcement of selected state\n const accessibilityState = this._elements.accessibilityState || this.querySelector('coral-masonry-item-accessibilitystate') || new MasonryItemAccessibilityState();\n\n // @a11y Style to be visually hidden yet accessible to screen readers\n if (!accessibilityState.classList.contains('u-coral-screenReaderOnly')) {\n accessibilityState.classList.add('u-coral-screenReaderOnly');\n }\n\n // @a11y accessibility state string should announce in document lang, rather than item lang.\n accessibilityState.setAttribute('lang', i18n.locale);\n\n // @a11y accessibility state has role=\"status\" to announce as a live region\n accessibilityState.setAttribute('role', 'status');\n accessibilityState.setAttribute('aria-live', 'off');\n accessibilityState.hidden = true;\n\n accessibilityState.id = accessibilityState.id || commons.getUID();\n\n // @a11y Wait a frame and append live region content element so that it is the last child within item.\n // wait for next macrotask to avoid appending the accessibility state element before quickactions.\n setTimeout(() => {\n if (!accessibilityState.parentNode) {\n this.appendChild(accessibilityState);\n }\n\n // @a11y Item should be labelled by accessibility state.\n if (isMacLike) {\n const ariaLabelledby = this.getAttribute('aria-labelledby');\n if (ariaLabelledby) {\n this.setAttribute('aria-labelledby', ariaLabelledby + ' ' + accessibilityState.id);\n }\n }\n });\n\n this._elements.accessibilityState = accessibilityState;\n\n // Support cloneNode\n const template = this.querySelector('._coral-Masonry-item-quickActions');\n if (template) {\n template.remove();\n }\n this.insertBefore(this._elements.quickactions, this.firstChild);\n // todo workaround to not give user possibility to tab into checkbox\n this._elements.check._labellableElement.tabIndex = -1;\n this._elements.check.setAttribute('aria-hidden', 'true');\n }\n\n /** @ignore */\n disconnectedCallback() {\n super.disconnectedCallback();\n // disconnect messenger before calling masonry._onItemDisconnected\n this._messenger.disconnect();\n\n // Handle it in masonry immediately\n const masonry = this._masonry;\n if (masonry) {\n masonry._onItemDisconnected(this);\n }\n }\n});\n\nexport default MasonryItem;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1240, "kind": "variable", "name": "CLASSNAME", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js~CLASSNAME", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 22, "undocument": true, "type": { "types": [ "string" ] }, "ignore": true }, { "__docId__": 1241, "kind": "variable", "name": "isMacLike", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js~isMacLike", "access": "public", "export": false, "importPath": "@adobe/coral-spectrum", "importStyle": null, "description": null, "lineNumber": 25, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1242, "kind": "variable", "name": "MasonryItem", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItem.js~MasonryItem", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "A Masonry Item component", "lineNumber": 34, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.Item" }, { "tagName": "@classdesc", "tagValue": "A Masonry Item component" }, { "tagName": "@htmltag", "tagValue": "coral-masonry-item" }, { "tagName": "@extends", "tagValue": "{HTMLElement}" }, { "tagName": "@extends", "tagValue": "{BaseComponent}" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Masonry.Item();" ], "see": [ "../examples/#masonry" ], "type": { "types": [ "*" ] } }, { "__docId__": 1243, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItemAccessibilityState.js", "content": "/**\n * Copyright 2021 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n * @class Coral.Masonry.Item.AccessibilityState\n * @classdesc The Masonry Item Accessibility State\n * @htmltag coral-masonry-item-accessibilitystate\n * @extends HTMLElement\n*/\n export default () => {\n const element = document.createElement('coral-masonry-item-accessibilitystate');\n element.className = 'u-coral-screenReaderOnly';\n return element;\n};", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryItemAccessibilityState.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1244, "kind": "function", "name": "MasonryItemAccessibilityState", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItemAccessibilityState.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryItemAccessibilityState.js~MasonryItemAccessibilityState", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "The Masonry Item Accessibility State", "lineNumber": 19, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.Item.AccessibilityState" }, { "tagName": "@classdesc", "tagValue": "The Masonry Item Accessibility State" }, { "tagName": "@htmltag", "tagValue": "coral-masonry-item-accessibilitystate" }, { "tagName": "@extends", "tagValue": "HTMLElement" } ], "examples": [ "Markup\n", "JS constructor\nnew Coral.Masonry.Item.AccessibilityState();" ], "see": [ "../examples/#masonry" ], "params": [], "return": { "types": [ "*" ] } }, { "__docId__": 1245, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/**\n Base class for masonry layouts.\n\n Whenever a change is detected, the {@link Coral.Masonry.Layout#layout} method is called. This method must then\n ensure that all the items are positioned correctly.\n\n Layout-specific keyboard support must be handled by adding event listeners to the masonry in the constructor. Such\n event listeners must be removed in the {@link Coral.Masonry.Layout#destroy} method.\n\n @param masonry\n @class Coral.Masonry.Layout\n */\nclass MasonryLayout {\n /**\n * this is constructor description.\n * @param {number} arg1 this is arg1 description.\n * @param {string[]} arg2 this is arg2 description.\n */\n constructor(masonry) {\n this._masonry = masonry;\n }\n\n /**\n Layout name. Uses the constructor given name by default if defined.\n\n @type {String}\n */\n get name() {\n return this._name || this.constructor._name;\n }\n\n set name(value) {\n this._name = value;\n }\n\n /**\n Lays out the masonry items according to the implementation.\n */\n layout() {\n // To override\n }\n\n /**\n Removes all layout-specific attributes, style, data and event listeners from the masonry and its items.\n */\n destroy() {\n // To override\n }\n\n /**\n Removes the item from the control of the layout. This can be used to position the item differently,\n for example for drag&drop.\n\n @param {MasonryItem} item\n */\n // eslint-disable-next-line no-unused-vars\n detach(item) {\n // To override\n }\n\n /**\n Adds the item to the control of the layout again. The layout has to ensure that the item will be transitioned to\n its normal position flawlessly.\n\n @param {MasonryItem} item\n */\n // eslint-disable-next-line no-unused-vars\n reattach(item) {\n // To override\n }\n\n /**\n Returns the item at the given position. The position coordinates are relative to the masonry.\n\n If an item is being transitioned when this method is called, then it must choose the item based on the final\n instead of the current position.\n\n @param {number} x\n @param {number} y\n @return {?Coral.Masonry.Item}\n */\n // eslint-disable-next-line no-unused-vars\n itemAt(x, y) {\n // To override\n }\n\n /**\n Defines the name of the Layout\n\n @param {String} name\n */\n static defineName(name) {\n this._name = name;\n }\n}\n\nexport default MasonryLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1246, "kind": "class", "name": "MasonryLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "Base class for masonry layouts.\n\nWhenever a change is detected, the {@link Coral.Masonry.Layout#layout} method is called. This method must then\nensure that all the items are positioned correctly.\n\nLayout-specific keyboard support must be handled by adding event listeners to the masonry in the constructor. Such\nevent listeners must be removed in the {@link Coral.Masonry.Layout#destroy} method.", "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.Layout" } ], "params": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "masonry", "description": "" } ], "interface": false, "examples": [ "JS constructor\nnew Coral.Masonry.Layout();" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1247, "kind": "constructor", "name": "constructor", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#constructor", "access": "public", "description": "this is constructor description.", "lineNumber": 31, "params": [ { "nullable": null, "types": [ "number" ], "spread": false, "optional": false, "name": "arg1", "description": "this is arg1 description." }, { "nullable": null, "types": [ "string[]" ], "spread": false, "optional": false, "name": "arg2", "description": "this is arg2 description." } ] }, { "__docId__": 1248, "kind": "member", "name": "_masonry", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#_masonry", "access": "private", "description": null, "lineNumber": 32, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1249, "kind": "member", "name": "name", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#name", "access": "public", "description": "Layout name. Uses the constructor given name by default if defined.", "lineNumber": 40, "type": { "nullable": null, "types": [ "String" ], "spread": false, "description": null }, "modality": "both" }, { "__docId__": 1251, "kind": "member", "name": "_name", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#_name", "access": "private", "description": null, "lineNumber": 45, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1252, "kind": "method", "name": "layout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#layout", "access": "public", "description": "Lays out the masonry items according to the implementation.", "lineNumber": 51, "params": [], "return": null }, { "__docId__": 1253, "kind": "method", "name": "destroy", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#destroy", "access": "public", "description": "Removes all layout-specific attributes, style, data and event listeners from the masonry and its items.", "lineNumber": 58, "params": [], "return": null }, { "__docId__": 1254, "kind": "method", "name": "detach", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#detach", "access": "public", "description": "Removes the item from the control of the layout. This can be used to position the item differently,\nfor example for drag&drop.", "lineNumber": 69, "params": [ { "nullable": null, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "item", "description": "" } ], "return": null }, { "__docId__": 1255, "kind": "method", "name": "reattach", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#reattach", "access": "public", "description": "Adds the item to the control of the layout again. The layout has to ensure that the item will be transitioned to\nits normal position flawlessly.", "lineNumber": 80, "params": [ { "nullable": null, "types": [ "MasonryItem" ], "spread": false, "optional": false, "name": "item", "description": "" } ], "return": null }, { "__docId__": 1256, "kind": "method", "name": "itemAt", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout#itemAt", "access": "public", "description": "Returns the item at the given position. The position coordinates are relative to the masonry.\n\nIf an item is being transitioned when this method is called, then it must choose the item based on the final\ninstead of the current position.", "lineNumber": 95, "params": [ { "nullable": null, "types": [ "number" ], "spread": false, "optional": false, "name": "x", "description": "" }, { "nullable": null, "types": [ "number" ], "spread": false, "optional": false, "name": "y", "description": "" } ], "return": { "nullable": true, "types": [ "Coral.Masonry.Item" ], "spread": false, "description": "" } }, { "__docId__": 1257, "kind": "method", "name": "defineName", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout.defineName", "access": "public", "description": "Defines the name of the Layout", "lineNumber": 104, "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "name", "description": "" } ], "return": null }, { "__docId__": 1258, "kind": "member", "name": "_name", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayout.js~MasonryLayout._name", "access": "private", "description": null, "lineNumber": 105, "undocument": true, "ignore": true, "type": { "types": [ "*" ] } }, { "__docId__": 1259, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/** @ignore */\nconst setTransform = (el, value) => {\n el.style.setProperty('-webkit-transform', value);\n el.style.setProperty('-ms-transform', value);\n el.style.transform = value;\n};\n\n/** @ignore */\nconst setTransition = (el, value) => {\n el.style.setProperty('-webkit-transition', value);\n el.style.setProperty('-ms-transition', value);\n el.style.transition = value;\n};\n\n/** @ignore */\nconst getFirstRowFilledColumns = (columns, items) => {\n let filledColumns = 0;\n for (let i = 0 ; i < items.length ; i++) {\n const item = items[i];\n filledColumns += item._layoutData.colspan;\n if (filledColumns >= columns.length) {\n return columns.length;\n }\n }\n return filledColumns;\n};\n\n/** @ignore */\nconst csspx = (el, property) => parseFloat(window.getComputedStyle(el)[property], 10);\n\n// TODO if the property changes, it will not automatically relayout the masonry\n// TODO test columnWidth and colspan property and default values\n/** @ignore */\nconst getPositiveNumberProperty = (element, property, attribute, defaultValue, mobileValue) => {\n let value = element[property];\n if (value === undefined) {\n value = element.getAttribute(attribute);\n }\n value = parseInt(value, 10);\n if (value <= 0 || isNaN(value)) {\n value = defaultValue;\n }\n if(mobileValue && window.innerWidth <= 500) {\n value = mobileValue;\n }\n return value;\n};\n\nexport {setTransform, setTransition, getFirstRowFilledColumns, csspx, getPositiveNumberProperty};\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1260, "kind": "function", "name": "setTransform", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js~setTransform", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{setTransform}", "description": null, "lineNumber": 14, "ignore": true, "params": [ { "name": "el", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 1261, "kind": "function", "name": "setTransition", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js~setTransition", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{setTransition}", "description": null, "lineNumber": 21, "ignore": true, "params": [ { "name": "el", "types": [ "*" ] }, { "name": "value", "types": [ "*" ] } ], "return": null }, { "__docId__": 1262, "kind": "function", "name": "getFirstRowFilledColumns", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js~getFirstRowFilledColumns", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{getFirstRowFilledColumns}", "description": null, "lineNumber": 28, "ignore": true, "params": [ { "name": "columns", "types": [ "*" ] }, { "name": "items", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1263, "kind": "function", "name": "csspx", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js~csspx", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{csspx}", "description": null, "lineNumber": 41, "ignore": true, "params": [ { "name": "el", "types": [ "*" ] }, { "name": "property", "types": [ "*" ] } ], "return": null }, { "__docId__": 1264, "kind": "function", "name": "getPositiveNumberProperty", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js", "generator": false, "async": false, "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryLayoutUtil.js~getPositiveNumberProperty", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{getPositiveNumberProperty}", "description": null, "lineNumber": 46, "ignore": true, "params": [ { "name": "element", "types": [ "*" ] }, { "name": "property", "types": [ "*" ] }, { "name": "attribute", "types": [ "*" ] }, { "name": "defaultValue", "types": [ "*" ] }, { "name": "mobileValue", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1265, "kind": "file", "name": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport MasonryColumnLayout from './MasonryColumnLayout';\n\n/**\n Layout with variable width items. The minimal width of the items is defined with the columnwidth\n attribute.\n\n @example\n \n\n @class Coral.Masonry.VariableLayout\n @extends {MasonryColumnLayout}\n */\nclass MasonryVariableLayout extends MasonryColumnLayout {\n /** @inheritdoc */\n _getItemWidth(colspan) {\n return this._masonryAvailableWidth / this._columns.length * colspan - this._horSpacing;\n }\n\n /** @inheritdoc */\n _getItemLeft(columnIndex) {\n return this._offsetLeft + this._masonryAvailableWidth * columnIndex / this._columns.length;\n }\n}\n\nexport default MasonryVariableLayout;\n", "static": true, "longname": "/home/runner/work/coral-spectrum/coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js", "access": "public", "description": null, "lineNumber": 1 }, { "__docId__": 1266, "kind": "class", "name": "MasonryVariableLayout", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js", "static": true, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js~MasonryVariableLayout", "access": "public", "export": true, "importPath": "@adobe/coral-spectrum", "importStyle": "{Masonry}", "description": "Layout with variable width items. The minimal width of the items is defined with the columnwidth\nattribute.", "examples": [ "JS constructor\nnew Coral.Masonry.VariableLayout();", "" ], "lineNumber": 25, "unknown": [ { "tagName": "@class", "tagValue": "Coral.Masonry.VariableLayout" } ], "interface": false, "extends": [ "MasonryColumnLayout" ], "see": [ "../examples/#masonry" ] }, { "__docId__": 1267, "kind": "method", "name": "_getItemWidth", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js~MasonryVariableLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js~MasonryVariableLayout#_getItemWidth", "access": "private", "description": null, "lineNumber": 27, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "colspan", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1268, "kind": "method", "name": "_getItemLeft", "memberof": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js~MasonryVariableLayout", "generator": false, "async": false, "static": false, "longname": "coral-spectrum/coral-component-masonry/src/scripts/MasonryVariableLayout.js~MasonryVariableLayout#_getItemLeft", "access": "private", "description": null, "lineNumber": 32, "unknown": [ { "tagName": "@inheritdoc", "tagValue": "" } ], "ignore": true, "params": [ { "name": "columnIndex", "types": [ "*" ] } ], "return": { "types": [ "*" ] } }, { "__docId__": 1269, "kind": "file", "name": "coral-spectrum/coral-component-multifield/src/scripts/Multifield.js", "content": "/**\n * Copyright 2019 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport '../../../coral-component-textfield';\nimport {BaseComponent} from '../../../coral-base-component';\nimport MultifieldCollection from './MultifieldCollection';\nimport {commons, i18n, validate, transform} from '../../../coral-utils';\nimport {Decorator} from '../../../coral-decorator';\n\nconst CLASSNAME = '_coral-Multifield';\nconst IS_DRAGGING_CLASS = 'is-dragging';\nconst IS_AFTER_CLASS = 'is-after';\nconst IS_BEFORE_CLASS = 'is-before';\nconst TEMPLATE_SUPPORT = 'content' in document.createElement('template');\n\n/**\n @class Coral.Multifield\n @classdesc A Multifield component that enables adding, reordering, and removing multiple instances of a component.\n Multifield partially supports the template element in IE 11. If adding/removing items in the template\n is required, template.content should be used.\n Child elements can be given a special attribute to enable functionality:\n - [coral-multifield-add]. Click to add an item.\n @htmltag coral-multifield\n @extends {HTMLElement}\n @extends {BaseComponent}\n */\nconst Multifield = Decorator(class extends BaseComponent(HTMLElement) {\n /** @ignore */\n constructor() {\n super();\n\n this.setAttribute('id', this.id || commons.getUID());\n\n // Attach events\n const events = {\n 'coral-dragaction:dragstart coral-multifield-item': '_onDragStart',\n 'coral-dragaction:drag coral-multifield-item': '_onDrag',\n 'coral-dragaction:dragend coral-multifield-item': '_onDragEnd',\n\n 'click [coral-multifield-add]': '_onAddItemClick',\n 'click ._coral-Multifield-remove': '_onRemoveItemClick',\n 'click [coral-multifield-move]': '_onClickDragHandle',\n 'key:up [coral-multifield-move]': '_onMoveItemUp',\n 'key:pageup [coral-multifield-move]': '_onMoveItemUp',\n 'key:down [coral-multifield-move]': '_onMoveItemDown',\n 'key:pagedown [coral-multifield-move]': '_onMoveItemDown',\n 'key:home [coral-multifield-move]': '_onMoveItemHome',\n 'key:end [coral-multifield-move]': '_onMoveItemEnd',\n 'key:esc [coral-multifield-move]': '_onMoveItemEsc',\n 'click [coral-multifield-up]': '_onUpClick',\n 'click [coral-multifield-down]': '_onDownClick',\n 'capture:blur [coral-multifield-move]': '_onBlurDragHandle',\n 'change coral-multifield-item-content > input': '_onInputChange'\n };\n\n events[`global:key:escape #${this.id} > [coral-multifield-move]`] = '_onMoveItemEsc';\n\n this._delegateEvents(events);\n\n // Templates\n this._elements = {\n template: this.querySelector(`#${this.id} > template[coral-multifield-template]`) || document.createElement('template')\n };\n this._elements.template.setAttribute('coral-multifield-template', '');\n\n // In case