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

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 (29) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/limel-header.cjs.entry.js +1 -1
  3. package/dist/cjs/limel-header.cjs.entry.js.map +1 -1
  4. package/dist/cjs/limel-icon.cjs.entry.js +1 -1
  5. package/dist/cjs/limel-icon.cjs.entry.js.map +1 -1
  6. package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js +2 -2
  7. package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js +1 -1
  8. package/dist/collection/components/action-bar/action-bar.js +2 -2
  9. package/dist/collection/components/action-bar/action-bar.types.js.map +1 -1
  10. package/dist/collection/components/header/header.css +4 -3
  11. package/dist/collection/components/icon/icon.css +7 -12
  12. package/dist/collection/components/icon/icon.js +3 -2
  13. package/dist/collection/components/icon/icon.js.map +1 -1
  14. package/dist/esm/limel-header.entry.js +1 -1
  15. package/dist/esm/limel-header.entry.js.map +1 -1
  16. package/dist/esm/limel-icon.entry.js +1 -1
  17. package/dist/esm/limel-icon.entry.js.map +1 -1
  18. package/dist/lime-elements/lime-elements.esm.js +1 -1
  19. package/dist/lime-elements/p-0689363b.entry.js +2 -0
  20. package/dist/lime-elements/{p-9a45ad26.entry.js.map → p-0689363b.entry.js.map} +1 -1
  21. package/dist/lime-elements/p-323bc305.entry.js +2 -0
  22. package/dist/lime-elements/p-323bc305.entry.js.map +1 -0
  23. package/dist/types/components/action-bar/action-bar.types.d.ts +3 -3
  24. package/dist/types/components/icon/icon.d.ts +3 -2
  25. package/dist/types/components.d.ts +12 -8
  26. package/package.json +3 -3
  27. package/dist/lime-elements/p-05e6d75e.entry.js +0 -2
  28. package/dist/lime-elements/p-05e6d75e.entry.js.map +0 -1
  29. package/dist/lime-elements/p-9a45ad26.entry.js +0 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ ## [37.1.0-next.96](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.95...v37.1.0-next.96) (2024-01-29)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+
7
+ * **header:** make the icon badge look nicer ([c96a21e](https://github.com/Lundalogik/lime-elements/commit/c96a21ef62aa6735333c47f7f1eb354c8dc7e9dd))
8
+
9
+ ## [37.1.0-next.95](https://github.com/Lundalogik/lime-elements/compare/v37.1.0-next.94...v37.1.0-next.95) (2024-01-25)
10
+
11
+
12
+ ### Features
13
+
14
+
15
+ * **action-bar:** make `ActionBarItem` generic ([b0f9e35](https://github.com/Lundalogik/lime-elements/commit/b0f9e3581b3b7c6b0703266501d9272a24b4b9f2))
16
+
1
17
  ## [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)
2
18
 
3
19
 
package/dist/cjs/limel-header.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-38eb64b5.js');
6
6
  const getIconProps = require('./get-icon-props-3b021a11.js');
7
7
 
8
- const headerCss = "@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}";
8
+ const headerCss = "@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{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.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{--limel-icon-svg-margin:0;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}";
9
9
 
10
10
  const Header = class {
11
11
  constructor(hostRef) {
package/dist/cjs/limel-header.cjs.entry.js.map CHANGED
@@ -1 +1 @@
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}
1
+ {"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,mqDAAmqD;;MC4DxqD,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(--header-top-right-left-border-radius, 0.75rem);\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n 0.75rem\n );\n padding: 0.25rem;\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n --limel-icon-svg-margin: 0.25rem;\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: 2.25rem;\n border-radius: 0.56rem;\n}\n\n.headings {\n min-width: 0;\n margin-left: 0.25rem;\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: 1rem;\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: 0.125rem 0.25rem;\n\n .icon {\n --limel-icon-svg-margin: 0;\n width: 1.25rem;\n }\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: 0.5rem;\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-icon.cjs.entry.js CHANGED
@@ -153,7 +153,7 @@ const iconCache = (() => {
153
153
  return createIconCache();
154
154
  })();
155
155
 
156
- const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";
156
+ const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important;--limel-icon-svg-margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important;--limel-icon-svg-margin:0.5rem}";
157
157
 
158
158
  const Icon = class {
159
159
  constructor(hostRef) {
package/dist/cjs/limel-icon.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","config"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n > div {\n margin: functions.pxToRem(4);\n }\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n > div {\n margin: functions.pxToRem(5);\n }\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"version":3}
1
+ {"file":"limel-icon.entry.cjs.js","mappings":"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","names":["h","config"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n\n div {\n margin: var(--limel-icon-svg-margin, 0);\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(4)};\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(5)};\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"version":3}
package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js CHANGED
@@ -94,7 +94,7 @@ export class ActionBarButton {
94
94
  "mutable": false,
95
95
  "complexType": {
96
96
  "original": "ActionBarItem | ListSeparator",
97
- "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel | ListSeparator",
97
+ "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
98
98
  "references": {
99
99
  "ActionBarItem": {
100
100
  "location": "import",
@@ -146,7 +146,7 @@ export class ActionBarButton {
146
146
  },
147
147
  "complexType": {
148
148
  "original": "ActionBarItem | ListSeparator",
149
- "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel | ListSeparator",
149
+ "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any> | ListSeparator",
150
150
  "references": {
151
151
  "ActionBarItem": {
152
152
  "location": "import",
package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js CHANGED
@@ -93,7 +93,7 @@ export class ActionBarOverflowMenu {
93
93
  },
94
94
  "complexType": {
95
95
  "original": "ActionBarItem",
96
- "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel",
96
+ "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any>",
97
97
  "references": {
98
98
  "ActionBarItem": {
99
99
  "location": "import",
package/dist/collection/components/action-bar/action-bar.js CHANGED
@@ -136,7 +136,7 @@ export class ActionBar {
136
136
  "mutable": false,
137
137
  "complexType": {
138
138
  "original": "Array<ActionBarItem | ListSeparator>",
139
- "resolved": "(ActionBarItem | ListSeparator)[]",
139
+ "resolved": "(ListSeparator | ActionBarItem)[]",
140
140
  "references": {
141
141
  "Array": {
142
142
  "location": "global"
@@ -235,7 +235,7 @@ export class ActionBar {
235
235
  },
236
236
  "complexType": {
237
237
  "original": "ActionBarItem",
238
- "resolved": "ActionBarItemOnlyIcon | ActionBarItemWithLabel",
238
+ "resolved": "ActionBarItemOnlyIcon<any> | ActionBarItemWithLabel<any>",
239
239
  "references": {
240
240
  "ActionBarItem": {
241
241
  "location": "import",
package/dist/collection/components/action-bar/action-bar.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"action-bar.types.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon, MenuItem } from '../../interface';\n\n/**\n * Renders the button in the action bar without their labels.\n * Does not affect the items that are overflown into the overflow menu.\n */\nexport type ActionBarItem = ActionBarItemOnlyIcon | ActionBarItemWithLabel;\n\ninterface ActionBarItemOnlyIcon extends MenuItem {\n iconOnly: true;\n icon: string | Icon;\n}\n\ninterface ActionBarItemWithLabel extends MenuItem {\n iconOnly?: false;\n}\n"]}
1
+ {"version":3,"file":"action-bar.types.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Icon, MenuItem } from '../../interface';\n\n/**\n * Renders the button in the action bar without their labels.\n * Does not affect the items that are overflown into the overflow menu.\n */\nexport type ActionBarItem<T = any> =\n | ActionBarItemOnlyIcon<T>\n | ActionBarItemWithLabel<T>;\n\ninterface ActionBarItemOnlyIcon<T> extends MenuItem<T> {\n iconOnly: true;\n icon: string | Icon;\n}\n\ninterface ActionBarItemWithLabel<T> extends MenuItem<T> {\n iconOnly?: false;\n}\n"]}
package/dist/collection/components/header/header.css CHANGED
@@ -87,11 +87,12 @@
87
87
  }
88
88
 
89
89
  .icon {
90
+ --limel-icon-svg-margin: 0.25rem;
90
91
  flex-shrink: 0;
91
92
  color: var(--header-icon-color, rgb(var(--contrast-1100)));
92
93
  background-color: var(--header-icon-background-color, transparent);
93
- width: 1.75rem;
94
- margin: 0 0.5rem;
94
+ width: 2.25rem;
95
+ border-radius: 0.56rem;
95
96
  }
96
97
 
97
98
  .headings {
@@ -135,7 +136,7 @@ slot[name=actions] {
135
136
  padding: 0.125rem 0.25rem;
136
137
  }
137
138
  :host(limel-header.is-narrow) .icon {
138
- margin-right: 0.125rem;
139
+ --limel-icon-svg-margin: 0;
139
140
  width: 1.25rem;
140
141
  }
141
142
  :host(limel-header.is-narrow) .heading {
package/dist/collection/components/icon/icon.css CHANGED
@@ -20,6 +20,9 @@
20
20
  pointer-events: none;
21
21
  width: 100%;
22
22
  }
23
+ :host div {
24
+ margin: var(--limel-icon-svg-margin, 0);
25
+ }
23
26
 
24
27
  :host([hidden]) {
25
28
  display: none;
@@ -48,31 +51,23 @@
48
51
  :host([badge][size=x-small]) {
49
52
  height: 1.4375rem !important;
50
53
  width: 1.4375rem !important;
51
- }
52
- :host([badge][size=x-small]) > div {
53
- margin: 0.25rem;
54
+ --limel-icon-svg-margin: 0.25rem;
54
55
  }
55
56
 
56
57
  :host([badge][size=small]) {
57
58
  height: 1.875rem !important;
58
59
  width: 1.875rem !important;
59
- }
60
- :host([badge][size=small]) > div {
61
- margin: 0.3125rem;
60
+ --limel-icon-svg-margin: 0.3125rem;
62
61
  }
63
62
 
64
63
  :host([badge][size=medium]) {
65
64
  height: 2.5rem !important;
66
65
  width: 2.5rem !important;
67
- }
68
- :host([badge][size=medium]) > div {
69
- margin: 0.5rem;
66
+ --limel-icon-svg-margin: 0.5rem;
70
67
  }
71
68
 
72
69
  :host([badge][size=large]) {
73
70
  height: 2.875rem !important;
74
71
  width: 2.875rem !important;
75
- }
76
- :host([badge][size=large]) > div {
77
- margin: 0.5rem;
72
+ --limel-icon-svg-margin: 0.5rem;
78
73
  }
package/dist/collection/components/icon/icon.js CHANGED
@@ -27,8 +27,9 @@ import iconCache from '../../global/icon-cache/factory';
27
27
  * and how to do this.
28
28
  * :::
29
29
  *
30
- * @exampleComponent limel-example-icon
31
- * @exampleComponent limel-example-icon-background
30
+ * @exampleComponent limel-example-icon-name
31
+ * @exampleComponent limel-example-icon-size
32
+ * @exampleComponent limel-example-icon-color
32
33
  */
33
34
  export class Icon {
34
35
  constructor() {
package/dist/collection/components/icon/icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;;KAKG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}
1
+ {"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AAGxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAMH,MAAM,OAAO,IAAI;;;;;;EAuBN,gBAAgB;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAEM,MAAM;IACT,OAAO,WAAK,KAAK,EAAC,WAAW,GAAG,CAAC;EACrC,CAAC;EAGS,KAAK,CAAC,QAAQ,CAAC,IAAY;IACjC,IAAI,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,EAAE,EAAE;MACnC,OAAO;KACV;IAED,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;EAC5B,CAAC;EAED;;;;;KAKG;EACK,OAAO,CAAC,IAAY;IACxB,OAAO,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC;EAChD,CAAC;EAED;;;;;KAKG;EACK,SAAS,CAAC,OAAe;IAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACtE,IAAI,SAAS,EAAE;MACX,SAAS,CAAC,SAAS,GAAG,OAAO,CAAC;KACjC;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"]}
package/dist/esm/limel-header.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, h } from './index-232e9616.js';
2
2
  import { g as getIconName } from './get-icon-props-8e2a0505.js';
3
3
 
4
- const headerCss = "@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}";
4
+ const headerCss = "@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{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.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{--limel-icon-svg-margin:0;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}";
5
5
 
6
6
  const Header = class {
7
7
  constructor(hostRef) {
package/dist/esm/limel-header.entry.js.map CHANGED
@@ -1 +1 @@
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}
1
+ {"file":"limel-header.entry.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,mqDAAmqD;;MC4DxqD,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(--header-top-right-left-border-radius, 0.75rem);\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n 0.75rem\n );\n padding: 0.25rem;\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n --limel-icon-svg-margin: 0.25rem;\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: 2.25rem;\n border-radius: 0.56rem;\n}\n\n.headings {\n min-width: 0;\n margin-left: 0.25rem;\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: 1rem;\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: 0.125rem 0.25rem;\n\n .icon {\n --limel-icon-svg-margin: 0;\n width: 1.25rem;\n }\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: 0.5rem;\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-icon.entry.js CHANGED
@@ -149,7 +149,7 @@ const iconCache = (() => {
149
149
  return createIconCache();
150
150
  })();
151
151
 
152
- const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";
152
+ const iconCss = ":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important;--limel-icon-svg-margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important;--limel-icon-svg-margin:0.5rem}";
153
153
 
154
154
  const Icon = class {
155
155
  constructor(hostRef) {
package/dist/esm/limel-icon.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-icon.entry.js","mappings":"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","names":[],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n > div {\n margin: functions.pxToRem(4);\n }\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n > div {\n margin: functions.pxToRem(5);\n }\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"version":3}
1
+ {"file":"limel-icon.entry.js","mappings":"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","names":[],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n\n div {\n margin: var(--limel-icon-svg-margin, 0);\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(4)};\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(5)};\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"version":3}
package/dist/lime-elements/lime-elements.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- 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)));
1
+ 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-323bc305",[[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-0689363b",[[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)));
2
2
  //# sourceMappingURL=lime-elements.esm.js.map
package/dist/lime-elements/p-0689363b.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,h as i,g as e}from"./p-3075aa67.js";import{c as r}from"./p-03675d6b.js";class s{constructor(t){this.promises={};this.cache=t}async get(t,i=""){const e=await this.cache;const r=this.getUrl(t,i);let s=await e.match(r);if(!s){s=await this.fetchData(r,e)}return this.getIcon(s)}async fetchData(t,i){let e=this.promises[t];if(e===undefined){e=i.add(t);this.promises[t]=e}await e;return i.match(t)}async getIcon(t){let i=await t.text();i=i.replace(/#000000/g,"currentColor");if(!this.validSvg(i)){throw new Error("Invalid SVG")}return i}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}getUrl(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}return`${e}assets/icons/${t}.svg`}}class n{constructor(){this.cache={};this.resolveFunctions={}}async get(t,i=""){if(!this.cache[t]){this.cache[t]=await this.getIcon(t,i)}return this.cache[t]}getIcon(t,i){return new Promise((e=>{if(!this.resolveFunctions[t]){this.resolveFunctions[t]=[];this.fetchData(t,i)}this.resolveFunctions[t].push(e)}))}async fetchData(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}const r=await fetch(`${e}assets/icons/${t}.svg`);let s=await r.text();s=s.replace(/#000000/g,"currentColor");if(!this.validSvg(s)){throw new Error("Invalid SVG")}this.resolvePromises(t,s)}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}resolvePromises(t,i){const e=this.resolveFunctions[t];e.forEach((t=>{t(i)}));this.resolveFunctions[t]=null}}const o="@limetech/lime-elements/icons";function a(){try{const t=caches.open(o);return new s(t)}catch(t){return new n}}const h=(()=>a())();const m=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host div{margin:var(--limel-icon-svg-margin, 0)}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important;--limel-icon-svg-margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important;--limel-icon-svg-margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important;--limel-icon-svg-margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important;--limel-icon-svg-margin:0.5rem}";const c=class{constructor(i){t(this,i);this.size=undefined;this.name=undefined;this.badge=undefined}componentDidLoad(){this.loadIcon(this.name)}render(){return i("div",{class:"container"})}async loadIcon(t){if(t===undefined||t===""){return}const i=await this.loadSvg(t);this.renderSvg(i)}loadSvg(t){return h.get(t,r.iconPath)}renderSvg(t){const i=this.host.shadowRoot.querySelector("div.container");if(i){i.innerHTML=t}}get host(){return e(this)}static get watchers(){return{name:["loadIcon"]}}};c.style=m;export{c as limel_icon};
2
+ //# sourceMappingURL=p-0689363b.entry.js.map
package/dist/lime-elements/{p-9a45ad26.entry.js.map → p-0689363b.entry.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"names":["CacheStorageIconCache","constructor","cache","this","promises","async","name","path","url","getUrl","response","match","fetchData","getIcon","requestPromise","undefined","add","svgData","text","replace","validSvg","Error","data","parser","DOMParser","svgDoc","parseFromString","documentElement","tagName","toLowerCase","iconPath","endsWith","InMemoryIconCache","resolveFunctions","Promise","resolve","push","fetch","resolvePromises","resolves","forEach","CACHE_NAME","createIconCache","caches","open","_a","iconCache","iconCss","Icon","componentDidLoad","loadIcon","render","h","class","loadSvg","renderSvg","get","config","container","host","shadowRoot","querySelector","innerHTML"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n > div {\n margin: functions.pxToRem(4);\n }\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n > div {\n margin: functions.pxToRem(5);\n }\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n > div {\n margin: functions.pxToRem(8);\n }\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon\n * @exampleComponent limel-example-icon-background\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"mappings":"4FAAaA,EAQTC,YAAYC,GAFJC,KAAAC,SAA0C,GAG9CD,KAAKD,MAAQA,C,CAUVG,UAAUC,EAAcC,EAAe,IAC1C,MAAML,QAAcC,KAAKD,MACzB,MAAMM,EAAML,KAAKM,OAAOH,EAAMC,GAE9B,IAAIG,QAAiBR,EAAMS,MAAMH,GACjC,IAAKE,EAAU,CACXA,QAAiBP,KAAKS,UAAUJ,EAAKN,E,CAGzC,OAAOC,KAAKU,QAAQH,E,CAGhBL,gBAAgBG,EAAaN,GACjC,IAAIY,EAAiBX,KAAKC,SAASI,GACnC,GAAIM,IAAmBC,UAAW,CAC9BD,EAAiBZ,EAAMc,IAAIR,GAC3BL,KAAKC,SAASI,GAAOM,C,OAGnBA,EAEN,OAAOZ,EAAMS,MAAMH,E,CAMfH,cAAcK,GAClB,IAAIO,QAAgBP,EAASQ,OAI7BD,EAAUA,EAAQE,QAAQ,WAAY,gBAEtC,IAAKhB,KAAKiB,SAASH,GAAU,CACzB,MAAM,IAAII,MAAM,c,CAGpB,OAAOJ,C,CAMHG,SAASE,GACb,MAAMC,EAAS,IAAIC,UACnB,MAAMC,EAASF,EAAOG,gBAAgBJ,EAAM,iBAE5C,OAAOG,EAAOE,gBAAgBC,QAAQC,gBAAkB,K,CAGpDpB,OAAOH,EAAcC,GACzB,IAAIuB,EAAWvB,GAAQ,GACvB,GAAIA,IAASA,EAAKwB,SAAS,KAAM,CAC7BD,EAAW,GAAGvB,I,CAGlB,MAAO,GAAGuB,iBAAwBxB,O,QC5E7B0B,EAAb/B,cAIYE,KAAAD,MAAQ,GAKRC,KAAA8B,iBAAmB,E,CASpB5B,UAAUC,EAAMC,EAAO,IAC1B,IAAKJ,KAAKD,MAAMI,GAAO,CACnBH,KAAKD,MAAMI,SAAcH,KAAKU,QAAQP,EAAMC,E,CAGhD,OAAOJ,KAAKD,MAAMI,E,CAMdO,QAAQP,EAAMC,GAClB,OAAO,IAAI2B,SAASC,IAChB,IAAKhC,KAAK8B,iBAAiB3B,GAAO,CAC9BH,KAAK8B,iBAAiB3B,GAAQ,GAC9BH,KAAKS,UAAUN,EAAMC,E,CAGzBJ,KAAK8B,iBAAiB3B,GAAM8B,KAAKD,EAAQ,G,CAOzC9B,gBAAgBC,EAAMC,GAC1B,IAAIuB,EAAWvB,GAAQ,GACvB,GAAIA,IAASA,EAAKwB,SAAS,KAAM,CAC7BD,EAAW,GAAGvB,I,CAGlB,MAAMG,QAAiB2B,MAAM,GAAGP,iBAAwBxB,SAExD,IAAIW,QAAgBP,EAASQ,OAI7BD,EAAUA,EAAQE,QAAQ,WAAY,gBACtC,IAAKhB,KAAKiB,SAASH,GAAU,CACzB,MAAM,IAAII,MAAM,c,CAGpBlB,KAAKmC,gBAAgBhC,EAAMW,E,CAMvBG,SAASE,GACb,MAAMC,EAAS,IAAIC,UACnB,MAAMC,EAASF,EAAOG,gBAAgBJ,EAAM,iBAE5C,OAAOG,EAAOE,gBAAgBC,QAAQC,gBAAkB,K,CAMpDS,gBAAgBhC,EAAMW,GAC1B,MAAMsB,EAAWpC,KAAK8B,iBAAiB3B,GACvCiC,EAASC,SAASL,IACdA,EAAQlB,EAAQ,IAEpBd,KAAK8B,iBAAiB3B,GAAQ,I,EC9EtC,MAAMmC,EAAa,gCAEnB,SAASC,IACL,IACI,MAAMxC,EAAQyC,OAAOC,KAAKH,GAE1B,OAAO,IAAIzC,EAAsBE,E,CACnC,MAAA2C,GACE,OAAO,IAAIb,C,CAEnB,CAEA,MAAAc,EAAe,KACJJ,IADI,GCff,MAAMK,EAAU,whC,MCuCHC,EAAI,M,sFAuBNC,mBACH9C,KAAK+C,SAAS/C,KAAKG,K,CAGhB6C,SACH,OAAOC,EAAA,OAAKC,MAAM,a,CAIZhD,eAAeC,GACrB,GAAIA,IAASS,WAAaT,IAAS,GAAI,CACnC,M,CAGJ,MAAMW,QAAgBd,KAAKmD,QAAQhD,GACnCH,KAAKoD,UAAUtC,E,CASXqC,QAAQhD,GACZ,OAAOwC,EAAUU,IAAIlD,EAAMmD,EAAO3B,S,CAS9ByB,UAAUtC,GACd,MAAMyC,EAAYvD,KAAKwD,KAAKC,WAAWC,cAAc,iBACrD,GAAIH,EAAW,CACXA,EAAUI,UAAY7C,C"}
1
+ {"version":3,"names":["CacheStorageIconCache","constructor","cache","this","promises","async","name","path","url","getUrl","response","match","fetchData","getIcon","requestPromise","undefined","add","svgData","text","replace","validSvg","Error","data","parser","DOMParser","svgDoc","parseFromString","documentElement","tagName","toLowerCase","iconPath","endsWith","InMemoryIconCache","resolveFunctions","Promise","resolve","push","fetch","resolvePromises","resolves","forEach","CACHE_NAME","createIconCache","caches","open","_a","iconCache","iconCss","Icon","componentDidLoad","loadIcon","render","h","class","loadSvg","renderSvg","get","config","container","host","shadowRoot","querySelector","innerHTML"],"sources":["./src/global/icon-cache/cache-storage-icon-cache.ts","./src/global/icon-cache/in-memory-icon-cache.ts","./src/global/icon-cache/factory.ts","./src/components/icon/icon.scss?tag=limel-icon&encapsulation=shadow","./src/components/icon/icon.tsx"],"sourcesContent":["export class CacheStorageIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache: Promise<Cache>;\n\n private promises: Record<string, Promise<void>> = {};\n\n constructor(cache: Promise<Cache>) {\n this.cache = cache;\n }\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {Promise<string>} svg markup\n */\n public async get(name: string, path: string = ''): Promise<string> {\n const cache = await this.cache;\n const url = this.getUrl(name, path);\n\n let response = await cache.match(url);\n if (!response) {\n response = await this.fetchData(url, cache);\n }\n\n return this.getIcon(response);\n }\n\n private async fetchData(url: string, cache: Cache): Promise<Response> {\n let requestPromise = this.promises[url];\n if (requestPromise === undefined) {\n requestPromise = cache.add(url);\n this.promises[url] = requestPromise;\n }\n\n await requestPromise;\n\n return cache.match(url);\n }\n\n /*\n * Get icon data from a response\n */\n private async getIcon(response: Response): Promise<string> {\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n return svgData;\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n private getUrl(name: string, path: string): string {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n return `${iconPath}assets/icons/${name}.svg`;\n }\n}\n","export class InMemoryIconCache {\n /*\n * Cache of all loaded SVGs\n */\n private cache = {};\n\n /*\n * Contains resolve functions for all unresolved promises that are waiting for SVG data.\n */\n private resolveFunctions = {};\n\n /**\n * Get icon data from the cache\n *\n * @param {string} name name of the icon\n * @param {string} path path on the server where the assets are located\n * @returns {string} svg markup\n */\n public async get(name, path = '') {\n if (!this.cache[name]) {\n this.cache[name] = await this.getIcon(name, path);\n }\n\n return this.cache[name];\n }\n\n /*\n * Creates and returns a promise that will be resolved when SVG data is available\n */\n private getIcon(name, path) {\n return new Promise((resolve) => {\n if (!this.resolveFunctions[name]) {\n this.resolveFunctions[name] = [];\n this.fetchData(name, path);\n }\n\n this.resolveFunctions[name].push(resolve);\n });\n }\n\n /*\n * Fetch SVG data from the server\n */\n private async fetchData(name, path) {\n let iconPath = path || '';\n if (path && !path.endsWith('/')) {\n iconPath = `${path}/`;\n }\n\n const response = await fetch(`${iconPath}assets/icons/${name}.svg`);\n\n let svgData = await response.text();\n\n // Some of the icons in the Icons8 library have hard coded black color on some of the paths.\n // In order to apply coloring with CSS, these have to be set to 'currentColor'\n svgData = svgData.replace(/#000000/g, 'currentColor');\n if (!this.validSvg(svgData)) {\n throw new Error('Invalid SVG');\n }\n\n this.resolvePromises(name, svgData);\n }\n\n /*\n * Check if the given data is a valid SVG document\n */\n private validSvg(data) {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(data, 'image/svg+xml');\n\n return svgDoc.documentElement.tagName.toLowerCase() === 'svg';\n }\n\n /*\n * Resolve all promises waiting for data for a specific icon\n */\n private resolvePromises(name, svgData) {\n const resolves = this.resolveFunctions[name];\n resolves.forEach((resolve) => {\n resolve(svgData);\n });\n this.resolveFunctions[name] = null;\n }\n}\n","import { CacheStorageIconCache } from './cache-storage-icon-cache';\nimport { InMemoryIconCache } from './in-memory-icon-cache';\n\nconst CACHE_NAME = '@limetech/lime-elements/icons';\n\nfunction createIconCache() {\n try {\n const cache = caches.open(CACHE_NAME);\n\n return new CacheStorageIconCache(cache);\n } catch {\n return new InMemoryIconCache();\n }\n}\n\nexport default (() => {\n return createIconCache();\n})();\n","@use '../../style/functions';\n\n/**\n * @prop --icon-background-color: Background color when attribute `badge` is set to `true`. Defaults to `transparent`.\n */\n\n:host {\n background-color: var(--icon-background-color, transparent);\n border-radius: 50%;\n display: inline-block;\n line-height: 0;\n box-sizing: border-box;\n\n svg {\n fill: currentColor;\n height: 100%;\n pointer-events: none;\n width: 100%;\n }\n\n div {\n margin: var(--limel-icon-svg-margin, 0);\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([size='x-small']) {\n height: functions.pxToRem(15) !important;\n width: functions.pxToRem(15) !important;\n}\n:host([size='small']) {\n height: functions.pxToRem(20) !important;\n width: functions.pxToRem(20) !important;\n}\n:host([size='medium']) {\n height: functions.pxToRem(25) !important;\n width: functions.pxToRem(25) !important;\n}\n:host([size='large']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n}\n\n:host([badge][size='x-small']) {\n height: functions.pxToRem(23) !important;\n width: functions.pxToRem(23) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(4)};\n}\n:host([badge][size='small']) {\n height: functions.pxToRem(30) !important;\n width: functions.pxToRem(30) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(5)};\n}\n:host([badge][size='medium']) {\n height: functions.pxToRem(40) !important;\n width: functions.pxToRem(40) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n:host([badge][size='large']) {\n height: functions.pxToRem(46) !important;\n width: functions.pxToRem(46) !important;\n\n --limel-icon-svg-margin: #{functions.pxToRem(8)};\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport config from '../../global/config';\nimport iconCache from '../../global/icon-cache/factory';\nimport { IconSize } from '../../interface';\n\n/**\n * Search for an icon and **click on it to copy its name to clipboard**.\n * <limel-example-icon-finder />\n *\n * *******\n *\n * :::important\n * To install your icon set correctly, please read the [documentation here](#/).\n * :::\n *\n * The size and color of the icon is normally set in CSS, however there are a few\n * standard sizes defined that can be used with the `size` property.\n *\n * :::note\n * There are icons included in the `@lundalogik/lime-icons8` package which are\n * designed by our designers at Lime.\n * The names of these icons start with `-lime-`, which makes them easy to\n * find using the Icon Finder tool below.\n *\n * Some of the multi-colored `-lime-` icons use our own CSS variables\n * (instead of HEX or RGB) values to visualize their colors. Thus, you must import\n * our color palette css files into your project to render the icons properly.\n * Read more about our [Color System](#/DesignGuidelines/color-system.md/)\n * and how to do this.\n * :::\n *\n * @exampleComponent limel-example-icon-name\n * @exampleComponent limel-example-icon-size\n * @exampleComponent limel-example-icon-color\n */\n@Component({\n tag: 'limel-icon',\n shadow: true,\n styleUrl: 'icon.scss',\n})\nexport class Icon {\n /**\n * Size of the icon\n */\n @Prop({ reflect: true })\n public size: IconSize;\n\n /**\n * Name of the icon\n */\n @Prop({ reflect: true })\n public name: string;\n\n /**\n * Set to `true` to give the icon a round background with some padding.\n * Only works when the `size` attribute is also set.\n */\n @Prop({ reflect: true })\n public badge: boolean;\n\n @Element()\n private host: HTMLLimelIconElement;\n\n public componentDidLoad() {\n this.loadIcon(this.name);\n }\n\n public render() {\n return <div class=\"container\" />;\n }\n\n @Watch('name')\n protected async loadIcon(name: string) {\n if (name === undefined || name === '') {\n return;\n }\n\n const svgData = await this.loadSvg(name);\n this.renderSvg(svgData);\n }\n\n /**\n * Load the SVG data for the icon from the icon cache\n *\n * @param {string} name name of the icon\n * @returns {string} the icon SVG data\n */\n private loadSvg(name: string) {\n return iconCache.get(name, config.iconPath);\n }\n\n /*\n * There is no way to style external SVG files with CSS, i.e. SVGs loaded\n * with <img src=\"file.svg\" /> or <object data=\"file.svg\" type=\"image/svg+xml\" />\n * will remain the way they look in the file.\n * Therefore we inject the svg as inline markup instead.\n */\n private renderSvg(svgData: string) {\n const container = this.host.shadowRoot.querySelector('div.container');\n if (container) {\n container.innerHTML = svgData;\n }\n }\n}\n"],"mappings":"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"}
package/dist/lime-elements/p-323bc305.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ 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{--limel-icon-svg-margin:0.25rem;flex-shrink:0;color:var(--header-icon-color, rgb(var(--contrast-1100)));background-color:var(--header-icon-background-color, transparent);width:2.25rem;border-radius:0.56rem}.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{--limel-icon-svg-margin:0;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"},this.renderSubheadingDivider(),this.supportingText)}renderSubheadingDivider(){if(!this.subheadingDivider){return}return r("span",null,this.subheadingDivider)}};t.style=a;export{t as limel_header};
2
+ //# sourceMappingURL=p-323bc305.entry.js.map
package/dist/lime-elements/p-323bc305.entry.js.map ADDED
@@ -0,0 +1 @@
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(--header-top-right-left-border-radius, 0.75rem);\n border-top-right-radius: var(\n --header-top-right-left-border-radius,\n 0.75rem\n );\n padding: 0.25rem;\n}\n\n.information {\n display: flex;\n flex-grow: 1;\n align-items: center;\n min-width: 0;\n}\n\n.icon {\n --limel-icon-svg-margin: 0.25rem;\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: 2.25rem;\n border-radius: 0.56rem;\n}\n\n.headings {\n min-width: 0;\n margin-left: 0.25rem;\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: 1rem;\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: 0.125rem 0.25rem;\n\n .icon {\n --limel-icon-svg-margin: 0;\n width: 1.25rem;\n }\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: 0.5rem;\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,kqD,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/types/components/action-bar/action-bar.types.d.ts CHANGED
@@ -3,12 +3,12 @@ import { Icon, MenuItem } from '../../interface';
3
3
  * Renders the button in the action bar without their labels.
4
4
  * Does not affect the items that are overflown into the overflow menu.
5
5
  */
6
- export type ActionBarItem = ActionBarItemOnlyIcon | ActionBarItemWithLabel;
7
- interface ActionBarItemOnlyIcon extends MenuItem {
6
+ export type ActionBarItem<T = any> = ActionBarItemOnlyIcon<T> | ActionBarItemWithLabel<T>;
7
+ interface ActionBarItemOnlyIcon<T> extends MenuItem<T> {
8
8
  iconOnly: true;
9
9
  icon: string | Icon;
10
10
  }
11
- interface ActionBarItemWithLabel extends MenuItem {
11
+ interface ActionBarItemWithLabel<T> extends MenuItem<T> {
12
12
  iconOnly?: false;
13
13
  }
14
14
  export {};
package/dist/types/components/icon/icon.d.ts CHANGED
@@ -25,8 +25,9 @@ import { IconSize } from '../../interface';
25
25
  * and how to do this.
26
26
  * :::
27
27
  *
28
- * @exampleComponent limel-example-icon
29
- * @exampleComponent limel-example-icon-background
28
+ * @exampleComponent limel-example-icon-name
29
+ * @exampleComponent limel-example-icon-size
30
+ * @exampleComponent limel-example-icon-color
30
31
  */
31
32
  export declare class Icon {
32
33
  /**
package/dist/types/components.d.ts CHANGED
@@ -1219,8 +1219,9 @@ export namespace Components {
1219
1219
  * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
1220
1220
  * and how to do this.
1221
1221
  * :::
1222
- * @exampleComponent limel-example-icon
1223
- * @exampleComponent limel-example-icon-background
1222
+ * @exampleComponent limel-example-icon-name
1223
+ * @exampleComponent limel-example-icon-size
1224
+ * @exampleComponent limel-example-icon-color
1224
1225
  */
1225
1226
  interface LimelIcon {
1226
1227
  /**
@@ -3128,8 +3129,9 @@ declare global {
3128
3129
  * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
3129
3130
  * and how to do this.
3130
3131
  * :::
3131
- * @exampleComponent limel-example-icon
3132
- * @exampleComponent limel-example-icon-background
3132
+ * @exampleComponent limel-example-icon-name
3133
+ * @exampleComponent limel-example-icon-size
3134
+ * @exampleComponent limel-example-icon-color
3133
3135
  */
3134
3136
  interface HTMLLimelIconElement extends Components.LimelIcon, HTMLStencilElement {
3135
3137
  }
@@ -5030,8 +5032,9 @@ declare namespace LocalJSX {
5030
5032
  * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
5031
5033
  * and how to do this.
5032
5034
  * :::
5033
- * @exampleComponent limel-example-icon
5034
- * @exampleComponent limel-example-icon-background
5035
+ * @exampleComponent limel-example-icon-name
5036
+ * @exampleComponent limel-example-icon-size
5037
+ * @exampleComponent limel-example-icon-color
5035
5038
  */
5036
5039
  interface LimelIcon {
5037
5040
  /**
@@ -6804,8 +6807,9 @@ declare module "@stencil/core" {
6804
6807
  * Read more about our [Color System](#/DesignGuidelines/color-system.md/)
6805
6808
  * and how to do this.
6806
6809
  * :::
6807
- * @exampleComponent limel-example-icon
6808
- * @exampleComponent limel-example-icon-background
6810
+ * @exampleComponent limel-example-icon-name
6811
+ * @exampleComponent limel-example-icon-size
6812
+ * @exampleComponent limel-example-icon-color
6809
6813
  */
6810
6814
  "limel-icon": LocalJSX.LimelIcon & JSXBase.HTMLAttributes<HTMLLimelIconElement>;
6811
6815
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "37.1.0-next.94",
3
+ "version": "37.1.0-next.96",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -41,7 +41,7 @@
41
41
  "generate": "stencil generate"
42
42
  },
43
43
  "devDependencies": {
44
- "@commitlint/config-conventional": "^18.5.0",
44
+ "@commitlint/config-conventional": "^18.6.0",
45
45
  "@popperjs/core": "^2.11.8",
46
46
  "@rjsf/core": "^2.4.2",
47
47
  "@rollup/plugin-node-resolve": "^13.3.0",
@@ -63,7 +63,7 @@
63
63
  "eslint": "^8.56.0",
64
64
  "eslint-config-prettier": "^9.1.0",
65
65
  "eslint-plugin-ban": "^1.6.0",
66
- "eslint-plugin-jsdoc": "^48.0.2",
66
+ "eslint-plugin-jsdoc": "^48.0.4",
67
67
  "eslint-plugin-prefer-arrow": "^1.2.3",
68
68
  "eslint-plugin-prettier": "^5.1.3",
69
69
  "eslint-plugin-react": "^7.33.2",
package/dist/lime-elements/p-05e6d75e.entry.js DELETED
@@ -1,2 +0,0 @@
1
- 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};
2
- //# sourceMappingURL=p-05e6d75e.entry.js.map
package/dist/lime-elements/p-05e6d75e.entry.js.map DELETED
@@ -1 +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-9a45ad26.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,h as i,g as e}from"./p-3075aa67.js";import{c as s}from"./p-03675d6b.js";class r{constructor(t){this.promises={};this.cache=t}async get(t,i=""){const e=await this.cache;const s=this.getUrl(t,i);let r=await e.match(s);if(!r){r=await this.fetchData(s,e)}return this.getIcon(r)}async fetchData(t,i){let e=this.promises[t];if(e===undefined){e=i.add(t);this.promises[t]=e}await e;return i.match(t)}async getIcon(t){let i=await t.text();i=i.replace(/#000000/g,"currentColor");if(!this.validSvg(i)){throw new Error("Invalid SVG")}return i}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}getUrl(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}return`${e}assets/icons/${t}.svg`}}class n{constructor(){this.cache={};this.resolveFunctions={}}async get(t,i=""){if(!this.cache[t]){this.cache[t]=await this.getIcon(t,i)}return this.cache[t]}getIcon(t,i){return new Promise((e=>{if(!this.resolveFunctions[t]){this.resolveFunctions[t]=[];this.fetchData(t,i)}this.resolveFunctions[t].push(e)}))}async fetchData(t,i){let e=i||"";if(i&&!i.endsWith("/")){e=`${i}/`}const s=await fetch(`${e}assets/icons/${t}.svg`);let r=await s.text();r=r.replace(/#000000/g,"currentColor");if(!this.validSvg(r)){throw new Error("Invalid SVG")}this.resolvePromises(t,r)}validSvg(t){const i=new DOMParser;const e=i.parseFromString(t,"image/svg+xml");return e.documentElement.tagName.toLowerCase()==="svg"}resolvePromises(t,i){const e=this.resolveFunctions[t];e.forEach((t=>{t(i)}));this.resolveFunctions[t]=null}}const a="@limetech/lime-elements/icons";function o(){try{const t=caches.open(a);return new r(t)}catch(t){return new n}}const h=(()=>o())();const m=":host{background-color:var(--icon-background-color, transparent);border-radius:50%;display:inline-block;line-height:0;box-sizing:border-box}:host svg{fill:currentColor;height:100%;pointer-events:none;width:100%}:host([hidden]){display:none}:host([size=x-small]){height:0.9375rem !important;width:0.9375rem !important}:host([size=small]){height:1.25rem !important;width:1.25rem !important}:host([size=medium]){height:1.5625rem !important;width:1.5625rem !important}:host([size=large]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=x-small]){height:1.4375rem !important;width:1.4375rem !important}:host([badge][size=x-small])>div{margin:0.25rem}:host([badge][size=small]){height:1.875rem !important;width:1.875rem !important}:host([badge][size=small])>div{margin:0.3125rem}:host([badge][size=medium]){height:2.5rem !important;width:2.5rem !important}:host([badge][size=medium])>div{margin:0.5rem}:host([badge][size=large]){height:2.875rem !important;width:2.875rem !important}:host([badge][size=large])>div{margin:0.5rem}";const c=class{constructor(i){t(this,i);this.size=undefined;this.name=undefined;this.badge=undefined}componentDidLoad(){this.loadIcon(this.name)}render(){return i("div",{class:"container"})}async loadIcon(t){if(t===undefined||t===""){return}const i=await this.loadSvg(t);this.renderSvg(i)}loadSvg(t){return h.get(t,s.iconPath)}renderSvg(t){const i=this.host.shadowRoot.querySelector("div.container");if(i){i.innerHTML=t}}get host(){return e(this)}static get watchers(){return{name:["loadIcon"]}}};c.style=m;export{c as limel_icon};
2
- //# sourceMappingURL=p-9a45ad26.entry.js.map