@trendyol/baklava 2.4.0-beta.10 → 2.4.0-beta.11
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/baklava.js +1 -1
- package/dist/chunk-7QGSFS64.js +16 -0
- package/dist/chunk-7QGSFS64.js.map +7 -0
- package/dist/chunk-V5OMCBVZ.js +23 -0
- package/dist/chunk-V5OMCBVZ.js.map +7 -0
- package/dist/components/dropdown/bl-dropdown.d.ts.map +1 -1
- package/dist/components/dropdown/bl-dropdown.js +1 -1
- package/dist/components/dropdown/group/bl-dropdown-group.js +1 -1
- package/dist/components/dropdown/item/bl-dropdown-item.js +1 -1
- package/dist/custom-elements.json +0 -1
- package/package.json +2 -2
- package/dist/chunk-HJWQ7Y3K.js +0 -5
- package/dist/chunk-HJWQ7Y3K.js.map +0 -7
- package/dist/chunk-JPRCBAHY.js +0 -23
- package/dist/chunk-JPRCBAHY.js.map +0 -7
package/dist/baklava.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{b as k}from"./chunk-XQUQIQBO.js";import{a as i}from"./chunk-KR6AUZ77.js";import{c as n,f as c}from"./chunk-AVMAZXZT.js";import{b as C}from"./chunk-BEGAFK2I.js";import{a as b}from"./chunk-6UTBN2XX.js";import{a as P}from"./chunk-LWG2UXQG.js";import{a as I}from"./chunk-VOYAVKU3.js";import{a as g}from"./chunk-MNNOI75G.js";import{a as w}from"./chunk-EPFBV6RC.js";import{a as h}from"./chunk-L4XYDFNG.js";import{a as u}from"./chunk-KXWP6EDU.js";import{b as T,d as G}from"./chunk-
|
|
1
|
+
import{b as k}from"./chunk-XQUQIQBO.js";import{a as i}from"./chunk-KR6AUZ77.js";import{c as n,f as c}from"./chunk-AVMAZXZT.js";import{b as C}from"./chunk-BEGAFK2I.js";import{a as b}from"./chunk-6UTBN2XX.js";import{a as P}from"./chunk-LWG2UXQG.js";import{a as I}from"./chunk-VOYAVKU3.js";import{a as g}from"./chunk-MNNOI75G.js";import{a as w}from"./chunk-EPFBV6RC.js";import{a as h}from"./chunk-L4XYDFNG.js";import{a as u}from"./chunk-KXWP6EDU.js";import{b as T,d as G}from"./chunk-V5OMCBVZ.js";import{b as D}from"./chunk-7QGSFS64.js";import{b as S}from"./chunk-RFUZBNM4.js";import{a as B}from"./chunk-FSFO7DCO.js";import{a as m}from"./chunk-AMAOGVPQ.js";import{a as s}from"./chunk-5EFPA3CA.js";import"./chunk-EZSEQHRH.js";import{a as x}from"./chunk-FJTTJ5ZT.js";import"./chunk-OSNB4BPE.js";import"./chunk-3B64VOWB.js";import{a as e}from"./chunk-X5MXYPRD.js";import"./chunk-ECPWEUBG.js";import{a as r}from"./chunk-SLY6IY2R.js";import{b as f,e as p}from"./chunk-RQG2GHCK.js";import"./chunk-AAGDUS7G.js";import"./chunk-DJOD4BTL.js";import"./chunk-AYJMIZZ3.js";import{a as d}from"./chunk-MPKYBU46.js";import{b as l}from"./chunk-WA7DDIST.js";import"./chunk-6LT7O7T2.js";import{a as o,b as t,c as a}from"./chunk-JI2OEPG2.js";import"./chunk-GRL4DWKG.js";import"./chunk-X2KXJYXQ.js";import"./chunk-DINNT5P2.js";import"./chunk-3USCFSFQ.js";import"./chunk-7GK5LKBV.js";import"./chunk-4OT5AMS5.js";import"./chunk-CYCIT2TG.js";export{e as BlAlert,r as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,a as BlIcon,x as BlInput,S as BlNotification,k as BlNotificationCard,B as BlPagination,h as BlPopover,i as BlProgressIndicator,n as BlRadio,c as BlRadioGroup,m as BlSelect,s as BlSelectOption,C as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,w as BlTooltip,t as getIconPath,o as setIconPath};
|
|
2
2
|
//# sourceMappingURL=baklava.js.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{a as s,b as i}from"./chunk-X2KXJYXQ.js";import{a as e,b as l,f as r}from"./chunk-4OT5AMS5.js";import{c as o}from"./chunk-CYCIT2TG.js";var p=e`:host{display:block;position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)) .dropdown-group{border-top:1px solid var(--bl-color-neutral-lighter);padding-top:var(--bl-size-xs)}:host(:not(:last-child)) .dropdown-group{border-bottom:1px solid var(--bl-color-neutral-lighter);padding-bottom:var(--bl-size-xs)}/*
|
|
2
|
+
:host(:not([caption])) ::slotted(:first-child) {
|
|
3
|
+
padding-block: var(--bl-size-xs) 0;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
:host(:not(:last-child)) ::slotted(:last-child) {
|
|
7
|
+
padding-block: 0 var(--bl-size-xs);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
:host(:not(:first-child)) .caption {
|
|
11
|
+
padding-block: var(--bl-size-xs) 0;
|
|
12
|
+
} */`,a=p;var d="bl-dropdown-group",t=class extends r{static get styles(){return[a]}render(){let n=this.caption?l`<span id="label" class="caption">${this.caption}</span>`:"";return l`<div class="dropdown-group" role="group" aria-labelledby="label">
|
|
13
|
+
${n}
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(d)],t);export{d as a,t as b};
|
|
16
|
+
//# sourceMappingURL=chunk-7QGSFS64.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block;position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)) .dropdown-group{border-top:1px solid var(--bl-color-neutral-lighter);padding-top:var(--bl-size-xs)}:host(:not(:last-child)) .dropdown-group{border-bottom:1px solid var(--bl-color-neutral-lighter);padding-bottom:var(--bl-size-xs)}/*\n:host(:not([caption])) ::slotted(:first-child) {\n padding-block: var(--bl-size-xs) 0;\n}\n\n:host(:not(:last-child)) ::slotted(:last-child) {\n padding-block: 0 var(--bl-size-xs);\n}\n\n:host(:not(:first-child)) .caption {\n padding-block: var(--bl-size-xs) 0;\n} */`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./bl-dropdown-group.css\";\n\nexport const blDropdownGroupTag = \"bl-dropdown-group\";\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the caption.\n */\n @property({ type: String })\n caption?: string;\n\n render(): TemplateResult {\n const caption = this.caption\n ? html`<span id=\"label\" class=\"caption\">${this.caption}</span>`\n : \"\";\n\n return html`<div class=\"dropdown-group\" role=\"group\" aria-labelledby=\"label\">\n ${caption}\n <slot></slot>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownGroupTag]: BlDropdownGroup;\n }\n}\n"],
|
|
5
|
+
"mappings": "6IACO,IAAMA,EAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYfC,EAAQF,ECTR,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QACjBC,qCAAwC,KAAK,iBAC7C,GAEJ,OAAOA;AAAA,QACHD;AAAA;AAAA,WAGN,CACF,EAZEE,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPN,EASnB,uBATmBA,EAArBK,EAAA,CADCC,EAAcP,CAAkB,GACZC",
|
|
6
|
+
"names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "x", "__decorateClass", "e"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import{a as u}from"./chunk-7QGSFS64.js";import{a as l}from"./chunk-GRL4DWKG.js";import{a as d,b as o,c as h,e as n}from"./chunk-X2KXJYXQ.js";import{a as b}from"./chunk-DINNT5P2.js";import{a as s,b as p,f as a}from"./chunk-4OT5AMS5.js";import{c as e}from"./chunk-CYCIT2TG.js";var g=s`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`,v=g;var c="bl-dropdown",t=class extends a{constructor(){super(...arguments);this._isPopoverOpen=!1;this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[v]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this._button}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}handleKeyDown(i){if(["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(m)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!")}render(){return p`<bl-button
|
|
2
|
+
dropdown
|
|
3
|
+
.active=${this.opened}
|
|
4
|
+
?disabled=${this.disabled}
|
|
5
|
+
variant="${this.variant}"
|
|
6
|
+
kind="${this.kind}"
|
|
7
|
+
size="${this.size}"
|
|
8
|
+
@bl-click="${this._handleClick}"
|
|
9
|
+
>
|
|
10
|
+
${this.label}
|
|
11
|
+
</bl-button>
|
|
12
|
+
<bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}"
|
|
13
|
+
><div class="popover-content">
|
|
14
|
+
<slot></slot></div
|
|
15
|
+
></bl-popover> `}};e([n("bl-popover")],t.prototype,"_popover",2),e([n("bl-button")],t.prototype,"_button",2),e([h()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l("bl-dropdown-open")],t.prototype,"onOpen",2),e([l("bl-dropdown-close")],t.prototype,"onClose",2),t=e([d(c)],t);var w=s`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,f=w;var m="bl-dropdown-item",r=class extends a{static get styles(){return[f]}_handleClick(){var i;(i=this.BlDropdownField)==null||i.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(u),this.BlDropdownField=this.closest(c),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${u} or ${c}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return p`<bl-button
|
|
16
|
+
variant="tertiary"
|
|
17
|
+
kind="neutral"
|
|
18
|
+
icon="${b(this.icon)}"
|
|
19
|
+
role="menuitem"
|
|
20
|
+
@click="${this._handleClick}"
|
|
21
|
+
><slot></slot>
|
|
22
|
+
</bl-button>`}};e([o({type:String})],r.prototype,"icon",2),e([l("bl-dropdown-item-click")],r.prototype,"onClick",2),e([n("[role=menuitem]")],r.prototype,"menuElement",2),r=e([d(m)],r);export{m as a,r as b,c,t as d};
|
|
23
|
+
//# sourceMappingURL=chunk-V5OMCBVZ.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts"],
|
|
4
|
+
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}.popover-content{display:flex;flex-direction:column;gap:var(--bl-size-xs)}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, state, query } from \"lit/decorators.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonSize, ButtonVariant, ButtonKind } from \"../button/bl-button\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-dropdown.css\";\nimport BlDropdownItem, { blDropdownItemTag } from \"./item/bl-dropdown-item\";\n\nexport const blDropdownTag = \"bl-dropdown\";\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"bl-button\")\n private _button: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the dropdown button label\n */\n @property({ type: String, reflect: true })\n label: string;\n\n /**\n * Sets the dropdown button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = \"primary\";\n\n /**\n * Sets the dropdown button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the dropdown button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // `_button` will be undefined during the initial render.\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this._button;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous action\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html`<bl-button\n dropdown\n .active=${this.opened}\n ?disabled=${this.disabled}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\"\n ><div class=\"popover-content\">\n <slot></slot></div\n ></bl-popover> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownTag]: BlDropdown;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../button/bl-button\";\nimport BlButton from \"../../button/bl-button\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport type BlDropdown from \"../bl-dropdown\";\nimport { blDropdownTag } from \"../bl-dropdown\";\nimport type BlDropdownGroup from \"../group/bl-dropdown-group\";\nimport { blDropdownGroupTag } from \"../group/bl-dropdown-group\";\nimport style from \"./bl-dropdown-item.css\";\n\nexport const blDropdownItemTag = \"bl-dropdown-item\";\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n\n @property({ type: String })\n icon?: BaklavaIcon;\n\n @event(\"bl-dropdown-item-click\") private onClick: EventDispatcher<string>;\n\n private _handleClick() {\n this.BlDropdownField?.close();\n this.onClick(\"Action clicked!\");\n }\n\n @query(\"[role=menuitem]\") private menuElement: BlButton;\n\n /**\n * Focuses this action\n */\n focus() {\n this.menuElement.focus();\n }\n\n private BlDropdownGroupField: BlDropdownGroup | null;\n private BlDropdownField: BlDropdown | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`,\n this\n );\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n render(): TemplateResult {\n return html`<bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"${ifDefined(this.icon)}\"\n role=\"menuitem\"\n @click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "bl_dropdown_default", "event", "blDropdownItemTag", "x", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "_a", "blDropdownGroupTag", "blDropdownTag", "x", "l", "__decorateClass", "e", "event", "i"]
|
|
7
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bl-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/bl-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"bl-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/bl-dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGvE,OAAO,qBAAqB,CAAC;AAC7B,OAAiB,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtF,OAAO,cAAqC,MAAM,yBAAyB,CAAC;AAE5E,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C;;;GAGG;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,UAAU;IAChD,MAAM,KAAK,MAAM,IAAI,cAAc,CAElC;IAGD,OAAO,CAAC,QAAQ,CAAY;IAG5B,OAAO,CAAC,OAAO,CAAW;IAEjB,OAAO,CAAC,cAAc,CAAS;IAExC;;OAEG;IAEH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,OAAO,EAAE,aAAa,CAAa;IAEnC;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAa;IAE7B;;OAEG;IAEH,IAAI,EAAE,UAAU,CAAY;IAE5B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IACwB,OAAO,CAAC,MAAM,CAA0B;IAEnE;;OAEG;IACyB,OAAO,CAAC,OAAO,CAA0B;IAErE,iBAAiB;IAKjB,oBAAoB;IAKpB,YAAY;IAMZ,IAAI,MAAM,YAET;IAED,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,kBAAkB,CAAM;IAEhC,OAAO,CAAC,aAAa;IA6BrB,IAAI,OAAO,IAAI,cAAc,EAAE,CAE9B;IAED,IAAI;IAMJ,KAAK;IAML,MAAM,IAAI,cAAc;CAiBzB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC;KAC7B;CACF"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{c as a,d as b}from"../../chunk-
|
|
1
|
+
import{c as a,d as b}from"../../chunk-V5OMCBVZ.js";import"../../chunk-7QGSFS64.js";import"../../chunk-WA7DDIST.js";import"../../chunk-6LT7O7T2.js";import"../../chunk-JI2OEPG2.js";import"../../chunk-GRL4DWKG.js";import"../../chunk-X2KXJYXQ.js";import"../../chunk-DINNT5P2.js";import"../../chunk-3USCFSFQ.js";import"../../chunk-7GK5LKBV.js";import"../../chunk-4OT5AMS5.js";import"../../chunk-CYCIT2TG.js";export{a as blDropdownTag,b as default};
|
|
2
2
|
//# sourceMappingURL=bl-dropdown.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b}from"../../../chunk-
|
|
1
|
+
import{a,b}from"../../../chunk-7QGSFS64.js";import"../../../chunk-X2KXJYXQ.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-CYCIT2TG.js";export{a as blDropdownGroupTag,b as default};
|
|
2
2
|
//# sourceMappingURL=bl-dropdown-group.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a,b}from"../../../chunk-
|
|
1
|
+
import{a,b}from"../../../chunk-V5OMCBVZ.js";import"../../../chunk-7QGSFS64.js";import"../../../chunk-WA7DDIST.js";import"../../../chunk-6LT7O7T2.js";import"../../../chunk-JI2OEPG2.js";import"../../../chunk-GRL4DWKG.js";import"../../../chunk-X2KXJYXQ.js";import"../../../chunk-DINNT5P2.js";import"../../../chunk-3USCFSFQ.js";import"../../../chunk-7GK5LKBV.js";import"../../../chunk-4OT5AMS5.js";import"../../../chunk-CYCIT2TG.js";export{a as blDropdownItemTag,b as default};
|
|
2
2
|
//# sourceMappingURL=bl-dropdown-item.js.map
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trendyol/baklava",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.4.0-beta.
|
|
4
|
+
"version": "2.4.0-beta.11",
|
|
5
5
|
"description": "Trendyol Baklava Design System",
|
|
6
6
|
"main": "dist/baklava.js",
|
|
7
7
|
"module": "dist/baklava.js",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"@storybook/addon-mdx-gfm": "^7.4.3",
|
|
90
90
|
"@storybook/addon-viewport": "^7.4.3",
|
|
91
91
|
"@storybook/jest": "^0.2.2",
|
|
92
|
-
"@storybook/testing-library": "^0.2.
|
|
92
|
+
"@storybook/testing-library": "^0.2.2",
|
|
93
93
|
"@storybook/web-components": "7.4.3",
|
|
94
94
|
"@storybook/web-components-vite": "^7.4.3",
|
|
95
95
|
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
|
package/dist/chunk-HJWQ7Y3K.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import{a as s,b as i}from"./chunk-X2KXJYXQ.js";import{a as e,b as l,f as r}from"./chunk-4OT5AMS5.js";import{c as o}from"./chunk-CYCIT2TG.js";var p=e`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`,a=p;var d="bl-dropdown-group",t=class extends r{static get styles(){return[a]}render(){let n=this.caption?l`<span id="label" class="caption">${this.caption}</span>`:"";return l`<div class="dropdown-group" role="group" aria-labelledby="label">
|
|
2
|
-
${n}
|
|
3
|
-
<slot></slot>
|
|
4
|
-
</div>`}};o([i({type:String})],t.prototype,"caption",2),t=o([s(d)],t);export{d as a,t as b};
|
|
5
|
-
//# sourceMappingURL=chunk-HJWQ7Y3K.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/dropdown/group/bl-dropdown-group.css", "../src/components/dropdown/group/bl-dropdown-group.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;width:100%}.dropdown-group{display:flex;flex-direction:column;gap:var(--bl-size-xs)}.caption{font:var(--bl-font-caption);font-size:var(--bl-font-size-xs);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-s);color:var(--bl-color-neutral-dark)}:host(:not(:first-child)){border-top:1px solid var(--bl-color-neutral-lighter)}:host(:not(:last-child)){border-bottom:1px solid var(--bl-color-neutral-lighter)}:host(:not([caption])) ::slotted(:first-child){padding-block:var(--bl-size-xs) 0}:host(:not(:last-child)) ::slotted(:last-child){padding-block:0 var(--bl-size-xs)}:host(:not(:first-child)) .caption{padding-block:var(--bl-size-xs) 0}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport style from \"./bl-dropdown-group.css\";\n\nexport const blDropdownGroupTag = \"bl-dropdown-group\";\n\n/**\n * @tag bl-dropdown-group\n * @summary Baklava Dropdown Group component\n */\n@customElement(blDropdownGroupTag)\nexport default class BlDropdownGroup extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the caption.\n */\n @property({ type: String })\n caption?: string;\n\n render(): TemplateResult {\n const caption = this.caption\n ? html`<span id=\"label\" class=\"caption\">${this.caption}</span>`\n : \"\";\n\n return html`<div class=\"dropdown-group\" role=\"group\" aria-labelledby=\"label\">\n ${caption}\n <slot></slot>\n </div>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownGroupTag]: BlDropdownGroup;\n }\n}\n"],
|
|
5
|
-
"mappings": "6IACO,IAAMA,EAASC,4qBACfC,EAAQF,ECER,IAAMG,EAAqB,oBAObC,EAArB,cAA6CC,CAAW,CACtD,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAQA,QAAyB,CACvB,IAAMC,EAAU,KAAK,QACjBC,qCAAwC,KAAK,iBAC7C,GAEJ,OAAOA;AAAA,QACHD;AAAA;AAAA,WAGN,CACF,EAZEE,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GARPN,EASnB,uBATmBA,EAArBK,EAAA,CADCC,EAAcP,CAAkB,GACZC",
|
|
6
|
-
"names": ["styles", "i", "bl_dropdown_group_default", "blDropdownGroupTag", "BlDropdownGroup", "s", "bl_dropdown_group_default", "caption", "x", "__decorateClass", "e"]
|
|
7
|
-
}
|
package/dist/chunk-JPRCBAHY.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import{a as m}from"./chunk-HJWQ7Y3K.js";import{a as s}from"./chunk-GRL4DWKG.js";import{a as c,b as o,c as b,e as l}from"./chunk-X2KXJYXQ.js";import{a as n}from"./chunk-DINNT5P2.js";import{a as p,b as a,f as d}from"./chunk-4OT5AMS5.js";import{c as e}from"./chunk-CYCIT2TG.js";var g=p`:host{position:relative;display:inline-block}:host([kind="neutral"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind="success"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind="danger"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}`,f=g;var u="bl-dropdown",t=class extends d{constructor(){super(...arguments);this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this.focusedOptionIndex=-1}static get styles(){return[f]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown)}firstUpdated(){this._popover.target=this._button}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}handleKeyDown(i){if(["ArrowDown","ArrowRight"].includes(i.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(i.key))this.focusedOptionIndex--;else if(i.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),i.preventDefault()}get options(){return[...this.querySelectorAll(h)]}open(){this._isPopoverOpen=!0,this._popover.show(),this.onOpen("Dropdown opened!")}close(){this._isPopoverOpen=!1,this._popover.visible&&this._popover.hide(),this.onClose("Dropdown closed!")}render(){return a`<bl-button
|
|
2
|
-
dropdown
|
|
3
|
-
.active=${this.opened}
|
|
4
|
-
?disabled=${n(this.disabled)}
|
|
5
|
-
variant="${this.variant}"
|
|
6
|
-
kind="${this.kind}"
|
|
7
|
-
size="${this.size}"
|
|
8
|
-
aria-label="${n(this.label)}"
|
|
9
|
-
@bl-click="${this._handleClick}"
|
|
10
|
-
>
|
|
11
|
-
${this.label}
|
|
12
|
-
</bl-button>
|
|
13
|
-
<bl-popover fit-size placement="bottom-start" @bl-popover-hide="${this.close}">
|
|
14
|
-
<slot></slot>
|
|
15
|
-
</bl-popover> `}};e([l("bl-popover")],t.prototype,"_popover",2),e([l("bl-button")],t.prototype,"_button",2),e([b()],t.prototype,"_isPopoverOpen",2),e([o({type:String,reflect:!0})],t.prototype,"label",2),e([o({type:String,reflect:!0})],t.prototype,"variant",2),e([o({type:String,reflect:!0})],t.prototype,"kind",2),e([o({type:String,reflect:!0})],t.prototype,"size",2),e([o({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-dropdown-open")],t.prototype,"onOpen",2),e([s("bl-dropdown-close")],t.prototype,"onClose",2),t=e([c(u)],t);var w=p`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,v=w;var h="bl-dropdown-item",r=class extends d{static get styles(){return[v]}_handleClick(){var i;(i=this.BlDropdownField)==null||i.close(),this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(m),this.BlDropdownField=this.closest(u),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${m} or ${u}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return a`<bl-button
|
|
16
|
-
variant="tertiary"
|
|
17
|
-
kind="neutral"
|
|
18
|
-
icon="${n(this.icon)}"
|
|
19
|
-
role="menuitem"
|
|
20
|
-
@click="${this._handleClick}"
|
|
21
|
-
><slot></slot>
|
|
22
|
-
</bl-button>`}};e([o({type:String})],r.prototype,"icon",2),e([s("bl-dropdown-item-click")],r.prototype,"onClick",2),e([l("[role=menuitem]")],r.prototype,"menuElement",2),r=e([c(h)],r);export{h as a,r as b,u as c,t as d};
|
|
23
|
-
//# sourceMappingURL=chunk-JPRCBAHY.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts"],
|
|
4
|
-
"sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}:host([kind=\"neutral\"]) bl-popover{--bl-popover-border-color:var(--bl-color-neutral-darker)}:host([kind=\"success\"]) bl-popover{--bl-popover-border-color:var(--bl-color-success)}:host([kind=\"danger\"]) bl-popover{--bl-popover-border-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, state, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../utilities/event\";\nimport \"../button/bl-button\";\nimport BlButton, { ButtonSize, ButtonVariant, ButtonKind } from \"../button/bl-button\";\nimport BlPopover from \"../popover/bl-popover\";\nimport style from \"./bl-dropdown.css\";\nimport BlDropdownItem, { blDropdownItemTag } from \"./item/bl-dropdown-item\";\n\nexport const blDropdownTag = \"bl-dropdown\";\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n @query(\"bl-popover\")\n private _popover: BlPopover;\n\n @query(\"bl-button\")\n private _button: BlButton;\n\n @state() private _isPopoverOpen = false;\n\n /**\n * Sets the dropdown button label\n */\n @property({ type: String, reflect: true })\n label = \"Dropdown Button\";\n\n /**\n * Sets the dropdown button variant\n */\n @property({ type: String, reflect: true })\n variant: ButtonVariant = \"primary\";\n\n /**\n * Sets the dropdown button kind\n */\n @property({ type: String, reflect: true })\n kind: ButtonKind = \"default\";\n\n /**\n * Sets the dropdown button size\n */\n @property({ type: String, reflect: true })\n size: ButtonSize = \"medium\";\n\n /**\n * Sets button as disabled\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * Fires when dropdown opened\n */\n @event(\"bl-dropdown-open\") private onOpen: EventDispatcher<string>;\n\n /**\n * Fires when dropdown closed\n */\n @event(\"bl-dropdown-close\") private onClose: EventDispatcher<string>;\n\n connectedCallback() {\n super.connectedCallback();\n this.addEventListener(\"keydown\", this.handleKeyDown);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"keydown\", this.handleKeyDown);\n }\n\n firstUpdated() {\n // `_button` will be undefined during the initial render.\n // To ensure proper rendering, we set `_popover.target` after the template has been created.\n this._popover.target = this._button;\n }\n\n get opened() {\n return this._isPopoverOpen;\n }\n\n private _handleClick() {\n !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n }\n\n private focusedOptionIndex = -1;\n\n private handleKeyDown(event: KeyboardEvent) {\n // Next action\n if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n this.focusedOptionIndex++;\n\n // Previous action\n } else if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n this.focusedOptionIndex--;\n // Select action\n } else if (event.key === \"Escape\") {\n this.focusedOptionIndex = -1;\n this.close();\n return;\n } else {\n // Other keys are not our interest here\n return;\n }\n\n // Don't exceed array indexes\n this.focusedOptionIndex = Math.max(\n 0,\n Math.min(this.focusedOptionIndex, this.options.length - 1)\n );\n\n this.options[this.focusedOptionIndex].focus();\n\n event.preventDefault();\n }\n\n get options(): BlDropdownItem[] {\n return [...this.querySelectorAll(blDropdownItemTag)];\n }\n\n open() {\n this._isPopoverOpen = true;\n this._popover.show();\n this.onOpen(\"Dropdown opened!\");\n }\n\n close() {\n this._isPopoverOpen = false;\n this._popover.visible && this._popover.hide();\n this.onClose(\"Dropdown closed!\");\n }\n\n render(): TemplateResult {\n return html`<bl-button\n dropdown\n .active=${this.opened}\n ?disabled=${ifDefined(this.disabled)}\n variant=\"${this.variant}\"\n kind=\"${this.kind}\"\n size=\"${this.size}\"\n aria-label=\"${ifDefined(this.label)}\"\n @bl-click=\"${this._handleClick}\"\n >\n ${this.label}\n </bl-button>\n <bl-popover fit-size placement=\"bottom-start\" @bl-popover-hide=\"${this.close}\">\n <slot></slot>\n </bl-popover> `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownTag]: BlDropdown;\n }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { event, EventDispatcher } from \"../../../utilities/event\";\nimport \"../../button/bl-button\";\nimport BlButton from \"../../button/bl-button\";\nimport { BaklavaIcon } from \"../../icon/icon-list\";\nimport type BlDropdown from \"../bl-dropdown\";\nimport { blDropdownTag } from \"../bl-dropdown\";\nimport type BlDropdownGroup from \"../group/bl-dropdown-group\";\nimport { blDropdownGroupTag } from \"../group/bl-dropdown-group\";\nimport style from \"./bl-dropdown-item.css\";\n\nexport const blDropdownItemTag = \"bl-dropdown-item\";\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n static get styles(): CSSResultGroup {\n return [style];\n }\n\n /**\n * Sets the icon name. Shows icon with bl-icon component\n */\n\n @property({ type: String })\n icon?: BaklavaIcon;\n\n @event(\"bl-dropdown-item-click\") private onClick: EventDispatcher<string>;\n\n private _handleClick() {\n this.BlDropdownField?.close();\n this.onClick(\"Action clicked!\");\n }\n\n @query(\"[role=menuitem]\") private menuElement: BlButton;\n\n /**\n * Focuses this action\n */\n focus() {\n this.menuElement.focus();\n }\n\n private BlDropdownGroupField: BlDropdownGroup | null;\n private BlDropdownField: BlDropdown | null;\n\n connectedCallback(): void {\n super.connectedCallback();\n\n this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n console.warn(\n `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`,\n this\n );\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n render(): TemplateResult {\n return html`<bl-button\n variant=\"tertiary\"\n kind=\"neutral\"\n icon=\"${ifDefined(this.icon)}\"\n role=\"menuitem\"\n @click=\"${this._handleClick}\"\n ><slot></slot>\n </bl-button>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [blDropdownItemTag]: BlDropdownItem;\n }\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "bl_dropdown_default", "event", "blDropdownItemTag", "x", "l", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "_a", "blDropdownGroupTag", "blDropdownTag", "x", "l", "__decorateClass", "e", "event", "i"]
|
|
7
|
-
}
|