npm - @limetech/lime-elements - Versions diffs - 37.40.0 → 37.40.1 - Mend

@limetech/lime-elements 37.40.0 → 37.40.1

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

Files changed (13) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,11 @@
+## [37.40.1](https://github.com/Lundalogik/lime-elements/compare/v37.40.0...v37.40.1) (2024-05-20)
+### Performance Improvements
+* **dock:** avoid re-creating observer whenever menu is opened ([1495948](https://github.com/Lundalogik/lime-elements/commit/149594822df8e5cefb7844a2613592a2c582203c))
 ## [37.40.0](https://github.com/Lundalogik/lime-elements/compare/v37.39.1...v37.40.0) (2024-05-20)

package/dist/cjs/limel-dock-button.cjs.entry.js CHANGED Viewed

@@ -34,8 +34,15 @@ const DockButton = class {
       event.stopPropagation();
       this.itemSelected.emit(this.item);
     };
-    this.focusCustomComponentElement = () => {
+    this.focusCustomComponentElement = (entries) => {
       var _a, _b, _c;
+      const entry = entries.find((e) => e.target === this.customComponentElement);
+      if (!entry) {
+        return;
+      }
+      if (!entry.isIntersecting) {
+        return;
+      }
       if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
@@ -63,8 +70,15 @@ const DockButton = class {
     if (!this.isOpen) {
       return;
     }
-    const observer = new IntersectionObserver(this.focusCustomComponentElement);
-    observer.observe(this.customComponentElement);
+    if (!this.intersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
+      this.intersectionObserver.observe(this.customComponentElement);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = undefined;
   }
   renderPopover() {
     var _a;

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

	@@ -1 +1 @@
1	- {"file":"limel-dock-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,mpEAAmpE;;MCoB5pE,UAAU;EAgDnB;;;;;IAoEQ,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC/B,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC;OAClD;KACJ,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC;IAEM,8BAAyB,GAAG,CAAC,OAAoB;MACrD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;KACzC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC,CAAC;IAuCM,gCAA2B,GAAG;;MAClC,IAAI,MAAA,MAAA,IAAI,CAAC,sBAAsB,0CAAE,UAAU,0CAAE,cAAc,EAAE;QACzD,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;OACxC;KACJ,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,IAAI,CAAC,eAAe,EAAE;QACtB,OAAO,KAAK,CAAC;OAChB;MAED,OAAO,OAAO,CAAC;KAClB,CAAC;;oBAnLiB,KAAK;2BAOE,KAAK;kBAkBd,KAAK;IAYlB,IAAI,CAAC,SAAS,GAAGC,+BAAkB,EAAE,CAAC;GACzC;EAEM,MAAM;;IACT,IAAI,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,aAAa,EAAE;MACpC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC9C;EAGS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,IAAI,CAAC,2BAA2B,CACnC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACjD;EAEO,aAAa;;IACjB,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,aAAa,CAAC;IAE1D,QACID,2BACI,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,aAAa,EAC3D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChD,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC/CA,QAAC,eAAe,kBACZ,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,KACnC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC9B,CACU,EAClB;GACL;EAEO,YAAY,CAChB,WAAwC,EACxC,IAAa;;IAEb,QACIA,oBACI,IAAI,EAAE,IAAI,EACV,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACH,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;OAChC,EACD,OAAO,EAAE,WAAW,eACV,QAAQ,IAEjB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,kBAAkB,EAAE,CACrB,EACX;GACL;EA4BO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAOA,wBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG,CAAC;GAC5D;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAOA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;KACtD;GACJ;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACnC,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAClC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAC5B,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;GACJ;;;;;;;;;","names":["h","createRandomString"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"version":3}
1	+ {"file":"limel-dock-button.entry.cjs.js","mappings":"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","names":["h","createRandomString"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n private intersectionObserver?: IntersectionObserver;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n if (!this.intersectionObserver) {\n this.intersectionObserver = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n this.intersectionObserver.observe(this.customComponentElement);\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = (\n entries: IntersectionObserverEntry[],\n ) => {\n const entry = entries.find(\n (e) => e.target === this.customComponentElement,\n );\n if (!entry) {\n return;\n }\n\n if (!entry.isIntersecting) {\n return;\n }\n\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"version":3}

package/dist/collection/components/dock/dock-button/dock-button.js CHANGED Viewed

@@ -26,8 +26,15 @@ export class DockButton {
       event.stopPropagation();
       this.itemSelected.emit(this.item);
     };
-    this.focusCustomComponentElement = () => {
+    this.focusCustomComponentElement = (entries) => {
       var _a, _b, _c;
+      const entry = entries.find((e) => e.target === this.customComponentElement);
+      if (!entry) {
+        return;
+      }
+      if (!entry.isIntersecting) {
+        return;
+      }
       if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
@@ -55,8 +62,15 @@ export class DockButton {
     if (!this.isOpen) {
       return;
     }
-    const observer = new IntersectionObserver(this.focusCustomComponentElement);
-    observer.observe(this.customComponentElement);
+    if (!this.intersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
+      this.intersectionObserver.observe(this.customComponentElement);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = undefined;
   }
   renderPopover() {
     var _a;

package/dist/collection/components/dock/dock-button/dock-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dock-button.js","sourceRoot":"","sources":["../../../../src/components/dock/dock-button/dock-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"]}
1	+ {"version":3,"file":"dock-button.js","sourceRoot":"","sources":["../../../../src/components/dock/dock-button/dock-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n private intersectionObserver?: IntersectionObserver;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n if (!this.intersectionObserver) {\n this.intersectionObserver = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n this.intersectionObserver.observe(this.customComponentElement);\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = (\n entries: IntersectionObserverEntry[],\n ) => {\n const entry = entries.find(\n (e) => e.target === this.customComponentElement,\n );\n if (!entry) {\n return;\n }\n\n if (!entry.isIntersecting) {\n return;\n }\n\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"]}

package/dist/esm/limel-dock-button.entry.js CHANGED Viewed

@@ -30,8 +30,15 @@ const DockButton = class {
       event.stopPropagation();
       this.itemSelected.emit(this.item);
     };
-    this.focusCustomComponentElement = () => {
+    this.focusCustomComponentElement = (entries) => {
       var _a, _b, _c;
+      const entry = entries.find((e) => e.target === this.customComponentElement);
+      if (!entry) {
+        return;
+      }
+      if (!entry.isIntersecting) {
+        return;
+      }
       if ((_b = (_a = this.customComponentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.delegatesFocus) {
         (_c = this.customComponentElement) === null || _c === void 0 ? void 0 : _c.focus();
       }
@@ -59,8 +66,15 @@ const DockButton = class {
     if (!this.isOpen) {
       return;
     }
-    const observer = new IntersectionObserver(this.focusCustomComponentElement);
-    observer.observe(this.customComponentElement);
+    if (!this.intersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver(this.focusCustomComponentElement);
+      this.intersectionObserver.observe(this.customComponentElement);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver = undefined;
   }
   renderPopover() {
     var _a;

package/dist/esm/limel-dock-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-dock-button.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,mpEAAmpE;;MCoB5pE,UAAU;EAgDnB;;;;;IAoEQ,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;QAC/B,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAI,CAAC;OAClD;KACJ,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC;IAEM,8BAAyB,GAAG,CAAC,OAAoB;MACrD,IAAI,CAAC,sBAAsB,GAAG,OAAO,CAAC;KACzC,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;MACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;KACrB,CAAC;IAEM,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrC,CAAC;IAuCM,gCAA2B,GAAG;;MAClC,IAAI,MAAA,MAAA,IAAI,CAAC,sBAAsB,0CAAE,UAAU,0CAAE,cAAc,EAAE;QACzD,MAAA,IAAI,CAAC,sBAAsB,0CAAE,KAAK,EAAE,CAAC;OACxC;KACJ,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,IAAI,CAAC,eAAe,EAAE;QACtB,OAAO,KAAK,CAAC;OAChB;MAED,OAAO,OAAO,CAAC;KAClB,CAAC;;oBAnLiB,KAAK;2BAOE,KAAK;kBAkBd,KAAK;IAYlB,IAAI,CAAC,SAAS,GAAG,kBAAkB,EAAE,CAAC;GACzC;EAEM,MAAM;;IACT,IAAI,MAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,0CAAE,aAAa,EAAE;MACpC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAC9C;EAGS,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,IAAI,CAAC,2BAA2B,CACnC,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;GACjD;EAEO,aAAa;;IACjB,MAAM,eAAe,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ,CAAC,aAAa,CAAC;IAE1D,QACI,qBACI,aAAa,EAAE,IAAI,CAAC,eAAe,GAAG,KAAK,GAAG,aAAa,EAC3D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChD,OAAO,EAAE,IAAI,CAAC,cAAc,IAE3B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC/C,EAAC,eAAe,kBACZ,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAC9B,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,KACnC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC9B,CACU,EAClB;GACL;EAEO,YAAY,CAChB,WAAwC,EACxC,IAAa;;IAEb,QACI,cACI,IAAI,EAAE,IAAI,EACV,QAAQ,EAAC,GAAG,EACZ,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACH,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,QAAQ;OAChC,EACD,OAAO,EAAE,WAAW,eACV,QAAQ,IAEjB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,kBAAkB,EAAE,CACrB,EACX;GACL;EA4BO,UAAU;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjB,OAAO;KACV;IAED,OAAO,kBAAY,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,MAAM,GAAG,CAAC;GAC5D;EAEO,WAAW;IACf,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAQ,CAAC;KACtD;GACJ;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACnC,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,EACtB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAClC,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,QACI,qBACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,EAC5B,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE,GACxC,EACJ;KACL;GACJ;;;;;;;;;","names":[],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"version":3}
1	+ {"file":"limel-dock-button.entry.js","mappings":"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","names":[],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /\n Item that is placed in the dock.\n /\n @Prop()\n public item!: DockItem;\n\n /\n When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public expanded? = false;\n\n /\n When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n /\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /\n Fired when a dock item has been selected from the dock.\n /\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /\n Fired when a dock menu is opened.\n /\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /\n Indicated whether the popover that renders a component is open.\n /\n @State()\n private isOpen = false;\n\n /\n Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n private intersectionObserver?: IntersectionObserver;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n if (!this.intersectionObserver) {\n this.intersectionObserver = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n this.intersectionObserver.observe(this.customComponentElement);\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen \|\| this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props \|\| {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = (\n entries: IntersectionObserverEntry[],\n ) => {\n const entry = entries.find(\n (e) => e.target === this.customComponentElement,\n );\n if (!entry) {\n return;\n }\n\n if (!entry.isIntersecting) {\n return;\n }\n\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\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-6886036e",[[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-e9f943ac",[[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-4dfeeaf0",[[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-6886036e",[[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-e9f943ac",[[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-1367c295",[[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-4dfeeaf0",[[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-5983b027.entry.js → p-1367c295.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as o}from"./p-443111b3.js";import{c as i}from"./p-3ccdc4a3.js";const r='@charset "UTF-8";.button{all:unset;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}.button.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}';const s=class{constructor(r){t(this,r);this.itemSelected=e(this,"itemSelected",7);this.menuOpen=e(this,"menuOpen",7);this.close=e(this,"close",7);this.renderNotification=()=>{if(this.item.badge!==undefined){return o("limel-badge",{label:this.item.badge})}};this.openPopover=t=>{t.stopPropagation();this.isOpen=true;this.menuOpen.emit(this.item)};this.setCustomComponentElement=t=>{this.customComponentElement=t};this.onPopoverClose=()=>{this.isOpen=false;this.close.emit()};this.handleClick=t=>{t.stopPropagation();this.itemSelected.emit(this.item)};this.focusCustomComponentElement=()=>{var t,e,o;if((e=(t=this.customComponentElement)===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.delegatesFocus){(o=this.customComponentElement)===null||o===void 0?void 0:o.focus()}};this.getOpenDirection=()=>{if(this.useMobileLayout){return"top"}return"right"};this.item=undefined;this.expanded=false;this.useMobileLayout=false;this.isOpen=false;this.tooltipId=i()}render(){var t,e;if((e=(t=this.item)===null||t===void 0?void 0:t.dockMenu)===null||e===void 0?void 0:e.componentName){return this.renderPopover()}return this.renderButton(this.handleClick)}openWatcher(){if(!this.isOpen){return}const t=new IntersectionObserver(this.focusCustomComponentElement);t.observe(this.customComponentElement)}renderPopover(){var t;const e=(t=this.item)===null||t===void 0?void 0:t.dockMenu.componentName;return o("limel-popover",{openDirection:this.useMobileLayout?"top":"right-start",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),o(e,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,e){var i;return o("button",{slot:e,tabindex:"0",id:this.tooltipId,type:"button",class:{button:true,selected:(i=this.item)===null||i===void 0?void 0:i.selected},onClick:t,"aria-live":"polite"},this.renderIcon(),this.renderLabel(),this.renderTooltip(),this.renderNotification())}renderIcon(){if(!this.item.icon){return}return o("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){if(this.expanded){return o("span",{class:"text"},this.item.label)}}renderTooltip(){if(!this.expanded&&this.item.label){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel,openDirection:this.getOpenDirection()})}if(this.expanded&&this.item.helperLabel){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel,openDirection:this.getOpenDirection()})}}static get watchers(){return{isOpen:["openWatcher"]}}};s.style=r;export{s as limel_dock_button};
-//# sourceMappingURL=p-5983b027.entry.js.map
+import{r as t,c as e,h as o}from"./p-443111b3.js";import{c as i}from"./p-3ccdc4a3.js";const r='@charset "UTF-8";.button{all:unset;isolation:isolate;position:relative;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-dock-item-text-color);background-color:var(--dock-background-color);box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:0.875rem;padding:0 0.5rem;min-width:var(--dock-item-height)}.button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}.button:active{background-color:var(--mdc-theme-surface);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}.button:focus{outline:none}.button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button:hover{z-index:1}.button.selected{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}.button.selected:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}.button.selected .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}.button.selected .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}';const s=class{constructor(r){t(this,r);this.itemSelected=e(this,"itemSelected",7);this.menuOpen=e(this,"menuOpen",7);this.close=e(this,"close",7);this.renderNotification=()=>{if(this.item.badge!==undefined){return o("limel-badge",{label:this.item.badge})}};this.openPopover=t=>{t.stopPropagation();this.isOpen=true;this.menuOpen.emit(this.item)};this.setCustomComponentElement=t=>{this.customComponentElement=t};this.onPopoverClose=()=>{this.isOpen=false;this.close.emit()};this.handleClick=t=>{t.stopPropagation();this.itemSelected.emit(this.item)};this.focusCustomComponentElement=t=>{var e,o,i;const r=t.find((t=>t.target===this.customComponentElement));if(!r){return}if(!r.isIntersecting){return}if((o=(e=this.customComponentElement)===null||e===void 0?void 0:e.shadowRoot)===null||o===void 0?void 0:o.delegatesFocus){(i=this.customComponentElement)===null||i===void 0?void 0:i.focus()}};this.getOpenDirection=()=>{if(this.useMobileLayout){return"top"}return"right"};this.item=undefined;this.expanded=false;this.useMobileLayout=false;this.isOpen=false;this.tooltipId=i()}render(){var t,e;if((e=(t=this.item)===null||t===void 0?void 0:t.dockMenu)===null||e===void 0?void 0:e.componentName){return this.renderPopover()}return this.renderButton(this.handleClick)}openWatcher(){if(!this.isOpen){return}if(!this.intersectionObserver){this.intersectionObserver=new IntersectionObserver(this.focusCustomComponentElement);this.intersectionObserver.observe(this.customComponentElement)}}disconnectedCallback(){var t;(t=this.intersectionObserver)===null||t===void 0?void 0:t.disconnect();this.intersectionObserver=undefined}renderPopover(){var t;const e=(t=this.item)===null||t===void 0?void 0:t.dockMenu.componentName;return o("limel-popover",{openDirection:this.useMobileLayout?"top":"right-start",open:this.isOpen||this.item.dockMenu.menuOpen,onClose:this.onPopoverClose},this.renderButton(this.openPopover,"trigger"),o(e,Object.assign({ref:this.setCustomComponentElement},this.item.dockMenu.props||{},{onClose:this.onPopoverClose})))}renderButton(t,e){var i;return o("button",{slot:e,tabindex:"0",id:this.tooltipId,type:"button",class:{button:true,selected:(i=this.item)===null||i===void 0?void 0:i.selected},onClick:t,"aria-live":"polite"},this.renderIcon(),this.renderLabel(),this.renderTooltip(),this.renderNotification())}renderIcon(){if(!this.item.icon){return}return o("limel-icon",{name:this.item.icon,class:"icon"})}renderLabel(){if(this.expanded){return o("span",{class:"text"},this.item.label)}}renderTooltip(){if(!this.expanded&&this.item.label){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.label,helperLabel:this.item.helperLabel,openDirection:this.getOpenDirection()})}if(this.expanded&&this.item.helperLabel){return o("limel-tooltip",{elementId:this.tooltipId,label:this.item.helperLabel,openDirection:this.getOpenDirection()})}}static get watchers(){return{isOpen:["openWatcher"]}}};s.style=r;export{s as limel_dock_button};
+//# sourceMappingURL=p-1367c295.entry.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"names":["dockButtonCss","DockButton","constructor","hostRef","this","renderNotification","item","badge","undefined","h","label","openPopover","event","stopPropagation","isOpen","menuOpen","emit","setCustomComponentElement","element","customComponentElement","onPopoverClose","close","handleClick","itemSelected","focusCustomComponentElement","entries","entry","find","e","target","isIntersecting","_b","_a","shadowRoot","delegatesFocus","_c","focus","getOpenDirection","useMobileLayout","tooltipId","createRandomString","render","dockMenu","componentName","renderPopover","renderButton","openWatcher","intersectionObserver","IntersectionObserver","observe","disconnectedCallback","disconnect","CustomComponent","openDirection","open","onClose","Object","assign","ref","props","slot","tabindex","id","type","class","button","selected","onClick","renderIcon","renderLabel","renderTooltip","icon","name","expanded","elementId","helperLabel"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /**\n * Item that is placed in the dock.\n */\n @Prop()\n public item!: DockItem;\n\n /**\n * When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n */\n @Prop({ reflect: true })\n public expanded? = false;\n\n /**\n * When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n */\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /**\n * Fired when a dock item has been selected from the dock.\n */\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /**\n * Fired when a dock menu is opened.\n */\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /**\n * Indicated whether the popover that renders a component is open.\n */\n @State()\n private isOpen = false;\n\n /**\n * Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n private intersectionObserver?: IntersectionObserver;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n if (!this.intersectionObserver) {\n this.intersectionObserver = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n this.intersectionObserver.observe(this.customComponentElement);\n }\n }\n\n public disconnectedCallback() {\n this.intersectionObserver?.disconnect();\n this.intersectionObserver = undefined;\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen || this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props || {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = (\n entries: IntersectionObserverEntry[],\n ) => {\n const entry = entries.find(\n (e) => e.target === this.customComponentElement,\n );\n if (!entry) {\n return;\n }\n\n if (!entry.isIntersecting) {\n return;\n }\n\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"mappings":"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"}

package/dist/types/components/dock/dock-button/dock-button.d.ts CHANGED Viewed

@@ -36,9 +36,11 @@ export declare class DockButton {
   close: EventEmitter<void>;
   private tooltipId;
   private customComponentElement;
+  private intersectionObserver?;
   constructor();
   render(): any;
   protected openWatcher(): void;
+  disconnectedCallback(): void;
   private renderPopover;
   private renderButton;
   private renderNotification;

package/package.json CHANGED Viewed

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

package/dist/lime-elements/p-5983b027.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["dockButtonCss","DockButton","constructor","hostRef","this","renderNotification","item","badge","undefined","h","label","openPopover","event","stopPropagation","isOpen","menuOpen","emit","setCustomComponentElement","element","customComponentElement","onPopoverClose","close","handleClick","itemSelected","focusCustomComponentElement","_b","_a","shadowRoot","delegatesFocus","_c","focus","getOpenDirection","useMobileLayout","tooltipId","createRandomString","render","dockMenu","componentName","renderPopover","renderButton","openWatcher","observer","IntersectionObserver","observe","CustomComponent","openDirection","open","onClose","Object","assign","ref","props","slot","tabindex","id","type","class","button","selected","onClick","renderIcon","renderLabel","renderTooltip","icon","name","expanded","elementId","helperLabel"],"sources":["./src/components/dock/dock-button/dock-button.scss?tag=limel-dock-button","./src/components/dock/dock-button/dock-button.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n@use '../../../style/internal/variables';\n\n.button {\n all: unset;\n isolation: isolate;\n position: relative;\n\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-dock-item-text-color),\n $background-color: var(--dock-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n\n width: 100%;\n height: var(--dock-item-height);\n\n border-radius: functions.pxToRem(6);\n font-size: functions.pxToRem(14);\n padding: 0 0.5rem;\n min-width: var(--dock-item-height);\n\n &:hover {\n z-index: 1;\n }\n\n &.selected {\n color: var(--limel-dock-item-text-color--selected);\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n\n box-shadow: var(--button-shadow-inset);\n\n &:focus-visible {\n box-shadow: var(--button-shadow-inset),\n var(--shadow-depth-8-focused);\n }\n\n .icon {\n color: var(--limel-dock-item-text--selected);\n }\n }\n}\n\nlimel-popover {\n // makes buttons that are wrapped in a popover become fullwidth\n display: grid;\n grid-template-columns: 100%;\n\n button[slot='trigger'][aria-expanded='true'] {\n box-shadow: var(--button-shadow-inset);\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding-left: 0.5rem;\n padding-right: 0.75rem;\n}\n\n.icon {\n flex-shrink: 0;\n width: calc(var(--dock-item-height) - 1rem);\n height: calc(var(--dock-item-height) - 1rem);\n color: var(--dock-item-icon-color, var(--limel-dock-item-text-color));\n}\n\nlimel-badge {\n position: absolute;\n top: -0.125rem;\n right: -0.125rem;\n}\n\n// 👇 Below is a hidden and private hack\n// only for usage in Lime CRM components.\n// It enables our customers to override\n// the default Home icon, using an external URL\n// or an SVG code.\n.icon {\n position: relative;\n\n &:before {\n text-align: center;\n pointer-events: none;\n position: absolute;\n inset: 0;\n background: {\n color: var(--dock-background-color, rgb(var(--contrast-100)));\n position: center;\n repeat: no-repeat;\n size: contain;\n image: var(--limel-custom-home-icon);\n }\n // Since `content` defaults to `undefined`\n // no pseudo element will be rendered, unless\n // the consumer defines something.\n content: var(--limel-custom-home-icon-enabler);\n\n .button.selected & {\n background-color: var(\n --dock-item-background-color--selected,\n rgb(var(--contrast-200))\n );\n }\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { DockItem } from '../dock.types';\nimport { createRandomString } from '../../../util/random-string';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-dock-button',\n shadow: false,\n styleUrl: 'dock-button.scss',\n})\nexport class DockButton {\n /**\n * Item that is placed in the dock.\n */\n @Prop()\n public item!: DockItem;\n\n /**\n * When the dock is expanded or collapsed, dock items\n * show labels and tooltips as suitable for the layout.\n */\n @Prop({ reflect: true })\n public expanded? = false;\n\n /**\n * When dock is using mobile layout, dock items\n * show labels and tooltips as suitable for the layout.\n */\n @Prop({ reflect: true })\n public useMobileLayout? = false;\n\n /**\n * Fired when a dock item has been selected from the dock.\n */\n @Event()\n public itemSelected: EventEmitter<DockItem>;\n\n /**\n * Fired when a dock menu is opened.\n */\n @Event()\n public menuOpen: EventEmitter<DockItem>;\n\n /**\n * Indicated whether the popover that renders a component is open.\n */\n @State()\n private isOpen = false;\n\n /**\n * Fired when the popover is closed.\n */\n @Event()\n public close: EventEmitter<void>;\n\n private tooltipId: string;\n private customComponentElement: HTMLElement;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public render() {\n if (this.item?.dockMenu?.componentName) {\n return this.renderPopover();\n }\n\n return this.renderButton(this.handleClick);\n }\n\n @Watch('isOpen')\n protected openWatcher() {\n if (!this.isOpen) {\n return;\n }\n\n const observer = new IntersectionObserver(\n this.focusCustomComponentElement,\n );\n observer.observe(this.customComponentElement);\n }\n\n private renderPopover() {\n const CustomComponent = this.item?.dockMenu.componentName;\n\n return (\n <limel-popover\n openDirection={this.useMobileLayout ? 'top' : 'right-start'}\n open={this.isOpen || this.item.dockMenu.menuOpen}\n onClose={this.onPopoverClose}\n >\n {this.renderButton(this.openPopover, 'trigger')}\n <CustomComponent\n ref={this.setCustomComponentElement}\n {...(this.item.dockMenu.props || {})}\n onClose={this.onPopoverClose}\n />\n </limel-popover>\n );\n }\n\n private renderButton(\n handleClick: (event: MouseEvent) => void,\n slot?: string,\n ) {\n return (\n <button\n slot={slot}\n tabindex=\"0\"\n id={this.tooltipId}\n type=\"button\"\n class={{\n button: true,\n selected: this.item?.selected,\n }}\n onClick={handleClick}\n aria-live=\"polite\"\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n {this.renderNotification()}\n </button>\n );\n }\n\n private renderNotification = () => {\n if (this.item.badge !== undefined) {\n return <limel-badge label={this.item.badge} />;\n }\n };\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n this.menuOpen.emit(this.item);\n };\n\n private setCustomComponentElement = (element: HTMLElement) => {\n this.customComponentElement = element;\n };\n\n private onPopoverClose = () => {\n this.isOpen = false;\n this.close.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.itemSelected.emit(this.item);\n };\n\n private renderIcon() {\n if (!this.item.icon) {\n return;\n }\n\n return <limel-icon name={this.item.icon} class=\"icon\" />;\n }\n\n private renderLabel() {\n if (this.expanded) {\n return <span class=\"text\">{this.item.label}</span>;\n }\n }\n\n private renderTooltip() {\n if (!this.expanded && this.item.label) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.label}\n helperLabel={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n\n if (this.expanded && this.item.helperLabel) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.helperLabel}\n openDirection={this.getOpenDirection()}\n />\n );\n }\n }\n\n private focusCustomComponentElement = () => {\n if (this.customComponentElement?.shadowRoot?.delegatesFocus) {\n this.customComponentElement?.focus();\n }\n };\n\n private getOpenDirection = () => {\n if (this.useMobileLayout) {\n return 'top';\n }\n\n return 'right';\n };\n}\n"],"mappings":"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"}