@nuralyui/dropdown 0.0.1 → 0.0.3
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.map +1 -1
- package/hy-dropdown.component.js +4 -4
- package/hy-dropdown.component.js.map +1 -1
- package/hy-dropdown.style.d.ts.map +1 -1
- package/hy-dropdown.style.js +5 -1
- package/hy-dropdown.style.js.map +1 -1
- package/package.json +1 -1
- package/templates/hy-dropdown-item.style.d.ts.map +1 -1
- package/templates/hy-dropdown-item.style.js +27 -25
- package/templates/hy-dropdown-item.style.js.map +1 -1
- package/templates/hy-dropdown-menu.js +1 -1
- 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 +1 -0
- 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,
|
|
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;IAI5B,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
|
@@ -14,7 +14,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
17
|
-
import { LitElement, html } from 'lit';
|
|
17
|
+
import { LitElement, html, nothing } from 'lit';
|
|
18
18
|
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
19
19
|
import { styles } from './hy-dropdown.style.js';
|
|
20
20
|
import './templates/hy-dropdown-item.js';
|
|
@@ -37,14 +37,14 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
|
|
|
37
37
|
const dropDownWidth = (_a = this.dropDownContainer) === null || _a === void 0 ? void 0 : _a.clientWidth;
|
|
38
38
|
const dropDownHeight = (_b = this.dropDownContainer) === null || _b === void 0 ? void 0 : _b.clientHeight;
|
|
39
39
|
const availableBottomSpace = window.visualViewport.height - triggerClientRect.bottom;
|
|
40
|
-
const availableRightSpace = window.visualViewport.width - triggerClientRect.left;
|
|
40
|
+
const availableRightSpace = window.visualViewport.width - triggerClientRect.left - triggerClientRect.width;
|
|
41
41
|
const availableLeftSpace = triggerClientRect.right;
|
|
42
42
|
this.dropDownContainer.style.position = 'fixed';
|
|
43
43
|
if (dropDownHeight > availableBottomSpace) {
|
|
44
44
|
this.dropDownContainer.style.top = `${triggerClientRect.top - dropDownHeight}px`;
|
|
45
45
|
}
|
|
46
46
|
else {
|
|
47
|
-
this.dropDownContainer.style.top = `${triggerClientRect.top +
|
|
47
|
+
//this.dropDownContainer.style.top = `${triggerClientRect.top +triggerClientRect.height+8}px`;
|
|
48
48
|
}
|
|
49
49
|
if (dropDownWidth > availableRightSpace && dropDownWidth < availableLeftSpace) {
|
|
50
50
|
this.dropDownContainer.style.right = `${availableRightSpace}px`;
|
|
@@ -145,7 +145,7 @@ let HyDropdownComponent = class HyDropdownComponent extends LitElement {
|
|
|
145
145
|
return html `
|
|
146
146
|
<slot></slot>
|
|
147
147
|
<div class="dropdown-container" @click-item=${this.onOptionClick}>
|
|
148
|
-
${this.template ? html `${this.template}` : this.display(this.options)}
|
|
148
|
+
${this.template ? html `${this.show ? this.template : nothing}` : this.display(this.options)}
|
|
149
149
|
</div>
|
|
150
150
|
`;
|
|
151
151
|
}
|
|
@@ -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} 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;\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}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.template}`: 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":";;;;;;;;;;;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAC,MAAM,EAAC,MAAM,wBAAwB,CAAC;AAE9C,OAAO,iCAAiC,CAAC;AACzC,OAAO,iCAAiC,CAAC;AAGzC,IAAa,mBAAmB,GAAhC,MAAa,mBAAoB,SAAQ,UAAU;IAAnD;;QASE,SAAI,GAAG,KAAK,CAAC;QAEb,YAAO,mCAAqB;QAM5B,sBAAiB,GAAG,KAAK,CAAC;QAE1B,sBAAiB,yCAA2B;QAe5C,mBAAc,GAAG,GAAS,EAAE;YAC1B,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAA,CAAC;QACF,sBAAiB,GAAG,GAAG,EAAE;;YACvB,MAAM,iBAAiB,GAAG,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC,qBAAqB,EAAG,CAAC;YACjH,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,CAAC;YAC1D,MAAM,cAAc,GAAG,MAAA,IAAI,CAAC,iBAAiB,0CAAE,YAAY,CAAC;YAC5D,MAAM,oBAAoB,GAAG,MAAM,CAAC,cAAe,CAAC,MAAM,GAAG,iBAAiB,CAAC,MAAM,CAAC;YACtF,MAAM,mBAAmB,GAAG,MAAM,CAAC,cAAe,CAAC,KAAK,GAAG,iBAAiB,CAAC,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC;YAC5G,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,CAAC;YACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YAChD,IAAI,cAAc,GAAG,oBAAoB,EAAE;gBACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,iBAAiB,CAAC,GAAG,GAAG,cAAc,IAAI,CAAC;aAClF;iBAAM;gBACL,8FAA8F;aAC/F;YACD,IAAI,aAAa,GAAG,mBAAmB,IAAI,aAAa,GAAG,kBAAkB,EAAE;gBAC7E,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,mBAAmB,IAAI,CAAC;gBAChE,IAAI,CAAC,iBAAiB,sCAAyB,CAAC;aACjD;iBAAM;gBACL,IAAI,CAAC,iBAAiB,wCAA0B,CAAC;gBACjD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;aACtD;QACH,CAAC,CAAC;QAMF,mBAAc,GAAG,CAAC,YAAkB,EAAE,EAAE;YACtC,MAAM,YAAY,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;YAChE,IAAI,YAAY,IAAI,IAAI,CAAC,IAAI,EAAC;gBAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;gBAClB,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC,CAAC;QACF,+BAA0B,GAAG,GAAS,EAAE;YACtC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAA,CAAC;QACF,+BAA0B,GAAG,GAAG,EAAE;YAChC,MAAM,qBAAqB,GAAG,EAAE,CAAC;YACjC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,IAAI,CAAC,iBAAiB;oBAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACjD,CAAC,EAAE,qBAAqB,CAAC,CAAC;QAC5B,CAAC,CAAC;QACF,yBAAoB,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;QACF,yBAAoB,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC;IAiDJ,CAAC;IAtHU,YAAY;QACnB,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC5D,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1D,IAAI,IAAI,CAAC,OAAO,mCAAqB,EAAE;YACrC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YACpF,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YACpF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACjF,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;SAClF;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACnE,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SACvD;IACH,CAAC;IA2BD,YAAY;QACV,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QACnD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QACxD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;IACvD,CAAC;IA2BD,aAAa;QACX,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEQ,oBAAoB;QAC3B,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC/D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7D,IAAI,IAAI,CAAC,OAAO,mCAAqB,EAAE;YACrC,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YACvF,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;YACvF,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YACpF,IAAI,CAAC,iBAAiB,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;SACrF;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;YACtE,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC1D;IACH,CAAC;IAED,OAAO,CAAC,OAAkB;QACxB,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YAC5B,IAAI,MAAM,CAAC,QAAQ,EAAE;gBACnB,OAAO,IAAI,CAAA;uBACI,IAAI,CAAC,iBAAiB;sBACvB,MAAM,CAAC,QAAQ;kBACnB,MAAM,CAAC,IAAI;mBACV,MAAM,CAAC,KAAK;;4CAEa,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC;4BAC7C,CAAC;aACtB;iBAAM;gBACL,OAAO,IAAI,CAAA;sBACG,MAAM,CAAC,QAAQ;kBACnB,MAAM,CAAC,IAAI;mBACV,MAAM,CAAC,KAAK;mBACZ,MAAM,CAAC,KAAK;6BACF,CAAC;aACvB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;oDAEqC,IAAI,CAAC,aAAa;QAC9D,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,EAAE,CAAA,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;KAEzF,CAAC;IACJ,CAAC;CACF,CAAA;AA1IiB,0BAAM,GAAG,MAAO,CAAA;AAEhC;IADC,KAAK,CAAC,MAAM,CAAC;2DACe;AAE7B;IADC,KAAK,CAAC,qBAAqB,CAAC;8DACG;AAEhC;IADC,QAAQ,EAAE;oDACS;AAEpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDAC5B;AAEb;IADC,QAAQ,EAAE;oDACiB;AAE5B;IADC,QAAQ,EAAE;qDACiB;AAI5B;IADC,KAAK,EAAE;8DACkB;AAE1B;IADC,KAAK,EAAE;8DACoC;AAnBjC,mBAAmB;IAD/B,aAAa,CAAC,aAAa,CAAC;GAChB,mBAAmB,CA2I/B;SA3IY,mBAAmB","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 +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":"AA6CA,eAAO,MAAM,MAAM,yBAAgB,CAAC"}
|
package/hy-dropdown.style.js
CHANGED
|
@@ -3,6 +3,8 @@ const dropdownStyle = css `
|
|
|
3
3
|
.dropdown-container {
|
|
4
4
|
display: none;
|
|
5
5
|
z-index:1;
|
|
6
|
+
border-radius: var(--hybrid-dropdown-border-radius, var(--hybrid-dropdown-border-radius));
|
|
7
|
+
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;);
|
|
6
8
|
}
|
|
7
9
|
:host {
|
|
8
10
|
cursor: pointer;
|
|
@@ -28,10 +30,12 @@ const dropdownStyle = css `
|
|
|
28
30
|
--hybrid-dropdown-menu-children-top: 10px;
|
|
29
31
|
--hybrid-dropdown-menu-children-offset: 5px;
|
|
30
32
|
--hybrid-dropdown-menu-children-z-index: 2;
|
|
33
|
+
--hybrid-dropdown-font-size-local: 13px;
|
|
34
|
+
--hybrid-dropdown-border-radius : 0px;
|
|
31
35
|
}
|
|
32
36
|
@media (prefers-color-scheme: dark) {
|
|
33
37
|
:host {
|
|
34
|
-
--hybrid-dropdown-background-color: #
|
|
38
|
+
--hybrid-dropdown-background-color: #1b1b1b;
|
|
35
39
|
--hybrid-dropdown-hovered-background-color: #4c4c4c;
|
|
36
40
|
--hybrid-dropdown-disabled-background-color: #6f6f6f;
|
|
37
41
|
--hybrid-dropdown-text-color: #f4f4f4;
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CxB,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-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: #e0e0e0;\n --hybrid-dropdown-hovered-background-color: #8d8d8d;\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: 5px;\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: #4c4c4c;\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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"hy-dropdown-item.style.d.ts","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAiCA,eAAO,MAAM,MAAM,2BAAsB,CAAC"}
|
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
const dropdownItemStyle = css `
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
hy-icon {
|
|
12
|
-
display: flex;
|
|
13
|
-
}
|
|
14
|
-
:host(:not([disabled])) div:hover {
|
|
15
|
-
background-color: var(--hybrid-dropdown-hovered-background-color);
|
|
16
|
-
}
|
|
17
|
-
:host([disabled]) div {
|
|
18
|
-
background-color: var(--hybrid-dropdown-disabled-background-color);
|
|
19
|
-
cursor: not-allowed;
|
|
20
|
-
color: var(--hybrid-dropdown-disabled-text-color);
|
|
21
|
-
}
|
|
3
|
+
div {
|
|
4
|
+
padding: var(--hybrid-dropdown-padding);
|
|
5
|
+
cursor: pointer;
|
|
6
|
+
background-color: var(--hybrid-dropdown-background-color);
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
color: var(--hybrid-dropdown-text-color);
|
|
10
|
+
font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */
|
|
22
11
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
12
|
+
}
|
|
13
|
+
hy-icon {
|
|
14
|
+
display: flex;
|
|
15
|
+
}
|
|
16
|
+
:host(:not([disabled])) div:hover {
|
|
17
|
+
background-color: var(--hybrid-dropdown-hovered-background-color);
|
|
18
|
+
}
|
|
19
|
+
:host([disabled]) div {
|
|
20
|
+
background-color: var(--hybrid-dropdown-disabled-background-color);
|
|
21
|
+
cursor: not-allowed;
|
|
22
|
+
color: var(--hybrid-dropdown-disabled-text-color);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:host(:not([icon])) .option-label {
|
|
26
|
+
padding-left: var(--hybrid-dropdown-only-text-padding-left);
|
|
27
|
+
}
|
|
28
|
+
:host([icon]) .option-label {
|
|
29
|
+
padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);
|
|
30
|
+
}
|
|
29
31
|
`;
|
|
30
32
|
export const styles = [dropdownItemStyle];
|
|
31
33
|
//# sourceMappingURL=hy-dropdown-item.style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"hy-dropdown-item.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/templates/hy-dropdown-item.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst dropdownItemStyle = css`\n div {\n padding: var(--hybrid-dropdown-padding);\n cursor: pointer;\n background-color: var(--hybrid-dropdown-background-color);\n display: flex;\n align-items: center;\n color: var(--hybrid-dropdown-text-color);\n font-size: var(--hybrid-dropdown-font-size, var(--hybrid-dropdown-font-size-local)); /* Default value added */\n\n }\n hy-icon {\n display: flex;\n }\n :host(:not([disabled])) div:hover {\n background-color: var(--hybrid-dropdown-hovered-background-color);\n }\n :host([disabled]) div {\n background-color: var(--hybrid-dropdown-disabled-background-color);\n cursor: not-allowed;\n color: var(--hybrid-dropdown-disabled-text-color);\n }\n\n :host(:not([icon])) .option-label {\n padding-left: var(--hybrid-dropdown-only-text-padding-left);\n }\n :host([icon]) .option-label {\n padding-left: var(--hybrid-dropdown-icon-and-text-padding-left);\n }\n`;\n\nexport const styles = [dropdownItemStyle];"]}
|
|
@@ -33,7 +33,7 @@ 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
|
<span class="menu-label"> ${this.label}</span>
|
|
39
39
|
<hy-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;kCACvC,IAAI,CAAC,KAAK;;gBAE5B,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 <span class=\"menu-label\"> ${this.label}</span>\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":"AAkDA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C5B,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 border-radius: 10px;\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"]}
|