npm - @limetech/lime-elements - Versions diffs - 38.7.0 → 38.7.1 - Mend

@limetech/lime-elements 38.7.0 → 38.7.1

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,11 @@
+## [38.7.1](https://github.com/Lundalogik/lime-elements/compare/v38.7.0...v38.7.1) (2025-04-01)
+### Bug Fixes
+* **action-bar:** show expand button only when more than one action exists ([0aace07](https://github.com/Lundalogik/lime-elements/commit/0aace07b6a20f4bded4f8e8837a2c2c386139456))
 ## [38.7.0](https://github.com/Lundalogik/lime-elements/compare/v38.6.0...v38.7.0) (2025-03-31)

package/dist/cjs/limel-action-bar_2.cjs.entry.js CHANGED Viewed

@@ -97,7 +97,7 @@ const ActionBar = class {
       }, role: "grid" }, index.h("div", { class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
   }
   renderCollapseExpandButton() {
-    if (!this.collapsible) {
+    if (!this.collapsible || this.actions.length <= 1) {
       return;
     }
     return (index.h("button", { class: {

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

	@@ -1 +1 @@
1	- {"file":"limel-action-bar.limel-text-editor-link-menu.entry.cjs.js","mappings":"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","names":["index","h","isItem","translate","Host","ENTER","ESCAPE"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/*\n @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n /\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/\n This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /\n The link\n /\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Open state of the link-menu dialog\n /\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /\n Emitted when the menu is closed from inside the component.\n * (Not emitted when the consumer sets the `open`-property to `false`.)\n /\n @Event()\n private cancel: EventEmitter<void>;\n\n /\n Emitted when the menu is saved from inside the component.\n /\n @Event()\n private save: EventEmitter<void>;\n\n /\n Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text \|\| ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href \|\| ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent \| KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"version":3}
1	+ {"file":"limel-action-bar.limel-text-editor-link-menu.entry.cjs.js","mappings":"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","names":["index","h","isItem","translate","Host","ENTER","ESCAPE"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/*\n @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n /\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible \|\| this.actions.length <= 1) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/\n This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /\n The link\n /\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Open state of the link-menu dialog\n /\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /\n Emitted when the menu is closed from inside the component.\n * (Not emitted when the consumer sets the `open`-property to `false`.)\n /\n @Event()\n private cancel: EventEmitter<void>;\n\n /\n Emitted when the menu is saved from inside the component.\n /\n @Event()\n private save: EventEmitter<void>;\n\n /\n Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text \|\| ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href \|\| ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent \| KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"version":3}

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

@@ -115,7 +115,7 @@ export class ActionBar {
       }, role: "grid" }, h("div", { class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
   }
   renderCollapseExpandButton() {
-    if (!this.collapsible) {
+    if (!this.collapsible || this.actions.length <= 1) {
       return;
     }
     return (h("button", { class: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/*\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n */\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n"]}
1	+ {"version":3,"file":"action-bar.js","sourceRoot":"","sources":["../../../src/components/action-bar/action-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/*\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n */\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible \|\| this.actions.length <= 1) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n"]}

package/dist/esm/limel-action-bar_2.entry.js CHANGED Viewed

@@ -93,7 +93,7 @@ const ActionBar = class {
       }, role: "grid" }, h("div", { class: "items", role: "rowgroup" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions), this.renderCollapseExpandButton()));
   }
   renderCollapseExpandButton() {
-    if (!this.collapsible) {
+    if (!this.collapsible || this.actions.length <= 1) {
       return;
     }
     return (h("button", { class: {

package/dist/esm/limel-action-bar_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-action-bar.limel-text-editor-link-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/*\n @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n /\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/\n This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /\n The link\n /\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Open state of the link-menu dialog\n /\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /\n Emitted when the menu is closed from inside the component.\n * (Not emitted when the consumer sets the `open`-property to `false`.)\n /\n @Event()\n private cancel: EventEmitter<void>;\n\n /\n Emitted when the menu is saved from inside the component.\n /\n @Event()\n private save: EventEmitter<void>;\n\n /\n Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text \|\| ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href \|\| ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent \| KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"version":3}
1	+ {"file":"limel-action-bar.limel-text-editor-link-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/*\n @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/\n An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n \n The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n \n The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n \n The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n \n @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n /\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /\n Items that are placed in the action bar.\n * These represent primary actions.\n /\n @Prop()\n public actions: Array<ActionBarItem \| ListSeparator> = [];\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /\n A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n /\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /\n - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n /\n @Prop({ reflect: true })\n public layout?: 'fullWidth' \| 'floating';\n\n /\n When set to `true`, the action bar will be collapsible.\n /\n @Prop({ reflect: true })\n public collapsible = false;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /\n Indicates whether the action bar is currently in a collapsed state.\n /\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem \| ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem \| ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible \|\| this.actions.length <= 1) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem \| ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved \|\| someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/\n This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /\n The link\n /\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /\n Defines the language for translations.\n /\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /\n Open state of the link-menu dialog\n /\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /\n Emitted when the menu is closed from inside the component.\n * (Not emitted when the consumer sets the `open`-property to `false`.)\n /\n @Event()\n private cancel: EventEmitter<void>;\n\n /\n Emitted when the menu is saved from inside the component.\n /\n @Event()\n private save: EventEmitter<void>;\n\n /\n Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text \|\| ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href \|\| ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent \| KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent \| KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"version":3}

package/dist/lime-elements/lime-elements.esm.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-62a21e92",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-3c5a0769",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-e329fd1e",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-40016256",[[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],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-c632261b",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-26623b2d",[[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]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-0aeff0b6",[[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"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-d05a7803",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-dc6846e1",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-3a605df3",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-4f70c0aa",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-ece3a0f5",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-c923b97d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-8e7788a1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-36cf3031",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-89eaca66",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-02564969",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-fa8ea2db",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-f3cbbaf5",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-2b294a69",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-06b5aa10",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-f95a5cb5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-8baf79cf",[[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]}]]],["p-ad3f6808",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-8f6f643d",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-2078a6e2",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-dbcde7db",[[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]}]]],["p-85ffcf55",[[1,"limel-3d-hover-effect-glow"]]],["p-66501d69",[[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]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-0863261f",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-1c5f50f0",[[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"]}]]],["p-53404aa6",[[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"],"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"]}],[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]}]]],["p-8900110f",[[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]}]]],["p-fd0ea2e9",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-1c16aa9b",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-2793f6d0",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-7db872fd",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-54ac08f5",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
+import{p as e,b as l}from"./p-443111b3.js";export{s as setNonce}from"./p-443111b3.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-62a21e92",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-3c5a0769",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-e329fd1e",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-40016256",[[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],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-211456f2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-c632261b",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-8f1b76df",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-26623b2d",[[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]}]]],["p-6500050d",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-0aeff0b6",[[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"]]]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-d05a7803",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-dc6846e1",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-3a605df3",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-4f70c0aa",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-fda881a3",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-ece3a0f5",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["p-c923b97d",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["p-8e7788a1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-36cf3031",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-89eaca66",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-02564969",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-1bcdc70b",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-fa8ea2db",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-f3cbbaf5",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-28c76ae8",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-16e4ca3e",[[1,"limel-config",{"config":[16]}]]],["p-ea98795d",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-2b294a69",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-06b5aa10",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-9c5f2c45",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-8579a166",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-f95a5cb5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-8baf79cf",[[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]}]]],["p-ad3f6808",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-d6660d2a",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-8f6f643d",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-f340d860",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-2078a6e2",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-dbcde7db",[[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]}]]],["p-85ffcf55",[[1,"limel-3d-hover-effect-glow"]]],["p-66501d69",[[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]}]]],["p-a2eee29e",[[17,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-0863261f",[[1,"limel-markdown",{"value":[1],"whitelist":[16]}]]],["p-5d08ef7d",[[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-d93f1964",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-1c5f50f0",[[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"]}]]],["p-53404aa6",[[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"],"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"]}],[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]}]]],["p-8900110f",[[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]}]]],["p-fd0ea2e9",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-1c16aa9b",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-2793f6d0",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-fe08f7c9",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-54ac08f5",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/{p-7db872fd.entry.js → p-fe08f7c9.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as i,c as t,h as e,H as s,g as n}from"./p-443111b3.js";import{t as a}from"./p-bf55e816.js";import{i as r}from"./p-91741e79.js";import{a as o,E as l}from"./p-aa25f475.js";const h='@charset "UTF-8";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;border-radius:50%;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}';const c=class{constructor(s){i(this,s);this.itemSelected=t(this,"itemSelected",7);this.hasRendered=false;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.renderActionBarItem=(i,t)=>e("limel-action-bar-item",{item:i,onSelect:this.handleSelect,isVisible:this.isVisible(t),role:"gridcell"});this.renderOverflowMenu=i=>{if(!(this.actions.length-this.overflowCutoff)){return}const t={name:"more",color:"rgb(var(--contrast-1000))",title:this.getTranslation("action-bar.actions")};return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:i,onSelect:this.handleSelect,role:"gridcell",overFlowIcon:this.actionBarIsShrunk?t:undefined})};this.handleCollapseExpandClick=()=>{this.actionBarIsShrunk=!this.actionBarIsShrunk};this.handleSelect=i=>{i.stopPropagation();if(r(i.detail)){this.itemSelected.emit(i.detail)}};this.getTranslation=i=>a.get(i,this.language);this.handleIntersection=i=>{const t=i.filter((i=>i.isIntersecting));const e=i.filter((i=>!i.isIntersecting));if(this.isFirstIntersectionCheck){this.overflowCutoff=t.length}else{this.overflowCutoff=this.overflowCutoff+t.length-e.length}this.isFirstIntersectionCheck=false};this.actions=[];this.language=document.documentElement.lang;this.accessibleLabel=undefined;this.layout=undefined;this.collapsible=false;this.openDirection=undefined;this.overflowCutoff=this.actions.length;this.actionBarIsShrunk=false}connectedCallback(){if(this.hasRendered){this.createIntersectionObserver()}}componentDidRender(){var i;if(this.haveItemsChanged()){(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var i;(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[]}render(){this.hasRendered=true;let i=[];if(this.actions.length){i=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating","is-shrunk":this.actionBarIsShrunk&&this.collapsible,"can-be-shrunk":!!this.collapsible},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(i),this.renderCollapseExpandButton())}renderCollapseExpandButton(){if(!this.collapsible){return}return e("button",{class:{"expand-shrink":true},"aria-label":this.tooltipLabel,type:"button",onClick:this.handleCollapseExpandClick},e("limel-icon",{name:"double_left",id:"tooltip-expand-shrink-button"}),e("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-expand-shrink-button"}))}isVisible(i){return i<this.overflowCutoff}get tooltipLabel(){let i="action-bar.collapse";if(this.actionBarIsShrunk){i="action-bar.expand"}return this.getTranslation(i)}createIntersectionObserver(){const i={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,i);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((i=>{this.observe(i)}))}observe(i){this.intersectionObserver.observe(i);this.actionBarItems.push(i)}haveItemsChanged(){const i=this.actionBarItems.some((i=>!this.host.shadowRoot.contains(i)));const t=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((i=>!this.actionBarItems.includes(i)));return i||t}get host(){return n(this)}};c.style=h;const d=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const m=class{constructor(e){i(this,e);this.cancel=t(this,"cancel",7);this.save=t(this,"save",7);this.linkChange=t(this,"linkChange",7);this.getTranslation=i=>a.get(i,this.language);this.isValid=i=>{try{new URL(i)}catch(i){return false}return true};this.handleKeyDown=i=>{var t;if(i.key!==o){return}if(this.saveButton){this.saveButton.focus()}i.preventDefault();if(this.isValid((t=this.link)===null||t===void 0?void 0:t.href)){this.handleSave(i)}};this.handleCancel=i=>{if(i instanceof KeyboardEvent&&i.key!==l){return}i.stopPropagation();i.preventDefault();this.cancel.emit()};this.handleSave=i=>{i.stopPropagation();this.save.emit()};this.handleLinkInputAction=i=>{window.open(this.link.href,"_blank");i.stopPropagation()};this.handleLinkTitleChange=i=>{var t;this.emitLinkChange(i.detail,(t=this.link)===null||t===void 0?void 0:t.href)};this.handleLinkValueChange=i=>{var t;const e=i.detail;this.emitLinkChange((t=this.link)===null||t===void 0?void 0:t.text,e)};this.emitLinkChange=(i,t)=>{const e={text:i,href:t};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const i=this.textInput.shadowRoot.querySelector("input");if(i){requestAnimationFrame((()=>{i.focus()}))}}}render(){var i,t;const s=this.isValid(this.link.href);return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((i=this.link)===null||i===void 0?void 0:i.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:i=>this.textInput=i}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((t=this.link)===null||t===void 0?void 0:t.href)||"",type:"text",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:!s,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!s,onClick:this.handleSave,ref:i=>this.saveButton=i,slot:"button"}))]}};m.style=d;export{c as limel_action_bar,m as limel_text_editor_link_menu};
-//# sourceMappingURL=p-7db872fd.entry.js.map
+import{r as i,c as t,h as e,H as s,g as n}from"./p-443111b3.js";import{t as a}from"./p-bf55e816.js";import{i as r}from"./p-91741e79.js";import{a as o,E as l}from"./p-aa25f475.js";const h='@charset "UTF-8";:host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n      --action-bar-item-text-color,\n      rgb(var(--contrast-1100))\n  );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)));transition:max-width 0.3s ease}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-shrunk) .items{opacity:0}:host(limel-action-bar:not(.is-shrunk)) .items{opacity:1}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;border:1px solid rgb(var(--contrast-400));padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16), var(--shadow-depth-8)}:host(limel-action-bar.is-shrunk){max-width:5rem;transition:max-width 0.3s ease-in-out}:host(limel-action-bar.is-shrunk) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(180deg)}:host(limel-action-bar:not(.is-shrunk)){max-width:100%;transition:max-width 0.3s ease-in-out}:host(limel-action-bar:not(.is-shrunk)) .expand-shrink{transition:transform 0.3s ease;transform:rotateY(0deg)}:host(limel-action-bar.can-be-shrunk.is-full-width) .expand-shrink{margin-left:auto}.expand-shrink{all:unset;box-sizing:border-box;border-radius:50%;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent;display:flex;justify-content:center;align-items:center}.expand-shrink:hover,.expand-shrink:focus,.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}.expand-shrink:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.expand-shrink:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.expand-shrink:hover,.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.expand-shrink:focus{outline:none}.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.expand-shrink limel-icon{width:1.5rem;height:1.5rem;padding:0.125rem;color:var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)))}';const c=class{constructor(s){i(this,s);this.itemSelected=t(this,"itemSelected",7);this.hasRendered=false;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.renderActionBarItem=(i,t)=>e("limel-action-bar-item",{item:i,onSelect:this.handleSelect,isVisible:this.isVisible(t),role:"gridcell"});this.renderOverflowMenu=i=>{if(!(this.actions.length-this.overflowCutoff)){return}const t={name:"more",color:"rgb(var(--contrast-1000))",title:this.getTranslation("action-bar.actions")};return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:i,onSelect:this.handleSelect,role:"gridcell",overFlowIcon:this.actionBarIsShrunk?t:undefined})};this.handleCollapseExpandClick=()=>{this.actionBarIsShrunk=!this.actionBarIsShrunk};this.handleSelect=i=>{i.stopPropagation();if(r(i.detail)){this.itemSelected.emit(i.detail)}};this.getTranslation=i=>a.get(i,this.language);this.handleIntersection=i=>{const t=i.filter((i=>i.isIntersecting));const e=i.filter((i=>!i.isIntersecting));if(this.isFirstIntersectionCheck){this.overflowCutoff=t.length}else{this.overflowCutoff=this.overflowCutoff+t.length-e.length}this.isFirstIntersectionCheck=false};this.actions=[];this.language=document.documentElement.lang;this.accessibleLabel=undefined;this.layout=undefined;this.collapsible=false;this.openDirection=undefined;this.overflowCutoff=this.actions.length;this.actionBarIsShrunk=false}connectedCallback(){if(this.hasRendered){this.createIntersectionObserver()}}componentDidRender(){var i;if(this.haveItemsChanged()){(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var i;(i=this.intersectionObserver)===null||i===void 0?void 0:i.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[]}render(){this.hasRendered=true;let i=[];if(this.actions.length){i=this.actions.slice(this.overflowCutoff)}return e(s,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating","is-shrunk":this.actionBarIsShrunk&&this.collapsible,"can-be-shrunk":!!this.collapsible},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(i),this.renderCollapseExpandButton())}renderCollapseExpandButton(){if(!this.collapsible||this.actions.length<=1){return}return e("button",{class:{"expand-shrink":true},"aria-label":this.tooltipLabel,type:"button",onClick:this.handleCollapseExpandClick},e("limel-icon",{name:"double_left",id:"tooltip-expand-shrink-button"}),e("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-expand-shrink-button"}))}isVisible(i){return i<this.overflowCutoff}get tooltipLabel(){let i="action-bar.collapse";if(this.actionBarIsShrunk){i="action-bar.expand"}return this.getTranslation(i)}createIntersectionObserver(){const i={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.isFirstIntersectionCheck=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,i);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((i=>{this.observe(i)}))}observe(i){this.intersectionObserver.observe(i);this.actionBarItems.push(i)}haveItemsChanged(){const i=this.actionBarItems.some((i=>!this.host.shadowRoot.contains(i)));const t=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((i=>!this.actionBarItems.includes(i)));return i||t}get host(){return n(this)}};c.style=h;const d=":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";const m=class{constructor(e){i(this,e);this.cancel=t(this,"cancel",7);this.save=t(this,"save",7);this.linkChange=t(this,"linkChange",7);this.getTranslation=i=>a.get(i,this.language);this.isValid=i=>{try{new URL(i)}catch(i){return false}return true};this.handleKeyDown=i=>{var t;if(i.key!==o){return}if(this.saveButton){this.saveButton.focus()}i.preventDefault();if(this.isValid((t=this.link)===null||t===void 0?void 0:t.href)){this.handleSave(i)}};this.handleCancel=i=>{if(i instanceof KeyboardEvent&&i.key!==l){return}i.stopPropagation();i.preventDefault();this.cancel.emit()};this.handleSave=i=>{i.stopPropagation();this.save.emit()};this.handleLinkInputAction=i=>{window.open(this.link.href,"_blank");i.stopPropagation()};this.handleLinkTitleChange=i=>{var t;this.emitLinkChange(i.detail,(t=this.link)===null||t===void 0?void 0:t.href)};this.handleLinkValueChange=i=>{var t;const e=i.detail;this.emitLinkChange((t=this.link)===null||t===void 0?void 0:t.text,e)};this.emitLinkChange=(i,t)=>{const e={text:i,href:t};this.linkChange.emit(e)};this.link=undefined;this.language="en";this.isOpen=false}connectedCallback(){this.setupGlobalHandlers()}disconnectedCallback(){this.teardownGlobalHandlers()}setupGlobalHandlers(){if(this.isOpen){document.addEventListener("keyup",this.handleCancel)}}teardownGlobalHandlers(){document.removeEventListener("keyup",this.handleCancel)}componentDidLoad(){this.focusOnTextInput()}focusOnTextInput(){if(this.textInput){const i=this.textInput.shadowRoot.querySelector("input");if(i){requestAnimationFrame((()=>{i.focus()}))}}}render(){var i,t;const s=this.isValid(this.link.href);return[e("limel-input-field",{label:this.getTranslation("editor-link-menu.text"),value:((i=this.link)===null||i===void 0?void 0:i.text)||"",leadingIcon:"text_cursor",onChange:this.handleLinkTitleChange,onKeyDown:this.handleKeyDown,ref:i=>this.textInput=i}),e("limel-input-field",{label:this.getTranslation("editor-link-menu.link"),value:((t=this.link)===null||t===void 0?void 0:t.href)||"",type:"text",leadingIcon:"-lime-text-link",trailingIcon:"external_link",invalid:!s,onChange:this.handleLinkValueChange,onAction:this.handleLinkInputAction,onKeyDown:this.handleKeyDown}),e("div",{class:"actions"},e("limel-button",{label:this.getTranslation("cancel"),onClick:this.handleCancel}),e("limel-button",{primary:true,label:this.getTranslation("save"),disabled:!s,onClick:this.handleSave,ref:i=>this.saveButton=i,slot:"button"}))]}};m.style=d;export{c as limel_action_bar,m as limel_text_editor_link_menu};
+//# sourceMappingURL=p-fe08f7c9.entry.js.map

package/dist/lime-elements/p-fe08f7c9.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["actionBarCss","ActionBar","this","hasRendered","isFirstIntersectionCheck","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","shrunkOverFlowIcon","name","color","title","getTranslation","openDirection","overFlowIcon","actionBarIsShrunk","undefined","handleCollapseExpandClick","event","stopPropagation","isItem","detail","itemSelected","emit","key","translate","get","language","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","document","documentElement","lang","connectedCallback","createIntersectionObserver","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","disconnectedCallback","render","overflowActions","slice","Host","accessibleLabel","class","layout","collapsible","map","renderCollapseExpandButton","tooltipLabel","type","onClick","id","label","elementId","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","editorLinkMenuCss","TextEditorLinkMenu","isValid","href","URL","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","text","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","addEventListener","removeEventListener","componentDidLoad","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","disabled","slot"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n*/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * When set to `true`, the action bar will be collapsible.\n */\n @Prop({ reflect: true })\n public collapsible = false;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /**\n * Indicates whether the action bar is currently in a collapsed state.\n */\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem | ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible || this.actions.length <= 1) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /**\n * The link\n */\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Open state of the link-menu dialog\n */\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Emitted when the menu is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private cancel: EventEmitter<void>;\n\n /**\n * Emitted when the menu is saved from inside the component.\n */\n @Event()\n private save: EventEmitter<void>;\n\n /**\n * Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text || ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href || ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.7.0",
+  "version": "38.7.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-7db872fd.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["actionBarCss","ActionBar","this","hasRendered","isFirstIntersectionCheck","actionBarItems","renderActionBarItem","item","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","shrunkOverFlowIcon","name","color","title","getTranslation","openDirection","overFlowIcon","actionBarIsShrunk","undefined","handleCollapseExpandClick","event","stopPropagation","isItem","detail","itemSelected","emit","key","translate","get","language","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","document","documentElement","lang","connectedCallback","createIntersectionObserver","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","disconnectedCallback","render","overflowActions","slice","Host","accessibleLabel","class","layout","collapsible","map","renderCollapseExpandButton","tooltipLabel","type","onClick","id","label","elementId","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","editorLinkMenuCss","TextEditorLinkMenu","isValid","href","URL","handleKeyDown","ENTER","saveButton","focus","preventDefault","link","handleSave","handleCancel","KeyboardEvent","ESCAPE","cancel","save","handleLinkInputAction","window","open","handleLinkTitleChange","emitLinkChange","handleLinkValueChange","text","newLink","linkChange","setupGlobalHandlers","teardownGlobalHandlers","isOpen","addEventListener","removeEventListener","componentDidLoad","focusOnTextInput","textInput","inputField","requestAnimationFrame","value","leadingIcon","onChange","onKeyDown","ref","el","_b","trailingIcon","invalid","onAction","primary","disabled","slot"],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n* @prop --action-bar-shrink-icon-color: Color of the shrink icon. Defaults to `--contrast-1000`.\n\n*/\n\n@use '../../style/mixins';\n\n:host(limel-action-bar) {\n --action-bar-item-height: 2rem;\n\n --limel-action-bar-item-text-color: var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );\n\n box-sizing: border-box;\n\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.25rem;\n max-width: 100%;\n border-radius: var(--action-bar-border-radius);\n\n background-color: var(\n --action-bar-background-color,\n rgb(var(--contrast-100))\n );\n\n transition: max-width 0.3s ease;\n}\n\n:host(limel-action-bar),\n.items {\n gap: 0.25rem;\n @media (pointer: coarse) {\n gap: 0.5rem;\n }\n}\n\n.items {\n display: inline-flex;\n max-width: 100%;\n min-width: 0;\n}\n\n:host(limel-action-bar.is-shrunk) .items {\n opacity: 0;\n}\n\n:host(limel-action-bar:not(.is-shrunk)) .items {\n opacity: 1;\n}\n\n:host(limel-action-bar.is-full-width) {\n width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n --action-bar-border-radius: 100vw;\n border: 1px solid rgb(var(--contrast-400));\n\n padding-right: 0.125rem;\n padding-left: 0.125rem;\n\n max-width: calc(100% - 2rem);\n box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n\n:host(limel-action-bar.is-shrunk) {\n max-width: 5rem;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(180deg);\n }\n}\n\n:host(limel-action-bar:not(.is-shrunk)) {\n max-width: 100%;\n transition: max-width 0.3s ease-in-out;\n\n .expand-shrink {\n transition: transform 0.3s ease;\n transform: rotateY(0deg);\n }\n}\n\n:host(limel-action-bar.can-be-shrunk.is-full-width) {\n .expand-shrink {\n margin-left: auto;\n }\n}\n\n.expand-shrink {\n all: unset;\n box-sizing: border-box;\n border-radius: 50%;\n\n @include mixins.is-flat-clickable();\n @include mixins.visualize-keyboard-focus;\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n limel-icon {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0.125rem;\n color: var(--action-bar-shrink-icon-color, rgb(var(--contrast-1000)));\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { Languages } from './../date-picker/date.types';\nimport translate from './../../global/translations';\nimport { isItem } from './isItem';\nimport { Icon } from '../../global/shared-types/icon.types';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-floating-expand\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n * @exampleComponent limel-example-action-bar-icon-title\n */\n@Component({\n tag: 'limel-action-bar',\n shadow: true,\n styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n /**\n * Items that are placed in the action bar.\n * These represent primary actions.\n */\n @Prop()\n public actions: Array<ActionBarItem | ListSeparator> = [];\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = document.documentElement.lang as Languages;\n\n /**\n * A label used to describe the purpose of the element to users\n * of assistive technologies, like screen readers.\n * Example value: \"toolbar\"\n */\n @Prop({ reflect: true })\n public accessibleLabel?: string;\n\n /**\n * - When set to `fullWidth`, the component will take the\n * entire width of its container.\n * - When set to `floating`, the component will get basic stylings\n * to visualize the floating state.\n * :::note\n * You should still properly position the component\n * according to the structure of your user interface.\n * For example, use an `absolute` or `fixed` position.\n * :::\n */\n @Prop({ reflect: true })\n public layout?: 'fullWidth' | 'floating';\n\n /**\n * When set to `true`, the action bar will be collapsible.\n */\n @Prop({ reflect: true })\n public collapsible = false;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public itemSelected: EventEmitter<ActionBarItem>;\n\n @Element()\n private readonly host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n /**\n * Indicates whether the action bar is currently in a collapsed state.\n */\n @State()\n private actionBarIsShrunk = false;\n\n private hasRendered = false;\n private intersectionObserver: IntersectionObserver;\n private isFirstIntersectionCheck = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public connectedCallback() {\n if (this.hasRendered) {\n this.createIntersectionObserver();\n }\n }\n\n public componentDidRender() {\n if (this.haveItemsChanged()) {\n this.intersectionObserver?.disconnect();\n this.createIntersectionObserver();\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n this.actionBarItems = [];\n }\n\n public render() {\n this.hasRendered = true;\n let overflowActions: Array<MenuItem | ListSeparator> = [];\n if (this.actions.length) {\n overflowActions = this.actions.slice(this.overflowCutoff);\n }\n\n return (\n <Host\n aria-label={this.accessibleLabel}\n class={{\n 'is-full-width': this.layout === 'fullWidth',\n 'is-floating': this.layout === 'floating',\n 'is-shrunk': this.actionBarIsShrunk && this.collapsible,\n 'can-be-shrunk': !!this.collapsible,\n }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n {this.renderCollapseExpandButton()}\n </Host>\n );\n }\n\n private readonly renderActionBarItem = (\n item: ActionBarItem,\n index: number,\n ) => {\n return (\n <limel-action-bar-item\n item={item}\n onSelect={this.handleSelect}\n isVisible={this.isVisible(index)}\n role=\"gridcell\"\n />\n );\n };\n\n private readonly renderOverflowMenu = (\n items: Array<MenuItem | ListSeparator>,\n ) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\n }\n\n const shrunkOverFlowIcon: Icon = {\n name: 'more',\n color: 'rgb(var(--contrast-1000))',\n title: this.getTranslation('action-bar.actions'),\n };\n\n return (\n <limel-action-bar-overflow-menu\n openDirection={this.openDirection}\n items={items}\n onSelect={this.handleSelect}\n role=\"gridcell\"\n overFlowIcon={\n this.actionBarIsShrunk ? shrunkOverFlowIcon : undefined\n }\n />\n );\n };\n\n private renderCollapseExpandButton() {\n if (!this.collapsible) {\n return;\n }\n\n return (\n <button\n class={{\n 'expand-shrink': true,\n }}\n aria-label={this.tooltipLabel}\n type=\"button\"\n onClick={this.handleCollapseExpandClick}\n >\n <limel-icon\n name=\"double_left\"\n id=\"tooltip-expand-shrink-button\"\n />\n <limel-tooltip\n label={this.tooltipLabel}\n elementId=\"tooltip-expand-shrink-button\"\n />\n </button>\n );\n }\n\n private handleCollapseExpandClick = () => {\n this.actionBarIsShrunk = !this.actionBarIsShrunk;\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private readonly handleSelect = (\n event: CustomEvent<ActionBarItem | ListSeparator>,\n ) => {\n event.stopPropagation();\n if (isItem(event.detail)) {\n this.itemSelected.emit(event.detail);\n }\n };\n\n private get tooltipLabel() {\n let key = 'action-bar.collapse';\n if (this.actionBarIsShrunk) {\n key = 'action-bar.expand';\n }\n\n return this.getTranslation(key);\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private readonly handleIntersection = (\n entries: IntersectionObserverEntry[],\n ) => {\n const intersectingItems = entries.filter(\n (entry) => entry.isIntersecting,\n );\n\n const notIntersectingItems = entries.filter(\n (entry) => !entry.isIntersecting,\n );\n\n if (this.isFirstIntersectionCheck) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.isFirstIntersectionCheck = false;\n };\n\n private createIntersectionObserver() {\n const options = {\n root: this.host.shadowRoot.querySelector('.items'),\n rootMargin: '0px',\n threshold: 1.0,\n };\n\n this.overflowCutoff = this.actions.length;\n this.isFirstIntersectionCheck = true;\n\n this.actionBarItems = [];\n\n this.intersectionObserver = new IntersectionObserver(\n this.handleIntersection,\n options,\n );\n\n this.host.shadowRoot\n .querySelectorAll('limel-action-bar-item')\n .forEach((actionBarItem) => {\n this.observe(actionBarItem);\n });\n }\n\n private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n this.intersectionObserver.observe(actionBarItem);\n this.actionBarItems.push(actionBarItem);\n }\n\n private haveItemsChanged() {\n const someItemRemoved = this.actionBarItems.some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.host.shadowRoot.contains(actionBarItem),\n );\n\n const someItemAdded = Array.from(\n this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n ).some(\n (actionBarItem: HTMLLimelActionBarItemElement) =>\n !this.actionBarItems.includes(actionBarItem),\n );\n\n return someItemRemoved || someItemAdded;\n }\n}\n",":host(limel-text-editor-link-menu) {\n animation: fade 0.2s ease forwards;\n animation-delay: 0.1s; // prevents the visual glitch when the link opens\n opacity: 0;\n\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0.5rem;\n max-width: calc(100vw - 2rem);\n border-radius: 0.5rem;\n background-color: var(--lime-elevated-surface-background-color);\n box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n display: flex;\n justify-content: end;\n gap: 0.5rem;\n}\n\n@keyframes fade {\n 0% {\n scale: 0.86;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor-link-menu',\n shadow: true,\n styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n /**\n * The link\n */\n @Prop({ reflect: true })\n public link: EditorTextLink;\n\n /**\n * Defines the language for translations.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Open state of the link-menu dialog\n */\n @Prop({ reflect: true })\n public isOpen: boolean = false;\n\n /**\n * Emitted when the menu is closed from inside the component.\n * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n */\n @Event()\n private cancel: EventEmitter<void>;\n\n /**\n * Emitted when the menu is saved from inside the component.\n */\n @Event()\n private save: EventEmitter<void>;\n\n /**\n * Emitted when the user inputs new values for the link\n */\n @Event()\n private linkChange: EventEmitter<EditorTextLink>;\n\n private textInput: HTMLLimelInputFieldElement;\n private saveButton: HTMLLimelButtonElement;\n\n public connectedCallback() {\n this.setupGlobalHandlers();\n }\n\n public disconnectedCallback() {\n this.teardownGlobalHandlers();\n }\n\n private setupGlobalHandlers() {\n if (this.isOpen) {\n document.addEventListener('keyup', this.handleCancel);\n }\n }\n\n private teardownGlobalHandlers() {\n document.removeEventListener('keyup', this.handleCancel);\n }\n\n public componentDidLoad() {\n this.focusOnTextInput();\n }\n\n private focusOnTextInput() {\n if (this.textInput) {\n const inputField = this.textInput.shadowRoot.querySelector('input');\n if (inputField) {\n requestAnimationFrame(() => {\n inputField.focus();\n });\n }\n }\n }\n\n public render() {\n const isValid = this.isValid(this.link.href);\n\n return [\n <limel-input-field\n label={this.getTranslation('editor-link-menu.text')}\n value={this.link?.text || ''}\n leadingIcon=\"text_cursor\"\n onChange={this.handleLinkTitleChange}\n onKeyDown={this.handleKeyDown}\n ref={(el) =>\n (this.textInput = el as HTMLLimelInputFieldElement)\n }\n />,\n <limel-input-field\n label={this.getTranslation('editor-link-menu.link')}\n value={this.link?.href || ''}\n type=\"text\"\n leadingIcon=\"-lime-text-link\"\n trailingIcon=\"external_link\"\n invalid={!isValid}\n onChange={this.handleLinkValueChange}\n onAction={this.handleLinkInputAction}\n onKeyDown={this.handleKeyDown}\n />,\n <div class=\"actions\">\n <limel-button\n label={this.getTranslation('cancel')}\n onClick={this.handleCancel}\n />\n <limel-button\n primary={true}\n label={this.getTranslation('save')}\n disabled={!isValid}\n onClick={this.handleSave}\n ref={(el) =>\n (this.saveButton = el as HTMLLimelButtonElement)\n }\n slot=\"button\"\n />\n </div>,\n ];\n }\n\n private getTranslation = (key: string) => {\n return translate.get(key, this.language);\n };\n\n private isValid = (href: string): boolean => {\n try {\n new URL(href);\n } catch {\n return false;\n }\n\n return true;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key !== ENTER) {\n return;\n }\n\n if (this.saveButton) {\n this.saveButton.focus();\n }\n\n event.preventDefault();\n if (this.isValid(this.link?.href)) {\n this.handleSave(event);\n }\n };\n\n private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n this.cancel.emit();\n };\n\n private handleSave = (event: MouseEvent | KeyboardEvent) => {\n event.stopPropagation();\n\n this.save.emit();\n };\n\n private handleLinkInputAction = (\n event: LimelInputFieldCustomEvent<void>,\n ) => {\n window.open(this.link.href, '_blank');\n event.stopPropagation();\n };\n\n private handleLinkTitleChange = (event: CustomEvent<string>) => {\n this.emitLinkChange(event.detail, this.link?.href);\n };\n\n private handleLinkValueChange = (event: CustomEvent<string>) => {\n const href = event.detail;\n\n this.emitLinkChange(this.link?.text, href);\n };\n\n private emitLinkChange = (text: string, href: string) => {\n const newLink: EditorTextLink = {\n text: text,\n href: href,\n };\n\n this.linkChange.emit(newLink);\n };\n}\n"],"mappings":"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"}