npm - @limetech/lime-elements - Versions diffs - 37.1.0-next.92 → 37.1.0-next.94 - Mend

@limetech/lime-elements 37.1.0-next.92 → 37.1.0-next.94

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

package/CHANGELOG.md +17 -0
package/dist/cjs/limel-header.cjs.entry.js +7 -1
package/dist/cjs/limel-header.cjs.entry.js.map +1 -1
package/dist/cjs/limel-popover_2.cjs.entry.js +19 -0
package/dist/cjs/limel-popover_2.cjs.entry.js.map +1 -1
package/dist/collection/components/header/header.js +12 -6
package/dist/collection/components/header/header.js.map +1 -1
package/dist/collection/components/popover/popover.js +19 -0
package/dist/collection/components/popover/popover.js.map +1 -1
package/dist/esm/limel-header.entry.js +7 -1
package/dist/esm/limel-header.entry.js.map +1 -1
package/dist/esm/limel-popover_2.entry.js +19 -0
package/dist/esm/limel-popover_2.entry.js.map +1 -1
package/dist/lime-elements/lime-elements.esm.js +1 -1
package/dist/lime-elements/{p-de97b8a2.entry.js → p-05e6d75e.entry.js} +2 -2
package/dist/lime-elements/p-05e6d75e.entry.js.map +1 -0
package/dist/lime-elements/p-e53b7ccf.entry.js +2 -0
package/dist/lime-elements/p-e53b7ccf.entry.js.map +1 -0
package/dist/types/components/header/header.d.ts +6 -5
package/dist/types/components/popover/popover.d.ts +2 -0
package/dist/types/components.d.ts +5 -5
package/package.json +4 -4
package/dist/lime-elements/p-aa3a72a1.entry.js +0 -2
package/dist/lime-elements/p-aa3a72a1.entry.js.map +0 -1
package/dist/lime-elements/p-de97b8a2.entry.js.map +0 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,20 @@
+## [37.1.0-next.94](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.93...v37.1.0-next.94) (2024-01-23)
+### Bug Fixes
+* **popover:** add `aria-haspopup` & `aria-expanded` attributes to trigger element ([3d17839](https://github.com/Lundalogik/lime-elements/commit/3d178391037a34bccf325deb42eb7746c1ae6cba))
+## [37.1.0-next.93](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.92...v37.1.0-next.93) (2024-01-22)
+### Bug Fixes
+* **header:** correctly declare all the props as optional ([664088f](https://github.com/Lundalogik/lime-elements/commit/664088f7ef8255f05204f12709ca4138580c1043))
+* **header:** do not render subheading's divider, when it is not provided ([038b071](https://github.com/Lundalogik/lime-elements/commit/038b071d9c687ec18b4bca077c84c0dcd1463e33))
 ## [37.1.0-next.92](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.91...v37.1.0-next.92) (2024-01-19)

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

@@ -33,7 +33,13 @@ const Header = class {
     if (!this.supportingText) {
       return;
     }
-    return (index.h("span", { class: "subheading__supporting-text" }, index.h("span", null, this.subheadingDivider), this.supportingText));
+    return (index.h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
+  }
+  renderSubheadingDivider() {
+    if (!this.subheadingDivider) {
+      return;
+    }
+    return index.h("span", null, this.subheadingDivider);
   }
 };
 Header.style = headerCss;

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

	@@ -1 +1 @@
1	- {"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;~~6BA8BoB~~,GAAG;;~~EAE/B~~,MAAM;IACT,OAAO;MACHA,iBAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClBA,iBAAK,KAAK,EAAC,UAAU,IACjBA,gBAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACLA,gBAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACNA,kBAAM,IAAI,EAAC,SAAS,IAChBA,qBAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAOD,wBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,6BAA6B,~~IACrCA~~,~~sBAAO,~~IAAI,CAAC,~~iBAAiB~~,~~CAAQ~~,~~EACpC~~,IAAI,CAAC,cAAc,CACjB,EACT;GACL;;;;;;","names":["h","getIconName"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/*\n @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n /\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n ~~<span>~~{this.~~subheadingDivider~~}~~</span>\~~n {this.supportingText}\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACHA,iBAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClBA,iBAAK,KAAK,EAAC,UAAU,IACjBA,gBAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACLA,gBAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACNA,kBAAM,IAAI,EAAC,SAAS,IAChBA,qBAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAOD,wBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,uBAAuB,EAAE,EAC9B,IAAI,CAAC,cAAc,CACjB,EACT;GACL;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAOA,sBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;GAChD;;;;;;","names":["h","getIconName"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/*\n @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n /\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading?: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading?: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText?: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"version":3}

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

@@ -57,6 +57,21 @@ const Popover = class {
       event.preventDefault();
       this.close.emit();
     };
+    this.setTriggerAttributes = (element) => {
+      const attributes = {
+        'aria-haspopup': true,
+        'aria-expanded': this.open,
+        role: 'button',
+      };
+      for (const [key, value] of Object.entries(attributes)) {
+        if (!value) {
+          element.removeAttribute(key);
+        }
+        else {
+          element.setAttribute(key, String(value));
+        }
+      }
+    };
     this.open = false;
     this.openDirection = undefined;
     this.portalId = randomString.createRandomString();
@@ -68,6 +83,10 @@ const Popover = class {
   componentWillLoad() {
     this.setupGlobalHandlers();
   }
+  componentDidRender() {
+    const slotElement = this.host.shadowRoot.querySelector('slot');
+    slotElement.assignedElements().forEach(this.setTriggerAttributes);
+  }
   setupGlobalHandlers() {
     if (this.open) {
       document.addEventListener('click', this.globalClickListener, {

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

	@@ -1 +1 @@
1	- {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\"></slot>\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}
1	+ {"file":"limel-popover.limel-popover-surface.entry.cjs.js","mappings":"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","names":["ESCAPE","createRandomString","h","zipObject"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}

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

@@ -76,7 +76,13 @@ export class Header {
     if (!this.supportingText) {
       return;
     }
-    return (h("span", { class: "subheading__supporting-text" }, h("span", null, this.subheadingDivider), this.supportingText));
+    return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
+  }
+  renderSubheadingDivider() {
+    if (!this.subheadingDivider) {
+      return;
+    }
+    return h("span", null, this.subheadingDivider);
   }
   static get is() { return "limel-header"; }
   static get encapsulation() { return "shadow"; }
@@ -106,7 +112,7 @@ export class Header {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Icon to display"
@@ -123,7 +129,7 @@ export class Header {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Title to display"
@@ -140,7 +146,7 @@ export class Header {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Subheading to display"
@@ -157,7 +163,7 @@ export class Header {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "An extra string of text to display along with with the Subheading"
@@ -174,7 +180,7 @@ export class Header {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The visual divider that separates the `subheading` and the `supportingText`.\nIt must be a single character such as `-` or `,`."

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

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAMH,MAAM,OAAO,MAAM;;;;;;~~6BA8BoB~~,GAAG;;~~EAE/B~~,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;~~MACrC~~,~~gBAAO,~~IAAI,CAAC,~~iBAAiB~~,~~CAAQ~~;~~MACpC~~,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/*\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n ~~<span>~~{this.~~subheadingDivider~~}~~</span>\~~n {this.supportingText}\n </span>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/components/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAMH,MAAM,OAAO,MAAM;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE;QAClB,WAAK,KAAK,EAAC,UAAU;UACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ;UACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU;YACxC,IAAI,CAAC,UAAU;YACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS;QAChB,eAAQ,CACL;KACV,CAAC;EACN,CAAC;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;EAChE,CAAC;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,OAAO,CACH,YAAM,KAAK,EAAC,6BAA6B;MACpC,IAAI,CAAC,uBAAuB,EAAE;MAC9B,IAAI,CAAC,cAAc,CACjB,CACV,CAAC;EACN,CAAC;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;EACjD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/*\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading?: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading?: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText?: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"]}

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

@@ -63,6 +63,21 @@ export class Popover {
       event.preventDefault();
       this.close.emit();
     };
+    this.setTriggerAttributes = (element) => {
+      const attributes = {
+        'aria-haspopup': true,
+        'aria-expanded': this.open,
+        role: 'button',
+      };
+      for (const [key, value] of Object.entries(attributes)) {
+        if (!value) {
+          element.removeAttribute(key);
+        }
+        else {
+          element.setAttribute(key, String(value));
+        }
+      }
+    };
     this.open = false;
     this.openDirection = undefined;
     this.portalId = createRandomString();
@@ -74,6 +89,10 @@ export class Popover {
   componentWillLoad() {
     this.setupGlobalHandlers();
   }
+  componentDidRender() {
+    const slotElement = this.host.shadowRoot.querySelector('slot');
+    slotElement.assignedElements().forEach(this.setTriggerAttributes);
+  }
   setupGlobalHandlers() {
     if (this.open) {
       document.addEventListener('click', this.globalClickListener, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAMH,MAAM,OAAO,OAAO;EAwBhB;~~IA0EQ~~,yBAAoB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACpD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QACtB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;~~gBArGY~~,KAAK;;IAoBf,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClE;EAGS,SAAS;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEO,mBAAmB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE;QACzD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjE;SAAM;MACH,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACpE;EACL,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,gBAAgB;MACvB,YAAM,IAAI,EAAC,SAAS,~~GAAQ~~;~~MAC5B~~,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,6BACI,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACrC,KAAK,EAAE,aAAa,GACtB,CACS,CACb,CACT,CAAC;EACN,CAAC;EAEO,mBAAmB,CAAC,KAAiB;IACzC,MAAM,OAAO,GAAgB,KAAK,CAAC,MAAqB,CAAC;IACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;EACL,CAAC;EAEO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,yBAAyB;MACzB,iCAAiC;MACjC,yBAAyB;KAC5B,CAAC;IACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAC1C,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;EAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAWJ~~","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/*\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\"~~></slot>\~~n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n}\n"]}
1	+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAMH,MAAM,OAAO,OAAO;EAwBhB;IA+EQ,yBAAoB,GAAG,CAAC,KAAoB,EAAE,EAAE;MACpD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QACtB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,yBAAoB,GAAG,CAAC,OAAoB,EAAE,EAAE;MACpD,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,CAAC,KAAK,EAAE;UACR,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;OACJ;IACL,CAAC,CAAC;gBA1HY,KAAK;;IAoBf,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClE;EAGS,SAAS;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;EAC/B,CAAC;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;EACtE,CAAC;EAEO,mBAAmB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE;QACzD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjE;SAAM;MACH,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACpE;EACL,CAAC;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,OAAO,CACH,WAAK,KAAK,EAAC,gBAAgB;MACvB,YAAM,IAAI,EAAC,SAAS,GAAG;MACvB,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,aAAa;QAEjC,6BACI,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACrC,KAAK,EAAE,aAAa,GACtB,CACS,CACb,CACT,CAAC;EACN,CAAC;EAEO,mBAAmB,CAAC,KAAiB;IACzC,MAAM,OAAO,GAAgB,KAAK,CAAC,MAAqB,CAAC;IACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;EACL,CAAC;EAEO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,yBAAyB;MACzB,iCAAiC;MACjC,yBAAyB;KAC5B,CAAC;IACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;MAC1C,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;EAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BJ","sourcesContent":["import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/*\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n"]}

package/dist/esm/limel-header.entry.js CHANGED Viewed

@@ -29,7 +29,13 @@ const Header = class {
     if (!this.supportingText) {
       return;
     }
-    return (h("span", { class: "subheading__supporting-text" }, h("span", null, this.subheadingDivider), this.supportingText));
+    return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
+  }
+  renderSubheadingDivider() {
+    if (!this.subheadingDivider) {
+      return;
+    }
+    return h("span", null, this.subheadingDivider);
   }
 };
 Header.style = headerCss;

package/dist/esm/limel-header.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;~~6BA8BoB~~,GAAG;;~~EAE/B~~,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClB,WAAK,KAAK,EAAC,UAAU,IACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS,IAChB,eAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,6BAA6B,~~IACrC~~,~~gBAAO,~~IAAI,CAAC,~~iBAAiB~~,~~CAAQ~~,~~EACpC~~,IAAI,CAAC,cAAc,CACjB,EACT;GACL;;;;;;","names":[],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/*\n @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n /\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n ~~<span>~~{this.~~subheadingDivider~~}~~</span>\~~n {this.supportingText}\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,ynDAAynD;;MC4D9nD,MAAM;;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,OAAO;MACH,WAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,UAAU,EAAE,EAClB,WAAK,KAAK,EAAC,UAAU,IACjB,UAAI,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,IAClC,IAAI,CAAC,OAAO,CACZ,EACL,UAAI,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,IACxC,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,oBAAoB,EAAE,CAC3B,CACH,CACJ;MACN,YAAM,IAAI,EAAC,SAAS,IAChB,eAAQ,CACL;KACV,CAAC;GACL;EAEO,UAAU;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;GAC/D;EAEO,oBAAoB;IACxB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACtB,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,6BAA6B,IACpC,IAAI,CAAC,uBAAuB,EAAE,EAC9B,IAAI,CAAC,cAAc,CACjB,EACT;GACL;EAEO,uBAAuB;IAC3B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACzB,OAAO;KACV;IAED,OAAO,gBAAO,IAAI,CAAC,iBAAiB,CAAQ,CAAC;GAChD;;;;;;","names":[],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/*\n @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n /\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/\n A header is the top most visual element in a component, page, card, or a view.\n \n ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n \n For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n \n \n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n \n :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n \n \n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n \n @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n /\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /\n Icon to display\n /\n @Prop()\n public icon?: string \| Icon;\n\n /\n Title to display\n /\n @Prop()\n public heading?: string;\n\n /\n Subheading to display\n /\n @Prop()\n public subheading?: string;\n\n /\n An extra string of text to display along with with the Subheading\n /\n @Prop()\n public supportingText?: string;\n\n /\n The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"version":3}

package/dist/esm/limel-popover_2.entry.js CHANGED Viewed

@@ -53,6 +53,21 @@ const Popover = class {
       event.preventDefault();
       this.close.emit();
     };
+    this.setTriggerAttributes = (element) => {
+      const attributes = {
+        'aria-haspopup': true,
+        'aria-expanded': this.open,
+        role: 'button',
+      };
+      for (const [key, value] of Object.entries(attributes)) {
+        if (!value) {
+          element.removeAttribute(key);
+        }
+        else {
+          element.setAttribute(key, String(value));
+        }
+      }
+    };
     this.open = false;
     this.openDirection = undefined;
     this.portalId = createRandomString();
@@ -64,6 +79,10 @@ const Popover = class {
   componentWillLoad() {
     this.setupGlobalHandlers();
   }
+  componentDidRender() {
+    const slotElement = this.host.shadowRoot.querySelector('slot');
+    slotElement.assignedElements().forEach(this.setTriggerAttributes);
+  }
   setupGlobalHandlers() {
     if (this.open) {
       document.addEventListener('click', this.globalClickListener, {

package/dist/esm/limel-popover_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-popover.limel-popover-surface.entry.js","mappings":"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","names":[],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\"></slot>\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}
1	+ {"file":"limel-popover.limel-popover-surface.entry.js","mappings":";;;;;;;;;;AAAA;;;;;;;;;;;SAWgB,cAAc,CAC1B,OAAoB,EACpB,KAAkB;;EAElB,IAAI,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAI,MAAA,OAAO,CAAC,UAAU,0CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA,EAAE;IAChE,OAAO,IAAI,CAAC;GACf;EAED,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;EACjC,IAAI,CAAC,MAAM,EAAE;IACT,OAAO,KAAK,CAAC;GAChB;EAED,OAAO,cAAc,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC3C,CAAC;AAED,SAAS,UAAU,CAAC,OAAoB;EACpC,MAAM,MAAM,GAAQ,OAAO,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;EAChE,IAAI,MAAM,EAAE;IACR,OAAO,MAAM,CAAC,YAAY,CAAC;GAC9B;EAED,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,EAAgB,CAAC;EAErD,OAAO,QAAQ,CAAC,IAAI,CAAC;AACzB;;ACpCA,MAAM,UAAU,GAAG,yDAAyD;;MCsE/D,OAAO;EAwBhB;;;IA+EQ,yBAAoB,GAAG,CAAC,KAAoB;MAChD,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QACtB,OAAO;OACV;MAED,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,yBAAoB,GAAG,CAAC,OAAoB;MAChD,MAAM,UAAU,GAAG;QACf,eAAe,EAAE,IAAI;QACrB,eAAe,EAAE,IAAI,CAAC,IAAI;QAC1B,IAAI,EAAE,QAAQ;OACjB,CAAC;MAEF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;QACnD,IAAI,CAAC,KAAK,EAAE;UACR,OAAO,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;SAChC;aAAM;UACH,OAAO,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;OACJ;KACJ,CAAC;gBA1HY,KAAK;;IAoBf,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;IACrC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClE;EAGS,SAAS;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC9B;EAEM,iBAAiB;IACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC9B;EAEM,kBAAkB;IACrB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/D,WAAW,CAAC,gBAAgB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;GACrE;EAEO,mBAAmB;IACvB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAE;QACzD,OAAO,EAAE,IAAI;OAChB,CAAC,CAAC;MACH,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACjE;SAAM;MACH,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MAChE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KACpE;GACJ;EAEM,MAAM;IACT,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9C,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC9D,mBAAmB,CACtB,CAAC;IAEF,QACI,WAAK,KAAK,EAAC,gBAAgB,IACvB,YAAM,IAAI,EAAC,SAAS,GAAG,EACvB,oBACI,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,cAAc,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAC5C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,6BACI,iBAAiB,EAAE,IAAI,CAAC,IAAI,CAAC,QAAQ,EACrC,KAAK,EAAE,aAAa,GACtB,CACS,CACb,EACR;GACL;EAEO,mBAAmB,CAAC,KAAiB;IACzC,MAAM,OAAO,GAAgB,KAAK,CAAC,MAAqB,CAAC;IACzD,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACzD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,KAAK,CAAC,cAAc,EAAE,CAAC;MACvB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB;GACJ;EAEO,gBAAgB;IACpB,MAAM,aAAa,GAAG;MAClB,yBAAyB;MACzB,iCAAiC;MACjC,yBAAyB;KAC5B,CAAC;IACF,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,QAAQ;MACtC,OAAO,KAAK,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;KAC3C,CAAC,CAAC;IAEH,OAAO,SAAS,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;GAC3C;;;;;;;;AC3KL,MAAM,iBAAiB,GAAG,y+BAAy+B;;MCYt/B,cAAc;;;;;EAUhB,gBAAgB;IACnB,IAAI,CAAC,aAAa,EAAE,CAAC;GACxB;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,uBAAuB,EAAC,QAAQ,EAAC,GAAG,GAAG,CAAC;GAC7D;EAEO,aAAa;IACjB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wBAAwB,CAC3B,CAAC;IAEF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;MAC7C,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS,EAAE;QAC1B,OAAO;OACV;MAED,eAAe,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACtC,CAAC,CAAC;GACN;;;;;;;","names":[],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/*\n Check if an element is a descendant of another\n \n If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n \n @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n /\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) \|\| element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/\n @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n /\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/\n A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n \n Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n \n :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n \n ## Usage\n * Use a popover to show options or information related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n \n Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n \n When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n \n \n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n \n :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n \n However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n \n :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n \n @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n /\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /\n True if the content within the popover should be visible\n /\n @Prop()\n public open = false;\n\n /\n Decides the popover's location in relation to its trigger\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Emits an event when the component is closing\n /\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/*\n @slot - Content to put inside the surface\n * @private\n /\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /\n Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"version":3}

package/dist/lime-elements/lime-elements.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-5240b8a3",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[1],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-71bf6613",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],helperText:[513,"helper-text"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],invalid:[516],value:[16],searcher:[16],multiple:[4],delimiter:[513],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],badgeIcons:[516,"badge-icons"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-8b79a71e",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-a2b7eea7",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-22ff9bb0",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-b8c181ce",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-a407af3a",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-3985cb80",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-c428bb03",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1c67a941",[[1,"limel-table",{data:[16],columns:[16],mode:[1],layout:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"],aggregates:[16],selectable:[4],selection:[16]}]]],["p-8afe01df",[[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],removable:[516],type:[513]}]]],["p-536668b4",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-1f689b7d",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-79fa180b",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-befdbcee",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-8289f3f5",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-7be33785",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-0cc099b9",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-de97b8a2",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"],subheadingDivider:[1,"subheading-divider"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-cb1ba78f",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-f081f064",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-a4be2cd0",[[1,"limel-badge",{label:[520]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95561c5f",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-b9b48ece",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-22bc684d",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[516],inputType:[513,"input-type"],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[1],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-041f1819",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-0b7aea5a",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-920d88db",[[1,"limel-markdown",{value:[1]}]]],["p-e39732b4",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-aa3a72a1",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-0e3cd73a",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],prefix:[513],suffix:[513],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]]],e)));
+import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l([["p-5240b8a3",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]],["p-019675bd",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-3480e5ff",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-c0543a74",[[1,"limel-file-viewer",{url:[513],filename:[513],alt:[513],allowFullscreen:[516,"allow-fullscreen"],allowOpenInNewTab:[516,"allow-open-in-new-tab"],allowDownload:[516,"allow-download"],language:[1],officeViewer:[513,"office-viewer"],actions:[16],isFullscreen:[32],fileType:[32],loading:[32],fileUrl:[32]}]]],["p-e0f37631",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-5d140ffb",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-71bf6613",[[1,"limel-picker",{disabled:[4],readonly:[516],label:[1],searchLabel:[1,"search-label"],helperText:[513,"helper-text"],leadingIcon:[1,"leading-icon"],emptyResultMessage:[1,"empty-result-message"],required:[4],invalid:[516],value:[16],searcher:[16],multiple:[4],delimiter:[513],actions:[16],actionPosition:[1,"action-position"],actionScrollBehavior:[1,"action-scroll-behavior"],badgeIcons:[516,"badge-icons"],items:[32],textValue:[32],loading:[32],chips:[32]}]]],["p-8b79a71e",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-030dba13",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-a2b7eea7",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-22ff9bb0",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-1ca94bcf",[[1,"limel-help",{value:[1],trigger:[1],readMoreLink:[16],openDirection:[513,"open-direction"],isOpen:[32]}]]],["p-b8c181ce",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[16],options:[16],multiple:[4],menuOpen:[32]}]]],["p-a407af3a",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],invalid:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-3985cb80",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-c428bb03",[[1,"limel-checkbox",{disabled:[516],readonly:[516],invalid:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-1c67a941",[[1,"limel-table",{data:[16],columns:[16],mode:[1],layout:[1],pageSize:[2,"page-size"],totalRows:[2,"total-rows"],sorting:[16],activeRow:[1040],movableColumns:[4,"movable-columns"],loading:[4],page:[2],emptyMessage:[1,"empty-message"],aggregates:[16],selectable:[4],selection:[16]}]]],["p-8afe01df",[[1,"limel-chip",{language:[513],text:[513],icon:[1],link:[16],badge:[520],disabled:[516],readonly:[516],selected:[516],removable:[516],type:[513]}]]],["p-536668b4",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-1f689b7d",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-dd034867",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-ce3cf1a1",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-235c7556",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-79fa180b",[[1,"limel-slider",{disabled:[516],readonly:[516],factor:[514],label:[513],helperText:[513,"helper-text"],unit:[513],value:[514],valuemax:[514],valuemin:[514],step:[514],percentageClass:[32]}]]],["p-befdbcee",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],invalid:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-7ecb6224",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-58d7f49a",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-8289f3f5",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-89a75b1e",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-554cdf9e",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-7be33785",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-0cc099b9",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-05e6d75e",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"],subheadingDivider:[1,"subheading-divider"]}]]],["p-86550ce4",[[1,"limel-help-content",{value:[1],readMoreLink:[16]}]]],["p-cb1ba78f",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4],currentStep:[4,"current-step"]}]]],["p-f081f064",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-552fd521",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-a4be2cd0",[[1,"limel-badge",{label:[520]}]]],["p-9a45ad26",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95561c5f",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],surfaceWidth:[513,"surface-width"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"],loading:[516],currentSubMenu:[1040],searcher:[16],emptyResultMessage:[1,"empty-result-message"],loadingSubItems:[32],menuBreadCrumb:[32],searchValue:[32],searchResults:[32]}],[1,"limel-breadcrumbs",{items:[16],divider:[1]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-b9b48ece",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-22bc684d",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[516],invalid:[516],inputType:[513,"input-type"],maxItems:[514,"max-items"],required:[516],searchLabel:[513,"search-label"],emptyInputOnBlur:[516,"empty-input-on-blur"],clearAllButton:[4,"clear-all-button"],leadingIcon:[513,"leading-icon"],delimiter:[513],language:[1],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-041f1819",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-0b7aea5a",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-920d88db",[[1,"limel-markdown",{value:[1]}]]],["p-e39732b4",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}],[1,"limel-portal",{openDirection:[513,"open-direction"],position:[513],containerId:[513,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[516,"inherit-parent-width"],visible:[516],anchor:[16]}]]],["p-e53b7ccf",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-0e3cd73a",[[1,"limel-input-field",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],prefix:[513],suffix:[513],required:[516],value:[513],trailingIcon:[513,"trailing-icon"],leadingIcon:[513,"leading-icon"],pattern:[513],type:[513],formatNumber:[516,"format-number"],step:[520],max:[514],min:[514],maxlength:[514],minlength:[514],completions:[16],showLink:[516,"show-link"],locale:[513],isFocused:[32],isModified:[32],showCompletions:[32]}],[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]]],e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/{p-de97b8a2.entry.js → p-05e6d75e.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-88694767.js";const a='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const t=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){const e=i(this.icon);if(!e){return}return r("limel-icon",{class:"icon",badge:true,name:e})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},r("span",null,this.subheadingDivider),this.supportingText)}};t.style=a;export{t as limel_header};
-//# sourceMappingURL=p-de97b8a2.entry.js.map
+import{r as e,h as r}from"./p-3075aa67.js";import{g as i}from"./p-88694767.js";const t='@charset "UTF-8";:host(limel-header){display:flex;align-items:center;box-sizing:border-box;width:100%;background-color:var(--header-background-color, rgb(var(--contrast-300)));border-top-left-radius:var(--header-top-right-left-border-radius, 0.75rem);border-top-right-radius:var(--header-top-right-left-border-radius, 0.75rem);padding:0.25rem}.information{display:flex;flex-grow:1;align-items:center;min-width:0}.icon{flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:1.75rem;margin:0 0.5rem}.headings{min-width:0;margin-left:0.25rem}.heading,.subheading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;padding:0}.heading{color:var(--header-heading-color, rgb(var(--contrast-1100)));font-size:1rem;font-weight:500}.subheading{color:var(--header-subheading-color, rgb(var(--contrast-900)));font-size:0.8125rem;font-weight:400}.subheading__supporting-text{color:var(--header-supporting-text-color, var(--header-subheading-color))}.subheading__supporting-text span{margin:0 0.125rem}slot[name=actions]{flex-shrink:0}:host(limel-header.is-narrow){padding:0.125rem 0.25rem}:host(limel-header.is-narrow) .icon{margin-right:0.125rem;width:1.25rem}:host(limel-header.is-narrow) .heading{font-size:0.9375rem}:host(limel-header.has-responsive-layout){display:grid;grid-template-columns:repeat(auto-fit, minmax(clamp(50%, var(--header-responsive-breakpoint, 22rem), 100%), 1fr))}:host(limel-header.has-responsive-layout) .headings{padding-right:0.5rem}:host(limel-header.has-responsive-layout) slot[name=actions]{display:flex;justify-content:flex-end}';const a=class{constructor(r){e(this,r);this.icon=undefined;this.heading=undefined;this.subheading=undefined;this.supportingText=undefined;this.subheadingDivider="·"}render(){return[r("div",{class:"information"},this.renderIcon(),r("div",{class:"headings"},r("h1",{class:"heading",title:this.heading},this.heading),r("h2",{class:"subheading",title:this.subheading},this.subheading,this.renderSupportingText()))),r("slot",{name:"actions"},r("slot",null))]}renderIcon(){const e=i(this.icon);if(!e){return}return r("limel-icon",{class:"icon",badge:true,name:e})}renderSupportingText(){if(!this.supportingText){return}return r("span",{class:"subheading__supporting-text"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};a.style=t;export{a as limel_header};
+//# sourceMappingURL=p-05e6d75e.entry.js.map

package/dist/lime-elements/p-05e6d75e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","renderSubheadingDivider","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon?: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading?: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading?: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText?: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider?: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n {this.renderSubheadingDivider()}\n {this.supportingText}\n </span>\n );\n }\n\n private renderSubheadingDivider() {\n if (!this.subheadingDivider) {\n return;\n }\n\n return <span>{this.subheadingDivider}</span>;\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,wnD,MC4DLC,EAAM,M,mJA8BqB,G,CAE7BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACPC,KAAKW,0BACLX,KAAKU,e,CAKVC,0BACJ,IAAKX,KAAKY,kBAAmB,CACzB,M,CAGJ,OAAOd,EAAA,YAAOE,KAAKY,kB"}

package/dist/lime-elements/p-e53b7ccf.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as o,g as r}from"./p-3075aa67.js";import{c as i}from"./p-3ccdc4a3.js";import{E as s}from"./p-93c6d561.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,t){var o;if(e.contains(t)\|\|((o=e.shadowRoot)===null\|\|o===void 0?void 0:o.contains(t))){return true}const r=c(t);if(!r){return false}return a(e,r)}function c(e){const t=e.closest(".limel-portal--container");if(t){return t.portalSource}const o=e.getRootNode();return o.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(o){e(this,o);this.close=t(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.setTriggerAttributes=e=>{const t={"aria-haspopup":true,"aria-expanded":this.open,role:"button"};for(const[o,r]of Object.entries(t)){if(!r){e.removeAttribute(o)}else{e.setAttribute(o,String(r))}}};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}componentDidRender(){const e=this.host.shadowRoot.querySelector("slot");e.assignedElements().forEach(this.setTriggerAttributes)}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();const t=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return o("div",{class:"trigger-anchor"},o("slot",{name:"trigger"}),o("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t},openDirection:this.openDirection},o("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const t=e.target;const o=a(this.host,t);if(this.open&&!o){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const t=getComputedStyle(this.host);const o=e.map((e=>t.getPropertyValue(e)));return n(e,o)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const u=class{constructor(t){e(this,t);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return o("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((t=>{if(t.slot==="trigger"){return}e.appendChild(t)}))}get host(){return r(this)}};u.style=d;export{l as limel_popover,u as limel_popover_surface};
2	+ //# sourceMappingURL=p-e53b7ccf.entry.js.map

package/dist/lime-elements/p-e53b7ccf.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","setTriggerAttributes","attributes","open","role","value","Object","entries","removeAttribute","setAttribute","String","portalId","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","componentDidRender","slotElement","querySelector","assignedElements","forEach","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","Array","from","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) || element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n public componentDidRender() {\n const slotElement = this.host.shadowRoot.querySelector('slot');\n slotElement.assignedElements().forEach(this.setTriggerAttributes);\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\" />\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n\n private setTriggerAttributes = (element: HTMLElement) => {\n const attributes = {\n 'aria-haspopup': true,\n 'aria-expanded': this.open,\n role: 'button',\n };\n\n for (const [key, value] of Object.entries(attributes)) {\n if (!value) {\n element.removeAttribute(key);\n } else {\n element.setAttribute(key, String(value));\n }\n }\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > * {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /**\n * Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"mappings":"sSAWgBA,EACZC,EACAC,G,MAEA,GAAID,EAAQE,SAASD,MAAUE,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAED,SAASD,IAAQ,CAChE,OAAO,I,CAGX,MAAMI,EAASC,EAAWL,GAC1B,IAAKI,EAAQ,CACT,OAAO,K,CAGX,OAAON,EAAeC,EAASK,EACnC,CAEA,SAASC,EAAWN,GAChB,MAAMO,EAAcP,EAAQQ,QAAQ,4BACpC,GAAID,EAAQ,CACR,OAAOA,EAAOE,Y,CAGlB,MAAMC,EAAWV,EAAQW,cAEzB,OAAOD,EAASE,IACpB,CCpCA,MAAMC,EAAa,0D,MCsENC,EAAO,MAwBhBC,YAAAC,G,uCA+EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,EAGbR,KAAAS,qBAAwB1B,IAC5B,MAAM2B,EAAa,CACf,gBAAiB,KACjB,gBAAiBV,KAAKW,KACtBC,KAAM,UAGV,IAAK,MAAOT,EAAKU,KAAUC,OAAOC,QAAQL,GAAa,CACnD,IAAKG,EAAO,CACR9B,EAAQiC,gBAAgBb,E,KACrB,CACHpB,EAAQkC,aAAad,EAAKe,OAAOL,G,cAvH/B,M,6BAoBVb,KAAKmB,SAAWC,IAChBpB,KAAKqB,oBAAsBrB,KAAKqB,oBAAoBC,KAAKtB,K,CAInDuB,YACNvB,KAAKwB,qB,CAGFC,oBACHzB,KAAKwB,qB,CAGFE,qBACH,MAAMC,EAAc3B,KAAKL,KAAKR,WAAWyC,cAAc,QACvDD,EAAYE,mBAAmBC,QAAQ9B,KAAKS,qB,CAGxCe,sBACJ,GAAIxB,KAAKW,KAAM,CACXoB,SAASC,iBAAiB,QAAShC,KAAKqB,oBAAqB,CACzDY,QAAS,OAEbF,SAASC,iBAAiB,QAAShC,KAAKC,qB,KACrC,CACH8B,SAASG,oBAAoB,QAASlC,KAAKqB,qBAC3CU,SAASG,oBAAoB,QAASlC,KAAKC,qB,EAI5CkC,SACH,MAAMC,EAAgBpC,KAAKqC,mBAC3B,MAAMC,EAAgBC,iBAAiBvC,KAAKL,MAAM6C,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS5C,KAAKW,KACdkC,YAAa7C,KAAKmB,SAClB2B,eAAgB,CAAE,UAAWR,GAC7BS,cAAe/C,KAAK+C,eAEpBN,EAAA,yBACIO,kBAAmBhD,KAAKL,KAAKsD,SAC7BC,MAAOd,K,CAOnBf,oBAAoBnB,GACxB,MAAMnB,EAAuBmB,EAAMiD,OACnC,MAAMC,EAAgBtE,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKW,OAASyC,EAAe,CAC7BlD,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIX6B,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBvC,KAAKL,MACpC,MAAM2D,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFC1KxC,MAAMI,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH5D,KAAK6D,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkB/D,KAAKL,KAAKR,WAAWyC,cACzC,0BAGJoC,MAAMC,KAAKjE,KAAKgD,mBAAmBlB,SAAS9C,IACxC,GAAIA,EAAMkF,OAAS,UAAW,CAC1B,M,CAGJH,EAAgBI,YAAYnF,EAAM,G"}

package/dist/types/components/header/header.d.ts CHANGED Viewed

@@ -54,25 +54,26 @@ export declare class Header {
   /**
    * Icon to display
    */
-  icon: string | Icon;
+  icon?: string | Icon;
   /**
    * Title to display
    */
-  heading: string;
+  heading?: string;
   /**
    * Subheading to display
    */
-  subheading: string;
+  subheading?: string;
   /**
    * An extra string of text to display along with with the Subheading
    */
-  supportingText: string;
+  supportingText?: string;
   /**
    * The visual divider that separates the `subheading` and the `supportingText`.
    * It must be a single character such as `-` or `,`.
    */
-  subheadingDivider: string;
+  subheadingDivider?: string;
   render(): any[];
   private renderIcon;
   private renderSupportingText;
+  private renderSubheadingDivider;
 }

package/dist/types/components/popover/popover.d.ts CHANGED Viewed

@@ -67,9 +67,11 @@ export declare class Popover {
   constructor();
   protected watchOpen(): void;
   componentWillLoad(): void;
+  componentDidRender(): void;
   private setupGlobalHandlers;
   render(): any;
   private globalClickListener;
   private getCssProperties;
   private handleGlobalKeyPress;
+  private setTriggerAttributes;
 }

package/dist/types/components.d.ts CHANGED Viewed

@@ -1094,23 +1094,23 @@ export namespace Components {
         /**
           * Title to display
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * Icon to display
          */
-        "icon": string | Icon;
+        "icon"?: string | Icon;
         /**
           * Subheading to display
          */
-        "subheading": string;
+        "subheading"?: string;
         /**
           * The visual divider that separates the `subheading` and the `supportingText`. It must be a single character such as `-` or `,`.
          */
-        "subheadingDivider": string;
+        "subheadingDivider"?: string;
         /**
           * An extra string of text to display along with with the Subheading
          */
-        "supportingText": string;
+        "supportingText"?: string;
     }
     /**
      * A good design is self-explanatory! However, sometimes concepts are

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "37.1.0-next.92",
+  "version": "37.1.0-next.94",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^18.4.4",
+    "@commitlint/config-conventional": "^18.5.0",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^2.4.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
@@ -54,8 +54,8 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/tabulator-tables": "^4.9.4",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "awesome-debounce-promise": "^2.1.0",
     "codemirror": "^5.65.9",
     "cross-env": "^7.0.3",

package/dist/lime-elements/p-aa3a72a1.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as o,h as t,g as r}from"./p-3075aa67.js";import{c as i}from"./p-3ccdc4a3.js";import{E as s}from"./p-93c6d561.js";import{z as n}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(e,o){var t;if(e.contains(o)\|\|((t=e.shadowRoot)===null\|\|t===void 0?void 0:t.contains(o))){return true}const r=c(o);if(!r){return false}return a(e,r)}function c(e){const o=e.closest(".limel-portal--container");if(o){return o.portalSource}const t=e.getRootNode();return t.host}const p=".trigger-anchor{display:inline-block;position:relative}";const l=class{constructor(t){e(this,t);this.close=o(this,"close",7);this.handleGlobalKeyPress=e=>{if(e.key!==s){return}e.stopPropagation();e.preventDefault();this.close.emit()};this.open=false;this.openDirection=undefined;this.portalId=i();this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}setupGlobalHandlers(){if(this.open){document.addEventListener("click",this.globalClickListener,{capture:true});document.addEventListener("keyup",this.handleGlobalKeyPress)}else{document.removeEventListener("click",this.globalClickListener);document.removeEventListener("keyup",this.handleGlobalKeyPress)}}render(){const e=this.getCssProperties();const o=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return t("div",{class:"trigger-anchor"},t("slot",{name:"trigger"}),t("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":o},openDirection:this.openDirection},t("limel-popover-surface",{contentCollection:this.host.children,style:e})))}globalClickListener(e){const o=e.target;const t=a(this.host,o);if(this.open&&!t){e.stopPropagation();e.preventDefault();this.close.emit()}}getCssProperties(){const e=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"];const o=getComputedStyle(this.host);const t=e.map((e=>o.getPropertyValue(e)));return n(e,t)}get host(){return r(this)}static get watchers(){return{open:["watchOpen"]}}};l.style=p;const d='@charset "UTF-8";:host(limel-popover-surface){isolation:isolate;position:relative;display:flex;width:var(--popover-surface-width, auto);max-height:inherit;max-width:calc(100vw - 2rem);margin:0 0.25rem}.limel-popover-surface{flex:1;min-width:0;min-height:0;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}.limel-popover-surface>*{box-sizing:border-box}';const u=class{constructor(o){e(this,o);this.contentCollection=undefined}componentDidLoad(){this.appendElement()}render(){return t("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const e=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((o=>{if(o.slot==="trigger"){return}e.appendChild(o)}))}get host(){return r(this)}};u.style=d;export{l as limel_popover,u as limel_popover_surface};
2	- //# sourceMappingURL=p-aa3a72a1.entry.js.map

package/dist/lime-elements/p-aa3a72a1.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["portalContains","element","child","contains","_a","shadowRoot","parent","findParent","portal","closest","portalSource","rootNode","getRootNode","host","popoverCss","Popover","constructor","hostRef","this","handleGlobalKeyPress","event","key","ESCAPE","stopPropagation","preventDefault","close","emit","portalId","createRandomString","globalClickListener","bind","watchOpen","setupGlobalHandlers","componentWillLoad","open","document","addEventListener","capture","removeEventListener","render","cssProperties","getCssProperties","popoverZIndex","getComputedStyle","getPropertyValue","h","class","name","visible","containerId","containerStyle","openDirection","contentCollection","children","style","target","clickedInside","propertyNames","values","map","property","zipObject","popoverSurfaceCss","PopoverSurface","componentDidLoad","appendElement","tabindex","portalContainer","querySelector","Array","from","forEach","slot","appendChild"],"sources":["./src/components/portal/contains.ts","./src/components/popover/popover.scss?tag=limel-popover&encapsulation=shadow","./src/components/popover/popover.tsx","./src/components/popover-surface/popover-surface.scss?tag=limel-popover-surface&encapsulation=shadow","./src/components/popover-surface/popover-surface.tsx"],"sourcesContent":["/**\n * Check if an element is a descendant of another\n *\n * If the child element is a descendant of a limel-portal, this function will\n * go back through the portal and check the original tree recursively\n *\n * @param {HTMLElement} element the parent element\n * @param {HTMLElement} child the child element to check\n * @returns {boolean} `true` if child is a descendant of element, taking\n * portals into account\n */\nexport function portalContains(\n element: HTMLElement,\n child: HTMLElement,\n): boolean {\n if (element.contains(child) || element.shadowRoot?.contains(child)) {\n return true;\n }\n\n const parent = findParent(child);\n if (!parent) {\n return false;\n }\n\n return portalContains(element, parent);\n}\n\nfunction findParent(element: HTMLElement) {\n const portal: any = element.closest('.limel-portal--container');\n if (portal) {\n return portal.portalSource;\n }\n\n const rootNode = element.getRootNode() as ShadowRoot;\n\n return rootNode.host;\n}\n","/**\n * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`\n * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.\n * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.\n * @prop --popover-z-index: z-index of the popover.\n */\n\n.trigger-anchor {\n display: inline-block;\n position: relative;\n}\n","import {\n Component,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { zipObject } from 'lodash-es';\nimport { portalContains } from '../portal/contains';\nimport { ESCAPE } from '../../util/keycodes';\nimport { OpenDirection } from '../../interface';\n\n/**\n * A popover is an impermanent layer that is displayed on top of other content\n * when user taps an element that triggers the popover. This element can be\n * practically anything, a button, piece of text, and icon, etc.\n *\n * Popovers are nonmodal, thus they don't have a semi-transparent backdrop layer\n * that darkens the content below them. Also for the same reason, they can be\n * dismissed by tapping or clicking another part of the screen, but not by a\n * clicking a button or link on the popover itself.\n *\n * :::warning\n * The component is emitting a close event when you click outside its container\n * or press the <kbd>Esc</kbd> key. However, it’s up to you as consumer to react\n * properly on this event and hide the component (preferably by setting the\n * property `open` to `false`).\n * :::\n *\n * ## Usage\n * Use a popover to show **options** or **information** related to the trigger\n * onscreen. A typical use case for popovers is a tooltip, in which you show\n * help text or contextual information to users.\n *\n * Popovers are most appropriate on larger screens but can be used on smaller\n * screens too, as long as their content is responsive and takes into account\n * the context they are displayed on.\n *\n * When a popover is displayed, interactions with other controls are blocked,\n * until user dismisses the popover.\n *\n *\n * ## Layout\n * Popovers has only one slot in which you can import a custom web-component.\n *\n * :::note\n * You must make sure that web-components that you import into the slot has\n * a `width: 100%;` style so that it can horizontally stretch across the popover.\n *\n * However, `width` of the popover can be controlled by specifying a CSS variable\n * of `--popover-surface-width`. If you don't specify any width, the popover\n * will grow as wide as its content.\n * :::\n *\n * :::important\n * Do not make a popover too big. They should never take over the entire screen.\n * If your content is that big, you should probably be using a Modal instead.\n * :::\n *\n * @slot - Content to put inside the surface\n * @exampleComponent limel-example-popover\n */\n@Component({\n tag: 'limel-popover',\n shadow: true,\n styleUrl: 'popover.scss',\n})\nexport class Popover {\n /**\n * True if the content within the popover should be visible\n */\n @Prop()\n public open = false;\n\n /**\n * Decides the popover's location in relation to its trigger\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Emits an event when the component is closing\n */\n @Event()\n private close: EventEmitter<void>;\n\n @Element()\n private host: HTMLLimelPopoverElement;\n\n private portalId: string;\n\n constructor() {\n this.portalId = createRandomString();\n this.globalClickListener = this.globalClickListener.bind(this);\n }\n\n @Watch('open')\n protected watchOpen() {\n this.setupGlobalHandlers();\n }\n\n public componentWillLoad() {\n this.setupGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.open) {\n document.addEventListener('click', this.globalClickListener, {\n capture: true,\n });\n document.addEventListener('keyup', this.handleGlobalKeyPress);\n } else {\n document.removeEventListener('click', this.globalClickListener);\n document.removeEventListener('keyup', this.handleGlobalKeyPress);\n }\n }\n\n public render() {\n const cssProperties = this.getCssProperties();\n const popoverZIndex = getComputedStyle(this.host).getPropertyValue(\n '--popover-z-index',\n );\n\n return (\n <div class=\"trigger-anchor\">\n <slot name=\"trigger\"></slot>\n <limel-portal\n visible={this.open}\n containerId={this.portalId}\n containerStyle={{ 'z-index': popoverZIndex }}\n openDirection={this.openDirection}\n >\n <limel-popover-surface\n contentCollection={this.host.children}\n style={cssProperties}\n />\n </limel-portal>\n </div>\n );\n }\n\n private globalClickListener(event: MouseEvent) {\n const element: HTMLElement = event.target as HTMLElement;\n const clickedInside = portalContains(this.host, element);\n if (this.open && !clickedInside) {\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n }\n }\n\n private getCssProperties() {\n const propertyNames = [\n '--popover-surface-width',\n '--popover-body-background-color',\n '--popover-border-radius',\n ];\n const style = getComputedStyle(this.host);\n const values = propertyNames.map((property) => {\n return style.getPropertyValue(property);\n });\n\n return zipObject(propertyNames, values);\n }\n\n private handleGlobalKeyPress = (event: KeyboardEvent) => {\n if (event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.close.emit();\n };\n}\n","@use '../../style/functions';\n@use '../../style/mixins';\n\n:host(limel-popover-surface) {\n isolation: isolate;\n\n position: relative;\n display: flex;\n\n width: var(--popover-surface-width, auto);\n max-height: inherit; // inherits it from the dynamically calculated `max-height` of `limel-portal--container`\n max-width: calc(100vw - 2rem);\n margin: 0 0.25rem;\n}\n\n.limel-popover-surface {\n flex: 1;\n min-width: 0;\n min-height: 0;\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n box-shadow: var(--shadow-depth-16);\n\n backdrop-filter: blur(functions.pxToRem(5));\n -webkit-backdrop-filter: blur(functions.pxToRem(5));\n\n &:after {\n // allows using `--popover-body-background-color` while\n // getting the blurred backdrop effect\n transition: opacity 0.4s ease;\n pointer-events: none;\n\n content: '';\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n\n opacity: 0.75;\n\n border-radius: var(--popover-border-radius, functions.pxToRem(12));\n background-color: var(\n --popover-body-background-color,\n var(--lime-elevated-surface-background-color)\n );\n }\n\n @include mixins.visualize-keyboard-focus;\n\n &:focus,\n &:focus-within {\n &:after {\n opacity: 1;\n }\n }\n\n & > * {\n // this fixes some unwanted layout issues\n // which might be very hard for consumers to realize\n // and fix by themselves. Without this code,\n // if the consumer sets for example paddings in\n // what they send to the popover, their element\n // can grow larger than the popover surface\n box-sizing: border-box;\n }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\n\n/**\n * @slot - Content to put inside the surface\n * @private\n */\n\n@Component({\n tag: 'limel-popover-surface',\n shadow: true,\n styleUrl: 'popover-surface.scss',\n})\nexport class PopoverSurface {\n /**\n * Content to render\n */\n @Prop()\n public contentCollection: HTMLCollection;\n\n @Element()\n private host: HTMLLimelPopoverSurfaceElement;\n\n public componentDidLoad() {\n this.appendElement();\n }\n\n public render() {\n return <div class=\"limel-popover-surface\" tabindex=\"0\" />;\n }\n\n private appendElement() {\n const portalContainer = this.host.shadowRoot.querySelector(\n '.limel-popover-surface',\n );\n\n Array.from(this.contentCollection).forEach((child) => {\n if (child.slot === 'trigger') {\n return;\n }\n\n portalContainer.appendChild(child);\n });\n }\n}\n"],"mappings":"sSAWgBA,EACZC,EACAC,G,MAEA,GAAID,EAAQE,SAASD,MAAUE,EAAAH,EAAQI,cAAU,MAAAD,SAAA,SAAAA,EAAED,SAASD,IAAQ,CAChE,OAAO,I,CAGX,MAAMI,EAASC,EAAWL,GAC1B,IAAKI,EAAQ,CACT,OAAO,K,CAGX,OAAON,EAAeC,EAASK,EACnC,CAEA,SAASC,EAAWN,GAChB,MAAMO,EAAcP,EAAQQ,QAAQ,4BACpC,GAAID,EAAQ,CACR,OAAOA,EAAOE,Y,CAGlB,MAAMC,EAAWV,EAAQW,cAEzB,OAAOD,EAASE,IACpB,CCpCA,MAAMC,EAAa,0D,MCsENC,EAAO,MAwBhBC,YAAAC,G,uCA0EQC,KAAAC,qBAAwBC,IAC5B,GAAIA,EAAMC,MAAQC,EAAQ,CACtB,M,CAGJF,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,MAAM,E,UApGP,M,6BAoBVR,KAAKS,SAAWC,IAChBV,KAAKW,oBAAsBX,KAAKW,oBAAoBC,KAAKZ,K,CAInDa,YACNb,KAAKc,qB,CAGFC,oBACHf,KAAKc,qB,CAGDA,sBACJ,GAAId,KAAKgB,KAAM,CACXC,SAASC,iBAAiB,QAASlB,KAAKW,oBAAqB,CACzDQ,QAAS,OAEbF,SAASC,iBAAiB,QAASlB,KAAKC,qB,KACrC,CACHgB,SAASG,oBAAoB,QAASpB,KAAKW,qBAC3CM,SAASG,oBAAoB,QAASpB,KAAKC,qB,EAI5CoB,SACH,MAAMC,EAAgBtB,KAAKuB,mBAC3B,MAAMC,EAAgBC,iBAAiBzB,KAAKL,MAAM+B,iBAC9C,qBAGJ,OACIC,EAAA,OAAKC,MAAM,kBACPD,EAAA,QAAME,KAAK,YACXF,EAAA,gBACIG,QAAS9B,KAAKgB,KACde,YAAa/B,KAAKS,SAClBuB,eAAgB,CAAE,UAAWR,GAC7BS,cAAejC,KAAKiC,eAEpBN,EAAA,yBACIO,kBAAmBlC,KAAKL,KAAKwC,SAC7BC,MAAOd,K,CAOnBX,oBAAoBT,GACxB,MAAMnB,EAAuBmB,EAAMmC,OACnC,MAAMC,EAAgBxD,EAAekB,KAAKL,KAAMZ,GAChD,GAAIiB,KAAKgB,OAASsB,EAAe,CAC7BpC,EAAMG,kBACNH,EAAMI,iBACNN,KAAKO,MAAMC,M,EAIXe,mBACJ,MAAMgB,EAAgB,CAClB,0BACA,kCACA,2BAEJ,MAAMH,EAAQX,iBAAiBzB,KAAKL,MACpC,MAAM6C,EAASD,EAAcE,KAAKC,GACvBN,EAAMV,iBAAiBgB,KAGlC,OAAOC,EAAUJ,EAAeC,E,wFCrKxC,MAAMI,EAAoB,s+B,MCYbC,EAAc,M,0DAUhBC,mBACH9C,KAAK+C,e,CAGF1B,SACH,OAAOM,EAAA,OAAKC,MAAM,wBAAwBoB,SAAS,K,CAG/CD,gBACJ,MAAME,EAAkBjD,KAAKL,KAAKR,WAAW+D,cACzC,0BAGJC,MAAMC,KAAKpD,KAAKkC,mBAAmBmB,SAASrE,IACxC,GAAIA,EAAMsE,OAAS,UAAW,CAC1B,M,CAGJL,EAAgBM,YAAYvE,EAAM,G"}

package/dist/lime-elements/p-de97b8a2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["headerCss","Header","render","h","class","this","renderIcon","title","heading","subheading","renderSupportingText","name","icon","getIconName","badge","supportingText","subheadingDivider"],"sources":["./src/components/header/header.scss?tag=limel-header&encapsulation=shadow","./src/components/header/header.tsx"],"sourcesContent":["@use '../../style/mixins.scss';\n@use '../../style/functions.scss';\n\n/**\n * @prop --header-background-color: Background color of header, defaults to `--contrast-300`.\n * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.\n * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.\n * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.\n * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.\n * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.\n * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.\n * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.\n */\n\n:host(limel-header) {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n width: 100%;\n background-color: var(--header-background-color, rgb(var(--contrast-300)));\n border-top-left-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n functions.pxToRem(12)\n );\n padding: functions.pxToRem(4);\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n flex-shrink: 0;\n color: var(--header-icon-color, rgb(var(--contrast-1100)));\n background-color: var(--header-icon-background-color, transparent);\n width: functions.pxToRem(28);\n margin: 0 functions.pxToRem(8);\n}\n\n.headings {\n min-width: 0;\n margin-left: functions.pxToRem(4);\n}\n\n.heading,\n.subheading {\n @include mixins.truncate-text;\n margin: 0;\n padding: 0;\n}\n\n.heading {\n color: var(--header-heading-color, rgb(var(--contrast-1100)));\n font-size: functions.pxToRem(16);\n font-weight: 500;\n}\n\n.subheading {\n color: var(--header-subheading-color, rgb(var(--contrast-900)));\n font-size: functions.pxToRem(13);\n font-weight: 400;\n}\n\n.subheading__supporting-text {\n color: var(--header-supporting-text-color, var(--header-subheading-color));\n span {\n margin: 0 0.125rem;\n }\n}\n\nslot[name='actions'] {\n flex-shrink: 0;\n}\n\n:host(limel-header.is-narrow) {\n padding: functions.pxToRem(2) functions.pxToRem(4);\n\n .icon {\n margin-right: functions.pxToRem(2);\n width: functions.pxToRem(20);\n }\n .heading {\n font-size: functions.pxToRem(15);\n }\n}\n\n:host(limel-header.has-responsive-layout) {\n display: grid;\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n clamp(\n 50%,\n var(--header-responsive-breakpoint, functions.pxToRem(352)),\n 100%\n ),\n 1fr\n )\n );\n .headings {\n padding-right: functions.pxToRem(8);\n }\n slot[name='actions'] {\n display: flex;\n justify-content: flex-end;\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { Icon } from '../../interface';\nimport { getIconName } from '../icon/get-icon-props';\n\n/**\n * A header is the top most visual element in a component, page, card, or a view.\n *\n * ## Usage\n * A header is the first thing that clarifies a context for users.\n * Due to their positions in the UI hierarchy, headers are the most\n * prominent elements of a user interface; and because of that, they carry both\n * vital information and fundamental controls for the area of the interface\n * they represent.\n *\n * For example, when a header is placed on top of a card, it should quickly\n * explain the card to the user. When placed on top of a modal, it should easily\n * clarify what the modal is about. When displayed on top of a fullscreen view,\n * it should indicate where in the system users are, and what part of the app\n * they are looking at.\n *\n *\n * ## Layout\n * The vital information in a header is usually manifested in form of an icon,\n * and a heading. A subheading also could be added to provide supplementary\n * information. There is also a third place for displaying supplementary information\n * or \"supporting text\", which will be rendered as a part of the subheading.\n * Along with this information, headers can also include actions, controls, or\n * menus.\n *\n * :::important\n * Such actions or menus must affect the entire section of the interface\n * which the header is representing. For example, a _Delete_ button on a card\n * header must delete that entire card and its respective contents all together,\n * not for example a selected item which is visible in the content of that card.\n * :::\n *\n *\n * :::warning\n * Do not user background color on icons in the headers. It is much better and\n * much easier for the eye if your icon itself has a color.\n * Background colors behind icons make them look like \"call to action\" buttons\n * and take a lot of attention from users.\n * :::\n *\n * @exampleComponent limel-example-header\n * @exampleComponent limel-example-header-colors\n * @exampleComponent limel-example-header-responsive\n * @exampleComponent limel-example-header-narrow\n * @slot actions - Content (actions) to be put inside the far right surface of\n * the header\n * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This\n * behavior has been deprecated, and support will be dropped in a future\n * version. Please add `slot=\"actions\"` to your elements to ensure your code\n * will continue to work with future versions of Lime Elements.\n */\n@Component({\n tag: 'limel-header',\n shadow: true,\n styleUrl: 'header.scss',\n})\nexport class Header {\n /**\n * Icon to display\n */\n @Prop()\n public icon: string | Icon;\n\n /**\n * Title to display\n */\n @Prop()\n public heading: string;\n\n /**\n * Subheading to display\n */\n @Prop()\n public subheading: string;\n\n /**\n * An extra string of text to display along with with the Subheading\n */\n @Prop()\n public supportingText: string;\n\n /**\n * The visual divider that separates the `subheading` and the `supportingText`.\n * It must be a single character such as `-` or `,`.\n */\n @Prop()\n public subheadingDivider: string = '·';\n\n public render() {\n return [\n <div class=\"information\">\n {this.renderIcon()}\n <div class=\"headings\">\n <h1 class=\"heading\" title={this.heading}>\n {this.heading}\n </h1>\n <h2 class=\"subheading\" title={this.subheading}>\n {this.subheading}\n {this.renderSupportingText()}\n </h2>\n </div>\n </div>,\n <slot name=\"actions\">\n <slot />\n </slot>,\n ];\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return <limel-icon class=\"icon\" badge={true} name={icon} />;\n }\n\n private renderSupportingText() {\n if (!this.supportingText) {\n return;\n }\n\n return (\n <span class=\"subheading__supporting-text\">\n <span>{this.subheadingDivider}</span>\n {this.supportingText}\n </span>\n );\n }\n}\n"],"mappings":"+EAAA,MAAMA,EAAY,wnD,MC4DLC,EAAM,M,mJA8BoB,G,CAE5BC,SACH,MAAO,CACHC,EAAA,OAAKC,MAAM,eACNC,KAAKC,aACNH,EAAA,OAAKC,MAAM,YACPD,EAAA,MAAIC,MAAM,UAAUG,MAAOF,KAAKG,SAC3BH,KAAKG,SAEVL,EAAA,MAAIC,MAAM,aAAaG,MAAOF,KAAKI,YAC9BJ,KAAKI,WACLJ,KAAKK,0BAIlBP,EAAA,QAAMQ,KAAK,WACPR,EAAA,c,CAKJG,aACJ,MAAMM,EAAOC,EAAYR,KAAKO,MAE9B,IAAKA,EAAM,CACP,M,CAGJ,OAAOT,EAAA,cAAYC,MAAM,OAAOU,MAAO,KAAMH,KAAMC,G,CAG/CF,uBACJ,IAAKL,KAAKU,eAAgB,CACtB,M,CAGJ,OACIZ,EAAA,QAAMC,MAAM,+BACRD,EAAA,YAAOE,KAAKW,mBACXX,KAAKU,e"}