npm - @limetech/lime-elements - Versions diffs - 37.0.0-next.1 → 37.1.0-dev.1 - Mend

@limetech/lime-elements 37.0.0-next.1 → 37.1.0-dev.1

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSlider } from '@material/slider';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\n/*\n @exampleComponent limel-example-slider\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n /\n@Component({\n tag: 'limel-slider',\n shadow: true,\n styleUrl: 'slider.scss',\n})\nexport class Slider {\n /\n Disables the slider when `true`,\n * and visually shows that the field is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the slider may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the slider when `true`. This visualizes the slider slightly differently.\n * But shows no visual sign indicating that the slider field\n * is disabled or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Default value: 1.\n * The factor that the properties `value`, `valuemax`, `valuemin`, and\n * `step` are multiplied by. On `change` divides the value by the factor,\n * so the original format stays the same.\n /\n @Prop({ reflect: true })\n public factor: number = 1;\n\n /\n Label to display next to the input\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the slider\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Unit to display next to the value\n /\n @Prop({ reflect: true })\n public unit: string = '';\n\n /\n The value of the input\n /\n @Prop({ reflect: true })\n public value: number;\n\n /\n The maximum value allowed\n /\n @Prop({ reflect: true })\n public valuemax: number = 100; // eslint-disable-line no-magic-numbers\n\n /\n The minimum value allowed\n /\n @Prop({ reflect: true })\n public valuemin: number = 0;\n\n /\n The stepping interval to use when adjusting the value\n /\n @Prop({ reflect: true })\n public step: number;\n\n /\n Emitted when the value has been changed\n /\n @Event()\n private change: EventEmitter<number>;\n\n @Element()\n private rootElement: HTMLLimelSliderElement;\n\n private mdcSlider: MDCSlider;\n private labelId: string;\n private helperTextId: string;\n\n @State()\n private percentageClass: string;\n\n public constructor() {\n this.inputHandler = this.inputHandler.bind(this);\n this.getContainerClassList = this.getContainerClassList.bind(this);\n this.labelId = createRandomString();\n this.helperTextId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const inputElement = this.getInputElement();\n if (!inputElement) {\n return;\n }\n\n const value = this.getValue();\n\n /\n For some reason the input element's `value` attribute is removed\n (probably by Stencil) when the element is first rendered. But if the\n attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n MDCSlider crashes.\n So we add the attribute right before initializing MDCSlider. /Ads\n /\n inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n /\n When creating the `mdcSlider` component, its important that the value set in\n the input field obeys the range and the step size.\n\n The MDCSlider will throw an exception unless the value in the input element\n is dividible by the step value and is in the provided range.\n If an exception occurs, this component will crash and it will be impossible to change\n its value.\n The logic below ensures that the component will render even though the\n provided value is wrong.\n This could be considered wrong, but it at least fixes so that it's possible\n to change the value from the UI.\n /\n const greaterThanOrEqualMin = value >= this.valuemin;\n const lessThanOrEqualMax = value <= this.valuemax;\n\n if (!greaterThanOrEqualMin) {\n const newMin = this.multiplyByFactor(value);\n inputElement.setAttribute('min', `${newMin}`);\n }\n\n if (!lessThanOrEqualMax) {\n const newMax = this.multiplyByFactor(value);\n inputElement.setAttribute('max', `${newMax}`);\n }\n\n if (!this.isMultipleOfStep(value, this.step)) {\n inputElement.removeAttribute('step');\n }\n\n this.createMDCSlider();\n }\n\n public componentWillLoad() {\n this.setPercentageClass(this.value);\n }\n\n public disconnectedCallback() {\n this.destroyMDCSlider();\n }\n\n private getContainerClassList() {\n return {\n [this.percentageClass]: true,\n disabled: this.disabled \|\| this.readonly,\n readonly: this.readonly,\n };\n }\n\n public render() {\n const inputProps: any = {};\n if (this.step) {\n inputProps.step = this.multiplyByFactor(this.step);\n }\n\n if (this.disabled \|\| this.readonly) {\n inputProps.disabled = true;\n }\n\n return (\n <Host class={this.getContainerClassList()}>\n <label\n class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n id={this.labelId}\n >\n {this.label}\n </label>\n <div class=\"slider__content-range-container\">\n <span class=\"slider__content-min-label\">\n {this.multiplyByFactor(this.valuemin)}\n {this.unit}\n </span>\n <span class=\"slider__content-max-label\">\n {this.multiplyByFactor(this.valuemax)}\n {this.unit}\n </span>\n </div>\n <div\n class={{\n 'mdc-slider': true,\n 'mdc-slider--discrete': true,\n 'mdc-slider--disabled': this.disabled \|\| this.readonly,\n }}\n >\n <input\n class=\"mdc-slider__input\"\n type=\"range\"\n min={this.multiplyByFactor(this.valuemin)}\n max={this.multiplyByFactor(this.valuemax)}\n value={this.multiplyByFactor(this.value)}\n name=\"volume\"\n aria-labelledby={this.labelId}\n aria-controls={this.helperTextId}\n {...inputProps}\n />\n <div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div class=\"mdc-slider__track--active_fill\"></div>\n </div>\n </div>\n <div class=\"mdc-slider__thumb\">\n <div\n class=\"mdc-slider__value-indicator-container\"\n aria-hidden=\"true\"\n >\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">\n {this.multiplyByFactor(this.value)}\n </span>\n </div>\n </div>\n <div class=\"mdc-slider__thumb-knob\"></div>\n </div>\n </div>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n private renderHelperLine() {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n />\n );\n }\n\n @Watch('disabled')\n protected watchDisabled() {\n this.updateDisabledState();\n }\n\n @Watch('readonly')\n protected watchReadonly() {\n this.updateDisabledState();\n }\n\n @Watch('value')\n protected watchValue() {\n if (!this.mdcSlider) {\n return;\n }\n\n const value = this.multiplyByFactor(this.getValue());\n this.mdcSlider.setValue(value);\n\n if (this.isStepConfigured()) {\n return;\n }\n\n const step = this.multiplyByFactor(this.step);\n if (!this.isMultipleOfStep(value, step)) {\n return;\n }\n\n this.reCreateSliderWithStep();\n }\n\n private updateDisabledState() {\n if (!this.mdcSlider) {\n return;\n }\n\n this.mdcSlider.setDisabled(this.disabled \|\| this.readonly);\n }\n\n private changeHandler = (event) => {\n let value = event.detail.value;\n const step = this.multiplyByFactor(this.step);\n\n if (!this.isMultipleOfStep(value, step)) {\n value = this.roundToStep(value, step);\n }\n\n this.change.emit(value / this.factor);\n };\n\n private multiplyByFactor(value) {\n return Math.round(value this.factor);\n }\n\n private getValue() {\n let value = this.value;\n if (!isFinite(value)) {\n value = this.valuemin;\n }\n\n return value;\n }\n\n private inputHandler(event) {\n this.setPercentageClass(event.detail.value / this.factor);\n }\n\n private setPercentageClass(value) {\n this.percentageClass = getPercentageClass(\n (value - this.valuemin) / (this.valuemax - this.valuemin)\n );\n }\n\n private isMultipleOfStep(value: number, step: number): boolean {\n if (!step) {\n return true;\n }\n\n return value % step === 0;\n }\n\n private roundToStep(value: number, step: number): number {\n return Math.round(value / step) * step;\n }\n\n private getRootElement(): HTMLElement \| undefined {\n return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n }\n\n private getInputElement(): HTMLInputElement \| undefined {\n const element = this.getRootElement();\n if (!element) {\n return;\n }\n\n return element.querySelector('input');\n }\n\n private isStepConfigured(): boolean {\n if (!this.step) {\n return true;\n }\n\n const input = this.getInputElement();\n if (!input) {\n return true;\n }\n\n return input.hasAttribute('step');\n }\n\n private reCreateSliderWithStep() {\n const inputElement = this.getInputElement();\n const step = `${this.multiplyByFactor(this.step)}`;\n\n inputElement.setAttribute('step', step);\n\n this.destroyMDCSlider();\n this.createMDCSlider();\n }\n\n private createMDCSlider() {\n const element = this.getRootElement();\n\n this.mdcSlider = new MDCSlider(element);\n this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n }\n\n private destroyMDCSlider() {\n this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n this.mdcSlider.destroy();\n this.mdcSlider = undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSlider, MDCSliderChangeEventDetail } from '@material/slider';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { getPercentageClass } from './getPercentageClass';\nimport { createRandomString } from '../../util/random-string';\n\nconst DEFAULT_FACTOR = 1;\nconst DEFAULT_MAX_VALUE = 100;\nconst DEFAULT_MIN_VALUE = 0;\n\n/*\n @exampleComponent limel-example-slider-basic\n * @exampleComponent limel-example-slider-multiplier\n * @exampleComponent limel-example-slider-multiplier-percentage-colors\n * @exampleComponent limel-example-slider-composite\n /\n@Component({\n tag: 'limel-slider',\n shadow: true,\n styleUrl: 'slider.scss',\n})\nexport class Slider {\n /\n Disables the slider when `true`,\n * and visually shows that the field is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the slider may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the slider when `true`. This visualizes the slider slightly differently.\n * But shows no visual sign indicating that the slider field\n * is disabled or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Default value: 1.\n * The factor that the properties `value`, `valuemax`, `valuemin`, and\n * `step` are multiplied by. On `change` divides the value by the factor,\n * so the original format stays the same.\n /\n @Prop({ reflect: true })\n public factor: number = DEFAULT_FACTOR;\n\n /\n Label to display next to the input\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Optional helper text to display below the slider\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Unit to display next to the value\n /\n @Prop({ reflect: true })\n public unit: string = '';\n\n /\n The value of the input\n /\n @Prop({ reflect: true })\n public value: number;\n\n /\n The maximum value allowed\n /\n @Prop({ reflect: true })\n public valuemax: number = DEFAULT_MAX_VALUE;\n\n /\n The minimum value allowed\n /\n @Prop({ reflect: true })\n public valuemin: number = DEFAULT_MIN_VALUE;\n\n /\n The stepping interval to use when adjusting the value\n /\n @Prop({ reflect: true })\n public step: number;\n\n /\n Emitted when the value has been changed\n /\n @Event()\n private change: EventEmitter<number>;\n\n @Element()\n private rootElement: HTMLLimelSliderElement;\n\n @State()\n private percentageClass: string;\n\n private mdcSlider: MDCSlider;\n private labelId: string;\n private helperTextId: string;\n private observer: ResizeObserver;\n\n public constructor() {\n this.labelId = createRandomString();\n this.helperTextId = createRandomString();\n }\n\n public connectedCallback() {\n this.initialize();\n this.observer = new ResizeObserver(this.resizeObserverCallback);\n this.observer.observe(this.rootElement);\n }\n\n public componentWillLoad() {\n this.setPercentageClass(this.value);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n public disconnectedCallback() {\n this.destroyMDCSlider();\n this.observer.disconnect();\n }\n\n public render() {\n const inputProps: any = {};\n if (this.step) {\n inputProps.step = this.multiplyByFactor(this.step);\n }\n\n if (this.disabled \|\| this.readonly) {\n inputProps.disabled = true;\n }\n\n return (\n <Host class={this.getContainerClassList()}>\n <label\n class=\"slider__label mdc-floating-label mdc-floating-label--float-above\"\n id={this.labelId}\n >\n {this.label}\n </label>\n <div class=\"slider__content-range-container\">\n <span class=\"slider__content-min-label\">\n {this.multiplyByFactor(this.valuemin)}\n {this.unit}\n </span>\n <span class=\"slider__content-max-label\">\n {this.multiplyByFactor(this.valuemax)}\n {this.unit}\n </span>\n </div>\n <div\n class={{\n 'mdc-slider': true,\n 'mdc-slider--discrete': true,\n 'mdc-slider--disabled': this.disabled \|\| this.readonly,\n }}\n >\n <input\n class=\"mdc-slider__input\"\n type=\"range\"\n min={this.multiplyByFactor(this.valuemin)}\n max={this.multiplyByFactor(this.valuemax)}\n value={this.multiplyByFactor(this.value)}\n name=\"volume\"\n aria-labelledby={this.labelId}\n aria-controls={this.helperTextId}\n {...inputProps}\n />\n <div class=\"mdc-slider__track\">\n <div class=\"mdc-slider__track--inactive\"></div>\n <div class=\"mdc-slider__track--active\">\n <div class=\"mdc-slider__track--active_fill\"></div>\n </div>\n </div>\n <div class=\"mdc-slider__thumb\">\n <div\n class=\"mdc-slider__value-indicator-container\"\n aria-hidden=\"true\"\n >\n <div class=\"mdc-slider__value-indicator\">\n <span class=\"mdc-slider__value-indicator-text\">\n {this.multiplyByFactor(this.value)}\n </span>\n </div>\n </div>\n <div class=\"mdc-slider__thumb-knob\"></div>\n </div>\n </div>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n @Watch('disabled')\n protected watchDisabled() {\n this.updateDisabledState();\n }\n\n @Watch('readonly')\n protected watchReadonly() {\n this.updateDisabledState();\n }\n\n @Watch('value')\n protected watchValue() {\n if (!this.mdcSlider) {\n return;\n }\n\n const value = this.multiplyByFactor(this.getValue());\n this.mdcSlider.setValue(value);\n\n if (this.isStepConfigured()) {\n return;\n }\n\n const step = this.multiplyByFactor(this.step);\n if (!this.isMultipleOfStep(value, step)) {\n return;\n }\n\n this.reCreateSliderWithStep();\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n />\n );\n };\n\n private initialize = () => {\n const inputElement = this.getInputElement();\n if (!inputElement) {\n return;\n }\n\n const value = this.getValue();\n\n /\n For some reason the input element's `value` attribute is removed\n (probably by Stencil) when the element is first rendered. But if the\n attribute is missing when MDCSlider is initialized (MDC v11.0.0),\n MDCSlider crashes.\n So we add the attribute right before initializing MDCSlider. /Ads\n /\n inputElement.setAttribute('value', `${this.multiplyByFactor(value)}`);\n\n /\n When creating the `mdcSlider` component, its important that the value set in\n the input field obeys the range and the step size.\n\n The MDCSlider will throw an exception unless the value in the input element\n is dividible by the step value and is in the provided range.\n If an exception occurs, this component will crash and it will be impossible to change\n its value.\n The logic below ensures that the component will render even though the\n provided value is wrong.\n This could be considered wrong, but it at least fixes so that it's possible\n to change the value from the UI.\n /\n const greaterThanOrEqualMin = value >= this.valuemin;\n const lessThanOrEqualMax = value <= this.valuemax;\n\n if (!greaterThanOrEqualMin) {\n const newMin = this.multiplyByFactor(value);\n inputElement.setAttribute('min', `${newMin}`);\n }\n\n if (!lessThanOrEqualMax) {\n const newMax = this.multiplyByFactor(value);\n inputElement.setAttribute('max', `${newMax}`);\n }\n\n if (!this.isMultipleOfStep(value, this.step)) {\n inputElement.removeAttribute('step');\n }\n\n this.createMDCSlider();\n };\n\n private reCreateSliderWithStep = () => {\n const inputElement = this.getInputElement();\n const step = `${this.multiplyByFactor(this.step)}`;\n\n inputElement.setAttribute('step', step);\n\n this.destroyMDCSlider();\n this.createMDCSlider();\n };\n\n private createMDCSlider = () => {\n const element = this.getRootElement();\n\n this.mdcSlider = new MDCSlider(element);\n this.mdcSlider.listen('MDCSlider:change', this.changeHandler);\n this.mdcSlider.listen('MDCSlider:input', this.inputHandler);\n };\n\n private destroyMDCSlider() {\n this.mdcSlider.unlisten('MDCSlider:change', this.changeHandler);\n this.mdcSlider.unlisten('MDCSlider:input', this.inputHandler);\n this.mdcSlider.destroy();\n this.mdcSlider = undefined;\n }\n\n private changeHandler = (\n event: CustomEvent<MDCSliderChangeEventDetail>\n ) => {\n let value = event.detail.value;\n const step = this.multiplyByFactor(this.step);\n\n if (!this.isMultipleOfStep(value, step)) {\n value = this.roundToStep(value, step);\n }\n\n this.change.emit(value / this.factor);\n };\n\n private inputHandler = (event: CustomEvent<MDCSliderChangeEventDetail>) => {\n this.setPercentageClass(event.detail.value / this.factor);\n };\n\n private getContainerClassList = () => {\n return {\n [this.percentageClass]: true,\n disabled: this.disabled \|\| this.readonly,\n readonly: this.readonly,\n };\n };\n\n private resizeObserverCallback = () => {\n this.mdcSlider?.layout();\n };\n\n private updateDisabledState = () => {\n if (!this.mdcSlider) {\n return;\n }\n\n this.mdcSlider?.setDisabled(this.disabled \|\| this.readonly);\n };\n\n private multiplyByFactor = (value: number) => {\n return Math.round(value this.factor);\n };\n\n private getValue = () => {\n let value = this.value;\n if (!isFinite(value)) {\n value = this.valuemin;\n }\n\n return value;\n };\n\n private setPercentageClass = (value: number) => {\n this.percentageClass = getPercentageClass(\n (value - this.valuemin) / (this.valuemax - this.valuemin)\n );\n };\n\n private isMultipleOfStep = (value: number, step: number): boolean => {\n if (!step) {\n return true;\n }\n\n return value % step === 0;\n };\n\n private roundToStep = (value: number, step: number): number => {\n return Math.round(value / step) * step;\n };\n\n private getRootElement = (): HTMLElement \| undefined => {\n return this.rootElement.shadowRoot.querySelector('.mdc-slider');\n };\n\n private getInputElement = (): HTMLInputElement \| undefined => {\n const element = this.getRootElement();\n if (!element) {\n return;\n }\n\n return element.querySelector('input');\n };\n\n private isStepConfigured = (): boolean => {\n if (!this.step) {\n return true;\n }\n\n const input = this.getInputElement();\n if (!input) {\n return true;\n }\n\n return input.hasAttribute('step');\n };\n}\n"]}

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

@@ -752,8 +752,10 @@
   }
 }
 :host(limel-switch) {
-  display: inline-flex;
+  isolation: isolate;
+  display: flex;
   align-items: center;
+  flex-wrap: wrap;
   --mdc-switch-selected-icon-color: transparent;
   --mdc-switch-unselected-icon-color: transparent;
   --mdc-switch-disabled-selected-icon-opacity: 1;
@@ -797,6 +799,10 @@
   --mdc-switch-handle-elevation: var(--button-shadow-normal);
   --mdc-switch-disabled-track-opacity: 0.4;
 }
+:host(limel-switch) limel-helper-line {
+  display: flex;
+  flex-basis: 100%;
+}
 .mdc-switch {
   margin-right: 0.5rem;
@@ -858,4 +864,19 @@ label.disabled {
 .mdc-switch.lime-switch--readonly + label.disabled {
   cursor: default;
   opacity: 1;
+}
+limel-helper-line {
+  opacity: 0;
+}
+@media (pointer: coarse) {
+  limel-helper-line {
+    opacity: 1;
+  }
+}
+:host(:focus) limel-helper-line,
+:host(:focus-visible) limel-helper-line,
+:host(:focus-within) limel-helper-line {
+  opacity: 1;
 }

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -1,11 +1,32 @@
 import { MDCSwitch } from '@material/switch';
-import { h, } from '@stencil/core';
+import { Host, h, } from '@stencil/core';
 import { createRandomString } from '../../util/random-string';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/makeEnterClickable';
 /**
+ * The Switch component is a fundamental element in UI design that serves as a toggle switch
+ * to control the state of a specific setting or option in an application or website.
+ * The two distinct positions of the Switch are visually indicative of the two states:
+ * ON and OFF; making it easy for users to understand the current state of the controlled feature.
+ *
+ * The Switch component is widely used in user interfaces to enable users to
+ * quickly and intuitively change binary settings.
+ *
+ * <limel-example-switch-vs-checkbox />
  * @exampleComponent limel-example-switch
+ * @exampleComponent limel-example-switch-helper-text
  */
 export class Switch {
   constructor() {
+    this.helperTextId = createRandomString();
+    this.renderHelperLine = () => {
+      if (!this.hasHelperText()) {
+        return;
+      }
+      return (h("limel-helper-line", { helperTextId: this.helperTextId, helperText: this.helperText }));
+    };
+    this.hasHelperText = () => {
+      return this.helperText !== null && this.helperText !== undefined;
+    };
     this.handleClick = (event) => {
       event.stopPropagation();
       this.change.emit(!this.value);
@@ -14,11 +35,15 @@ export class Switch {
     this.disabled = false;
     this.readonly = false;
     this.value = false;
+    this.helperText = undefined;
     this.fieldId = createRandomString();
   }
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }
@@ -31,18 +56,16 @@ export class Switch {
   }
   disconnectedCallback() {
     var _a;
+    removeEnterClickable(this.host);
     (_a = this.mdcSwitch) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return [
-      h("button", { id: this.fieldId, class: {
-          'mdc-switch': true,
-          'lime-switch--readonly': this.readonly,
-          'mdc-switch--unselected': !this.value,
-          'mdc-switch--selected': this.value,
-        }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))),
-      h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label),
-    ];
+    return (h(Host, null, h("button", { id: this.fieldId, class: {
+        'mdc-switch': true,
+        'lime-switch--readonly': this.readonly,
+        'mdc-switch--unselected': !this.value,
+        'mdc-switch--selected': this.value,
+      }, type: "button", role: "switch", "aria-checked": this.value, disabled: this.disabled || this.readonly, onClick: this.handleClick, "aria-controls": this.helperTextId }, h("div", { class: "mdc-switch__track" }), h("div", { class: "mdc-switch__handle-track" }, h("div", { class: "mdc-switch__handle" }, h("div", { class: "mdc-switch__shadow" }, h("div", { class: "mdc-elevation-overlay" })), h("div", { class: "mdc-switch__ripple" }), h("div", { class: "mdc-switch__icons" }, h("svg", { class: "mdc-switch__icon mdc-switch__icon--on", viewBox: "0 0 24 24" }, h("path", { d: "M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z" })), h("svg", { class: "mdc-switch__icon mdc-switch__icon--off", viewBox: "0 0 24 24" }, h("path", { d: "M20 13H4v-2h16v2z" })))))), h("label", { class: `${this.disabled || this.readonly ? 'disabled' : ''}`, htmlFor: this.fieldId }, this.label), this.renderHelperLine()));
   }
   valueWatcher(newValue) {
     if (!this.mdcSwitch) {
@@ -134,6 +157,23 @@ export class Switch {
         "attribute": "value",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional helper text to display below the switch"
+        },
+        "attribute": "helper-text",
+        "reflect": true
       }
     };
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,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;~~AAE9D;;GAEG~~;AAMH,MAAM,OAAO,MAAM;;~~IA6HP~~,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;;~~oBAlHgB~~,KAAK;oBAQL,KAAK;iBAMR,KAAK~~;mBAYF~~,kBAAkB,EAAE;;EAI/B,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAC9C,aAAa,CACK,CAAC;IACvB,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5C,CAAC;EAEM,oBAAoB;;IACvB,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,EAAE,CAAC;EAC9B,CAAC;EAEM,MAAM;IACT,OAAO;~~MACH~~,cACI,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE;UACH,YAAY,EAAE,IAAI;UAClB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;UACtC,wBAAwB,EAAE,CAAC,IAAI,CAAC,KAAK;UACrC,sBAAsB,EAAE,IAAI,CAAC,KAAK;SACrC,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,KAAK,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW;~~QAEzB~~,WAAK,KAAK,EAAC,mBAAmB,GAAG;QACjC,WAAK,KAAK,EAAC,0BAA0B;UACjC,WAAK,KAAK,EAAC,oBAAoB;YAC3B,WAAK,KAAK,EAAC,oBAAoB;cAC3B,WAAK,KAAK,EAAC,uBAAuB,GAAO,CACvC;YACN,WAAK,KAAK,EAAC,oBAAoB,GAAO;YACtC,WAAK,KAAK,EAAC,mBAAmB;cAC1B,WACI,KAAK,EAAC,uCAAuC,EAC7C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,qEAAqE,GAAG,CAC9E;cACN,WACI,KAAK,EAAC,wCAAwC,EAC9C,OAAO,EAAC,WAAW;gBAEnB,YAAM,CAAC,EAAC,mBAAmB,GAAG,CAC5B,CACJ,CACJ,CACJ,CACD;MACT,aACI,KAAK,EAAE,~~GAAG~~,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,~~EAAE~~,EAAE,~~EAC5D~~,OAAO,EAAE,IAAI,CAAC,OAAO,IAEpB,IAAI,CAAC,KAAK,CACP;~~KACX~~,CAAC;EACN,CAAC;EAGS,YAAY,CAAC,QAAiB;IACpC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,QAAQ,CAAC;EACvC,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMJ~~","sourcesContent":["import { MDCSwitch } from '@material/switch';\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';\n\n/*\n @exampleComponent limel-example-switch\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n return [\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'lime-switch--readonly': this.readonly,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled \|\| this.readonly}\n onClick={this.handleClick}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button~~>,\~~n <label\n class={`${this.disabled \|\| this.readonly ? 'disabled' : ''}`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label~~>,\~~n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/makeEnterClickable';\n\n/*\n The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n \n The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n \n <limel-example-switch-vs-checkbox />\n * @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Optional helper text to display below the switch\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n return (\n <Host>\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'lime-switch--readonly': this.readonly,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled \|\| this.readonly}\n onClick={this.handleClick}\n aria-controls={this.helperTextId}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>\n <label\n class={`${\n this.disabled \|\| this.readonly ? 'disabled' : ''\n }`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>\n {this.renderHelperLine()}\n </Host>\n );\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}

package/dist/collection/global/{icon-cache.js → icon-cache/cache-storage-icon-cache.js} RENAMED Viewed

@@ -1,8 +1,7 @@
-const CACHE_NAME = '@limetech/lime-elements/icons';
-export class IconCache {
-  constructor() {
+export class CacheStorageIconCache {
+  constructor(cache) {
     this.promises = {};
-    this.cache = caches.open(CACHE_NAME);
+    this.cache = cache;
   }
   /**
    * Get icon data from the cache
@@ -57,8 +56,4 @@ export class IconCache {
     return `${iconPath}assets/icons/${name}.svg`;
   }
 }
-const iconCache = new IconCache();
-export default (() => {
-  return iconCache;
-})();
-//# sourceMappingURL=icon-cache.js.map
+//# sourceMappingURL=cache-storage-icon-cache.js.map

package/dist/collection/global/icon-cache/cache-storage-icon-cache.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cache-storage-icon-cache.js","sourceRoot":"","sources":["../../../src/global/icon-cache/cache-storage-icon-cache.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,qBAAqB;EAQ9B,YAAY,KAAqB;IAFzB,aAAQ,GAAkC,EAAE,CAAC;IAGjD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;EACvB,CAAC;EAED;;;;;KAKG;EACI,KAAK,CAAC,GAAG,CAAC,IAAY,EAAE,OAAe,EAAE;IAC5C,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC;IAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEpC,IAAI,QAAQ,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE;MACX,QAAQ,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;KAC/C;IAED,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EAClC,CAAC;EAEO,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,KAAY;IAC7C,IAAI,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxC,IAAI,cAAc,KAAK,SAAS,EAAE;MAC9B,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;MAChC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,cAAc,CAAC;KACvC;IAED,MAAM,cAAc,CAAC;IAErB,OAAO,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;EAC5B,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,OAAO,CAAC,QAAkB;IACpC,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,4FAA4F;IAC5F,8EAA8E;IAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IAEtD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;MACzB,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;KAClC;IAED,OAAO,OAAO,CAAC;EACnB,CAAC;EAED;;KAEG;EACK,QAAQ,CAAC,IAAI;IACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7D,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;EAClE,CAAC;EAEO,MAAM,CAAC,IAAY,EAAE,IAAY;IACrC,IAAI,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC7B,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC;KACzB;IAED,OAAO,GAAG,QAAQ,gBAAgB,IAAI,MAAM,CAAC;EACjD,CAAC;CACJ","sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n"]}

package/dist/collection/global/icon-cache/factory.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { CacheStorageIconCache } from './cache-storage-icon-cache';
+import { InMemoryIconCache } from './in-memory-icon-cache';
+const CACHE_NAME = '@limetech/lime-elements/icons';
+function createIconCache() {
+  try {
+    const cache = caches.open(CACHE_NAME);
+    return new CacheStorageIconCache(cache);
+  }
+  catch (_a) {
+    return new InMemoryIconCache();
+  }
+}
+export default (() => {
+  return createIconCache();
+})();
+//# sourceMappingURL=factory.js.map

package/dist/collection/global/icon-cache/factory.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../src/global/icon-cache/factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,UAAU,GAAG,+BAA+B,CAAC;AAEnD,SAAS,eAAe;EACpB,IAAI;IACA,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEtC,OAAO,IAAI,qBAAqB,CAAC,KAAK,CAAC,CAAC;GAC3C;EAAC,WAAM;IACJ,OAAO,IAAI,iBAAiB,EAAE,CAAC;GAClC;AACL,CAAC;AAED,eAAe,CAAC,GAAG,EAAE;EACjB,OAAO,eAAe,EAAE,CAAC;AAC7B,CAAC,CAAC,EAAE,CAAC","sourcesContent":["import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n"]}

package/dist/collection/global/icon-cache/in-memory-icon-cache.js ADDED Viewed

@@ -0,0 +1,73 @@
+export class InMemoryIconCache {
+  constructor() {
+    /*
+     * Cache of all loaded SVGs
+     */
+    this.cache = {};
+    /*
+     * Contains resolve functions for all unresolved promises that are waiting for SVG data.
+     */
+    this.resolveFunctions = {};
+  }
+  /**
+   * Get icon data from the cache
+   * @param {string} name name of the icon
+   * @param {string} path path on the server where the assets are located
+   * @returns {string} svg markup
+   */
+  async get(name, path = '') {
+    if (!this.cache[name]) {
+      this.cache[name] = await this.getIcon(name, path);
+    }
+    return this.cache[name];
+  }
+  /*
+   * Creates and returns a promise that will be resolved when SVG data is available
+   */
+  getIcon(name, path) {
+    return new Promise((resolve) => {
+      if (!this.resolveFunctions[name]) {
+        this.resolveFunctions[name] = [];
+        this.fetchData(name, path);
+      }
+      this.resolveFunctions[name].push(resolve);
+    });
+  }
+  /*
+   * Fetch SVG data from the server
+   */
+  async fetchData(name, path) {
+    let iconPath = path || '';
+    if (path && !path.endsWith('/')) {
+      iconPath = `${path}/`;
+    }
+    const response = await fetch(`${iconPath}assets/icons/${name}.svg`);
+    let svgData = await response.text();
+    // Some of the icons in the Icons8 library have hard coded black color on some of the paths.
+    // In order to apply coloring with CSS, these have to be set to 'currentColor'
+    svgData = svgData.replace(/#000000/g, 'currentColor');
+    if (!this.validSvg(svgData)) {
+      throw new Error('Invalid SVG');
+    }
+    this.resolvePromises(name, svgData);
+  }
+  /*
+   * Check if the given data is a valid SVG document
+   */
+  validSvg(data) {
+    const parser = new DOMParser();
+    const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+    return svgDoc.documentElement.tagName.toLowerCase() === 'svg';
+  }
+  /*
+   * Resolve all promises waiting for data for a specific icon
+   */
+  resolvePromises(name, svgData) {
+    const resolves = this.resolveFunctions[name];
+    resolves.forEach((resolve) => {
+      resolve(svgData);
+    });
+    this.resolveFunctions[name] = null;
+  }
+}
+//# sourceMappingURL=in-memory-icon-cache.js.map

package/dist/collection/global/icon-cache/in-memory-icon-cache.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"in-memory-icon-cache.js","sourceRoot":"","sources":["../../../src/global/icon-cache/in-memory-icon-cache.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,iBAAiB;EAA9B;IACI;;OAEG;IACK,UAAK,GAAG,EAAE,CAAC;IAEnB;;OAEG;IACK,qBAAgB,GAAG,EAAE,CAAC;EAyElC,CAAC;EAvEG;;;;;KAKG;EACI,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,GAAG,EAAE;IAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;MACnB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KACrD;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;EAC5B,CAAC;EAED;;KAEG;EACK,OAAO,CAAC,IAAI,EAAE,IAAI;IACtB,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAC3B,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC9B;MAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;EACP,CAAC;EAED;;KAEG;EACK,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI;IAC9B,IAAI,QAAQ,GAAG,IAAI,IAAI,EAAE,CAAC;IAC1B,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;MAC7B,QAAQ,GAAG,GAAG,IAAI,GAAG,CAAC;KACzB;IAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,QAAQ,gBAAgB,IAAI,MAAM,CAAC,CAAC;IAEpE,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IAEpC,4FAA4F;IAC5F,8EAA8E;IAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;IACtD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;MACzB,MAAM,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;EACxC,CAAC;EAED;;KAEG;EACK,QAAQ,CAAC,IAAI;IACjB,MAAM,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;IAE7D,OAAO,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,KAAK,CAAC;EAClE,CAAC;EAED;;KAEG;EACK,eAAe,CAAC,IAAI,EAAE,OAAO;IACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,QAAQ,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MACzB,OAAO,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;EACvC,CAAC;CACJ","sourcesContent":["export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n"]}

package/dist/collection/util/makeEnterClickable.js ADDED Viewed

@@ -0,0 +1,61 @@
+import { forceUpdate } from '@stencil/core';
+const eventHandlers = new WeakMap();
+/**
+ * Overrides the default browser behavior for clickable elements
+ * When focused and pressing down enter, avoids calling onClick repeatedly
+ * @param {HTMLElement} element the clickable element
+ */
+// eslint-disable-next-line sonarjs/cognitive-complexity
+export function makeEnterClickable(element) {
+  if (eventHandlers.has(element)) {
+    return;
+  }
+  let isActive = false;
+  let hasJustReleasedEnter = true;
+  const keydownHandler = (event) => {
+    if (event.key === 'Enter' && !isActive) {
+      isActive = true;
+      if (element === null || element === void 0 ? void 0 : element.shadowRoot) {
+        forceUpdate(element);
+      }
+    }
+  };
+  const keyupHandler = (event) => {
+    if (event.key === 'Enter' && isActive) {
+      isActive = false;
+      hasJustReleasedEnter = true;
+      if (element === null || element === void 0 ? void 0 : element.shadowRoot) {
+        forceUpdate(element);
+      }
+    }
+  };
+  const clickHandler = (event) => {
+    if (!isActive) {
+      return;
+    }
+    if (hasJustReleasedEnter) {
+      hasJustReleasedEnter = false;
+      return;
+    }
+    event.stopImmediatePropagation();
+  };
+  eventHandlers.set(element, {
+    keydownHandler: keydownHandler,
+    keyupHandler: keyupHandler,
+    clickHandler: clickHandler,
+  });
+  element.addEventListener('keydown', keydownHandler);
+  element.addEventListener('keyup', keyupHandler);
+  element.addEventListener('click', clickHandler, true);
+}
+export function removeEnterClickable(element) {
+  const callBacks = eventHandlers.get(element);
+  if (!callBacks || !eventHandlers.has(element)) {
+    return;
+  }
+  element.removeEventListener('keydown', callBacks.keydownHandler);
+  element.removeEventListener('keyup', callBacks.keyupHandler);
+  element.removeEventListener('click', callBacks.clickHandler, true);
+  eventHandlers.delete(element);
+}
+//# sourceMappingURL=makeEnterClickable.js.map

package/dist/collection/util/makeEnterClickable.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"makeEnterClickable.js","sourceRoot":"","sources":["../../src/util/makeEnterClickable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,aAAa,GAAoC,IAAI,OAAO,EAAE,CAAC;AAErE;;;;GAIG;AACH,wDAAwD;AACxD,MAAM,UAAU,kBAAkB,CAAC,OAAoB;EACnD,IAAI,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC5B,OAAO;GACV;EAED,IAAI,QAAQ,GAAG,KAAK,CAAC;EACrB,IAAI,oBAAoB,GAAG,IAAI,CAAC;EAEhC,MAAM,cAAc,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC5C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,QAAQ,EAAE;MACpC,QAAQ,GAAG,IAAI,CAAC;MAEhB,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAE;QACrB,WAAW,CAAC,OAAO,CAAC,CAAC;OACxB;KACJ;EACL,CAAC,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC1C,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,QAAQ,EAAE;MACnC,QAAQ,GAAG,KAAK,CAAC;MACjB,oBAAoB,GAAG,IAAI,CAAC;MAE5B,IAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAE;QACrB,WAAW,CAAC,OAAO,CAAC,CAAC;OACxB;KACJ;EACL,CAAC,CAAC;EAEF,MAAM,YAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;IACvC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,oBAAoB,EAAE;MACtB,oBAAoB,GAAG,KAAK,CAAC;MAE7B,OAAO;KACV;IAED,KAAK,CAAC,wBAAwB,EAAE,CAAC;EACrC,CAAC,CAAC;EAEF,aAAa,CAAC,GAAG,CAAC,OAAO,EAAE;IACvB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,YAAY,EAAE,YAAY;GAC7B,CAAC,CAAC;EAEH,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;EACpD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;EAChD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,OAAoB;EACrD,MAAM,SAAS,GAAc,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;EAExD,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;IAC3C,OAAO;GACV;EAED,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;EACjE,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;EAC7D,OAAO,CAAC,mBAAmB,CAAC,OAAO,EAAE,SAAS,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;EAEnE,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import { forceUpdate } from '@stencil/core';\n\nconst eventHandlers: WeakMap<HTMLElement, CallBacks> = new WeakMap();\n\n/**\n * Overrides the default browser behavior for clickable elements\n * When focused and pressing down enter, avoids calling onClick repeatedly\n * @param {HTMLElement} element the clickable element\n */\n// eslint-disable-next-line sonarjs/cognitive-complexity\nexport function makeEnterClickable(element: HTMLElement) {\n if (eventHandlers.has(element)) {\n return;\n }\n\n let isActive = false;\n let hasJustReleasedEnter = true;\n\n const keydownHandler = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && !isActive) {\n isActive = true;\n\n if (element?.shadowRoot) {\n forceUpdate(element);\n }\n }\n };\n\n const keyupHandler = (event: KeyboardEvent) => {\n if (event.key === 'Enter' && isActive) {\n isActive = false;\n hasJustReleasedEnter = true;\n\n if (element?.shadowRoot) {\n forceUpdate(element);\n }\n }\n };\n\n const clickHandler = (event: MouseEvent) => {\n if (!isActive) {\n return;\n }\n\n if (hasJustReleasedEnter) {\n hasJustReleasedEnter = false;\n\n return;\n }\n\n event.stopImmediatePropagation();\n };\n\n eventHandlers.set(element, {\n keydownHandler: keydownHandler,\n keyupHandler: keyupHandler,\n clickHandler: clickHandler,\n });\n\n element.addEventListener('keydown', keydownHandler);\n element.addEventListener('keyup', keyupHandler);\n element.addEventListener('click', clickHandler, true);\n}\n\nexport function removeEnterClickable(element: HTMLElement) {\n const callBacks: CallBacks = eventHandlers.get(element);\n\n if (!callBacks || !eventHandlers.has(element)) {\n return;\n }\n\n element.removeEventListener('keydown', callBacks.keydownHandler);\n element.removeEventListener('keyup', callBacks.keyupHandler);\n element.removeEventListener('click', callBacks.clickHandler, true);\n\n eventHandlers.delete(element);\n}\n\ninterface CallBacks {\n keydownHandler: (arg: KeyboardEvent) => void;\n keyupHandler: (arg: KeyboardEvent) => void;\n clickHandler: (arg: MouseEvent) => void;\n}\n"]}

package/dist/collection/util/random-string.js CHANGED Viewed

@@ -1,4 +1,12 @@
 export const createRandomString = () => {
+  var _a;
+  if (!('crypto' in window) ||
+    typeof ((_a = window.crypto) === null || _a === void 0 ? void 0 : _a.randomUUID) !== 'function') {
+    return legacyCreateRandomString();
+  }
+  return 'a_' + crypto.randomUUID(); // ids must start with letters
+};
+function legacyCreateRandomString() {
   const USE_HEX = 36;
   const SKIP_LEADING_ZERODOT = 2;
   const ASCII_A = 97;
@@ -6,5 +14,5 @@ export const createRandomString = () => {
   return (String.fromCharCode(ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)) +
     Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +
     Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT));
-};
+}
 //# sourceMappingURL=random-string.js.map

package/dist/collection/util/random-string.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"random-string.js","sourceRoot":"","sources":["../../src/util/random-string.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;EACnC,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,oBAAoB,GAAG,CAAC,CAAC;EAC/B,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,iBAAiB,GAAG,EAAE,CAAC;EAE7B,OAAO,CACH,MAAM,CAAC,YAAY,CACf,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAC1D;IACD,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAC/D,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAClE,CAAC;AACN,CAAC~~,CAAC~~","sourcesContent":["export const createRandomString = () => {\n const USE_HEX = 36;\n const SKIP_LEADING_ZERODOT = 2;\n const ASCII_A = 97;\n const NUMBER_OF_LETTERS = 26;\n\n return (\n String.fromCharCode(\n ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)\n ) +\n Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +\n Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT)\n );\n};\n"]}
1	+ {"version":3,"file":"random-string.js","sourceRoot":"","sources":["../../src/util/random-string.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;;EACnC,IACI,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC;IACrB,OAAO,CAAA,MAAA,MAAM,CAAC,MAAM,0CAAE,UAAU,CAAA,KAAK,UAAU,EACjD;IACE,OAAO,wBAAwB,EAAE,CAAC;GACrC;EAED,OAAO,IAAI,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,8BAA8B;AACrE,CAAC,CAAC;AAEF,SAAS,wBAAwB;EAC7B,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,oBAAoB,GAAG,CAAC,CAAC;EAC/B,MAAM,OAAO,GAAG,EAAE,CAAC;EACnB,MAAM,iBAAiB,GAAG,EAAE,CAAC;EAE7B,OAAO,CACH,MAAM,CAAC,YAAY,CACf,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,iBAAiB,CAAC,CAC1D;IACD,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAC/D,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAClE,CAAC;AACN,CAAC","sourcesContent":["export const createRandomString = () => {\n if (\n !('crypto' in window) \|\|\n typeof window.crypto?.randomUUID !== 'function'\n ) {\n return legacyCreateRandomString();\n }\n\n return 'a_' + crypto.randomUUID(); // ids must start with letters\n};\n\nfunction legacyCreateRandomString() {\n const USE_HEX = 36;\n const SKIP_LEADING_ZERODOT = 2;\n const ASCII_A = 97;\n const NUMBER_OF_LETTERS = 26;\n\n return (\n String.fromCharCode(\n ASCII_A + Math.floor(Math.random() * NUMBER_OF_LETTERS)\n ) +\n Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT) +\n Math.random().toString(USE_HEX).substring(SKIP_LEADING_ZERODOT)\n );\n}\n"]}

package/dist/esm/{checkbox.template-c838ee7b.js → checkbox.template-c2d0fa10.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { h } from './index-9bd6d7c6.js';
+import { h } from './index-232e9616.js';
 const CheckboxTemplate = (props) => {
   const inputProps = {};
@@ -15,7 +15,7 @@ const CheckboxTemplate = (props) => {
           '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("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" })),
@@ -27,16 +27,16 @@ const CheckboxTemplate = (props) => {
           '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 }));
 };
 export { CheckboxTemplate as C };
-//# sourceMappingURL=checkbox.template-c838ee7b.js.map
+//# sourceMappingURL=checkbox.template-c2d0fa10.js.map

package/dist/esm/checkbox.template-c2d0fa10.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"checkbox.template-c2d0fa10.js","mappings":";;MAgBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,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,EAAE;AAEF,MAAM,UAAU,GAGX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACI,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,GAClC,EACJ;AACN,CAAC;;;;","names":[],"sources":["./src/components/checkbox/checkbox.template.tsx"],"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"],"version":3}

package/dist/esm/{index-9bd6d7c6.js → index-232e9616.js} RENAMED Viewed

@@ -1218,6 +1218,18 @@ const postUpdateComponent = (hostRef) => {
     // ( •_•)>⌐■-■
     // (⌐■_■)
 };
+const forceUpdate = (ref) => {
+    {
+        const hostRef = getHostRef(ref);
+        const isConnected = hostRef.$hostElement$.isConnected;
+        if (isConnected &&
+            (hostRef.$flags$ & (2 /* HOST_FLAGS.hasRendered */ | 16 /* HOST_FLAGS.isQueuedForUpdate */)) === 2 /* HOST_FLAGS.hasRendered */) {
+            scheduleUpdate(hostRef, false);
+        }
+        // Returns "true" when the forced update was successfully scheduled
+        return isConnected;
+    }
+};
 const appDidLoad = (who) => {
     // on appload
     // we have finish the first big initial render
@@ -1800,6 +1812,6 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
-export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, createEvent as c, forceUpdate as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-9bd6d7c6.js.map
+//# sourceMappingURL=index-232e9616.js.map