@limetech/lime-elements 37.0.0 → 37.1.0-next.10

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"]}
+{"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}

@@ -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

@@ -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}

@@ -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