npm - @limetech/lime-elements - Versions diffs - 37.36.0 → 37.38.0 - Mend

@limetech/lime-elements 37.36.0 → 37.38.0

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

Files changed (26) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,24 @@
+## [37.38.0](https://github.com/Lundalogik/lime-elements/compare/v37.37.0...v37.38.0) (2024-05-17)
+### Features
+* **text-editor:** fix disabled and readonly prop CSS always showing ([64b97b1](https://github.com/Lundalogik/lime-elements/commit/64b97b1606cac8277916c4449730770cc30832a2))
+### Bug Fixes
+* **documentation:** fix text-editor form data example ([4d5ddcf](https://github.com/Lundalogik/lime-elements/commit/4d5ddcfe71f84091a40d4099117321dd1fe43abe))
+## [37.37.0](https://github.com/Lundalogik/lime-elements/compare/v37.36.0...v37.37.0) (2024-05-17)
+### Features
+* **action-bar:** enable making items `selected` ([187c4d5](https://github.com/Lundalogik/lime-elements/commit/187c4d542730ed4227043433120668af63f300e8))
 ## [37.36.0](https://github.com/Lundalogik/lime-elements/compare/v37.35.0...v37.36.0) (2024-05-16)

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

@@ -111,7 +111,7 @@ const ActionBar = class {
 };
 ActionBar.style = actionBarCss;
-const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
+const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
 const ActionBarButton = class {
   constructor(hostRef) {
@@ -138,7 +138,9 @@ const ActionBarButton = class {
     if (!this.isItem(this.item) && this.item.separator) {
       return index.h("div", { role: "separator" });
     }
-    return (index.h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+    return (index.h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
+        'is-selected': this.isItem(this.item) && this.item.selected,
+      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
   }
   isItem(item) {
     return !('separator' in item);

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

	@@ -1 +1 @@
1	- {"file":"limel-action-bar.limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":"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","names":["index","h","Host","createRandomString","makeEnterClickable","removeEnterClickable","getIconName","getIconColor"],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem \| ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/*\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/\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\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-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","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 { isItem } from './isItem';\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\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console /\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
1	+ {"file":"limel-action-bar.limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":"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","names":["index","h","Host","createRandomString","makeEnterClickable","removeEnterClickable","getIconName","getIconColor"],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem \| ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/*\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/\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\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-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","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 { isItem } from './isItem';\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\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-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &.is-selected {\n &:not(:hover) {\n box-shadow: var(--button-shadow-inset);\n }\n color: var(--mdc-theme-primary) !important;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console /\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}

package/dist/cjs/limel-text-editor.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d1052409.js');
 const randomString = require('./random-string-c8445652.js');
-const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
+const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
 const TextEditor = class {
   constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,g5JAAg5J;;MC2Bz5J,UAAU;EAyFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,+BACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBA/LwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;uBAOH,IAAI;IAY9B,IAAI,CAAC,YAAY,GAAGC,+BAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAGA,+BAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACID,QAACE,UAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAEDF,kBAAM,KAAK,EAAC,iBAAiB,IACzBA,kBAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACHA,kBAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACHA,4BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACHA,2DACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,OAAO,IACfA,mBAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder \|\| this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
1	+ {"file":"limel-text-editor.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,i9JAAi9J;;MC2B19J,UAAU;EAyFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACIA,+BACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBA/LwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;uBAOH,IAAI;IAY9B,IAAI,CAAC,YAAY,GAAGC,+BAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAGA,+BAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACID,QAACE,UAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAEDF,kBAAM,KAAK,EAAC,iBAAiB,IACzBA,kBAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnBA,kBAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACHA,kBAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACHA,4BACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACHA,2DACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,OAAO,IACfA,mBAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACIA,kBAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":["h","createRandomString","Host"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder \|\| this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css CHANGED Viewed

@@ -114,6 +114,12 @@ button:has(.text) {
 button[disabled] {
   opacity: 0.4;
 }
+button.is-selected {
+  color: var(--mdc-theme-primary) !important;
+}
+button.is-selected:not(:hover) {
+  box-shadow: var(--button-shadow-inset);
+}
 .text {
   overflow: hidden;

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

@@ -28,7 +28,9 @@ export class ActionBarButton {
     if (!this.isItem(this.item) && this.item.separator) {
       return h("div", { role: "separator" });
     }
-    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
+        'is-selected': this.isItem(this.item) && this.item.selected,
+      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
   }
   isItem(item) {
     return !('separator' in item);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"action-bar-item.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,GACP,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EACH,kBAAkB,EAClB,oBAAoB,GACvB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAEtE;;GAEG;AAMH,MAAM,OAAO,eAAe;EA6BxB;~~IAmCQ~~,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC;;~~qBAhD0B~~,IAAI;IAW5B,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,iBAAiB;IACpB,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAClC,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,uBAAuB,EAAE,CAAC;EACnC,CAAC;EAEM,oBAAoB;IACvB,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACpC,CAAC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAChD,OAAO,WAAK,IAAI,EAAC,WAAW,GAAG,CAAC;KACnC;IAED,OAAO,CACH,cACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE;~~MAE1B~~,IAAI,CAAC,UAAU,EAAE;MACjB,IAAI,CAAC,WAAW,EAAE;MAClB,IAAI,CAAC,aAAa,EAAE,CAChB,CACZ,CAAC;EACN,CAAC;EAOO,MAAM,CAAC,IAAmC;IAC9C,OAAO,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC;EAClC,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC9C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO,IAAI,CAAC;KACf;EACL,CAAC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3C,OAAO;KACV;IAED,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;MACrB,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACzC,MAAM,KAAK,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAEhE,OAAO,CACH,kBACI,IAAI,EAAE,IAAI,EACV,KAAK,EAAE;UACH,8BAA8B,EAAE,GAAG,KAAK,EAAE;SAC7C,GACH,CACL,CAAC;KACL;EACL,CAAC;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC/C,OAAO;KACV;IAED,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAAC;EACtD,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAChB,OAAO,CACH,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACrB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GACpC,CACL,CAAC;KACL;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACvB,OAAO,CACH,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAC9B,CACL,CAAC;KACL;EACL,CAAC;EAEO,uBAAuB;IAC3B,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAC/C,yCAAyC;MACzC,OAAO,CAAC,IAAI,CACR,sKAAsK,CACzK,CAAC;KACL;EACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n"]}
1	+ {"version":3,"file":"action-bar-item.js","sourceRoot":"","sources":["../../../../src/components/action-bar/action-bar-item/action-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n"]}

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

@@ -20,6 +20,7 @@ import { isItem } from './isItem';
  *
  * @exampleComponent limel-example-action-bar
  * @exampleComponent limel-example-action-bar-overflow-menu
+ * @exampleComponent limel-example-action-bar-selected-item
  * @exampleComponent limel-example-action-bar-colors
  * @exampleComponent limel-example-action-bar-floating
  * @exampleComponent limel-example-action-bar-styling

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 { isItem } from './isItem';\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\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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 { isItem } from './isItem';\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\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-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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/collection/components/text-editor/text-editor.css CHANGED Viewed

@@ -167,15 +167,15 @@
   --limel-text-editor-outline-color: var(--mdc-theme-primary);
 }
-:host(limel-text-editor[invalid]) {
+:host(limel-text-editor[invalid]:not([invalid=false])) {
   --limel-text-editor-outline-color: var(--lime-error-text-color);
 }
-:host(limel-text-editor[readonly]) {
+:host(limel-text-editor[readonly]:not([readonly=false])) {
   --limel-text-editor-placeholder-top: 0;
   --limel-text-editor-outline-color: transparent;
 }
-:host(limel-text-editor[readonly]) limel-markdown {
+:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown {
   display: block;
   padding: var(--limel-text-editor-padding);
 }

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

@@ -107,7 +107,7 @@ const ActionBar = class {
 };
 ActionBar.style = actionBarCss;
-const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
+const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
 const ActionBarButton = class {
   constructor(hostRef) {
@@ -134,7 +134,9 @@ const ActionBarButton = class {
     if (!this.isItem(this.item) && this.item.separator) {
       return h("div", { role: "separator" });
     }
-    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
+        'is-selected': this.isItem(this.item) && this.item.selected,
+      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
   }
   isItem(item) {
     return !('separator' in item);

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

	@@ -1 +1 @@
1	- {"file":"limel-action-bar.limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem \| ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/*\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/\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\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-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","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 { isItem } from './isItem';\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\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console /\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
1	+ {"file":"limel-action-bar.limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem \| ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/*\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/\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\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-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","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 { isItem } from './isItem';\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\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-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 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 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem \| ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &.is-selected {\n &:not(:hover) {\n box-shadow: var(--button-shadow-inset);\n }\n color: var(--mdc-theme-primary) !important;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /\n Item that is placed in the action bar.\n /\n @Prop()\n public item!: ActionBarItem \| ListSeparator;\n\n /\n Fired when a action bar item has been clicked.\n * @public\n /\n @Event()\n public select: EventEmitter<ActionBarItem \| ListSeparator>;\n\n /\n When the item is displayed in the available width,\n * this will be `false`.\n /\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /\n Used to attach the right tooltip to the right button\n /\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem \| ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) \|\| this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n / eslint-disable-next-line no-console /\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/\n @private\n /\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /\n List of the items that should be rendered in the overflow menu.\n /\n @Prop()\n public items: Array<MenuItem \| ListSeparator>;\n\n /\n Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n /\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /\n Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem \| ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}

package/dist/esm/limel-text-editor.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-6156b4fd.js';
 import { c as createRandomString } from './random-string-812b1c35.js';
-const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
+const textEditorCss = "@charset \"UTF-8\";:host{--mdc-theme-primary:var(\n      --lime-primary-color,\n      rgb(var(--color-teal-default))\n  );--mdc-theme-secondary:var(\n      --lime-secondary-color,\n      rgb(var(--contrast-1100))\n  );--mdc-theme-on-primary:var(\n      --lime-on-primary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-secondary:var(\n      --lime-on-secondary-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-text-disabled-on-background:var(\n      --lime-text-disabled-on-background-color,\n      rgba(var(--contrast-1700), 0.38)\n  );--mdc-theme-text-primary-on-background:var(\n      --lime-text-primary-on-background-color,\n      rgba(var(--contrast-1700), 0.87)\n  );--mdc-theme-text-secondary-on-background:var(\n      --lime-text-secondary-on-background-color,\n      rgba(var(--contrast-1700), 0.54)\n  );--mdc-theme-error:var(\n      --lime-error-background-color,\n      rgb(var(--color-red-dark))\n  );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n      --lime-surface-background-color,\n      rgb(var(--contrast-100))\n  );--mdc-theme-on-surface:var(\n      --lime-on-surface-color,\n      rgb(var(--contrast-1500))\n  )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}*{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:\"*\"}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}";
 const TextEditor = class {
   constructor(hostRef) {

package/dist/esm/limel-text-editor.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-text-editor.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,g5JAAg5J;;MC2Bz5J,UAAU;EAyFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,yBACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBA/LwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;uBAOH,IAAI;IAY9B,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAED,YAAM,KAAK,EAAC,iBAAiB,IACzB,YAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnB,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACH,YAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACH,sBACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACH,qDACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,OAAO,IACf,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":[],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder \|\| this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"version":3}
1	+ {"file":"limel-text-editor.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,i9JAAi9J;;MC2B19J,UAAU;EAyFnB;;;IAgFQ,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,yBACI,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,GAC3B,EACJ;KACL,CAAC;IAEM,cAAS,GAAG;MAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO,KAAK,CAAC;OAChB;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,IAAI,CAAC;OACf;KACJ,CAAC;IAEM,iBAAY,GAAG,MAAM,CAAC,KAA0B;MACpD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;uBA/LwC,UAAU;;oBAqBxB,KAAK;;;;mBA0BN,KAAK;;oBAkBJ,KAAK;uBAOH,IAAI;IAY9B,IAAI,CAAC,YAAY,GAAG,kBAAkB,EAAE,CAAC;IACzC,IAAI,CAAC,QAAQ,GAAG,kBAAkB,EAAE,CAAC;GACxC;EAEM,MAAM;IACT,QACI,EAAC,IAAI,IACD,KAAK,EAAE;QACH,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU;OACvC,IAED,YAAM,KAAK,EAAC,iBAAiB,IACzB,YAAM,KAAK,EAAC,iBAAiB,GAAG,EAC/B,IAAI,CAAC,WAAW,EAAE,EACnB,YAAM,KAAK,EAAC,kBAAkB,GAAG,CAC9B,EACN,IAAI,CAAC,YAAY,EAAE,CACjB,EACT;GACL;EAEO,YAAY;IAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MAC9B,OAAO;QACH,YAAM,KAAK,EAAC,6BAA6B,aAAS;QAClD,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO;QACH,sBACI,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;QACF,IAAI,CAAC,iBAAiB,EAAE;QACxB,IAAI,CAAC,gBAAgB,EAAE;OAC1B,CAAC;KACL;IAED,OAAO;MACH,qDACsB,IAAI,CAAC,WAAW,EAClC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,mBACF,IAAI,CAAC,YAAY,EAChC,EAAE,EAAE,IAAI,CAAC,QAAQ,GACnB;MACF,IAAI,CAAC,iBAAiB,EAAE;MACxB,IAAI,CAAC,gBAAgB,EAAE;KAC1B,CAAC;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,OAAO,IACf,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,KAAK,CAAS,CAChD,EACT;GACL;EAEO,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,EAAE;MACjC,OAAO;KACV;IAED,QACI,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM,IACvC,IAAI,CAAC,WAAW,CACd,EACT;GACL;;;;;;","names":[],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/\n A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n \n Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n \n @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n /\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /* The type of content that the editor should handle and emit, defaults to `markdown`\n \n Assumed to be set only once, so not reactive to changes\n /\n @Prop()\n public contentType: 'markdown' \| 'html' = 'markdown';\n\n /\n Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n /\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /\n Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n /\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /\n Optional helper text to display below the input field when it has focus\n /\n @Prop({ reflect: true })\n public helperText?: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is empty.\n /\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /\n The label of the editor\n /\n @Prop({ reflect: true })\n public label?: string;\n\n /\n Set to `true` to indicate that the current value of the editor is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /\n Description of the text inside the editor as markdown\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Set to `true` to indicate that the field is required.\n \n :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n /\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /\n Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n /\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /\n Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder \|\| this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\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-4d59ddb2",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"]}]]],["p-2b4bc9d5",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-08dd6ff7",[[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-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5fcdb9d2",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-5d2eaff4",[[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],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[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-fc91537a",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-79cf904b",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[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-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c36a9afa",[[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-c6ffda2f",[[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-5e0ee0be",[[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-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-9f8b4c2e",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-afce9725",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9d0552a2",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[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-11d775ca",[[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-e7c56d6e",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-2bff59a1",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["p-fecf1bf1",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"view":[32],"actionBarItems":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-5983b027",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-27b867e5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[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-bc63c12e",[[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-33a52a53",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a6f90b2e",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-8be3e1b3",[[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-50a9c9b4",[[1,"limel-markdown",{"value":[1]}]]],["p-426c1849",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-46a6a412",[[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],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[1,"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]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9df38d59",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-57a26fef",[[1,"limel-badge",{"label":[520]}]]],["p-5c9fbe6f",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-2967d51c",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ae978098",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-35365201",[[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]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}]]]]'),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-0e292eea",[[1,"limel-text-editor",{"contentType":[1,"content-type"],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"required":[516],"allowResize":[516,"allow-resize"]}]]],["p-2b4bc9d5",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["p-08dd6ff7",[[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-48652dbe",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["p-5fcdb9d2",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-5d2eaff4",[[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],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["p-65018bde",[[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-fc91537a",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-79cf904b",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["p-3d6dc7de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-20d07aab",[[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-3cd95c9f",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-768dc020",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["p-5d01dc2a",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-c36a9afa",[[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-c6ffda2f",[[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-5e0ee0be",[[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-9b437537",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-9f8b4c2e",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-eb58b4b7",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-6b2bc81b",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-afce9725",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-9d0552a2",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-9375145d",[[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-11d775ca",[[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-e7c56d6e",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-b5f723e2",[[1,"limel-grid"]]],["p-14c25deb",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}],[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["p-fecf1bf1",[[1,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"view":[32],"actionBarItems":[32]}]]],["p-e791ef57",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["p-5983b027",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-27b867e5",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-0fef416f",[[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-bc63c12e",[[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-33a52a53",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-a6f90b2e",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-8be3e1b3",[[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-50a9c9b4",[[1,"limel-markdown",{"value":[1]}]]],["p-426c1849",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-9605854b",[[1,"limel-linear-progress",{"value":[514],"indeterminate":[516]}]]],["p-46a6a412",[[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],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[1,"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]}]]],["p-53fc6f0e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9df38d59",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["p-57a26fef",[[1,"limel-badge",{"label":[520]}]]],["p-5c9fbe6f",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-2967d51c",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-ae978098",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-35365201",[[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]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-0e292eea.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as r,H as i}from"./p-443111b3.js";import{c as o}from"./p-3ccdc4a3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]:not([invalid=false])){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]:not([readonly=false])){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]:not([readonly=false])) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:""}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}';const n=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.disabled=undefined;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.required=false;this.allowResize=true;this.helperTextId=o();this.editorId=o()}render(){return r(i,{class:{"has-helper-text":!!this.helperText}},r("span",{class:"notched-outline"},r("span",{class:"leading-outline"}),this.renderLabel(),r("span",{class:"trailing-outline"})),this.renderEditor())}renderEditor(){if(this.readonly&&!this.value){return[r("span",{class:"lime-looks-like-input-value"},"–"),this.renderHelperLine()]}if(this.readonly){return[r("limel-markdown",{value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}return[r("limel-prosemirror-adapter",{"aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}renderLabel(){if(!this.label){return}return r("span",{class:"notch"},r("label",{htmlFor:this.editorId},this.label))}renderPlaceholder(){if(!this.placeholder\|\|this.value){return}return r("span",{class:"placeholder","aria-hidden":"true"},this.placeholder)}};n.style=l;export{n as limel_text_editor};
2	+ //# sourceMappingURL=p-0e292eea.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]:not([invalid='false'])) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]:not([readonly='false'])) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,88J,MC2BTC,EAAU,MAyFnBC,YAAAC,G,yCAgFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAe,IAAOC,IAC1BA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA9LQ,W,sCAqBd,M,uFA0BD,M,mCAkBC,M,iBAOE,KAY1Bb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfa,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAK2B,MAAO,CACb,M,CAGJ,OACIxB,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAOyB,QAAS5B,KAAKe,UAAWf,KAAK2B,O,CAKzCJ,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}

package/dist/lime-elements/{p-2bff59a1.entry.js → p-14c25deb.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,H as r,g as o}from"./p-443111b3.js";import{c as s}from"./p-3ccdc4a3.js";import{m as a,r as n}from"./p-869d6d77.js";import{g as l,a as h}from"./p-2f777fdb.js";function c(t){return!("separator"in t)}const d=":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)))}: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-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)}";const m=class{constructor(r){t(this,r);this.itemSelected=i(this,"itemSelected",7);this.firstRender=true;this.actionBarItems=[];this.renderActionBarItem=(t,i)=>e("limel-action-bar-item",{item:t,onSelect:this.handleSelect,isVisible:this.isVisible(i),role:"gridcell"});this.renderOverflowMenu=t=>{if(!(this.actions.length-this.overflowCutoff)){return}return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:t,onSelect:this.handleSelect,role:"gridcell"})};this.handleSelect=t=>{t.stopPropagation();if(c(t.detail)){this.itemSelected.emit(t.detail)}};this.handleIntersection=t=>{const i=t.filter((t=>t.isIntersecting));const e=t.filter((t=>!t.isIntersecting));if(this.firstRender){this.overflowCutoff=i.length}else{this.overflowCutoff=this.overflowCutoff+i.length-e.length}this.firstRender=false};this.actions=[];this.accessibleLabel=undefined;this.layout=undefined;this.openDirection=undefined;this.overflowCutoff=this.actions.length}render(){let t=[];if(this.actions.length){t=this.actions.slice(this.overflowCutoff)}return e(r,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating"},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(t))}connectedCallback(){}componentDidRender(){var t;if(this.haveItemsChanged()){(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[];this.connectedCallback=()=>this.createIntersectionObserver()}isVisible(t){return t<this.overflowCutoff}createIntersectionObserver(){const t={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.firstRender=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,t);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((t=>{this.observe(t)}))}observe(t){this.intersectionObserver.observe(t);this.actionBarItems.push(t)}haveItemsChanged(){const t=this.actionBarItems.some((t=>!this.host.shadowRoot.contains(t)));const i=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((t=>!this.actionBarItems.includes(t)));return t||i}get host(){return o(this)}};m.style=d;const b='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const u=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=s()}componentWillLoad(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){n(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled()},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=l(this.item.icon);const i=h(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return o(this)}};u.style=b;const g=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{m as limel_action_bar,u as limel_action_bar_item,g as limel_action_bar_overflow_menu};
-//# sourceMappingURL=p-2bff59a1.entry.js.map
+import{r as t,c as i,h as e,H as o,g as r}from"./p-443111b3.js";import{c as s}from"./p-3ccdc4a3.js";import{m as a,r as n}from"./p-869d6d77.js";import{g as l,a as h}from"./p-2f777fdb.js";function c(t){return!("separator"in t)}const d=":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)))}: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-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)}";const m=class{constructor(o){t(this,o);this.itemSelected=i(this,"itemSelected",7);this.firstRender=true;this.actionBarItems=[];this.renderActionBarItem=(t,i)=>e("limel-action-bar-item",{item:t,onSelect:this.handleSelect,isVisible:this.isVisible(i),role:"gridcell"});this.renderOverflowMenu=t=>{if(!(this.actions.length-this.overflowCutoff)){return}return e("limel-action-bar-overflow-menu",{openDirection:this.openDirection,items:t,onSelect:this.handleSelect,role:"gridcell"})};this.handleSelect=t=>{t.stopPropagation();if(c(t.detail)){this.itemSelected.emit(t.detail)}};this.handleIntersection=t=>{const i=t.filter((t=>t.isIntersecting));const e=t.filter((t=>!t.isIntersecting));if(this.firstRender){this.overflowCutoff=i.length}else{this.overflowCutoff=this.overflowCutoff+i.length-e.length}this.firstRender=false};this.actions=[];this.accessibleLabel=undefined;this.layout=undefined;this.openDirection=undefined;this.overflowCutoff=this.actions.length}render(){let t=[];if(this.actions.length){t=this.actions.slice(this.overflowCutoff)}return e(o,{"aria-label":this.accessibleLabel,class:{"is-full-width":this.layout==="fullWidth","is-floating":this.layout==="floating"},role:"grid"},e("div",{class:"items",role:"rowgroup"},this.actions.map(this.renderActionBarItem)),this.renderOverflowMenu(t))}connectedCallback(){}componentDidRender(){var t;if(this.haveItemsChanged()){(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.createIntersectionObserver()}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined;this.actionBarItems=[];this.connectedCallback=()=>this.createIntersectionObserver()}isVisible(t){return t<this.overflowCutoff}createIntersectionObserver(){const t={root:this.host.shadowRoot.querySelector(".items"),rootMargin:"0px",threshold:1};this.overflowCutoff=this.actions.length;this.firstRender=true;this.actionBarItems=[];this.intersectionObserver=new IntersectionObserver(this.handleIntersection,t);this.host.shadowRoot.querySelectorAll("limel-action-bar-item").forEach((t=>{this.observe(t)}))}observe(t){this.intersectionObserver.observe(t);this.actionBarItems.push(t)}haveItemsChanged(){const t=this.actionBarItems.some((t=>!this.host.shadowRoot.contains(t)));const i=Array.from(this.host.shadowRoot.querySelectorAll("limel-action-bar-item")).some((t=>!this.actionBarItems.includes(t)));return t||i}get host(){return r(this)}};m.style=d;const b='@charset "UTF-8";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}';const u=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=s()}componentWillLoad(){a(this.host)}componentDidLoad(){this.triggerIconColorWarning()}disconnectedCallback(){n(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled(),class:{"is-selected":this.isItem(this.item)&&this.item.selected}},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){const t=l(this.item.icon);const i=h(this.item.icon,this.item.iconColor);return e("limel-icon",{name:t,style:{"--action-bar-item-icon-color":`${i}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}triggerIconColorWarning(){if(this.isItem(this.item)&&this.item.iconColor){console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.")}}get host(){return r(this)}};u.style=b;const g=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{m as limel_action_bar,u as limel_action_bar_item,g as limel_action_bar_overflow_menu};
+//# sourceMappingURL=p-14c25deb.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["isItem","item","actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","selected","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem"],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem | ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/**\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*/\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\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-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","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 { isItem } from './isItem';\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\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-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 * 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 * 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n\n &.is-selected {\n &:not(:hover) {\n box-shadow: var(--button-shadow-inset);\n }\n color: var(--mdc-theme-primary) !important;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n class={{\n 'is-selected': this.isItem(this.item) && this.item.selected,\n }}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /**\n * Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"mappings":"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"}

package/dist/types/components/action-bar/action-bar.d.ts CHANGED Viewed

@@ -22,6 +22,7 @@ import { ActionBarItem } from './action-bar.types';
  *
  * @exampleComponent limel-example-action-bar
  * @exampleComponent limel-example-action-bar-overflow-menu
+ * @exampleComponent limel-example-action-bar-selected-item
  * @exampleComponent limel-example-action-bar-colors
  * @exampleComponent limel-example-action-bar-floating
  * @exampleComponent limel-example-action-bar-styling

package/dist/types/components.d.ts CHANGED Viewed

@@ -94,6 +94,7 @@ export namespace Components {
      * empower users to interact with the software and perform desired actions effortlessly.
      * @exampleComponent limel-example-action-bar
      * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-selected-item
      * @exampleComponent limel-example-action-bar-colors
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
@@ -2804,6 +2805,7 @@ declare global {
      * empower users to interact with the software and perform desired actions effortlessly.
      * @exampleComponent limel-example-action-bar
      * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-selected-item
      * @exampleComponent limel-example-action-bar-colors
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
@@ -4209,6 +4211,7 @@ declare namespace LocalJSX {
      * empower users to interact with the software and perform desired actions effortlessly.
      * @exampleComponent limel-example-action-bar
      * @exampleComponent limel-example-action-bar-overflow-menu
+     * @exampleComponent limel-example-action-bar-selected-item
      * @exampleComponent limel-example-action-bar-colors
      * @exampleComponent limel-example-action-bar-floating
      * @exampleComponent limel-example-action-bar-styling
@@ -7069,6 +7072,7 @@ declare module "@stencil/core" {
              * empower users to interact with the software and perform desired actions effortlessly.
              * @exampleComponent limel-example-action-bar
              * @exampleComponent limel-example-action-bar-overflow-menu
+             * @exampleComponent limel-example-action-bar-selected-item
              * @exampleComponent limel-example-action-bar-colors
              * @exampleComponent limel-example-action-bar-floating
              * @exampleComponent limel-example-action-bar-styling

package/package.json CHANGED Viewed

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

package/dist/lime-elements/p-2bff59a1.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["isItem","item","actionBarCss","ActionBar","this","firstRender","actionBarItems","renderActionBarItem","index","h","onSelect","handleSelect","isVisible","role","renderOverflowMenu","items","actions","length","overflowCutoff","openDirection","event","stopPropagation","detail","itemSelected","emit","handleIntersection","entries","intersectingItems","filter","entry","isIntersecting","notIntersectingItems","render","overflowActions","slice","Host","accessibleLabel","class","layout","map","connectedCallback","componentDidRender","haveItemsChanged","_a","intersectionObserver","disconnect","createIntersectionObserver","disconnectedCallback","undefined","options","root","host","shadowRoot","querySelector","rootMargin","threshold","IntersectionObserver","querySelectorAll","forEach","actionBarItem","observe","push","someItemRemoved","some","contains","someItemAdded","Array","from","includes","actionBarItemCss","ActionBarButton","constructor","hostRef","handleClick","select","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","componentDidLoad","triggerIconColorWarning","removeEnterClickable","separator","id","type","onClick","disabled","isDisabled","renderIcon","renderLabel","renderTooltip","icon","name","getIconName","color","getIconColor","iconColor","style","iconOnly","text","elementId","label","helperLabel","commandText","console","warn","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","slot","isMenuItem"],"sources":["./src/components/action-bar/isItem.ts","./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["import { ActionBarItem } from '../action-bar/action-bar.types';\nimport { ListSeparator } from '../list/list-item.types';\n\nexport function isItem(\n item: ActionBarItem | ListSeparator,\n): item is ActionBarItem {\n return !('separator' in item);\n}\n","/**\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*/\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\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-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","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 { isItem } from './isItem';\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\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\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 * 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 * 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 host: HTMLElement;\n\n @State()\n private overflowCutoff: number = this.actions.length;\n\n private intersectionObserver: IntersectionObserver;\n private firstRender = true;\n private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n public render() {\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 }}\n role=\"grid\"\n >\n <div class=\"items\" role=\"rowgroup\">\n {this.actions.map(this.renderActionBarItem)}\n </div>\n {this.renderOverflowMenu(overflowActions)}\n </Host>\n );\n }\n\n public connectedCallback() {}\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 this.connectedCallback = () => this.createIntersectionObserver();\n }\n\n private renderActionBarItem = (item: ActionBarItem, index: number) => {\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 renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n if (!(this.actions.length - this.overflowCutoff)) {\n return;\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 />\n );\n };\n\n private isVisible(index: number) {\n return index < this.overflowCutoff;\n }\n\n private 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 handleIntersection = (entries: IntersectionObserverEntry[]) => {\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.firstRender) {\n this.overflowCutoff = intersectingItems.length;\n } else {\n this.overflowCutoff =\n this.overflowCutoff +\n intersectingItems.length -\n notIntersectingItems.length;\n }\n\n this.firstRender = 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.firstRender = 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","@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n pointer-events: none;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.triggerIconColorWarning();\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n const name = getIconName(this.item.icon);\n const color = getIconColor(this.item.icon, this.item.iconColor);\n\n return (\n <limel-icon\n name={name}\n style={{\n '--action-bar-item-icon-color': `${color}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n\n private triggerIconColorWarning() {\n if (this.isItem(this.item) && this.item.iconColor) {\n /* eslint-disable-next-line no-console */\n console.warn(\n \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n /**\n * Fired when an item in the action bar overflow menu has been clicked.\n * @public\n */\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"mappings":"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"}

package/dist/lime-elements/p-4d59ddb2.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as r,H as i}from"./p-443111b3.js";import{c as o}from"./p-3ccdc4a3.js";const l='@charset "UTF-8";:host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}.lime-looks-like-input-value{line-height:1.75rem;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(var(--contrast-1400), 1);font-size:0.875rem;font-weight:400;letter-spacing:0.009375em}.mdc-text-field--disabled .lime-looks-like-input-value{cursor:not-allowed;opacity:0.4}.lime-looks-like-input-value{padding:var(--limel-text-editor-padding)}{box-sizing:border-box}:host(limel-text-editor){--limel-text-editor-padding:0.75rem 1rem;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-width:5rem;min-height:5rem;height:100%;max-height:100%}:host(limel-text-editor:not([readonly])){--limel-text-editor-outline-color:rgba(var(--contrast-700), 0.65);--limel-text-editor-background-color:rgba(var(--contrast-200), 0.5);--limel-text-editor-label-color:rgba(var(--contrast-1200), 1)}:host(limel-text-editor:hover){--limel-text-editor-outline-color:rgba(var(--contrast-700), 1)}:host(limel-text-editor:focus-within){--limel-text-editor-outline-color:var(--mdc-theme-primary)}:host(limel-text-editor[invalid]){--limel-text-editor-outline-color:var(--lime-error-text-color)}:host(limel-text-editor[readonly]){--limel-text-editor-placeholder-top:0;--limel-text-editor-outline-color:transparent}:host(limel-text-editor[readonly]) limel-markdown{display:block;padding:var(--limel-text-editor-padding)}.notched-outline{transition:bottom var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);pointer-events:none;position:absolute;inset:0;bottom:var(--limel-text-editor-notched-outline-bottom, 0);display:flex;background-color:var(--limel-text-editor-background-color)}.leading-outline,.notch,.trailing-outline{transition:border-color 0.2s ease;border-width:1px;border-style:solid;border-color:var(--limel-text-editor-outline-color)}.leading-outline{flex-shrink:0;width:0.75rem;border-right-width:0;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.notch{flex-shrink:0;position:relative;z-index:2;border-top-width:0;border-right-width:0;border-left-width:0;max-width:calc(100% - 1.5rem)}.trailing-outline{flex-grow:1;border-left-width:0;border-top-right-radius:0.25rem;border-bottom-right-radius:0.25rem}label{transform:translateY(-50%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block;padding:0 0.25rem;color:var(--limel-text-editor-label-color);font-size:0.65rem;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing, 0.009375em)}:host(limel-text-editor[required]) label::after{content:""}.placeholder{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;position:absolute;top:var(--limel-text-editor-placeholder-top, 2.25rem);left:0;right:0;padding:var(--limel-text-editor-padding);font-style:italic;font-size:0.875rem;color:rgb(var(--contrast-900))}limel-prosemirror-adapter{flex-grow:1;min-width:0;min-height:0;height:100%;overflow:hidden auto}:host(limel-text-editor:focus),:host(limel-text-editor:focus-visible),:host(limel-text-editor:focus-within),:host(limel-text-editor[invalid]:not([invalid=false])),:host(limel-text-editor[invalid=true]){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-text-editor){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-text-editor:focus) limel-helper-line,:host(limel-text-editor:focus-visible) limel-helper-line,:host(limel-text-editor:focus-within) limel-helper-line,:host(limel-text-editor:hover) limel-helper-line{will-change:grid-template-rows}:host(limel-text-editor.has-helper-text:focus-within) .notched-outline,:host(limel-text-editor.has-helper-text[invalid]) .notched-outline{--limel-text-editor-notched-outline-bottom:1rem}:host(limel-text-editor[allow-resize]) limel-prosemirror-adapter{resize:vertical}';const n=class{constructor(i){e(this,i);this.change=t(this,"change",7);this.renderHelperLine=()=>{if(!this.helperText){return}return r("limel-helper-line",{helperText:this.helperText,helperTextId:this.helperTextId,invalid:this.isInvalid()})};this.isInvalid=()=>{if(this.readonly){return false}if(this.invalid){return true}};this.handleChange=()=>e=>{e.stopPropagation();this.change.emit(e.detail)};this.contentType="markdown";this.disabled=undefined;this.readonly=false;this.helperText=undefined;this.placeholder=undefined;this.label=undefined;this.invalid=false;this.value=undefined;this.required=false;this.allowResize=true;this.helperTextId=o();this.editorId=o()}render(){return r(i,{class:{"has-helper-text":!!this.helperText}},r("span",{class:"notched-outline"},r("span",{class:"leading-outline"}),this.renderLabel(),r("span",{class:"trailing-outline"})),this.renderEditor())}renderEditor(){if(this.readonly&&!this.value){return[r("span",{class:"lime-looks-like-input-value"},"–"),this.renderHelperLine()]}if(this.readonly){return[r("limel-markdown",{value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}return[r("limel-prosemirror-adapter",{"aria-placeholder":this.placeholder,contentType:this.contentType,onChange:this.handleChange,value:this.value,"aria-controls":this.helperTextId,id:this.editorId}),this.renderPlaceholder(),this.renderHelperLine()]}renderLabel(){if(!this.label){return}return r("span",{class:"notch"},r("label",{htmlFor:this.editorId},this.label))}renderPlaceholder(){if(!this.placeholder\|\|this.value){return}return r("span",{class:"placeholder","aria-hidden":"true"},this.placeholder)}};n.style=l;export{n as limel_text_editor};
2	- //# sourceMappingURL=p-4d59ddb2.entry.js.map

package/dist/lime-elements/p-4d59ddb2.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["textEditorCss","TextEditor","constructor","hostRef","this","renderHelperLine","helperText","h","helperTextId","invalid","isInvalid","readonly","handleChange","event","stopPropagation","change","emit","detail","createRandomString","editorId","render","Host","class","renderLabel","renderEditor","value","id","renderPlaceholder","placeholder","contentType","onChange","label","htmlFor"],"sources":["./src/components/text-editor/text-editor.scss?tag=limel-text-editor&encapsulation=shadow","./src/components/text-editor/text-editor.tsx"],"sourcesContent":["@use '../../style/internal/shared_input-select-picker';\n@use '../../style/mixins.scss';\n\n@include shared_input-select-picker.lime-looks-like-input-value;\n.lime-looks-like-input-value {\n padding: var(--limel-text-editor-padding);\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host(limel-text-editor) {\n --limel-text-editor-padding: 0.75rem 1rem;\n position: relative;\n isolation: isolate;\n display: flex;\n flex-direction: column;\n\n width: 100%;\n min-width: 5rem;\n min-height: 5rem;\n height: 100%;\n max-height: 100%;\n}\n\n:host(limel-text-editor:not([readonly])) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color};\n --limel-text-editor-background-color: #{shared_input-select-picker.$background-color-normal};\n --limel-text-editor-label-color: #{shared_input-select-picker.$label-color};\n}\n\n:host(limel-text-editor:hover) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--hovered};\n}\n\n:host(limel-text-editor:focus-within) {\n --limel-text-editor-outline-color: #{shared_input-select-picker.$lime-text-field-outline-color--focused};\n}\n\n:host(limel-text-editor[invalid]) {\n --limel-text-editor-outline-color: var(--lime-error-text-color);\n}\n\n:host(limel-text-editor[readonly]) {\n --limel-text-editor-placeholder-top: 0;\n --limel-text-editor-outline-color: transparent;\n\n limel-markdown {\n display: block;\n padding: var(--limel-text-editor-padding);\n }\n}\n\n.notched-outline {\n transition: bottom\n var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n cubic-bezier(1, 0.09, 0, 0.89);\n pointer-events: none;\n position: absolute;\n inset: 0;\n bottom: var(--limel-text-editor-notched-outline-bottom, 0);\n\n display: flex;\n background-color: var(--limel-text-editor-background-color);\n}\n\n.leading-outline,\n.notch,\n.trailing-outline {\n transition: border-color 0.2s ease;\n border-width: 1px;\n border-style: solid;\n border-color: var(--limel-text-editor-outline-color);\n}\n\n.leading-outline {\n flex-shrink: 0;\n width: 0.75rem;\n border-right-width: 0;\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n}\n\n.notch {\n flex-shrink: 0;\n\n position: relative;\n z-index: 2;\n\n border-top-width: 0;\n border-right-width: 0;\n border-left-width: 0;\n\n max-width: calc(100% - 1.5rem);\n}\n\n.trailing-outline {\n flex-grow: 1;\n border-left-width: 0;\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n}\n\nlabel {\n transform: translateY(-50%);\n\n @include mixins.truncate-text;\n display: block;\n padding: 0 0.25rem;\n\n color: var(--limel-text-editor-label-color);\n font-size: 0.65rem; // `10.4px` similar to MDC's floating label\n letter-spacing: var(--mdc-typography-subtitle1-letter-spacing, 0.009375em);\n\n :host(limel-text-editor[required]) & {\n &::after {\n content: '*';\n }\n }\n}\n\n.placeholder {\n @include mixins.truncate-text;\n pointer-events: none;\n position: absolute;\n top: var(--limel-text-editor-placeholder-top, 2.25rem);\n left: 0;\n right: 0;\n\n padding: var(--limel-text-editor-padding);\n font-style: italic;\n font-size: 0.875rem;\n color: shared_input-select-picker.$input-placeholder-color;\n}\n\nlimel-prosemirror-adapter {\n flex-grow: 1;\n\n min-width: 0;\n min-height: 0;\n height: 100%;\n overflow: hidden auto;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-text-editor);\n:host(limel-text-editor.has-helper-text:focus-within),\n:host(limel-text-editor.has-helper-text[invalid]) {\n .notched-outline {\n --limel-text-editor-notched-outline-bottom: 1rem;\n }\n}\n\n:host(limel-text-editor[allow-resize]) {\n limel-prosemirror-adapter {\n resize: vertical;\n }\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { createRandomString } from 'src/util/random-string';\n/**\n * A rich text editor that offers a rich text editing experience with markdown support,\n * in the sense that you can easily type markdown syntax and see the rendered\n * result as rich text in real-time. For instance, you can type `# Hello, world!`\n * and see it directly turning to a heading 1 (an `<h1>` HTML element).\n *\n * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\n * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.\n *\n * @exampleComponent limel-example-text-editor-basic\n * @exampleComponent limel-example-text-editor-as-form-component\n * @exampleComponent limel-example-text-editor-with-markdown\n * @exampleComponent limel-example-text-editor-with-html\n * @exampleComponent limel-example-text-editor-allow-resize\n * @exampleComponent limel-example-text-editor-size\n * @exampleComponent limel-example-text-editor-composite\n * @beta\n * @private\n */\n@Component({\n tag: 'limel-text-editor',\n shadow: true,\n styleUrl: 'text-editor.scss',\n})\nexport class TextEditor implements FormComponent<string> {\n /** The type of content that the editor should handle and emit, defaults to `markdown`\n *\n * Assumed to be set only once, so not reactive to changes\n */\n @Prop()\n public contentType: 'markdown' | 'html' = 'markdown';\n\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled?: boolean;\n\n /**\n * Set to `true` to make the component read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n * :::note\n * Consider that it might be better to use `limel-markdown`\n * instead of `limel-text-editor` when the goal is visualizing data.\n * :::\n */\n @Prop({ reflect: true })\n public readonly?: boolean = false;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText?: string;\n\n /**\n * The placeholder text shown inside the input field,\n * when the field is empty.\n */\n @Prop({ reflect: true })\n public placeholder?: string;\n\n /**\n * The label of the editor\n */\n @Prop({ reflect: true })\n public label?: string;\n\n /**\n * Set to `true` to indicate that the current value of the editor is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid?: boolean = false;\n\n /**\n * Description of the text inside the editor as markdown\n */\n @Prop({ reflect: true })\n public value: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n *\n * :::important\n * An empty but required field is not automatically considered invalid.\n * You must make sure to check the validity of the field on your own,\n * and properly handle the `invalid` state.\n * :::\n */\n @Prop({ reflect: true })\n public required?: boolean = false;\n\n /**\n * Set to `true` to allow the user to vertically resize the editor.\n * Set to `false` to disable the resize functionality.\n */\n @Prop({ reflect: true })\n public allowResize: boolean = true;\n\n /**\n * Dispatched when a change is made to the editor\n */\n @Event()\n public change: EventEmitter<string>;\n\n private helperTextId: string;\n private editorId: string;\n\n public constructor() {\n this.helperTextId = createRandomString();\n this.editorId = createRandomString();\n }\n\n public render() {\n return (\n <Host\n class={{\n 'has-helper-text': !!this.helperText,\n }}\n >\n <span class=\"notched-outline\">\n <span class=\"leading-outline\" />\n {this.renderLabel()}\n <span class=\"trailing-outline\" />\n </span>\n {this.renderEditor()}\n </Host>\n );\n }\n\n private renderEditor() {\n if (this.readonly && !this.value) {\n return [\n <span class=\"lime-looks-like-input-value\">–</span>,\n this.renderHelperLine(),\n ];\n }\n\n if (this.readonly) {\n return [\n <limel-markdown\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n return [\n <limel-prosemirror-adapter\n aria-placeholder={this.placeholder}\n contentType={this.contentType}\n onChange={this.handleChange}\n value={this.value}\n aria-controls={this.helperTextId}\n id={this.editorId}\n />,\n this.renderPlaceholder(),\n this.renderHelperLine(),\n ];\n }\n\n private renderLabel() {\n if (!this.label) {\n return;\n }\n\n return (\n <span class=\"notch\">\n <label htmlFor={this.editorId}>{this.label}</label>\n </span>\n );\n }\n\n private renderPlaceholder() {\n if (!this.placeholder || this.value) {\n return;\n }\n\n return (\n <span class=\"placeholder\" aria-hidden=\"true\">\n {this.placeholder}\n </span>\n );\n }\n\n private renderHelperLine = () => {\n if (!this.helperText) {\n return;\n }\n\n return (\n <limel-helper-line\n helperText={this.helperText}\n helperTextId={this.helperTextId}\n invalid={this.isInvalid()}\n />\n );\n };\n\n private isInvalid = () => {\n if (this.readonly) {\n // A readonly field can never be invalid.\n return false;\n }\n\n if (this.invalid) {\n return true;\n }\n };\n\n private handleChange = () => (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,64J,MC2BTC,EAAU,MAyFnBC,YAAAC,G,yCAgFQC,KAAAC,iBAAmB,KACvB,IAAKD,KAAKE,WAAY,CAClB,M,CAGJ,OACIC,EAAA,qBACID,WAAYF,KAAKE,WACjBE,aAAcJ,KAAKI,aACnBC,QAASL,KAAKM,aAChB,EAIFN,KAAAM,UAAY,KAChB,GAAIN,KAAKO,SAAU,CAEf,OAAO,K,CAGX,GAAIP,KAAKK,QAAS,CACd,OAAO,I,GAIPL,KAAAQ,aAAe,IAAOC,IAC1BA,EAAMC,kBACNV,KAAKW,OAAOC,KAAKH,EAAMI,OAAO,E,iBA9LQ,W,sCAqBd,M,uFA0BD,M,mCAkBC,M,iBAOE,KAY1Bb,KAAKI,aAAeU,IACpBd,KAAKe,SAAWD,G,CAGbE,SACH,OACIb,EAACc,EAAI,CACDC,MAAO,CACH,oBAAqBlB,KAAKE,aAG9BC,EAAA,QAAMe,MAAM,mBACRf,EAAA,QAAMe,MAAM,oBACXlB,KAAKmB,cACNhB,EAAA,QAAMe,MAAM,sBAEflB,KAAKoB,e,CAKVA,eACJ,GAAIpB,KAAKO,WAAaP,KAAKqB,MAAO,CAC9B,MAAO,CACHlB,EAAA,QAAMe,MAAM,+BAA6B,KACzClB,KAAKC,mB,CAIb,GAAID,KAAKO,SAAU,CACf,MAAO,CACHJ,EAAA,kBACIkB,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAIb,MAAO,CACHE,EAAA,gDACsBH,KAAKwB,YACvBC,YAAazB,KAAKyB,YAClBC,SAAU1B,KAAKQ,aACfa,MAAOrB,KAAKqB,MAAK,gBACFrB,KAAKI,aACpBkB,GAAItB,KAAKe,WAEbf,KAAKuB,oBACLvB,KAAKC,mB,CAILkB,cACJ,IAAKnB,KAAK2B,MAAO,CACb,M,CAGJ,OACIxB,EAAA,QAAMe,MAAM,SACRf,EAAA,SAAOyB,QAAS5B,KAAKe,UAAWf,KAAK2B,O,CAKzCJ,oBACJ,IAAKvB,KAAKwB,aAAexB,KAAKqB,MAAO,CACjC,M,CAGJ,OACIlB,EAAA,QAAMe,MAAM,cAAa,cAAa,QACjClB,KAAKwB,Y"}