npm - @limetech/lime-elements - Versions diffs - 37.7.0 → 37.8.0 - Mend

@limetech/lime-elements 37.7.0 → 37.8.0

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

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

	@@ -1 +1 @@
1	- {"file":"limel-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,mqDAAmqD;;MC6DxqD,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-slot-actions\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;;MC6DxqD,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 '../../global/shared-types/icon.types';\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-slot-actions\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-help-content.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-help-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qzCAAqzC;;MCiBp0C,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACIA,sBACIA,eACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACHA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n gap: 0.5rem;\n\n max-height: 30rem;\n height: 100%;\n}\n\nlimel-markdown {\n @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n padding-right: 1rem;\n padding-left: 1rem;\n min-height: 0;\n min-width: 0;\n overflow: hidden auto;\n}\n\na {\n @include mixins.truncate-text;\n @include mixins.hyperlink;\n\n position: sticky;\n bottom: 0;\n\n text-decoration: none;\n font-size: 0.875rem;\n padding-bottom: 0.125rem;\n}\n\nspan {\n padding: 0 1rem 0.5rem 1rem;\n min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../~~interface~~';\n\n/*\n Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n \n @private\n */\n@Component({\n tag: 'limel-help-content',\n shadow: true,\n styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n @Prop()\n public value: string;\n\n @Prop()\n public readMoreLink?: Link;\n\n public render() {\n return [\n <limel-markdown value={this.value} />,\n this.renderReadMoreLink(),\n ];\n }\n\n private renderReadMoreLink = () => {\n if (!this.readMoreLink) {\n return;\n }\n\n return (\n <span>\n <a\n href={this.readMoreLink?.href}\n target={this.readMoreLink?.target}\n title={this.readMoreLink?.title}\n tabindex=\"0\"\n >\n {this.readMoreLink?.text}\n </a>\n </span>\n );\n };\n}\n"],"version":3}
1	+ {"file":"limel-help-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,qzCAAqzC;;MCiBp0C,WAAW;;;IAcZ,uBAAkB,GAAG;;MACzB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACpB,OAAO;OACV;MAED,QACIA,sBACIA,eACI,IAAI,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,EAC7B,MAAM,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EACjC,KAAK,EAAE,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAC/B,QAAQ,EAAC,GAAG,IAEX,MAAA,IAAI,CAAC,YAAY,0CAAE,IAAI,CACxB,CACD,EACT;KACL,CAAC;;;;EAxBK,MAAM;IACT,OAAO;MACHA,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI;MACrC,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/limel-help-content.scss?tag=limel-help-content&encapsulation=shadow","./src/components/help/help-content.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n:host(limel-help-content) {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n gap: 0.5rem;\n\n max-height: 30rem;\n height: 100%;\n}\n\nlimel-markdown {\n @include mixins.fade-out-overflowed-content-on-edges(vertically);\n\n padding-right: 1rem;\n padding-left: 1rem;\n min-height: 0;\n min-width: 0;\n overflow: hidden auto;\n}\n\na {\n @include mixins.truncate-text;\n @include mixins.hyperlink;\n\n position: sticky;\n bottom: 0;\n\n text-decoration: none;\n font-size: 0.875rem;\n padding-bottom: 0.125rem;\n}\n\nspan {\n padding: 0 1rem 0.5rem 1rem;\n min-width: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n Help content\n * This is scrollable content that is placed in the popover of the Help component.\n * Moved here mostly to avoid having inlined styles in the parent component.\n * Since you cannot send styles to the Portal component, we need to have this\n * child component.\n \n @private\n */\n@Component({\n tag: 'limel-help-content',\n shadow: true,\n styleUrl: 'limel-help-content.scss',\n})\nexport class HelpContent {\n @Prop()\n public value: string;\n\n @Prop()\n public readMoreLink?: Link;\n\n public render() {\n return [\n <limel-markdown value={this.value} />,\n this.renderReadMoreLink(),\n ];\n }\n\n private renderReadMoreLink = () => {\n if (!this.readMoreLink) {\n return;\n }\n\n return (\n <span>\n <a\n href={this.readMoreLink?.href}\n target={this.readMoreLink?.target}\n title={this.readMoreLink?.title}\n tabindex=\"0\"\n >\n {this.readMoreLink?.text}\n </a>\n </span>\n );\n };\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"limel-help.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;~~MC8BxmC~~,aAAa;;;IAoDd,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;;mBAjDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACHA,2BACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,oBACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;UACH,SAAS,EAAE,IAAI,CAAC,MAAM;SACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACTA,gCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help, Link } from '../../~~interface~~';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n /\n {@inheritdoc Help.value}\n /\n @Prop()\n public value: string;\n\n /\n {@inheritdoc Help.trigger}\n /\n @Prop()\n public trigger: string = '?';\n\n /\n {@inheritdoc Help.readMoreLink}\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n {@inheritdoc Help.openDirection}\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"version":3}
1	+ {"file":"limel-help.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;MC+BxmC,aAAa;;;IAoDd,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;;mBAjDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACHA,2BACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjCA,oBACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;UACH,SAAS,EAAE,IAAI,CAAC,MAAM;SACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACTA,gCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;GACL;;;;;;","names":["h"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Help } from '../help/help.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class HelpComponent implements Help {\n /\n {@inheritdoc Help.value}\n /\n @Prop()\n public value: string;\n\n /\n {@inheritdoc Help.trigger}\n /\n @Prop()\n public trigger: string = '?';\n\n /\n {@inheritdoc Help.readMoreLink}\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n {@inheritdoc Help.openDirection}\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"limel-icon-button.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,urCAAurC;;MCmBhsC,UAAU;;;IA6CX,cAAS,GAAGA,+BAAkB,EAAE,CAAC;IAmCjC,4BAAuB,GAAG,CAAC,CAAC;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;KACJ,CAAC;;oBAxEgB,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpBC,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAIO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IAEnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACIC,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACvCD,kCACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,IACd,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,EAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9B,CACN,EACT;GACL;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAOA,2BAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;","names":["createRandomString","makeEnterClickable","removeEnterClickable","h","Host"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --icon-background-color: Background color of the button.\n /\n\n:host([hidden]) {\n display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n all: unset;\n &:not(:disabled) {\n @include mixins.is-flat-clickable(\n $background-color: var(--icon-background-color, transparent)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n height: 2.25rem;\n width: 2.25rem;\n border-radius: 50%;\n\n &:disabled {\n cursor: not-allowed;\n\n color: var(--mdc-theme-text-disabled-on-background);\n }\n}\n\n:host([elevated]) {\n button {\n box-shadow: var(--button-shadow-normal);\n &:disabled {\n box-shadow: var(--button-shadow-normal);\n }\n }\n}\n\nlimel-icon {\n width: 1.25rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '~~src/~~util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/\n @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n /\n@Component({\n tag: 'limel-icon-button',\n shadow: true,\n styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n /\n The icon to display.\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to give the button our standard \"elevated\" look, lifting\n * it off the flat layout.\n /\n @Prop({ reflect: true })\n public elevated = false;\n\n /\n The text to show to screenreaders and other assistive tech.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n @Element()\n private host: HTMLLimelIconButtonElement;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private tooltipId = createRandomString();\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n if (!element) {\n return;\n }\n }\n\n public render() {\n const buttonAttributes: { tabindex?: string } = {};\n\n if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n <button\n disabled={this.disabled}\n id={this.tooltipId}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n {this.renderTooltip(this.tooltipId)}\n </button>\n </Host>\n );\n }\n private renderTooltip(tooltipId) {\n if (this.label) {\n return <limel-tooltip elementId={tooltipId} label={this.label} />;\n }\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"],"version":3}
1	+ {"file":"limel-icon-button.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,urCAAurC;;MCmBhsC,UAAU;;;IA6CX,cAAS,GAAGA,+BAAkB,EAAE,CAAC;IAmCjC,4BAAuB,GAAG,CAAC,CAAC;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,CAAC,CAAC,cAAc,EAAE,CAAC;OACtB;KACJ,CAAC;;oBAxEgB,KAAK;;oBAYL,KAAK;;EAKhB,iBAAiB;IACpB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAEM,iBAAiB;IACpBC,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,gBAAgB;IACnB,IAAI,CAAC,UAAU,EAAE,CAAC;GACrB;EAIO,UAAU;IACd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IACvE,IAAI,CAAC,OAAO,EAAE;MACV,OAAO;KACV;GACJ;EAEM,MAAM;IACT,MAAM,gBAAgB,GAA0B,EAAE,CAAC;IAEnD,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;MACpC,gBAAgB,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;KAClE;IAED,QACIC,QAACC,UAAI,IAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACvCD,kCACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,SAAS,IACd,gBAAgB,GAEpBA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,GAAI,EAC3C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9B,CACN,EACT;GACL;EACO,aAAa,CAAC,SAAS;IAC3B,IAAI,IAAI,CAAC,KAAK,EAAE;MACZ,OAAOA,2BAAe,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;KACrE;GACJ;;;;;;;","names":["createRandomString","makeEnterClickable","removeEnterClickable","h","Host"],"sources":["./src/components/icon-button/icon-button.scss?tag=limel-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --icon-background-color: Background color of the button.\n /\n\n:host([hidden]) {\n display: none;\n}\n\n@include mixins.visualize-aria-expanded('button');\n\nbutton {\n all: unset;\n &:not(:disabled) {\n @include mixins.is-flat-clickable(\n $background-color: var(--icon-background-color, transparent)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n\n height: 2.25rem;\n width: 2.25rem;\n border-radius: 50%;\n\n &:disabled {\n cursor: not-allowed;\n\n color: var(--mdc-theme-text-disabled-on-background);\n }\n}\n\n:host([elevated]) {\n button {\n box-shadow: var(--button-shadow-normal);\n &:disabled {\n box-shadow: var(--button-shadow-normal);\n }\n }\n}\n\nlimel-icon {\n width: 1.25rem;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\n\n/\n @exampleComponent limel-example-icon-button-basic\n * @exampleComponent limel-example-icon-button-disabled\n * @exampleComponent limel-example-icon-button-elevated\n * @exampleComponent limel-example-icon-button-toggle-state\n * @exampleComponent limel-example-icon-button-composite\n /\n@Component({\n tag: 'limel-icon-button',\n shadow: true,\n styleUrl: 'icon-button.scss',\n})\nexport class IconButton {\n /\n The icon to display.\n /\n @Prop({ reflect: true })\n public icon: string;\n\n /\n Set to `true` to give the button our standard \"elevated\" look, lifting\n * it off the flat layout.\n /\n @Prop({ reflect: true })\n public elevated = false;\n\n /\n The text to show to screenreaders and other assistive tech.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to disable the button.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n @Element()\n private host: HTMLLimelIconButtonElement;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private tooltipId = createRandomString();\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector('.mdc-icon-button');\n if (!element) {\n return;\n }\n }\n\n public render() {\n const buttonAttributes: { tabindex?: string } = {};\n\n if (this.host.hasAttribute('tabindex')) {\n buttonAttributes.tabindex = this.host.getAttribute('tabindex');\n }\n\n return (\n <Host onClick={this.filterClickWhenDisabled}>\n <button\n disabled={this.disabled}\n id={this.tooltipId}\n {...buttonAttributes}\n >\n <limel-icon name={this.icon} badge={true} />\n {this.renderTooltip(this.tooltipId)}\n </button>\n </Host>\n );\n }\n private renderTooltip(tooltipId) {\n if (this.label) {\n return <limel-tooltip elementId={tooltipId} label={this.label} />;\n }\n }\n\n private filterClickWhenDisabled = (e) => {\n if (this.disabled) {\n e.preventDefault();\n }\n };\n}\n"],"version":3}