npm - @limetech/lime-elements - Versions diffs - 37.65.4 → 37.65.6 - Mend

@limetech/lime-elements 37.65.4 → 37.65.6

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

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

@@ -56,7 +56,7 @@ class SnackbarContainer {
   }
 }
-const snackbarCss = "*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}";
+const snackbarCss = "*{box-sizing:border-box}aside{background:none;border:none;inset:unset;overflow:visible;padding:0.5rem 0.5rem 0 0.5rem;right:0;width:var(--limel-snackbar-width, 21rem);top:calc(var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0));transition:opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease, top var(--limel-snackbar-top-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89), transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;transform:translate3d(0, 0, 0);opacity:1}aside.is-closing{transform:translate3d(2rem, 0, 0);opacity:0;--limel-snackbar-top-transition-speed:0.2s;--limel-snackbar-opacity-transition-speed:0.2s}.surface{overflow:hidden;padding:0.5rem;display:flex;align-items:center;justify-content:flex-start;gap:0.25rem;min-height:3.25rem;border-radius:0.75rem;background-color:rgb(var(--contrast-1400));box-shadow:var(--shadow-depth-8), var(--shadow-depth-16)}.label{color:rgb(var(--contrast-100));-webkit-font-smoothing:antialiased;font-size:0.8125rem;font-weight:400;padding:0 0.25rem;width:100%;flex-grow:1}.actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;gap:0.5rem}.dismiss,.actions{--lime-elevated-surface-background-color:rgb(\n      var(--contrast-1300)\n  )}.dismiss{--mdc-theme-on-surface:rgb(var(--contrast-100));--icon-background-color:var(--lime-elevated-surface-background-color);--fill-color:var(--mdc-theme-primary);--track-color:rgb(var(--contrast-800), 0.2);transition:opacity 0.1s ease, transform 0.1s ease;position:absolute;top:-0.375rem;left:-0.375rem;transform:scale(0.7);display:flex;align-items:center;justify-content:center}.dismiss svg{position:absolute;transform:rotate(90deg);fill:transparent;stroke-dasharray:100;stroke-linecap:round}aside:popover-open .dismiss svg{animation:timeout var(--snackbar-timeout) linear forwards}.dismiss .is-closing{transform:scale(0.5);opacity:0}.dismiss-button{transform:scale(0.8);margin:0;padding:0}@keyframes timeout{0%{stroke-width:4;stroke-dashoffset:0;opacity:1}100%{stroke-width:1;stroke-dashoffset:-100;opacity:0.7}}.limel-portal--container{font-family:var(--limel-portal-font-family, inherit);opacity:0;display:none}.limel-portal--container.is-visible{opacity:1;display:inline-block}.limel-portal--container.is-visible>*{will-change:opacity, transform}@keyframes fade-in{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1) translate3d(0, 0, 0)}}@keyframes fade-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.94) translate3d(0, 0, 0)}}.limel-portal--container>*{animation:fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards}.limel-portal--container.is-hiding>*{animation:fade-out 0.22s ease forwards}.limel-portal--container[data-popper-placement=left-start]>*{transform-origin:right top}.limel-portal--container[data-popper-placement=left]>*{transform-origin:right center}.limel-portal--container[data-popper-placement=left-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=top-start]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=top]>*{transform-origin:center bottom}.limel-portal--container[data-popper-placement=top-end]>*{transform-origin:right bottom}.limel-portal--container[data-popper-placement=right-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=right]>*{transform-origin:left center}.limel-portal--container[data-popper-placement=right-end]>*{transform-origin:left bottom}.limel-portal--container[data-popper-placement=bottom-start]>*{transform-origin:left top}.limel-portal--container[data-popper-placement=bottom]>*{transform-origin:center top}.limel-portal--container[data-popper-placement=bottom-end]>*{transform-origin:right top}";
 const container = new SnackbarContainer();
 const hideAnimationDuration = 300;
@@ -143,6 +143,7 @@ const Snackbar = class {
       }, class: {
         open: this.open,
         'is-closing': this.closing,
+        'limel-portal--parent': true,
       }, id: this.snackbarId, role: this.setAriaRoles(), "aria-relevant": this.open ? 'additions' : undefined }, index.h("div", { class: "surface", "aria-atomic": "false" }, index.h("div", { class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
   }
   setAriaRoles() {

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

	@@ -1 +1 @@
1	- {"file":"limel-snackbar.entry.cjs.js","mappings":"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","names":["createRandomString","h","translate"],"sources":["./src/components/snackbar/container.ts","./src/components/snackbar/snackbar.scss?tag=limel-snackbar&encapsulation=shadow","./src/components/snackbar/snackbar.tsx"],"sourcesContent":["/*\n Container to keep track of all snackbar elements that gets added to the page.\n * When an element gets added or removed, the container will emit a\n * `changeOffset` event on all elements in the container, letting them know\n * the new offset to where they should position themselves.\n /\nexport class SnackbarContainer {\n private snackbarElements: HTMLLimelSnackbarElement[] = [];\n\n /\n Add a new element to the container\n \n @param snackbar - element to add\n /\n public add(snackbar: HTMLLimelSnackbarElement) {\n const popover = this.getPopover(snackbar);\n\n // Stencil does not seem to recognise the existance of showPopover\n // @ts-ignore\n popover?.showPopover();\n\n this.snackbarElements = [snackbar, ...this.snackbarElements];\n this.emitOffsets();\n }\n\n /\n Remove an element from the container\n \n @param snackbar - element to remove\n /\n public remove(snackbar: HTMLLimelSnackbarElement): void {\n const popover = this.getPopover(snackbar);\n\n // Stencil does not seem to recognise the existance of hidePopover\n // @ts-ignore\n popover?.hidePopover();\n\n this.snackbarElements = this.snackbarElements.filter(\n (item) => item !== snackbar,\n );\n this.emitOffsets();\n }\n\n private emitOffsets() {\n let offset = 0;\n this.snackbarElements.forEach((snackbar) => {\n snackbar.dispatchEvent(\n new CustomEvent('changeOffset', {\n detail: offset,\n }),\n );\n offset += this.getPopover(snackbar).getBoundingClientRect().height;\n });\n }\n\n private getPopover(snackbar: HTMLLimelSnackbarElement) {\n return snackbar.shadowRoot.querySelector('[popover]');\n }\n}\n"," {\n box-sizing: border-box;\n}\n\naside {\n background: none;\n border: none;\n inset: unset;\n overflow: visible;\n padding: 0.5rem 0.5rem 0 0.5rem;\n right: 0;\n\n width: var(--limel-snackbar-width, 21rem);\n top: calc(\n var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0)\n );\n\n transition:\n opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease,\n top var(--limel-snackbar-top-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89),\n transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n\n &.is-closing {\n transform: translate3d(2rem, 0, 0);\n opacity: 0;\n --limel-snackbar-top-transition-speed: 0.2s;\n --limel-snackbar-opacity-transition-speed: 0.2s;\n }\n}\n\n.surface {\n overflow: hidden;\n\n padding: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 0.25rem;\n\n min-height: 3.25rem;\n border-radius: 0.75rem;\n\n background-color: rgb(var(--contrast-1400));\n box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);\n}\n\n.label {\n color: rgb(var(--contrast-100));\n\n -webkit-font-smoothing: antialiased;\n font-size: 0.8125rem;\n font-weight: 400;\n padding: 0 0.25rem;\n\n width: 100%;\n flex-grow: 1;\n}\n\n.actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n gap: 0.5rem;\n}\n\n.dismiss,\n.actions {\n --lime-elevated-surface-background-color: rgb(\n var(--contrast-1300)\n ); // background color of the buttons\n}\n\n.dismiss {\n --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon\n --icon-background-color: var(--lime-elevated-surface-background-color);\n --fill-color: var(--mdc-theme-primary);\n --track-color: rgb(var(--contrast-800), 0.2);\n transition:\n opacity 0.1s ease,\n transform 0.1s ease;\n position: absolute;\n top: -0.375rem;\n left: -0.375rem;\n transform: scale(0.7);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n position: absolute;\n transform: rotate(90deg);\n fill: transparent;\n stroke-dasharray: 100;\n stroke-linecap: round;\n\n aside:popover-open & {\n animation: timeout var(--snackbar-timeout) linear forwards;\n }\n }\n\n .is-closing {\n transform: scale(0.5);\n opacity: 0;\n }\n}\n\n.dismiss-button {\n transform: scale(0.8);\n margin: 0;\n padding: 0;\n}\n\n@keyframes timeout {\n 0% {\n stroke-width: 4;\n stroke-dashoffset: 0;\n opacity: 1;\n }\n 100% {\n stroke-width: 1;\n stroke-dashoffset: -100;\n opacity: 0.7;\n }\n}\n","import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/*\n A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n \n The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n \n It means if the user misses the information, it shouldn't be a big deal.\n \n :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n \n @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n /\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /\n `true` if the snackbar is open, `false` otherwise.\n /\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /\n The text message to display.\n /\n @Prop()\n public message: string;\n\n /\n The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line no-magic-numbers\n public timeout?: number = 5000;\n\n /\n The text to display for the action button.\n /\n @Prop()\n public actionText: string;\n\n /\n When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n /\n @Prop()\n public dismissible: boolean = true;\n\n /\n Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n /\n @Prop()\n public multiline: boolean;\n\n /\n Defines the language for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private host: HTMLLimelSnackbarElement;\n\n /\n Emitted when the action button is pressed\n /\n @Event()\n private action: EventEmitter<void>;\n\n /\n Emitted when the snackbar hides itself\n /\n @Event()\n private hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /\n Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration,\n ),\n );\n }\n };\n\n private handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout \|\| 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return undefined;\n }\n\n if (!this.timeout \|\| this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout \|\| this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\n );\n }\n}\n"],"version":3}
1	+ {"file":"limel-snackbar.entry.cjs.js","mappings":";;;;;;;;AAAA;;;;;;MAMa,iBAAiB;EAA9B;IACY,qBAAgB,GAA+B,EAAE,CAAC;GAmD7D;;;;;;EA5CU,GAAG,CAAC,QAAkC;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;;;IAI1C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,CAAC;IAEvB,IAAI,CAAC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC7D,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;;;;;;EAOM,MAAM,CAAC,QAAkC;IAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;;;IAI1C,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,CAAC;IAEvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAChD,CAAC,IAAI,KAAK,IAAI,KAAK,QAAQ,CAC9B,CAAC;IACF,IAAI,CAAC,WAAW,EAAE,CAAC;GACtB;EAEO,WAAW;IACf,IAAI,MAAM,GAAG,CAAC,CAAC;IACf,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,QAAQ;MACnC,QAAQ,CAAC,aAAa,CAClB,IAAI,WAAW,CAAC,cAAc,EAAE;QAC5B,MAAM,EAAE,MAAM;OACjB,CAAC,CACL,CAAC;MACF,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;KACtE,CAAC,CAAC;GACN;EAEO,UAAU,CAAC,QAAkC;IACjD,OAAO,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;GACzD;;;ACzDL,MAAM,WAAW,GAAG,sqHAAsqH;;ACiB1rH,MAAM,SAAS,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAC1C,MAAM,qBAAqB,GAAG,GAAG,CAAC;MAoCrB,QAAQ;EA8EjB;;;;IA0CO,eAAU,GAAG;MAChB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO;OACV;MAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MAEzB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,EAAE;QACrC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAC9B,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,GAAG,CACJ,IAAI,CAAC,OAAO,GAAG,qBAAqB,EACpC,qBAAqB,CACxB,CACJ,CAAC;OACL;KACJ,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;QACd,OAAO;OACV;MAED,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MAEpB,IAAI,IAAI,CAAC,SAAS,EAAE;QAChB,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;OAC9B;MAED,UAAU,CAAC;QACP,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;OACnB,EAAE,qBAAqB,CAAC,CAAC;KAC7B,CAAC;IAwCM,sBAAiB,GAAG;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;gBAnMqB,KAAK;;mBAkBF,IAAI;;uBAaA,IAAI;;oBAaL,IAAI;kBAkBR,CAAC;kBAGA,KAAK;mBAGJ,IAAI;IAM3B,IAAI,CAAC,UAAU,GAAGA,+BAAkB,EAAE,CAAC;GAC1C;EAEM,gBAAgB;IACnB,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,qBAAqB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC1C;GACJ;EAGS,aAAa,CAAC,KAA0B;IAC9C,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;GAC9B;EAGS,SAAS;IACf,IAAI,IAAI,CAAC,IAAI,EAAE;MACX,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;SAAM;MACH,IAAI,CAAC,WAAW,EAAE,CAAC;KACtB;IAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;GAC3B;;;;;EAOM,MAAM,IAAI;;IAEb,OAAO,CAAC,IAAI,CACR,8FAA8F,CACjG,CAAC;IACF,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;GACJ;EA0CM,MAAM;IACT,QACIC,mBACI,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE;QACH,oBAAoB,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI;QAC3D,iCAAiC,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;OACxD,EACD,KAAK,EAAE;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,YAAY,EAAE,IAAI,CAAC,OAAO;QAC1B,sBAAsB,EAAE,IAAI;OAC/B,EACD,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,mBACV,IAAI,CAAC,IAAI,GAAG,WAAW,GAAG,SAAS,IAElDA,iBAAK,KAAK,EAAC,SAAS,iBAAa,OAAO,IACpCA,iBAAK,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,OAAO,CAAO,EACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,EACnC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CACzC,CACF,EACV;GACL;EAEO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACZ,OAAO,SAAS,CAAC;KACpB;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,EAAE;MACtC,OAAO,aAAa,CAAC;KACxB;IAED,OAAO,QAAQ,CAAC;GACnB;EAMO,aAAa,CAAC,UAAkB;IACpC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,QACIA,iBAAK,KAAK,EAAC,SAAS,iBAAa,MAAM,IAClC,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC,CAClC,EACR;GACL;EAEO,kBAAkB,CAAC,UAAkB;IACzC,IAAI,CAAC,UAAU,EAAE;MACb,OAAO;KACV;IAED,QACIA,0BAAc,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB,GAAI,EACtE;GACL;EAEO,mBAAmB,CAAC,WAAoB;IAC5C,IAAI,CAAC,WAAW,EAAE;MACd,OAAO;KACV;IAED,MAAM,KAAK,GAAGC,sBAAS,CAAC,GAAG,CAAC,kBAAkB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAE/D,QACID,iBAAK,KAAK,EAAC,SAAS,IACf,IAAI,CAAC,0BAA0B,EAAE,EAClCA,+BACI,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,WAAW,mBACV,IAAI,CAAC,UAAU,GAChC,CACA,EACR;GACL;EAEO,0BAA0B;IAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC,EAAE;MACtC,OAAO;KACV;IAED,QACIA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAC3CA,oBAAQ,CAAC,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,GAAG,EAC3DA,kBACI,KAAK,EAAC,OAAO,EACb,CAAC,EAAC,wDAAwD,EAC1D,MAAM,EAAC,mBAAmB,GAC5B,CACA,EACR;GACL;;;;;;;;;;","names":["createRandomString","h","translate"],"sources":["./src/components/snackbar/container.ts","./src/components/snackbar/snackbar.scss?tag=limel-snackbar&encapsulation=shadow","./src/components/snackbar/snackbar.tsx"],"sourcesContent":["/*\n Container to keep track of all snackbar elements that gets added to the page.\n * When an element gets added or removed, the container will emit a\n * `changeOffset` event on all elements in the container, letting them know\n * the new offset to where they should position themselves.\n /\nexport class SnackbarContainer {\n private snackbarElements: HTMLLimelSnackbarElement[] = [];\n\n /\n Add a new element to the container\n \n @param snackbar - element to add\n /\n public add(snackbar: HTMLLimelSnackbarElement) {\n const popover = this.getPopover(snackbar);\n\n // Stencil does not seem to recognise the existance of showPopover\n // @ts-ignore\n popover?.showPopover();\n\n this.snackbarElements = [snackbar, ...this.snackbarElements];\n this.emitOffsets();\n }\n\n /\n Remove an element from the container\n \n @param snackbar - element to remove\n /\n public remove(snackbar: HTMLLimelSnackbarElement): void {\n const popover = this.getPopover(snackbar);\n\n // Stencil does not seem to recognise the existance of hidePopover\n // @ts-ignore\n popover?.hidePopover();\n\n this.snackbarElements = this.snackbarElements.filter(\n (item) => item !== snackbar,\n );\n this.emitOffsets();\n }\n\n private emitOffsets() {\n let offset = 0;\n this.snackbarElements.forEach((snackbar) => {\n snackbar.dispatchEvent(\n new CustomEvent('changeOffset', {\n detail: offset,\n }),\n );\n offset += this.getPopover(snackbar).getBoundingClientRect().height;\n });\n }\n\n private getPopover(snackbar: HTMLLimelSnackbarElement) {\n return snackbar.shadowRoot.querySelector('[popover]');\n }\n}\n"," {\n box-sizing: border-box;\n}\n\naside {\n background: none;\n border: none;\n inset: unset;\n overflow: visible;\n padding: 0.5rem 0.5rem 0 0.5rem;\n right: 0;\n\n width: var(--limel-snackbar-width, 21rem);\n top: calc(\n var(--snackbar-distance-to-top-edge) + env(safe-area-inset-top, 0)\n );\n\n transition:\n opacity var(--limel-snackbar-opacity-transition-speed, 0.2s) ease,\n top var(--limel-snackbar-top-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89),\n transform var(--limel-snackbar-top-transition-speed, 0.46s) ease;\n transform: translate3d(0, 0, 0);\n opacity: 1;\n\n &.is-closing {\n transform: translate3d(2rem, 0, 0);\n opacity: 0;\n --limel-snackbar-top-transition-speed: 0.2s;\n --limel-snackbar-opacity-transition-speed: 0.2s;\n }\n}\n\n.surface {\n overflow: hidden;\n\n padding: 0.5rem;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 0.25rem;\n\n min-height: 3.25rem;\n border-radius: 0.75rem;\n\n background-color: rgb(var(--contrast-1400));\n box-shadow: var(--shadow-depth-8), var(--shadow-depth-16);\n}\n\n.label {\n color: rgb(var(--contrast-100));\n\n -webkit-font-smoothing: antialiased;\n font-size: 0.8125rem;\n font-weight: 400;\n padding: 0 0.25rem;\n\n width: 100%;\n flex-grow: 1;\n}\n\n.actions {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n box-sizing: border-box;\n gap: 0.5rem;\n}\n\n.dismiss,\n.actions {\n --lime-elevated-surface-background-color: rgb(\n var(--contrast-1300)\n ); // background color of the buttons\n}\n\n.dismiss {\n --mdc-theme-on-surface: rgb(var(--contrast-100)); // color of the X icon\n --icon-background-color: var(--lime-elevated-surface-background-color);\n --fill-color: var(--mdc-theme-primary);\n --track-color: rgb(var(--contrast-800), 0.2);\n transition:\n opacity 0.1s ease,\n transform 0.1s ease;\n position: absolute;\n top: -0.375rem;\n left: -0.375rem;\n transform: scale(0.7);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n position: absolute;\n transform: rotate(90deg);\n fill: transparent;\n stroke-dasharray: 100;\n stroke-linecap: round;\n\n aside:popover-open & {\n animation: timeout var(--snackbar-timeout) linear forwards;\n }\n }\n\n .is-closing {\n transform: scale(0.5);\n opacity: 0;\n }\n}\n\n.dismiss-button {\n transform: scale(0.8);\n margin: 0;\n padding: 0;\n}\n\n@keyframes timeout {\n 0% {\n stroke-width: 4;\n stroke-dashoffset: 0;\n opacity: 1;\n }\n 100% {\n stroke-width: 1;\n stroke-dashoffset: -100;\n opacity: 0.7;\n }\n}\n\n@import '../portal/partial-styles/portal-container.scss';\n","import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/*\n A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n \n The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n \n It means if the user misses the information, it shouldn't be a big deal.\n \n :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n \n @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n /\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /\n `true` if the snackbar is open, `false` otherwise.\n /\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /\n The text message to display.\n /\n @Prop()\n public message: string;\n\n /\n The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line no-magic-numbers\n public timeout?: number = 5000;\n\n /\n The text to display for the action button.\n /\n @Prop()\n public actionText: string;\n\n /\n When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n /\n @Prop()\n public dismissible: boolean = true;\n\n /\n Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n /\n @Prop()\n public multiline: boolean;\n\n /\n Defines the language for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private host: HTMLLimelSnackbarElement;\n\n /\n Emitted when the action button is pressed\n /\n @Event()\n private action: EventEmitter<void>;\n\n /\n Emitted when the snackbar hides itself\n /\n @Event()\n private hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /\n Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration,\n ),\n );\n }\n };\n\n private handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout \|\| 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n 'limel-portal--parent': true,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return undefined;\n }\n\n if (!this.timeout \|\| this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout \|\| this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\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\",[[1,\"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-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"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],\"readonly\":[516],\"isOpen\":[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-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"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-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4.cjs\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"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\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"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]}]]],[\"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-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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"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-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"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\"],\"required\":[516]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"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-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-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-icon_2.cjs\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"parent\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-breadcrumbs_5.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],\"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\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"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],\"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]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[1,\"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-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"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],\"readonly\":[516],\"isOpen\":[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-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"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-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-dynamic-label_4.cjs\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"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\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"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]}]]],[\"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-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-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"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-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-action-bar_4.cjs\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-prosemirror-adapter.cjs\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"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\"],\"required\":[516]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"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-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-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-icon_2.cjs\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}],[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-badge_3.cjs\",[[1,\"limel-badge\",{\"label\":[520]}],[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]}]]],[\"limel-breadcrumbs_5.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],\"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\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"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],\"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]}]]]]"), options);
   });
 };

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

@@ -50,7 +50,6 @@ export class Portal {
     this.position = 'absolute';
     this.containerId = undefined;
     this.containerStyle = {};
-    this.parent = document.body;
     this.inheritParentWidth = false;
     this.visible = false;
     this.anchor = null;
@@ -131,7 +130,7 @@ export class Portal {
     });
   }
   attachContainer() {
-    this.parent.appendChild(this.container);
+    this.getParent().appendChild(this.container);
   }
   removeContainer() {
     if (!this.container) {
@@ -270,6 +269,19 @@ export class Portal {
       extraCosmeticSpace;
     this.container.style.maxHeight = `${maxHeight}px`;
   }
+  // Returns the parent element where the content of the portal will be moved to.
+  // It needs to have styling of the portal container.
+  getParent() {
+    let element = this.anchor || this.host;
+    while (element) {
+      const parent = element.closest('.limel-portal--parent');
+      if (parent) {
+        return parent;
+      }
+      element = element.getRootNode().host;
+    }
+    return document.body;
+  }
   static get is() { return "limel-portal"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -358,26 +370,6 @@ export class Portal {
         },
         "defaultValue": "{}"
       },
-      "parent": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement",
-          "resolved": "HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The `parent` property specifies the parent element where the content\nof the portal will be moved to.\nBy default, it is set to `document.body`, meaning the content\nwill be appended as a child of the body element in the DOM.\nIf you want the content to be appended to a different element,\nyou can specify that element by setting this property.\nPlease note that the specified parent element should exist\nin the DOM at the time of rendering the portal."
-        },
-        "defaultValue": "document.body"
-      },
       "inheritParentWidth": {
         "type": "boolean",
         "mutable": false,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\nconst IS_VISIBLE_CLASS = 'is-visible';\nconst IS_HIDING_CLASS = 'is-hiding';\nconst hideAnimationDuration = 300;\n\n/*\n The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n \n When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n \n This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n \n Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n \n :::important\n * There are some caveats when using this component\n \n 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n \n @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n /\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /\n Decides which direction the portal content should open.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom';\n\n /\n Position of the content.\n /\n @Prop({ reflect: true })\n public position: 'fixed' \| 'absolute' = 'absolute';\n\n /\n A unique ID.\n /\n @Prop({ reflect: true })\n public containerId: string;\n\n /\n Dynamic styling that can be applied to the container holding the content.\n /\n @Prop()\n public containerStyle: object = {};\n\n /\n The `parent` property specifies the parent element where the content\n * of the portal will be moved to.\n * By default, it is set to `document.body`, meaning the content\n * will be appended as a child of the body element in the DOM.\n * If you want the content to be appended to a different element,\n * you can specify that element by setting this property.\n * Please note that the specified parent element should exist\n * in the DOM at the time of rendering the portal.\n /\n @Prop()\n public parent: HTMLElement = document.body;\n\n /\n Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n /\n @Prop({ reflect: true })\n public inheritParentWidth = false;\n\n /\n True if the content within the portal should be visible.\n \n If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n /\n @Prop({ reflect: true })\n public visible = false;\n\n /\n The element that the content should be positioned relative to.\n * Defaults to the limel-portal element.\n /\n @Prop()\n public anchor?: HTMLElement = null;\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n private container: HTMLElement;\n private popperInstance: Instance;\n private loaded = false;\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer && this.container) {\n this.observer.unobserve(this.container);\n }\n\n this.container = null;\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n if (this.visible) {\n this.init();\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n private init() {\n if (!this.host.isConnected) {\n return;\n }\n\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public render() {\n return <slot />;\n }\n\n @Watch('visible')\n protected onVisible() {\n if (!this.container && this.visible) {\n this.init();\n\n return;\n }\n\n if (!this.visible) {\n this.animateHideAndCleanup();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) \|\| [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.parent.appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n if (!this.container) {\n return;\n }\n\n this.container.classList.remove(IS_VISIBLE_CLASS);\n }\n\n private showContainer() {\n this.container.classList.add(IS_VISIBLE_CLASS);\n }\n\n private animateHideAndCleanup() {\n if (!this.container) {\n return;\n }\n\n this.container.classList.add(IS_HIDING_CLASS);\n this.styleContainer();\n\n setTimeout(() => {\n this.container.classList.remove(IS_HIDING_CLASS);\n if (!this.visible) {\n this.container.classList.remove(IS_VISIBLE_CLASS);\n this.destroyPopper();\n }\n }, hideAnimationDuration);\n }\n\n private styleContainer() {\n this.setContainerWidth();\n this.setContainerHeight();\n this.setContainerStyles();\n }\n\n private setContainerWidth() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n }\n\n private getContentWidth(element: HTMLElement \| Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('');\n\n return this.getContentWidth(elementContent);\n }\n\n private setContainerStyles() {\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(\n this.anchor \|\| this.host,\n this.container,\n config,\n );\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private setContainerHeight() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight \|\| 0,\n window.innerHeight \|\| 0,\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n}\n"]}
1	+ {"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\nconst IS_VISIBLE_CLASS = 'is-visible';\nconst IS_HIDING_CLASS = 'is-hiding';\nconst hideAnimationDuration = 300;\n\n/*\n The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n \n When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n \n This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n \n Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n \n :::important\n * There are some caveats when using this component\n \n 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n \n @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n /\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /\n Decides which direction the portal content should open.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom';\n\n /\n Position of the content.\n /\n @Prop({ reflect: true })\n public position: 'fixed' \| 'absolute' = 'absolute';\n\n /\n A unique ID.\n /\n @Prop({ reflect: true })\n public containerId: string;\n\n /\n Dynamic styling that can be applied to the container holding the content.\n /\n @Prop()\n public containerStyle: object = {};\n\n /\n Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n /\n @Prop({ reflect: true })\n public inheritParentWidth = false;\n\n /\n True if the content within the portal should be visible.\n \n If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n /\n @Prop({ reflect: true })\n public visible = false;\n\n /\n The element that the content should be positioned relative to.\n * Defaults to the limel-portal element.\n /\n @Prop()\n public anchor?: HTMLElement = null;\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n private container: HTMLElement;\n private popperInstance: Instance;\n private loaded = false;\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer && this.container) {\n this.observer.unobserve(this.container);\n }\n\n this.container = null;\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n if (this.visible) {\n this.init();\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n private init() {\n if (!this.host.isConnected) {\n return;\n }\n\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public render() {\n return <slot />;\n }\n\n @Watch('visible')\n protected onVisible() {\n if (!this.container && this.visible) {\n this.init();\n\n return;\n }\n\n if (!this.visible) {\n this.animateHideAndCleanup();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) \|\| [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.getParent().appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n if (!this.container) {\n return;\n }\n\n this.container.classList.remove(IS_VISIBLE_CLASS);\n }\n\n private showContainer() {\n this.container.classList.add(IS_VISIBLE_CLASS);\n }\n\n private animateHideAndCleanup() {\n if (!this.container) {\n return;\n }\n\n this.container.classList.add(IS_HIDING_CLASS);\n this.styleContainer();\n\n setTimeout(() => {\n this.container.classList.remove(IS_HIDING_CLASS);\n if (!this.visible) {\n this.container.classList.remove(IS_VISIBLE_CLASS);\n this.destroyPopper();\n }\n }, hideAnimationDuration);\n }\n\n private styleContainer() {\n this.setContainerWidth();\n this.setContainerHeight();\n this.setContainerStyles();\n }\n\n private setContainerWidth() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n }\n\n private getContentWidth(element: HTMLElement \| Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('');\n\n return this.getContentWidth(elementContent);\n }\n\n private setContainerStyles() {\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(\n this.anchor \|\| this.host,\n this.container,\n config,\n );\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private setContainerHeight() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight \|\| 0,\n window.innerHeight \|\| 0,\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n\n // Returns the parent element where the content of the portal will be moved to.\n // It needs to have styling of the portal container.\n private getParent() {\n let element: Element \| undefined = this.anchor \|\| this.host;\n\n while (element) {\n const parent = element.closest('.limel-portal--parent');\n if (parent) {\n return parent;\n }\n\n element = (element.getRootNode() as ShadowRoot).host;\n }\n\n return document.body;\n }\n}\n"]}

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

@@ -106,4 +106,79 @@ aside:popover-open .dismiss svg {
     stroke-dashoffset: -100;
     opacity: 0.7;
   }
+}
+.limel-portal--container {
+  font-family: var(--limel-portal-font-family, inherit);
+  opacity: 0;
+  display: none;
+}
+.limel-portal--container.is-visible {
+  opacity: 1;
+  display: inline-block;
+}
+.limel-portal--container.is-visible > * {
+  will-change: opacity, transform;
+}
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translate3d(0, 0, 0);
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.94) translate3d(0, 0, 0);
+  }
+}
+.limel-portal--container > * {
+  animation: fade-in 0.18s cubic-bezier(0.11, 0.59, 0.18, 1.26) forwards;
+}
+.limel-portal--container.is-hiding > * {
+  animation: fade-out 0.22s ease forwards;
+}
+.limel-portal--container[data-popper-placement=left-start] > * {
+  transform-origin: right top;
+}
+.limel-portal--container[data-popper-placement=left] > * {
+  transform-origin: right center;
+}
+.limel-portal--container[data-popper-placement=left-end] > * {
+  transform-origin: right bottom;
+}
+.limel-portal--container[data-popper-placement=top-start] > * {
+  transform-origin: left bottom;
+}
+.limel-portal--container[data-popper-placement=top] > * {
+  transform-origin: center bottom;
+}
+.limel-portal--container[data-popper-placement=top-end] > * {
+  transform-origin: right bottom;
+}
+.limel-portal--container[data-popper-placement=right-start] > * {
+  transform-origin: left top;
+}
+.limel-portal--container[data-popper-placement=right] > * {
+  transform-origin: left center;
+}
+.limel-portal--container[data-popper-placement=right-end] > * {
+  transform-origin: left bottom;
+}
+.limel-portal--container[data-popper-placement=bottom-start] > * {
+  transform-origin: left top;
+}
+.limel-portal--container[data-popper-placement=bottom] > * {
+  transform-origin: center top;
+}
+.limel-portal--container[data-popper-placement=bottom-end] > * {
+  transform-origin: right top;
 }

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

@@ -113,6 +113,7 @@ export class Snackbar {
       }, class: {
         open: this.open,
         'is-closing': this.closing,
+        'limel-portal--parent': true,
       }, id: this.snackbarId, role: this.setAriaRoles(), "aria-relevant": this.open ? 'additions' : undefined }, h("div", { class: "surface", "aria-atomic": "false" }, h("div", { class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
   }
   setAriaRoles() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/*\n A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n \n The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n \n It means if the user misses the information, it shouldn't be a big deal.\n \n :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n \n @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n /\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /\n `true` if the snackbar is open, `false` otherwise.\n /\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /\n The text message to display.\n /\n @Prop()\n public message: string;\n\n /\n The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line no-magic-numbers\n public timeout?: number = 5000;\n\n /\n The text to display for the action button.\n /\n @Prop()\n public actionText: string;\n\n /\n When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n /\n @Prop()\n public dismissible: boolean = true;\n\n /\n Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n /\n @Prop()\n public multiline: boolean;\n\n /\n Defines the language for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private host: HTMLLimelSnackbarElement;\n\n /\n Emitted when the action button is pressed\n /\n @Event()\n private action: EventEmitter<void>;\n\n /\n Emitted when the snackbar hides itself\n /\n @Event()\n private hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /\n Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration,\n ),\n );\n }\n };\n\n private handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout \|\| 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return undefined;\n }\n\n if (!this.timeout \|\| this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout \|\| this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/components/snackbar/snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Languages } from '../date-picker/date.types';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport translate from '../../global/translations';\nimport { SnackbarContainer } from './container';\nimport { createRandomString } from 'src/util/random-string';\n\nconst container = new SnackbarContainer();\nconst hideAnimationDuration = 300;\n\n/*\n A Snackbar –also known as \"Toast\"– is used to inform the end user\n * about an action or a process in the system.\n * The information could vary from announcing that a process has just started,\n * is taking place now, has ended, or has been interrupted or canceled.\n \n The information that you provide using a snackbar should be:\n * - temporary\n * - contextual\n * - short\n * - and most importantly, ignorable.\n \n It means if the user misses the information, it shouldn't be a big deal.\n \n :::note\n * If the information you want to display has a higher importance or priority,\n * and you need to make sure that the user takes an action to dismiss it,\n * consider using the [Banner](/#/component/limel-banner/) component instead.\n * For more complex interactions and for delivering more detailed information,\n * [Dialog](/#/component/limel-dialog/) is a better choice.\n * :::\n \n @exampleComponent limel-example-snackbar\n * @exampleComponent limel-example-snackbar-with-action\n * @exampleComponent limel-example-snackbar-with-changing-messages\n * @exampleComponent limel-example-snackbar-dismissible\n * @exampleComponent limel-example-snackbar-persistent\n * @exampleComponent limel-example-snackbar-persistent-non-dismissible\n /\n@Component({\n tag: 'limel-snackbar',\n shadow: true,\n styleUrl: 'snackbar.scss',\n})\nexport class Snackbar {\n /\n `true` if the snackbar is open, `false` otherwise.\n /\n @Prop({ reflect: true })\n public open: boolean = false;\n\n /\n The text message to display.\n /\n @Prop()\n public message: string;\n\n /\n The amount of time in milliseconds to show the snackbar.\n * If set to `-1`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close it manually,\n * which requires the `dismissible` property to be set to `true`.\n * - or the snackbar needs to be closed programmatically.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line no-magic-numbers\n public timeout?: number = 5000;\n\n /\n The text to display for the action button.\n /\n @Prop()\n public actionText: string;\n\n /\n When `true` displays a dismiss button on the snackbar,\n * allowing users to close it.\n /\n @Prop()\n public dismissible: boolean = true;\n\n /\n Whether to show the snackbar with space for multiple lines of text\n * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.\n /\n @Prop()\n public multiline: boolean;\n\n /\n Defines the language for translations.\n /\n @Prop()\n public language: Languages = 'en';\n\n @Element()\n private host: HTMLLimelSnackbarElement;\n\n /\n Emitted when the action button is pressed\n /\n @Event()\n private action: EventEmitter<void>;\n\n /\n Emitted when the snackbar hides itself\n /\n @Event()\n private hide: EventEmitter<void>;\n\n @State()\n private offset: number = 0;\n\n @State()\n private isOpen: boolean = false;\n\n @State()\n private closing: boolean = true;\n\n private snackbarId: string;\n private timeoutId?: number;\n\n public constructor() {\n this.snackbarId = createRandomString();\n }\n\n public componentDidLoad() {\n if (this.open) {\n requestAnimationFrame(this.handleOpen);\n }\n }\n\n @Listen('changeOffset')\n protected onChangeIndex(event: CustomEvent<number>) {\n event.stopPropagation();\n this.offset = event.detail;\n }\n\n @Watch('open')\n protected watchOpen() {\n if (this.open) {\n this.handleOpen();\n } else {\n this.handleClose();\n }\n\n this.isOpen = this.open;\n }\n\n /\n Show the snackbar\n * @deprecated Use the `open` property instead.\n */\n @Method()\n public async show() {\n // eslint-disable-next-line no-console\n console.warn(\n 'The `show` method in `limel-snackbar` is deprecated. Please use the `open` property instead.',\n );\n if (!this.open) {\n this.handleOpen();\n }\n }\n\n public handleOpen = () => {\n if (this.isOpen) {\n return;\n }\n\n this.isOpen = true;\n this.closing = false;\n container.add(this.host);\n\n if (this.timeout && this.timeout !== -1) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(\n this.timeout - hideAnimationDuration,\n hideAnimationDuration,\n ),\n );\n }\n };\n\n private handleClose = () => {\n if (!this.isOpen) {\n return;\n }\n\n this.closing = true;\n\n if (this.timeoutId) {\n clearTimeout(this.timeoutId);\n this.timeoutId = undefined;\n }\n\n setTimeout(() => {\n this.isOpen = false;\n container.remove(this.host);\n this.hide.emit();\n this.offset = 0;\n }, hideAnimationDuration);\n };\n\n public render() {\n return (\n <aside\n popover=\"manual\"\n style={{\n '--snackbar-timeout': `${Math.max(this.timeout \|\| 0, 0)}ms`,\n '--snackbar-distance-to-top-edge': `${this.offset}px`,\n }}\n class={{\n open: this.open,\n 'is-closing': this.closing,\n 'limel-portal--parent': true,\n }}\n id={this.snackbarId}\n role={this.setAriaRoles()}\n aria-relevant={this.open ? 'additions' : undefined}\n >\n <div class=\"surface\" aria-atomic=\"false\">\n <div class=\"label\">{this.message}</div>\n {this.renderActions(this.actionText)}\n {this.renderDismissButton(this.dismissible)}\n </div>\n </aside>\n );\n }\n\n private setAriaRoles() {\n if (!this.open) {\n return undefined;\n }\n\n if (!this.timeout \|\| this.timeout === -1) {\n return 'alertdialog';\n }\n\n return 'status';\n }\n\n private handleClickAction = () => {\n this.action.emit();\n };\n\n private renderActions(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <div class=\"actions\" aria-atomic=\"true\">\n {this.renderActionButton(actionText)}\n </div>\n );\n }\n\n private renderActionButton(actionText: string) {\n if (!actionText) {\n return;\n }\n\n return (\n <limel-button label={actionText} onClick={this.handleClickAction} />\n );\n }\n\n private renderDismissButton(dismissible: boolean) {\n if (!dismissible) {\n return;\n }\n\n const label = translate.get('snackbar.dismiss', this.language);\n\n return (\n <div class=\"dismiss\">\n {this.renderTimeoutVisualization()}\n <limel-icon-button\n class=\"dismiss-button\"\n icon=\"multiply\"\n label={label}\n onClick={this.handleClose}\n aria-controls={this.snackbarId}\n />\n </div>\n );\n }\n\n private renderTimeoutVisualization() {\n if (!this.timeout \|\| this.timeout === -1) {\n return;\n }\n\n return (\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 36 36\">\n <circle r=\"18\" cx=\"18\" cy=\"18\" fill=\"var(--track-color)\" />\n <path\n class=\"track\"\n d=\"M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0\"\n stroke=\"var(--fill-color)\"\n />\n </svg>\n );\n }\n}\n"]}

package/dist/collection/components/text-editor/utils/markdown-converter.js CHANGED Viewed

@@ -8,7 +8,9 @@ const createMarkdownSerializerFunction = (config) => {
         .join('') +
       '>';
     const tagClose = `</${config.tagName}>`;
-    state.write(`${tagOpen}${tagClose}`);
+    state.write(tagOpen);
+    state.renderContent(node);
+    state.write(tagClose);
   };
 };
 const buildMarkdownSerializer = (plugins) => {

package/dist/collection/components/text-editor/utils/markdown-converter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"markdown-converter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/markdown-converter.ts"],"names":[],"mappings":"AAGA,OAAO,EACH,kBAAkB,EAElB,yBAAyB,GAC5B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAQhE,MAAM,gCAAgC,GAAG,CACrC,MAA+B,EACL,EAAE;EAC5B,OAAO,CAAC,KAA8B,EAAE,IAAqB,EAAE,EAAE;IAC7D,MAAM,OAAO,GACT,IAAI,MAAM,CAAC,OAAO,EAAE;MACpB,MAAM,CAAC,UAAU;SACZ,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;SAC/C,IAAI,CAAC,EAAE,CAAC;MACb,GAAG,CAAC;IACR,MAAM,QAAQ,GAAG,KAAK,MAAM,CAAC,OAAO,GAAG,CAAC;IAExC,KAAK,CAAC,KAAK,CAAC,~~GAAG,~~OAAO,~~GAAG~~,~~QAAQ~~,~~EAAE~~,CAAC,CAAC;~~EACzC~~,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAC5B,OAAkC,EAChB,EAAE;EACpB,MAAM,WAAW,GAAG,EAAE,CAAC;EAEvB,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;IACvB,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC,MAAM,CAAC,CAAC;EAC3E,CAAC,CAAC,CAAC;EAEH,MAAM,KAAK,mCACJ,yBAAyB,CAAC,KAAK,GAC/B,WAAW,CACjB,CAAC;EAEF,MAAM,KAAK,mCACJ,yBAAyB,CAAC,KAAK,KAClC,aAAa,EAAE;MACX,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,IAAI;MACb,wBAAwB,EAAE,IAAI;KACjC,GACJ,CAAC;EAEF,OAAO,IAAI,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,iBAAiB;EAI1B,YAAY,OAAkC;IAIvC,gBAAW,GAAG,CAAC,IAAY,EAAmB,EAAE;MACnD,MAAM,SAAS,GAA8B,IAAI,CAAC,WAAW,CAAC,GAAG,CAC7D,CAAC,UAAmC,EAAE,EAAE,CAAC,CAAC;QACtC,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,UAAU,EAAE,UAAU,CAAC,UAAU;OACpC,CAAC,CACL,CAAC;MAEF,OAAO,cAAc,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEK,cAAS,GAAG,CAAC,IAAgB,EAAU,EAAE;MAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAC7B,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;OAC5D;IACL,CAAC,CAAC;IApBE,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;IAC3D,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;EAC/B,CAAC;CAmBJ","sourcesContent":["import { ContentTypeConverter } from './content-type-converter';\nimport { EditorView } from 'prosemirror-view';\nimport { Node as ProseMirrorNode } from 'prosemirror-model';\nimport {\n MarkdownSerializer,\n MarkdownSerializerState,\n defaultMarkdownSerializer,\n} from 'prosemirror-markdown';\nimport { markdownToHTML } from '../../markdown/markdown-parser';\nimport { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';\n\ntype MarkdownSerializerFunction = (\n state: MarkdownSerializerState,\n node: ProseMirrorNode,\n) => void;\n\nconst createMarkdownSerializerFunction = (\n config: CustomElementDefinition,\n): MarkdownSerializerFunction => {\n return (state: MarkdownSerializerState, node: ProseMirrorNode) => {\n const tagOpen =\n `<${config.tagName}` +\n config.attributes\n .map((attr) => ` ${attr}=\"${node.attrs[attr]}\"`)\n .join('') +\n '>';\n const tagClose = `</${config.tagName}>`;\n\n state.write(~~`${~~tagOpen~~}${~~tagClose}`);\n };\n};\n\nconst buildMarkdownSerializer = (\n plugins: CustomElementDefinition[],\n): MarkdownSerializer => {\n const customNodes = {};\n\n plugins.forEach((plugin) => {\n customNodes[plugin.tagName] = createMarkdownSerializerFunction(plugin);\n });\n\n const nodes = {\n ...defaultMarkdownSerializer.nodes,\n ...customNodes,\n };\n\n const marks = {\n ...defaultMarkdownSerializer.marks,\n strikethrough: {\n open: '~~',\n close: '~~',\n mixable: true,\n expelEnclosingWhitespace: true,\n },\n };\n\n return new MarkdownSerializer(nodes, marks);\n};\n\n/*\n @private\n */\nexport class MarkdownConverter implements ContentTypeConverter {\n private markdownSerializer: MarkdownSerializer;\n private customNodes: CustomElementDefinition[];\n\n constructor(plugins: CustomElementDefinition[]) {\n this.markdownSerializer = buildMarkdownSerializer(plugins);\n this.customNodes = plugins;\n }\n public parseAsHTML = (text: string): Promise<string> => {\n const whitelist: CustomElementDefinition[] = this.customNodes.map(\n (nodeConfig: CustomElementDefinition) => ({\n tagName: nodeConfig.tagName,\n attributes: nodeConfig.attributes,\n }),\n );\n\n return markdownToHTML(text, { whitelist: whitelist });\n };\n\n public serialize = (view: EditorView): string => {\n if (view.dom.textContent === '') {\n return '';\n } else {\n return this.markdownSerializer.serialize(view.state.doc);\n }\n };\n}\n"]}
1	+ {"version":3,"file":"markdown-converter.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/markdown-converter.ts"],"names":[],"mappings":"AAGA,OAAO,EACH,kBAAkB,EAElB,yBAAyB,GAC5B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAQhE,MAAM,gCAAgC,GAAG,CACrC,MAA+B,EACL,EAAE;EAC5B,OAAO,CAAC,KAA8B,EAAE,IAAqB,EAAE,EAAE;IAC7D,MAAM,OAAO,GACT,IAAI,MAAM,CAAC,OAAO,EAAE;MACpB,MAAM,CAAC,UAAU;SACZ,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;SAC/C,IAAI,CAAC,EAAE,CAAC;MACb,GAAG,CAAC;IACR,MAAM,QAAQ,GAAG,KAAK,MAAM,CAAC,OAAO,GAAG,CAAC;IAExC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACrB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC1B,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;EAC1B,CAAC,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAC5B,OAAkC,EAChB,EAAE;EACpB,MAAM,WAAW,GAAG,EAAE,CAAC;EAEvB,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;IACvB,WAAW,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,gCAAgC,CAAC,MAAM,CAAC,CAAC;EAC3E,CAAC,CAAC,CAAC;EAEH,MAAM,KAAK,mCACJ,yBAAyB,CAAC,KAAK,GAC/B,WAAW,CACjB,CAAC;EAEF,MAAM,KAAK,mCACJ,yBAAyB,CAAC,KAAK,KAClC,aAAa,EAAE;MACX,IAAI,EAAE,IAAI;MACV,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,IAAI;MACb,wBAAwB,EAAE,IAAI;KACjC,GACJ,CAAC;EAEF,OAAO,IAAI,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAChD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,iBAAiB;EAI1B,YAAY,OAAkC;IAIvC,gBAAW,GAAG,CAAC,IAAY,EAAmB,EAAE;MACnD,MAAM,SAAS,GAA8B,IAAI,CAAC,WAAW,CAAC,GAAG,CAC7D,CAAC,UAAmC,EAAE,EAAE,CAAC,CAAC;QACtC,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,UAAU,EAAE,UAAU,CAAC,UAAU;OACpC,CAAC,CACL,CAAC;MAEF,OAAO,cAAc,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEK,cAAS,GAAG,CAAC,IAAgB,EAAU,EAAE;MAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,WAAW,KAAK,EAAE,EAAE;QAC7B,OAAO,EAAE,CAAC;OACb;WAAM;QACH,OAAO,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;OAC5D;IACL,CAAC,CAAC;IApBE,IAAI,CAAC,kBAAkB,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;IAC3D,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;EAC/B,CAAC;CAmBJ","sourcesContent":["import { ContentTypeConverter } from './content-type-converter';\nimport { EditorView } from 'prosemirror-view';\nimport { Node as ProseMirrorNode } from 'prosemirror-model';\nimport {\n MarkdownSerializer,\n MarkdownSerializerState,\n defaultMarkdownSerializer,\n} from 'prosemirror-markdown';\nimport { markdownToHTML } from '../../markdown/markdown-parser';\nimport { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';\n\ntype MarkdownSerializerFunction = (\n state: MarkdownSerializerState,\n node: ProseMirrorNode,\n) => void;\n\nconst createMarkdownSerializerFunction = (\n config: CustomElementDefinition,\n): MarkdownSerializerFunction => {\n return (state: MarkdownSerializerState, node: ProseMirrorNode) => {\n const tagOpen =\n `<${config.tagName}` +\n config.attributes\n .map((attr) => ` ${attr}=\"${node.attrs[attr]}\"`)\n .join('') +\n '>';\n const tagClose = `</${config.tagName}>`;\n\n state.write(tagOpen);\n state.renderContent(node);\n state.write(tagClose);\n };\n};\n\nconst buildMarkdownSerializer = (\n plugins: CustomElementDefinition[],\n): MarkdownSerializer => {\n const customNodes = {};\n\n plugins.forEach((plugin) => {\n customNodes[plugin.tagName] = createMarkdownSerializerFunction(plugin);\n });\n\n const nodes = {\n ...defaultMarkdownSerializer.nodes,\n ...customNodes,\n };\n\n const marks = {\n ...defaultMarkdownSerializer.marks,\n strikethrough: {\n open: '~~',\n close: '~~',\n mixable: true,\n expelEnclosingWhitespace: true,\n },\n };\n\n return new MarkdownSerializer(nodes, marks);\n};\n\n/*\n @private\n */\nexport class MarkdownConverter implements ContentTypeConverter {\n private markdownSerializer: MarkdownSerializer;\n private customNodes: CustomElementDefinition[];\n\n constructor(plugins: CustomElementDefinition[]) {\n this.markdownSerializer = buildMarkdownSerializer(plugins);\n this.customNodes = plugins;\n }\n public parseAsHTML = (text: string): Promise<string> => {\n const whitelist: CustomElementDefinition[] = this.customNodes.map(\n (nodeConfig: CustomElementDefinition) => ({\n tagName: nodeConfig.tagName,\n attributes: nodeConfig.attributes,\n }),\n );\n\n return markdownToHTML(text, { whitelist: whitelist });\n };\n\n public serialize = (view: EditorView): string => {\n if (view.dom.textContent === '') {\n return '';\n } else {\n return this.markdownSerializer.serialize(view.state.doc);\n }\n };\n}\n"]}

package/dist/collection/components/text-editor/utils/plugin-factory.js CHANGED Viewed

@@ -1,28 +1,24 @@
 export const createNodeSpec = (config) => {
-  const attributes = config.attributes.reduce((acc, attr) => {
-    acc[attr] = {};
-    return acc;
-  }, {});
+  const attributeSpecs = {};
+  config.attributes.forEach((attribute) => (attributeSpecs[attribute] = {}));
+  const tag = `${config.tagName}[${config.attributes.map((attr) => attr).join('][')}]`;
   return {
     group: 'inline',
+    content: '(text* | inline*)',
     inline: true,
-    atom: false,
+    atom: true,
     selectable: true,
-    attrs: attributes,
-    toDOM: (node) => [
-      config.tagName,
-      config.attributes.reduce((acc, attr) => {
-        acc[attr] = node.attrs[attr];
-        return acc;
-      }, {}),
-    ],
+    attrs: attributeSpecs,
+    toDOM: (node) => [config.tagName, node.attrs],
     parseDOM: [
       {
-        tag: `${config.tagName}[${config.attributes.map((attr) => attr).join('][')}]`,
-        getAttrs: (dom) => config.attributes.reduce((acc, attr) => {
-          acc[attr] = dom.getAttribute(attr);
-          return acc;
-        }, {}),
+        tag: tag,
+        getAttrs: (dom) => {
+          const attributes = {};
+          config.attributes.forEach((attribute) => (attributes[attribute] =
+            dom.getAttribute(attribute)));
+          return attributes;
+        },
       },
     ],
   };