@limetech/lime-elements 37.1.0-next.19 → 37.1.0-next.20
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.
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +1 -0
- package/dist/esm/limel-action-bar-item_2.entry.js +1 -1
- package/dist/esm/limel-action-bar-item_2.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-db30704e.entry.js +2 -0
- package/dist/lime-elements/p-db30704e.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-a3f31667.entry.js +0 -2
- package/dist/lime-elements/p-a3f31667.entry.js.map +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-38eb64b5.js');
|
|
|
6
6
|
const randomString = require('./random-string-c8445652.js');
|
|
7
7
|
const makeEnterClickable = require('./make-enter-clickable-59460fd6.js');
|
|
8
8
|
|
|
9
|
-
const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
|
|
9
|
+
const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
|
|
10
10
|
|
|
11
11
|
const ActionBarButton = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,qnEAAqnE;;MCwBjoE,eAAe;EA4BxB;;;IA+BQ,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B,CAAC;;qBA5C0B,IAAI;IAW5B,IAAI,CAAC,SAAS,GAAGA,+BAAkB,EAAE,CAAC;GACzC;EAEM,iBAAiB;IACpBC,qCAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjC;EAEM,oBAAoB;IACvBC,uCAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACnC;EAEM,MAAM;IACT,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MAChD,OAAOC,iBAAK,IAAI,EAAC,WAAW,GAAG,CAAC;KACnC;IAED,QACIA,oBACI,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,IAE1B,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,aAAa,EAAE,CAChB,EACX;GACL;EAOO,MAAM,CAAC,IAAmC;IAC9C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC9C,OAAO,IAAI,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO,IAAI,CAAC;KACf;GACJ;EAEO,UAAU;IACd,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3C,OAAO;KACV;IAED,IAAI,MAAM,IAAI,IAAI,CAAC,IAAI,EAAE;MACrB,QACIA,wBACI,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACpB,KAAK,EAAE;UACH,8BAA8B,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;SAC3D,GACH,EACJ;KACL;GACJ;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC/C,OAAO;KACV;IAED,OAAOA,kBAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAAC;GACrD;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;MACzB,OAAO;KACV;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MAChB,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EACrB,WAAW,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GACpC,EACJ;KACL;IAED,IAAI,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACvB,QACIA,2BACI,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,GAC9B,EACJ;KACL;GACJ;;;;;MCtIQ,qBAAqB;;;;IAgCtB,yBAAoB,GAAG;MAC3B,OAAO,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACvC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAqC;MACzD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC,CAAC;;yBAxBoC,YAAY;;EAK3C,MAAM;IACT,OAAO;MACHA,wBACI,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,IAE3BA,oBAAQ,IAAI,EAAC,SAAS,IAAE,IAAI,CAAC,oBAAoB,EAAE,CAAU,CACpD;KAChB,CAAC;GACL;EAWD,IAAY,iBAAiB;IACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;GACpE;EAEO,UAAU,CAAC,IAA8B;IAC7C,OAAO,EAAE,WAAW,IAAI,IAAI,CAAC,CAAC;GACjC;;;;;;","names":["createRandomString","makeEnterClickable","removeEnterClickable","h"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.cjs.js","mappings":"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","names":["createRandomString","makeEnterClickable","removeEnterClickable","h"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
|
|
@@ -33,6 +33,7 @@ button {
|
|
|
33
33
|
min-width: var(--action-bar-item-height);
|
|
34
34
|
max-width: var(--action-bar-item-max-width, 10rem);
|
|
35
35
|
height: var(--action-bar-item-height);
|
|
36
|
+
color: var(--limel-action-bar-item-text-color);
|
|
36
37
|
border-radius: var(--action-bar-item-height);
|
|
37
38
|
font-size: 0.875rem;
|
|
38
39
|
padding: 0 0.25rem;
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
|
|
|
2
2
|
import { c as createRandomString } from './random-string-812b1c35.js';
|
|
3
3
|
import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-0473e94a.js';
|
|
4
4
|
|
|
5
|
-
const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
|
|
5
|
+
const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
|
|
6
6
|
|
|
7
7
|
const ActionBarButton = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-4607900f",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-0edcca0b",[[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-d419c102",[[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],value:[8],searcher:[8],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-5afea754",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-add09e7d",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[520],format:[513],language:[520],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-6762616d",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-b9698f79",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[8],options:[16],multiple:[4],menuOpen:[32]}]]],["p-cf61ac34",[[1,"limel-file",{value:[8],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[8],isDraggingOverDropZone:[32]}]]],["p-b70f517e",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[8],progress:[16]}]]],["p-550cae4a",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[8],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-8f08ca13",[[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-addb4c84",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-9f5250a0",[[1,"limel-dialog",{heading:[8],fullscreen:[516],open:[1540],closingActions:[520,"closing-actions"]}]]],["p-4fc7e0df",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-af374a0c",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[8]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-9a5745e5",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[8]}]]],["p-f1b0951f",[[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-88e4eba7",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-94cb40fb",[[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-dd14b927",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[520],justify:[520],align:[520],reverse:[516]}]]],["p-228d9bef",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-e0a0065f",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95769bf5",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-0d823554",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-95ed1b9b",[[1,"limel-badge",{label:[520]}]]],["p-bc23beb6",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c6f8ea40",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-455edb30",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-1bdc524d",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-7972528a",[[1,"limel-flatpickr-adapter",{value:[16],type:[8],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[8],formatter:[16]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-3075aa67.js";export{s as setNonce}from"./p-3075aa67.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([["p-4607900f",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-b714596f",[[1,"limel-action-bar",{actions:[16],accessibleLabel:[513,"accessible-label"],layout:[513],openDirection:[513,"open-direction"],overflowCutoff:[32]}]]],["p-0edcca0b",[[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-d419c102",[[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],value:[8],searcher:[8],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-5afea754",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-add09e7d",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[520],format:[513],language:[520],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-6762616d",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-b9698f79",[[1,"limel-select",{disabled:[516],readonly:[516],invalid:[516],required:[516],label:[513],helperText:[513,"helper-text"],value:[8],options:[16],multiple:[4],menuOpen:[32]}]]],["p-cf61ac34",[[1,"limel-file",{value:[8],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[8],isDraggingOverDropZone:[32]}]]],["p-b70f517e",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[8],progress:[16]}]]],["p-550cae4a",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[8],show:[64]}]]],["p-095e03af",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-8f08ca13",[[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-addb4c84",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-9f5250a0",[[1,"limel-dialog",{heading:[8],fullscreen:[516],open:[1540],closingActions:[520,"closing-actions"]}]]],["p-4fc7e0df",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-af374a0c",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[8]}]]],["p-5fb4402e",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-9a5745e5",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[8]}]]],["p-f1b0951f",[[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-88e4eba7",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],helperText:[513,"helper-text"],fieldId:[32]}]]],["p-94cb40fb",[[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-dd14b927",[[1,"limel-config",{config:[16]}]]],["p-bd62071d",[[1,"limel-flex-container",{direction:[520],justify:[520],align:[520],reverse:[516]}]]],["p-228d9bef",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-4a04ede1",[[1,"limel-grid"]]],["p-e0a0065f",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-95769bf5",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-0d823554",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-95ed1b9b",[[1,"limel-badge",{label:[520]}]]],["p-bc23beb6",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-c6f8ea40",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-455edb30",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-1bdc524d",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-7972528a",[[1,"limel-flatpickr-adapter",{value:[16],type:[8],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[8],formatter:[16]}]]],["p-db30704e",[[0,"limel-action-bar-overflow-menu",{items:[16],openDirection:[513,"open-direction"]}],[0,"limel-action-bar-item",{item:[16],isVisible:[516,"is-visible"]}]]],["p-32127a17",[[1,"limel-chip-set",{value:[16],type:[513],label:[513],helperText:[513,"helper-text"],disabled:[516],readonly:[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:[8],editMode:[32],textValue:[32],blurred:[32],inputChipIndexSelected:[32],getEditMode:[64],setFocus:[64],emptyInput:[64]}]]],["p-d8826406",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-3bb15bdf",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[514],indeterminate:[516]}]]],["p-55dcbc35",[[1,"limel-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[8],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{open:[4],allowClicksElement:[16]}]]],["p-ce1fca54",[[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"],isFocused:[32],isModified:[32],showCompletions:[32]}]]],["p-c3e428ff",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-552fd521",[[1,"limel-spinner",{size:[520],limeBranded:[4,"lime-branded"]}]]],["p-d5298b7e",[[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-b897fe1f",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"]}],[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[8],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-8d44ea19",[[1,"limel-popover",{open:[4],openDirection:[513,"open-direction"]}],[1,"limel-popover-surface",{contentCollection:[16]}]]],["p-15e3028f",[[1,"limel-tooltip",{elementId:[513,"element-id"],label:[513],helperLabel:[513,"helper-label"],maxlength:[514],openDirection:[513,"open-direction"],open:[32]}],[1,"limel-tooltip-content",{label:[513],helperLabel:[513,"helper-label"],maxlength:[514]}]]],["p-1754c5ae",[[1,"limel-helper-line",{helperText:[513,"helper-text"],length:[514],maxLength:[514,"max-length"],invalid:[516],helperTextId:[513,"helper-text-id"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as e,g as o}from"./p-3075aa67.js";import{c as r}from"./p-3ccdc4a3.js";import{m as a,r as s}from"./p-d028b08d.js";const n="limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";const l=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=r()}componentWillLoad(){a(this.host)}disconnectedCallback(){s(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled()},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){return e("limel-icon",{name:this.item.icon,style:{"--action-bar-item-icon-color":`${this.item.iconColor}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}get host(){return o(this)}};l.style=n;const c=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{l as limel_action_bar_item,c as limel_action_bar_overflow_menu};
|
|
2
|
+
//# sourceMappingURL=p-db30704e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","role","id","type","onClick","disabled","isDisabled","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","style","iconColor","iconOnly","class","text","elementId","label","helperLabel","commandText","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n color: var(--limel-action-bar-item-text-color);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"mappings":"wIAAA,MAAMA,EAAmB,oqE,MCwBZC,EAAe,MA4BxBC,YAAAC,G,yCA+BQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCA3CH,KAWxBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,SACH,IAAKd,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKU,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAInB,KAAKO,UACTa,KAAK,SACLC,QAASrB,KAAKC,YACdqB,SAAUtB,KAAKuB,cAEdvB,KAAKwB,aACLxB,KAAKyB,cACLzB,KAAK0B,gB,CAUVX,OAAOT,GACX,QAAS,cAAeA,E,CAGpBiB,aACJ,GAAIvB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKgB,SAAU,CAC9C,OAAO,I,CAGX,IAAKtB,KAAK2B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAIxB,KAAKe,OAAOf,KAAKM,QAAUN,KAAKM,KAAKsB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU5B,KAAKM,KAAM,CACrB,OACIW,EAAA,cACIY,KAAM7B,KAAKM,KAAKsB,KAChBE,MAAO,CACH,+BAAgC,GAAG9B,KAAKM,KAAKyB,c,EAOzDN,cACJ,IAAKzB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAK0B,SAAU,CAC/C,M,CAGJ,OAAOf,EAAA,QAAMgB,MAAM,QAAQjC,KAAKM,KAAK4B,K,CAGjCR,gBACJ,IAAK1B,KAAKe,OAAOf,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAK4B,KAAM,CAChB,OACIjB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAK4B,KACjBG,YAAarC,KAAKM,KAAKgC,a,CAKnC,GAAItC,KAAKM,KAAKgC,YAAa,CACvB,OACIrB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAKgC,a,8CClIxBC,EAAqB,M,wDAgCtBvC,KAAAwC,qBAAuB,IACpB,IAAIxC,KAAKyC,oBAGZzC,KAAA0C,aAAgBxC,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMyC,OAAO,E,wCAvBI,Y,CAK/B7B,SACH,MAAO,CACHG,EAAA,cACI2B,cAAe5C,KAAK4C,cACpBC,MAAO7C,KAAK6C,MACZC,SAAU9C,KAAK0C,cAEfzB,EAAA,UAAQ8B,KAAK,WAAW/C,KAAKwC,yB,CAc7BC,wBACR,OAAOzC,KAAK6C,MAAMG,QAAQ1C,GAASN,KAAKiD,WAAW3C,KAAO4C,M,CAGtDD,WAAW3C,GACf,QAAS,cAAeA,E"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,g as o}from"./p-3075aa67.js";import{c as r}from"./p-3ccdc4a3.js";import{m as a,r as s}from"./p-d028b08d.js";const n="limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";const l=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.handleClick=t=>{t.stopPropagation();this.select.emit(this.item)};this.item=undefined;this.isVisible=true;this.tooltipId=r()}componentWillLoad(){a(this.host)}disconnectedCallback(){s(this.host)}render(){if(!this.isItem(this.item)&&this.item.separator){return e("div",{role:"separator"})}return e("button",{id:this.tooltipId,type:"button",onClick:this.handleClick,disabled:this.isDisabled()},this.renderIcon(),this.renderLabel(),this.renderTooltip())}isItem(t){return!("separator"in t)}isDisabled(){if(this.isItem(this.item)&&this.item.disabled){return true}if(!this.isVisible){return true}}renderIcon(){if(this.isItem(this.item)&&!this.item.icon){return}if("icon"in this.item){return e("limel-icon",{name:this.item.icon,style:{"--action-bar-item-icon-color":`${this.item.iconColor}`}})}}renderLabel(){if(!this.isItem(this.item)||this.item.iconOnly){return}return e("span",{class:"text"},this.item.text)}renderTooltip(){if(!this.isItem(this.item)){return}if(this.item.text){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.text,helperLabel:this.item.commandText})}if(this.item.commandText){return e("limel-tooltip",{elementId:this.tooltipId,label:this.item.commandText})}}get host(){return o(this)}};l.style=n;const c=class{constructor(e){t(this,e);this.select=i(this,"select",7);this.countOverflowedItems=()=>`+${this.numberOfMenuItems}`;this.handleSelect=t=>{t.stopPropagation();this.select.emit(t.detail)};this.items=undefined;this.openDirection="bottom-end"}render(){return[e("limel-menu",{openDirection:this.openDirection,items:this.items,onSelect:this.handleSelect},e("button",{slot:"trigger"},this.countOverflowedItems()))]}get numberOfMenuItems(){return this.items.filter((t=>this.isMenuItem(t))).length}isMenuItem(t){return!("separator"in t)}};export{l as limel_action_bar_item,c as limel_action_bar_overflow_menu};
|
|
2
|
-
//# sourceMappingURL=p-a3f31667.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["actionBarItemCss","ActionBarButton","constructor","hostRef","this","handleClick","event","stopPropagation","select","emit","item","tooltipId","createRandomString","componentWillLoad","makeEnterClickable","host","disconnectedCallback","removeEnterClickable","render","isItem","separator","h","role","id","type","onClick","disabled","isDisabled","renderIcon","renderLabel","renderTooltip","isVisible","icon","name","style","iconColor","iconOnly","class","text","elementId","label","helperLabel","commandText","ActionBarOverflowMenu","countOverflowedItems","numberOfMenuItems","handleSelect","detail","openDirection","items","onSelect","slot","filter","isMenuItem","length"],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n transition: opacity 0.2s ease-in-out;\n position: relative;\n display: flex;\n align-items: center;\n\n &:not([is-visible]) {\n opacity: 0;\n }\n}\n\nbutton {\n all: unset;\n\n &:not([disabled]) {\n @include mixins.is-flat-inset-clickable(\n $color: var(--limel-action-bar-item-text-color),\n $color--hovered: var(--limel-action-bar-item-text-color),\n $background-color: var(--action-bar-background-color),\n $background-color--hovered: var(--action-bar-background-color),\n $background-color--inset: var(--action-bar-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n }\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n\n width: 100%;\n min-width: var(--action-bar-item-height);\n max-width: var(--action-bar-item-max-width, 10rem);\n height: var(--action-bar-item-height);\n\n border-radius: var(--action-bar-item-height);\n font-size: functions.pxToRem(14);\n padding: 0 0.25rem;\n\n &:has(.text) {\n padding: 0 0.5rem;\n }\n\n &[disabled] {\n opacity: 0.4;\n }\n}\n\n.text {\n @include mixins.truncate-text();\n padding: 0 0.25rem;\n}\n\nlimel-icon {\n flex-shrink: 0;\n width: calc(var(--action-bar-item-height) - 0.75rem);\n height: calc(var(--action-bar-item-height) - 0.75rem);\n color: var(\n --action-bar-item-icon-color,\n var(--limel-action-bar-item-text-color)\n );\n}\n\ndiv[role='separator'] {\n width: 1px;\n height: 1.5rem;\n border-radius: var(--action-bar-item-height);\n background-color: var(--limel-action-bar-item-text-color);\n opacity: 0.2;\n\n @media (pointer: fine) {\n margin-right: 0.5rem;\n margin-left: 0.5rem;\n }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n --notification-badge-background-color: rgb(var(--contrast-600));\n --notification-badge-text-color: rgb(var(--contrast-1200));\n\n &[open] {\n button {\n box-shadow: var(--button-shadow-inset);\n }\n }\n}\n\nbutton[slot='trigger'] {\n animation: fade-in ease-out 0.25s;\n font-size: 0.75rem;\n font-weight: bold;\n transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n 0% {\n scale: 0.8;\n opacity: 0;\n }\n 100% {\n scale: 1;\n opacity: 1;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../action-bar.types';\nimport { createRandomString } from '../../../util/random-string';\nimport { ListSeparator } from 'src/interface';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from 'src/util/make-enter-clickable';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-item',\n shadow: false,\n styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n /**\n * Item that is placed in the action bar.\n */\n @Prop()\n public item!: ActionBarItem | ListSeparator;\n\n /**\n * Fired when a action bar item has been clicked.\n */\n @Event()\n public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n /**\n * When the item is displayed in the available width,\n * this will be `false`.\n */\n @Prop({ reflect: true })\n public isVisible: boolean = true;\n\n @Element()\n private host: HTMLLimelActionBarItemElement;\n\n /**\n * Used to attach the right tooltip to the right button\n */\n private tooltipId: string;\n\n constructor() {\n this.tooltipId = createRandomString();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n }\n\n public render() {\n if (!this.isItem(this.item) && this.item.separator) {\n return <div role=\"separator\" />;\n }\n\n return (\n <button\n id={this.tooltipId}\n type=\"button\"\n onClick={this.handleClick}\n disabled={this.isDisabled()}\n >\n {this.renderIcon()}\n {this.renderLabel()}\n {this.renderTooltip()}\n </button>\n );\n }\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.select.emit(this.item);\n };\n\n private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n return !('separator' in item);\n }\n\n private isDisabled() {\n if (this.isItem(this.item) && this.item.disabled) {\n return true;\n }\n\n if (!this.isVisible) {\n return true;\n }\n }\n\n private renderIcon() {\n if (this.isItem(this.item) && !this.item.icon) {\n return;\n }\n\n if ('icon' in this.item) {\n return (\n <limel-icon\n name={this.item.icon}\n style={{\n '--action-bar-item-icon-color': `${this.item.iconColor}`,\n }}\n />\n );\n }\n }\n\n private renderLabel() {\n if (!this.isItem(this.item) || this.item.iconOnly) {\n return;\n }\n\n return <span class=\"text\">{this.item.text}</span>;\n }\n\n private renderTooltip() {\n if (!this.isItem(this.item)) {\n return;\n }\n\n if (this.item.text) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.text}\n helperLabel={this.item.commandText}\n />\n );\n }\n\n if (this.item.commandText) {\n return (\n <limel-tooltip\n elementId={this.tooltipId}\n label={this.item.commandText}\n />\n );\n }\n }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport {\n MenuItem,\n LimelMenuCustomEvent,\n ListSeparator,\n ActionBarItem,\n OpenDirection,\n} from '@limetech/lime-elements';\n\n/**\n * @private\n */\n@Component({\n tag: 'limel-action-bar-overflow-menu',\n shadow: false,\n})\nexport class ActionBarOverflowMenu {\n /**\n * List of the items that should be rendered in the overflow menu.\n */\n @Prop()\n public items: Array<MenuItem | ListSeparator>;\n\n /**\n * Defines the location that the content of the overflow menu\n * appears, in relation to its trigger.\n * It defaults to `bottom-end`, since in normal scenarios\n * (for example when the action bar is not floating at the bottom of the screen)\n * this menu is the right-most item in the user interface of the component.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom-end';\n\n @Event()\n public select: EventEmitter<ActionBarItem>;\n\n public render() {\n return [\n <limel-menu\n openDirection={this.openDirection}\n items={this.items}\n onSelect={this.handleSelect}\n >\n <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n </limel-menu>,\n ];\n }\n\n private countOverflowedItems = () => {\n return `+${this.numberOfMenuItems}`;\n };\n\n private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n event.stopPropagation();\n this.select.emit(event.detail);\n };\n\n private get numberOfMenuItems() {\n return this.items.filter((item) => this.isMenuItem(item)).length;\n }\n\n private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n return !('separator' in item);\n }\n}\n"],"mappings":"wIAAA,MAAMA,EAAmB,snE,MCwBZC,EAAe,MA4BxBC,YAAAC,G,yCA+BQC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKL,KAAKM,KAAK,E,mCA3CH,KAWxBN,KAAKO,UAAYC,G,CAGdC,oBACHC,EAAmBV,KAAKW,K,CAGrBC,uBACHC,EAAqBb,KAAKW,K,CAGvBG,SACH,IAAKd,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKU,UAAW,CAChD,OAAOC,EAAA,OAAKC,KAAK,a,CAGrB,OACID,EAAA,UACIE,GAAInB,KAAKO,UACTa,KAAK,SACLC,QAASrB,KAAKC,YACdqB,SAAUtB,KAAKuB,cAEdvB,KAAKwB,aACLxB,KAAKyB,cACLzB,KAAK0B,gB,CAUVX,OAAOT,GACX,QAAS,cAAeA,E,CAGpBiB,aACJ,GAAIvB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAKgB,SAAU,CAC9C,OAAO,I,CAGX,IAAKtB,KAAK2B,UAAW,CACjB,OAAO,I,EAIPH,aACJ,GAAIxB,KAAKe,OAAOf,KAAKM,QAAUN,KAAKM,KAAKsB,KAAM,CAC3C,M,CAGJ,GAAI,SAAU5B,KAAKM,KAAM,CACrB,OACIW,EAAA,cACIY,KAAM7B,KAAKM,KAAKsB,KAChBE,MAAO,CACH,+BAAgC,GAAG9B,KAAKM,KAAKyB,c,EAOzDN,cACJ,IAAKzB,KAAKe,OAAOf,KAAKM,OAASN,KAAKM,KAAK0B,SAAU,CAC/C,M,CAGJ,OAAOf,EAAA,QAAMgB,MAAM,QAAQjC,KAAKM,KAAK4B,K,CAGjCR,gBACJ,IAAK1B,KAAKe,OAAOf,KAAKM,MAAO,CACzB,M,CAGJ,GAAIN,KAAKM,KAAK4B,KAAM,CAChB,OACIjB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAK4B,KACjBG,YAAarC,KAAKM,KAAKgC,a,CAKnC,GAAItC,KAAKM,KAAKgC,YAAa,CACvB,OACIrB,EAAA,iBACIkB,UAAWnC,KAAKO,UAChB6B,MAAOpC,KAAKM,KAAKgC,a,8CClIxBC,EAAqB,M,wDAgCtBvC,KAAAwC,qBAAuB,IACpB,IAAIxC,KAAKyC,oBAGZzC,KAAA0C,aAAgBxC,IACpBA,EAAMC,kBACNH,KAAKI,OAAOC,KAAKH,EAAMyC,OAAO,E,wCAvBI,Y,CAK/B7B,SACH,MAAO,CACHG,EAAA,cACI2B,cAAe5C,KAAK4C,cACpBC,MAAO7C,KAAK6C,MACZC,SAAU9C,KAAK0C,cAEfzB,EAAA,UAAQ8B,KAAK,WAAW/C,KAAKwC,yB,CAc7BC,wBACR,OAAOzC,KAAK6C,MAAMG,QAAQ1C,GAASN,KAAKiD,WAAW3C,KAAO4C,M,CAGtDD,WAAW3C,GACf,QAAS,cAAeA,E"}
|