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/icon/icon.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import config from '../../global/config';
-import iconCache from '../../global/icon-cache';
+import iconCache from '../../global/icon-cache/factory';
 /**
  * The recommended icon library for use with Lime Elements is the Windows 10 set
  * from Icons8 (https://icons8.com/icons/windows). This set is included in the

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,~~yBAAyB~~,CAAC;~~AAGhD~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;KAIG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache';\nimport { IconSize } from './icon.types';\n\n/*\n The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n \n The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n \n ### Setup\n * To use @lundalogik/lime-icons8, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n \n If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n \n If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n \n ```\n * <base href=\"/my/parent/path/\">\n * ```\n \n If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n \n ### Lime icons\n * There are icons included in the @lundalogik/lime-icons8 package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n \n ### Icon Finder\n \n Search for an icon and click on it to copy its name to clipboard.\n \n <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n /\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /\n Size of the icon\n /\n @Prop({ reflect: true })\n public size: IconSize;\n\n /\n Name of the icon\n /\n @Prop({ reflect: true })\n public name: string;\n\n /\n Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n /\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined \|\| name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /\n Load the SVG data for the icon from the icon cache\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n /\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}
1	+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;KAIG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from './icon.types';\n\n/*\n The recommended icon library for use with Lime Elements is the Windows 10 set\n * from Icons8 (https://icons8.com/icons/windows). This set is included in the\n * relevant Lime products. If you are using Lime Elements in a non-Lime product,\n * you will have to supply your own icons.\n \n The size and color of the icon is set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n \n ### Setup\n * To use @lundalogik/lime-icons8, the `/assets` folder from\n * __@lundalogik/lime-icons8__ must be made available on the webserver.\n * To use a different icon set, the icons must be placed in a folder structure\n * that looks like this: `assets/icons/<name-of-icon>.svg`\n \n If `assets` is placed in the root, no other setup is needed. The icons will\n * be fetched with a relative URL from `/assets/icons/<name-of-icon>.svg`.\n \n If `assets` is placed in a sub-folder somewhere, the easiest way to make the\n * icons available is to use the HTML `base` element:\n \n ```\n * <base href=\"/my/parent/path/\">\n * ```\n \n If this is not enough, or if the `base` element is already in use for\n * something else, a global icon path can be configured with the `limel-config`\n * element:\n * ```\n * <limel-config config={{iconPath: '/my/parent/path/'}} />\n * ```\n \n ### Lime icons\n * There are icons included in the @lundalogik/lime-icons8 package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n * :::note\n * Some of the `-lime-` icons have multiple colors and use our own CSS variables\n * instead of HEX or RGB values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n \n ### Icon Finder\n \n Search for an icon and click on it to copy its name to clipboard.\n \n <limel-example-icon-finder />\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n /\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /\n Size of the icon\n /\n @Prop({ reflect: true })\n public size: IconSize;\n\n /\n Name of the icon\n /\n @Prop({ reflect: true })\n public name: string;\n\n /\n Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n /\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined \|\| name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /\n Load the SVG data for the icon from the icon cache\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n /\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { makeEnterClickable, removeEnterClickable, } from 'src/util/make-enter-clickable';
 /**
  * @exampleComponent limel-example-icon-button-basic
  * @exampleComponent limel-example-icon-button-disabled
@@ -16,6 +17,12 @@ export class IconButton {
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAE5D~~;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,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,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\n\n/*\n @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n /\n@Component({\n tag: 'limel-icon-button',\n shadow: true,\n styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n /\n The icon to display.\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to give the button our standard \"elevated\" look, lifting\n * it off the flat layout.\n /\n @Prop({ reflect: true })\n public elevated = false;\n\n /\n The text to show to screenreaders and other assistive tech.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n @Element()\n private host: HTMLLimelIconButtonElement;\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('.mdc-icon-button');\n if (!element) {\n return;\n }\n }\n\n public render() {\n const buttonAttributes: { tabindex?: string } = {};\n if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <button\n class=\"mdc-icon-button\"\n disabled={this.disabled}\n aria-label={this.label}\n title={this.label}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n </button>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,+BAA+B,CAAC;AAEvC;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;EACtB,CAAC;EAEO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;EACL,CAAC;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IACnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,OAAO,CACH,4BACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB;MAEpB,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,CACZ,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/*\n @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n /\n@Component({\n tag: 'limel-icon-button',\n shadow: true,\n styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n /\n The icon to display.\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to give the button our standard \"elevated\" look, lifting\n * it off the flat layout.\n /\n @Prop({ reflect: true })\n public elevated = false;\n\n /\n The text to show to screenreaders and other assistive tech.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n @Element()\n private host: HTMLLimelIconButtonElement;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n if (!element) {\n return;\n }\n }\n\n public render() {\n const buttonAttributes: { tabindex?: string } = {};\n if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <button\n class=\"mdc-icon-button\"\n disabled={this.disabled}\n aria-label={this.label}\n title={this.label}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n </button>\n );\n }\n}\n"]}

package/dist/collection/components/linear-progress/linear-progress.js CHANGED Viewed

@@ -30,6 +30,9 @@ export class LinearProgress {
     }
   }
   render() {
+    if (!this.isFinite(this.value)) {
+      return;
+    }
     const classList = {
       'mdc-linear-progress': true,
       'mdc-linear-progress--indeterminate': this.indeterminate,
@@ -37,11 +40,14 @@ export class LinearProgress {
     return (h("div", { role: "progressbar", class: classList, "aria-label": "Progress Bar", "aria-valuemin": "0", "aria-valuemax": "1", "aria-valuenow": this.value }, h("div", { class: "mdc-linear-progress__buffer" }, h("div", { class: "mdc-linear-progress__buffer-bar" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__primary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" })), h("div", { class: "mdc-linear-progress__bar mdc-linear-progress__secondary-bar" }, h("span", { class: "mdc-linear-progress__bar-inner" }))));
   }
   watchValue(newValue) {
-    if (!this.mdcLinearProgress) {
+    if (!this.mdcLinearProgress || !this.isFinite(newValue)) {
       return;
     }
     this.mdcLinearProgress.progress = newValue;
   }
+  isFinite(value) {
+    return Number.isFinite(value);
+  }
   static get is() { return "limel-linear-progress"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -71,7 +77,7 @@ export class LinearProgress {
           "text": "The value of the progress bar. Should be between `0` and `1`."
         },
         "attribute": "value",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "0"
       },
       "indeterminate": {
@@ -89,7 +95,7 @@ export class LinearProgress {
           "text": "Puts the progress bar in an indeterminate state"
         },
         "attribute": "indeterminate",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       }
     };

package/dist/collection/components/linear-progress/linear-progress.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAMH,MAAM,OAAO,cAAc;;iBAKA,CAAC;yBAMQ,KAAK;;EAO9B,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,sBAAsB,CACzB,CAAC;IACF,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;EACjD,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;KACpC;EACL,CAAC;EAEM,MAAM;IACT,MAAM,SAAS,GAAG;MACd,qBAAqB,EAAE,IAAI;MAC3B,oCAAoC,EAAE,IAAI,CAAC,aAAa;KAC3D,CAAC;IAEF,OAAO,CACH,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,cAAc,mBACX,GAAG,mBACH,GAAG,mBACF,IAAI,CAAC,KAAK;MAEzB,WAAK,KAAK,EAAC,6BAA6B;QACpC,WAAK,KAAK,EAAC,iCAAiC,GAAO,CACjD;MACN,WAAK,KAAK,EAAC,2DAA2D;QAClE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C;MACN,WAAK,KAAK,EAAC,6DAA6D;QACpE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C,CACJ,CACT,CAAC;EACN,CAAC;EAGS,UAAU,CAAC,QAAQ;IACzB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;~~MACzB~~,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { MDCLinearProgress } from '@material/linear-progress';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/*\n @exampleComponent limel-example-linear-progress\n * @exampleComponent limel-example-linear-progress-color\n * @exampleComponent limel-example-linear-progress-indeterminate\n /\n@Component({\n tag: 'limel-linear-progress',\n shadow: true,\n styleUrl: 'linear-progress.scss',\n})\nexport class LinearProgress {\n /\n The value of the progress bar. Should be between `0` and `1`.\n /\n @Prop()\n public value: number = 0;\n\n /\n Puts the progress bar in an indeterminate state\n */\n @Prop()\n public indeterminate: boolean = false;\n\n @Element()\n private host: HTMLLimelLinearProgressElement;\n\n private mdcLinearProgress: MDCLinearProgress;\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-linear-progress'\n );\n if (!element) {\n return;\n }\n\n this.mdcLinearProgress = new MDCLinearProgress(element);\n this.mdcLinearProgress.progress = this.value;\n }\n\n public disconnectedCallback() {\n if (this.mdcLinearProgress) {\n this.mdcLinearProgress.destroy();\n }\n }\n\n public render() {\n const classList = {\n 'mdc-linear-progress': true,\n 'mdc-linear-progress--indeterminate': this.indeterminate,\n };\n\n return (\n <div\n role=\"progressbar\"\n class={classList}\n aria-label=\"Progress Bar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={this.value}\n >\n <div class=\"mdc-linear-progress__buffer\">\n <div class=\"mdc-linear-progress__buffer-bar\"></div>\n </div>\n <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n <span class=\"mdc-linear-progress__bar-inner\" />\n </div>\n <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n <span class=\"mdc-linear-progress__bar-inner\" />\n </div>\n </div>\n );\n }\n\n @Watch('value')\n protected watchValue(newValue) {\n if (!this.mdcLinearProgress) {\n return;\n }\n\n this.mdcLinearProgress.progress = newValue;\n }\n}\n"]}
1	+ {"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["../../../src/components/linear-progress/linear-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE;;;;GAIG;AAMH,MAAM,OAAO,cAAc;;iBAKA,CAAC;yBAMQ,KAAK;;EAO9B,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,sBAAsB,CACzB,CAAC;IACF,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,iBAAiB,CAAC,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC;EACjD,CAAC;EAEM,oBAAoB;IACvB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;KACpC;EACL,CAAC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MAC5B,OAAO;KACV;IAED,MAAM,SAAS,GAAG;MACd,qBAAqB,EAAE,IAAI;MAC3B,oCAAoC,EAAE,IAAI,CAAC,aAAa;KAC3D,CAAC;IAEF,OAAO,CACH,WACI,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,SAAS,gBACL,cAAc,mBACX,GAAG,mBACH,GAAG,mBACF,IAAI,CAAC,KAAK;MAEzB,WAAK,KAAK,EAAC,6BAA6B;QACpC,WAAK,KAAK,EAAC,iCAAiC,GAAO,CACjD;MACN,WAAK,KAAK,EAAC,2DAA2D;QAClE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C;MACN,WAAK,KAAK,EAAC,6DAA6D;QACpE,YAAM,KAAK,EAAC,gCAAgC,GAAG,CAC7C,CACJ,CACT,CAAC;EACN,CAAC;EAGS,UAAU,CAAC,QAAQ;IACzB,IAAI,CAAC,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MACrD,OAAO;KACV;IAED,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC/C,CAAC;EAEO,QAAQ,CAAC,KAAc;IAC3B,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { MDCLinearProgress } from '@material/linear-progress';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\n/*\n @exampleComponent limel-example-linear-progress\n * @exampleComponent limel-example-linear-progress-color\n * @exampleComponent limel-example-linear-progress-indeterminate\n /\n@Component({\n tag: 'limel-linear-progress',\n shadow: true,\n styleUrl: 'linear-progress.scss',\n})\nexport class LinearProgress {\n /\n The value of the progress bar. Should be between `0` and `1`.\n /\n @Prop({ reflect: true })\n public value: number = 0;\n\n /\n Puts the progress bar in an indeterminate state\n */\n @Prop({ reflect: true })\n public indeterminate: boolean = false;\n\n @Element()\n private host: HTMLLimelLinearProgressElement;\n\n private mdcLinearProgress: MDCLinearProgress;\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-linear-progress'\n );\n if (!element) {\n return;\n }\n\n this.mdcLinearProgress = new MDCLinearProgress(element);\n this.mdcLinearProgress.progress = this.value;\n }\n\n public disconnectedCallback() {\n if (this.mdcLinearProgress) {\n this.mdcLinearProgress.destroy();\n }\n }\n\n public render() {\n if (!this.isFinite(this.value)) {\n return;\n }\n\n const classList = {\n 'mdc-linear-progress': true,\n 'mdc-linear-progress--indeterminate': this.indeterminate,\n };\n\n return (\n <div\n role=\"progressbar\"\n class={classList}\n aria-label=\"Progress Bar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={this.value}\n >\n <div class=\"mdc-linear-progress__buffer\">\n <div class=\"mdc-linear-progress__buffer-bar\"></div>\n </div>\n <div class=\"mdc-linear-progress__bar mdc-linear-progress__primary-bar\">\n <span class=\"mdc-linear-progress__bar-inner\" />\n </div>\n <div class=\"mdc-linear-progress__bar mdc-linear-progress__secondary-bar\">\n <span class=\"mdc-linear-progress__bar-inner\" />\n </div>\n </div>\n );\n }\n\n @Watch('value')\n protected watchValue(newValue) {\n if (!this.mdcLinearProgress \|\| !this.isFinite(newValue)) {\n return;\n }\n\n this.mdcLinearProgress.progress = newValue;\n }\n\n private isFinite(value: unknown) {\n return Number.isFinite(value);\n }\n}\n"]}

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

@@ -283,7 +283,7 @@ export class List {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fired when a new value has been selected from the list. Only fired if selectable is set to true"
+          "text": "Fired when a new value has been selected from the list.\nOnly fired if `type` is set to `selectable`, `radio` or `checkbox`."
         },
         "complexType": {
           "original": "ListItem | ListItem[]",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n IconSize,\n ListItem,\n ListSeparator,\n ListType,\n} from '@limetech/lime-elements';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/*\n @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n /\n@Component({\n tag: 'limel-list',\n shadow: true,\n styleUrl: 'list.scss',\n})\nexport class List {\n /\n List of items to display\n /\n @Prop()\n public items: Array<ListItem \| ListSeparator>;\n\n /\n Set to `true` if the list should display larger icons with a background\n /\n @Prop()\n public badgeIcons: boolean;\n\n /\n Size of the icons in the list\n /\n @Prop()\n public iconSize: IconSize = 'small';\n\n /\n The type of the list, omit to get a regular list. Available types are:\n * `selectable`: regular list with single selection.\n * `radio`: radio button list with single selection.\n * `checkbox`: checkbox list with multiple selection.\n /\n @Prop()\n public type: ListType;\n\n /\n By default, lists will display 3 lines of text, and then truncate the rest.\n * Consumers can increase or decrease this number by specifying\n * `maxLinesSecondaryText`. If consumer enters zero or negative\n * numbers we default to 1; and if they type decimals we round up.\n /\n // eslint-disable-next-line no-magic-numbers\n @Prop() maxLinesSecondaryText: number = 3;\n\n @Element()\n private element: HTMLLimelListElement;\n\n private config: ListRendererConfig;\n private listRenderer = new ListRenderer();\n private mdcList: MDCList;\n private multiple: boolean;\n private selectable: boolean;\n\n /\n Fired when a new value has been selected from the list. Only fired if selectable is set to true\n /\n @Event()\n private change: EventEmitter<ListItem \| ListItem[]>;\n\n /\n Fired when an action has been selected from the action menu of a list item\n */\n @Event()\n protected select: EventEmitter<ListItem \| ListItem[]>;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n }\n\n public render() {\n this.config = {\n badgeIcons: this.badgeIcons,\n type: this.type,\n iconSize: this.iconSize,\n };\n let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n if (this.maxLinesSecondaryText < 1) {\n maxLinesSecondaryText = 1;\n }\n\n const html = this.listRenderer.render(this.items, this.config);\n\n return (\n <Host\n style={{\n '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n }}\n >\n {html}\n </Host>\n );\n }\n\n @Watch('type')\n protected handleType() {\n this.setupListeners();\n }\n\n @Watch('items')\n protected itemsChanged() {\n if (!this.mdcList) {\n return;\n }\n\n const listItems = this.items.filter(this.isListItem);\n\n if (this.multiple) {\n this.mdcList.selectedIndex = listItems\n .filter((item: ListItem) => item.selected)\n .map((item: ListItem) => listItems.indexOf(item));\n } else {\n const selectedIndex = listItems.findIndex(\n (item: ListItem) => item.selected\n );\n\n if (selectedIndex === -1) {\n this.mdcList.initializeListType();\n } else {\n this.mdcList.selectedIndex = selectedIndex;\n }\n }\n }\n\n private setup = () => {\n this.setupList();\n\n this.setupListeners();\n };\n\n private setupList = () => {\n const element = this.element.shadowRoot.querySelector(\n '.mdc-deprecated-list'\n );\n if (!element) {\n return;\n }\n\n this.mdcList = new MDCList(element);\n this.mdcList.hasTypeahead = true;\n };\n\n private setupListeners = () => {\n if (!this.mdcList) {\n return;\n }\n\n this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n this.type\n );\n this.multiple = this.type === 'checkbox';\n\n if (!this.selectable) {\n return;\n }\n\n this.mdcList.listen(ACTION_EVENT, this.handleAction);\n this.mdcList.singleSelection = !this.multiple;\n };\n\n private teardown = () => {\n this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n this.mdcList?.destroy();\n };\n\n private handleAction = (event: MDCListActionEvent) => {\n if (!this.multiple) {\n this.handleSingleSelect(event.detail.index);\n\n return;\n }\n\n this.handleMultiSelect(event.detail.index);\n };\n\n private handleSingleSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItem: ListItem = listItems.find((item: ListItem) => {\n return !!item.selected;\n });\n\n if (selectedItem) {\n this.change.emit({ ...selectedItem, selected: false });\n }\n\n if (listItems[index] !== selectedItem) {\n this.change.emit({ ...listItems[index], selected: true });\n }\n };\n\n private handleMultiSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItems: ListItem[] = listItems\n .filter((item: ListItem, listIndex: number) => {\n if (listIndex === index) {\n // This is the item that was selected or deselected,\n // so we negate its previous selection status.\n return !item.selected;\n }\n\n // This is an item that didn't change, so we keep its selection status.\n return item.selected;\n })\n .map((item: ListItem) => {\n return { ...item, selected: true };\n });\n\n this.change.emit(selectedItems);\n };\n\n private isListItem = (item: ListItem): boolean => {\n return !('separator' in item);\n };\n}\n"]}
1	+ {"version":3,"file":"list.js","sourceRoot":"","sources":["../../../src/components/list/list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n IconSize,\n ListItem,\n ListSeparator,\n ListType,\n} from '@limetech/lime-elements';\nimport { MDCList, MDCListActionEvent } from '@material/list';\nimport { strings as listStrings } from '@material/list/constants';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { ListRenderer } from './list-renderer';\nimport { ListRendererConfig } from './list-renderer-config';\n\nconst { ACTION_EVENT } = listStrings;\n\n/*\n @exampleComponent limel-example-list\n * @exampleComponent limel-example-list-secondary\n * @exampleComponent limel-example-list-selectable\n * @exampleComponent limel-example-list-icons\n * @exampleComponent limel-example-list-badge-icons\n * @exampleComponent limel-example-list-checkbox\n * @exampleComponent limel-example-list-checkbox-icons\n * @exampleComponent limel-example-list-radio-button\n * @exampleComponent limel-example-list-radio-button-icons\n * @exampleComponent limel-example-list-action\n * @exampleComponent limel-example-list-striped\n * @exampleComponent limel-example-list-badge-icons-with-multiple-lines\n * @exampleComponent limel-example-list-grid\n * @exampleComponent limel-example-list-primary-component\n /\n@Component({\n tag: 'limel-list',\n shadow: true,\n styleUrl: 'list.scss',\n})\nexport class List {\n /\n List of items to display\n /\n @Prop()\n public items: Array<ListItem \| ListSeparator>;\n\n /\n Set to `true` if the list should display larger icons with a background\n /\n @Prop()\n public badgeIcons: boolean;\n\n /\n Size of the icons in the list\n /\n @Prop()\n public iconSize: IconSize = 'small';\n\n /\n The type of the list, omit to get a regular list. Available types are:\n * `selectable`: regular list with single selection.\n * `radio`: radio button list with single selection.\n * `checkbox`: checkbox list with multiple selection.\n /\n @Prop()\n public type: ListType;\n\n /\n By default, lists will display 3 lines of text, and then truncate the rest.\n * Consumers can increase or decrease this number by specifying\n * `maxLinesSecondaryText`. If consumer enters zero or negative\n * numbers we default to 1; and if they type decimals we round up.\n /\n // eslint-disable-next-line no-magic-numbers\n @Prop() maxLinesSecondaryText: number = 3;\n\n @Element()\n private element: HTMLLimelListElement;\n\n private config: ListRendererConfig;\n private listRenderer = new ListRenderer();\n private mdcList: MDCList;\n private multiple: boolean;\n private selectable: boolean;\n\n /\n Fired when a new value has been selected from the list.\n * Only fired if `type` is set to `selectable`, `radio` or `checkbox`.\n /\n @Event()\n private change: EventEmitter<ListItem \| ListItem[]>;\n\n /\n Fired when an action has been selected from the action menu of a list item\n */\n @Event()\n protected select: EventEmitter<ListItem \| ListItem[]>;\n\n public connectedCallback() {\n this.setup();\n }\n\n public disconnectedCallback() {\n this.teardown();\n }\n\n public componentDidLoad() {\n this.setup();\n }\n\n public render() {\n this.config = {\n badgeIcons: this.badgeIcons,\n type: this.type,\n iconSize: this.iconSize,\n };\n let maxLinesSecondaryText = +this.maxLinesSecondaryText?.toFixed();\n if (this.maxLinesSecondaryText < 1) {\n maxLinesSecondaryText = 1;\n }\n\n const html = this.listRenderer.render(this.items, this.config);\n\n return (\n <Host\n style={{\n '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,\n }}\n >\n {html}\n </Host>\n );\n }\n\n @Watch('type')\n protected handleType() {\n this.setupListeners();\n }\n\n @Watch('items')\n protected itemsChanged() {\n if (!this.mdcList) {\n return;\n }\n\n const listItems = this.items.filter(this.isListItem);\n\n if (this.multiple) {\n this.mdcList.selectedIndex = listItems\n .filter((item: ListItem) => item.selected)\n .map((item: ListItem) => listItems.indexOf(item));\n } else {\n const selectedIndex = listItems.findIndex(\n (item: ListItem) => item.selected\n );\n\n if (selectedIndex === -1) {\n this.mdcList.initializeListType();\n } else {\n this.mdcList.selectedIndex = selectedIndex;\n }\n }\n }\n\n private setup = () => {\n this.setupList();\n\n this.setupListeners();\n };\n\n private setupList = () => {\n const element = this.element.shadowRoot.querySelector(\n '.mdc-deprecated-list'\n );\n if (!element) {\n return;\n }\n\n this.mdcList = new MDCList(element);\n this.mdcList.hasTypeahead = true;\n };\n\n private setupListeners = () => {\n if (!this.mdcList) {\n return;\n }\n\n this.mdcList.unlisten(ACTION_EVENT, this.handleAction);\n\n this.selectable = ['selectable', 'radio', 'checkbox'].includes(\n this.type\n );\n this.multiple = this.type === 'checkbox';\n\n if (!this.selectable) {\n return;\n }\n\n this.mdcList.listen(ACTION_EVENT, this.handleAction);\n this.mdcList.singleSelection = !this.multiple;\n };\n\n private teardown = () => {\n this.mdcList?.unlisten(ACTION_EVENT, this.handleAction);\n this.mdcList?.destroy();\n };\n\n private handleAction = (event: MDCListActionEvent) => {\n if (!this.multiple) {\n this.handleSingleSelect(event.detail.index);\n\n return;\n }\n\n this.handleMultiSelect(event.detail.index);\n };\n\n private handleSingleSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItem: ListItem = listItems.find((item: ListItem) => {\n return !!item.selected;\n });\n\n if (selectedItem) {\n this.change.emit({ ...selectedItem, selected: false });\n }\n\n if (listItems[index] !== selectedItem) {\n this.change.emit({ ...listItems[index], selected: true });\n }\n };\n\n private handleMultiSelect = (index: number) => {\n const listItems = this.items.filter(this.isListItem) as ListItem[];\n if (listItems[index].disabled) {\n return;\n }\n\n const selectedItems: ListItem[] = listItems\n .filter((item: ListItem, listIndex: number) => {\n if (listIndex === index) {\n // This is the item that was selected or deselected,\n // so we negate its previous selection status.\n return !item.selected;\n }\n\n // This is an item that didn't change, so we keep its selection status.\n return item.selected;\n })\n .map((item: ListItem) => {\n return { ...item, selected: true };\n });\n\n this.change.emit(selectedItems);\n };\n\n private isListItem = (item: ListItem): boolean => {\n return !('separator' in item);\n };\n}\n"]}

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

@@ -23,23 +23,10 @@ import { createPopper, } from '@popperjs/core';
  * `connectedCallback`.
  * @slot - Content to put inside the portal
  * @private
- * @exampleComponent limel-example-portal
+ * @exampleComponent limel-example-portal-basic
  */
 /* eslint-enable jsdoc/check-indentation */
 export class Portal {
-  onVisible() {
-    if (!this.visible) {
-      this.hideContainer();
-      this.styleContainer();
-      this.destroyPopper();
-      return;
-    }
-    this.styleContainer();
-    this.createPopper();
-    requestAnimationFrame(() => {
-      this.showContainer();
-    });
-  }
   constructor() {
     this.loaded = false;
     this.openDirection = 'bottom';
@@ -49,6 +36,7 @@ export class Portal {
     this.parent = document.body;
     this.inheritParentWidth = false;
     this.visible = false;
+    this.anchor = null;
     this.parents = new WeakMap();
   }
   disconnectedCallback() {
@@ -87,6 +75,19 @@ export class Portal {
   render() {
     return h("slot", null);
   }
+  onVisible() {
+    if (!this.visible) {
+      this.hideContainer();
+      this.styleContainer();
+      this.destroyPopper();
+      return;
+    }
+    this.styleContainer();
+    this.createPopper();
+    requestAnimationFrame(() => {
+      this.showContainer();
+    });
+  }
   createContainer() {
     const slot = this.host.shadowRoot.querySelector('slot');
     const content = (slot.assignedElements && slot.assignedElements()) || [];
@@ -158,7 +159,7 @@ export class Portal {
   }
   createPopper() {
     const config = this.createPopperConfig();
-    this.popperInstance = createPopper(this.host, this.container, config);
+    this.popperInstance = createPopper(this.anchor || this.host, this.container, config);
   }
   destroyPopper() {
     var _a;
@@ -259,7 +260,7 @@ export class Portal {
           "text": "Decides which direction the portal content should open."
         },
         "attribute": "open-direction",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'bottom'"
       },
       "position": {
@@ -277,7 +278,7 @@ export class Portal {
           "text": "Position of the content."
         },
         "attribute": "position",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "'absolute'"
       },
       "containerId": {
@@ -295,7 +296,7 @@ export class Portal {
           "text": "A unique ID."
         },
         "attribute": "container-id",
-        "reflect": false
+        "reflect": true
       },
       "containerStyle": {
         "type": "unknown",
@@ -348,7 +349,7 @@ export class Portal {
           "text": "Used to make a dropdown have the same width as the trigger, for example\nin `limel-picker`."
         },
         "attribute": "inherit-parent-width",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "visible": {
@@ -366,8 +367,28 @@ export class Portal {
           "text": "True if the content within the portal should be visible.\n\nIf the content is from within a dialog for instance, this can be set to\ntrue from false when the dialog opens to position the content properly."
         },
         "attribute": "visible",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
+      },
+      "anchor": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The element that the content should be positioned relative to.\nDefaults to the limel-portal element."
+        },
+        "defaultValue": "null"
       }
     };
   }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/* eslint-disable jsdoc/check-indentation /\n/\n The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n \n There are some caveats when using this component\n \n Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * Any styling that is applied to content from the parent will be lost, if the\n * content is just another web compoent it will work without any issues.\n * Alternatively, use the\n * `style=\"\"` html attribute.\n * Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal\n /\n/ eslint-enable jsdoc/check-indentation /\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /\n Decides which direction the portal content should open.\n /\n @Prop()\n public openDirection: OpenDirection = 'bottom';\n\n /\n Position of the content.\n /\n @Prop()\n public position: 'fixed' \| 'absolute' = 'absolute';\n\n /\n A unique ID.\n /\n @Prop()\n public containerId: string;\n\n /\n Dynamic styling that can be applied to the container holding the content.\n /\n @Prop()\n public containerStyle: object = {};\n\n /\n Parent element to move the content to.\n /\n @Prop()\n public parent: HTMLElement = document.body;\n\n /\n Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n /\n @Prop()\n public inheritParentWidth = false;\n\n /\n True if the content within the portal should be visible.\n \n If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n /\n @Prop()\n public visible = false;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n\n @Watch('visible')\n protected onVisible() {\n if (!this.visible) {\n this.hideContainer();\n this.styleContainer();\n this.destroyPopper();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private container: HTMLElement;\n\n private popperInstance: Instance;\n\n private loaded = false;\n\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n public render() {\n return <slot />;\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) \|\| [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.parent.appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.hideContainer();\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n this.container.style.opacity = '0';\n }\n\n private showContainer() {\n this.container.style.opacity = '1';\n }\n\n private styleContainer() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.visible) {\n this.container.style.display = 'block';\n } else {\n this.container.style.display = 'none';\n }\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n\n this.ensureContainerFitsInViewPort();\n\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private getContentWidth(element: HTMLElement \| Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('');\n\n return this.getContentWidth(elementContent);\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(this.host, this.container, config);\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private ensureContainerFitsInViewPort() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight \|\| 0,\n window.innerHeight \|\| 0\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n}\n"]}
1	+ {"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/* eslint-disable jsdoc/check-indentation /\n/\n The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n \n There are some caveats when using this component\n \n Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * Any styling that is applied to content from the parent will be lost, if the\n * content is just another web compoent it will work without any issues.\n * Alternatively, use the\n * `style=\"\"` html attribute.\n * Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n /\n/ eslint-enable jsdoc/check-indentation /\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /\n Decides which direction the portal content should open.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom';\n\n /\n Position of the content.\n /\n @Prop({ reflect: true })\n public position: 'fixed' \| 'absolute' = 'absolute';\n\n /\n A unique ID.\n /\n @Prop({ reflect: true })\n public containerId: string;\n\n /\n Dynamic styling that can be applied to the container holding the content.\n /\n @Prop()\n public containerStyle: object = {};\n\n /\n Parent element to move the content to.\n /\n @Prop()\n public parent: HTMLElement = document.body;\n\n /\n Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n /\n @Prop({ reflect: true })\n public inheritParentWidth = false;\n\n /\n True if the content within the portal should be visible.\n \n If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n /\n @Prop({ reflect: true })\n public visible = false;\n\n /\n The element that the content should be positioned relative to.\n * Defaults to the limel-portal element.\n /\n @Prop()\n public anchor?: HTMLElement = null;\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n private container: HTMLElement;\n private popperInstance: Instance;\n private loaded = false;\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n public render() {\n return <slot />;\n }\n\n @Watch('visible')\n protected onVisible() {\n if (!this.visible) {\n this.hideContainer();\n this.styleContainer();\n this.destroyPopper();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) \|\| [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.parent.appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.hideContainer();\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n this.container.style.opacity = '0';\n }\n\n private showContainer() {\n this.container.style.opacity = '1';\n }\n\n private styleContainer() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.visible) {\n this.container.style.display = 'block';\n } else {\n this.container.style.display = 'none';\n }\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n\n this.ensureContainerFitsInViewPort();\n\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private getContentWidth(element: HTMLElement \| Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('');\n\n return this.getContentWidth(elementContent);\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(\n this.anchor \|\| this.host,\n this.container,\n config\n );\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private ensureContainerFitsInViewPort() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight \|\| 0,\n window.innerHeight \|\| 0\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n}\n"]}