@nuralyui/dropdown 0.0.2 → 0.0.4
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/hy-dropdown.component.d.ts +1 -0
- package/hy-dropdown.component.d.ts.map +1 -1
- package/hy-dropdown.component.js +7 -3
- package/hy-dropdown.component.js.map +1 -1
- package/hy-dropdown.style.d.ts.map +1 -1
- package/hy-dropdown.style.js +5 -4
- package/hy-dropdown.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-dropdown-item.js +1 -1
- package/templates/hy-dropdown-item.js.map +1 -1
- package/templates/hy-dropdown-menu.js +2 -2
- package/templates/hy-dropdown-menu.js.map +1 -1
- package/templates/hy-dropdown-menu.style.d.ts.map +1 -1
- package/templates/hy-dropdown-menu.style.js +0 -1
- package/templates/hy-dropdown-menu.style.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;AACzE,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEhC,cAAc,EAAG,WAAW,CAAC;IAE7B,iBAAiB,EAAG,WAAW,CAAC;IAEhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,UAAS;IAEb,OAAO,cAAqB;IAE5B,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"hy-dropdown.component.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAC,iBAAiB,EAAE,OAAO,EAAE,WAAW,EAAC,MAAM,kBAAkB,CAAC;AACzE,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAEzC,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,0BAAU;IAEhC,cAAc,EAAG,WAAW,CAAC;IAE7B,iBAAiB,EAAG,WAAW,CAAC;IAEhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,IAAI,UAAS;IAEb,OAAO,cAAqB;IAE5B,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAG5B,MAAM,UAAS;IAIf,iBAAiB,UAAS;IAE1B,iBAAiB,oBAA2B;IAEnC,YAAY,IAAI,IAAI;IAa7B,cAAc,sBAIZ;IACF,iBAAiB,aAoBf;IACF,YAAY;IAKZ,cAAc,iBAAiB,KAAK,UAMlC;IACF,0BAA0B,sBAIxB;IACF,0BAA0B,aAKxB;IACF,oBAAoB,aAElB;IACF,oBAAoB,aAIlB;IACF,aAAa;IAIJ,oBAAoB;IAc7B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,GAAG,GAAG;IAsBvB,MAAM;CAQhB"}
|
package/hy-dropdown.component.js
CHANGED
|
@@ -24,6 +24,7 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
|
|
|
24
24
|
super(...arguments);
|
|
25
25
|
this.show = false;
|
|
26
26
|
this.trigger = "click" /* TriggerMode.Click */;
|
|
27
|
+
this.always = false;
|
|
27
28
|
this.isDropDownVisited = false;
|
|
28
29
|
this.dropDownDirection = "right" /* DropDownDirection.Right */;
|
|
29
30
|
this.onTriggerClick = () => __awaiter(this, void 0, void 0, function* () {
|
|
@@ -57,7 +58,7 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
|
|
|
57
58
|
};
|
|
58
59
|
this.onClickOutside = (onClickEvent) => {
|
|
59
60
|
const outsideClick = !onClickEvent.composedPath().includes(this);
|
|
60
|
-
if (outsideClick && this.show) {
|
|
61
|
+
if (outsideClick && this.show && !this.always) {
|
|
61
62
|
this.show = false;
|
|
62
63
|
this.initPosition();
|
|
63
64
|
}
|
|
@@ -158,7 +159,7 @@ __decorate([
|
|
|
158
159
|
query('.dropdown-container')
|
|
159
160
|
], HyDropdownComponent.prototype, "dropDownContainer", void 0);
|
|
160
161
|
__decorate([
|
|
161
|
-
property()
|
|
162
|
+
property({ type: Array })
|
|
162
163
|
], HyDropdownComponent.prototype, "options", void 0);
|
|
163
164
|
__decorate([
|
|
164
165
|
property({ type: Boolean, reflect: true })
|
|
@@ -167,8 +168,11 @@ __decorate([
|
|
|
167
168
|
property()
|
|
168
169
|
], HyDropdownComponent.prototype, "trigger", void 0);
|
|
169
170
|
__decorate([
|
|
170
|
-
property()
|
|
171
|
+
property({ type: Object })
|
|
171
172
|
], HyDropdownComponent.prototype, "template", void 0);
|
|
173
|
+
__decorate([
|
|
174
|
+
property({ type: Boolean, reflect: true })
|
|
175
|
+
], HyDropdownComponent.prototype, "always", void 0);
|
|
172
176
|
__decorate([
|
|
173
177
|
state()
|
|
174
178
|
], HyDropdownComponent.prototype, "isDropDownVisited", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, TemplateResult, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown.style.js';\nimport {DropDownDirection, IOption, TriggerMode} from './dropdown.types';\nimport './templates/hy-dropdown-item.js';\nimport './templates/hy-dropdown-menu.js';\n\n@customElement('hy-dropdown')\nexport class HyDropdownComponent extends LitElement {\n static override styles = styles;\n @query('slot')\n triggerElement!: HTMLElement;\n @query('.dropdown-container')\n dropDownContainer!: HTMLElement;\n @property()\n options!: IOption[];\n @property({type: Boolean, reflect: true})\n show = false;\n @property()\n trigger = TriggerMode.Click;\n @property()\n template!:TemplateResult<1>;\n\n\n @state()\n isDropDownVisited = false;\n @state()\n dropDownDirection = DropDownDirection.Right;\n\n override firstUpdated(): void {\n document.addEventListener('scroll', this.calculatePosition);\n window.addEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.addEventListener('click', this.onTriggerClick);\n window.addEventListener('click', this.onClickOutside);\n }\n }\n onTriggerClick = async () => {\n this.show = !this.show;\n await this.updateComplete;\n this.calculatePosition();\n };\n calculatePosition = () => {\n const triggerClientRect = this.shadowRoot!.querySelector('slot')!.assignedElements()[0].getBoundingClientRect()!;\n const dropDownWidth = this.dropDownContainer?.clientWidth;\n const dropDownHeight = this.dropDownContainer?.clientHeight;\n const availableBottomSpace = window.visualViewport!.height - triggerClientRect.bottom;\n const availableRightSpace = window.visualViewport!.width - triggerClientRect.left - triggerClientRect.width;\n const availableLeftSpace = triggerClientRect.right;\n this.dropDownContainer.style.position = 'fixed';\n if (dropDownHeight > availableBottomSpace) {\n this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n } else {\n //this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height+8}px`;\n }\n if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {\n this.dropDownContainer.style.right = `${availableRightSpace}px`;\n this.dropDownDirection = DropDownDirection.Left;\n } else {\n this.dropDownDirection = DropDownDirection.Right;\n this.dropDownContainer.style.removeProperty('right');\n }\n };\n initPosition() {\n this.dropDownContainer.style.removeProperty('top');\n this.dropDownContainer.style.removeProperty('position');\n this.dropDownContainer.style.removeProperty('right');\n }\n onClickOutside = (onClickEvent:Event) => {\n const outsideClick = !onClickEvent.composedPath().includes(this)\n if (outsideClick && this.show){\n this.show = false;\n this.initPosition();\n }\n };\n onMouseEnterTriggerElement = async () => {\n this.show = true;\n await this.updateComplete;\n this.calculatePosition();\n };\n onMouseLeaveTriggerElement = () => {\n const waitIsDropDownVisited = 50;\n setTimeout(() => {\n if (!this.isDropDownVisited) this.show = false;\n }, waitIsDropDownVisited);\n };\n onMouseEnterDropDown = () => {\n this.isDropDownVisited = true;\n };\n onMouseLeaveDropDown = () => {\n this.isDropDownVisited = false;\n this.show = false;\n this.initPosition();\n };\n onOptionClick() {\n this.show = false;\n }\n\n override disconnectedCallback() {\n document.removeEventListener('scroll', this.calculatePosition);\n window.removeEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.removeEventListener('click', this.onTriggerClick);\n window.removeEventListener('click', this.onClickOutside);\n }\n }\n\n display(options: IOption[]): any {\n return options.map((option) => {\n if (option.children) {\n return html`<hy-dropdown-menu\n .direction=${this.dropDownDirection}\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n >\n <div class=\"dropdown-container\">${this.display(option.children)}</div>\n </hy-dropdown-menu>`;\n } else {\n return html`<hy-dropdown-item\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n .value=${option.value}\n ></hy-dropdown-item>`;\n }\n });\n }\n\n override render() {\n return html`\n <slot></slot>\n <div class=\"dropdown-container\" @click-item=${this.onOptionClick}>\n ${this.template?html`${this.show ? this.template : nothing}`: this.display(this.options)}\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"hy-dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, TemplateResult, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown.style.js';\nimport {DropDownDirection, IOption, TriggerMode} from './dropdown.types';\nimport './templates/hy-dropdown-item.js';\nimport './templates/hy-dropdown-menu.js';\n\n@customElement('hy-dropdown')\nexport class HyDropdownComponent extends LitElement {\n static override styles = styles;\n @query('slot')\n triggerElement!: HTMLElement;\n @query('.dropdown-container')\n dropDownContainer!: HTMLElement;\n @property({type: Array})\n options!: IOption[];\n @property({type: Boolean, reflect: true})\n show = false;\n @property()\n trigger = TriggerMode.Click;\n @property({type: Object})\n template!:TemplateResult<1>;\n\n @property({type: Boolean, reflect: true})\n always = false;\n\n\n @state()\n isDropDownVisited = false;\n @state()\n dropDownDirection = DropDownDirection.Right;\n\n override firstUpdated(): void {\n document.addEventListener('scroll', this.calculatePosition);\n window.addEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.addEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.addEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.addEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.addEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.addEventListener('click', this.onTriggerClick);\n window.addEventListener('click', this.onClickOutside);\n }\n }\n onTriggerClick = async () => {\n this.show = !this.show;\n await this.updateComplete;\n this.calculatePosition();\n };\n calculatePosition = () => {\n const triggerClientRect = this.shadowRoot!.querySelector('slot')!.assignedElements()[0].getBoundingClientRect()!;\n const dropDownWidth = this.dropDownContainer?.clientWidth;\n const dropDownHeight = this.dropDownContainer?.clientHeight;\n const availableBottomSpace = window.visualViewport!.height - triggerClientRect.bottom;\n const availableRightSpace = window.visualViewport!.width - triggerClientRect.left - triggerClientRect.width;\n const availableLeftSpace = triggerClientRect.right;\n this.dropDownContainer.style.position = 'fixed';\n if (dropDownHeight > availableBottomSpace) {\n this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;\n } else {\n //this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height+8}px`;\n }\n if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {\n this.dropDownContainer.style.right = `${availableRightSpace}px`;\n this.dropDownDirection = DropDownDirection.Left;\n } else {\n this.dropDownDirection = DropDownDirection.Right;\n this.dropDownContainer.style.removeProperty('right');\n }\n };\n initPosition() {\n this.dropDownContainer.style.removeProperty('top');\n this.dropDownContainer.style.removeProperty('position');\n this.dropDownContainer.style.removeProperty('right');\n }\n onClickOutside = (onClickEvent:Event) => {\n const outsideClick = !onClickEvent.composedPath().includes(this)\n if (outsideClick && this.show && !this.always){\n this.show = false;\n this.initPosition();\n }\n };\n onMouseEnterTriggerElement = async () => {\n this.show = true;\n await this.updateComplete;\n this.calculatePosition();\n };\n onMouseLeaveTriggerElement = () => {\n const waitIsDropDownVisited = 50;\n setTimeout(() => {\n if (!this.isDropDownVisited) this.show = false;\n }, waitIsDropDownVisited);\n };\n onMouseEnterDropDown = () => {\n this.isDropDownVisited = true;\n };\n onMouseLeaveDropDown = () => {\n this.isDropDownVisited = false;\n this.show = false;\n this.initPosition();\n };\n onOptionClick() {\n this.show = false;\n }\n\n override disconnectedCallback() {\n document.removeEventListener('scroll', this.calculatePosition);\n window.removeEventListener('resize', this.calculatePosition);\n if (this.trigger == TriggerMode.Hover) {\n this.triggerElement.removeEventListener('mouseenter', this.onMouseEnterTriggerElement);\n this.triggerElement.removeEventListener('mouseleave', this.onMouseLeaveTriggerElement);\n this.dropDownContainer.removeEventListener('mouseenter', this.onMouseEnterDropDown);\n this.dropDownContainer.removeEventListener('mouseleave', this.onMouseLeaveDropDown);\n } else {\n this.triggerElement.removeEventListener('click', this.onTriggerClick);\n window.removeEventListener('click', this.onClickOutside);\n }\n }\n\n display(options: IOption[]): any {\n return options.map((option) => {\n if (option.children) {\n return html`<hy-dropdown-menu\n .direction=${this.dropDownDirection}\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n >\n <div class=\"dropdown-container\">${this.display(option.children)}</div>\n </hy-dropdown-menu>`;\n } else {\n return html`<hy-dropdown-item\n .disabled=${option.disabled}\n .icon=${option.icon}\n .label=${option.label}\n .value=${option.value}\n ></hy-dropdown-item>`;\n }\n });\n }\n\n override render() {\n return html`\n <slot></slot>\n <div class=\"dropdown-container\" @click-item=${this.onOptionClick}>\n ${this.template?html`${this.show ? this.template : nothing}`: this.display(this.options)}\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown.style.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hy-dropdown.style.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AA8CA,eAAO,MAAM,MAAM,yBAAgB,CAAC"}
|
package/hy-dropdown.style.js
CHANGED
|
@@ -17,18 +17,19 @@ const dropdownStyle = css `
|
|
|
17
17
|
box-shadow: var(--hybrid-dropdown-box-shadow);
|
|
18
18
|
}
|
|
19
19
|
:host {
|
|
20
|
+
--hybrid-icon-color: #5d5d5d;
|
|
20
21
|
--hybrid-dropdown-width: 150px;
|
|
21
22
|
--hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
|
|
22
23
|
--hybrid-dropdown-padding: 10px;
|
|
23
|
-
--hybrid-dropdown-background-color: #
|
|
24
|
-
--hybrid-dropdown-hovered-background-color: #
|
|
24
|
+
--hybrid-dropdown-background-color: #f4f4f4;
|
|
25
|
+
--hybrid-dropdown-hovered-background-color: #e4e3e3;
|
|
25
26
|
--hybrid-dropdown-text-color: #000000;
|
|
26
27
|
--hybrid-dropdown-disabled-background-color: #f4f4f4;
|
|
27
28
|
--hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);
|
|
28
29
|
--hybrid-dropdown-only-text-padding-left: 18px;
|
|
29
30
|
--hybrid-dropdown-icon-and-text-padding-left: 4px;
|
|
30
31
|
--hybrid-dropdown-menu-children-top: 10px;
|
|
31
|
-
--hybrid-dropdown-menu-children-offset:
|
|
32
|
+
--hybrid-dropdown-menu-children-offset: -2px;
|
|
32
33
|
--hybrid-dropdown-menu-children-z-index: 2;
|
|
33
34
|
--hybrid-dropdown-font-size-local: 13px;
|
|
34
35
|
--hybrid-dropdown-border-radius : 0px;
|
|
@@ -36,7 +37,7 @@ const dropdownStyle = css `
|
|
|
36
37
|
@media (prefers-color-scheme: dark) {
|
|
37
38
|
:host {
|
|
38
39
|
--hybrid-dropdown-background-color: #1b1b1b;
|
|
39
|
-
--hybrid-dropdown-hovered-background-color: #
|
|
40
|
+
--hybrid-dropdown-hovered-background-color: #2b2b2b;
|
|
40
41
|
--hybrid-dropdown-disabled-background-color: #6f6f6f;
|
|
41
42
|
--hybrid-dropdown-text-color: #f4f4f4;
|
|
42
43
|
}
|
package/hy-dropdown.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,aAAa,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"hy-dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/hy-dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,aAAa,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownStyle = css`\n .dropdown-container {\n display: none;\n z-index:1;\n border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));\n font-family: var(--hybrid-dropdown-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif, \"system-ui\", \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, SFProLocalRange;);\n }\n :host {\n cursor: pointer;\n }\n\n :host([show]) .dropdown-container {\n display: block;\n position: absolute;\n width: var(--hybrid-dropdown-width);\n box-shadow: var(--hybrid-dropdown-box-shadow);\n }\n :host {\n --hybrid-icon-color: #5d5d5d;\n --hybrid-dropdown-width: 150px;\n --hybrid-dropdown-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.1);\n --hybrid-dropdown-padding: 10px;\n --hybrid-dropdown-background-color: #f4f4f4;\n --hybrid-dropdown-hovered-background-color: #e4e3e3;\n --hybrid-dropdown-text-color: #000000;\n --hybrid-dropdown-disabled-background-color: #f4f4f4;\n --hybrid-dropdown-disabled-text-color: rgba(0, 0, 0, 0.5);\n --hybrid-dropdown-only-text-padding-left: 18px;\n --hybrid-dropdown-icon-and-text-padding-left: 4px;\n --hybrid-dropdown-menu-children-top: 10px;\n --hybrid-dropdown-menu-children-offset: -2px;\n --hybrid-dropdown-menu-children-z-index: 2;\n --hybrid-dropdown-font-size-local: 13px;\n --hybrid-dropdown-border-radius : 0px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-dropdown-background-color: #1b1b1b;\n --hybrid-dropdown-hovered-background-color: #2b2b2b;\n --hybrid-dropdown-disabled-background-color: #6f6f6f;\n --hybrid-dropdown-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = dropdownStyle;\n"]}
|
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@ let HyDropdownItem = class HyDropdownItem extends LitElement {
|
|
|
18
18
|
this.dispatchEvent(new CustomEvent('click-item', { detail: { value: this.value }, composed: true, bubbles: true }));
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return html `<div @click=${this.onClick}>${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}<
|
|
21
|
+
return html `<div @click=${this.onClick}>${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}<hy-label class="option-label">${this.label}<hy-label></div>`;
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
HyDropdownItem.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;IAiBnB,CAAC;IAXC,OAAO,CAAC,cAAqB;QAC3B,cAAc,CAAC,eAAe,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,OAAO,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAC5D,
|
|
1
|
+
{"version":3,"file":"hy-dropdown-item.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;IAiBnB,CAAC;IAXC,OAAO,CAAC,cAAqB;QAC3B,cAAc,CAAC,eAAe,EAAE,CAAC;QACjC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IACpH,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,OAAO,IACpC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAC5D,kCAAkC,IAAI,CAAC,KAAK,kBAAkB,CAAC;IACjE,CAAC;CACF,CAAA;AArBiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,EAAE;6CACI;AATJ,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAsB1B;SAtBY,cAAc","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown-item.style.js';\n\n@customElement('hy-dropdown-item')\nexport class HyDropdownItem extends LitElement {\n static override styles = styles;\n @property({reflect: true, type: String})\n icon!: string;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property()\n label!: string;\n @property()\n value!: string;\n\n onClick(clickItemEvent: Event) {\n clickItemEvent.stopPropagation();\n if (!this.disabled)\n this.dispatchEvent(new CustomEvent('click-item', {detail: {value: this.value}, composed: true, bubbles: true}));\n }\n\n override render() {\n return html`<div @click=${this.onClick}>${\n this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing\n }<hy-label class=\"option-label\">${this.label}<hy-label></div>`;\n }\n}\n"]}
|
|
@@ -33,9 +33,9 @@ let HyDropdownMenu = class HyDropdownMenu extends LitElement {
|
|
|
33
33
|
this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return html `<div @
|
|
36
|
+
return html `<div @mousedown=${this.onClickMenu}>
|
|
37
37
|
${this.icon ? html `<hy-icon name=${this.icon}></hy-icon>` : nothing}
|
|
38
|
-
<
|
|
38
|
+
<hy-label class="menu-label"> ${this.label}</hy-label>
|
|
39
39
|
<hy-icon
|
|
40
40
|
name="${this.direction == "right" /* DropDownDirection.Right */ ? 'caret-right' : 'caret-left'}"
|
|
41
41
|
id="caret-icon"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,
|
|
1
|
+
{"version":3,"file":"hy-dropdown-menu.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,6BAA6B,CAAC;AAGnD,IAAa,cAAc,GAA3B,MAAa,cAAe,SAAQ,UAAU;IAA9C;;QAKE,aAAQ,GAAG,KAAK,CAAC;QAQjB,iBAAY,GAAG,KAAK,CAAC;QAOrB,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC/C,CAAC,CAAC;QACF,qBAAgB,GAAG,GAAG,EAAE;YACtB,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAChD,CAAC,CAAC;IAqBJ,CAAC;IA/BU,YAAY;QACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAQD,WAAW,CAAC,cAAqB;QAC/B,cAAc,CAAC,eAAe,EAAE,CAAC;IACnC,CAAC;IAEQ,oBAAoB;QAC3B,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACzE,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC3E,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,WAAW;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,IAAI,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,OAAO;sCACnC,IAAI,CAAC,KAAK;;gBAEhC,IAAI,CAAC,SAAS,yCAA2B,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY;;;6BAG3D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;WACtD,CAAC;IACV,CAAC;CACF,CAAA;AA7CiB,qBAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,KAAK,CAAC;kDACY;AAEzB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAC,CAAC;gDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAC,CAAC;4CAC1B;AAEd;IADC,QAAQ,EAAE;6CACI;AAEf;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,KAAK,EAAE;oDACa;AAbV,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA8C1B;SA9CY,cAAc","sourcesContent":["import {LitElement, html, nothing} from 'lit';\nimport {customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './hy-dropdown-menu.style.js';\nimport {DropDownDirection} from '../dropdown.types';\n@customElement('hy-dropdown-menu')\nexport class HyDropdownMenu extends LitElement {\n static override styles = styles;\n @query('div')\n menuOption!: HTMLElement;\n @property({reflect: true, type: Boolean})\n disabled = false;\n @property({reflect: true, type: String})\n icon!: string;\n @property()\n label!: string;\n @property({reflect: true})\n direction!: DropDownDirection;\n @state()\n showChildren = false;\n\n override firstUpdated(): void {\n this.menuOption.addEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.addEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n onMouseEnterMenu = () => {\n if (!this.disabled) this.showChildren = true;\n };\n onMouseLeaveMenu = () => {\n if (!this.disabled) this.showChildren = false;\n };\n onClickMenu(menuClickEvent: Event) {\n menuClickEvent.stopPropagation();\n }\n\n override disconnectedCallback(): void {\n this.menuOption.removeEventListener('mouseenter', this.onMouseEnterMenu);\n this.menuOption.removeEventListener('mouseleave', this.onMouseLeaveMenu);\n }\n\n override render() {\n return html`<div @mousedown=${this.onClickMenu}>\n ${this.icon ? html`<hy-icon name=${this.icon}></hy-icon>` : nothing}\n <hy-label class=\"menu-label\"> ${this.label}</hy-label>\n <hy-icon\n name=\"${this.direction == DropDownDirection.Right ? 'caret-right' : 'caret-left'}\"\n id=\"caret-icon\"\n ></hy-icon>\n <slot style=\"display:${this.showChildren ? 'block' : 'none'}\"></slot>\n </div>`;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hy-dropdown-menu.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.style.ts"],"names":[],"mappings":"AAiDA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-menu.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"hy-dropdown-menu.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-menu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6C5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownMenuStyle = css`\n div {\n padding: var(--hybrid-dropdown-padding);\n position: relative;\n cursor: pointer;\n background-color: var(--hybrid-dropdown-background-color);\n display: flex;\n align-items: center;\n }\n hy-icon {\n display: flex;\n }\n #caret-icon {\n flex-grow: 1;\n justify-content: flex-end;\n }\n\n :host(:not([disabled])) div:hover {\n background-color: var(--hybrid-dropdown-hovered-background-color);\n }\n :host([disabled]) div {\n cursor: not-allowed;\n background-color: var(--hybrid-dropdown-disabled-background-color);\n color: var(--hybrid-dropdown-disabled-text-color);\n }\n\n ::slotted(*) {\n z-index: var(--hybrid-dropdown-menu-children-z-index);\n top: var(--hybrid-dropdown-menu-children-top);\n cursor: pointer;\n }\n :host([direction='left']) ::slotted(*) {\n right: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));\n }\n\n :host([direction='right']) ::slotted(*) {\n left: calc(var(--hybrid-dropdown-width) - var(--hybrid-dropdown-menu-children-offset));\n }\n\n :host(:not([icon])) .menu-label {\n padding-left: var(--hybrid-dropdown-only-text-padding-left);\n }\n :host([icon]) .menu-label {\n padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n }\n`;\n\nexport const styles = [dropdownMenuStyle];\n"]}
|