npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.2 → 37.1.0-next.21 - Mend

@limetech/lime-elements 37.1.0-next.2 → 37.1.0-next.21

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 (231) hide show

package/dist/collection/components/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD~~;;;GAGG~~;AAMH,MAAM,OAAO,QAAQ;;IA4DT,OAAE,GAAW,kBAAkB,EAAE,CAAC;~~IAuDlC~~,eAAU,GAAG,GAAG,EAAE;MACtB,MAAM,OAAO,GACT,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;MACnE,IAAI,CAAC,OAAO,EAAE;QACV,OAAO;OACV;MAED,IAAI,CAAC,SAAS,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,WAAW,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;MAC9D,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;IAC5C,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;MAC3C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IACzB,CAAC,CAAC;~~oBAjIgB~~,KAAK;oBAQL,KAAK;;;mBAkBN,KAAK;yBAMC,KAAK;oBAMD,KAAK;oBAGb,KAAK;;~~EAgBd~~,mBAAmB,CAAC,QAAiB;IAC3C,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,QAAQ,CAAC;EACxC,CAAC;EAGS,yBAAyB,CAAC,QAAiB;IACjD,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IACxC,IAAI,CAAC,WAAW,CAAC,aAAa,GAAG,QAAQ,CAAC;EAC9C,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,EAAE,CAAC;IAC5B,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;IAE1B,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAClD,IAAI,eAAe,EAAE;MACjB,eAAe,CAAC,SAAS,CAAC,MAAM,CAC5B,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,0BAA0B,EACrC,UAAU,CAAC,4BAA4B,EACvC,UAAU,CAAC,sBAAsB,EACjC,UAAU,CAAC,4BAA4B,CAC1C,CAAC;KACL;EACL,CAAC;EAEM,MAAM;IACT,OAAO,CACH,EAAC,gBAAgB,IACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EACxD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,EAAE,GACb,CACL,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBJ","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.required && this.modified && !this.checked}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}
1	+ {"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCCheckbox, cssClasses } from '@material/checkbox';\nimport { MDCFormField } from '@material/form-field';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\n\n/*\n The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n \n ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n \n However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n \n The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n /\n@Component({\n tag: 'limel-checkbox',\n shadow: true,\n styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n /\n Disables the checkbox when `true`. Works exactly the same as `readonly`.\n * If either property is `true`, the checkbox will be disabled.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n * But shows no visual sign indicating that the checkbox is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The checkbox label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the checkbox\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The value of the checkbox. Set to `true` to make the checkbox checked.\n /\n @Prop({ reflect: true })\n public checked = false;\n\n /\n Enables indeterminate state. Set to `true` to signal indeterminate check.\n /\n @Prop({ reflect: true })\n public indeterminate = false;\n\n /\n Set to `true` to indicate that the checkbox must be checked.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n @State()\n private modified = false;\n\n /\n Emitted when the input value is changed.\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private limelCheckbox: HTMLLimelCheckboxElement;\n\n private formField: MDCFormField;\n private mdcCheckbox: MDCCheckbox;\n private id: string = createRandomString();\n private helperTextId: string = createRandomString();\n\n @Watch('checked')\n protected handleCheckedChange(newValue: boolean) {\n this.mdcCheckbox.checked = newValue;\n }\n\n @Watch('indeterminate')\n protected handleIndeterminateChange(newValue: boolean) {\n this.mdcCheckbox.checked = this.checked;\n this.mdcCheckbox.indeterminate = newValue;\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.mdcCheckbox?.destroy();\n this.formField?.destroy();\n\n const checkboxElement = this.getCheckboxElement();\n if (checkboxElement) {\n checkboxElement.classList.remove(\n cssClasses.ANIM_CHECKED_INDETERMINATE,\n cssClasses.ANIM_CHECKED_UNCHECKED,\n cssClasses.ANIM_INDETERMINATE_CHECKED,\n cssClasses.ANIM_INDETERMINATE_UNCHECKED,\n cssClasses.ANIM_UNCHECKED_CHECKED,\n cssClasses.ANIM_UNCHECKED_INDETERMINATE\n );\n }\n }\n\n public render() {\n return (\n <CheckboxTemplate\n disabled={this.disabled \|\| this.readonly}\n label={this.label}\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n checked={this.checked \|\| this.indeterminate}\n indeterminate={this.indeterminate}\n required={this.required}\n readonly={this.readonly}\n invalid={this.required && this.modified && !this.checked}\n onChange={this.onChange}\n id={this.id}\n />\n );\n }\n\n private initialize = () => {\n const element =\n this.limelCheckbox.shadowRoot.querySelector('.mdc-form-field');\n if (!element) {\n return;\n }\n\n this.formField = new MDCFormField(element);\n this.mdcCheckbox = new MDCCheckbox(this.getCheckboxElement());\n this.formField.input = this.mdcCheckbox;\n };\n\n private getCheckboxElement = () => {\n return this.limelCheckbox.shadowRoot.querySelector('.mdc-checkbox');\n };\n\n private onChange = (event: Event) => {\n event.stopPropagation();\n this.change.emit(this.mdcCheckbox.checked);\n this.modified = true;\n };\n}\n"]}

package/dist/collection/components/checkbox/checkbox.template.js CHANGED Viewed

@@ -12,20 +12,20 @@ export const CheckboxTemplate = (props) => {
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
-      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange }, inputProps)), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
+      } }, h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperTextId, "aria-describedby": props.helperTextId }, inputProps)), h("div", { class: "mdc-checkbox__background" }, h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "mdc-checkbox__mixedmark" }))), h("label", { class: {
         'mdc-checkbox--invalid': props.invalid,
         'mdc-checkbox--disabled': props.disabled,
         'mdc-checkbox--required': props.required,
         'mdc-checkbox--indeterminate': props.indeterminate,
         'lime-checkbox--readonly': props.readonly,
       }, htmlFor: props.id }, props.label)),
-    h(HelperText, { text: props.helperText }),
+    h(HelperText, { text: props.helperText, helperTextId: props.helperTextId }),
   ];
 };
 const HelperText = (props) => {
   if (typeof props.text !== 'string') {
     return;
   }
-  return h("limel-helper-line", { helperText: props.text.trim() });
+  return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: props.helperTextId }));
 };
 //# sourceMappingURL=checkbox.template.js.map

package/dist/collection/components/checkbox/checkbox.template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAevD~~,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,~~IACpB~~,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,~~IAAC~~,IAAI,EAAE,KAAK,CAAC,UAAU,~~GAAI~~;~~GACzC~~,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,~~GAA0C~~,CAAC,KAAK,EAAE,EAAE;~~EAChE~~,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,~~yBAAmB~~,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,~~GAAI~~,CAAC;~~AAChE~~,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n readonly?: boolean;\n indeterminate?: boolean;\n required?: boolean;\n invalid?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n helperText?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n props\n) => {\n const inputProps = {};\n if (props.indeterminate) {\n inputProps['data-indeterminate'] = 'true';\n }\n\n return [\n <div class=\"mdc-form-field \">\n <div\n class={{\n 'mdc-checkbox': true,\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n >\n <input\n type=\"checkbox\"\n class=\"mdc-checkbox__native-control\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled \|\| props.readonly}\n required={props.required}\n onChange={props.onChange}\n {...inputProps}\n />\n <div class=\"mdc-checkbox__background\">\n <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n <path\n class=\"mdc-checkbox__checkmark-path\"\n fill=\"none\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n />\n </svg>\n <div class=\"mdc-checkbox__mixedmark\" />\n </div>\n </div>\n <label\n class={{\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>,\n <HelperText text={props.helperText} />,\n ];\n};\n\nconst HelperText: FunctionalComponent<{ text: string }> = (props) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return <limel-helper-line helperText={props.text.trim()} ~~/>;\~~n};\n"]}
1	+ {"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAgBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;GAC7C;EAED,OAAO;IACH,WAAK,KAAK,EAAC,iBAAiB;MACxB,WACI,KAAK,EAAE;UACH,cAAc,EAAE,IAAI;UACpB,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C;QAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;QACF,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAC,WAAW;YACpD,YACI,KAAK,EAAC,8BAA8B,EACpC,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,kCAAkC,GACtC,CACA;UACN,WAAK,KAAK,EAAC,yBAAyB,GAAG,CACrC,CACJ;MACN,aACI,KAAK,EAAE;UACH,uBAAuB,EAAE,KAAK,CAAC,OAAO;UACtC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,wBAAwB,EAAE,KAAK,CAAC,QAAQ;UACxC,6BAA6B,EAAE,KAAK,CAAC,aAAa;UAClD,yBAAyB,EAAE,KAAK,CAAC,QAAQ;SAC5C,EACD,OAAO,EAAE,KAAK,CAAC,EAAE,IAEhB,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAGX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface CheckboxTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n readonly?: boolean;\n indeterminate?: boolean;\n required?: boolean;\n invalid?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n helperText?: string;\n helperTextId?: string;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n props\n) => {\n const inputProps = {};\n if (props.indeterminate) {\n inputProps['data-indeterminate'] = 'true';\n }\n\n return [\n <div class=\"mdc-form-field \">\n <div\n class={{\n 'mdc-checkbox': true,\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n >\n <input\n type=\"checkbox\"\n class=\"mdc-checkbox__native-control\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled \|\| props.readonly}\n required={props.required}\n onChange={props.onChange}\n aria-controls={props.helperTextId}\n aria-describedby={props.helperTextId}\n {...inputProps}\n />\n <div class=\"mdc-checkbox__background\">\n <svg class=\"mdc-checkbox__checkmark\" viewBox=\"0 0 24 24\">\n <path\n class=\"mdc-checkbox__checkmark-path\"\n fill=\"none\"\n d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"\n />\n </svg>\n <div class=\"mdc-checkbox__mixedmark\" />\n </div>\n </div>\n <label\n class={{\n 'mdc-checkbox--invalid': props.invalid,\n 'mdc-checkbox--disabled': props.disabled,\n 'mdc-checkbox--required': props.required,\n 'mdc-checkbox--indeterminate': props.indeterminate,\n 'lime-checkbox--readonly': props.readonly,\n }}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>,\n <HelperText\n text={props.helperText}\n helperTextId={props.helperTextId}\n />,\n ];\n};\n\nconst HelperText: FunctionalComponent<{\n helperTextId: string;\n text: string;\n}> = (props) => {\n if (typeof props.text !== 'string') {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={props.text.trim()}\n helperTextId={props.helperTextId}\n />\n );\n};\n"]}

package/dist/collection/components/collapsible-section/collapsible-section.js CHANGED Viewed

@@ -1,5 +1,6 @@
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-clickable';
 /**
  * @slot - Content to put inside the collapsible section
  * @exampleComponent limel-example-collapsible-section
@@ -41,6 +42,14 @@ export class CollapsibleSection {
     this.header = undefined;
     this.actions = undefined;
   }
+  componentDidRender() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    makeEnterClickable(button);
+  }
+  disconnectedCallback() {
+    const button = this.host.shadowRoot.querySelector('.open-close-toggle');
+    removeEnterClickable(button);
+  }
   render() {
     return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
   }
@@ -168,5 +177,6 @@ export class CollapsibleSection {
         }
       }];
   }
+  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=collapsible-section.js.map

package/dist/collection/components/collapsible-section/collapsible-section.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,SAAS,~~EAAE~~,KAAK,~~EAAgB~~,CAAC,~~EAAE~~,IAAI,~~EAAE~~,MAAM,eAAe,CAAC;~~AACxE~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;~~AAGvE~~;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;;~~IA6DnB~~,YAAO,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,OAAO,CACH,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,CACT,CAAC;IACN,CAAC,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;MAC5C,OAAO,CACH,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MAClE,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;~~kBAlGuB~~,KAAK;;;;~~EAgCvB~~,MAAM;IACT,OAAO,CACH,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MAC1C;QACI,cAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QAC3D,WAAK,KAAK,EAAC,aAAa;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB;QACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX;QACL,WAAK,KAAK,EAAC,cAAc,GAAG;QAC3B,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,WAAK,KAAK,EAAC,MAAM;QACb,eAAQ,CACN,CACA,CACb,CAAC;EACN,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CA6CJ","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\n\n/*\n @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button class=\"open-close-toggle\" onClick={this.onClick} />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div class=\"body\">\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}
1	+ {"version":3,"file":"collapsible-section.js","sourceRoot":"","sources":["../../../src/components/collapsible-section/collapsible-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EACL,OAAO,EAEP,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AAMH,MAAM,OAAO,kBAAkB;;IAgFnB,YAAO,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEM,sBAAiB,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;MAE3B,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,MAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,UAAU,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;OACtD;WAAM;QACH,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;OACrB;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;QACf,OAAO;OACV;MAED,OAAO,CACH,WAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CACxC,CACT,CAAC;IACN,CAAC,CAAC;IAEM,uBAAkB,GAAG,CAAC,MAAc,EAAE,EAAE;MAC5C,OAAO,CACH,yBACI,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,GACzC,CACL,CAAC;IACN,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MAClE,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,CAAC;kBArHuB,KAAK;;;;EAmCvB,kBAAkB;IACrB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,kBAAkB,CAAC,MAAM,CAAC,CAAC;EAC/B,CAAC;EAEM,oBAAoB;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC7C,oBAAoB,CACR,CAAC;IAEjB,oBAAoB,CAAC,MAAM,CAAC,CAAC;EACjC,CAAC;EAEM,MAAM;IACT,OAAO,CACH,eAAS,KAAK,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;MAC1C;QACI,cAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI;QAC3D,WAAK,KAAK,EAAC,aAAa;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG;UACpB,WAAK,KAAK,EAAC,MAAM,GAAG,CAClB;QACN,UAAI,KAAK,EAAC,gDAAgD,IACrD,IAAI,CAAC,MAAM,CACX;QACL,WAAK,KAAK,EAAC,cAAc,GAAG;QAC3B,IAAI,CAAC,aAAa,EAAE,CAChB;MACT,WAAK,KAAK,EAAC,MAAM;QACb,eAAQ,CACN,CACA,CACb,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CJ","sourcesContent":["import {\n Component,\n Event,\n Element,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/*\n @slot - Content to put inside the collapsible section\n * @exampleComponent limel-example-collapsible-section\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-css-props\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n /\n@Component({\n tag: 'limel-collapsible-section',\n shadow: true,\n styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n /\n `true` if the section is expanded, `false` if collapsed.\n /\n @Prop({ mutable: true, reflect: true })\n public isOpen: boolean = false;\n\n /\n Text to display in the header of the section\n /\n @Prop({ reflect: true })\n public header: string;\n\n /\n Actions to place to the far right inside the header\n /\n @Prop()\n public actions: Action[];\n\n /\n Emitted when the section is expanded\n /\n @Event()\n private open: EventEmitter<void>;\n\n /\n Emitted when the section is collapsed\n /\n @Event()\n private close: EventEmitter<void>;\n\n /\n Emitted when an action is clicked inside the header\n */\n @Event()\n private action: EventEmitter<Action>;\n\n @Element()\n private host: HTMLElement;\n\n public componentDidRender() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle'\n ) as HTMLElement;\n\n makeEnterClickable(button);\n }\n\n public disconnectedCallback() {\n const button = this.host.shadowRoot.querySelector(\n '.open-close-toggle'\n ) as HTMLElement;\n\n removeEnterClickable(button);\n }\n\n public render() {\n return (\n <section class={`${this.isOpen ? 'open' : ''}`}>\n <header>\n <button class=\"open-close-toggle\" onClick={this.onClick} />\n <div class=\"expand-icon\">\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n <div class=\"line\" />\n </div>\n <h2 class=\"title mdc-typography mdc-typography--headline2\">\n {this.header}\n </h2>\n <div class=\"divider-line\" />\n {this.renderActions()}\n </header>\n <div class=\"body\">\n <slot />\n </div>\n </section>\n );\n }\n\n private onClick = () => {\n this.handleInteraction();\n };\n\n private handleInteraction = () => {\n this.isOpen = !this.isOpen;\n\n if (this.isOpen) {\n this.open.emit();\n const waitForUiToRender = 100;\n setTimeout(dispatchResizeEvent, waitForUiToRender);\n } else {\n this.close.emit();\n }\n };\n\n private renderActions = () => {\n if (!this.actions) {\n return;\n }\n\n return (\n <div class=\"actions\">\n {this.actions.map(this.renderActionButton)}\n </div>\n );\n };\n\n private renderActionButton = (action: Action) => {\n return (\n <limel-icon-button\n icon={action.icon}\n label={action.label}\n disabled={action.disabled}\n onClick={this.handleActionClick(action)}\n />\n );\n };\n\n private handleActionClick = (action: Action) => (event: MouseEvent) => {\n event.stopPropagation();\n this.action.emit(action);\n };\n}\n"]}

package/dist/collection/components/color-picker/color-picker-palette.css CHANGED Viewed

@@ -582,6 +582,14 @@
   grid-template-columns: repeat(20, 1fr) auto;
 }
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
 /**
  * Note! This file is exported to `dist/scss/` in the published
  * node module, for consumer projects to import.
@@ -638,6 +646,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -666,27 +703,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);
@@ -725,9 +741,18 @@
 }
 .swatch:not(.hue) {
+  border: none;
+  aspect-ratio: 1;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
   cursor: pointer;
 }
+.swatch:not(.hue):focus {
+  outline: none;
+}
+.swatch:not(.hue):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 .swatch:not(.hue):hover {
   box-shadow: var(--button-shadow-hovered);
 }

package/dist/collection/components/color-picker/color-picker-palette.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class Palette {
         [colorName]: true,
         'swatch--selected': this.value === getCssColor(color, brightness),
       };
-      return (h("div", { class: classList, onClick: this.handleClick(color, brightness), tabindex: "0" }));
+      return (h("button", { class: classList, onClick: this.handleClick(color, brightness) }));
     };
     this.handleChange = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker-palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,~~WACI~~,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,~~EAC5C~~,~~QAAQ~~,~~EAAC,GAAG,GACT,CACV,~~CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;~~EAnDC~~,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAoCJ~~","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <~~div~~\n class={classList}\n onClick={this.handleClick(color, brightness)}\n ~~tabindex=\"0\"\n~~ ~~></div>\~~n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,OAAO;;IAiDR,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;MACtD,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,UAAkB,EAAE,EAAE;MAC7D,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAClD,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,CAAC,SAAS,CAAC,EAAE,IAAI;QACjB,kBAAkB,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC;OACpE,CAAC;MAEF,OAAO,CACH,cACI,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,GAC9C,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,gBAAW,GACf,CAAC,KAAa,EAAE,UAAkB,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACzD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;MAC7C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;;;;;;EAlDC,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,cAAc,EAAE,CAAO;MAC/D,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: true,\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return colors.map((color) => {\n return brightnesses.map(this.renderSwatch(color));\n });\n };\n\n private renderSwatch = (color: string) => (brightness: string) => {\n const colorName = getColorName(color, brightness);\n const classList = {\n swatch: true,\n [colorName]: true,\n 'swatch--selected': this.value === getCssColor(color, brightness),\n };\n\n return (\n <button\n class={classList}\n onClick={this.handleClick(color, brightness)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleClick =\n (color: string, brightness: string) => (event: MouseEvent) => {\n const value = getCssColor(color, brightness);\n event.stopPropagation();\n this.change.emit(value);\n };\n}\n"]}

package/dist/collection/components/color-picker/color-picker.css CHANGED Viewed

@@ -54,6 +54,35 @@
   grid-template-columns: auto 1fr;
 }
+.picker-trigger {
+  all: unset;
+  border-radius: 0.5rem;
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-normal);
+}
+.picker-trigger:hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.picker-trigger:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:focus {
+  outline: none;
+}
+.picker-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.picker-trigger:after {
+  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+}
 .chosen-color-preview,
 .picker-trigger {
   box-sizing: border-box;
@@ -82,27 +111,6 @@
   z-index: 1;
 }
-.picker-trigger {
-  border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  cursor: pointer;
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-normal);
-}
-.picker-trigger:hover {
-  color: var(--mdc-theme-on-surface);
-  background-color: var(--lime-elevated-surface-background-color);
-  box-shadow: var(--button-shadow-hovered);
-}
-.picker-trigger:active {
-  box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
-}
-.picker-trigger:after {
-  box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-}
 :host([readonly]) .picker-trigger:hover, :host([readonly]) .picker-trigger:active {
   cursor: default;
   box-shadow: var(--button-shadow-normal);

package/dist/collection/components/color-picker/color-picker.js CHANGED Viewed

@@ -28,7 +28,7 @@ export class ColorPicker {
     };
     this.renderPickerTrigger = () => {
       const background = this.value ? { '--background': this.value } : {};
-      return (h("div", { class: "picker-trigger", slot: "trigger", style: background, role: "button", tabindex: "0", onClick: this.openPopover, id: "tooltip-button" }));
+      return (h("button", { class: "picker-trigger", slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button" }));
     };
     this.openPopover = (event) => {
       event.stopPropagation();

package/dist/collection/components/color-picker/color-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,~~WACI~~,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,~~QAAQ,EAAC,GAAG,EACZ,~~OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;~~kBAnFe~~,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAiEJ~~","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <~~div~~\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n ~~tabindex=\"0\"\n~~ onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}
1	+ {"version":3,"file":"color-picker.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAG/E;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,WAAW;;IAgEZ,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE;QACrC,OAAO,CACH,qBACI,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAC,gBAAgB,GAC5B,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;OACrC;MAED,OAAO,CACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,aAAa,EAAC,cAAc,EAC5B,OAAO,EAAE,IAAI,CAAC,cAAc;QAE3B,IAAI,CAAC,mBAAmB,EAAE;QAC3B,kCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,CACU,CACnB,CAAC;IACN,CAAC,CAAC;IAEM,wBAAmB,GAAG,GAAG,EAAE;MAC/B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;MAEpE,OAAO,CACH,cACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,UAAU,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,EAAE,EAAC,gBAAgB,GACrB,CACL,CAAC;IACN,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACvB,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB,EAAE,EAAE;MAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACxB,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;;;;;;kBAlFe,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,IAAI,CAAC,aAAa,EAAE;MACpB,WAAK,KAAK,EAAC,cAAc;QACpB,IAAI,CAAC,mBAAmB,EAAE;QAE3B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAC,oBAAoB,GAC5B,CACA;KACT,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgEJ","sourcesContent":["/* eslint-disable multiline-ternary /\nimport { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/\n This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n \n The color picker can also show you a preview of any valid color name or color value.\n \n :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n /\n@Component({\n tag: 'limel-color-picker',\n shadow: true,\n styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n /\n Name or code of the chosen color\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n The label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Displayed as tooltips when picker is hovered.\n /\n @Prop({ reflect: true })\n public tooltipLabel: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` if a value is readonly. This makes the component un-interactive.\n /\n @Prop({ reflect: true })\n public readonly: boolean;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n this.renderTooltip(),\n <div class=\"color-picker\">\n {this.renderPickerPalette()}\n\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n readonly={this.readonly}\n class=\"chosen-color-input\"\n />\n </div>,\n ];\n }\n private renderTooltip = () => {\n if (!this.readonly && this.tooltipLabel) {\n return (\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-button\"\n />\n );\n }\n };\n\n private renderPickerPalette = () => {\n if (this.readonly) {\n return this.renderPickerTrigger();\n }\n\n return (\n <limel-popover\n open={this.isOpen}\n openDirection=\"bottom-start\"\n onClose={this.onPopoverClose}\n >\n {this.renderPickerTrigger()}\n <limel-color-picker-palette\n value={this.value}\n label={this.label}\n helperText={this.helperText}\n onChange={this.handleChange}\n required={this.required}\n />\n </limel-popover>\n );\n };\n\n private renderPickerTrigger = () => {\n const background = this.value ? { '--background': this.value } : {};\n\n return (\n <button\n class=\"picker-trigger\"\n slot=\"trigger\"\n style={background}\n role=\"button\"\n onClick={this.openPopover}\n id=\"tooltip-button\"\n />\n );\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"]}

package/dist/collection/components/dock/dock-button/dock-button.js CHANGED Viewed

@@ -32,6 +32,12 @@ export class DockButton {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
     };
+    this.getOpenDirection = () => {
+      if (this.useMobileLayout) {
+        return 'top';
+      }
+      return 'right';
+    };
     this.item = undefined;
     this.expanded = false;
     this.useMobileLayout = false;
@@ -77,10 +83,10 @@ export class DockButton {
   }
   renderTooltip() {
     if (!this.expanded && this.item.label) {
-      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel }));
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.label, helperLabel: this.item.helperLabel, openDirection: this.getOpenDirection() }));
     }
     if (this.expanded && this.item.helperLabel) {
-      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel }));
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.helperLabel, openDirection: this.getOpenDirection() }));
     }
   }
   static get is() { return "limel-dock-button"; }

package/dist/collection/components/dock/dock-button/dock-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dock-button.js","sourceRoot":"","sources":["../../../../src/components/dock/dock-button/dock-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,EACL,KAAK,GACR,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE;;GAEG;AAMH,MAAM,OAAO,UAAU;EAgDnB;IAoEQ,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC/B,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC;OAClD;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC,CAAC;IAEM,8BAAyB,GAAG,CAAC,OAAoB,EAAE,EAAE;MACzD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;IAC1C,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC,CAAC;~~IAqCM~~,gCAA2B,GAAG,GAAG,EAAE;;MACvC,IAAI,MAAA,MAAA,IAAI,CAAC,sBAAsB,0CAAE,UAAU,0CAAE,cAAc,EAAE;QACzD,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;OACxC;IACL,CAAC,CAAC;;~~oBAzKiB~~,KAAK;2BAOE,KAAK;kBAkBd,KAAK;IAYlB,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,MAAM;;IACT,IAAI,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,aAAa,EAAE;MACpC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;EAC/C,CAAC;EAGS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,IAAI,CAAC,2BAA2B,CACnC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;EAClD,CAAC;EAEO,aAAa;;IACjB,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,aAAa,CAAC;IAE1D,OAAO,CACH,qBACI,aAAa,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EACrD,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChD,OAAO,EAAE,IAAI,CAAC,cAAc;MAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;MAC/C,EAAC,eAAe,kBACZ,GAAG,EAAE,IAAI,CAAC,yBAAyB,IAC/B,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,CAAC,IACpC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC9B,CACU,CACnB,CAAC;EACN,CAAC;EAEO,YAAY,CAChB,WAAwC,EACxC,IAAa;;IAEb,OAAO,CACH,cACI,IAAI,EAAE,IAAI,EACV,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACH,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;OAChC,EACD,OAAO,EAAE,WAAW,eACV,QAAQ;MAEjB,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,aAAa,EAAE;MACpB,IAAI,CAAC,kBAAkB,EAAE,CACrB,CACZ,CAAC;EACN,CAAC;EA4BO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAO,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG,CAAC;EAC7D,CAAC;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;KACtD;EACL,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACnC,OAAO,CACH,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,~~GACpC~~,CACL,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,OAAO,CACH,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,~~GAC9B~~,CACL,CAAC;KACL;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAOJ~~","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n}\n"]}
1	+ {"version":3,"file":"dock-button.js","sourceRoot":"","sources":["../../../../src/components/dock/dock-button/dock-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"]}

package/dist/collection/components/form/fields/schema-field.js CHANGED Viewed

@@ -32,7 +32,19 @@ const shouldChangeToUndefined = (value, schema) => {
 };
 const hasCustomComponent = (schema) => {
   var _a, _b;
-  return Boolean((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name);
+  const name = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name;
+  if (!name) {
+    return false;
+  }
+  try {
+    verifyCustomComponentIsDefined(name);
+  }
+  catch (_c) {
+    // eslint-disable-next-line no-console
+    console.warn(`Custom component ${name} not defined`);
+    return false;
+  }
+  return true;
 };
 const verifyCustomComponentIsDefined = (elementName) => {
   const supportsCustomElements = 'customElements' in window;

package/dist/collection/components/form/fields/schema-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\n\n/*\n If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n \n This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n \n Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n /\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n return Boolean(schema.lime?.component?.name);\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props \|\| {};\n\n return { name: name, props: props };\n};\n\n/\n Create properties from the factory that is set on `limel-form`\n * @param {} formContext the form context\n @param {} schema the schema for the current field\n @returns {object} the properties created by the factory\n /\nexport function getFactoryProps(\n formContext: any,\n schema: any\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n this.initState();\n }\n\n private initState() {\n if (this.hasValue()) {\n this.state.modified = true;\n }\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n if (!modified) {\n return false;\n }\n\n return !isEmpty(errorSchema);\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required \|\| schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText \|\| schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly \|\| schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /\n Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}
1	+ {"version":3,"file":"schema-field.js","sourceRoot":"","sources":["../../../../src/components/form/fields/schema-field.ts"],"names":[],"mappings":"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","sourcesContent":["import { LimeElementsAdapter } from '../adapters';\nimport JSONSchemaField from '@rjsf/core/lib/components/fields/SchemaField';\nimport React from 'react';\nimport { FieldProps } from './types';\nimport { isEmpty, capitalize } from 'lodash-es';\nimport { resetDependentFields } from './field-helpers';\nimport { FieldTemplate } from '../templates';\n\n/*\n If given a value and schema, check if the value should be translated\n * from null to undefined to avoid issues with validation\n \n This function needs to be used for several reasons:\n * 1. CustomEvent does not allow `detail` to equal `undefined`, but we can call onChange with `undefined` in React\n * 2. `null` is treated as a valid value in a jsonschema and with marshmallow and it has its own type (null)\n * 3. Without changing `null` to `undefined` there would be no way to remove a field from\n * from the submitted form data once it had any data. (when POSTing, undefined is not posted since its not valid json)\n * 4. The only applies to custom web components since widgets handle transforming null/'' to undefined depending on the widget\n * and its purpose.\n \n Example:\n * If I have an object { name?: string, email?: string } that I am using a custom web component for `name`,\n * then initially, the formData will be {} which is fine because neither name or email are required. Then if i input a\n * value for name the formData will be { name: 'some_value' } which is also fine. But then if I want to remove name\n * from the form data I would delete all the text from the name input field. Web components would emit this empty value\n * as '' or null. If the web component tries to emit `undefined`, null would be emitted instead because CustomEvent has\n * a default `detail` value of null\n * @param {any} value the value associated with the schema\n * @param {any} schema the schema for the value\n * @returns {boolean} whether or not null should be changed to undefined\n /\nconst shouldChangeToUndefined = (value, schema): boolean => {\n return value === null && !schema.type.includes('null');\n};\n\nconst hasCustomComponent = (schema): boolean => {\n const name = schema.lime?.component?.name;\n if (!name) {\n return false;\n }\n\n try {\n verifyCustomComponentIsDefined(name);\n } catch {\n // eslint-disable-next-line no-console\n console.warn(`Custom component ${name} not defined`);\n\n return false;\n }\n\n return true;\n};\n\nconst verifyCustomComponentIsDefined = (elementName): void => {\n const supportsCustomElements = 'customElements' in window;\n\n if (!supportsCustomElements) {\n throw new Error(\n 'Custom form elements are not supported by this browser!'\n );\n }\n\n if (!customElements.get(elementName)) {\n throw new Error(`Custom form element '${elementName}' is not defined!`);\n }\n};\n\nconst getCustomComponent = (\n schema\n): { name: string; props: { [key: string]: any } } => {\n const name = schema.lime?.component?.name;\n const props = schema.lime?.component?.props \|\| {};\n\n return { name: name, props: props };\n};\n\n/\n Create properties from the factory that is set on `limel-form`\n * @param {} formContext the form context\n @param {} schema the schema for the current field\n @returns {object} the properties created by the factory\n /\nexport function getFactoryProps(\n formContext: any,\n schema: any\n): Record<string, any> {\n const factory: (schema: any) => Record<string, any> =\n formContext.propsFactory;\n if (typeof factory !== 'function') {\n return {};\n }\n\n const props = factory(schema);\n if (!props) {\n return {};\n }\n\n return props;\n}\n\nexport class SchemaField extends React.Component<FieldProps> {\n state = {\n modified: false,\n };\n\n constructor(props) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n this.handleCustomComponentChange =\n this.handleCustomComponentChange.bind(this);\n this.initState();\n }\n\n private initState() {\n if (this.hasValue()) {\n this.state.modified = true;\n }\n }\n\n private hasValue() {\n const value = this.getValue();\n if (!value) {\n return false;\n }\n\n if (Array.isArray(value)) {\n return !!value.length;\n }\n\n if (typeof value === 'object') {\n return !isEmpty(value);\n }\n\n return true;\n }\n\n private getLabel() {\n const { schema } = this.props;\n\n return schema.title;\n }\n\n private isInvalid() {\n const { modified } = this.state;\n const { errorSchema } = this.props;\n\n if (!modified) {\n return false;\n }\n\n return !isEmpty(errorSchema);\n }\n\n private isRequired() {\n const { required, schema } = this.props;\n\n return required \|\| schema.minItems > 0;\n }\n\n private getHelperText() {\n const { errorSchema, schema } = this.props;\n\n if (!this.isInvalid()) {\n const helperText = schema.lime?.component?.props?.helperText;\n\n return helperText \|\| schema.description;\n }\n\n if (!isEmpty(errorSchema) && '__errors' in errorSchema) {\n return capitalize(errorSchema.__errors[0]); // eslint-disable-line no-underscore-dangle\n }\n\n return schema.description;\n }\n\n private getValue() {\n const { formData } = this.props;\n\n return formData;\n }\n\n private handleCustomComponentChange(event) {\n const { schema } = this.props;\n event.stopPropagation();\n\n let value = event.detail;\n\n if (shouldChangeToUndefined(value, schema)) {\n value = undefined;\n }\n\n this.handleChange(value);\n }\n\n private handleChange(data) {\n const { formData, schema } = this.props;\n const { rootSchema } = this.props.registry;\n\n this.setState({ modified: true });\n\n const newData = resetDependentFields(\n formData,\n data,\n schema,\n rootSchema\n );\n\n this.props.onChange(newData);\n }\n\n private buildCustomComponentProps() {\n const {\n disabled,\n readonly,\n name,\n registry,\n schema,\n errorSchema,\n idSchema,\n } = this.props;\n const factoryProps = getFactoryProps(registry.formContext, schema);\n\n return {\n ...factoryProps,\n value: this.getValue(),\n required: this.isRequired(),\n readonly: readonly \|\| schema.readOnly,\n disabled: disabled,\n invalid: this.isInvalid(),\n label: this.getLabel(),\n helperText: this.getHelperText(),\n formInfo: {\n schema: schema,\n rootSchema: registry.formContext.schema,\n errorSchema: errorSchema,\n rootValue: registry.formContext.rootValue,\n name: name,\n schemaPath: this.getSchemaPath(idSchema?.$id),\n },\n };\n }\n\n private renderCustomComponent(props: FieldProps) {\n const { name, props: userDefinedComponentProps } = getCustomComponent(\n props.schema\n );\n\n verifyCustomComponentIsDefined(name);\n\n const component = React.createElement(LimeElementsAdapter, {\n name: name,\n elementProps: {\n ...userDefinedComponentProps,\n ...this.buildCustomComponentProps(),\n },\n events: {\n change: this.handleCustomComponentChange,\n },\n });\n\n return React.createElement(\n FieldTemplate,\n {\n ...this.props,\n classNames: 'form-group field field-custom',\n },\n component\n );\n }\n\n render() {\n if (hasCustomComponent(this.props.schema)) {\n return this.renderCustomComponent(this.props);\n }\n\n const fieldProps = {\n ...this.props,\n onChange: this.handleChange,\n };\n\n return React.createElement(JSONSchemaField, fieldProps);\n }\n\n /\n Gets the path to the current property within the schema\n * @param {string} schemaId the id of the schema\n * @returns {string[]} an array with the schema path for the current property\n * @example\n * const schemaId = 'root_sections_0_controls_0_name';\n * const schemaPath = getSchemaPath(schemaId);\n * // => ['sections', '0', 'controls', '0', 'name']\n */\n private getSchemaPath(schemaId: string): string[] {\n if (schemaId === undefined) {\n return undefined;\n }\n\n return schemaId.replace('root_', '').split('_');\n }\n}\n"]}

package/dist/collection/components/form/form.css CHANGED Viewed

@@ -430,6 +430,10 @@
   flex-grow: 1;
 }
+limel-code-editor {
+  margin-bottom: 0.75rem;
+}
 .limel-form-array-item--object {
   margin-bottom: 0.25rem;
 }

package/dist/collection/components/form/widgets/select.js CHANGED Viewed

@@ -51,6 +51,7 @@ function createOption(item) {
   return {
     text: item.label,
     value: item.value,
+    disabled: !!item.schema.readOnly,
   };
 }
 function findValue(value, options) {

package/dist/collection/components/form/widgets/select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS;EAKvC,YAAmB,KAAkB;IACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAa;IAJ9B,UAAK,GAAG;MACX,QAAQ,EAAE,KAAK;KAClB,CAAC;IAIE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAEM,MAAM;;IACT,MAAM,KAAK,GAAgB,IAAI,CAAC,KAAK,CAAC;IACtC,MAAM,WAAW,GAAU,KAAK,CAAC,OAAO,CAAC,WAAoB,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9C,IAAI,KAAU,CAAC;IAEf,IAAI,KAAK,CAAC,QAAQ,EAAE;MAChB,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC5C;SAAM;MACH,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;IAED,MAAM,eAAe,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,KAAK,KAAI,EAAE,CAAC;IAElE,OAAO,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;MAClD,IAAI,EAAE,cAAc;MACpB,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE;QACJ,MAAM,EAAE,IAAI,CAAC,YAAY;OAC5B;MACD,WAAW,EAAE,KAAK;MAClB,UAAU,kBACN,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,OAAO,IACb,eAAe,CACrB;KACJ,CAAC,CAAC;EACP,CAAC;EAEO,YAAY,CAAC,KAAqC;IACtD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;MACzD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;MAEtB,OAAO;KACV;IAED,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACvC,CAAC;CACJ;AAED,SAAS,YAAY,CAAC,~~IAAsC~~;~~EACxD~~,OAAO;IACH,IAAI,EAAE,IAAI,CAAC,KAAK;IAChB,KAAK,EAAE,IAAI,CAAC,KAAK;~~GACpB~~,CAAC;AACN,CAAC;AAED,SAAS,SAAS,CAAC,KAAa,EAAE,OAAiB;EAC/C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AACpE,CAAC;AAED,SAAS,UAAU,CAAC,KAAe,EAAE,OAAiB;EAClD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5E,CAAC","sourcesContent":["import React from 'react';\nimport { Option } from '~~@limetech~~/~~lime-elements~~';\nimport { isMultiple } from '../../../util/multiple';\nimport { LimeElementsWidgetAdapter } from '../adapters';\nimport { WidgetProps } from './types';\n\nexport class Select extends React.Component {\n public state = {\n modified: false,\n };\n\n constructor(public props: WidgetProps) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n }\n\n public render() {\n const props: WidgetProps = this.props;\n const enumOptions: any[] = props.options.enumOptions as any[];\n const options = enumOptions.map(createOption);\n let value: any;\n\n if (props.multiple) {\n value = findValues(props.value, options);\n } else {\n value = findValue(props.value, options);\n }\n\n const additionalProps = props.schema.lime?.component?.props \|\| {};\n\n return React.createElement(LimeElementsWidgetAdapter, {\n name: 'limel-select',\n value: value,\n events: {\n change: this.handleChange,\n },\n widgetProps: props,\n extraProps: {\n multiple: props.multiple,\n options: options,\n ...additionalProps,\n },\n });\n }\n\n private handleChange(event: CustomEvent<Option \| Option[]>) {\n const props = this.props;\n event.stopPropagation();\n\n if (!props.onChange) {\n return;\n }\n\n if (isMultiple(event.detail)) {\n const value = event.detail.map((option) => option.value);\n props.onChange(value);\n\n return;\n }\n\n props.onChange(event.detail.value);\n }\n}\n\nfunction createOption(item: { label: string; value: string }): Option {\n return {\n text: item.label,\n value: item.value,\n };\n}\n\nfunction findValue(value: string, options: Option[]) {\n return options.find((option: Option) => option.value === value);\n}\n\nfunction findValues(value: string[], options: Option[]) {\n return options.filter((option: Option) => value.includes(option.value));\n}\n"]}
1	+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../../../src/components/form/widgets/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAGxD,MAAM,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS;EAKvC,YAAmB,KAAkB;IACjC,KAAK,CAAC,KAAK,CAAC,CAAC;IADE,UAAK,GAAL,KAAK,CAAa;IAJ9B,UAAK,GAAG;MACX,QAAQ,EAAE,KAAK;KAClB,CAAC;IAIE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrD,CAAC;EAEM,MAAM;;IACT,MAAM,KAAK,GAAgB,IAAI,CAAC,KAAK,CAAC;IACtC,MAAM,WAAW,GAAU,KAAK,CAAC,OAAO,CAAC,WAAoB,CAAC;IAC9D,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;IAC9C,IAAI,KAAU,CAAC;IAEf,IAAI,KAAK,CAAC,QAAQ,EAAE;MAChB,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC5C;SAAM;MACH,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KAC3C;IAED,MAAM,eAAe,GAAG,CAAA,MAAA,MAAA,KAAK,CAAC,MAAM,CAAC,IAAI,0CAAE,SAAS,0CAAE,KAAK,KAAI,EAAE,CAAC;IAElE,OAAO,KAAK,CAAC,aAAa,CAAC,yBAAyB,EAAE;MAClD,IAAI,EAAE,cAAc;MACpB,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE;QACJ,MAAM,EAAE,IAAI,CAAC,YAAY;OAC5B;MACD,WAAW,EAAE,KAAK;MAClB,UAAU,kBACN,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,OAAO,EAAE,OAAO,IACb,eAAe,CACrB;KACJ,CAAC,CAAC;EACP,CAAC;EAEO,YAAY,CAAC,KAAqC;IACtD,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IACzB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;MACjB,OAAO;KACV;IAED,IAAI,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;MAC1B,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;MACzD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;MAEtB,OAAO;KACV;IAED,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACvC,CAAC;CACJ;AAED,SAAS,YAAY,CAAC,IAIrB;EACG,OAAO;IACH,IAAI,EAAE,IAAI,CAAC,KAAK;IAChB,KAAK,EAAE,IAAI,CAAC,KAAK;IACjB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;GACnC,CAAC;AACN,CAAC;AAED,SAAS,SAAS,CAAC,KAAa,EAAE,OAAiB;EAC/C,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AACpE,CAAC;AAED,SAAS,UAAU,CAAC,KAAe,EAAE,OAAiB;EAClD,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5E,CAAC","sourcesContent":["import React from 'react';\nimport { Option } from '../../select/option.types';\nimport { isMultiple } from '../../../util/multiple';\nimport { LimeElementsWidgetAdapter } from '../adapters';\nimport { WidgetProps } from './types';\n\nexport class Select extends React.Component {\n public state = {\n modified: false,\n };\n\n constructor(public props: WidgetProps) {\n super(props);\n this.handleChange = this.handleChange.bind(this);\n }\n\n public render() {\n const props: WidgetProps = this.props;\n const enumOptions: any[] = props.options.enumOptions as any[];\n const options = enumOptions.map(createOption);\n let value: any;\n\n if (props.multiple) {\n value = findValues(props.value, options);\n } else {\n value = findValue(props.value, options);\n }\n\n const additionalProps = props.schema.lime?.component?.props \|\| {};\n\n return React.createElement(LimeElementsWidgetAdapter, {\n name: 'limel-select',\n value: value,\n events: {\n change: this.handleChange,\n },\n widgetProps: props,\n extraProps: {\n multiple: props.multiple,\n options: options,\n ...additionalProps,\n },\n });\n }\n\n private handleChange(event: CustomEvent<Option \| Option[]>) {\n const props = this.props;\n event.stopPropagation();\n\n if (!props.onChange) {\n return;\n }\n\n if (isMultiple(event.detail)) {\n const value = event.detail.map((option) => option.value);\n props.onChange(value);\n\n return;\n }\n\n props.onChange(event.detail.value);\n }\n}\n\nfunction createOption(item: {\n label: string;\n value: string;\n schema: Record<string, unknown>;\n}): Option {\n return {\n text: item.label,\n value: item.value,\n disabled: !!item.schema.readOnly,\n };\n}\n\nfunction findValue(value: string, options: Option[]) {\n return options.find((option: Option) => option.value === value);\n}\n\nfunction findValues(value: string[], options: Option[]) {\n return options.filter((option: Option) => value.includes(option.value));\n}\n"]}