npm - @limetech/lime-elements - Versions diffs - 38.45.0 → 38.46.0 - Mend

@limetech/lime-elements 38.45.0 → 38.46.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 (121) hide show

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

@@ -47,10 +47,7 @@ const File = class {
     this.language = 'en';
   }
   render() {
-    return [
-      index.h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()),
-      this.renderDragAndDropTip(),
-    ];
+    return (index.h(index.Host, null, index.h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
   }
   renderDragAndDropTip() {
     if (this.value || this.disabled || this.readonly) {

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

	@@ -1 +1 @@
1	- {"file":"limel-file.entry.cjs.js","mappings":"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","names":["h","getFileIcon","getFileExtensionTitle","getFileColor","getFileBackgroundColor","translate"],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n /\n\n:host(limel-file) {\n position: relative;\n}\n\n.drag-and-drop-tip {\n pointer-events: none;\n position: absolute;\n box-sizing: border-box;\n margin: 0.25rem;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-wrap: nowrap;\n\n border-radius: 0.25rem;\n border: 1px dashed rgb(var(--contrast-700));\n\n padding: 0 0.5rem;\n\n .invisible-label-mock {\n flex-shrink: 0;\n opacity: 0;\n padding-right: 1rem;\n padding-left: 1.5rem;\n }\n\n .tip {\n font-size: smaller;\n color: var(--limel-theme-text-secondary-on-background-color);\n\n // Below tries to render text in two lines,\n // and then truncate if there is no more space\n height: auto;\n max-height: 3rem;\n line-height: 1;\n @include mixins.truncate-text-on-line(2);\n }\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n getFileBackgroundColor,\n getFileColor,\n getFileExtensionTitle,\n getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n id: null,\n text: null,\n removable: true,\n};\n\n/\n This component lets end-users select a single file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n \n ## Using correct labels\n \n This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n \n :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n \n Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n \n and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n \n and similar phrases...\n * :::\n \n @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-menu-items\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n /\n@Component({\n tag: 'limel-file',\n shadow: true,\n styleUrl: 'file.scss',\n})\nexport class File {\n /\n The selected file.\n /\n @Prop()\n public value: FileInfo;\n\n /\n The input label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n True if the input should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n Set to `true` to disable adding and removing files, but allow interaction\n * with any already existing file.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the chosen file is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n /\n @Prop({ reflect: true })\n public accept: string = '';\n\n /*\n Defines the localisation for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a file is selected/deselected\n /\n @Event()\n private change: EventEmitter<FileInfo>;\n\n /\n Dispatched when clicking on a chip\n */\n @Event()\n private interact: EventEmitter<number \| string>;\n\n public render() {\n return [\n <limel-file-dropzone\n disabled={this.disabled \|\| this.readonly \|\| !!this.value}\n accept={this.accept}\n onFilesSelected={this.handleNewFiles}\n >\n {this.renderChipset()}\n </limel-file-dropzone>,\n this.renderDragAndDropTip(),\n ];\n }\n\n private renderDragAndDropTip() {\n if (this.value \|\| this.disabled \|\| this.readonly) {\n return;\n }\n\n return (\n <div class=\"drag-and-drop-tip\">\n <span class=\"invisible-label-mock\" role=\"presentation\">\n {this.label}\n </span>\n <span class=\"tip\">{this.dropZoneTip()}</span>\n </div>\n );\n }\n\n private dropZoneTip = (): string => {\n return this.getTranslation('file.drag-and-drop-tips');\n };\n\n private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n this.preventAndStop(event);\n this.change.emit(event.detail[0]);\n };\n\n private getChipArray(): Chip[] {\n if (!this.value) {\n return [];\n }\n\n return [\n {\n ...DEFAULT_FILE_CHIP,\n text: this.value.filename,\n id: this.value.id,\n icon: {\n name: getFileIcon(this.value),\n title: getFileExtensionTitle(this.value),\n color: getFileColor(this.value),\n backgroundColor: getFileBackgroundColor(this.value),\n },\n href: this.value.href,\n menuItems: this.value.menuItems,\n },\n ];\n }\n\n private renderChipset() {\n const chipset = (\n <limel-chip-set\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n leadingIcon=\"upload_to_cloud\"\n language={this.language}\n onChange={this.handleChipSetChange}\n onInteract={this.handleChipInteract}\n required={this.required}\n type=\"input\"\n value={this.getChipArray()}\n />\n );\n\n if (this.value) {\n return chipset;\n }\n\n return (\n <limel-file-input\n accept={this.accept}\n disabled={this.disabled \|\| this.readonly}\n >\n {chipset}\n </limel-file-input>\n );\n }\n\n private handleChipSetChange = (event: CustomEvent) => {\n event.stopPropagation();\n const file = event.detail.length === 0 ? event.detail[0] : null;\n if (!file) {\n this.change.emit(file);\n }\n };\n\n private handleChipInteract = (event: CustomEvent<Chip>) => {\n this.preventAndStop(event);\n this.interact.emit(event.detail.id);\n };\n\n private preventAndStop(event: Event) {\n event.stopPropagation();\n event.preventDefault();\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}
1	+ {"file":"limel-file.entry.cjs.js","mappings":"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","names":["h","Host","getFileIcon","getFileExtensionTitle","getFileColor","getFileBackgroundColor","translate"],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["@use '../../style/mixins';\n\n/*\n @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n /\n\n:host(limel-file) {\n position: relative;\n}\n\n.drag-and-drop-tip {\n pointer-events: none;\n position: absolute;\n box-sizing: border-box;\n margin: 0.25rem;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: flex-end;\n flex-wrap: nowrap;\n\n border-radius: 0.25rem;\n border: 1px dashed rgb(var(--contrast-700));\n\n padding: 0 0.5rem;\n\n .invisible-label-mock {\n flex-shrink: 0;\n opacity: 0;\n padding-right: 1rem;\n padding-left: 1.5rem;\n }\n\n .tip {\n font-size: smaller;\n color: var(--limel-theme-text-secondary-on-background-color);\n\n // Below tries to render text in two lines,\n // and then truncate if there is no more space\n height: auto;\n max-height: 3rem;\n line-height: 1;\n @include mixins.truncate-text-on-line(2);\n }\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport {\n getFileBackgroundColor,\n getFileColor,\n getFileExtensionTitle,\n getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n id: null,\n text: null,\n removable: true,\n};\n\n/\n This component lets end-users select a single file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n \n ## Using correct labels\n \n This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n \n :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n \n Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n \n and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n \n and similar phrases...\n * :::\n \n @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-menu-items\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n /\n@Component({\n tag: 'limel-file',\n shadow: true,\n styleUrl: 'file.scss',\n})\nexport class File {\n /\n The selected file.\n /\n @Prop()\n public value: FileInfo;\n\n /\n The input label.\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Set to `true` to indicate that the field is required.\n /\n @Prop({ reflect: true })\n public required: boolean = false;\n\n /\n True if the input should be disabled\n /\n @Prop({ reflect: true })\n public disabled: boolean = false;\n\n /\n Set to `true` to disable adding and removing files, but allow interaction\n * with any already existing file.\n /\n @Prop({ reflect: true })\n public readonly: boolean = false;\n\n /\n Set to `true` to indicate that the current value of the chosen file is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n /\n @Prop({ reflect: true })\n public accept: string = '';\n\n /*\n Defines the localisation for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n /\n Dispatched when a file is selected/deselected\n /\n @Event()\n private change: EventEmitter<FileInfo>;\n\n /\n Dispatched when clicking on a chip\n */\n @Event()\n private interact: EventEmitter<number \| string>;\n\n public render() {\n return (\n <Host>\n <limel-file-dropzone\n disabled={this.disabled \|\| this.readonly \|\| !!this.value}\n accept={this.accept}\n onFilesSelected={this.handleNewFiles}\n >\n {this.renderChipset()}\n </limel-file-dropzone>\n {this.renderDragAndDropTip()}\n </Host>\n );\n }\n\n private renderDragAndDropTip() {\n if (this.value \|\| this.disabled \|\| this.readonly) {\n return;\n }\n\n return (\n <div class=\"drag-and-drop-tip\">\n <span class=\"invisible-label-mock\" role=\"presentation\">\n {this.label}\n </span>\n <span class=\"tip\">{this.dropZoneTip()}</span>\n </div>\n );\n }\n\n private dropZoneTip = (): string => {\n return this.getTranslation('file.drag-and-drop-tips');\n };\n\n private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n this.preventAndStop(event);\n this.change.emit(event.detail[0]);\n };\n\n private getChipArray(): Chip[] {\n if (!this.value) {\n return [];\n }\n\n return [\n {\n ...DEFAULT_FILE_CHIP,\n text: this.value.filename,\n id: this.value.id,\n icon: {\n name: getFileIcon(this.value),\n title: getFileExtensionTitle(this.value),\n color: getFileColor(this.value),\n backgroundColor: getFileBackgroundColor(this.value),\n },\n href: this.value.href,\n menuItems: this.value.menuItems,\n },\n ];\n }\n\n private renderChipset() {\n const chipset = (\n <limel-chip-set\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n leadingIcon=\"upload_to_cloud\"\n language={this.language}\n onChange={this.handleChipSetChange}\n onInteract={this.handleChipInteract}\n required={this.required}\n type=\"input\"\n value={this.getChipArray()}\n />\n );\n\n if (this.value) {\n return chipset;\n }\n\n return (\n <limel-file-input\n accept={this.accept}\n disabled={this.disabled \|\| this.readonly}\n >\n {chipset}\n </limel-file-input>\n );\n }\n\n private handleChipSetChange = (event: CustomEvent) => {\n event.stopPropagation();\n const file = event.detail.length === 0 ? event.detail[0] : null;\n if (!file) {\n this.change.emit(file);\n }\n };\n\n private handleChipInteract = (event: CustomEvent<Chip>) => {\n this.preventAndStop(event);\n this.interact.emit(event.detail.id);\n };\n\n private preventAndStop(event: Event) {\n event.stopPropagation();\n event.preventDefault();\n }\n\n private getTranslation(key: string) {\n return translate.get(key, this.language);\n }\n}\n"],"version":3}

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

@@ -17,10 +17,7 @@ const Header = class {
     this.subheadingDivider = '·';
   }
   render() {
-    return [
-      index.h("div", { class: "information" }, this.renderIcon(), index.h("div", { class: "headings" }, index.h("h1", { class: "heading", title: this.heading }, this.heading), index.h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))),
-      index.h("slot", { name: "actions" }, index.h("slot", null)),
-    ];
+    return (index.h(index.Host, null, index.h("div", { class: "information" }, this.renderIcon(), index.h("div", { class: "headings" }, index.h("h1", { class: "heading", title: this.heading }, this.heading), index.h("h2", { class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), index.h("slot", { name: "actions" }, index.h("slot", null))));
   }
   renderIcon() {
     var _a, _b, _c, _d, _e;

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,+wDAA+wD;;MC6DpxD,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,~~QACID~~,wBACI,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,2BAA2B,EAAE,GAAG,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,mCAAI,EAAE,EAAE;QAClE,sCAAsC,EAAE,GACpC,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,eAAe,mCAAI,EAC5C,EAAE;QACF,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;OACzC,GACH,EACJ;GACL;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-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(\n --limel-header-icon-color,\n var(--header-icon-color, rgb(var(--contrast-1100)))\n );\n background-color: var(\n --limel-header-icon-background-color,\n var(--header-icon-background-color, transparent)\n );\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: var(--limel-theme-default-small-font-size);\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 (\n <limel-icon\n class=\"icon\"\n badge={true}\n name={icon}\n style={{\n '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n '--limel-header-icon-background-color': `${\n (this.icon as Icon)?.backgroundColor ?? ''\n }`,\n title: `${(this.icon as Icon)?.title}`,\n }}\n />\n );\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,+wDAA+wD;;MC6DpxD,MAAM;;;;;;;6BA8BqB,GAAG;;EAEhC,MAAM;IACT,QACIA,QAACC,UAAI,QACDD,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,EACNA,kBAAM,IAAI,EAAC,SAAS,IAChBA,qBAAQ,CACL,CACJ,EACT;GACL;EAEO,UAAU;;IACd,MAAM,IAAI,GAAGE,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,QACIF,wBACI,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;QACH,2BAA2B,EAAE,GAAG,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,mCAAI,EAAE,EAAE;QAClE,sCAAsC,EAAE,GACpC,MAAA,MAAC,IAAI,CAAC,IAAa,0CAAE,eAAe,mCAAI,EAC5C,EAAE;QACF,KAAK,EAAE,GAAG,MAAC,IAAI,CAAC,IAAa,0CAAE,KAAK,EAAE;OACzC,GACH,EACJ;GACL;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","Host","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-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(\n --limel-header-icon-color,\n var(--header-icon-color, rgb(var(--contrast-1100)))\n );\n background-color: var(\n --limel-header-icon-background-color,\n var(--header-icon-background-color, transparent)\n );\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: var(--limel-theme-default-small-font-size);\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, Host } 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 <Host>\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 </Host>\n );\n }\n\n private renderIcon() {\n const icon = getIconName(this.icon);\n\n if (!icon) {\n return;\n }\n\n return (\n <limel-icon\n class=\"icon\"\n badge={true}\n name={icon}\n style={{\n '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,\n '--limel-header-icon-background-color': `${\n (this.icon as Icon)?.backgroundColor ?? ''\n }`,\n title: `${(this.icon as Icon)?.title}`,\n }}\n />\n );\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 CHANGED Viewed

@@ -20,10 +20,7 @@ const HelpContent = class {
     this.readMoreLink = undefined;
   }
   render() {
-    return [
-      index.h("limel-markdown", { value: this.value }),
-      this.renderReadMoreLink(),
-    ];
+    return (index.h(index.Host, null, index.h("limel-markdown", { value: this.value }), this.renderReadMoreLink()));
   }
 };
 HelpContent.style = limelHelpContentCss;

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,i1CAAi1C;;MCiBh2C,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: var(--limel-theme-default-font-size);\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}
1	+ {"file":"limel-help-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,i1CAAi1C;;MCiBh2C,WAAW;;;IAgBZ,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;;;;EA1BK,MAAM;IACT,QACIA,QAACC,UAAI,QACDD,4BAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EACpC,IAAI,CAAC,kBAAkB,EAAE,CACvB,EACT;GACL;;;;;;","names":["h","Host"],"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: var(--limel-theme-default-font-size);\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, Host } 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 <Host>\n <limel-markdown value={this.value} />\n {this.renderReadMoreLink()}\n </Host>\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 CHANGED Viewed

@@ -24,11 +24,9 @@ const HelpComponent = class {
     this.isOpen = false;
   }
   render() {
-    return [
-      index.h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { slot: "trigger", onClick: this.openPopover, class: {
-          'is-open': this.isOpen,
-        } }, this.trigger), index.h("limel-help-content", { value: this.value, readMoreLink: this.readMoreLink })),
-    ];
+    return (index.h(index.Host, null, index.h("limel-popover", { open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { slot: "trigger", onClick: this.openPopover, class: {
+        'is-open': this.isOpen,
+      } }, this.trigger), index.h("limel-help-content", { value: this.value, readMoreLink: this.readMoreLink }))));
   }
 };
 HelpComponent.style = helpCss;

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,8yDAA8yD;;MC+BjzD,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}
1	+ {"file":"limel-help.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,8yDAA8yD;;MC+BjzD,aAAa;;;IAsDd,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;;mBAnDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,QACIA,QAACC,UAAI,QACDD,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;QACH,SAAS,EAAE,IAAI,CAAC,MAAM;OACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACTA,gCACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU,CACb,EACT;GACL;;;;;;","names":["h","Host"],"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, Host } 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 <Host>\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 </Host>\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-markdown.cjs.entry.js CHANGED Viewed

@@ -74,9 +74,7 @@ const Markdown = class {
     this.cleanupImageIntersectionObserver();
   }
   render() {
-    return [
-      index.h("div", { id: "markdown", ref: (el) => (this.rootElement = el) }),
-    ];
+    return (index.h(index.Host, null, index.h("div", { id: "markdown", ref: (el) => (this.rootElement = el) })));
   }
   setupImageIntersectionObserver() {
     if (this.lazyLoadImages) {

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

	@@ -1 +1 @@
1	- {"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;;MAAa,yBAAyB;;;;EAMlC,YAAmB,gBAA6B;IAa/B,uBAAkB,GAAG,CAClC,OAAoC;MAEpC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QACzB,IAAI,KAAK,CAAC,cAAc,EAAE;UACtB,MAAM,GAAG,GAAG,KAAK,CAAC,MAA0B,CAAC;UAC7C,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;UAEhC,IAAI,OAAO,EAAE;YACT,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACjC,OAAO,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;WAC1B;UAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;SAChC;OACJ;KACJ,CAAC;IA5BE,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAElE,MAAM,MAAM,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;MACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;KAC9B;GACJ;EAEM,UAAU;IACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;GAC9B;;;ACjBL,MAAM,WAAW,GAAG,m2OAAm2O;;MC+B12O,QAAQ;;;IA8DT,8BAAyB,GAAqC,IAAI,CAAC;iBAvDpD,EAAE;qBAYrBA,mBAAY,CAAC,iBAAiB;0BAMV,KAAK;iCASE,IAAI;;EAG5B,MAAM,WAAW;;IACpB,IAAI;MACA,IAAI,CAAC,gCAAgC,EAAE,CAAC;MAExC,MAAM,IAAI,GAAG,MAAMC,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;QAC/B,cAAc,EAAE,IAAI,CAAC,cAAc;QACnC,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;OACpD,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;MAElC,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAAC,OAAO,KAAK,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAGM,iCAAiC;IACpC,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;GAC7B;EAKM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAEM,oBAAoB;IACvB,IAAI,CAAC,gCAAgC,EAAE,CAAC;GAC3C;EAEM,MAAM;IACT,~~OAAO;MACHC~~,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD~~;KACL~~,~~CAAC~~;GACL;EAEO,8BAA8B;IAClC,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,yBAAyB,GAAG,IAAI,yBAAyB,CAC1D,IAAI,CAAC,WAAW,CACnB,CAAC;KACL;GACJ;EAEO,gCAAgC;IACpC,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAChC,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE,CAAC;MAC5C,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC;KACzC;GACJ;;;;;;;;;;","names":["globalConfig","markdownToHTML","h"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n private observer: IntersectionObserver;\n\n /*\n @param containerElement - The element containing images to observe.\n /\n public constructor(containerElement: HTMLElement) {\n this.observer = new IntersectionObserver(this.handleIntersection);\n\n const images = containerElement.querySelectorAll('img');\n for (const img of images) {\n this.observer.observe(img);\n }\n }\n\n public disconnect() {\n this.observer.disconnect();\n }\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[]\n ) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n const dataSrc = img.dataset.src;\n\n if (dataSrc) {\n img.setAttribute('src', dataSrc);\n delete img.dataset.src;\n }\n\n this.observer.unobserve(img);\n }\n }\n };\n}\n","/\n @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n,\n::before,\n::after {\n box-sizing: border-box;\n\n & :where(:not(img, video, svg, canvas, iframe)) {\n min-width: 0;\n min-height: 0;\n }\n}\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n\n:host(limel-markdown.reset-img-height) {\n // This is not a publicly documented helper class, intended for CRM's internal use.\n // Reset image height to auto to avoid issues with fixed heights in some markdown content\n // e.g., content copied from MS Word or emails that are sent from a user that has\n // added fixed heights to images that appear in the activity feed.\n #markdown {\n img {\n height: auto;\n }\n }\n}\n","import { Component, h, Prop, Watch } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/*\n The Markdown component receives markdown syntax\n * and renders it as HTML.\n \n @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-custom-component\n * @exampleComponent limel-example-markdown-remove-empty-paragraphs\n * @exampleComponent limel-example-markdown-composite\n /\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /\n The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n /\n @Prop()\n public value: string = '';\n\n /\n Whitelisted html elements.\n \n Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n /\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n /\n Enable lazy loading for images\n /\n @Prop({ reflect: true })\n public lazyLoadImages = false;\n\n /\n Set to `false` to preserve empty paragraphs before rendering.\n * Empty paragraphs are paragraphs that do not contain\n * any meaningful content (text, images, etc.), or only contain\n * whitespace (`<br />` or ` `).\n */\n @Prop({ reflect: true })\n public removeEmptyParagraphs = true;\n\n @Watch('value')\n public async textChanged() {\n try {\n this.cleanupImageIntersectionObserver();\n\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n lazyLoadImages: this.lazyLoadImages,\n removeEmptyParagraphs: this.removeEmptyParagraphs,\n });\n\n this.rootElement.innerHTML = html;\n\n this.setupImageIntersectionObserver();\n } catch (error) {\n console.error(error);\n }\n }\n\n @Watch('removeEmptyParagraphs')\n public handleRemoveEmptyParagraphsChange() {\n return this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n private imageIntersectionObserver: ImageIntersectionObserver \| null = null;\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n public disconnectedCallback() {\n this.cleanupImageIntersectionObserver();\n }\n\n public render() {\n return [\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n ~~/>,\~~n ];\n }\n\n private setupImageIntersectionObserver() {\n if (this.lazyLoadImages) {\n this.imageIntersectionObserver = new ImageIntersectionObserver(\n this.rootElement\n );\n }\n }\n\n private cleanupImageIntersectionObserver() {\n if (this.imageIntersectionObserver) {\n this.imageIntersectionObserver.disconnect();\n this.imageIntersectionObserver = null;\n }\n }\n}\n"],"version":3}
1	+ {"file":"limel-markdown.entry.cjs.js","mappings":";;;;;;;;;MAAa,yBAAyB;;;;EAMlC,YAAmB,gBAA6B;IAa/B,uBAAkB,GAAG,CAClC,OAAoC;MAEpC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;QACzB,IAAI,KAAK,CAAC,cAAc,EAAE;UACtB,MAAM,GAAG,GAAG,KAAK,CAAC,MAA0B,CAAC;UAC7C,MAAM,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;UAEhC,IAAI,OAAO,EAAE;YACT,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;YACjC,OAAO,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;WAC1B;UAED,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;SAChC;OACJ;KACJ,CAAC;IA5BE,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAElE,MAAM,MAAM,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxD,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE;MACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;KAC9B;GACJ;EAEM,UAAU;IACb,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;GAC9B;;;ACjBL,MAAM,WAAW,GAAG,m2OAAm2O;;MC+B12O,QAAQ;;;IA8DT,8BAAyB,GAAqC,IAAI,CAAC;iBAvDpD,EAAE;qBAYrBA,mBAAY,CAAC,iBAAiB;0BAMV,KAAK;iCASE,IAAI;;EAG5B,MAAM,WAAW;;IACpB,IAAI;MACA,IAAI,CAAC,gCAAgC,EAAE,CAAC;MAExC,MAAM,IAAI,GAAG,MAAMC,6BAAc,CAAC,IAAI,CAAC,KAAK,EAAE;QAC1C,mBAAmB,EAAE,IAAI;QACzB,SAAS,EAAE,MAAA,IAAI,CAAC,SAAS,mCAAI,EAAE;QAC/B,cAAc,EAAE,IAAI,CAAC,cAAc;QACnC,qBAAqB,EAAE,IAAI,CAAC,qBAAqB;OACpD,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,IAAI,CAAC;MAElC,IAAI,CAAC,8BAA8B,EAAE,CAAC;KACzC;IAAC,OAAO,KAAK,EAAE;MACZ,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;GACJ;EAGM,iCAAiC;IACpC,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC;GAC7B;EAKM,MAAM,gBAAgB;IACzB,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAEM,oBAAoB;IACvB,IAAI,CAAC,gCAAgC,EAAE,CAAC;GAC3C;EAEM,MAAM;IACT,QACIC,QAACC,UAAI,QACDD,iBACI,EAAE,EAAC,UAAU,EACb,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,GACxD,CACC,EACT;GACL;EAEO,8BAA8B;IAClC,IAAI,IAAI,CAAC,cAAc,EAAE;MACrB,IAAI,CAAC,yBAAyB,GAAG,IAAI,yBAAyB,CAC1D,IAAI,CAAC,WAAW,CACnB,CAAC;KACL;GACJ;EAEO,gCAAgC;IACpC,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAChC,IAAI,CAAC,yBAAyB,CAAC,UAAU,EAAE,CAAC;MAC5C,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC;KACzC;GACJ;;;;;;;;;;","names":["globalConfig","markdownToHTML","h","Host"],"sources":["./src/components/markdown/image-intersection-observer.ts","./src/components/markdown/markdown.scss?tag=limel-markdown&encapsulation=shadow","./src/components/markdown/markdown.tsx"],"sourcesContent":["export class ImageIntersectionObserver {\n private observer: IntersectionObserver;\n\n /*\n @param containerElement - The element containing images to observe.\n /\n public constructor(containerElement: HTMLElement) {\n this.observer = new IntersectionObserver(this.handleIntersection);\n\n const images = containerElement.querySelectorAll('img');\n for (const img of images) {\n this.observer.observe(img);\n }\n }\n\n public disconnect() {\n this.observer.disconnect();\n }\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[]\n ) => {\n for (const entry of entries) {\n if (entry.isIntersecting) {\n const img = entry.target as HTMLImageElement;\n const dataSrc = img.dataset.src;\n\n if (dataSrc) {\n img.setAttribute('src', dataSrc);\n delete img.dataset.src;\n }\n\n this.observer.unobserve(img);\n }\n }\n };\n}\n","/\n @prop --markdown-hyperlink-color: color of text for hyperlinks. Defaults to `--color-blue-dark`;\n* @prop --markdown-hyperlink-color--hovered: color of text for hyperlinks when hovered. Defaults to `--color-blue-default`;\n/\n\n@forward './partial-styles/pre-code';\n@forward './partial-styles/headings';\n@forward './partial-styles/body-text';\n@forward './partial-styles/lists';\n@forward './partial-styles/tables';\n@forward './partial-styles/blockquotes';\n@forward './partial-styles/definition-lists';\n@forward './partial-styles/img';\n@forward './partial-styles/kbd';\n@forward './partial-styles/_adjust-for-table-cell';\n\n,\n::before,\n::after {\n box-sizing: border-box;\n\n & :where(:not(img, video, svg, canvas, iframe)) {\n min-width: 0;\n min-height: 0;\n }\n}\n\n// body-text\nhr {\n border-top: 1px solid rgb(var(--contrast-700));\n}\n\n.MsoNormal {\n margin: 0;\n}\n\n:host(limel-markdown.reset-img-height) {\n // This is not a publicly documented helper class, intended for CRM's internal use.\n // Reset image height to auto to avoid issues with fixed heights in some markdown content\n // e.g., content copied from MS Word or emails that are sent from a user that has\n // added fixed heights to images that appear in the activity feed.\n #markdown {\n img {\n height: auto;\n }\n }\n}\n","import { Component, h, Prop, Watch, Host } from '@stencil/core';\nimport { markdownToHTML } from './markdown-parser';\nimport { globalConfig } from '../../global/config';\nimport { CustomElementDefinition } from '../../global/shared-types/custom-element.types';\nimport { ImageIntersectionObserver } from './image-intersection-observer';\n\n/*\n The Markdown component receives markdown syntax\n * and renders it as HTML.\n \n @exampleComponent limel-example-markdown-headings\n * @exampleComponent limel-example-markdown-emphasis\n * @exampleComponent limel-example-markdown-lists\n * @exampleComponent limel-example-markdown-links\n * @exampleComponent limel-example-markdown-images\n * @exampleComponent limel-example-markdown-code\n * @exampleComponent limel-example-markdown-footnotes\n * @exampleComponent limel-example-markdown-tables\n * @exampleComponent limel-example-markdown-html\n * @exampleComponent limel-example-markdown-keys\n * @exampleComponent limel-example-markdown-blockquotes\n * @exampleComponent limel-example-markdown-horizontal-rule\n * @exampleComponent limel-example-markdown-custom-component\n * @exampleComponent limel-example-markdown-remove-empty-paragraphs\n * @exampleComponent limel-example-markdown-composite\n /\n@Component({\n tag: 'limel-markdown',\n styleUrl: 'markdown.scss',\n shadow: true,\n})\nexport class Markdown {\n /\n The input text. Treated as GitHub Flavored Markdown, with the addition\n * that any included HTML will be parsed and rendered as HTML, rather than\n * as text.\n /\n @Prop()\n public value: string = '';\n\n /\n Whitelisted html elements.\n \n Any custom element added here will not be sanitized and thus rendered.\n * Can also be set via `limel-config`. Setting this property will override\n * the global config.\n * @alpha\n /\n @Prop()\n public whitelist?: CustomElementDefinition[] =\n globalConfig.markdownWhitelist;\n\n /\n Enable lazy loading for images\n /\n @Prop({ reflect: true })\n public lazyLoadImages = false;\n\n /\n Set to `false` to preserve empty paragraphs before rendering.\n * Empty paragraphs are paragraphs that do not contain\n * any meaningful content (text, images, etc.), or only contain\n * whitespace (`<br />` or ` `).\n */\n @Prop({ reflect: true })\n public removeEmptyParagraphs = true;\n\n @Watch('value')\n public async textChanged() {\n try {\n this.cleanupImageIntersectionObserver();\n\n const html = await markdownToHTML(this.value, {\n forceHardLineBreaks: true,\n whitelist: this.whitelist ?? [],\n lazyLoadImages: this.lazyLoadImages,\n removeEmptyParagraphs: this.removeEmptyParagraphs,\n });\n\n this.rootElement.innerHTML = html;\n\n this.setupImageIntersectionObserver();\n } catch (error) {\n console.error(error);\n }\n }\n\n @Watch('removeEmptyParagraphs')\n public handleRemoveEmptyParagraphsChange() {\n return this.textChanged();\n }\n\n private rootElement: HTMLDivElement;\n private imageIntersectionObserver: ImageIntersectionObserver \| null = null;\n\n public async componentDidLoad() {\n this.textChanged();\n }\n\n public disconnectedCallback() {\n this.cleanupImageIntersectionObserver();\n }\n\n public render() {\n return (\n <Host>\n <div\n id=\"markdown\"\n ref={(el) => (this.rootElement = el as HTMLDivElement)}\n />\n </Host>\n );\n }\n\n private setupImageIntersectionObserver() {\n if (this.lazyLoadImages) {\n this.imageIntersectionObserver = new ImageIntersectionObserver(\n this.rootElement\n );\n }\n }\n\n private cleanupImageIntersectionObserver() {\n if (this.imageIntersectionObserver) {\n this.imageIntersectionObserver.disconnect();\n this.imageIntersectionObserver = null;\n }\n }\n}\n"],"version":3}

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-picker.cjs\",[[17,\"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],\"allItems\":[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]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[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]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[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],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[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]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"accessibleValuesLabel\":[513,\"accessible-values-label\"],\"displayAxisLabels\":[516,\"display-axis-labels\"],\"displayItemText\":[516,\"display-item-text\"],\"displayItemValue\":[516,\"display-item-value\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[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\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513],\"paginationLocation\":[513,\"pagination-location\"]}]]],[\"limel-drag-handle.cjs\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[516],\"disabled\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"lineNumbers\":[516,\"line-numbers\"],\"lineWrapping\":[516,\"line-wrapping\"],\"fold\":[516],\"lint\":[516],\"colorScheme\":[513,\"color-scheme\"],\"translationLanguage\":[513,\"translation-language\"],\"showCopyButton\":[516,\"show-copy-button\"],\"random\":[32],\"wasCopied\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"displaysPercentageColors\":[516,\"displays-percentage-colors\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button.cjs\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[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],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-chip_2.cjs\",[[17,\"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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[516,\"lazy-load-images\"],\"removeEmptyParagraphs\":[516,\"remove-empty-paragraphs\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-helper-line_2.cjs\",[[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_7.cjs\",[[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],\"rootItem\":[16],\"searcher\":[16],\"searchPlaceholder\":[1,\"search-placeholder\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[17,\"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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513],\"canScrollUp\":[32],\"canScrollDown\":[32]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-picker.cjs\",[[17,\"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],\"allItems\":[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]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[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]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"manualInput\":[516,\"manual-input\"],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[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],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[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]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"accessibleValuesLabel\":[513,\"accessible-values-label\"],\"displayAxisLabels\":[516,\"display-axis-labels\"],\"displayItemText\":[516,\"display-item-text\"],\"displayItemValue\":[516,\"display-item-value\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-table.cjs\",[[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\"],\"sortableColumns\":[4,\"sortable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513],\"paginationLocation\":[513,\"pagination-location\"]}]]],[\"limel-drag-handle.cjs\",[[0,\"limel-drag-handle\",{\"dragDirection\":[513,\"drag-direction\"],\"tooltipOpenDirection\":[513,\"tooltip-open-direction\"],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[516],\"disabled\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"lineNumbers\":[516,\"line-numbers\"],\"lineWrapping\":[516,\"line-wrapping\"],\"fold\":[516],\"lint\":[516],\"colorScheme\":[513,\"color-scheme\"],\"translationLanguage\":[513,\"translation-language\"],\"showCopyButton\":[516,\"show-copy-button\"],\"random\":[32],\"wasCopied\":[32]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"displaysPercentageColors\":[516,\"displays-percentage-colors\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"manualInput\":[516,\"manual-input\"],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-radio-button.cjs\",[[0,\"limel-radio-button\",{\"checked\":[516],\"disabled\":[516],\"id\":[1],\"label\":[1],\"onChange\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[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],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-chip_2.cjs\",[[17,\"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],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[516,\"lazy-load-images\"],\"removeEmptyParagraphs\":[516,\"remove-empty-paragraphs\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-helper-line_2.cjs\",[[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-breadcrumbs_7.cjs\",[[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],\"rootItem\":[16],\"searcher\":[16],\"searchPlaceholder\":[1,\"search-placeholder\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[17,\"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],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}]]]]"), options);
   });
 };

package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 /**
  * @private
  */
@@ -22,9 +22,7 @@ export class ActionBarOverflowMenu {
     this.overFlowIcon = undefined;
   }
   render() {
-    return [
-      h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.getOverflowTriggerContent())),
-    ];
+    return (h(Host, null, h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.getOverflowTriggerContent()))));
   }
   get numberOfMenuItems() {
     return this.items.filter((item) => this.isMenuItem(item)).length;

package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar-overflow-menu.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;~~AAOxE~~;;GAEG;AAKH,MAAM,OAAO,qBAAqB;;~~IA6CtB~~,8BAAyB,GAAG,GAAG,EAAE;MACrC,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEjD,OAAO,CACH,kBACI,KAAK,EAAE;YACH,KAAK,EAAE,KAAK;WACf,EACD,IAAI,EAAE,IAAI,gBACE,KAAK,GACnB,CACL,CAAC;OACL;MAED,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;MAC7D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;~~yBAnDoC~~,YAAY;;;EAgB3C,MAAM;IACT,OAAO;~~MACH~~,kBACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAE3B,cAAQ,IAAI,EAAC,SAAS,IACjB,IAAI,CAAC,yBAAyB,EAAE,CAC5B,CACA~~;KAChB~~,CAAC;EACN,CAAC;EAyBD,IAAY,iBAAiB;IACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;EACrE,CAAC;EAEO,UAAU,CAAC,IAA8B;IAC7C,OAAO,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list-item/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\nimport { Icon } from '../../../global/shared-types/icon.types';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Icon to display in the overflow menu trigger.\n * If not provided, the number of items in the overflow menu will be displayed.\n /\n @Prop()\n public overFlowIcon?: Icon;\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">\n {this.getOverflowTriggerContent()}\n </button>\n </limel-menu~~>,\~~n ];\n }\n\n private getOverflowTriggerContent = () => {\n if (this.overFlowIcon) {\n const { color, name, title } = this.overFlowIcon;\n\n return (\n <limel-icon\n style={{\n color: color,\n }}\n name={name}\n aria-label={title}\n />\n );\n }\n\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"]}
1	+ {"version":3,"file":"action-bar-overflow-menu.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E;;GAEG;AAKH,MAAM,OAAO,qBAAqB;;IA+CtB,8BAAyB,GAAG,GAAG,EAAE;MACrC,IAAI,IAAI,CAAC,YAAY,EAAE;QACnB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAEjD,OAAO,CACH,kBACI,KAAK,EAAE;YACH,KAAK,EAAE,KAAK;WACf,EACD,IAAI,EAAE,IAAI,gBACE,KAAK,GACnB,CACL,CAAC;OACL;MAED,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACxC,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC,EAAE,EAAE;MAC7D,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;;yBArDoC,YAAY;;;EAgB3C,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,kBACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAE3B,cAAQ,IAAI,EAAC,SAAS,IACjB,IAAI,CAAC,yBAAyB,EAAE,CAC5B,CACA,CACV,CACV,CAAC;EACN,CAAC;EAyBD,IAAY,iBAAiB;IACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;EACrE,CAAC;EAEO,UAAU,CAAC,IAA8B;IAC7C,OAAO,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list-item/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\nimport { Icon } from '../../../global/shared-types/icon.types';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Icon to display in the overflow menu trigger.\n * If not provided, the number of items in the overflow menu will be displayed.\n /\n @Prop()\n public overFlowIcon?: Icon;\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return (\n <Host>\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">\n {this.getOverflowTriggerContent()}\n </button>\n </limel-menu>\n </Host>\n );\n }\n\n private getOverflowTriggerContent = () => {\n if (this.overFlowIcon) {\n const { color, name, title } = this.overFlowIcon;\n\n return (\n <limel-icon\n style={{\n color: color,\n }}\n name={name}\n aria-label={title}\n />\n );\n }\n\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { getHeading, getIcon } from './callout.helpers';
 /**
  * Callouts—also known as Admonitions—are useful for including supportive or
@@ -36,10 +36,7 @@ export class Callout {
     this.language = 'en';
   }
   render() {
-    return [
-      h("div", { class: "side", role: "presentation" }, h("limel-icon", { name: getIcon(this.icon, this.type) })),
-      h("div", { class: "main" }, h("h1", { class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", null)),
-    ];
+    return (h(Host, null, h("div", { class: "side", role: "presentation" }, h("limel-icon", { name: getIcon(this.icon, this.type) })), h("div", { class: "main" }, h("h1", { class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", null))));
   }
   static get is() { return "limel-callout"; }
   static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../src/components/callout/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAGnD~~,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAMH,MAAM,OAAO,OAAO;;;;gBAoBY,MAAM;oBAOL,IAAI;;EAE1B,MAAM;IACT,OAAO;~~MACH~~,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc;QACjC,kBAAY,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD;MACN,WAAK,KAAK,EAAC,MAAM;QACb,UAAI,KAAK,EAAC,SAAS,IACd,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClD;QACL,eAAQ,CACN~~;KACT~~,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/*\n Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n \n When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n \n In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n \n @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n /\n@Component({\n tag: 'limel-callout',\n shadow: true,\n styleUrl: 'callout.scss',\n})\nexport class Callout {\n /\n Heading of the callout, which can be used to override the\n * default heading which is displayed based on the chosen `type`.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Icon of the callout, which can be used to override the\n * default icon which is displayed based on the chosen `type`.\n /\n @Prop({ reflect: true })\n public icon?: string;\n\n /\n Defines how the component is visualized, for example\n * which heading, color or icon is used in its user interface.\n /\n @Prop({ reflect: true })\n public type?: CalloutType = 'note';\n\n /\n Defines the language for translations.\n * Will translate the default headings for supported languages.\n */\n @Prop()\n public language: Languages = 'en';\n\n public render() {\n return [\n <div class=\"side\" role=\"presentation\">\n <limel-icon name={getIcon(this.icon, this.type)} />\n </div~~>,\~~n <div class=\"main\">\n <h1 class=\"heading\">\n {getHeading(this.heading, this.type, this.language)}\n </h1>\n <slot />\n </div~~>,\~~n ];\n }\n}\n"]}
1	+ {"version":3,"file":"callout.js","sourceRoot":"","sources":["../../../src/components/callout/callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAMH,MAAM,OAAO,OAAO;;;;gBAoBY,MAAM;oBAOL,IAAI;;EAE1B,MAAM;IACT,OAAO,CACH,EAAC,IAAI;MACD,WAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc;QACjC,kBAAY,IAAI,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAI,CACjD;MACN,WAAK,KAAK,EAAC,MAAM;QACb,UAAI,KAAK,EAAC,SAAS,IACd,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAClD;QACL,eAAQ,CACN,CACH,CACV,CAAC;EACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\nimport { CalloutType } from '../callout/callout.types';\nimport { Languages } from '../date-picker/date.types';\nimport { getHeading, getIcon } from './callout.helpers';\n\n/*\n Callouts—also known as Admonitions—are useful for including supportive or\n * special content within a large piece of text, or even inside a user\n * interface.\n \n When used in a document or text based user interface, the callout attracts\n * the reader's attention to a particular piece of information, without\n * significantly interrupting their flow of reading the document.\n \n In a user interface, a callout is more intrusive to the end-user. Still, it\n * could be a good choice when you intend to slightly disturb the user's\n * attention, and challenge them to pay extra attention to the information\n * presented. In such cases, a callout should not be used as a static and\n * constantly present element of the UI. Rather, it should be displayed when\n * something unusual or remarkable demands the user's attention.\n \n @exampleComponent limel-example-callout-note\n * @exampleComponent limel-example-callout-important\n * @exampleComponent limel-example-callout-tip\n * @exampleComponent limel-example-callout-caution\n * @exampleComponent limel-example-callout-warning\n * @exampleComponent limel-example-callout-rich-content\n * @exampleComponent limel-example-callout-custom-heading\n * @exampleComponent limel-example-callout-custom-icon\n * @exampleComponent limel-example-callout-styles\n * @exampleComponent limel-example-custom-type\n * @exampleComponent limel-example-callout-composite\n /\n@Component({\n tag: 'limel-callout',\n shadow: true,\n styleUrl: 'callout.scss',\n})\nexport class Callout {\n /\n Heading of the callout, which can be used to override the\n * default heading which is displayed based on the chosen `type`.\n /\n @Prop({ reflect: true })\n public heading?: string;\n\n /\n Icon of the callout, which can be used to override the\n * default icon which is displayed based on the chosen `type`.\n /\n @Prop({ reflect: true })\n public icon?: string;\n\n /\n Defines how the component is visualized, for example\n * which heading, color or icon is used in its user interface.\n /\n @Prop({ reflect: true })\n public type?: CalloutType = 'note';\n\n /\n Defines the language for translations.\n * Will translate the default headings for supported languages.\n */\n @Prop()\n public language: Languages = 'en';\n\n public render() {\n return (\n <Host>\n <div class=\"side\" role=\"presentation\">\n <limel-icon name={getIcon(this.icon, this.type)} />\n </div>\n <div class=\"main\">\n <h1 class=\"heading\">\n {getHeading(this.heading, this.type, this.language)}\n </h1>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/card/card.css CHANGED Viewed

@@ -148,10 +148,39 @@ section:hover img, section:focus-visible img {
   filter: saturate(1.3);
 }
-limel-markdown {
+.markdown-wrapper {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.markdown-wrapper limel-markdown {
   overflow-y: auto;
+  flex-grow: 1;
   padding: 0.5rem 0.75rem;
 }
+.markdown-wrapper::before {
+  top: 0;
+  background: radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
+}
+.markdown-wrapper::after {
+  bottom: 0;
+  background: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
+}
+.markdown-wrapper::before, .markdown-wrapper::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  left: 0;
+  height: 0.75rem;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  background-repeat: no-repeat;
+}
+.markdown-wrapper.can-scroll-up::before, .markdown-wrapper.can-scroll-down::after {
+  opacity: 1;
+}
 header {
   flex-shrink: 0;