@cas-smartdesign/swatch-picker 3.1.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/docs/2_create-from-source.js +1 -1
  2. package/dist/docs/doc.css +1 -1
  3. package/dist/docs/doc.mjs +33 -36
  4. package/dist/swatch-picker-with-externals.js +1 -1
  5. package/dist/swatch-picker-with-externals.js.map +3 -3
  6. package/dist/swatch-picker.mjs.map +1 -1
  7. package/npm-third-party-licenses.json +52 -47
  8. package/package.json +5 -5
package/dist/swatch-picker-with-externals.js CHANGED
@@ -1,4 +1,4 @@
1
- var window;(window||={})["@cas-smartdesign/swatch-picker"]=(()=>{var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(t,o)=>{for(var l in o)a(t,l,{get:o[l],enumerable:!0})},m=(t,o,l,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of f(o))!u.call(t,r)&&r!==l&&a(t,r,{get:()=>o[r],enumerable:!(s=p(o,r))||s.enumerable});return t};var w=t=>m(a({},"__esModule",{value:!0}),t);var E={};g(E,{SwatchPicker:()=>i});var n=class c extends HTMLElement{memoizedTemplate(){let o=this.is();if(c.TEMPLATE_CACHE[o])return c.TEMPLATE_CACHE[o];let l=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(l,this.is()),c.TEMPLATE_CACHE[o]=l,l}connectedCallback(){let o=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(o.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("ready"))))}whenReady(o){this.shadowRoot?o():this.addEventListener("ready",()=>o())}};n.TEMPLATE_CACHE={};var b=n;var e={"color-base-red-50":"#ffeeef","color-base-red-100":"#ffe2e5","color-base-red-150":"#ffccd2","color-base-red-200":"#ffb7bf","color-base-red-300":"#ff97a3","color-base-red-400":"#f96778","color-base-red-450":"#f14558","color-base-red-500":"#ea2138","color-base-red-600":"#e2001a","color-base-red-700":"#cc0017","color-base-red-800":"#b50015","color-base-red-900":"#9f0012","color-base-orange-50":"#fff5ef","color-base-orange-100":"#ffefe5","color-base-orange-150":"#ffe3d1","color-base-orange-200":"#ffd7be","color-base-orange-300":"#ffc19b","color-base-orange-400":"#ffa670","color-base-orange-450":"#ff9250","color-base-orange-500":"#ff7e30","color-base-orange-600":"#ff6b11","color-base-orange-700":"#e95f0c","color-base-orange-800":"#d65404","color-base-orange-900":"#bf4800","color-base-yellow-50":"#fffaeb","color-base-yellow-100":"#fff6de","color-base-yellow-150":"#fff0cc","color-base-yellow-200":"#ffeab6","color-base-yellow-300":"#ffe39d","color-base-yellow-400":"#ffd97b","color-base-yellow-450":"#ffcf58","color-base-yellow-500":"#ffc434","color-base-yellow-600":"#ffbb11","color-base-yellow-700":"#e9aa0c","color-base-yellow-800":"#d69a04","color-base-yellow-900":"#bf8800","color-base-green-50":"#f6faec","color-base-green-100":"#f0f7df","color-base-green-150":"#e8f2d0","color-base-green-200":"#deedbc","color-base-green-300":"#cee49c","color-base-green-400":"#bedb79","color-base-green-450":"#add154","color-base-green-500":"#9bc730","color-base-green-600":"#8abd0c","color-base-green-700":"#7baa0b","color-base-green-800":"#6e970a","color-base-green-900":"#618508","color-base-dark-green-50":"#eaf4ec","color-base-dark-green-100":"#dff2e3","color-base-dark-green-150":"#ccecd3","color-base-dark-green-200":"#b1dfbb","color-base-dark-green-300":"#93d3a2","color-base-dark-green-400":"#72c584","color-base-dark-green-450":"#4cb563","color-base-dark-green-500":"#26a642","color-base-dark-green-600":"#009621","color-base-dark-green-700":"#00871e","color-base-dark-green-800":"#00781a","color-base-dark-green-900":"#006917","color-base-cyan-50":"#e3f0f5","color-base-cyan-100":"#d5eff8","color-base-cyan-150":"#c2e8f3","color-base-cyan-200":"#aee0ef","color-base-cyan-300":"#92d4e7","color-base-cyan-400":"#70c7e0","color-base-cyan-450":"#43b4d6","color-base-cyan-500":"#19a3cb","color-base-cyan-600":"#0099c5","color-base-cyan-700":"#008ab2","color-base-cyan-800":"#007a9e","color-base-cyan-900":"#006b8a","color-base-blue-50":"#e7f1fa","color-base-blue-100":"#d6eeff","color-base-blue-150":"#c7e7ff","color-base-blue-200":"#b1deff","color-base-blue-300":"#8ecfff","color-base-blue-400":"#6ac0ff","color-base-blue-450":"#4ab2ff","color-base-blue-500":"#2ba4ff","color-base-blue-600":"#0d98ff","color-base-blue-700":"#0c88e6","color-base-blue-800":"#0a77ca","color-base-blue-900":"#0968af","color-base-dark-blue-50":"#e1ebf6","color-base-dark-blue-100":"#d3e6fa","color-base-dark-blue-150":"#b9d7f5","color-base-dark-blue-200":"#9bc6f2","color-base-dark-blue-300":"#77afe7","color-base-dark-blue-400":"#5198e0","color-base-dark-blue-450":"#3a85d1","color-base-dark-blue-500":"#2576c7","color-base-dark-blue-600":"#1467ba","color-base-dark-blue-700":"#125da8","color-base-dark-blue-800":"#105295","color-base-dark-blue-900":"#0e4883","color-base-pink-50":"#fce6f3","color-base-pink-100":"#fad5eb","color-base-pink-150":"#f7bbdd","color-base-pink-200":"#f2a1cf","color-base-pink-300":"#ec78ba","color-base-pink-400":"#e755a8","color-base-pink-450":"#d94397","color-base-pink-500":"#cc2f89","color-base-pink-600":"#c41579","color-base-pink-700":"#b4136e","color-base-pink-800":"#a01163","color-base-pink-900":"#8a0f55","color-base-purple-50":"#f4e2f6","color-base-purple-100":"#eccff0","color-base-purple-150":"#dab2e0","color-base-purple-200":"#c792cf","color-base-purple-300":"#ab66b4","color-base-purple-400":"#93459e","color-base-purple-450":"#823591","color-base-purple-500":"#772386","color-base-purple-600":"#6c127b","color-base-purple-700":"#5e106b","color-base-purple-800":"#530d5e","color-base-purple-900":"#450b4f","color-base-brown-50":"#f2eae4","color-base-brown-100":"#eadcd2","color-base-brown-150":"#d8c4b3","color-base-brown-200":"#bca38d","color-base-brown-300":"#a08165","color-base-brown-400":"#8b6747","color-base-brown-450":"#755438","color-base-brown-500":"#65472b","color-base-brown-600":"#593b20","color-base-brown-700":"#4f351d","color-base-brown-800":"#462f1b","color-base-brown-900":"#3f2915","color-base-grey-50":"#f9f9f9","color-base-grey-100":"#f3f3f3","color-base-grey-150":"#eeeeee","color-base-grey-200":"#e5e5e5","color-base-grey-300":"#d9d9d9","color-base-grey-400":"#cccccc","color-base-grey-450":"#bbbbbb","color-base-grey-500":"#aaaaaa","color-base-grey-600":"#999999","color-base-grey-700":"#777777","color-base-grey-800":"#666666","color-base-grey-900":"#555555","color-base-white":"#ffffff","color-base-black":"#111111","color-font-base":"#111111","color-font-secondary":"#555555","color-font-tertiary":"#999999","color-font-warn":"#555555","color-font-suggest":"#bf8800","color-font-error":"#cc0017","size-font-tiny":"12px","size-font-small":"13px","size-font-medium":"16px","size-font-large":"20px","size-font-xl":"24px","size-font-xxl":"32px","size-font-xxxl":"48px","size-font-base":"16px","font-family-base":'"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',"time-transition-short":"275ms","time-transition-base":"300ms","time-transition-long":"600ms","time-transition-xl":"1000ms"};var y=`<style>
1
+ var window;(window||={})["@cas-smartdesign/swatch-picker"]=(()=>{var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(t,o)=>{for(var l in o)a(t,l,{get:o[l],enumerable:!0})},m=(t,o,l,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of f(o))!u.call(t,r)&&r!==l&&a(t,r,{get:()=>o[r],enumerable:!(s=p(o,r))||s.enumerable});return t};var w=t=>m(a({},"__esModule",{value:!0}),t);var E={};g(E,{SwatchPicker:()=>i});var n=class c extends HTMLElement{memoizedTemplate(){let o=this.is();if(c.TEMPLATE_CACHE[o])return c.TEMPLATE_CACHE[o];let l=this.template();return window.ShadyCSS&&window.ShadyCSS.prepareTemplate(l,this.is()),c.TEMPLATE_CACHE[o]=l,l}connectedCallback(){let o=this.memoizedTemplate();window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.shadowRoot||(this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(document.importNode(o.content,!0)),requestAnimationFrame(()=>this.dispatchEvent(new CustomEvent("ready"))))}whenReady(o){this.shadowRoot?o():this.addEventListener("ready",()=>o())}};n.TEMPLATE_CACHE={};var b=n;var e={"color-base-red-50":"#ffeeef","color-base-red-100":"#ffe2e5","color-base-red-150":"#ffccd2","color-base-red-200":"#ffb7bf","color-base-red-300":"#ff97a3","color-base-red-400":"#f96778","color-base-red-450":"#f14558","color-base-red-500":"#ea2138","color-base-red-600":"#e2001a","color-base-red-700":"#cc0017","color-base-red-800":"#b50015","color-base-red-900":"#9f0012","color-base-orange-50":"#fff5ef","color-base-orange-100":"#ffefe5","color-base-orange-150":"#ffe3d1","color-base-orange-200":"#ffd7be","color-base-orange-300":"#ffc19b","color-base-orange-400":"#ffa670","color-base-orange-450":"#ff9250","color-base-orange-500":"#ff7e30","color-base-orange-600":"#ff6b11","color-base-orange-700":"#e95f0c","color-base-orange-800":"#d65404","color-base-orange-900":"#bf4800","color-base-yellow-50":"#fffaeb","color-base-yellow-100":"#fff6de","color-base-yellow-150":"#fff0cc","color-base-yellow-200":"#ffeab6","color-base-yellow-300":"#ffe39d","color-base-yellow-400":"#ffd97b","color-base-yellow-450":"#ffcf58","color-base-yellow-500":"#ffc434","color-base-yellow-600":"#ffbb11","color-base-yellow-700":"#e9aa0c","color-base-yellow-800":"#d69a04","color-base-yellow-900":"#bf8800","color-base-green-50":"#f6faec","color-base-green-100":"#f0f7df","color-base-green-150":"#e8f2d0","color-base-green-200":"#deedbc","color-base-green-300":"#cee49c","color-base-green-400":"#bedb79","color-base-green-450":"#add154","color-base-green-500":"#9bc730","color-base-green-600":"#8abd0c","color-base-green-700":"#7baa0b","color-base-green-800":"#6e970a","color-base-green-900":"#618508","color-base-dark-green-50":"#eaf4ec","color-base-dark-green-100":"#dff2e3","color-base-dark-green-150":"#ccecd3","color-base-dark-green-200":"#b1dfbb","color-base-dark-green-300":"#93d3a2","color-base-dark-green-400":"#72c584","color-base-dark-green-450":"#4cb563","color-base-dark-green-500":"#26a642","color-base-dark-green-600":"#009621","color-base-dark-green-700":"#00871e","color-base-dark-green-800":"#00781a","color-base-dark-green-900":"#006917","color-base-cyan-50":"#e3f0f5","color-base-cyan-100":"#d5eff8","color-base-cyan-150":"#c2e8f3","color-base-cyan-200":"#aee0ef","color-base-cyan-300":"#92d4e7","color-base-cyan-400":"#70c7e0","color-base-cyan-450":"#43b4d6","color-base-cyan-500":"#19a3cb","color-base-cyan-600":"#0099c5","color-base-cyan-700":"#008ab2","color-base-cyan-800":"#007a9e","color-base-cyan-900":"#006b8a","color-base-blue-50":"#e7f1fa","color-base-blue-100":"#d6eeff","color-base-blue-150":"#c7e7ff","color-base-blue-200":"#b1deff","color-base-blue-300":"#8ecfff","color-base-blue-400":"#6ac0ff","color-base-blue-450":"#4ab2ff","color-base-blue-500":"#2ba4ff","color-base-blue-600":"#0d98ff","color-base-blue-700":"#0c88e6","color-base-blue-800":"#0a77ca","color-base-blue-900":"#0968af","color-base-dark-blue-50":"#e1ebf6","color-base-dark-blue-100":"#d3e6fa","color-base-dark-blue-150":"#b9d7f5","color-base-dark-blue-200":"#9bc6f2","color-base-dark-blue-300":"#77afe7","color-base-dark-blue-400":"#5198e0","color-base-dark-blue-450":"#3a85d1","color-base-dark-blue-500":"#2576c7","color-base-dark-blue-600":"#1467ba","color-base-dark-blue-700":"#125da8","color-base-dark-blue-800":"#105295","color-base-dark-blue-900":"#0e4883","color-base-pink-50":"#fce6f3","color-base-pink-100":"#fad5eb","color-base-pink-150":"#f7bbdd","color-base-pink-200":"#f2a1cf","color-base-pink-300":"#ec78ba","color-base-pink-400":"#e755a8","color-base-pink-450":"#d94397","color-base-pink-500":"#cc2f89","color-base-pink-600":"#c41579","color-base-pink-700":"#b4136e","color-base-pink-800":"#a01163","color-base-pink-900":"#8a0f55","color-base-purple-50":"#f4e2f6","color-base-purple-100":"#eccff0","color-base-purple-150":"#dab2e0","color-base-purple-200":"#c792cf","color-base-purple-300":"#ab66b4","color-base-purple-400":"#93459e","color-base-purple-450":"#823591","color-base-purple-500":"#772386","color-base-purple-600":"#6c127b","color-base-purple-700":"#5e106b","color-base-purple-800":"#530d5e","color-base-purple-900":"#450b4f","color-base-brown-50":"#f2eae4","color-base-brown-100":"#eadcd2","color-base-brown-150":"#d8c4b3","color-base-brown-200":"#bca38d","color-base-brown-300":"#a08165","color-base-brown-400":"#8b6747","color-base-brown-450":"#755438","color-base-brown-500":"#65472b","color-base-brown-600":"#593b20","color-base-brown-700":"#4f351d","color-base-brown-800":"#462f1b","color-base-brown-900":"#3f2915","color-base-grey-50":"#f9f9f9","color-base-grey-100":"#f3f3f3","color-base-grey-150":"#eeeeee","color-base-grey-200":"#e5e5e5","color-base-grey-300":"#d9d9d9","color-base-grey-400":"#cccccc","color-base-grey-450":"#bbbbbb","color-base-grey-500":"#aaaaaa","color-base-grey-600":"#999999","color-base-grey-700":"#777777","color-base-grey-800":"#666666","color-base-grey-900":"#555555","color-base-white":"#ffffff","color-base-black":"#111111","color-font-base":"#111111","color-font-secondary":"#555555","color-font-tertiary":"#999999","color-font-warn":"#555555","color-font-suggest":"#bf8800","color-font-error":"#cc0017","font-family-base":'"Segoe UI", Tahoma, Geneva, Verdana, sans-serif',"size-font-tiny":"12px","size-font-small":"13px","size-font-medium":"16px","size-font-large":"20px","size-font-xl":"24px","size-font-xxl":"32px","size-font-xxxl":"48px","size-font-base":"16px","time-transition-short":"275ms","time-transition-base":"300ms","time-transition-long":"600ms","time-transition-xl":"1000ms"};var y=`<style>
2
2
  :host {
3
3
  display: block;
4
4
  outline: none;
package/dist/swatch-picker-with-externals.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../element-base/element-base.ts", "../../../design-tokens/dist/tokens.esm.js", "../swatch-picker.html?raw", "../default-colors.ts", "../swatch-picker.ts"],
4
- "sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default {\n \"color-base-red-50\": \"#ffeeef\",\n \"color-base-red-100\": \"#ffe2e5\",\n \"color-base-red-150\": \"#ffccd2\",\n \"color-base-red-200\": \"#ffb7bf\",\n \"color-base-red-300\": \"#ff97a3\",\n \"color-base-red-400\": \"#f96778\",\n \"color-base-red-450\": \"#f14558\",\n \"color-base-red-500\": \"#ea2138\",\n \"color-base-red-600\": \"#e2001a\",\n \"color-base-red-700\": \"#cc0017\",\n \"color-base-red-800\": \"#b50015\",\n \"color-base-red-900\": \"#9f0012\",\n \"color-base-orange-50\": \"#fff5ef\",\n \"color-base-orange-100\": \"#ffefe5\",\n \"color-base-orange-150\": \"#ffe3d1\",\n \"color-base-orange-200\": \"#ffd7be\",\n \"color-base-orange-300\": \"#ffc19b\",\n \"color-base-orange-400\": \"#ffa670\",\n \"color-base-orange-450\": \"#ff9250\",\n \"color-base-orange-500\": \"#ff7e30\",\n \"color-base-orange-600\": \"#ff6b11\",\n \"color-base-orange-700\": \"#e95f0c\",\n \"color-base-orange-800\": \"#d65404\",\n \"color-base-orange-900\": \"#bf4800\",\n \"color-base-yellow-50\": \"#fffaeb\",\n \"color-base-yellow-100\": \"#fff6de\",\n \"color-base-yellow-150\": \"#fff0cc\",\n \"color-base-yellow-200\": \"#ffeab6\",\n \"color-base-yellow-300\": \"#ffe39d\",\n \"color-base-yellow-400\": \"#ffd97b\",\n \"color-base-yellow-450\": \"#ffcf58\",\n \"color-base-yellow-500\": \"#ffc434\",\n \"color-base-yellow-600\": \"#ffbb11\",\n \"color-base-yellow-700\": \"#e9aa0c\",\n \"color-base-yellow-800\": \"#d69a04\",\n \"color-base-yellow-900\": \"#bf8800\",\n \"color-base-green-50\": \"#f6faec\",\n \"color-base-green-100\": \"#f0f7df\",\n \"color-base-green-150\": \"#e8f2d0\",\n \"color-base-green-200\": \"#deedbc\",\n \"color-base-green-300\": \"#cee49c\",\n \"color-base-green-400\": \"#bedb79\",\n \"color-base-green-450\": \"#add154\",\n \"color-base-green-500\": \"#9bc730\",\n \"color-base-green-600\": \"#8abd0c\",\n \"color-base-green-700\": \"#7baa0b\",\n \"color-base-green-800\": \"#6e970a\",\n \"color-base-green-900\": \"#618508\",\n \"color-base-dark-green-50\": \"#eaf4ec\",\n \"color-base-dark-green-100\": \"#dff2e3\",\n \"color-base-dark-green-150\": \"#ccecd3\",\n \"color-base-dark-green-200\": \"#b1dfbb\",\n \"color-base-dark-green-300\": \"#93d3a2\",\n \"color-base-dark-green-400\": \"#72c584\",\n \"color-base-dark-green-450\": \"#4cb563\",\n \"color-base-dark-green-500\": \"#26a642\",\n \"color-base-dark-green-600\": \"#009621\",\n \"color-base-dark-green-700\": \"#00871e\",\n \"color-base-dark-green-800\": \"#00781a\",\n \"color-base-dark-green-900\": \"#006917\",\n \"color-base-cyan-50\": \"#e3f0f5\",\n \"color-base-cyan-100\": \"#d5eff8\",\n \"color-base-cyan-150\": \"#c2e8f3\",\n \"color-base-cyan-200\": \"#aee0ef\",\n \"color-base-cyan-300\": \"#92d4e7\",\n \"color-base-cyan-400\": \"#70c7e0\",\n \"color-base-cyan-450\": \"#43b4d6\",\n \"color-base-cyan-500\": \"#19a3cb\",\n \"color-base-cyan-600\": \"#0099c5\",\n \"color-base-cyan-700\": \"#008ab2\",\n \"color-base-cyan-800\": \"#007a9e\",\n \"color-base-cyan-900\": \"#006b8a\",\n \"color-base-blue-50\": \"#e7f1fa\",\n \"color-base-blue-100\": \"#d6eeff\",\n \"color-base-blue-150\": \"#c7e7ff\",\n \"color-base-blue-200\": \"#b1deff\",\n \"color-base-blue-300\": \"#8ecfff\",\n \"color-base-blue-400\": \"#6ac0ff\",\n \"color-base-blue-450\": \"#4ab2ff\",\n \"color-base-blue-500\": \"#2ba4ff\",\n \"color-base-blue-600\": \"#0d98ff\",\n \"color-base-blue-700\": \"#0c88e6\",\n \"color-base-blue-800\": \"#0a77ca\",\n \"color-base-blue-900\": \"#0968af\",\n \"color-base-dark-blue-50\": \"#e1ebf6\",\n \"color-base-dark-blue-100\": \"#d3e6fa\",\n \"color-base-dark-blue-150\": \"#b9d7f5\",\n \"color-base-dark-blue-200\": \"#9bc6f2\",\n \"color-base-dark-blue-300\": \"#77afe7\",\n \"color-base-dark-blue-400\": \"#5198e0\",\n \"color-base-dark-blue-450\": \"#3a85d1\",\n \"color-base-dark-blue-500\": \"#2576c7\",\n \"color-base-dark-blue-600\": \"#1467ba\",\n \"color-base-dark-blue-700\": \"#125da8\",\n \"color-base-dark-blue-800\": \"#105295\",\n \"color-base-dark-blue-900\": \"#0e4883\",\n \"color-base-pink-50\": \"#fce6f3\",\n \"color-base-pink-100\": \"#fad5eb\",\n \"color-base-pink-150\": \"#f7bbdd\",\n \"color-base-pink-200\": \"#f2a1cf\",\n \"color-base-pink-300\": \"#ec78ba\",\n \"color-base-pink-400\": \"#e755a8\",\n \"color-base-pink-450\": \"#d94397\",\n \"color-base-pink-500\": \"#cc2f89\",\n \"color-base-pink-600\": \"#c41579\",\n \"color-base-pink-700\": \"#b4136e\",\n \"color-base-pink-800\": \"#a01163\",\n \"color-base-pink-900\": \"#8a0f55\",\n \"color-base-purple-50\": \"#f4e2f6\",\n \"color-base-purple-100\": \"#eccff0\",\n \"color-base-purple-150\": \"#dab2e0\",\n \"color-base-purple-200\": \"#c792cf\",\n \"color-base-purple-300\": \"#ab66b4\",\n \"color-base-purple-400\": \"#93459e\",\n \"color-base-purple-450\": \"#823591\",\n \"color-base-purple-500\": \"#772386\",\n \"color-base-purple-600\": \"#6c127b\",\n \"color-base-purple-700\": \"#5e106b\",\n \"color-base-purple-800\": \"#530d5e\",\n \"color-base-purple-900\": \"#450b4f\",\n \"color-base-brown-50\": \"#f2eae4\",\n \"color-base-brown-100\": \"#eadcd2\",\n \"color-base-brown-150\": \"#d8c4b3\",\n \"color-base-brown-200\": \"#bca38d\",\n \"color-base-brown-300\": \"#a08165\",\n \"color-base-brown-400\": \"#8b6747\",\n \"color-base-brown-450\": \"#755438\",\n \"color-base-brown-500\": \"#65472b\",\n \"color-base-brown-600\": \"#593b20\",\n \"color-base-brown-700\": \"#4f351d\",\n \"color-base-brown-800\": \"#462f1b\",\n \"color-base-brown-900\": \"#3f2915\",\n \"color-base-grey-50\": \"#f9f9f9\",\n \"color-base-grey-100\": \"#f3f3f3\",\n \"color-base-grey-150\": \"#eeeeee\",\n \"color-base-grey-200\": \"#e5e5e5\",\n \"color-base-grey-300\": \"#d9d9d9\",\n \"color-base-grey-400\": \"#cccccc\",\n \"color-base-grey-450\": \"#bbbbbb\",\n \"color-base-grey-500\": \"#aaaaaa\",\n \"color-base-grey-600\": \"#999999\",\n \"color-base-grey-700\": \"#777777\",\n \"color-base-grey-800\": \"#666666\",\n \"color-base-grey-900\": \"#555555\",\n \"color-base-white\": \"#ffffff\",\n \"color-base-black\": \"#111111\",\n \"color-font-base\": \"#111111\",\n \"color-font-secondary\": \"#555555\",\n \"color-font-tertiary\": \"#999999\",\n \"color-font-warn\": \"#555555\",\n \"color-font-suggest\": \"#bf8800\",\n \"color-font-error\": \"#cc0017\",\n \"size-font-tiny\": \"12px\",\n \"size-font-small\": \"13px\",\n \"size-font-medium\": \"16px\",\n \"size-font-large\": \"20px\",\n \"size-font-xl\": \"24px\",\n \"size-font-xxl\": \"32px\",\n \"size-font-xxxl\": \"48px\",\n \"size-font-base\": \"16px\",\n \"font-family-base\": \"\\\"Segoe UI\\\", Tahoma, Geneva, Verdana, sans-serif\",\n \"time-transition-short\": \"275ms\",\n \"time-transition-base\": \"300ms\",\n \"time-transition-long\": \"600ms\",\n \"time-transition-xl\": \"1000ms\"\n}", "export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\toutline: none;\\n\\t\\tcontain: style;\\n\\t}\\n\\n\\t.picker {\\n\\t\\tposition: relative;\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.ripple {\\n\\t\\twidth: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\theight: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\tborder-radius: calc(var(--sd-swatch-picker-icon-size, 24px) * 1.5);\\n\\t\\tposition: absolute;\\n\\t\\tleft: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\ttop: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\topacity: 0;\\n\\t\\tbackground: grey;\\n\\t}\\n\\n\\t:host(:focus) .ripple,\\n\\t.ripple.active {\\n\\t\\topacity: 0.2;\\n\\t}\\n\\n\\t.color-palette {\\n\\t\\tposition: fixed;\\n\\t\\toverflow: hidden;\\n\\t\\tdisplay: flex;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tflex-direction: column;\\n\\t\\talign-content: baseline;\\n\\t\\ttransition:\\n\\t\\t\\ttransform 0.3s ease-out,\\n\\t\\t\\topacity 0.3s ease-out;\\n\\t\\ttransform-origin: top left;\\n\\t\\ttransform: scale(0.25, 0.14);\\n\\t\\topacity: 0;\\n\\t\\tz-index: 1;\\n\\t}\\n\\n\\t.color-palette:not(.opened) {\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.color-palette .col {\\n\\t\\tflex: 1;\\n\\t}\\n\\n\\t.color:not(.active-color):hover {\\n\\t\\ttransform: scale(1.3);\\n\\t\\ttransition-duration: 200ms;\\n\\t}\\n\\n\\t.active-color {\\n\\t\\ttransform: scale(1.3);\\n\\t\\tbox-shadow:\\n\\t\\t\\t0 2px 2px 0 rgba(0, 0, 0, 0.14),\\n\\t\\t\\t0 1px 5px 0 rgba(0, 0, 0, 0.12),\\n\\t\\t\\t0 3px 1px -2px rgba(0, 0, 0, 0.2);\\n\\t}\\n\\n\\t.opened {\\n\\t\\ttransform: scale(1, 1);\\n\\t\\topacity: 1;\\n\\t}\\n\\n\\t.icon {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t.icon-container {\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-icon-color, #1467ba);\\n\\t}\\n\\n\\t:host([aria-disabled=\\\"true\\\"]) .icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-inactive-icon-color, #767676);\\n\\t}\\n</style>\\n<div class=\\\"picker\\\">\\n\\t<div class=\\\"ripple\\\"></div>\\n\\t<div class=\\\"icon-container\\\">\\n\\t\\t<svg\\n\\t\\t\\tclass=\\\"icon\\\"\\n\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\tversion=\\\"1.1\\\"\\n\\t\\t\\txmlns=\\\"http://www.w3.org/2000/svg\\\"\\n\\t\\t\\txmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\">\\n\\t\\t\\t<g>\\n\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\tclass=\\\"icon-path\\\"\\n\\t\\t\\t\\t\\td=\\\"M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z\\\"></path>\\n\\t\\t\\t\\t<path d=\\\"M0 20h24v4H0z\\\" class=\\\"color-indicator\\\" style=\\\"fill: none\\\"></path>\\n\\t\\t\\t</g>\\n\\t\\t</svg>\\n\\t</div>\\n</div>\\n<div class=\\\"color-palette\\\"></div>\\n\"", "import { default as tokens } from \"@cas-smartdesign/design-tokens\";\n\nexport const defaultColors: string[] = [\n tokens[\"color-base-red-50\"],\n tokens[\"color-base-red-100\"],\n tokens[\"color-base-red-150\"],\n tokens[\"color-base-red-200\"],\n tokens[\"color-base-red-300\"],\n tokens[\"color-base-red-400\"],\n tokens[\"color-base-red-500\"],\n tokens[\"color-base-red-600\"],\n tokens[\"color-base-red-700\"],\n tokens[\"color-base-red-800\"],\n tokens[\"color-base-red-900\"],\n tokens[\"color-base-orange-50\"],\n tokens[\"color-base-orange-100\"],\n tokens[\"color-base-orange-150\"],\n tokens[\"color-base-orange-200\"],\n tokens[\"color-base-orange-300\"],\n tokens[\"color-base-orange-400\"],\n tokens[\"color-base-orange-500\"],\n tokens[\"color-base-orange-600\"],\n tokens[\"color-base-orange-700\"],\n tokens[\"color-base-orange-800\"],\n tokens[\"color-base-orange-900\"],\n tokens[\"color-base-yellow-50\"],\n tokens[\"color-base-yellow-100\"],\n tokens[\"color-base-yellow-150\"],\n tokens[\"color-base-yellow-200\"],\n tokens[\"color-base-yellow-300\"],\n tokens[\"color-base-yellow-400\"],\n tokens[\"color-base-yellow-500\"],\n tokens[\"color-base-yellow-600\"],\n tokens[\"color-base-yellow-700\"],\n tokens[\"color-base-yellow-800\"],\n tokens[\"color-base-yellow-900\"],\n tokens[\"color-base-green-50\"],\n tokens[\"color-base-green-100\"],\n tokens[\"color-base-green-150\"],\n tokens[\"color-base-green-200\"],\n tokens[\"color-base-green-300\"],\n tokens[\"color-base-green-400\"],\n tokens[\"color-base-green-500\"],\n tokens[\"color-base-green-600\"],\n tokens[\"color-base-green-700\"],\n tokens[\"color-base-green-800\"],\n tokens[\"color-base-green-900\"],\n tokens[\"color-base-dark-green-50\"],\n tokens[\"color-base-dark-green-100\"],\n tokens[\"color-base-dark-green-150\"],\n tokens[\"color-base-dark-green-200\"],\n tokens[\"color-base-dark-green-300\"],\n tokens[\"color-base-dark-green-400\"],\n tokens[\"color-base-dark-green-500\"],\n tokens[\"color-base-dark-green-600\"],\n tokens[\"color-base-dark-green-700\"],\n tokens[\"color-base-dark-green-800\"],\n tokens[\"color-base-dark-green-900\"],\n tokens[\"color-base-cyan-50\"],\n tokens[\"color-base-cyan-100\"],\n tokens[\"color-base-cyan-150\"],\n tokens[\"color-base-cyan-200\"],\n tokens[\"color-base-cyan-300\"],\n tokens[\"color-base-cyan-400\"],\n tokens[\"color-base-cyan-500\"],\n tokens[\"color-base-cyan-600\"],\n tokens[\"color-base-cyan-700\"],\n tokens[\"color-base-cyan-800\"],\n tokens[\"color-base-cyan-900\"],\n tokens[\"color-base-blue-50\"],\n tokens[\"color-base-blue-100\"],\n tokens[\"color-base-blue-150\"],\n tokens[\"color-base-blue-200\"],\n tokens[\"color-base-blue-300\"],\n tokens[\"color-base-blue-400\"],\n tokens[\"color-base-blue-500\"],\n tokens[\"color-base-blue-600\"],\n tokens[\"color-base-blue-700\"],\n tokens[\"color-base-blue-800\"],\n tokens[\"color-base-blue-900\"],\n tokens[\"color-base-dark-blue-50\"],\n tokens[\"color-base-dark-blue-100\"],\n tokens[\"color-base-dark-blue-150\"],\n tokens[\"color-base-dark-blue-200\"],\n tokens[\"color-base-dark-blue-300\"],\n tokens[\"color-base-dark-blue-400\"],\n tokens[\"color-base-dark-blue-500\"],\n tokens[\"color-base-dark-blue-600\"],\n tokens[\"color-base-dark-blue-700\"],\n tokens[\"color-base-dark-blue-800\"],\n tokens[\"color-base-dark-blue-900\"],\n tokens[\"color-base-pink-50\"],\n tokens[\"color-base-pink-100\"],\n tokens[\"color-base-pink-150\"],\n tokens[\"color-base-pink-200\"],\n tokens[\"color-base-pink-300\"],\n tokens[\"color-base-pink-400\"],\n tokens[\"color-base-pink-500\"],\n tokens[\"color-base-pink-600\"],\n tokens[\"color-base-pink-700\"],\n tokens[\"color-base-pink-800\"],\n tokens[\"color-base-pink-900\"],\n tokens[\"color-base-purple-50\"],\n tokens[\"color-base-purple-100\"],\n tokens[\"color-base-purple-150\"],\n tokens[\"color-base-purple-200\"],\n tokens[\"color-base-purple-300\"],\n tokens[\"color-base-purple-400\"],\n tokens[\"color-base-purple-500\"],\n tokens[\"color-base-purple-600\"],\n tokens[\"color-base-purple-700\"],\n tokens[\"color-base-purple-800\"],\n tokens[\"color-base-purple-900\"],\n tokens[\"color-base-brown-50\"],\n tokens[\"color-base-brown-100\"],\n tokens[\"color-base-brown-150\"],\n tokens[\"color-base-brown-200\"],\n tokens[\"color-base-brown-300\"],\n tokens[\"color-base-brown-400\"],\n tokens[\"color-base-brown-500\"],\n tokens[\"color-base-brown-600\"],\n tokens[\"color-base-brown-700\"],\n tokens[\"color-base-brown-800\"],\n tokens[\"color-base-brown-900\"],\n tokens[\"color-base-grey-50\"],\n tokens[\"color-base-grey-100\"],\n tokens[\"color-base-grey-150\"],\n tokens[\"color-base-grey-200\"],\n tokens[\"color-base-grey-300\"],\n tokens[\"color-base-grey-400\"],\n tokens[\"color-base-grey-500\"],\n tokens[\"color-base-grey-600\"],\n tokens[\"color-base-grey-700\"],\n tokens[\"color-base-grey-800\"],\n tokens[\"color-base-grey-900\"],\n];\n", "import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./swatch-picker.html?raw\";\nimport { defaultColors } from \"./default-colors\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [SwatchPicker.ID]: SwatchPicker;\n }\n}\n\nexport type IValueChangeEventDetail = string;\n\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"value-change\": CustomEvent<IValueChangeEventDetail>;\n}\n\nexport interface Stage {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class SwatchPicker extends ElementBase {\n public static readonly ID = \"sd-swatch-picker\";\n\n private picker: HTMLDivElement;\n private ripple: HTMLDivElement;\n private colorPalette: HTMLDivElement;\n private iconIndicator: HTMLElement;\n\n private colorWhenOpen: string;\n private colorNumberInColumn: number;\n private _selectedColorElement: HTMLDivElement;\n private _colorList: string[];\n private _scrollTop: number;\n private _scrollLeft: number;\n\n public is(): string {\n return SwatchPicker.ID;\n }\n\n public get color(): string {\n return this.getAttribute(\"color\");\n }\n\n public set color(color: string) {\n if (color) {\n this.setAttribute(\"color\", color);\n if (this.shadowRoot) {\n this.iconIndicator.style.fill = color;\n const currentIndex = this.colorList.indexOf(color);\n if (currentIndex >= 0) {\n this.selectedColorElement = this.colorPalette.children[currentIndex] as HTMLDivElement;\n } else {\n this.selectedColorElement = null;\n }\n }\n } else {\n this.removeAttribute(\"color\");\n this.iconIndicator.style.fill = \"none\";\n this.selectedColorElement = null;\n }\n }\n\n public get colorList(): string[] {\n return this._colorList || defaultColors;\n }\n\n public set colorList(colors: string[]) {\n this._colorList = colors;\n if (this.shadowRoot) {\n this.updatePalette();\n }\n }\n\n public get columnCount(): number {\n return Number(this.getAttribute(\"columncount\")) || 12;\n }\n\n public set columnCount(columnCount: number) {\n if (columnCount) {\n this.setAttribute(\"columncount\", `${columnCount}`);\n } else {\n this.removeAttribute(\"columncount\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n public get colorSize(): number {\n return Number(this.getAttribute(\"colorsize\")) || 20;\n }\n\n public set colorSize(colorSize: number) {\n if (colorSize) {\n this.setAttribute(\"colorsize\", `${colorSize}`);\n } else {\n this.removeAttribute(\"colorsize\");\n }\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n static get observedAttributes(): string[] {\n return [\"colorsize\", \"columncount\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.colorPalette) {\n this.colorPalette = this.shadowRoot.querySelector(\".color-palette\");\n this.picker = this.shadowRoot.querySelector(\".picker\");\n this.ripple = this.shadowRoot.querySelector(\".ripple\");\n this.iconIndicator = this.shadowRoot.querySelector(\".color-indicator\");\n\n if (this.color) {\n this.iconIndicator.style.fill = this.color;\n }\n\n this.picker.addEventListener(\"pointerdown\", (event) => {\n event.stopPropagation();\n if (this.colorPalette.classList.contains(\"opened\")) {\n this.close();\n } else {\n this.updatePalettePosition();\n this.open();\n }\n });\n\n this.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n this.open();\n event.preventDefault();\n }\n });\n\n this.updatePalette();\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n }\n\n public attributeChangedCallback(): void {\n if (this.colorPalette) {\n this.updatePalette();\n }\n }\n\n private updatePalette(): void {\n while (this.colorPalette.firstChild) {\n this.colorPalette.removeChild(this.colorPalette.firstChild);\n }\n this.colorNumberInColumn = Math.ceil(this.colorList.length / this.columnCount);\n this.colorPalette.style.height = `${this.colorNumberInColumn * this.colorSize}px`;\n this.colorPalette.style.width = `${this.colorSize * this.columnCount}px`;\n\n this.colorPalette.appendChild(this.createColorPaletteFragment());\n }\n\n private createColorPaletteFragment(): DocumentFragment {\n const fragment: DocumentFragment = document.createDocumentFragment();\n const predefinedColor = this.color;\n for (const colorValue of this.colorList) {\n const colorElement = document.createElement(\"div\");\n colorElement.classList.add(\"color\");\n colorElement.style.backgroundColor = colorValue;\n colorElement.style.width = `${this.colorSize}px`;\n colorElement.style.height = `${this.colorSize}px`;\n colorElement.addEventListener(\"pointerdown\", () => {\n this.color = colorValue;\n this.close();\n this.dispatchValueChange();\n });\n if (predefinedColor === colorValue) {\n this.selectedColorElement = colorElement;\n this.selectedColorElement.classList.add(\"active-color\");\n }\n fragment.appendChild(colorElement);\n }\n return fragment;\n }\n\n private get selectedColorElement(): HTMLDivElement {\n return this._selectedColorElement;\n }\n\n private set selectedColorElement(selectedColorElement: HTMLDivElement) {\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.remove(\"active-color\");\n }\n this._selectedColorElement = selectedColorElement;\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.add(\"active-color\");\n }\n }\n\n private open() {\n if (this.disabled) {\n return;\n }\n this.colorPalette.classList.add(\"opened\");\n this.ripple.classList.add(\"active\");\n this.colorWhenOpen = this.color;\n\n this.saveScrollPosition();\n\n window.addEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.addEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.addEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private close() {\n this.colorPalette.classList.remove(\"opened\");\n this.ripple.classList.remove(\"active\");\n\n window.removeEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.removeEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.removeEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private keyDownListener = (event) => {\n if (event.defaultPrevented) {\n return;\n }\n let shouldPrevent = true;\n const currentIndex = this.colorList.indexOf(this.color);\n switch (event.key) {\n case \"Esc\":\n case \"Escape\":\n if (this.colorWhenOpen) {\n this.color = this.colorWhenOpen;\n }\n this.close();\n break;\n case \"Up\":\n case \"ArrowUp\":\n if (currentIndex > 0) {\n this.color = this.colorList[currentIndex - 1];\n } else {\n this.color = this.colorList[this.colorList.length - 1];\n }\n break;\n case \"Down\":\n case \"ArrowDown\":\n if (currentIndex < this.colorList.length - 1) {\n this.color = this.colorList[currentIndex + 1];\n } else {\n this.color = this.colorList[0];\n }\n break;\n case \"Left\":\n case \"ArrowLeft\": {\n let indexAfterLeftNavigation;\n if (currentIndex === 0) {\n indexAfterLeftNavigation = this.colorList.length - 1;\n } else {\n indexAfterLeftNavigation = currentIndex - this.colorNumberInColumn;\n if (indexAfterLeftNavigation < 0) {\n indexAfterLeftNavigation = this.colorList.length + indexAfterLeftNavigation;\n if (indexAfterLeftNavigation % this.colorNumberInColumn > 0) {\n indexAfterLeftNavigation--;\n }\n }\n }\n this.color = this.colorList[indexAfterLeftNavigation];\n break;\n }\n case \"Right\":\n case \"ArrowRight\": {\n let indexAfterRightNavigation;\n if (currentIndex === this.colorList.length - 1) {\n indexAfterRightNavigation = 0;\n } else {\n indexAfterRightNavigation = currentIndex + this.colorNumberInColumn;\n if (indexAfterRightNavigation >= this.colorList.length) {\n indexAfterRightNavigation = indexAfterRightNavigation - this.colorList.length;\n if (indexAfterRightNavigation < this.colorNumberInColumn) {\n indexAfterRightNavigation++;\n }\n }\n }\n this.color = this.colorList[indexAfterRightNavigation];\n break;\n }\n case \"Enter\":\n this.close();\n this.dispatchValueChange();\n break;\n default:\n shouldPrevent = false;\n return;\n }\n if (shouldPrevent) {\n event.preventDefault();\n }\n };\n\n private modalityListener = (event) => {\n if (!this.contains(event.target)) {\n this.close();\n }\n };\n\n private scrollListener = () => {\n this.restoreScrollPosition();\n };\n\n // This \"lock\" mechanism is based on Polymer's iron-overlay-behavior.\n private saveScrollPosition(): void {\n if (document.scrollingElement) {\n this._scrollTop = document.scrollingElement.scrollTop;\n this._scrollLeft = document.scrollingElement.scrollLeft;\n } else {\n // Since we don't know if is the body or html, get max.\n this._scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);\n this._scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);\n }\n }\n\n private restoreScrollPosition(): void {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = this._scrollTop;\n document.scrollingElement.scrollLeft = this._scrollLeft;\n } else {\n // Since we don't know if is the body or html, set both.\n document.documentElement.scrollTop = document.body.scrollTop = this._scrollTop;\n document.documentElement.scrollLeft = document.body.scrollLeft = this._scrollLeft;\n }\n }\n\n private updatePalettePosition(): void {\n const rect = this.getBoundingClientRect();\n if (rect.left + this.colorPalette.offsetWidth > this.scrollingElementClientWidth) {\n this.colorPalette.style.left = `${this.scrollingElementClientWidth - this.colorPalette.offsetWidth}px`;\n } else {\n this.colorPalette.style.left = `${rect.left}px`;\n }\n if (rect.top + this.colorPalette.offsetHeight > this.scrollingElementClientHeight) {\n this.colorPalette.style.top = `${this.scrollingElementClientHeight - this.colorPalette.offsetHeight}px`;\n } else {\n this.colorPalette.style.top = `${rect.top}px`;\n }\n }\n\n private get scrollingElementClientHeight(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientHeight;\n } else {\n return Math.max(document.documentElement.clientHeight, document.body.clientHeight);\n }\n }\n\n private get scrollingElementClientWidth(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientWidth;\n } else {\n return Math.max(document.documentElement.clientWidth, document.body.clientWidth);\n }\n }\n\n private dispatchValueChange(): void {\n this.dispatchEvent(new CustomEvent<IValueChangeEventDetail>(\"value-change\", { detail: this.color }));\n }\n}\n\ncustomElements.define(SwatchPicker.ID, SwatchPicker);\n"],
5
- "mappings": "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",
3
+ "sources": ["../../element-base/element-base.ts", "../../../design-tokens/dist/tokens.esm.js", "../swatch-picker.html", "../default-colors.ts", "../swatch-picker.ts"],
4
+ "sourcesContent": ["export type IReadyEvent = void;\n\nexport interface CustomEventMap extends HTMLElementEventMap {\n ready: CustomEvent<IReadyEvent>;\n}\n\nexport interface ElementBase {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport abstract class ElementBase extends HTMLElement {\n public abstract is(): string;\n\n protected abstract template(): HTMLTemplateElement;\n private static readonly TEMPLATE_CACHE: {\n [name: string]: HTMLTemplateElement;\n } = {};\n private memoizedTemplate(): HTMLTemplateElement {\n const is = this.is();\n if (ElementBase.TEMPLATE_CACHE[is]) {\n return ElementBase.TEMPLATE_CACHE[is];\n }\n const template = this.template();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.prepareTemplate(template, this.is());\n }\n ElementBase.TEMPLATE_CACHE[is] = template;\n return template;\n }\n\n public connectedCallback() {\n const template = this.memoizedTemplate();\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if ((window as any).ShadyCSS) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (window as any).ShadyCSS.styleElement(this);\n }\n if (!this.shadowRoot) {\n this.attachShadow({ mode: \"open\" });\n this.shadowRoot.appendChild(document.importNode(template.content, true));\n requestAnimationFrame(() => this.dispatchEvent(new CustomEvent<IReadyEvent>(\"ready\")));\n }\n }\n\n public whenReady(actor: () => void) {\n if (this.shadowRoot) {\n actor();\n } else {\n this.addEventListener(\"ready\", () => actor());\n }\n }\n}\n", "export default {\n \"color-base-red-50\": \"#ffeeef\",\n \"color-base-red-100\": \"#ffe2e5\",\n \"color-base-red-150\": \"#ffccd2\",\n \"color-base-red-200\": \"#ffb7bf\",\n \"color-base-red-300\": \"#ff97a3\",\n \"color-base-red-400\": \"#f96778\",\n \"color-base-red-450\": \"#f14558\",\n \"color-base-red-500\": \"#ea2138\",\n \"color-base-red-600\": \"#e2001a\",\n \"color-base-red-700\": \"#cc0017\",\n \"color-base-red-800\": \"#b50015\",\n \"color-base-red-900\": \"#9f0012\",\n \"color-base-orange-50\": \"#fff5ef\",\n \"color-base-orange-100\": \"#ffefe5\",\n \"color-base-orange-150\": \"#ffe3d1\",\n \"color-base-orange-200\": \"#ffd7be\",\n \"color-base-orange-300\": \"#ffc19b\",\n \"color-base-orange-400\": \"#ffa670\",\n \"color-base-orange-450\": \"#ff9250\",\n \"color-base-orange-500\": \"#ff7e30\",\n \"color-base-orange-600\": \"#ff6b11\",\n \"color-base-orange-700\": \"#e95f0c\",\n \"color-base-orange-800\": \"#d65404\",\n \"color-base-orange-900\": \"#bf4800\",\n \"color-base-yellow-50\": \"#fffaeb\",\n \"color-base-yellow-100\": \"#fff6de\",\n \"color-base-yellow-150\": \"#fff0cc\",\n \"color-base-yellow-200\": \"#ffeab6\",\n \"color-base-yellow-300\": \"#ffe39d\",\n \"color-base-yellow-400\": \"#ffd97b\",\n \"color-base-yellow-450\": \"#ffcf58\",\n \"color-base-yellow-500\": \"#ffc434\",\n \"color-base-yellow-600\": \"#ffbb11\",\n \"color-base-yellow-700\": \"#e9aa0c\",\n \"color-base-yellow-800\": \"#d69a04\",\n \"color-base-yellow-900\": \"#bf8800\",\n \"color-base-green-50\": \"#f6faec\",\n \"color-base-green-100\": \"#f0f7df\",\n \"color-base-green-150\": \"#e8f2d0\",\n \"color-base-green-200\": \"#deedbc\",\n \"color-base-green-300\": \"#cee49c\",\n \"color-base-green-400\": \"#bedb79\",\n \"color-base-green-450\": \"#add154\",\n \"color-base-green-500\": \"#9bc730\",\n \"color-base-green-600\": \"#8abd0c\",\n \"color-base-green-700\": \"#7baa0b\",\n \"color-base-green-800\": \"#6e970a\",\n \"color-base-green-900\": \"#618508\",\n \"color-base-dark-green-50\": \"#eaf4ec\",\n \"color-base-dark-green-100\": \"#dff2e3\",\n \"color-base-dark-green-150\": \"#ccecd3\",\n \"color-base-dark-green-200\": \"#b1dfbb\",\n \"color-base-dark-green-300\": \"#93d3a2\",\n \"color-base-dark-green-400\": \"#72c584\",\n \"color-base-dark-green-450\": \"#4cb563\",\n \"color-base-dark-green-500\": \"#26a642\",\n \"color-base-dark-green-600\": \"#009621\",\n \"color-base-dark-green-700\": \"#00871e\",\n \"color-base-dark-green-800\": \"#00781a\",\n \"color-base-dark-green-900\": \"#006917\",\n \"color-base-cyan-50\": \"#e3f0f5\",\n \"color-base-cyan-100\": \"#d5eff8\",\n \"color-base-cyan-150\": \"#c2e8f3\",\n \"color-base-cyan-200\": \"#aee0ef\",\n \"color-base-cyan-300\": \"#92d4e7\",\n \"color-base-cyan-400\": \"#70c7e0\",\n \"color-base-cyan-450\": \"#43b4d6\",\n \"color-base-cyan-500\": \"#19a3cb\",\n \"color-base-cyan-600\": \"#0099c5\",\n \"color-base-cyan-700\": \"#008ab2\",\n \"color-base-cyan-800\": \"#007a9e\",\n \"color-base-cyan-900\": \"#006b8a\",\n \"color-base-blue-50\": \"#e7f1fa\",\n \"color-base-blue-100\": \"#d6eeff\",\n \"color-base-blue-150\": \"#c7e7ff\",\n \"color-base-blue-200\": \"#b1deff\",\n \"color-base-blue-300\": \"#8ecfff\",\n \"color-base-blue-400\": \"#6ac0ff\",\n \"color-base-blue-450\": \"#4ab2ff\",\n \"color-base-blue-500\": \"#2ba4ff\",\n \"color-base-blue-600\": \"#0d98ff\",\n \"color-base-blue-700\": \"#0c88e6\",\n \"color-base-blue-800\": \"#0a77ca\",\n \"color-base-blue-900\": \"#0968af\",\n \"color-base-dark-blue-50\": \"#e1ebf6\",\n \"color-base-dark-blue-100\": \"#d3e6fa\",\n \"color-base-dark-blue-150\": \"#b9d7f5\",\n \"color-base-dark-blue-200\": \"#9bc6f2\",\n \"color-base-dark-blue-300\": \"#77afe7\",\n \"color-base-dark-blue-400\": \"#5198e0\",\n \"color-base-dark-blue-450\": \"#3a85d1\",\n \"color-base-dark-blue-500\": \"#2576c7\",\n \"color-base-dark-blue-600\": \"#1467ba\",\n \"color-base-dark-blue-700\": \"#125da8\",\n \"color-base-dark-blue-800\": \"#105295\",\n \"color-base-dark-blue-900\": \"#0e4883\",\n \"color-base-pink-50\": \"#fce6f3\",\n \"color-base-pink-100\": \"#fad5eb\",\n \"color-base-pink-150\": \"#f7bbdd\",\n \"color-base-pink-200\": \"#f2a1cf\",\n \"color-base-pink-300\": \"#ec78ba\",\n \"color-base-pink-400\": \"#e755a8\",\n \"color-base-pink-450\": \"#d94397\",\n \"color-base-pink-500\": \"#cc2f89\",\n \"color-base-pink-600\": \"#c41579\",\n \"color-base-pink-700\": \"#b4136e\",\n \"color-base-pink-800\": \"#a01163\",\n \"color-base-pink-900\": \"#8a0f55\",\n \"color-base-purple-50\": \"#f4e2f6\",\n \"color-base-purple-100\": \"#eccff0\",\n \"color-base-purple-150\": \"#dab2e0\",\n \"color-base-purple-200\": \"#c792cf\",\n \"color-base-purple-300\": \"#ab66b4\",\n \"color-base-purple-400\": \"#93459e\",\n \"color-base-purple-450\": \"#823591\",\n \"color-base-purple-500\": \"#772386\",\n \"color-base-purple-600\": \"#6c127b\",\n \"color-base-purple-700\": \"#5e106b\",\n \"color-base-purple-800\": \"#530d5e\",\n \"color-base-purple-900\": \"#450b4f\",\n \"color-base-brown-50\": \"#f2eae4\",\n \"color-base-brown-100\": \"#eadcd2\",\n \"color-base-brown-150\": \"#d8c4b3\",\n \"color-base-brown-200\": \"#bca38d\",\n \"color-base-brown-300\": \"#a08165\",\n \"color-base-brown-400\": \"#8b6747\",\n \"color-base-brown-450\": \"#755438\",\n \"color-base-brown-500\": \"#65472b\",\n \"color-base-brown-600\": \"#593b20\",\n \"color-base-brown-700\": \"#4f351d\",\n \"color-base-brown-800\": \"#462f1b\",\n \"color-base-brown-900\": \"#3f2915\",\n \"color-base-grey-50\": \"#f9f9f9\",\n \"color-base-grey-100\": \"#f3f3f3\",\n \"color-base-grey-150\": \"#eeeeee\",\n \"color-base-grey-200\": \"#e5e5e5\",\n \"color-base-grey-300\": \"#d9d9d9\",\n \"color-base-grey-400\": \"#cccccc\",\n \"color-base-grey-450\": \"#bbbbbb\",\n \"color-base-grey-500\": \"#aaaaaa\",\n \"color-base-grey-600\": \"#999999\",\n \"color-base-grey-700\": \"#777777\",\n \"color-base-grey-800\": \"#666666\",\n \"color-base-grey-900\": \"#555555\",\n \"color-base-white\": \"#ffffff\",\n \"color-base-black\": \"#111111\",\n \"color-font-base\": \"#111111\",\n \"color-font-secondary\": \"#555555\",\n \"color-font-tertiary\": \"#999999\",\n \"color-font-warn\": \"#555555\",\n \"color-font-suggest\": \"#bf8800\",\n \"color-font-error\": \"#cc0017\",\n \"font-family-base\": \"\\\"Segoe UI\\\", Tahoma, Geneva, Verdana, sans-serif\",\n \"size-font-tiny\": \"12px\",\n \"size-font-small\": \"13px\",\n \"size-font-medium\": \"16px\",\n \"size-font-large\": \"20px\",\n \"size-font-xl\": \"24px\",\n \"size-font-xxl\": \"32px\",\n \"size-font-xxxl\": \"48px\",\n \"size-font-base\": \"16px\",\n \"time-transition-short\": \"275ms\",\n \"time-transition-base\": \"300ms\",\n \"time-transition-long\": \"600ms\",\n \"time-transition-xl\": \"1000ms\"\n}", "export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\toutline: none;\\n\\t\\tcontain: style;\\n\\t}\\n\\n\\t.picker {\\n\\t\\tposition: relative;\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.ripple {\\n\\t\\twidth: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\theight: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\tborder-radius: calc(var(--sd-swatch-picker-icon-size, 24px) * 1.5);\\n\\t\\tposition: absolute;\\n\\t\\tleft: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\ttop: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\topacity: 0;\\n\\t\\tbackground: grey;\\n\\t}\\n\\n\\t:host(:focus) .ripple,\\n\\t.ripple.active {\\n\\t\\topacity: 0.2;\\n\\t}\\n\\n\\t.color-palette {\\n\\t\\tposition: fixed;\\n\\t\\toverflow: hidden;\\n\\t\\tdisplay: flex;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tflex-direction: column;\\n\\t\\talign-content: baseline;\\n\\t\\ttransition:\\n\\t\\t\\ttransform 0.3s ease-out,\\n\\t\\t\\topacity 0.3s ease-out;\\n\\t\\ttransform-origin: top left;\\n\\t\\ttransform: scale(0.25, 0.14);\\n\\t\\topacity: 0;\\n\\t\\tz-index: 1;\\n\\t}\\n\\n\\t.color-palette:not(.opened) {\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.color-palette .col {\\n\\t\\tflex: 1;\\n\\t}\\n\\n\\t.color:not(.active-color):hover {\\n\\t\\ttransform: scale(1.3);\\n\\t\\ttransition-duration: 200ms;\\n\\t}\\n\\n\\t.active-color {\\n\\t\\ttransform: scale(1.3);\\n\\t\\tbox-shadow:\\n\\t\\t\\t0 2px 2px 0 rgba(0, 0, 0, 0.14),\\n\\t\\t\\t0 1px 5px 0 rgba(0, 0, 0, 0.12),\\n\\t\\t\\t0 3px 1px -2px rgba(0, 0, 0, 0.2);\\n\\t}\\n\\n\\t.opened {\\n\\t\\ttransform: scale(1, 1);\\n\\t\\topacity: 1;\\n\\t}\\n\\n\\t.icon {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t.icon-container {\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-icon-color, #1467ba);\\n\\t}\\n\\n\\t:host([aria-disabled=\\\"true\\\"]) .icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-inactive-icon-color, #767676);\\n\\t}\\n</style>\\n<div class=\\\"picker\\\">\\n\\t<div class=\\\"ripple\\\"></div>\\n\\t<div class=\\\"icon-container\\\">\\n\\t\\t<svg\\n\\t\\t\\tclass=\\\"icon\\\"\\n\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\tversion=\\\"1.1\\\"\\n\\t\\t\\txmlns=\\\"http://www.w3.org/2000/svg\\\"\\n\\t\\t\\txmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\">\\n\\t\\t\\t<g>\\n\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\tclass=\\\"icon-path\\\"\\n\\t\\t\\t\\t\\td=\\\"M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z\\\"></path>\\n\\t\\t\\t\\t<path d=\\\"M0 20h24v4H0z\\\" class=\\\"color-indicator\\\" style=\\\"fill: none\\\"></path>\\n\\t\\t\\t</g>\\n\\t\\t</svg>\\n\\t</div>\\n</div>\\n<div class=\\\"color-palette\\\"></div>\\n\"", "import { default as tokens } from \"@cas-smartdesign/design-tokens\";\n\nexport const defaultColors: string[] = [\n tokens[\"color-base-red-50\"],\n tokens[\"color-base-red-100\"],\n tokens[\"color-base-red-150\"],\n tokens[\"color-base-red-200\"],\n tokens[\"color-base-red-300\"],\n tokens[\"color-base-red-400\"],\n tokens[\"color-base-red-500\"],\n tokens[\"color-base-red-600\"],\n tokens[\"color-base-red-700\"],\n tokens[\"color-base-red-800\"],\n tokens[\"color-base-red-900\"],\n tokens[\"color-base-orange-50\"],\n tokens[\"color-base-orange-100\"],\n tokens[\"color-base-orange-150\"],\n tokens[\"color-base-orange-200\"],\n tokens[\"color-base-orange-300\"],\n tokens[\"color-base-orange-400\"],\n tokens[\"color-base-orange-500\"],\n tokens[\"color-base-orange-600\"],\n tokens[\"color-base-orange-700\"],\n tokens[\"color-base-orange-800\"],\n tokens[\"color-base-orange-900\"],\n tokens[\"color-base-yellow-50\"],\n tokens[\"color-base-yellow-100\"],\n tokens[\"color-base-yellow-150\"],\n tokens[\"color-base-yellow-200\"],\n tokens[\"color-base-yellow-300\"],\n tokens[\"color-base-yellow-400\"],\n tokens[\"color-base-yellow-500\"],\n tokens[\"color-base-yellow-600\"],\n tokens[\"color-base-yellow-700\"],\n tokens[\"color-base-yellow-800\"],\n tokens[\"color-base-yellow-900\"],\n tokens[\"color-base-green-50\"],\n tokens[\"color-base-green-100\"],\n tokens[\"color-base-green-150\"],\n tokens[\"color-base-green-200\"],\n tokens[\"color-base-green-300\"],\n tokens[\"color-base-green-400\"],\n tokens[\"color-base-green-500\"],\n tokens[\"color-base-green-600\"],\n tokens[\"color-base-green-700\"],\n tokens[\"color-base-green-800\"],\n tokens[\"color-base-green-900\"],\n tokens[\"color-base-dark-green-50\"],\n tokens[\"color-base-dark-green-100\"],\n tokens[\"color-base-dark-green-150\"],\n tokens[\"color-base-dark-green-200\"],\n tokens[\"color-base-dark-green-300\"],\n tokens[\"color-base-dark-green-400\"],\n tokens[\"color-base-dark-green-500\"],\n tokens[\"color-base-dark-green-600\"],\n tokens[\"color-base-dark-green-700\"],\n tokens[\"color-base-dark-green-800\"],\n tokens[\"color-base-dark-green-900\"],\n tokens[\"color-base-cyan-50\"],\n tokens[\"color-base-cyan-100\"],\n tokens[\"color-base-cyan-150\"],\n tokens[\"color-base-cyan-200\"],\n tokens[\"color-base-cyan-300\"],\n tokens[\"color-base-cyan-400\"],\n tokens[\"color-base-cyan-500\"],\n tokens[\"color-base-cyan-600\"],\n tokens[\"color-base-cyan-700\"],\n tokens[\"color-base-cyan-800\"],\n tokens[\"color-base-cyan-900\"],\n tokens[\"color-base-blue-50\"],\n tokens[\"color-base-blue-100\"],\n tokens[\"color-base-blue-150\"],\n tokens[\"color-base-blue-200\"],\n tokens[\"color-base-blue-300\"],\n tokens[\"color-base-blue-400\"],\n tokens[\"color-base-blue-500\"],\n tokens[\"color-base-blue-600\"],\n tokens[\"color-base-blue-700\"],\n tokens[\"color-base-blue-800\"],\n tokens[\"color-base-blue-900\"],\n tokens[\"color-base-dark-blue-50\"],\n tokens[\"color-base-dark-blue-100\"],\n tokens[\"color-base-dark-blue-150\"],\n tokens[\"color-base-dark-blue-200\"],\n tokens[\"color-base-dark-blue-300\"],\n tokens[\"color-base-dark-blue-400\"],\n tokens[\"color-base-dark-blue-500\"],\n tokens[\"color-base-dark-blue-600\"],\n tokens[\"color-base-dark-blue-700\"],\n tokens[\"color-base-dark-blue-800\"],\n tokens[\"color-base-dark-blue-900\"],\n tokens[\"color-base-pink-50\"],\n tokens[\"color-base-pink-100\"],\n tokens[\"color-base-pink-150\"],\n tokens[\"color-base-pink-200\"],\n tokens[\"color-base-pink-300\"],\n tokens[\"color-base-pink-400\"],\n tokens[\"color-base-pink-500\"],\n tokens[\"color-base-pink-600\"],\n tokens[\"color-base-pink-700\"],\n tokens[\"color-base-pink-800\"],\n tokens[\"color-base-pink-900\"],\n tokens[\"color-base-purple-50\"],\n tokens[\"color-base-purple-100\"],\n tokens[\"color-base-purple-150\"],\n tokens[\"color-base-purple-200\"],\n tokens[\"color-base-purple-300\"],\n tokens[\"color-base-purple-400\"],\n tokens[\"color-base-purple-500\"],\n tokens[\"color-base-purple-600\"],\n tokens[\"color-base-purple-700\"],\n tokens[\"color-base-purple-800\"],\n tokens[\"color-base-purple-900\"],\n tokens[\"color-base-brown-50\"],\n tokens[\"color-base-brown-100\"],\n tokens[\"color-base-brown-150\"],\n tokens[\"color-base-brown-200\"],\n tokens[\"color-base-brown-300\"],\n tokens[\"color-base-brown-400\"],\n tokens[\"color-base-brown-500\"],\n tokens[\"color-base-brown-600\"],\n tokens[\"color-base-brown-700\"],\n tokens[\"color-base-brown-800\"],\n tokens[\"color-base-brown-900\"],\n tokens[\"color-base-grey-50\"],\n tokens[\"color-base-grey-100\"],\n tokens[\"color-base-grey-150\"],\n tokens[\"color-base-grey-200\"],\n tokens[\"color-base-grey-300\"],\n tokens[\"color-base-grey-400\"],\n tokens[\"color-base-grey-500\"],\n tokens[\"color-base-grey-600\"],\n tokens[\"color-base-grey-700\"],\n tokens[\"color-base-grey-800\"],\n tokens[\"color-base-grey-900\"],\n];\n", "import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./swatch-picker.html?raw\";\nimport { defaultColors } from \"./default-colors\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [SwatchPicker.ID]: SwatchPicker;\n }\n}\n\nexport type IValueChangeEventDetail = string;\n\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"value-change\": CustomEvent<IValueChangeEventDetail>;\n}\n\nexport interface Stage {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class SwatchPicker extends ElementBase {\n public static readonly ID = \"sd-swatch-picker\";\n\n private picker: HTMLDivElement;\n private ripple: HTMLDivElement;\n private colorPalette: HTMLDivElement;\n private iconIndicator: HTMLElement;\n\n private colorWhenOpen: string;\n private colorNumberInColumn: number;\n private _selectedColorElement: HTMLDivElement;\n private _colorList: string[];\n private _scrollTop: number;\n private _scrollLeft: number;\n\n public is(): string {\n return SwatchPicker.ID;\n }\n\n public get color(): string {\n return this.getAttribute(\"color\");\n }\n\n public set color(color: string) {\n if (color) {\n this.setAttribute(\"color\", color);\n if (this.shadowRoot) {\n this.iconIndicator.style.fill = color;\n const currentIndex = this.colorList.indexOf(color);\n if (currentIndex >= 0) {\n this.selectedColorElement = this.colorPalette.children[currentIndex] as HTMLDivElement;\n } else {\n this.selectedColorElement = null;\n }\n }\n } else {\n this.removeAttribute(\"color\");\n this.iconIndicator.style.fill = \"none\";\n this.selectedColorElement = null;\n }\n }\n\n public get colorList(): string[] {\n return this._colorList || defaultColors;\n }\n\n public set colorList(colors: string[]) {\n this._colorList = colors;\n if (this.shadowRoot) {\n this.updatePalette();\n }\n }\n\n public get columnCount(): number {\n return Number(this.getAttribute(\"columncount\")) || 12;\n }\n\n public set columnCount(columnCount: number) {\n if (columnCount) {\n this.setAttribute(\"columncount\", `${columnCount}`);\n } else {\n this.removeAttribute(\"columncount\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n public get colorSize(): number {\n return Number(this.getAttribute(\"colorsize\")) || 20;\n }\n\n public set colorSize(colorSize: number) {\n if (colorSize) {\n this.setAttribute(\"colorsize\", `${colorSize}`);\n } else {\n this.removeAttribute(\"colorsize\");\n }\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n static get observedAttributes(): string[] {\n return [\"colorsize\", \"columncount\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.colorPalette) {\n this.colorPalette = this.shadowRoot.querySelector(\".color-palette\");\n this.picker = this.shadowRoot.querySelector(\".picker\");\n this.ripple = this.shadowRoot.querySelector(\".ripple\");\n this.iconIndicator = this.shadowRoot.querySelector(\".color-indicator\");\n\n if (this.color) {\n this.iconIndicator.style.fill = this.color;\n }\n\n this.picker.addEventListener(\"pointerdown\", (event) => {\n event.stopPropagation();\n if (this.colorPalette.classList.contains(\"opened\")) {\n this.close();\n } else {\n this.updatePalettePosition();\n this.open();\n }\n });\n\n this.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n this.open();\n event.preventDefault();\n }\n });\n\n this.updatePalette();\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n }\n\n public attributeChangedCallback(): void {\n if (this.colorPalette) {\n this.updatePalette();\n }\n }\n\n private updatePalette(): void {\n while (this.colorPalette.firstChild) {\n this.colorPalette.removeChild(this.colorPalette.firstChild);\n }\n this.colorNumberInColumn = Math.ceil(this.colorList.length / this.columnCount);\n this.colorPalette.style.height = `${this.colorNumberInColumn * this.colorSize}px`;\n this.colorPalette.style.width = `${this.colorSize * this.columnCount}px`;\n\n this.colorPalette.appendChild(this.createColorPaletteFragment());\n }\n\n private createColorPaletteFragment(): DocumentFragment {\n const fragment: DocumentFragment = document.createDocumentFragment();\n const predefinedColor = this.color;\n for (const colorValue of this.colorList) {\n const colorElement = document.createElement(\"div\");\n colorElement.classList.add(\"color\");\n colorElement.style.backgroundColor = colorValue;\n colorElement.style.width = `${this.colorSize}px`;\n colorElement.style.height = `${this.colorSize}px`;\n colorElement.addEventListener(\"pointerdown\", () => {\n this.color = colorValue;\n this.close();\n this.dispatchValueChange();\n });\n if (predefinedColor === colorValue) {\n this.selectedColorElement = colorElement;\n this.selectedColorElement.classList.add(\"active-color\");\n }\n fragment.appendChild(colorElement);\n }\n return fragment;\n }\n\n private get selectedColorElement(): HTMLDivElement {\n return this._selectedColorElement;\n }\n\n private set selectedColorElement(selectedColorElement: HTMLDivElement) {\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.remove(\"active-color\");\n }\n this._selectedColorElement = selectedColorElement;\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.add(\"active-color\");\n }\n }\n\n private open() {\n if (this.disabled) {\n return;\n }\n this.colorPalette.classList.add(\"opened\");\n this.ripple.classList.add(\"active\");\n this.colorWhenOpen = this.color;\n\n this.saveScrollPosition();\n\n window.addEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.addEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.addEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private close() {\n this.colorPalette.classList.remove(\"opened\");\n this.ripple.classList.remove(\"active\");\n\n window.removeEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.removeEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.removeEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private keyDownListener = (event) => {\n if (event.defaultPrevented) {\n return;\n }\n let shouldPrevent = true;\n const currentIndex = this.colorList.indexOf(this.color);\n switch (event.key) {\n case \"Esc\":\n case \"Escape\":\n if (this.colorWhenOpen) {\n this.color = this.colorWhenOpen;\n }\n this.close();\n break;\n case \"Up\":\n case \"ArrowUp\":\n if (currentIndex > 0) {\n this.color = this.colorList[currentIndex - 1];\n } else {\n this.color = this.colorList[this.colorList.length - 1];\n }\n break;\n case \"Down\":\n case \"ArrowDown\":\n if (currentIndex < this.colorList.length - 1) {\n this.color = this.colorList[currentIndex + 1];\n } else {\n this.color = this.colorList[0];\n }\n break;\n case \"Left\":\n case \"ArrowLeft\": {\n let indexAfterLeftNavigation;\n if (currentIndex === 0) {\n indexAfterLeftNavigation = this.colorList.length - 1;\n } else {\n indexAfterLeftNavigation = currentIndex - this.colorNumberInColumn;\n if (indexAfterLeftNavigation < 0) {\n indexAfterLeftNavigation = this.colorList.length + indexAfterLeftNavigation;\n if (indexAfterLeftNavigation % this.colorNumberInColumn > 0) {\n indexAfterLeftNavigation--;\n }\n }\n }\n this.color = this.colorList[indexAfterLeftNavigation];\n break;\n }\n case \"Right\":\n case \"ArrowRight\": {\n let indexAfterRightNavigation;\n if (currentIndex === this.colorList.length - 1) {\n indexAfterRightNavigation = 0;\n } else {\n indexAfterRightNavigation = currentIndex + this.colorNumberInColumn;\n if (indexAfterRightNavigation >= this.colorList.length) {\n indexAfterRightNavigation = indexAfterRightNavigation - this.colorList.length;\n if (indexAfterRightNavigation < this.colorNumberInColumn) {\n indexAfterRightNavigation++;\n }\n }\n }\n this.color = this.colorList[indexAfterRightNavigation];\n break;\n }\n case \"Enter\":\n this.close();\n this.dispatchValueChange();\n break;\n default:\n shouldPrevent = false;\n return;\n }\n if (shouldPrevent) {\n event.preventDefault();\n }\n };\n\n private modalityListener = (event) => {\n if (!this.contains(event.target)) {\n this.close();\n }\n };\n\n private scrollListener = () => {\n this.restoreScrollPosition();\n };\n\n // This \"lock\" mechanism is based on Polymer's iron-overlay-behavior.\n private saveScrollPosition(): void {\n if (document.scrollingElement) {\n this._scrollTop = document.scrollingElement.scrollTop;\n this._scrollLeft = document.scrollingElement.scrollLeft;\n } else {\n // Since we don't know if is the body or html, get max.\n this._scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);\n this._scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);\n }\n }\n\n private restoreScrollPosition(): void {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = this._scrollTop;\n document.scrollingElement.scrollLeft = this._scrollLeft;\n } else {\n // Since we don't know if is the body or html, set both.\n document.documentElement.scrollTop = document.body.scrollTop = this._scrollTop;\n document.documentElement.scrollLeft = document.body.scrollLeft = this._scrollLeft;\n }\n }\n\n private updatePalettePosition(): void {\n const rect = this.getBoundingClientRect();\n if (rect.left + this.colorPalette.offsetWidth > this.scrollingElementClientWidth) {\n this.colorPalette.style.left = `${this.scrollingElementClientWidth - this.colorPalette.offsetWidth}px`;\n } else {\n this.colorPalette.style.left = `${rect.left}px`;\n }\n if (rect.top + this.colorPalette.offsetHeight > this.scrollingElementClientHeight) {\n this.colorPalette.style.top = `${this.scrollingElementClientHeight - this.colorPalette.offsetHeight}px`;\n } else {\n this.colorPalette.style.top = `${rect.top}px`;\n }\n }\n\n private get scrollingElementClientHeight(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientHeight;\n } else {\n return Math.max(document.documentElement.clientHeight, document.body.clientHeight);\n }\n }\n\n private get scrollingElementClientWidth(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientWidth;\n } else {\n return Math.max(document.documentElement.clientWidth, document.body.clientWidth);\n }\n }\n\n private dispatchValueChange(): void {\n this.dispatchEvent(new CustomEvent<IValueChangeEventDetail>(\"value-change\", { detail: this.color }));\n }\n}\n\ncustomElements.define(SwatchPicker.ID, SwatchPicker);\n"],
5
+ "mappings": "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",
6
6
  "names": ["_ElementBase", "is", "template", "actor", "ElementBase", "tokens_esm_default", "htmlTemplate", "defaultColors", "tokens", "_SwatchPicker", "ElementBase", "event", "shouldPrevent", "currentIndex", "indexAfterLeftNavigation", "indexAfterRightNavigation", "color", "colors", "columnCount", "disabled", "colorSize", "template", "fragment", "predefinedColor", "colorValue", "colorElement", "selectedColorElement", "rect", "SwatchPicker"]
7
7
  }
package/dist/swatch-picker.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"swatch-picker.mjs","sources":["../swatch-picker.html?raw","../default-colors.ts","../swatch-picker.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\toutline: none;\\n\\t\\tcontain: style;\\n\\t}\\n\\n\\t.picker {\\n\\t\\tposition: relative;\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.ripple {\\n\\t\\twidth: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\theight: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\tborder-radius: calc(var(--sd-swatch-picker-icon-size, 24px) * 1.5);\\n\\t\\tposition: absolute;\\n\\t\\tleft: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\ttop: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\topacity: 0;\\n\\t\\tbackground: grey;\\n\\t}\\n\\n\\t:host(:focus) .ripple,\\n\\t.ripple.active {\\n\\t\\topacity: 0.2;\\n\\t}\\n\\n\\t.color-palette {\\n\\t\\tposition: fixed;\\n\\t\\toverflow: hidden;\\n\\t\\tdisplay: flex;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tflex-direction: column;\\n\\t\\talign-content: baseline;\\n\\t\\ttransition:\\n\\t\\t\\ttransform 0.3s ease-out,\\n\\t\\t\\topacity 0.3s ease-out;\\n\\t\\ttransform-origin: top left;\\n\\t\\ttransform: scale(0.25, 0.14);\\n\\t\\topacity: 0;\\n\\t\\tz-index: 1;\\n\\t}\\n\\n\\t.color-palette:not(.opened) {\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.color-palette .col {\\n\\t\\tflex: 1;\\n\\t}\\n\\n\\t.color:not(.active-color):hover {\\n\\t\\ttransform: scale(1.3);\\n\\t\\ttransition-duration: 200ms;\\n\\t}\\n\\n\\t.active-color {\\n\\t\\ttransform: scale(1.3);\\n\\t\\tbox-shadow:\\n\\t\\t\\t0 2px 2px 0 rgba(0, 0, 0, 0.14),\\n\\t\\t\\t0 1px 5px 0 rgba(0, 0, 0, 0.12),\\n\\t\\t\\t0 3px 1px -2px rgba(0, 0, 0, 0.2);\\n\\t}\\n\\n\\t.opened {\\n\\t\\ttransform: scale(1, 1);\\n\\t\\topacity: 1;\\n\\t}\\n\\n\\t.icon {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t.icon-container {\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-icon-color, #1467ba);\\n\\t}\\n\\n\\t:host([aria-disabled=\\\"true\\\"]) .icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-inactive-icon-color, #767676);\\n\\t}\\n</style>\\n<div class=\\\"picker\\\">\\n\\t<div class=\\\"ripple\\\"></div>\\n\\t<div class=\\\"icon-container\\\">\\n\\t\\t<svg\\n\\t\\t\\tclass=\\\"icon\\\"\\n\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\tversion=\\\"1.1\\\"\\n\\t\\t\\txmlns=\\\"http://www.w3.org/2000/svg\\\"\\n\\t\\t\\txmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\">\\n\\t\\t\\t<g>\\n\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\tclass=\\\"icon-path\\\"\\n\\t\\t\\t\\t\\td=\\\"M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z\\\"></path>\\n\\t\\t\\t\\t<path d=\\\"M0 20h24v4H0z\\\" class=\\\"color-indicator\\\" style=\\\"fill: none\\\"></path>\\n\\t\\t\\t</g>\\n\\t\\t</svg>\\n\\t</div>\\n</div>\\n<div class=\\\"color-palette\\\"></div>\\n\"","import { default as tokens } from \"@cas-smartdesign/design-tokens\";\n\nexport const defaultColors: string[] = [\n tokens[\"color-base-red-50\"],\n tokens[\"color-base-red-100\"],\n tokens[\"color-base-red-150\"],\n tokens[\"color-base-red-200\"],\n tokens[\"color-base-red-300\"],\n tokens[\"color-base-red-400\"],\n tokens[\"color-base-red-500\"],\n tokens[\"color-base-red-600\"],\n tokens[\"color-base-red-700\"],\n tokens[\"color-base-red-800\"],\n tokens[\"color-base-red-900\"],\n tokens[\"color-base-orange-50\"],\n tokens[\"color-base-orange-100\"],\n tokens[\"color-base-orange-150\"],\n tokens[\"color-base-orange-200\"],\n tokens[\"color-base-orange-300\"],\n tokens[\"color-base-orange-400\"],\n tokens[\"color-base-orange-500\"],\n tokens[\"color-base-orange-600\"],\n tokens[\"color-base-orange-700\"],\n tokens[\"color-base-orange-800\"],\n tokens[\"color-base-orange-900\"],\n tokens[\"color-base-yellow-50\"],\n tokens[\"color-base-yellow-100\"],\n tokens[\"color-base-yellow-150\"],\n tokens[\"color-base-yellow-200\"],\n tokens[\"color-base-yellow-300\"],\n tokens[\"color-base-yellow-400\"],\n tokens[\"color-base-yellow-500\"],\n tokens[\"color-base-yellow-600\"],\n tokens[\"color-base-yellow-700\"],\n tokens[\"color-base-yellow-800\"],\n tokens[\"color-base-yellow-900\"],\n tokens[\"color-base-green-50\"],\n tokens[\"color-base-green-100\"],\n tokens[\"color-base-green-150\"],\n tokens[\"color-base-green-200\"],\n tokens[\"color-base-green-300\"],\n tokens[\"color-base-green-400\"],\n tokens[\"color-base-green-500\"],\n tokens[\"color-base-green-600\"],\n tokens[\"color-base-green-700\"],\n tokens[\"color-base-green-800\"],\n tokens[\"color-base-green-900\"],\n tokens[\"color-base-dark-green-50\"],\n tokens[\"color-base-dark-green-100\"],\n tokens[\"color-base-dark-green-150\"],\n tokens[\"color-base-dark-green-200\"],\n tokens[\"color-base-dark-green-300\"],\n tokens[\"color-base-dark-green-400\"],\n tokens[\"color-base-dark-green-500\"],\n tokens[\"color-base-dark-green-600\"],\n tokens[\"color-base-dark-green-700\"],\n tokens[\"color-base-dark-green-800\"],\n tokens[\"color-base-dark-green-900\"],\n tokens[\"color-base-cyan-50\"],\n tokens[\"color-base-cyan-100\"],\n tokens[\"color-base-cyan-150\"],\n tokens[\"color-base-cyan-200\"],\n tokens[\"color-base-cyan-300\"],\n tokens[\"color-base-cyan-400\"],\n tokens[\"color-base-cyan-500\"],\n tokens[\"color-base-cyan-600\"],\n tokens[\"color-base-cyan-700\"],\n tokens[\"color-base-cyan-800\"],\n tokens[\"color-base-cyan-900\"],\n tokens[\"color-base-blue-50\"],\n tokens[\"color-base-blue-100\"],\n tokens[\"color-base-blue-150\"],\n tokens[\"color-base-blue-200\"],\n tokens[\"color-base-blue-300\"],\n tokens[\"color-base-blue-400\"],\n tokens[\"color-base-blue-500\"],\n tokens[\"color-base-blue-600\"],\n tokens[\"color-base-blue-700\"],\n tokens[\"color-base-blue-800\"],\n tokens[\"color-base-blue-900\"],\n tokens[\"color-base-dark-blue-50\"],\n tokens[\"color-base-dark-blue-100\"],\n tokens[\"color-base-dark-blue-150\"],\n tokens[\"color-base-dark-blue-200\"],\n tokens[\"color-base-dark-blue-300\"],\n tokens[\"color-base-dark-blue-400\"],\n tokens[\"color-base-dark-blue-500\"],\n tokens[\"color-base-dark-blue-600\"],\n tokens[\"color-base-dark-blue-700\"],\n tokens[\"color-base-dark-blue-800\"],\n tokens[\"color-base-dark-blue-900\"],\n tokens[\"color-base-pink-50\"],\n tokens[\"color-base-pink-100\"],\n tokens[\"color-base-pink-150\"],\n tokens[\"color-base-pink-200\"],\n tokens[\"color-base-pink-300\"],\n tokens[\"color-base-pink-400\"],\n tokens[\"color-base-pink-500\"],\n tokens[\"color-base-pink-600\"],\n tokens[\"color-base-pink-700\"],\n tokens[\"color-base-pink-800\"],\n tokens[\"color-base-pink-900\"],\n tokens[\"color-base-purple-50\"],\n tokens[\"color-base-purple-100\"],\n tokens[\"color-base-purple-150\"],\n tokens[\"color-base-purple-200\"],\n tokens[\"color-base-purple-300\"],\n tokens[\"color-base-purple-400\"],\n tokens[\"color-base-purple-500\"],\n tokens[\"color-base-purple-600\"],\n tokens[\"color-base-purple-700\"],\n tokens[\"color-base-purple-800\"],\n tokens[\"color-base-purple-900\"],\n tokens[\"color-base-brown-50\"],\n tokens[\"color-base-brown-100\"],\n tokens[\"color-base-brown-150\"],\n tokens[\"color-base-brown-200\"],\n tokens[\"color-base-brown-300\"],\n tokens[\"color-base-brown-400\"],\n tokens[\"color-base-brown-500\"],\n tokens[\"color-base-brown-600\"],\n tokens[\"color-base-brown-700\"],\n tokens[\"color-base-brown-800\"],\n tokens[\"color-base-brown-900\"],\n tokens[\"color-base-grey-50\"],\n tokens[\"color-base-grey-100\"],\n tokens[\"color-base-grey-150\"],\n tokens[\"color-base-grey-200\"],\n tokens[\"color-base-grey-300\"],\n tokens[\"color-base-grey-400\"],\n tokens[\"color-base-grey-500\"],\n tokens[\"color-base-grey-600\"],\n tokens[\"color-base-grey-700\"],\n tokens[\"color-base-grey-800\"],\n tokens[\"color-base-grey-900\"],\n];\n","import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./swatch-picker.html?raw\";\nimport { defaultColors } from \"./default-colors\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [SwatchPicker.ID]: SwatchPicker;\n }\n}\n\nexport type IValueChangeEventDetail = string;\n\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"value-change\": CustomEvent<IValueChangeEventDetail>;\n}\n\nexport interface Stage {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class SwatchPicker extends ElementBase {\n public static readonly ID = \"sd-swatch-picker\";\n\n private picker: HTMLDivElement;\n private ripple: HTMLDivElement;\n private colorPalette: HTMLDivElement;\n private iconIndicator: HTMLElement;\n\n private colorWhenOpen: string;\n private colorNumberInColumn: number;\n private _selectedColorElement: HTMLDivElement;\n private _colorList: string[];\n private _scrollTop: number;\n private _scrollLeft: number;\n\n public is(): string {\n return SwatchPicker.ID;\n }\n\n public get color(): string {\n return this.getAttribute(\"color\");\n }\n\n public set color(color: string) {\n if (color) {\n this.setAttribute(\"color\", color);\n if (this.shadowRoot) {\n this.iconIndicator.style.fill = color;\n const currentIndex = this.colorList.indexOf(color);\n if (currentIndex >= 0) {\n this.selectedColorElement = this.colorPalette.children[currentIndex] as HTMLDivElement;\n } else {\n this.selectedColorElement = null;\n }\n }\n } else {\n this.removeAttribute(\"color\");\n this.iconIndicator.style.fill = \"none\";\n this.selectedColorElement = null;\n }\n }\n\n public get colorList(): string[] {\n return this._colorList || defaultColors;\n }\n\n public set colorList(colors: string[]) {\n this._colorList = colors;\n if (this.shadowRoot) {\n this.updatePalette();\n }\n }\n\n public get columnCount(): number {\n return Number(this.getAttribute(\"columncount\")) || 12;\n }\n\n public set columnCount(columnCount: number) {\n if (columnCount) {\n this.setAttribute(\"columncount\", `${columnCount}`);\n } else {\n this.removeAttribute(\"columncount\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n public get colorSize(): number {\n return Number(this.getAttribute(\"colorsize\")) || 20;\n }\n\n public set colorSize(colorSize: number) {\n if (colorSize) {\n this.setAttribute(\"colorsize\", `${colorSize}`);\n } else {\n this.removeAttribute(\"colorsize\");\n }\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n static get observedAttributes(): string[] {\n return [\"colorsize\", \"columncount\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.colorPalette) {\n this.colorPalette = this.shadowRoot.querySelector(\".color-palette\");\n this.picker = this.shadowRoot.querySelector(\".picker\");\n this.ripple = this.shadowRoot.querySelector(\".ripple\");\n this.iconIndicator = this.shadowRoot.querySelector(\".color-indicator\");\n\n if (this.color) {\n this.iconIndicator.style.fill = this.color;\n }\n\n this.picker.addEventListener(\"pointerdown\", (event) => {\n event.stopPropagation();\n if (this.colorPalette.classList.contains(\"opened\")) {\n this.close();\n } else {\n this.updatePalettePosition();\n this.open();\n }\n });\n\n this.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n this.open();\n event.preventDefault();\n }\n });\n\n this.updatePalette();\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n }\n\n public attributeChangedCallback(): void {\n if (this.colorPalette) {\n this.updatePalette();\n }\n }\n\n private updatePalette(): void {\n while (this.colorPalette.firstChild) {\n this.colorPalette.removeChild(this.colorPalette.firstChild);\n }\n this.colorNumberInColumn = Math.ceil(this.colorList.length / this.columnCount);\n this.colorPalette.style.height = `${this.colorNumberInColumn * this.colorSize}px`;\n this.colorPalette.style.width = `${this.colorSize * this.columnCount}px`;\n\n this.colorPalette.appendChild(this.createColorPaletteFragment());\n }\n\n private createColorPaletteFragment(): DocumentFragment {\n const fragment: DocumentFragment = document.createDocumentFragment();\n const predefinedColor = this.color;\n for (const colorValue of this.colorList) {\n const colorElement = document.createElement(\"div\");\n colorElement.classList.add(\"color\");\n colorElement.style.backgroundColor = colorValue;\n colorElement.style.width = `${this.colorSize}px`;\n colorElement.style.height = `${this.colorSize}px`;\n colorElement.addEventListener(\"pointerdown\", () => {\n this.color = colorValue;\n this.close();\n this.dispatchValueChange();\n });\n if (predefinedColor === colorValue) {\n this.selectedColorElement = colorElement;\n this.selectedColorElement.classList.add(\"active-color\");\n }\n fragment.appendChild(colorElement);\n }\n return fragment;\n }\n\n private get selectedColorElement(): HTMLDivElement {\n return this._selectedColorElement;\n }\n\n private set selectedColorElement(selectedColorElement: HTMLDivElement) {\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.remove(\"active-color\");\n }\n this._selectedColorElement = selectedColorElement;\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.add(\"active-color\");\n }\n }\n\n private open() {\n if (this.disabled) {\n return;\n }\n this.colorPalette.classList.add(\"opened\");\n this.ripple.classList.add(\"active\");\n this.colorWhenOpen = this.color;\n\n this.saveScrollPosition();\n\n window.addEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.addEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.addEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private close() {\n this.colorPalette.classList.remove(\"opened\");\n this.ripple.classList.remove(\"active\");\n\n window.removeEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.removeEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.removeEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private keyDownListener = (event) => {\n if (event.defaultPrevented) {\n return;\n }\n let shouldPrevent = true;\n const currentIndex = this.colorList.indexOf(this.color);\n switch (event.key) {\n case \"Esc\":\n case \"Escape\":\n if (this.colorWhenOpen) {\n this.color = this.colorWhenOpen;\n }\n this.close();\n break;\n case \"Up\":\n case \"ArrowUp\":\n if (currentIndex > 0) {\n this.color = this.colorList[currentIndex - 1];\n } else {\n this.color = this.colorList[this.colorList.length - 1];\n }\n break;\n case \"Down\":\n case \"ArrowDown\":\n if (currentIndex < this.colorList.length - 1) {\n this.color = this.colorList[currentIndex + 1];\n } else {\n this.color = this.colorList[0];\n }\n break;\n case \"Left\":\n case \"ArrowLeft\": {\n let indexAfterLeftNavigation;\n if (currentIndex === 0) {\n indexAfterLeftNavigation = this.colorList.length - 1;\n } else {\n indexAfterLeftNavigation = currentIndex - this.colorNumberInColumn;\n if (indexAfterLeftNavigation < 0) {\n indexAfterLeftNavigation = this.colorList.length + indexAfterLeftNavigation;\n if (indexAfterLeftNavigation % this.colorNumberInColumn > 0) {\n indexAfterLeftNavigation--;\n }\n }\n }\n this.color = this.colorList[indexAfterLeftNavigation];\n break;\n }\n case \"Right\":\n case \"ArrowRight\": {\n let indexAfterRightNavigation;\n if (currentIndex === this.colorList.length - 1) {\n indexAfterRightNavigation = 0;\n } else {\n indexAfterRightNavigation = currentIndex + this.colorNumberInColumn;\n if (indexAfterRightNavigation >= this.colorList.length) {\n indexAfterRightNavigation = indexAfterRightNavigation - this.colorList.length;\n if (indexAfterRightNavigation < this.colorNumberInColumn) {\n indexAfterRightNavigation++;\n }\n }\n }\n this.color = this.colorList[indexAfterRightNavigation];\n break;\n }\n case \"Enter\":\n this.close();\n this.dispatchValueChange();\n break;\n default:\n shouldPrevent = false;\n return;\n }\n if (shouldPrevent) {\n event.preventDefault();\n }\n };\n\n private modalityListener = (event) => {\n if (!this.contains(event.target)) {\n this.close();\n }\n };\n\n private scrollListener = () => {\n this.restoreScrollPosition();\n };\n\n // This \"lock\" mechanism is based on Polymer's iron-overlay-behavior.\n private saveScrollPosition(): void {\n if (document.scrollingElement) {\n this._scrollTop = document.scrollingElement.scrollTop;\n this._scrollLeft = document.scrollingElement.scrollLeft;\n } else {\n // Since we don't know if is the body or html, get max.\n this._scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);\n this._scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);\n }\n }\n\n private restoreScrollPosition(): void {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = this._scrollTop;\n document.scrollingElement.scrollLeft = this._scrollLeft;\n } else {\n // Since we don't know if is the body or html, set both.\n document.documentElement.scrollTop = document.body.scrollTop = this._scrollTop;\n document.documentElement.scrollLeft = document.body.scrollLeft = this._scrollLeft;\n }\n }\n\n private updatePalettePosition(): void {\n const rect = this.getBoundingClientRect();\n if (rect.left + this.colorPalette.offsetWidth > this.scrollingElementClientWidth) {\n this.colorPalette.style.left = `${this.scrollingElementClientWidth - this.colorPalette.offsetWidth}px`;\n } else {\n this.colorPalette.style.left = `${rect.left}px`;\n }\n if (rect.top + this.colorPalette.offsetHeight > this.scrollingElementClientHeight) {\n this.colorPalette.style.top = `${this.scrollingElementClientHeight - this.colorPalette.offsetHeight}px`;\n } else {\n this.colorPalette.style.top = `${rect.top}px`;\n }\n }\n\n private get scrollingElementClientHeight(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientHeight;\n } else {\n return Math.max(document.documentElement.clientHeight, document.body.clientHeight);\n }\n }\n\n private get scrollingElementClientWidth(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientWidth;\n } else {\n return Math.max(document.documentElement.clientWidth, document.body.clientWidth);\n }\n }\n\n private dispatchValueChange(): void {\n this.dispatchEvent(new CustomEvent<IValueChangeEventDetail>(\"value-change\", { detail: this.color }));\n }\n}\n\ncustomElements.define(SwatchPicker.ID, SwatchPicker);\n"],"names":["htmlTemplate","defaultColors","tokens","_SwatchPicker","ElementBase","event","shouldPrevent","currentIndex","indexAfterLeftNavigation","indexAfterRightNavigation","color","colors","columnCount","disabled","colorSize","template","fragment","predefinedColor","colorValue","colorElement","selectedColorElement","rect","SwatchPicker"],"mappings":"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"}
1
+ {"version":3,"file":"swatch-picker.mjs","sources":["../swatch-picker.html?raw","../default-colors.ts","../swatch-picker.ts"],"sourcesContent":["export default \"<style>\\n\\t:host {\\n\\t\\tdisplay: block;\\n\\t\\toutline: none;\\n\\t\\tcontain: style;\\n\\t}\\n\\n\\t.picker {\\n\\t\\tposition: relative;\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.ripple {\\n\\t\\twidth: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\theight: calc(var(--sd-swatch-picker-icon-size, 24px) * 2);\\n\\t\\tborder-radius: calc(var(--sd-swatch-picker-icon-size, 24px) * 1.5);\\n\\t\\tposition: absolute;\\n\\t\\tleft: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\ttop: calc(var(--sd-swatch-picker-icon-size, 24px) * -0.5);\\n\\t\\topacity: 0;\\n\\t\\tbackground: grey;\\n\\t}\\n\\n\\t:host(:focus) .ripple,\\n\\t.ripple.active {\\n\\t\\topacity: 0.2;\\n\\t}\\n\\n\\t.color-palette {\\n\\t\\tposition: fixed;\\n\\t\\toverflow: hidden;\\n\\t\\tdisplay: flex;\\n\\t\\tflex-wrap: wrap;\\n\\t\\tflex-direction: column;\\n\\t\\talign-content: baseline;\\n\\t\\ttransition:\\n\\t\\t\\ttransform 0.3s ease-out,\\n\\t\\t\\topacity 0.3s ease-out;\\n\\t\\ttransform-origin: top left;\\n\\t\\ttransform: scale(0.25, 0.14);\\n\\t\\topacity: 0;\\n\\t\\tz-index: 1;\\n\\t}\\n\\n\\t.color-palette:not(.opened) {\\n\\t\\tpointer-events: none;\\n\\t}\\n\\n\\t.color-palette .col {\\n\\t\\tflex: 1;\\n\\t}\\n\\n\\t.color:not(.active-color):hover {\\n\\t\\ttransform: scale(1.3);\\n\\t\\ttransition-duration: 200ms;\\n\\t}\\n\\n\\t.active-color {\\n\\t\\ttransform: scale(1.3);\\n\\t\\tbox-shadow:\\n\\t\\t\\t0 2px 2px 0 rgba(0, 0, 0, 0.14),\\n\\t\\t\\t0 1px 5px 0 rgba(0, 0, 0, 0.12),\\n\\t\\t\\t0 3px 1px -2px rgba(0, 0, 0, 0.2);\\n\\t}\\n\\n\\t.opened {\\n\\t\\ttransform: scale(1, 1);\\n\\t\\topacity: 1;\\n\\t}\\n\\n\\t.icon {\\n\\t\\twidth: 100%;\\n\\t\\theight: 100%;\\n\\t}\\n\\n\\t.icon-container {\\n\\t\\twidth: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\theight: var(--sd-swatch-picker-icon-size, 24px);\\n\\t\\tcursor: pointer;\\n\\t}\\n\\n\\t.icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-icon-color, #1467ba);\\n\\t}\\n\\n\\t:host([aria-disabled=\\\"true\\\"]) .icon-path {\\n\\t\\tfill: var(--sd-swatch-picker-inactive-icon-color, #767676);\\n\\t}\\n</style>\\n<div class=\\\"picker\\\">\\n\\t<div class=\\\"ripple\\\"></div>\\n\\t<div class=\\\"icon-container\\\">\\n\\t\\t<svg\\n\\t\\t\\tclass=\\\"icon\\\"\\n\\t\\t\\tviewBox=\\\"0 0 24 24\\\"\\n\\t\\t\\tversion=\\\"1.1\\\"\\n\\t\\t\\txmlns=\\\"http://www.w3.org/2000/svg\\\"\\n\\t\\t\\txmlns:xlink=\\\"http://www.w3.org/1999/xlink\\\">\\n\\t\\t\\t<g>\\n\\t\\t\\t\\t<path\\n\\t\\t\\t\\t\\tclass=\\\"icon-path\\\"\\n\\t\\t\\t\\t\\td=\\\"M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z\\\"></path>\\n\\t\\t\\t\\t<path d=\\\"M0 20h24v4H0z\\\" class=\\\"color-indicator\\\" style=\\\"fill: none\\\"></path>\\n\\t\\t\\t</g>\\n\\t\\t</svg>\\n\\t</div>\\n</div>\\n<div class=\\\"color-palette\\\"></div>\\n\"","import { default as tokens } from \"@cas-smartdesign/design-tokens\";\n\nexport const defaultColors: string[] = [\n tokens[\"color-base-red-50\"],\n tokens[\"color-base-red-100\"],\n tokens[\"color-base-red-150\"],\n tokens[\"color-base-red-200\"],\n tokens[\"color-base-red-300\"],\n tokens[\"color-base-red-400\"],\n tokens[\"color-base-red-500\"],\n tokens[\"color-base-red-600\"],\n tokens[\"color-base-red-700\"],\n tokens[\"color-base-red-800\"],\n tokens[\"color-base-red-900\"],\n tokens[\"color-base-orange-50\"],\n tokens[\"color-base-orange-100\"],\n tokens[\"color-base-orange-150\"],\n tokens[\"color-base-orange-200\"],\n tokens[\"color-base-orange-300\"],\n tokens[\"color-base-orange-400\"],\n tokens[\"color-base-orange-500\"],\n tokens[\"color-base-orange-600\"],\n tokens[\"color-base-orange-700\"],\n tokens[\"color-base-orange-800\"],\n tokens[\"color-base-orange-900\"],\n tokens[\"color-base-yellow-50\"],\n tokens[\"color-base-yellow-100\"],\n tokens[\"color-base-yellow-150\"],\n tokens[\"color-base-yellow-200\"],\n tokens[\"color-base-yellow-300\"],\n tokens[\"color-base-yellow-400\"],\n tokens[\"color-base-yellow-500\"],\n tokens[\"color-base-yellow-600\"],\n tokens[\"color-base-yellow-700\"],\n tokens[\"color-base-yellow-800\"],\n tokens[\"color-base-yellow-900\"],\n tokens[\"color-base-green-50\"],\n tokens[\"color-base-green-100\"],\n tokens[\"color-base-green-150\"],\n tokens[\"color-base-green-200\"],\n tokens[\"color-base-green-300\"],\n tokens[\"color-base-green-400\"],\n tokens[\"color-base-green-500\"],\n tokens[\"color-base-green-600\"],\n tokens[\"color-base-green-700\"],\n tokens[\"color-base-green-800\"],\n tokens[\"color-base-green-900\"],\n tokens[\"color-base-dark-green-50\"],\n tokens[\"color-base-dark-green-100\"],\n tokens[\"color-base-dark-green-150\"],\n tokens[\"color-base-dark-green-200\"],\n tokens[\"color-base-dark-green-300\"],\n tokens[\"color-base-dark-green-400\"],\n tokens[\"color-base-dark-green-500\"],\n tokens[\"color-base-dark-green-600\"],\n tokens[\"color-base-dark-green-700\"],\n tokens[\"color-base-dark-green-800\"],\n tokens[\"color-base-dark-green-900\"],\n tokens[\"color-base-cyan-50\"],\n tokens[\"color-base-cyan-100\"],\n tokens[\"color-base-cyan-150\"],\n tokens[\"color-base-cyan-200\"],\n tokens[\"color-base-cyan-300\"],\n tokens[\"color-base-cyan-400\"],\n tokens[\"color-base-cyan-500\"],\n tokens[\"color-base-cyan-600\"],\n tokens[\"color-base-cyan-700\"],\n tokens[\"color-base-cyan-800\"],\n tokens[\"color-base-cyan-900\"],\n tokens[\"color-base-blue-50\"],\n tokens[\"color-base-blue-100\"],\n tokens[\"color-base-blue-150\"],\n tokens[\"color-base-blue-200\"],\n tokens[\"color-base-blue-300\"],\n tokens[\"color-base-blue-400\"],\n tokens[\"color-base-blue-500\"],\n tokens[\"color-base-blue-600\"],\n tokens[\"color-base-blue-700\"],\n tokens[\"color-base-blue-800\"],\n tokens[\"color-base-blue-900\"],\n tokens[\"color-base-dark-blue-50\"],\n tokens[\"color-base-dark-blue-100\"],\n tokens[\"color-base-dark-blue-150\"],\n tokens[\"color-base-dark-blue-200\"],\n tokens[\"color-base-dark-blue-300\"],\n tokens[\"color-base-dark-blue-400\"],\n tokens[\"color-base-dark-blue-500\"],\n tokens[\"color-base-dark-blue-600\"],\n tokens[\"color-base-dark-blue-700\"],\n tokens[\"color-base-dark-blue-800\"],\n tokens[\"color-base-dark-blue-900\"],\n tokens[\"color-base-pink-50\"],\n tokens[\"color-base-pink-100\"],\n tokens[\"color-base-pink-150\"],\n tokens[\"color-base-pink-200\"],\n tokens[\"color-base-pink-300\"],\n tokens[\"color-base-pink-400\"],\n tokens[\"color-base-pink-500\"],\n tokens[\"color-base-pink-600\"],\n tokens[\"color-base-pink-700\"],\n tokens[\"color-base-pink-800\"],\n tokens[\"color-base-pink-900\"],\n tokens[\"color-base-purple-50\"],\n tokens[\"color-base-purple-100\"],\n tokens[\"color-base-purple-150\"],\n tokens[\"color-base-purple-200\"],\n tokens[\"color-base-purple-300\"],\n tokens[\"color-base-purple-400\"],\n tokens[\"color-base-purple-500\"],\n tokens[\"color-base-purple-600\"],\n tokens[\"color-base-purple-700\"],\n tokens[\"color-base-purple-800\"],\n tokens[\"color-base-purple-900\"],\n tokens[\"color-base-brown-50\"],\n tokens[\"color-base-brown-100\"],\n tokens[\"color-base-brown-150\"],\n tokens[\"color-base-brown-200\"],\n tokens[\"color-base-brown-300\"],\n tokens[\"color-base-brown-400\"],\n tokens[\"color-base-brown-500\"],\n tokens[\"color-base-brown-600\"],\n tokens[\"color-base-brown-700\"],\n tokens[\"color-base-brown-800\"],\n tokens[\"color-base-brown-900\"],\n tokens[\"color-base-grey-50\"],\n tokens[\"color-base-grey-100\"],\n tokens[\"color-base-grey-150\"],\n tokens[\"color-base-grey-200\"],\n tokens[\"color-base-grey-300\"],\n tokens[\"color-base-grey-400\"],\n tokens[\"color-base-grey-500\"],\n tokens[\"color-base-grey-600\"],\n tokens[\"color-base-grey-700\"],\n tokens[\"color-base-grey-800\"],\n tokens[\"color-base-grey-900\"],\n];\n","import { ElementBase, CustomEventMap as ElementBaseEventMap } from \"@cas-smartdesign/element-base\";\n\nimport { default as htmlTemplate } from \"./swatch-picker.html?raw\";\nimport { defaultColors } from \"./default-colors\";\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [SwatchPicker.ID]: SwatchPicker;\n }\n}\n\nexport type IValueChangeEventDetail = string;\n\nexport interface CustomEventMap extends ElementBaseEventMap {\n \"value-change\": CustomEvent<IValueChangeEventDetail>;\n}\n\nexport interface Stage {\n addEventListener<K extends keyof CustomEventMap>(\n event: K,\n listener: ((this: this, ev: CustomEventMap[K]) => unknown) | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n addEventListener(\n type: string,\n callback: EventListenerOrEventListenerObject | null,\n options?: AddEventListenerOptions | boolean,\n ): void;\n removeEventListener<K extends keyof CustomEventMap>(\n type: K,\n listener: (this: this, ev: CustomEventMap[K]) => unknown,\n options?: boolean | EventListenerOptions,\n ): void;\n removeEventListener(\n type: string,\n listener: EventListenerOrEventListenerObject,\n options?: boolean | EventListenerOptions,\n ): void;\n dispatchEvent<EventType extends CustomEventMap[keyof CustomEventMap]>(event: EventType): boolean;\n}\n\nexport class SwatchPicker extends ElementBase {\n public static readonly ID = \"sd-swatch-picker\";\n\n private picker: HTMLDivElement;\n private ripple: HTMLDivElement;\n private colorPalette: HTMLDivElement;\n private iconIndicator: HTMLElement;\n\n private colorWhenOpen: string;\n private colorNumberInColumn: number;\n private _selectedColorElement: HTMLDivElement;\n private _colorList: string[];\n private _scrollTop: number;\n private _scrollLeft: number;\n\n public is(): string {\n return SwatchPicker.ID;\n }\n\n public get color(): string {\n return this.getAttribute(\"color\");\n }\n\n public set color(color: string) {\n if (color) {\n this.setAttribute(\"color\", color);\n if (this.shadowRoot) {\n this.iconIndicator.style.fill = color;\n const currentIndex = this.colorList.indexOf(color);\n if (currentIndex >= 0) {\n this.selectedColorElement = this.colorPalette.children[currentIndex] as HTMLDivElement;\n } else {\n this.selectedColorElement = null;\n }\n }\n } else {\n this.removeAttribute(\"color\");\n this.iconIndicator.style.fill = \"none\";\n this.selectedColorElement = null;\n }\n }\n\n public get colorList(): string[] {\n return this._colorList || defaultColors;\n }\n\n public set colorList(colors: string[]) {\n this._colorList = colors;\n if (this.shadowRoot) {\n this.updatePalette();\n }\n }\n\n public get columnCount(): number {\n return Number(this.getAttribute(\"columncount\")) || 12;\n }\n\n public set columnCount(columnCount: number) {\n if (columnCount) {\n this.setAttribute(\"columncount\", `${columnCount}`);\n } else {\n this.removeAttribute(\"columncount\");\n }\n }\n\n public get disabled(): boolean {\n return this.getAttribute(\"aria-disabled\") == \"true\";\n }\n\n public set disabled(disabled: boolean) {\n this.setAttribute(\"aria-disabled\", disabled.toString());\n }\n\n public get colorSize(): number {\n return Number(this.getAttribute(\"colorsize\")) || 20;\n }\n\n public set colorSize(colorSize: number) {\n if (colorSize) {\n this.setAttribute(\"colorsize\", `${colorSize}`);\n } else {\n this.removeAttribute(\"colorsize\");\n }\n }\n\n protected template(): HTMLTemplateElement {\n const template = document.createElement(\"template\");\n template.innerHTML = htmlTemplate;\n return template;\n }\n\n static get observedAttributes(): string[] {\n return [\"colorsize\", \"columncount\"];\n }\n\n public connectedCallback() {\n super.connectedCallback();\n if (!this.colorPalette) {\n this.colorPalette = this.shadowRoot.querySelector(\".color-palette\");\n this.picker = this.shadowRoot.querySelector(\".picker\");\n this.ripple = this.shadowRoot.querySelector(\".ripple\");\n this.iconIndicator = this.shadowRoot.querySelector(\".color-indicator\");\n\n if (this.color) {\n this.iconIndicator.style.fill = this.color;\n }\n\n this.picker.addEventListener(\"pointerdown\", (event) => {\n event.stopPropagation();\n if (this.colorPalette.classList.contains(\"opened\")) {\n this.close();\n } else {\n this.updatePalettePosition();\n this.open();\n }\n });\n\n this.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n if (event.key === \"Enter\") {\n this.open();\n event.preventDefault();\n }\n });\n\n this.updatePalette();\n }\n\n if (!this.hasAttribute(\"tabIndex\")) {\n this.tabIndex = 0;\n }\n }\n\n public attributeChangedCallback(): void {\n if (this.colorPalette) {\n this.updatePalette();\n }\n }\n\n private updatePalette(): void {\n while (this.colorPalette.firstChild) {\n this.colorPalette.removeChild(this.colorPalette.firstChild);\n }\n this.colorNumberInColumn = Math.ceil(this.colorList.length / this.columnCount);\n this.colorPalette.style.height = `${this.colorNumberInColumn * this.colorSize}px`;\n this.colorPalette.style.width = `${this.colorSize * this.columnCount}px`;\n\n this.colorPalette.appendChild(this.createColorPaletteFragment());\n }\n\n private createColorPaletteFragment(): DocumentFragment {\n const fragment: DocumentFragment = document.createDocumentFragment();\n const predefinedColor = this.color;\n for (const colorValue of this.colorList) {\n const colorElement = document.createElement(\"div\");\n colorElement.classList.add(\"color\");\n colorElement.style.backgroundColor = colorValue;\n colorElement.style.width = `${this.colorSize}px`;\n colorElement.style.height = `${this.colorSize}px`;\n colorElement.addEventListener(\"pointerdown\", () => {\n this.color = colorValue;\n this.close();\n this.dispatchValueChange();\n });\n if (predefinedColor === colorValue) {\n this.selectedColorElement = colorElement;\n this.selectedColorElement.classList.add(\"active-color\");\n }\n fragment.appendChild(colorElement);\n }\n return fragment;\n }\n\n private get selectedColorElement(): HTMLDivElement {\n return this._selectedColorElement;\n }\n\n private set selectedColorElement(selectedColorElement: HTMLDivElement) {\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.remove(\"active-color\");\n }\n this._selectedColorElement = selectedColorElement;\n if (this._selectedColorElement) {\n this._selectedColorElement.classList.add(\"active-color\");\n }\n }\n\n private open() {\n if (this.disabled) {\n return;\n }\n this.colorPalette.classList.add(\"opened\");\n this.ripple.classList.add(\"active\");\n this.colorWhenOpen = this.color;\n\n this.saveScrollPosition();\n\n window.addEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.addEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.addEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private close() {\n this.colorPalette.classList.remove(\"opened\");\n this.ripple.classList.remove(\"active\");\n\n window.removeEventListener(\"keydown\", this.keyDownListener, { capture: true });\n window.removeEventListener(\"pointerdown\", this.modalityListener, { capture: true });\n window.removeEventListener(\"scroll\", this.scrollListener, { capture: true });\n }\n\n private keyDownListener = (event) => {\n if (event.defaultPrevented) {\n return;\n }\n let shouldPrevent = true;\n const currentIndex = this.colorList.indexOf(this.color);\n switch (event.key) {\n case \"Esc\":\n case \"Escape\":\n if (this.colorWhenOpen) {\n this.color = this.colorWhenOpen;\n }\n this.close();\n break;\n case \"Up\":\n case \"ArrowUp\":\n if (currentIndex > 0) {\n this.color = this.colorList[currentIndex - 1];\n } else {\n this.color = this.colorList[this.colorList.length - 1];\n }\n break;\n case \"Down\":\n case \"ArrowDown\":\n if (currentIndex < this.colorList.length - 1) {\n this.color = this.colorList[currentIndex + 1];\n } else {\n this.color = this.colorList[0];\n }\n break;\n case \"Left\":\n case \"ArrowLeft\": {\n let indexAfterLeftNavigation;\n if (currentIndex === 0) {\n indexAfterLeftNavigation = this.colorList.length - 1;\n } else {\n indexAfterLeftNavigation = currentIndex - this.colorNumberInColumn;\n if (indexAfterLeftNavigation < 0) {\n indexAfterLeftNavigation = this.colorList.length + indexAfterLeftNavigation;\n if (indexAfterLeftNavigation % this.colorNumberInColumn > 0) {\n indexAfterLeftNavigation--;\n }\n }\n }\n this.color = this.colorList[indexAfterLeftNavigation];\n break;\n }\n case \"Right\":\n case \"ArrowRight\": {\n let indexAfterRightNavigation;\n if (currentIndex === this.colorList.length - 1) {\n indexAfterRightNavigation = 0;\n } else {\n indexAfterRightNavigation = currentIndex + this.colorNumberInColumn;\n if (indexAfterRightNavigation >= this.colorList.length) {\n indexAfterRightNavigation = indexAfterRightNavigation - this.colorList.length;\n if (indexAfterRightNavigation < this.colorNumberInColumn) {\n indexAfterRightNavigation++;\n }\n }\n }\n this.color = this.colorList[indexAfterRightNavigation];\n break;\n }\n case \"Enter\":\n this.close();\n this.dispatchValueChange();\n break;\n default:\n shouldPrevent = false;\n return;\n }\n if (shouldPrevent) {\n event.preventDefault();\n }\n };\n\n private modalityListener = (event) => {\n if (!this.contains(event.target)) {\n this.close();\n }\n };\n\n private scrollListener = () => {\n this.restoreScrollPosition();\n };\n\n // This \"lock\" mechanism is based on Polymer's iron-overlay-behavior.\n private saveScrollPosition(): void {\n if (document.scrollingElement) {\n this._scrollTop = document.scrollingElement.scrollTop;\n this._scrollLeft = document.scrollingElement.scrollLeft;\n } else {\n // Since we don't know if is the body or html, get max.\n this._scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);\n this._scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);\n }\n }\n\n private restoreScrollPosition(): void {\n if (document.scrollingElement) {\n document.scrollingElement.scrollTop = this._scrollTop;\n document.scrollingElement.scrollLeft = this._scrollLeft;\n } else {\n // Since we don't know if is the body or html, set both.\n document.documentElement.scrollTop = document.body.scrollTop = this._scrollTop;\n document.documentElement.scrollLeft = document.body.scrollLeft = this._scrollLeft;\n }\n }\n\n private updatePalettePosition(): void {\n const rect = this.getBoundingClientRect();\n if (rect.left + this.colorPalette.offsetWidth > this.scrollingElementClientWidth) {\n this.colorPalette.style.left = `${this.scrollingElementClientWidth - this.colorPalette.offsetWidth}px`;\n } else {\n this.colorPalette.style.left = `${rect.left}px`;\n }\n if (rect.top + this.colorPalette.offsetHeight > this.scrollingElementClientHeight) {\n this.colorPalette.style.top = `${this.scrollingElementClientHeight - this.colorPalette.offsetHeight}px`;\n } else {\n this.colorPalette.style.top = `${rect.top}px`;\n }\n }\n\n private get scrollingElementClientHeight(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientHeight;\n } else {\n return Math.max(document.documentElement.clientHeight, document.body.clientHeight);\n }\n }\n\n private get scrollingElementClientWidth(): number {\n if (document.scrollingElement) {\n return document.scrollingElement.clientWidth;\n } else {\n return Math.max(document.documentElement.clientWidth, document.body.clientWidth);\n }\n }\n\n private dispatchValueChange(): void {\n this.dispatchEvent(new CustomEvent<IValueChangeEventDetail>(\"value-change\", { detail: this.color }));\n }\n}\n\ncustomElements.define(SwatchPicker.ID, SwatchPicker);\n"],"names":["htmlTemplate","defaultColors","tokens","_SwatchPicker","ElementBase","event","shouldPrevent","currentIndex","indexAfterLeftNavigation","indexAfterRightNavigation","color","colors","columnCount","disabled","colorSize","template","fragment","predefinedColor","colorValue","colorElement","selectedColorElement","rect","SwatchPicker"],"mappings":"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"}