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/cjs/limel-icon-button.cjs.entry.js CHANGED Viewed

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-38eb64b5.js');
+const makeEnterClickable = require('./make-enter-clickable-59460fd6.js');
 const iconButtonCss = ".mdc-icon-button{font-size:24px;width:48px;height:48px;padding:12px}.mdc-icon-button.mdc-icon-button--reduced-size{width:40px;height:40px;padding:8px}.mdc-icon-button.mdc-icon-button--reduced-size.mdc-icon-button--touch{margin-top:4px;margin-bottom:4px;margin-right:4px;margin-left:4px}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{color:rgba(0, 0, 0, 0.38);color:var(--mdc-theme-text-disabled-on-light, rgba(0, 0, 0, 0.38))}.mdc-icon-button svg,.mdc-icon-button img{width:24px;height:24px}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;text-decoration:none;cursor:pointer;user-select:none;overflow:visible}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%, -50%)}.mdc-icon-button:disabled{cursor:default;pointer-events:none}.mdc-icon-button--display-flex{align-items:center;display:inline-flex;justify-content:center}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--touch{margin-top:0px;margin-bottom:0px}.mdc-icon-button--on .mdc-icon-button__icon{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-icon-button .mdc-icon-button__ripple::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-icon-button .mdc-icon-button__ripple::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple::after{animation:mdc-ripple-fg-opacity-out 150ms;transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{top:var(--mdc-ripple-top, calc(50% - 50%));left:var(--mdc-ripple-left, calc(50% - 50%));width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-icon-button .mdc-icon-button__ripple::before,.mdc-icon-button .mdc-icon-button__ripple::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-icon-button:hover .mdc-icon-button__ripple::before,.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-opacity, 0.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after{transition:opacity 150ms linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.mdc-icon-button{transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--icon-background-color, transparent);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:2.25rem;width:2.25rem;padding:0.125rem;border-radius:50%}.mdc-icon-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.mdc-icon-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}:host([elevated]) .mdc-icon-button:not(:hover):not(:active):not(:focus-visible){box-shadow:var(--button-shadow-normal)}.mdc-icon-button:disabled{color:var(--mdc-theme-text-disabled-on-background)}.mdc-icon-button:focus-visible{box-shadow:var(--shadow-depth-8-focused);border-radius:50%}limel-icon{width:1.25rem;height:1.25rem}";
@@ -17,6 +18,12 @@ const IconButton = class {
   connectedCallback() {
     this.initialize();
   }
+  componentWillLoad() {
+    makeEnterClickable.makeEnterClickable(this.host);
+  }
+  disconnectedCallback() {
+    makeEnterClickable.removeEnterClickable(this.host);
+  }
   componentDidLoad() {
     this.initialize();
   }

package/dist/cjs/limel-icon-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-icon-button.entry.cjs.js","mappings":"~~;;;;;;~~AAAA,MAAM,aAAa,GAAG,u/LAAu/L;;~~MCchgM~~,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;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;GACJ;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,~~QACIA~~,kCACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,EACX;GACL;;;;;;;","names":["h"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '@material/icon-button/styles';\n\n/*\n @prop --icon-background-color: Background color of the button.\n /\n\n$height-of-limel-button: functions.pxToRem(36);\n\n:host([hidden]) {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\n.mdc-icon-button {\n @include mixins.is-flat-clickable(\n $background-color: var(--icon-background-color, transparent)\n );\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: $height-of-limel-button;\n width: $height-of-limel-button;\n padding: functions.pxToRem(2);\n border-radius: 50%;\n\n :host([elevated]) & {\n &:not(:hover):not(:active):not(:focus-visible) {\n box-shadow: var(--button-shadow-normal);\n }\n }\n\n &:disabled {\n color: var(--mdc-theme-text-disabled-on-background);\n }\n\n &:focus-visible {\n // only when non-pointer input is being used,\n // e.g. tabbed into using keyboard\n box-shadow: var(--shadow-depth-8-focused);\n border-radius: 50%;\n }\n}\n\nlimel-icon {\n width: functions.pxToRem(20);\n height: functions.pxToRem(20);\n}\n","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"],"version":3}
1	+ {"file":"limel-icon-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,u/LAAu/L;;MCkBhgM,UAAU;;;;oBAYD,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpBA,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;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;GACJ;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,QACIC,kCACI,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IACb,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,CACvC,EACX;GACL;;;;;;;","names":["makeEnterClickable","removeEnterClickable","h"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/functions';\n@use '@material/icon-button/styles';\n\n/*\n @prop --icon-background-color: Background color of the button.\n /\n\n$height-of-limel-button: functions.pxToRem(36);\n\n:host([hidden]) {\n display: none;\n}\n\n:host([disabled]) {\n pointer-events: none;\n}\n\n.mdc-icon-button {\n @include mixins.is-flat-clickable(\n $background-color: var(--icon-background-color, transparent)\n );\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n height: $height-of-limel-button;\n width: $height-of-limel-button;\n padding: functions.pxToRem(2);\n border-radius: 50%;\n\n :host([elevated]) & {\n &:not(:hover):not(:active):not(:focus-visible) {\n box-shadow: var(--button-shadow-normal);\n }\n }\n\n &:disabled {\n color: var(--mdc-theme-text-disabled-on-background);\n }\n\n &:focus-visible {\n // only when non-pointer input is being used,\n // e.g. tabbed into using keyboard\n box-shadow: var(--shadow-depth-8-focused);\n border-radius: 50%;\n }\n}\n\nlimel-icon {\n width: functions.pxToRem(20);\n height: functions.pxToRem(20);\n}\n","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"],"version":3}

package/dist/cjs/limel-icon.cjs.entry.js CHANGED Viewed

@@ -5,11 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-38eb64b5.js');
 const config = require('./config-c6520559.js');
-const CACHE_NAME = '@limetech/lime-elements/icons';
-class IconCache {
-  constructor() {
+class CacheStorageIconCache {
+  constructor(cache) {
     this.promises = {};
-    this.cache = caches.open(CACHE_NAME);
+    this.cache = cache;
   }
   /**
    * Get icon data from the cache
@@ -64,9 +63,92 @@ class IconCache {
     return `${iconPath}assets/icons/${name}.svg`;
   }
 }
-const iconCache = new IconCache();
-const iconCache$1 = (() => {
-  return iconCache;
+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;
+  }
+}
+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();
+  }
+}
+const iconCache = (() => {
+  return createIconCache();
 })();
 const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";
@@ -97,7 +179,7 @@ const Icon = class {
    * @returns {string} the icon SVG data
    */
   loadSvg(name) {
-    return iconCache$1.get(name, config.config.iconPath);
+    return iconCache.get(name, config.config.iconPath);
   }
   /*
    * There is no way to style external SVG files with CSS, i.e. SVGs loaded

package/dist/cjs/limel-icon.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-icon.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,+BAA+B,CAAC;MAEtC,SAAS;EAQlB;IAFQ,aAAQ,GAAkC,EAAE,CAAC;IAGjD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;GACxC;;;;;;;EAQM,MAAM,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;GACjC;EAEO,MAAM,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;GAC3B;;;;EAKO,MAAM,OAAO,CAAC,QAAkB;IACpC,IAAI,OAAO,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;;;IAIpC,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;GAClB;;;;EAKO,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;GACjE;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;GAChD;CACJ;AAED,MAAM,SAAS,GAAG,IAAI,SAAS,EAAE,CAAC;AAClC,oBAAe,CAAC;EACZ,OAAO,SAAS,CAAC;AACrB,CAAC,GAAG;;ACpFJ,MAAM,OAAO,GAAG,uhCAAuhC;;MC+D1hC,IAAI;;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5B;EAEM,MAAM;IACT,OAAOA,iBAAK,KAAK,EAAC,WAAW,GAAG,CAAC;GACpC;EAGS,MAAM,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;GAC3B;;;;;;EAOO,OAAO,CAAC,IAAY;IACxB,OAAOC,WAAS,CAAC,GAAG,CAAC,IAAI,EAAEC,aAAM,CAAC,QAAQ,CAAC,CAAC;GAC/C;;;;;;;EAQO,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;GACJ;;;;;;;;;;","names":["h","iconCache","config"],"sources":["./src/global/icon-cache.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["const CACHE_NAME = '@limetech/lime-elements/icons';\n\nexport class IconCache {\n /\n Cache of all loaded SVGs\n /\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor() {\n this.cache = caches.open(CACHE_NAME);\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\nconst iconCache = new IconCache();\nexport default (() => {\n return iconCache;\n})();\n","@use '../../style/functions';\n\n/\n @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n /\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n > div {\n margin: functions.pxToRem(4);\n }\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n > div {\n margin: functions.pxToRem(5);\n }\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n","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"],"version":3}
1	+ {"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","config"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"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","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","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","@use '../../style/functions';\n\n/\n @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n /\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n > div {\n margin: functions.pxToRem(4);\n }\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n > div {\n margin: functions.pxToRem(5);\n }\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n","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"],"version":3}

package/dist/cjs/limel-list_2.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-38eb64b5.js');
 const component = require('./component-66df95e7.js');
-const checkbox_template = require('./checkbox.template-5603ad4a.js');
+const checkbox_template = require('./checkbox.template-df6fc114.js');
 const dom = require('./dom-eb080f70.js');
 const keycodes = require('./keycodes-3949f425.js');
 require('./component-67144c1c.js');

package/dist/cjs/limel-list_2.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-list.limel-menu-surface.entry.cjs.js","mappings":"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","names":["h","index","CheckboxTemplate","listStrings","MDCList","Host","MDCMenuSurface","Corner","isDescendant","ESCAPE","ESCAPE_KEY_CODE","TAB","TAB_KEY_CODE"],"sources":["./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx","./src/components/menu-surface/menu-surface.scss?tag=limel-menu-surface&encapsulation=shadow","./src/components/menu-surface/menu-surface.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n RadioButtonTemplateProps\n> = (props) => {\n return (\n <div class=\"mdc-form-field\">\n <div\n class={`\n mdc-radio\n ${props.disabled ? 'mdc-radio--disabled' : ''}\n `}\n >\n <input\n class=\"mdc-radio__native-control\"\n type=\"radio\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled}\n onChange={props.onChange}\n />\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\" />\n <div class=\"mdc-radio__inner-circle\" />\n </div>\n </div>\n <label\n class={`${props.disabled ? 'disabled' : ''}`}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>\n );\n};\n","import { ListItem, ListSeparator, MenuItem } from '@limetech/lime-elements';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\n\nexport class ListRenderer {\n private defaultConfig: ListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: ListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<ListItem \| ListSeparator>,\n config: ListRendererConfig = {}\n ) {\n items = items \|\| [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n let role;\n switch (this.config.type) {\n case 'checkbox':\n role = 'group';\n break;\n case 'radio':\n role = 'radiogroup';\n break;\n default:\n role = 'listbox';\n }\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: selectableListTypes.includes(this.config.type),\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul class={classNames} role={role} aria-orientation=\"vertical\">\n {items.map(this.renderListItem)}\n </ul>\n );\n }\n\n /*\n Determine which ListItem should have the `tab-index` attribute set,\n * and return the index at which that ListItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n * @param {Array<ListItem \| ListSeparator>} items the items of the list, including any `ListSeparator`:s\n * @returns {number} the index as per the description\n /\n private getIndexForWhichToApplyTabIndex = (\n items: Array<ListItem \| ListSeparator>\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as ListItem<any>;\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined && !item.disabled) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /\n Render a single list item\n * @param {ListItem \| ListSeparator} item the item to render\n * @param {number} index the index the item had in the `items` array\n * @returns {HTMLElement} the list item\n /\n private renderListItem = (\n item: ListItem \| ListSeparator,\n index: number\n ) => {\n if ('separator' in item) {\n return <li class=\"mdc-deprecated-list-divider\" role=\"separator\" />;\n }\n\n if (['radio', 'checkbox'].includes(this.config.type)) {\n return this.renderVariantListItem(this.config, item, index);\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {item.icon ? this.renderIcon(this.config, item) : null}\n {this.getPrimaryComponent(item)}\n {this.renderText(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n {this.renderActionMenu(item.actions)}\n </li>\n );\n };\n\n private getPrimaryComponent(item: ListItem): Element {\n if (!this.hasPrimaryComponent(item)) {\n return;\n }\n\n const PrimaryComponent = item.primaryComponent.name;\n const props = item.primaryComponent.props;\n\n return <PrimaryComponent {...props} />;\n }\n\n private hasPrimaryComponent = (item: ListItem) => {\n return !!item?.primaryComponent?.name;\n };\n\n /\n Render the text of the list item\n * @param {ListItem} item the list item\n * @returns {HTMLElement \| string} the text for the list item\n /\n private renderText = (item: ListItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private isSimpleItem = (item: ListItem): boolean => {\n return !('secondaryText' in item);\n };\n\n /\n Render an icon for a list item\n * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function\n * @param {ListItem} item the list item\n * @returns {HTMLElement} the icon element\n /\n private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n const style: any = {};\n if (item.iconColor) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = item.iconColor;\n } else {\n style.color = item.iconColor;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={item.icon}\n style={style}\n size={config.iconSize}\n />\n );\n };\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem \| ListSeparator>) => {\n if (!actions \|\| actions.length === 0) {\n return;\n }\n\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={actions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n />\n </limel-menu>\n );\n };\n\n private renderVariantListItem = (\n config: ListRendererConfig,\n item: ListItem,\n index: number\n ) => {\n let itemTemplate;\n if (config.type === 'radio') {\n itemTemplate = (\n <RadioButtonTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n } else if (config.type === 'checkbox') {\n itemTemplate = (\n <CheckboxTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item__text': !item.secondaryText,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role={config.type}\n aria-checked={item.selected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderVariantListItemContent(config, item, itemTemplate)}\n </li>\n );\n };\n\n private renderVariantListItemContent = (\n config: ListRendererConfig,\n item: ListItem,\n itemTemplate: any\n ) => {\n if (this.hasIcons) {\n return [\n item.icon ? this.renderIcon(config, item) : null,\n this.getPrimaryComponent(item),\n this.renderText(item),\n <div class=\"mdc-deprecated-list-item__meta\">\n {itemTemplate}\n </div>,\n ];\n }\n\n return [\n <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n this.getPrimaryComponent(item),\n this.renderText(item),\n ];\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/\n @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items: Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n /\n\n:host(limel-list) {\n display: block;\n isolation: isolate;\n @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list {\n --mdc-theme-text-icon-on-background: var(\n --icon-color,\n rgb(var(--contrast-900))\n );\n margin: var(\n --list-margin,\n 0.25rem\n ); // added space to visualize keyboard-focused items\n padding: 0;\n border-radius: $list-border-radius;\n\n .mdc-deprecated-list-divider {\n border-bottom-color: rgb(var(--contrast-400));\n }\n\n .mdc-deprecated-list-item {\n transition: background-color 0.2s ease;\n box-sizing: border-box;\n z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n\n &:not(.mdc-deprecated-list-item--disabled) {\n &:hover {\n background-color: rgb(var(--contrast-300));\n z-index: 1;\n }\n }\n\n &.mdc-deprecated-list-item--disabled {\n cursor: not-allowed;\n\n limel-icon {\n opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n }\n }\n\n &:first-child {\n border-top-left-radius: $list-border-radius;\n border-top-right-radius: $list-border-radius;\n }\n &:last-child {\n border-bottom-right-radius: $list-border-radius;\n border-bottom-left-radius: $list-border-radius;\n }\n }\n\n &.selectable\n .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n cursor: pointer;\n }\n\n .mdc-deprecated-list-item__meta {\n // the action menu on the right side a list item\n line-height: 100%;\n margin-right: -0.5rem;\n }\n\n .mdc-deprecated-list-item__graphic {\n margin-right: functions.pxToRem(8);\n }\n\n &.mdc-deprecated-list--avatar-list {\n position: relative;\n\n limel-icon.mdc-deprecated-list-item__graphic {\n background-color: var(\n --icon-background-color,\n rgb(var(--contrast-900))\n );\n color: var(--icon-color, rgba(var(--color-white), 0.88));\n margin-right: functions.pxToRem(12);\n margin-left: functions.pxToRem(-4);\n }\n\n hr.mdc-deprecated-list-divider {\n position: absolute;\n bottom: 0;\n\n &.mdc-deprecated-list-divider--inset {\n --icon-width: #{functions.pxToRem(40)};\n --icon-right-padding: #{functions.pxToRem(12)};\n --list-right-padding: #{functions.pxToRem(12)};\n right: 0;\n width: calc(\n 100% - var(--icon-width) - var(--icon-right-padding) -\n var(--list-right-padding)\n );\n\n &.x-small {\n --icon-width: #{functions.pxToRem(24)};\n }\n\n &.small {\n --icon-width: #{functions.pxToRem(32)};\n }\n\n &.medium {\n --icon-width: #{functions.pxToRem(40)};\n }\n\n &.large {\n --icon-width: #{functions.pxToRem(48)};\n }\n }\n }\n\n .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n display: none;\n }\n }\n\n &.mdc-deprecated-list--two-line {\n .mdc-deprecated-list-item__text {\n padding-top: functions.pxToRem(8);\n padding-bottom: functions.pxToRem(8);\n }\n .mdc-deprecated-list-item__primary-text {\n margin-bottom: functions.pxToRem(4);\n }\n }\n\n .mdc-deprecated-list-item__secondary-text,\n .mdc-deprecated-list-item__primary-text,\n .mdc-deprecated-list-item__command-text {\n margin: 0;\n &:before,\n &:after {\n display: none;\n }\n }\n\n .mdc-deprecated-list-item__command-text {\n color: rgb(var(--contrast-800));\n margin-left: 0.7rem;\n }\n\n .mdc-deprecated-list-item__text {\n align-self: center;\n width: 100%;\n }\n\n .has-primary-component {\n .mdc-deprecated-list-item__text {\n margin-left: 0.5rem;\n }\n }\n .mdc-deprecated-list-item__primary-command-text {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n }\n\n // Tweaks to display the icon correctly in Edge\n limel-icon.mdc-deprecated-list-item__graphic {\n display: block;\n }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n limel-icon.mdc-deprecated-list-item__graphic {\n // Tweaks to make icon lists align nicely with badge-icon lists.\n &[size='x-small'] {\n margin-right: functions.pxToRem(4);\n }\n &[size='small'] {\n margin-right: functions.pxToRem(8);\n }\n &[size='medium'] {\n margin-right: functions.pxToRem(8);\n }\n &[size='large'] {\n margin-right: functions.pxToRem(12);\n }\n }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n &:before {\n background-color: var(--mdc-theme-primary);\n opacity: 0.15;\n }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n > {\n :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n @include mixins.visualize-keyboard-focus;\n\n &:focus-visible {\n border-radius: $list-border-radius;\n z-index: $list--has-interactive-items--mdc-list-item--hover;\n }\n }\n }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","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","@use '@material/menu-surface';\n@use '@material/elevation';\n@use '@material/menu';\n\n:host {\n display: block;\n}\n\n@include menu-surface.core-styles;\n@include menu.core-styles;\n\n.mdc-menu-surface {\n max-height: 100%;\n position: relative;\n --mdc-menu-max-width: var(\n --menu-surface-width,\n min(calc(100vw - 2rem), 20rem)\n );\n background-color: var(--lime-elevated-surface-background-color);\n}\n\n:host(limel-menu-surface.has-grid-layout) {\n .mdc-menu-surface {\n width: var(--menu-surface-width, min(calc(100vw - 2rem), 40rem));\n max-width: unset;\n }\n}\n","import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\n\n/\n @slot - Content to put inside the surface\n * @private\n /\n@Component({\n tag: 'limel-menu-surface',\n shadow: true,\n styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n /\n True if the menu surface is open, false otherwise\n /\n @Prop()\n public open = false;\n\n /\n Clicks in this element should not be prevented when the menu surface is open\n /\n @Prop()\n public allowClicksElement: HTMLElement;\n\n /\n Emitted when the menu surface is dismissed and should be closed\n */\n @Event()\n public dismiss: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelMenuSurfaceElement;\n\n private menuSurface: MDCMenuSurface;\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 const classList = {\n 'mdc-menu': true,\n 'mdc-menu-surface': true,\n 'mdc-menu-surface--open': this.open,\n 'mdc-elevation-transition': true,\n 'mdc-elevation--z4': true,\n };\n\n return (\n <div class={classList} tabindex=\"-1\">\n <slot />\n </div>\n );\n }\n\n private setup = () => {\n const menuElement: HTMLElement =\n this.host.shadowRoot.querySelector('.mdc-menu-surface');\n if (!menuElement) {\n return;\n }\n\n this.menuSurface = new MDCMenuSurface(menuElement);\n this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n document.addEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.addEventListener('keydown', this.handleKeyDown);\n window.addEventListener('resize', this.handleResize, {\n passive: true,\n });\n };\n\n private teardown = () => {\n this.menuSurface?.destroy();\n document.removeEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.removeEventListener('keydown', this.handleKeyDown);\n window.removeEventListener('resize', this.handleResize);\n };\n\n private handleDocumentClick = (event) => {\n const elementPath = event.path \|\| [];\n\n if (!this.open) {\n return;\n }\n\n if (isDescendant(event.target, this.host)) {\n return;\n }\n\n if (this.allowClicksElement) {\n const clickedInAllowedElement = elementPath.includes(\n this.allowClicksElement\n );\n\n if (clickedInAllowedElement) {\n return;\n }\n }\n\n this.dismiss.emit();\n this.preventClickEventPropagation();\n };\n\n private handleResize = () => {\n if (this.open) {\n this.dismiss.emit();\n }\n };\n\n private preventClickEventPropagation = () => {\n // When the menu surface is open, we want to stop the `click` event from propagating\n // when clicking outside the surface itself. This is to prevent any dialog that might\n // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n // for `click`, so we can capture and \"kill\" it.\n document.addEventListener('click', this.stopEvent, {\n capture: true,\n once: true,\n });\n // We also capture and \"kill\" the next `mouseup` event.\n document.addEventListener('mouseup', this.stopEvent, {\n capture: true,\n once: true,\n });\n // If the user dragged the scrollbar, no `click` event happens. So when we get the\n // `mouseup` event, remove the handler for `click` if it's still there.\n // Otherwise, we would catch the next click even though the menu is no longer open.\n document.addEventListener(\n 'mouseup',\n () => {\n document.removeEventListener('click', this.stopEvent, {\n capture: true,\n });\n },\n {\n once: true,\n }\n );\n };\n\n private stopEvent = (event) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const isEscape =\n event.key === ESCAPE \|\| event.keyCode === ESCAPE_KEY_CODE;\n const isTab = event.key === TAB \|\| event.keyCode === TAB_KEY_CODE;\n\n if (this.open && (isEscape \|\| isTab)) {\n event.stopPropagation();\n this.dismiss.emit();\n }\n };\n}\n"],"version":3}
1	+ {"file":"limel-list.limel-menu-surface.entry.cjs.js","mappings":"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","names":["h","index","CheckboxTemplate","listStrings","MDCList","Host","MDCMenuSurface","Corner","isDescendant","ESCAPE","ESCAPE_KEY_CODE","TAB","TAB_KEY_CODE"],"sources":["./src/components/list/radio-button/radio-button.template.tsx","./src/components/list/list-renderer.tsx","./src/components/list/list.scss?tag=limel-list&encapsulation=shadow","./src/components/list/list.tsx","./src/components/menu-surface/menu-surface.scss?tag=limel-menu-surface&encapsulation=shadow","./src/components/menu-surface/menu-surface.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\ninterface RadioButtonTemplateProps {\n disabled?: boolean;\n id: string;\n checked?: boolean;\n onChange?: (event: Event) => void;\n label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n RadioButtonTemplateProps\n> = (props) => {\n return (\n <div class=\"mdc-form-field\">\n <div\n class={`\n mdc-radio\n ${props.disabled ? 'mdc-radio--disabled' : ''}\n `}\n >\n <input\n class=\"mdc-radio__native-control\"\n type=\"radio\"\n id={props.id}\n checked={props.checked}\n disabled={props.disabled}\n onChange={props.onChange}\n />\n <div class=\"mdc-radio__background\">\n <div class=\"mdc-radio__outer-circle\" />\n <div class=\"mdc-radio__inner-circle\" />\n </div>\n </div>\n <label\n class={`${props.disabled ? 'disabled' : ''}`}\n htmlFor={props.id}\n >\n {props.label}\n </label>\n </div>\n );\n};\n","import { ListItem, ListSeparator, MenuItem } from '@limetech/lime-elements';\nimport { h } from '@stencil/core';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { ListRendererConfig } from './list-renderer-config';\nimport { RadioButtonTemplate } from './radio-button/radio-button.template';\n\nexport class ListRenderer {\n private defaultConfig: ListRendererConfig = {\n isOpen: true,\n badgeIcons: false,\n };\n\n private config: ListRendererConfig;\n\n private hasIcons: boolean;\n private twoLines: boolean;\n private avatarList: boolean;\n private commandKey: boolean;\n\n private applyTabIndexToItemAtIndex: number;\n\n public render(\n items: Array<ListItem \| ListSeparator>,\n config: ListRendererConfig = {}\n ) {\n items = items \|\| [];\n this.config = { ...this.defaultConfig, ...config };\n\n this.twoLines = items.some((item) => {\n return 'secondaryText' in item && !!item.secondaryText;\n });\n\n this.hasIcons = items.some((item) => {\n return 'icon' in item && !!item.icon;\n });\n\n this.avatarList = this.config.badgeIcons && this.hasIcons;\n const selectableListTypes = ['selectable', 'radio', 'checkbox'];\n\n let role;\n switch (this.config.type) {\n case 'checkbox':\n role = 'group';\n break;\n case 'radio':\n role = 'radiogroup';\n break;\n default:\n role = 'listbox';\n }\n\n this.applyTabIndexToItemAtIndex =\n this.getIndexForWhichToApplyTabIndex(items);\n\n const classNames = {\n 'mdc-deprecated-list': true,\n 'mdc-deprecated-list--two-line': this.twoLines,\n selectable: selectableListTypes.includes(this.config.type),\n 'mdc-deprecated-list--avatar-list': this.avatarList,\n 'list--compact':\n this.twoLines &&\n this.commandKey &&\n ['small', 'x-small'].includes(this.config.iconSize),\n };\n\n return (\n <ul class={classNames} role={role} aria-orientation=\"vertical\">\n {items.map(this.renderListItem)}\n </ul>\n );\n }\n\n /*\n Determine which ListItem should have the `tab-index` attribute set,\n * and return the index at which that ListItem is located in `items`.\n * Returns `undefined` if no item should have the attribute set.\n * See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility\n * @param {Array<ListItem \| ListSeparator>} items the items of the list, including any `ListSeparator`:s\n * @returns {number} the index as per the description\n /\n private getIndexForWhichToApplyTabIndex = (\n items: Array<ListItem \| ListSeparator>\n ) => {\n let result;\n for (let i = 0, max = items.length; i < max; i += 1) {\n if ('separator' in items[i]) {\n // Ignore ListSeparator\n } else {\n const item = items[i] as ListItem<any>;\n if (item.selected) {\n result = i;\n break;\n }\n\n if (result === undefined && !item.disabled) {\n result = i;\n // Do NOT break, as any later item with\n // `selected=true` should get the tab-index instead!\n }\n }\n }\n\n return result;\n };\n\n /\n Render a single list item\n * @param {ListItem \| ListSeparator} item the item to render\n * @param {number} index the index the item had in the `items` array\n * @returns {HTMLElement} the list item\n /\n private renderListItem = (\n item: ListItem \| ListSeparator,\n index: number\n ) => {\n if ('separator' in item) {\n return <li class=\"mdc-deprecated-list-divider\" role=\"separator\" />;\n }\n\n if (['radio', 'checkbox'].includes(this.config.type)) {\n return this.renderVariantListItem(this.config, item, index);\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item--selected': item.selected,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n aria-disabled={item.disabled ? 'true' : 'false'}\n aria-selected={item.selected ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {item.icon ? this.renderIcon(this.config, item) : null}\n {this.getPrimaryComponent(item)}\n {this.renderText(item)}\n {this.twoLines && this.avatarList ? this.renderDivider() : null}\n {this.renderActionMenu(item.actions)}\n </li>\n );\n };\n\n private getPrimaryComponent(item: ListItem): Element {\n if (!this.hasPrimaryComponent(item)) {\n return;\n }\n\n const PrimaryComponent = item.primaryComponent.name;\n const props = item.primaryComponent.props;\n\n return <PrimaryComponent {...props} />;\n }\n\n private hasPrimaryComponent = (item: ListItem) => {\n return !!item?.primaryComponent?.name;\n };\n\n /\n Render the text of the list item\n * @param {ListItem} item the list item\n * @returns {HTMLElement \| string} the text for the list item\n /\n private renderText = (item: ListItem) => {\n if (this.isSimpleItem(item)) {\n return (\n <span class=\"mdc-deprecated-list-item__text\">{item.text}</span>\n );\n }\n\n return (\n <div class=\"mdc-deprecated-list-item__text\">\n <div class=\"mdc-deprecated-list-item__primary-command-text\">\n <div class=\"mdc-deprecated-list-item__primary-text\">\n {item.text}\n </div>\n </div>\n <div class=\"mdc-deprecated-list-item__secondary-text\">\n {item.secondaryText}\n </div>\n </div>\n );\n };\n\n private isSimpleItem = (item: ListItem): boolean => {\n return !('secondaryText' in item);\n };\n\n /\n Render an icon for a list item\n * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function\n * @param {ListItem} item the list item\n * @returns {HTMLElement} the icon element\n /\n private renderIcon = (config: ListRendererConfig, item: ListItem) => {\n const style: any = {};\n if (item.iconColor) {\n if (config.badgeIcons) {\n style['--icon-background-color'] = item.iconColor;\n } else {\n style.color = item.iconColor;\n }\n }\n\n return (\n <limel-icon\n badge={config.badgeIcons}\n class=\"mdc-deprecated-list-item__graphic\"\n name={item.icon}\n style={style}\n size={config.iconSize}\n />\n );\n };\n\n private renderDivider = () => {\n const classes = {\n 'mdc-deprecated-list-divider': true,\n 'mdc-deprecated-list-divider--inset': true,\n };\n if (this.config.iconSize) {\n classes[this.config.iconSize] = true;\n }\n\n return <hr class={classes} />;\n };\n\n private renderActionMenu = (actions: Array<MenuItem \| ListSeparator>) => {\n if (!actions \|\| actions.length === 0) {\n return;\n }\n\n return (\n <limel-menu\n class=\"mdc-deprecated-list-item__meta\"\n items={actions}\n openDirection=\"left-start\"\n >\n <limel-icon-button\n class=\"action-menu-trigger\"\n slot=\"trigger\"\n icon=\"menu_2\"\n />\n </limel-menu>\n );\n };\n\n private renderVariantListItem = (\n config: ListRendererConfig,\n item: ListItem,\n index: number\n ) => {\n let itemTemplate;\n if (config.type === 'radio') {\n itemTemplate = (\n <RadioButtonTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n } else if (config.type === 'checkbox') {\n itemTemplate = (\n <CheckboxTemplate\n id={`c_${index}`}\n checked={item.selected}\n disabled={item.disabled}\n />\n );\n }\n\n const classNames = {\n 'mdc-deprecated-list-item': true,\n 'mdc-deprecated-list-item--disabled': item.disabled,\n 'mdc-deprecated-list-item__text': !item.secondaryText,\n 'has-primary-component': this.hasPrimaryComponent(item),\n };\n\n const attributes: { tabindex?: string } = {};\n if (index === this.applyTabIndexToItemAtIndex) {\n attributes.tabindex = '0';\n }\n\n return (\n <li\n class={classNames}\n role={config.type}\n aria-checked={item.selected ? 'true' : 'false'}\n aria-disabled={item.disabled ? 'true' : 'false'}\n data-index={index}\n {...attributes}\n >\n {this.renderVariantListItemContent(config, item, itemTemplate)}\n </li>\n );\n };\n\n private renderVariantListItemContent = (\n config: ListRendererConfig,\n item: ListItem,\n itemTemplate: any\n ) => {\n if (this.hasIcons) {\n return [\n item.icon ? this.renderIcon(config, item) : null,\n this.getPrimaryComponent(item),\n this.renderText(item),\n <div class=\"mdc-deprecated-list-item__meta\">\n {itemTemplate}\n </div>,\n ];\n }\n\n return [\n <div class=\"mdc-deprecated-list-item__graphic\">{itemTemplate}</div>,\n this.getPrimaryComponent(item),\n this.renderText(item),\n ];\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n@use '../../style/internal/lime-theme';\n@use '../checkbox/checkbox.scss';\n\n@use '@material/list';\n\n$list-border-radius: 0.375rem; // 6px\n$list--has-interactive-items--mdc-list-item--hover: 1;\n$list-static-actions-list: 1;\n$list-mdc-list-item: 0;\n\n/\n @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.\n * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.\n * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.\n * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.\n * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.\n * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.\n * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.\n * @prop --list-background-color-of-even-interactive-items: Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.\n * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;\n /\n\n:host(limel-list) {\n display: block;\n isolation: isolate;\n @include checkbox.custom-checkbox-styles;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n@include list.deprecated-core-styles;\n\n.mdc-deprecated-list {\n --mdc-theme-text-icon-on-background: var(\n --icon-color,\n rgb(var(--contrast-900))\n );\n margin: var(\n --list-margin,\n 0.25rem\n ); // added space to visualize keyboard-focused items\n padding: 0;\n border-radius: $list-border-radius;\n\n .mdc-deprecated-list-divider {\n border-bottom-color: rgb(var(--contrast-400));\n }\n\n .mdc-deprecated-list-item {\n transition: background-color 0.2s ease;\n box-sizing: border-box;\n z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12\n\n &:not(.mdc-deprecated-list-item--disabled) {\n &:hover {\n background-color: rgb(var(--contrast-300));\n z-index: 1;\n }\n }\n\n &.mdc-deprecated-list-item--disabled {\n cursor: not-allowed;\n\n limel-icon {\n opacity: 0.38; // similar to `mdc-deprecated-list-item__text` when disabled\n }\n }\n\n &:first-child {\n border-top-left-radius: $list-border-radius;\n border-top-right-radius: $list-border-radius;\n }\n &:last-child {\n border-bottom-right-radius: $list-border-radius;\n border-bottom-left-radius: $list-border-radius;\n }\n }\n\n &.selectable\n .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled) {\n cursor: pointer;\n }\n\n .mdc-deprecated-list-item__meta {\n // the action menu on the right side a list item\n line-height: 100%;\n margin-right: -0.5rem;\n }\n\n .mdc-deprecated-list-item__graphic {\n margin-right: functions.pxToRem(8);\n }\n\n &.mdc-deprecated-list--avatar-list {\n position: relative;\n\n limel-icon.mdc-deprecated-list-item__graphic {\n background-color: var(\n --icon-background-color,\n rgb(var(--contrast-900))\n );\n color: var(--icon-color, rgba(var(--color-white), 0.88));\n margin-right: functions.pxToRem(12);\n margin-left: functions.pxToRem(-4);\n }\n\n hr.mdc-deprecated-list-divider {\n position: absolute;\n bottom: 0;\n\n &.mdc-deprecated-list-divider--inset {\n --icon-width: #{functions.pxToRem(40)};\n --icon-right-padding: #{functions.pxToRem(12)};\n --list-right-padding: #{functions.pxToRem(12)};\n right: 0;\n width: calc(\n 100% - var(--icon-width) - var(--icon-right-padding) -\n var(--list-right-padding)\n );\n\n &.x-small {\n --icon-width: #{functions.pxToRem(24)};\n }\n\n &.small {\n --icon-width: #{functions.pxToRem(32)};\n }\n\n &.medium {\n --icon-width: #{functions.pxToRem(40)};\n }\n\n &.large {\n --icon-width: #{functions.pxToRem(48)};\n }\n }\n }\n\n .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {\n display: none;\n }\n }\n\n &.mdc-deprecated-list--two-line {\n .mdc-deprecated-list-item__text {\n padding-top: functions.pxToRem(8);\n padding-bottom: functions.pxToRem(8);\n }\n .mdc-deprecated-list-item__primary-text {\n margin-bottom: functions.pxToRem(4);\n }\n }\n\n .mdc-deprecated-list-item__secondary-text,\n .mdc-deprecated-list-item__primary-text,\n .mdc-deprecated-list-item__command-text {\n margin: 0;\n &:before,\n &:after {\n display: none;\n }\n }\n\n .mdc-deprecated-list-item__command-text {\n color: rgb(var(--contrast-800));\n margin-left: 0.7rem;\n }\n\n .mdc-deprecated-list-item__text {\n align-self: center;\n width: 100%;\n }\n\n .has-primary-component {\n .mdc-deprecated-list-item__text {\n margin-left: 0.5rem;\n }\n }\n .mdc-deprecated-list-item__primary-command-text {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: baseline;\n }\n\n // Tweaks to display the icon correctly in Edge\n limel-icon.mdc-deprecated-list-item__graphic {\n display: block;\n }\n}\n\n.mdc-deprecated-list:not(.mdc-deprecated-list--avatar-list) {\n limel-icon.mdc-deprecated-list-item__graphic {\n // Tweaks to make icon lists align nicely with badge-icon lists.\n &[size='x-small'] {\n margin-right: functions.pxToRem(4);\n }\n &[size='small'] {\n margin-right: functions.pxToRem(8);\n }\n &[size='medium'] {\n margin-right: functions.pxToRem(8);\n }\n &[size='large'] {\n margin-right: functions.pxToRem(12);\n }\n }\n}\n\n.mdc-deprecated-list-item.mdc-deprecated-list-item--selected {\n &:before {\n background-color: var(--mdc-theme-primary);\n opacity: 0.15;\n }\n}\n\n:not(.mdc-deprecated-list--non-interactive) {\n > {\n :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item {\n @include mixins.visualize-keyboard-focus;\n\n &:focus-visible {\n border-radius: $list-border-radius;\n z-index: $list--has-interactive-items--mdc-list-item--hover;\n }\n }\n }\n}\n\n@import '../checkbox/checkbox.scss';\n\n@import './radio-button/radio-button.scss';\n\n@import './partial-styles/custom-styles.scss';\n@import './partial-styles/enable-multiline-text.scss';\n@import './partial-styles/_has-grid-layout.scss';\n@import './partial-styles/_static-actions.scss';\n","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","@use '@material/menu-surface';\n@use '@material/elevation';\n@use '@material/menu';\n\n:host {\n display: block;\n}\n\n@include menu-surface.core-styles;\n@include menu.core-styles;\n\n.mdc-menu-surface {\n max-height: 100%;\n position: relative;\n --mdc-menu-max-width: var(\n --menu-surface-width,\n min(calc(100vw - 2rem), 20rem)\n );\n background-color: var(--lime-elevated-surface-background-color);\n}\n\n:host(limel-menu-surface.has-grid-layout) {\n .mdc-menu-surface {\n width: var(--menu-surface-width, min(calc(100vw - 2rem), 40rem));\n max-width: unset;\n }\n}\n","import { Corner, MDCMenuSurface } from '@material/menu-surface';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { isDescendant } from '../../util/dom';\nimport {\n ESCAPE,\n ESCAPE_KEY_CODE,\n TAB,\n TAB_KEY_CODE,\n} from '../../util/keycodes';\n\n/\n @slot - Content to put inside the surface\n * @private\n /\n@Component({\n tag: 'limel-menu-surface',\n shadow: true,\n styleUrl: 'menu-surface.scss',\n})\nexport class MenuSurface {\n /\n True if the menu surface is open, false otherwise\n /\n @Prop()\n public open = false;\n\n /\n Clicks in this element should not be prevented when the menu surface is open\n /\n @Prop()\n public allowClicksElement: HTMLElement;\n\n /\n Emitted when the menu surface is dismissed and should be closed\n */\n @Event()\n public dismiss: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelMenuSurfaceElement;\n\n private menuSurface: MDCMenuSurface;\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 const classList = {\n 'mdc-menu': true,\n 'mdc-menu-surface': true,\n 'mdc-menu-surface--open': this.open,\n 'mdc-elevation-transition': true,\n 'mdc-elevation--z4': true,\n };\n\n return (\n <div class={classList} tabindex=\"-1\">\n <slot />\n </div>\n );\n }\n\n private setup = () => {\n const menuElement: HTMLElement =\n this.host.shadowRoot.querySelector('.mdc-menu-surface');\n if (!menuElement) {\n return;\n }\n\n this.menuSurface = new MDCMenuSurface(menuElement);\n this.menuSurface.setAnchorCorner(Corner.TOP_START);\n\n document.addEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.addEventListener('keydown', this.handleKeyDown);\n window.addEventListener('resize', this.handleResize, {\n passive: true,\n });\n };\n\n private teardown = () => {\n this.menuSurface?.destroy();\n document.removeEventListener('mousedown', this.handleDocumentClick, {\n capture: true,\n });\n this.host.removeEventListener('keydown', this.handleKeyDown);\n window.removeEventListener('resize', this.handleResize);\n };\n\n private handleDocumentClick = (event) => {\n const elementPath = event.path \|\| [];\n\n if (!this.open) {\n return;\n }\n\n if (isDescendant(event.target, this.host)) {\n return;\n }\n\n if (this.allowClicksElement) {\n const clickedInAllowedElement = elementPath.includes(\n this.allowClicksElement\n );\n\n if (clickedInAllowedElement) {\n return;\n }\n }\n\n this.dismiss.emit();\n this.preventClickEventPropagation();\n };\n\n private handleResize = () => {\n if (this.open) {\n this.dismiss.emit();\n }\n };\n\n private preventClickEventPropagation = () => {\n // When the menu surface is open, we want to stop the `click` event from propagating\n // when clicking outside the surface itself. This is to prevent any dialog that might\n // be open from closing, etc. However, when dragging a scrollbar no `click` event is emitted,\n // only mousedown and mouseup. So we listen for `mousedown` and attach a one-time listener\n // for `click`, so we can capture and \"kill\" it.\n document.addEventListener('click', this.stopEvent, {\n capture: true,\n once: true,\n });\n // We also capture and \"kill\" the next `mouseup` event.\n document.addEventListener('mouseup', this.stopEvent, {\n capture: true,\n once: true,\n });\n // If the user dragged the scrollbar, no `click` event happens. So when we get the\n // `mouseup` event, remove the handler for `click` if it's still there.\n // Otherwise, we would catch the next click even though the menu is no longer open.\n document.addEventListener(\n 'mouseup',\n () => {\n document.removeEventListener('click', this.stopEvent, {\n capture: true,\n });\n },\n {\n once: true,\n }\n );\n };\n\n private stopEvent = (event) => {\n event.stopPropagation();\n event.preventDefault();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const isEscape =\n event.key === ESCAPE \|\| event.keyCode === ESCAPE_KEY_CODE;\n const isTab = event.key === TAB \|\| event.keyCode === TAB_KEY_CODE;\n\n if (this.open && (isEscape \|\| isTab)) {\n event.stopPropagation();\n this.dismiss.emit();\n }\n };\n}\n"],"version":3}

package/dist/cjs/limel-portal.cjs.entry.js CHANGED Viewed

@@ -1798,19 +1798,6 @@ var createPopper = /*#__PURE__*/popperGenerator({
 const portalCss = ":host(limel-portal){display:block;position:absolute;top:0;bottom:0;width:100%;pointer-events:none}:host([hidden]){display:none}";
 const Portal = class {
-  onVisible() {
-    if (!this.visible) {
-      this.hideContainer();
-      this.styleContainer();
-      this.destroyPopper();
-      return;
-    }
-    this.styleContainer();
-    this.createPopper();
-    requestAnimationFrame(() => {
-      this.showContainer();
-    });
-  }
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.loaded = false;
@@ -1821,6 +1808,7 @@ const Portal = class {
     this.parent = document.body;
     this.inheritParentWidth = false;
     this.visible = false;
+    this.anchor = null;
     this.parents = new WeakMap();
   }
   disconnectedCallback() {
@@ -1859,6 +1847,19 @@ const Portal = class {
   render() {
     return index.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()) || [];
@@ -1930,7 +1931,7 @@ const Portal = class {
   }
   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;