npm - @limetech/lime-elements - Versions diffs - 37.65.3 → 37.65.5 - Mend

@limetech/lime-elements 37.65.3 → 37.65.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

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

@@ -72,8 +72,8 @@ const Snackbar = class {
       this.isOpen = true;
       this.closing = false;
       container.add(this.host);
-      if (this.timeout) {
-        this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, 0));
+      if (this.timeout && this.timeout !== -1) {
+        this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, hideAnimationDuration));
       }
     };
     this.handleClose = () => {
@@ -138,7 +138,7 @@ const Snackbar = class {
   }
   render() {
     return (index.h("aside", { popover: "manual", style: {
-        '--snackbar-timeout': `${this.timeout}ms`,
+        '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
         '--snackbar-distance-to-top-edge': `${this.offset}px`,
       }, class: {
         open: this.open,
@@ -149,7 +149,7 @@ const Snackbar = class {
     if (!this.open) {
       return undefined;
     }
-    if (!this.timeout) {
+    if (!this.timeout || this.timeout === -1) {
       return 'alertdialog';
     }
     return 'status';
@@ -174,7 +174,7 @@ const Snackbar = class {
     return (index.h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), index.h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.handleClose, "aria-controls": this.snackbarId })));
   }
   renderTimeoutVisualization() {
-    if (!this.timeout) {
+    if (!this.timeout || this.timeout === -1) {
       return;
     }
     return (index.h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, index.h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), index.h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));

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 `null`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close is 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) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(this.timeout - hideAnimationDuration, 0),\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': `${this.timeout}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) {\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) {\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":"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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}

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

@@ -42,8 +42,8 @@ export class Snackbar {
       this.isOpen = true;
       this.closing = false;
       container.add(this.host);
-      if (this.timeout) {
-        this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, 0));
+      if (this.timeout && this.timeout !== -1) {
+        this.timeoutId = window.setTimeout(this.handleClose, Math.max(this.timeout - hideAnimationDuration, hideAnimationDuration));
       }
     };
     this.handleClose = () => {
@@ -108,7 +108,7 @@ export class Snackbar {
   }
   render() {
     return (h("aside", { popover: "manual", style: {
-        '--snackbar-timeout': `${this.timeout}ms`,
+        '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
         '--snackbar-distance-to-top-edge': `${this.offset}px`,
       }, class: {
         open: this.open,
@@ -119,7 +119,7 @@ export class Snackbar {
     if (!this.open) {
       return undefined;
     }
-    if (!this.timeout) {
+    if (!this.timeout || this.timeout === -1) {
       return 'alertdialog';
     }
     return 'status';
@@ -144,7 +144,7 @@ export class Snackbar {
     return (h("div", { class: "dismiss" }, this.renderTimeoutVisualization(), h("limel-icon-button", { class: "dismiss-button", icon: "multiply", label: label, onClick: this.handleClose, "aria-controls": this.snackbarId })));
   }
   renderTimeoutVisualization() {
-    if (!this.timeout) {
+    if (!this.timeout || this.timeout === -1) {
       return;
     }
     return (h("svg", { width: "36", height: "36", viewBox: "0 0 36 36" }, h("circle", { r: "18", cx: "18", cy: "18", fill: "var(--track-color)" }), h("path", { class: "track", d: "M 18,18 m -16,0 a 16,16 0 1,0 32,0 a 16,16 0 1,0 -32,0", stroke: "var(--fill-color)" })));
@@ -210,7 +210,7 @@ export class Snackbar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The amount of time in milliseconds to show the snackbar.\nIf set to `null`, the snackbar will be persistent.\nThis means:\n- either the end user will need to close is manually,\nwhich requires the `dismissible` property to be set to `true`.\n- or the snackbar needs to be closed programmatically."
+          "text": "The amount of time in milliseconds to show the snackbar.\nIf set to `-1`, the snackbar will be persistent.\nThis means:\n- either the end user will need to close it manually,\nwhich requires the `dismissible` property to be set to `true`.\n- or the snackbar needs to be closed programmatically."
         },
         "attribute": "timeout",
         "reflect": true,

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 `null`, the snackbar will be persistent.\n * This means:\n * - either the end user will need to close is 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) {\n this.timeoutId = window.setTimeout(\n this.handleClose,\n Math.max(this.timeout - hideAnimationDuration, 0),\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': `${this.timeout}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) {\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) {\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 }}\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;
+        },
       },
     ],
   };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"plugin-factory.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/plugin-factory.ts"],"names":[],"mappings":"~~AAKA~~,MAAM,CAAC,MAAM,cAAc,GAAoB,CAC3C,MAA+B,EACvB,EAAE;EACV,MAAM,~~UAAU~~,~~GAAG~~,MAAM,CAAC,UAAU,CAAC,~~MAAM~~,CAAC,CAAC,~~GAAG~~,EAAE,~~IAAI,~~EAAE,~~EAAE;IACtD~~,~~GAAG~~,CAAC,~~IAAI~~,CAAC,GAAG,EAAE,CAAC;~~IAEf~~,OAAO,GAAG,CAAC~~;EACf~~,CAAC,EAAE,EAAE,CAAC,CAAC;~~EAEP~~,OAAO;IACH,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,~~KAAK~~;~~IACX~~,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,~~UAAU~~;~~IAEjB~~,KAAK,EAAE,CAAC,IAAI,~~EAAE~~,EAAE,CAAC~~;MACb~~,~~MAAM,~~CAAC,~~OAAO;MACd,~~MAAM,CAAC,~~UAAU~~,~~CAAC,MAAM,CAAC,CAAC,GAAG,~~EAAE,IAAI,~~EAAE,EAAE;QACnC,GAAG,~~CAAC,~~IAAI,CAAC,GAAG,IAAI,CAAC,~~KAAK,CAAC~~,IAAI,CAAC,CAAC~~;~~QAE7B~~,~~OAAO,GAAG,CAAC;MACf,CAAC,EAAE,EAAE,CAAC;KACT;IACD,~~QAAQ,EAAE;MACN;QACI,GAAG,EAAE,GAAG,~~MAAM~~,CAAC,~~OAAO~~,~~IAAI~~,MAAM,~~CAAC,~~UAAU,~~CAAC~~,~~GAAG,CAAC,CAAC,IAAI,~~EAAE,~~EAAE,~~CAAC,~~IAAI~~,CAAC,~~CAAC~~,~~IAAI,~~CAAC,~~IAAI~~,~~CAAC~~,~~GAAG;QAC7E,QAAQ,EAAE,~~CAAC,~~GAAY~~,EAAE,EAAE,~~CACvB~~,~~MAAM,~~CAAC,UAAU,CAAC,~~MAAM~~,CAAC~~,CAAC,GAAG,EAAE,IAAI,EAAE,EAAE~~;~~UACnC~~,GAAG,CAAC,~~IAAI~~,CAAC,~~GAAG~~,~~GAAG,~~CAAC,~~YAAY,~~CAAC,~~IAAI~~,CAAC~~,CAAC~~;~~UAEnC~~,OAAO,~~GAAG~~,CAAC;~~QACf~~,CAAC~~,EAAE,EAAE,CAAC~~;~~OACb~~;KACJ;GACJ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { NodeSpec } from 'prosemirror-model';\nimport { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';\n\ntype NodeSpecFactory = (config: CustomElementDefinition) => NodeSpec;\n\nexport const createNodeSpec: NodeSpecFactory = (\n config: CustomElementDefinition,\n): NodeSpec => {\n const ~~attributes~~ = config.attributes.~~reduce~~((~~acc, attr~~) => ~~{\n acc~~[~~attr~~] = {};\n\n ~~return acc;\n~~ }, {});\n\n return {\n group: 'inline',\n inline: true,\n atom: ~~false~~,\n selectable: true,\n attrs: ~~attributes~~,\n\n toDOM: (node) => [\n config.tagName~~,\n config.attributes.reduce((acc~~, ~~attr) => {\n acc[attr] =~~ node.attrs~~[attr~~]~~;\n\n return acc;\n }, {})~~,\n ~~],\n~~ parseDOM: [\n {\n tag: ~~`${config.tagName}[${config.attributes.map((attr) => attr).join('][')}]`,\~~n getAttrs: (dom: Element) ~~=>\~~n config.attributes.~~reduce~~((~~acc,~~ ~~attr~~) ~~=> {\~~n ~~acc~~[~~attr~~] = dom.getAttribute(~~attr~~);\n\n return ~~acc~~;\n }~~, {})~~,\n },\n ],\n };\n};\n"]}
1	+ {"version":3,"file":"plugin-factory.js","sourceRoot":"","sources":["../../../../src/components/text-editor/utils/plugin-factory.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAC,MAAM,cAAc,GAAoB,CAC3C,MAA+B,EACvB,EAAE;EACV,MAAM,cAAc,GAAmB,EAAE,CAAC;EAC1C,MAAM,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;EAE3E,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;EAErF,OAAO;IACH,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,mBAAmB;IAC5B,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,IAAI;IACV,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,cAAc;IAErB,KAAK,EAAE,CAAC,IAAI,EAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC;IAC5D,QAAQ,EAAE;MACN;QACI,GAAG,EAAE,GAAG;QACR,QAAQ,EAAE,CAAC,GAAY,EAAS,EAAE;UAC9B,MAAM,UAAU,GAAiB,EAAE,CAAC;UACpC,MAAM,CAAC,UAAU,CAAC,OAAO,CACrB,CAAC,SAAiB,EAAE,EAAE,CAClB,CAAC,UAAU,CAAC,SAAS,CAAC;YAClB,GAAG,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CACvC,CAAC;UAEF,OAAO,UAAmB,CAAC;QAC/B,CAAC;OACJ;KACJ;GACJ,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {\n AttributeSpec,\n Attrs,\n DOMOutputSpec,\n NodeSpec,\n} from 'prosemirror-model';\nimport { CustomElementDefinition } from '../../../global/shared-types/custom-element.types';\n\ntype NodeSpecFactory = (config: CustomElementDefinition) => NodeSpec;\ntype AttributeSpecs = {\n [name: string]: AttributeSpec;\n};\ntype MutableAttrs = {\n [attr: string]: any;\n};\n\nexport const createNodeSpec: NodeSpecFactory = (\n config: CustomElementDefinition,\n): NodeSpec => {\n const attributeSpecs: AttributeSpecs = {};\n config.attributes.forEach((attribute) => (attributeSpecs[attribute] = {}));\n\n const tag = `${config.tagName}[${config.attributes.map((attr) => attr).join('][')}]`;\n\n return {\n group: 'inline',\n content: '(text* \| inline*)',\n inline: true,\n atom: true,\n selectable: true,\n attrs: attributeSpecs,\n\n toDOM: (node): DOMOutputSpec => [config.tagName, node.attrs],\n parseDOM: [\n {\n tag: tag,\n getAttrs: (dom: Element): Attrs => {\n const attributes: MutableAttrs = {};\n config.attributes.forEach(\n (attribute: string) =>\n (attributes[attribute] =\n dom.getAttribute(attribute)),\n );\n\n return attributes as Attrs;\n },\n },\n ],\n };\n};\n"]}

package/dist/esm/limel-prosemirror-adapter.entry.js CHANGED Viewed

@@ -25670,7 +25670,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) => {
@@ -26099,30 +26101,26 @@ const createActionBarInteractionPlugin = (menuCommandFactory) => {
 };
 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;
+        },
       },
     ],
   };