npm - @nuralyui/select - Versions diffs - 0.0.1 → 0.0.2 - Mend

@nuralyui/select 0.0.1 → 0.0.2

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

Files changed (8) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/select",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "",
     "main": "index.js",
     "type": "module",

package/select.component.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-import '../icon/icon.component.js';
 import { IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
 export declare class HySelectComponent extends LitElement {
     static styles: import("lit").CSSResult;

package/select.component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAI9D,OAAO,~~2BAA2B,CAAC;AACnC,OAAO,~~EAAC,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAIrG,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,eAAe,EAAC,MAAM,EAAE,CAAG;IAE3B,WAAW,SAAsB;IAEjC,QAAQ,UAAS;IAEjB,IAAI,aAAsB;IAE1B,aAAa,sBAA8B;IAE3C,IAAI,UAAS;IAEb,MAAM,eAAwB;IAE9B,IAAI,aAAqB;IAGzB,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,cAAc,EAAG,WAAW,CAAC;IAE7B,OAAO,EAAG,WAAW,CAAC;cAEH,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;~~YAatD~~,aAAa;IAM3B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,MAAM;cAKK,MAAM,IAAI,OAAO;CA6DrC"}
1	+ {"version":3,"file":"select.component.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgB,MAAM,KAAK,CAAC;AAI9D,OAAO,EAAC,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAIrG,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAU;IAGhC,OAAO,EAAG,OAAO,EAAE,CAAC;IAEpB,eAAe,EAAC,MAAM,EAAE,CAAG;IAE3B,WAAW,SAAsB;IAEjC,QAAQ,UAAS;IAEjB,IAAI,aAAsB;IAE1B,aAAa,sBAA8B;IAE3C,IAAI,UAAS;IAEb,MAAM,eAAwB;IAE9B,IAAI,aAAqB;IAGzB,QAAQ,EAAE,OAAO,EAAE,CAAM;IAGzB,cAAc,EAAG,WAAW,CAAC;IAE7B,OAAO,EAAG,WAAW,CAAC;cAEH,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;YActD,aAAa;IAM3B,OAAO,CAAC,wBAAwB;IAgBhC,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,MAAM;cAKK,MAAM,IAAI,OAAO;CA6DrC"}

package/select.component.js CHANGED Viewed

@@ -18,7 +18,6 @@ import { LitElement, html, nothing } from 'lit';
 import { property, state, customElement, query } from 'lit/decorators.js';
 import { styles } from './select.style.js';
 import { map } from 'lit/directives/map.js';
-import '../icon/icon.component.js';
 import { OptionSelectionMode, OptionSize, OptionStatus, OptionType } from './select.types.js';
 import { choose } from 'lit/directives/choose.js';
 import { EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR } from './select.constant.js';
@@ -39,7 +38,7 @@ let HySelectComponent = class HySelectComponent extends LitElement {
         if (_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected')) != JSON.stringify(this.defaultSelected)) {
             let defaultOptions = [];
             this.defaultSelected.forEach((value) => {
-                const option = this.options.find((option) => option.label == value);
+                const option = this.options.find((option) => option.value == value);
                 if (option)
                     defaultOptions.push(option);
             });

package/select.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {property,state, customElement, query} from 'lit/decorators.js';\nimport {styles} from './select.style.js';\nimport {map} from 'lit/directives/map.js';\nimport '../icon/icon.component.js';\nimport {IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType} from './select.types.js';\nimport {choose} from 'lit/directives/choose.js';\nimport {EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR} from './select.constant.js';\n\n@customElement('hy-select')\nexport class HySelectComponent extends LitElement {\n static override styles = styles;\n\n @property()\n options!: IOption[];\n @property()\n defaultSelected:string[]=[]\n @property()\n placeholder = 'Select an option';\n @property({type: Boolean, reflect: true})\n disabled = false;\n @property({reflect: true})\n type = OptionType.Default;\n @property()\n selectionMode = OptionSelectionMode.Single;\n @property({type: Boolean, reflect: true})\n show = false;\n @property({reflect: true})\n status = OptionStatus.Default;\n @property({reflect: true})\n size = OptionSize.Medium;\n\n @state()\n selected: IOption[] = [];\n\n @query('.options')\n optionsElement!: HTMLElement;\n @query('.wrapper')\n wrapper!: HTMLElement;\n\n protected override updated(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected'))!=JSON.stringify(this.defaultSelected)){\n let defaultOptions:IOption[]=[]\n this.defaultSelected.forEach((value)=>{\n const option = this.options.find((option)=>option.label ==value)\n if(option)\n defaultOptions.push(option)\n })\n this.selected =[...defaultOptions]\n }\n \n }\n \n private async toggleOptions() {\n this.show = !this.show;\n await this.updateComplete;\n if (this.show) this.calculateOptionsPosition();\n else this.initOptionsPosition();\n }\n private calculateOptionsPosition() {\n const wrapperBorderBottomWidth = +getComputedStyle(this.wrapper).borderBottomWidth.split('px')[0];\n const wrapperBorderTopWidth = +getComputedStyle(this.wrapper).borderTopWidth.split('px')[0];\n const clientRect = this.optionsElement.getBoundingClientRect();\n const availableBottomSpace =\n window.visualViewport!.height -\n clientRect.bottom +\n clientRect.height -\n this.wrapper.getBoundingClientRect().height;\n const availableTopSpace = clientRect.top;\n if (clientRect.height > availableBottomSpace && availableTopSpace > clientRect.height) {\n this.optionsElement.style.top = `${-clientRect.height - wrapperBorderTopWidth}px`;\n } else {\n this.optionsElement.style.top = `calc(100% + ${wrapperBorderBottomWidth}px)`;\n }\n }\n private initOptionsPosition() {\n this.optionsElement.style.removeProperty('top');\n }\n\n private selectOption(selectOptionEvent: Event, selectedOption: IOption) {\n selectOptionEvent.stopPropagation();\n if (this.selectionMode == OptionSelectionMode.Single) {\n this.selected = this.selected.length && this.selected[0].label == selectedOption.label ? [] : [selectedOption];\n this.toggleOptions();\n } else {\n if (this.selected.includes(selectedOption)) {\n this.selected = this.selected.filter(\n (previousSelectedOption) => previousSelectedOption.label != selectedOption.label\n );\n } else {\n this.selected = [...this.selected, selectedOption];\n }\n }\n this.dispatchChangeEvent()\n }\n private unselectAll(unselectAllEvent: Event) {\n unselectAllEvent.stopPropagation();\n this.selected = [];\n this.dispatchChangeEvent()\n }\n private unselectOne(unselectOneEvent: Event, selectedIndex: number) {\n unselectOneEvent.stopPropagation();\n this.selected = this.selected.filter((_, index) => index != selectedIndex);\n this.dispatchChangeEvent()\n }\n private dispatchChangeEvent() {\n let result = this.selectionMode == OptionSelectionMode.Single?this.selected[0]:this.selected\n this.dispatchEvent(new CustomEvent('changed', {detail: {value: result}, bubbles: true, composed: true}));\n }\n\n private onBlur() {\n this.show = false;\n this.initOptionsPosition();\n }\n\n protected override render(): unknown {\n return html`\n <slot name=\"label\"></slot>\n <div class=\"wrapper\" tabindex=\"0\" @click=\"${!this.disabled ? this.toggleOptions : nothing}\" @blur=${this.onBlur}>\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${choose(this.selectionMode, [\n [\n OptionSelectionMode.Single,\n () => html`${this.selected.length ? this.selected[0].label : this.placeholder}`,\n ],\n [\n OptionSelectionMode.Multiple,\n () =>\n html`${this.selected.length\n ? map(\n this.selected,\n (option, index) =>\n html`<span class=\"label\">\n <hy-icon\n name=\"remove\"\n id=\"unselect-one\"\n @click=${(e: Event) => this.unselectOne(e, index)}\n ></hy-icon\n >${option.label}</span\n >${this.selected.length - 1 != index ? MULTIPLE_OPTIONS_SEPARATOR : EMPTY_STRING}`\n )\n : this.placeholder}`,\n ],\n ])}\n </div>\n <div class=\"icons-container\">\n ${choose(this.status, [\n [OptionStatus.Default, () => undefined],\n [OptionStatus.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [OptionStatus.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.selected.length\n ? html`<hy-icon\n name=\"remove\"\n id=\"unselect-multiple\"\n @click=${(e: Event) => this.unselectAll(e)}\n ></hy-icon>`\n : nothing}\n <hy-icon name=\"angle-down\" id=\"arrow-icon\"></hy-icon>\n </div>\n <div class=\"options\">\n ${map(\n this.options,\n (option) =>\n html`<div class=\"option\" @click=\"${(e: Event) => this.selectOption(e, option)}\">\n ${this.selected.includes(option) ? html`<hy-icon name=\"check\" id=\"check-icon\"></hy-icon>` : nothing}\n <span class=\"option-text\">${option.label}</span>\n </div>`\n )}\n </div>\n </div>\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n}"]}
1	+ {"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,uDAAuD;AACvD,OAAO,EAAC,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAC,GAAG,EAAC,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAU,mBAAmB,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AACrG,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAChD,OAAO,EAAC,YAAY,EAAE,0BAA0B,EAAC,MAAM,sBAAsB,CAAC;AAG9E,IAAa,iBAAiB,GAA9B,MAAa,iBAAkB,SAAQ,UAAU;IAAjD;;QAME,oBAAe,GAAU,EAAE,CAAA;QAE3B,gBAAW,GAAG,kBAAkB,CAAC;QAEjC,aAAQ,GAAG,KAAK,CAAC;QAEjB,SAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAE1B,kBAAa,GAAG,mBAAmB,CAAC,MAAM,CAAC;QAE3C,SAAI,GAAG,KAAK,CAAC;QAEb,WAAM,GAAG,YAAY,CAAC,OAAO,CAAC;QAE9B,SAAI,GAAG,UAAU,CAAC,MAAM,CAAC;QAGzB,aAAQ,GAAc,EAAE,CAAC;IAgJ3B,CAAC;IAzIoB,OAAO,CAAC,kBAAkC;QAC3D,IAAG,kBAAkB,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC,IAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,EAAC;YAC9I,IAAI,cAAc,GAAW,EAAE,CAAA;YAE/B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK,EAAC,EAAE;gBACtC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAC,EAAE,CAAA,MAAM,CAAC,KAAK,IAAG,KAAK,CAAC,CAAA;gBAChE,IAAG,MAAM;oBACP,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;YAC9B,CAAC,CAAC,CAAA;YACD,IAAI,CAAC,QAAQ,GAAE,CAAC,GAAG,cAAc,CAAC,CAAA;SACnC;IAEH,CAAC;IAEa,aAAa;;YACzB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,MAAM,IAAI,CAAC,cAAc,CAAC;YAC1B,IAAI,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;;gBAC1C,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAClC,CAAC;KAAA;IACO,wBAAwB;QAC9B,MAAM,wBAAwB,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAClG,MAAM,qBAAqB,GAAG,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5F,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC;QAC/D,MAAM,oBAAoB,GACxB,MAAM,CAAC,cAAe,CAAC,MAAM;YAC7B,UAAU,CAAC,MAAM;YACjB,UAAU,CAAC,MAAM;YACjB,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC9C,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,CAAC;QACzC,IAAI,UAAU,CAAC,MAAM,GAAG,oBAAoB,IAAI,iBAAiB,GAAG,UAAU,CAAC,MAAM,EAAE;YACrF,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,MAAM,GAAG,qBAAqB,IAAI,CAAC;SACnF;aAAM;YACL,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,eAAe,wBAAwB,KAAK,CAAC;SAC9E;IACH,CAAC;IACO,mBAAmB;QACzB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC;IAEO,YAAY,CAAC,iBAAwB,EAAE,cAAuB;QACpE,iBAAiB,CAAC,eAAe,EAAE,CAAC;QACpC,IAAI,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC,MAAM,EAAE;YACpD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;YAC/G,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM;YACL,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,cAAc,CAAC,EAAE;gBAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAClC,CAAC,sBAAsB,EAAE,EAAE,CAAC,sBAAsB,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,CACjF,CAAC;aACH;iBAAM;gBACL,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;aACpD;SACF;QACD,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,WAAW,CAAC,gBAAuB;QACzC,gBAAgB,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;QACnB,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,WAAW,CAAC,gBAAuB,EAAE,aAAqB;QAChE,gBAAgB,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,IAAI,aAAa,CAAC,CAAC;QAC3E,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAC5B,CAAC;IACO,mBAAmB;QACzB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,IAAI,mBAAmB,CAAC,MAAM,CAAA,CAAC,CAAA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA,CAAC,CAAA,IAAI,CAAC,QAAQ,CAAA;QAC5F,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAE,MAAM,EAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC;IAC3G,CAAC;IAEO,MAAM;QACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;;kDAEmC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,WAAW,IAAI,CAAC,MAAM;;;cAGvG,MAAM,CAAC,IAAI,CAAC,aAAa,EAAE;YAC3B;gBACE,mBAAmB,CAAC,MAAM;gBAC1B,GAAG,EAAE,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;aAChF;YACD;gBACE,mBAAmB,CAAC,QAAQ;gBAC5B,GAAG,EAAE,CACH,IAAI,CAAA,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM;oBACzB,CAAC,CAAC,GAAG,CACD,IAAI,CAAC,QAAQ,EACb,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAChB,IAAI,CAAA;;;;yCAIW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,CAAC;;iCAEhD,MAAM,CAAC,KAAK;+BACd,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,YAAY,EAAE,CACvF;oBACH,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;aACzB;SACF,CAAC;;;cAGA,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE;YACpB,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC;YACvC,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,sDAAsD,CAAC;YACxF,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,+DAA+D,CAAC;SAChG,CAAC;cACA,IAAI,CAAC,QAAQ,CAAC,MAAM;YACpB,CAAC,CAAC,IAAI,CAAA;;;2BAGO,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;4BAChC;YACd,CAAC,CAAC,OAAO;;;;cAIT,GAAG,CACH,IAAI,CAAC,OAAO,EACZ,CAAC,MAAM,EAAE,EAAE,CACT,IAAI,CAAA,+BAA+B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC;oBACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA,kDAAkD,CAAC,CAAC,CAAC,OAAO;8CACvE,MAAM,CAAC,KAAK;uBACnC,CACV;;;;;KAKR,CAAC;IACJ,CAAC;CACF,CAAA;AAtKiB,wBAAM,GAAG,MAAO,CAAA;AAGhC;IADC,QAAQ,EAAE;kDACS;AAEpB;IADC,QAAQ,EAAE;0DACgB;AAE3B;IADC,QAAQ,EAAE;sDACsB;AAEjC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDACxB;AAEjB;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;+CACA;AAE1B;IADC,QAAQ,EAAE;wDACgC;AAE3C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;+CAC5B;AAEb;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;iDACI;AAE9B;IADC,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;+CACD;AAGzB;IADC,KAAK,EAAE;mDACiB;AAGzB;IADC,KAAK,CAAC,UAAU,CAAC;yDACW;AAE7B;IADC,KAAK,CAAC,UAAU,CAAC;kDACI;AA5BX,iBAAiB;IAD7B,aAAa,CAAC,WAAW,CAAC;GACd,iBAAiB,CAuK7B;SAvKY,iBAAiB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {property,state, customElement, query} from 'lit/decorators.js';\nimport {styles} from './select.style.js';\nimport {map} from 'lit/directives/map.js';\nimport {IOption, OptionSelectionMode, OptionSize, OptionStatus, OptionType} from './select.types.js';\nimport {choose} from 'lit/directives/choose.js';\nimport {EMPTY_STRING, MULTIPLE_OPTIONS_SEPARATOR} from './select.constant.js';\n\n@customElement('hy-select')\nexport class HySelectComponent extends LitElement {\n static override styles = styles;\n\n @property()\n options!: IOption[];\n @property()\n defaultSelected:string[]=[]\n @property()\n placeholder = 'Select an option';\n @property({type: Boolean, reflect: true})\n disabled = false;\n @property({reflect: true})\n type = OptionType.Default;\n @property()\n selectionMode = OptionSelectionMode.Single;\n @property({type: Boolean, reflect: true})\n show = false;\n @property({reflect: true})\n status = OptionStatus.Default;\n @property({reflect: true})\n size = OptionSize.Medium;\n\n @state()\n selected: IOption[] = [];\n\n @query('.options')\n optionsElement!: HTMLElement;\n @query('.wrapper')\n wrapper!: HTMLElement;\n\n protected override updated(_changedProperties: PropertyValues): void {\n if(_changedProperties.has('defaultSelected') && JSON.stringify(_changedProperties.get('defaultSelected'))!=JSON.stringify(this.defaultSelected)){\n let defaultOptions:IOption[]=[]\n\n this.defaultSelected.forEach((value)=>{\n const option = this.options.find((option)=>option.value ==value)\n if(option)\n defaultOptions.push(option)\n })\n this.selected =[...defaultOptions]\n }\n \n }\n \n private async toggleOptions() {\n this.show = !this.show;\n await this.updateComplete;\n if (this.show) this.calculateOptionsPosition();\n else this.initOptionsPosition();\n }\n private calculateOptionsPosition() {\n const wrapperBorderBottomWidth = +getComputedStyle(this.wrapper).borderBottomWidth.split('px')[0];\n const wrapperBorderTopWidth = +getComputedStyle(this.wrapper).borderTopWidth.split('px')[0];\n const clientRect = this.optionsElement.getBoundingClientRect();\n const availableBottomSpace =\n window.visualViewport!.height -\n clientRect.bottom +\n clientRect.height -\n this.wrapper.getBoundingClientRect().height;\n const availableTopSpace = clientRect.top;\n if (clientRect.height > availableBottomSpace && availableTopSpace > clientRect.height) {\n this.optionsElement.style.top = `${-clientRect.height - wrapperBorderTopWidth}px`;\n } else {\n this.optionsElement.style.top = `calc(100% + ${wrapperBorderBottomWidth}px)`;\n }\n }\n private initOptionsPosition() {\n this.optionsElement.style.removeProperty('top');\n }\n\n private selectOption(selectOptionEvent: Event, selectedOption: IOption) {\n selectOptionEvent.stopPropagation();\n if (this.selectionMode == OptionSelectionMode.Single) {\n this.selected = this.selected.length && this.selected[0].label == selectedOption.label ? [] : [selectedOption];\n this.toggleOptions();\n } else {\n if (this.selected.includes(selectedOption)) {\n this.selected = this.selected.filter(\n (previousSelectedOption) => previousSelectedOption.label != selectedOption.label\n );\n } else {\n this.selected = [...this.selected, selectedOption];\n }\n }\n this.dispatchChangeEvent()\n }\n private unselectAll(unselectAllEvent: Event) {\n unselectAllEvent.stopPropagation();\n this.selected = [];\n this.dispatchChangeEvent()\n }\n private unselectOne(unselectOneEvent: Event, selectedIndex: number) {\n unselectOneEvent.stopPropagation();\n this.selected = this.selected.filter((_, index) => index != selectedIndex);\n this.dispatchChangeEvent()\n }\n private dispatchChangeEvent() {\n let result = this.selectionMode == OptionSelectionMode.Single?this.selected[0]:this.selected\n this.dispatchEvent(new CustomEvent('changed', {detail: {value: result}, bubbles: true, composed: true}));\n }\n\n private onBlur() {\n this.show = false;\n this.initOptionsPosition();\n }\n\n protected override render(): unknown {\n return html`\n <slot name=\"label\"></slot>\n <div class=\"wrapper\" tabindex=\"0\" @click=\"${!this.disabled ? this.toggleOptions : nothing}\" @blur=${this.onBlur}>\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${choose(this.selectionMode, [\n [\n OptionSelectionMode.Single,\n () => html`${this.selected.length ? this.selected[0].label : this.placeholder}`,\n ],\n [\n OptionSelectionMode.Multiple,\n () =>\n html`${this.selected.length\n ? map(\n this.selected,\n (option, index) =>\n html`<span class=\"label\">\n <hy-icon\n name=\"remove\"\n id=\"unselect-one\"\n @click=${(e: Event) => this.unselectOne(e, index)}\n ></hy-icon\n >${option.label}</span\n >${this.selected.length - 1 != index ? MULTIPLE_OPTIONS_SEPARATOR : EMPTY_STRING}`\n )\n : this.placeholder}`,\n ],\n ])}\n </div>\n <div class=\"icons-container\">\n ${choose(this.status, [\n [OptionStatus.Default, () => undefined],\n [OptionStatus.Warning, () => html`<hy-icon name=\"warning\" id=\"warning-icon\"></hy-icon>`],\n [OptionStatus.Error, () => html`<hy-icon name=\"exclamation-circle\" id=\"error-icon\"></hy-icon>`],\n ])}\n ${this.selected.length\n ? html`<hy-icon\n name=\"remove\"\n id=\"unselect-multiple\"\n @click=${(e: Event) => this.unselectAll(e)}\n ></hy-icon>`\n : nothing}\n <hy-icon name=\"angle-down\" id=\"arrow-icon\"></hy-icon>\n </div>\n <div class=\"options\">\n ${map(\n this.options,\n (option) =>\n html`<div class=\"option\" @click=\"${(e: Event) => this.selectOption(e, option)}\">\n ${this.selected.includes(option) ? html`<hy-icon name=\"check\" id=\"check-icon\"></hy-icon>` : nothing}\n <span class=\"option-text\">${option.label}</span>\n </div>`\n )}\n </div>\n </div>\n </div>\n <slot name=\"helper-text\"></slot>\n `;\n }\n}"]}

package/select.style.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.style.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"~~AAsOA~~,eAAO,MAAM,MAAM,yBAAc,CAAC"}
1	+ {"version":3,"file":"select.style.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAyOA,eAAO,MAAM,MAAM,yBAAc,CAAC"}

package/select.style.js CHANGED Viewed

@@ -12,6 +12,8 @@ const selectStyle = css `
     border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));
     border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));
     word-break:break-word;
+      font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));
   }
   .select {
@@ -19,6 +21,7 @@ const selectStyle = css `
     flex-direction: column;
     cursor: pointer;
     font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));
   }
   .select-trigger {
@@ -61,7 +64,7 @@ const selectStyle = css `
     position: absolute;
     top: 50%;
     transform: translate(0%, -50%);
-    left: 0%;
+    left: 5%;
     --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));
   }
   #warning-icon {
@@ -98,7 +101,7 @@ const selectStyle = css `
     color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));
   }
   .option:hover {
-    border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));
+      border-radius: var(--hybrid-select-border-option-radius,var(--hybrid-select-hover-local-border-option-radius));
     background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));
   }
   .option-text {
@@ -171,7 +174,6 @@ const selectStyle = css `
   }
   :host {
     --hybrid-select-local-width: 100%;
-    --hybrid-select-local-font-family: IBM Plex Sans;
     --hybrid-select-local-background-color: #f4f4f4;
     --hybrid-select-local-hover-background-color: #e0e0e0;
     --hybrid-select-local-border-bottom: 1px solid #cccccc;
@@ -185,6 +187,7 @@ const selectStyle = css `
     --hybrid-select-local-focus-border: 2px solid #0f62fe;
     --hybrid-select-local-options-background-color: #f4f4f4;
     --hybrid-select-local-border-radius: 2px;
+      --hybrid-select-hover-local-border-radius: 0px;
     --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     --hybrid-select-local-max-height: 250px;
     --hybrid-select-local-option-medium-padding: 10px;

package/select.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.style.js","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmOtB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst selectStyle = css`\n :host {\n font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));\n }\n .wrapper {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n width: var(--hybrid-select-width,var(--hybrid-select-local-width));\n border-bottom: var(--hybrid-select-border-bottom,var(--hybrid-select-local-border-bottom));\n border-top: var(--hybrid-select-border-top,var(--hybrid-select-local-border-top));\n border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));\n border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));\n word-break:break-word;\n }\n\n .select {\n display: flex;\n flex-direction: column;\n cursor: pointer;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n }\n\n .select-trigger {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n background-color: var(--hybrid-select-background-color,var(--hybrid-select-local-background-color));\n color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n min-height: var(--hybrid-select-medium-height,var(--hybrid-select-local-medium-height));\n display: flex;\n padding-left: var(--hybrid-select-padding-left,var(--hybrid-select-local-padding-left));\n padding-right: calc(var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width)) * 2 + var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding)) * 2 + 1px);\n align-items: center;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n flex-wrap: wrap;\n }\n #unselect-one {\n --hybrid-icon-width: var(--hybrid-select-icon-unselect-one-width,var(--hybrid-select-local-icon-unselect-one-width));\n }\n #unselect-multiple,\n #unselect-one {\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n .label {\n display: flex;\n }\n\n .wrapper:focus {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n border: var(--hybrid-select-focus-border,var(--hybrid-select-local-focus-border));\n }\n .icons-container {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translate(-100%, -50%);\n display: flex;\n }\n\n #check-icon {\n position: absolute;\n top: 50%;\n transform: translate(0%, -50%);\n left: 0%;\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-select-warning-icon-color,var(--hybrid-select-local-warning-icon-color));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-select-error-icon-color,var(--hybrid-select-local-error-icon-color));\n }\n\n :host([disabled]) hy-icon {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n\n .options {\n position: absolute;\n left: 0%;\n right: 0%;\n background-color: var(--hybrid-select-options-background-color,var(--hybrid-select-local-options-background-color));\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n display: none;\n flex-direction: column;\n box-shadow: var(--hybrid-select-box-shadow,var(--hybrid-select-local-box-shadow));\n z-index: 1;\n max-height: var(--hybrid-select-max-height,var(--hybrid-select-local-max-height));\n overflow: auto;\n }\n\n .option {\n padding: var(--hybrid-select-option-medium-padding,var(--hybrid-select-local-option-medium-padding));\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n cursor: pointer;\n position: relative;\n color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));\n }\n .option:hover {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));\n }\n .option-text {\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n }\n hy-icon {\n display: flex;\n padding: var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding,));\n --hybrid-icon-width: var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width));\n }\n :host([size='small']) .select-trigger {\n min-height: var(--hybrid-select-small-height,var(--hybrid-select-local-small-height));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .select-trigger {\n min-height: var(--hybrid-select-large-height,var(--hybrid-select-local-large-height));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n\n :host([size='small']) .option {\n padding: var(--hybrid-select-option-small-padding,var(--hybrid-select-local-option-small-padding,));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .option {\n padding: var(--hybrid-select-option-large-padding,var(--hybrid-select-local-option-large-padding,));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n :host([status='error']) .wrapper {\n border: var(--hybrid-select-error-border,var(--hybrid-select-local-error-border));\n }\n :host([status='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-error-helper-text,var(--hybrid-select-local-error-helper-text));\n }\n\n :host(:not([disabled])) .select-trigger:hover {\n background-color: var(--hybrid-select-hover-background-color,var(--hybrid-select-local-hover-background-color));\n }\n\n :host([disabled]) .wrapper {\n border: none;\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n :host([disabled]) ::slotted([slot='helper-text']),\n :host([disabled]) ::slotted([slot='label']) {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n }\n :host([show]) .options {\n display: flex;\n }\n :host([type='inline']) {\n display: flex;\n gap: var(--hybrid-select-inline-gap,var(--hybrid-select-local-inline-gap));\n }\n :host([type='inline']) ::slotted([slot='helper-text']),\n :host([type='inline']) ::slotted([slot='label']) {\n display: flex;\n align-items: center;\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-helper-text-color,var(--hybrid-select-local-helper-text-color));\n font-size:var(--hybrid-select-helper-text-font-size,var(--hybrid-select-local-helper-text-font-size))\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-select-label-text-color,var(--hybrid-select-local-label-text-color));\n font-size:var(--hybrid-select-label-font-size,var(--hybrid-select-local-label-font-size))\n\n }\n :host {\n --hybrid-select-local-width: 100%;\n --hybrid-select-local-font-family: IBM Plex Sans;\n --hybrid-select-local-background-color: #f4f4f4;\n --hybrid-select-local-hover-background-color: #e0e0e0;\n --hybrid-select-local-border-bottom: 1px solid #cccccc;\n --hybrid-select-local-border-top: 3px solid transparent;\n --hybrid-select-local-border-left: 2px solid transparent;\n --hybrid-select-local-border-right: 2px solid transparent;\n --hybrid-select-local-trigger-text-color: #161616;\n --hybrid-select-local-option-text-color: #161616;\n --hybrid-select-local-padding-left: 5px;\n --hybrid-select-local-option-padding-left: 3px;\n --hybrid-select-local-focus-border: 2px solid #0f62fe;\n --hybrid-select-local-options-background-color: #f4f4f4;\n --hybrid-select-local-border-radius: 2px;\n --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n --hybrid-select-local-max-height: 250px;\n --hybrid-select-local-option-medium-padding: 10px;\n --hybrid-select-local-option-large-padding: 12px;\n --hybrid-select-local-option-small-padding: 8px;\n --hybrid-select-local-option-padding-left: 17px;\n --hybrid-select-local-option-hover: #e0e0e0;\n --hybrid-select-local-icons-padding: 3px;\n --hybrid-select-local-icon-width: 14px;\n --hybrid-select-local-icon-unselect-one-width: 12px;\n --hybrid-select-local-small-height: 25px;\n --hybrid-select-local-medium-height: 35px;\n --hybrid-select-local-large-height: 45px;\n --hybrid-select-local-small-font-size: 12px;\n --hybrid-select-local-medium-font-size: 14px;\n --hybrid-select-local-large-font-size: 16px;\n --hybrid-select-local-error-border: 2px solid #da1e28;\n --hybrid-select-local-error-icon-color: #da1e28;\n --hybrid-select-local-warning-icon-color: #f0c300;\n --hybrid-select-local-error-helper-text: #da1e28;\n --hybrid-select-local-disabled-opacity: 0.5;\n --hybrid-select-local-inline-gap: 5px;\n --hybrid-select-local-helper-text-color: #a8a8a8;\n --hybrid-select-local-label-text-color: #a8a8a8;\n --hybrid-select-local-helper-text-font-size:13px;\n --hybrid-select-local-label-font-size:13px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-select-local-focus-border: 2px solid #ffffff;\n --hybrid-select-local-background-color: #393939;\n --hybrid-select-local-hover-background-color: #4c4c4c;\n --hybrid-select-local-options-background-color: #393939;\n --hybrid-select-local-option-hover: #4c4c4c;\n --hybrid-select-local-helper-text-color: #c6c6c6;\n --hybrid-select-local-label-text-color: #c6c6c6;\n --hybrid-select-local-border-bottom: 1px solid #6f6f6f;\n --hybrid-select-local-trigger-text-color: #f4f4f4;\n --hybrid-select-local-option-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = selectStyle;\n"]}
1	+ {"version":3,"file":"select.style.js","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsOtB,CAAC;AACF,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAC","sourcesContent":["import {css} from 'lit';\n\nconst selectStyle = css`\n :host {\n font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));\n }\n .wrapper {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n width: var(--hybrid-select-width,var(--hybrid-select-local-width));\n border-bottom: var(--hybrid-select-border-bottom,var(--hybrid-select-local-border-bottom));\n border-top: var(--hybrid-select-border-top,var(--hybrid-select-local-border-top));\n border-left: var(--hybrid-select-border-left,var(--hybrid-select-local-border-left));\n border-right: var(--hybrid-select-border-right,var(--hybrid-select-local-border-right));\n word-break:break-word;\n font-family: var(--hybrid-select-font-family,var(--hybrid-select-local-font-family));\n\n }\n\n .select {\n display: flex;\n flex-direction: column;\n cursor: pointer;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n\n }\n\n .select-trigger {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n position: relative;\n background-color: var(--hybrid-select-background-color,var(--hybrid-select-local-background-color));\n color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n min-height: var(--hybrid-select-medium-height,var(--hybrid-select-local-medium-height));\n display: flex;\n padding-left: var(--hybrid-select-padding-left,var(--hybrid-select-local-padding-left));\n padding-right: calc(var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width)) * 2 + var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding)) * 2 + 1px);\n align-items: center;\n font-size: var(--hybrid-select-medium-font-size,var(--hybrid-select-local-medium-font-size));\n flex-wrap: wrap;\n }\n #unselect-one {\n --hybrid-icon-width: var(--hybrid-select-icon-unselect-one-width,var(--hybrid-select-local-icon-unselect-one-width));\n }\n #unselect-multiple,\n #unselect-one {\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n .label {\n display: flex;\n }\n\n .wrapper:focus {\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n border: var(--hybrid-select-focus-border,var(--hybrid-select-local-focus-border));\n }\n .icons-container {\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translate(-100%, -50%);\n display: flex;\n }\n\n #check-icon {\n position: absolute;\n top: 50%;\n transform: translate(0%, -50%);\n left: 5%;\n --hybrid-icon-color: var(--hybrid-select-trigger-text-color,var(--hybrid-select-local-trigger-text-color));\n }\n #warning-icon {\n --hybrid-icon-color: var(--hybrid-select-warning-icon-color,var(--hybrid-select-local-warning-icon-color));\n }\n #error-icon {\n --hybrid-icon-color: var(--hybrid-select-error-icon-color,var(--hybrid-select-local-error-icon-color));\n }\n\n :host([disabled]) hy-icon {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n\n .options {\n position: absolute;\n left: 0%;\n right: 0%;\n background-color: var(--hybrid-select-options-background-color,var(--hybrid-select-local-options-background-color));\n border-radius: var(--hybrid-select-border-radius,var(--hybrid-select-local-border-radius));\n display: none;\n flex-direction: column;\n box-shadow: var(--hybrid-select-box-shadow,var(--hybrid-select-local-box-shadow));\n z-index: 1;\n max-height: var(--hybrid-select-max-height,var(--hybrid-select-local-max-height));\n overflow: auto;\n }\n\n .option {\n padding: var(--hybrid-select-option-medium-padding,var(--hybrid-select-local-option-medium-padding));\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n cursor: pointer;\n position: relative;\n color: var(--hybrid-select-option-text-color,var(--hybrid-select-local-option-text-color));\n }\n .option:hover {\n border-radius: var(--hybrid-select-border-option-radius,var(--hybrid-select-hover-local-border-option-radius));\n background-color: var(--hybrid-select-option-hover,var(--hybrid-select-local-option-hover));\n }\n .option-text {\n padding-left: var(--hybrid-select-option-padding-left,var(--hybrid-select-local-option-padding-left));\n }\n hy-icon {\n display: flex;\n padding: var(--hybrid-select-icons-padding,var(--hybrid-select-local-icons-padding,));\n --hybrid-icon-width: var(--hybrid-select-icon-width,var(--hybrid-select-local-icon-width));\n }\n :host([size='small']) .select-trigger {\n min-height: var(--hybrid-select-small-height,var(--hybrid-select-local-small-height));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .select-trigger {\n min-height: var(--hybrid-select-large-height,var(--hybrid-select-local-large-height));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n\n :host([size='small']) .option {\n padding: var(--hybrid-select-option-small-padding,var(--hybrid-select-local-option-small-padding,));\n font-size: var(--hybrid-select-small-font-size,var(--hybrid-select-local-small-font-size));\n }\n :host([size='large']) .option {\n padding: var(--hybrid-select-option-large-padding,var(--hybrid-select-local-option-large-padding,));\n font-size: var(--hybrid-select-large-font-size,var(--hybrid-select-local-large-font-size));\n }\n :host([status='error']) .wrapper {\n border: var(--hybrid-select-error-border,var(--hybrid-select-local-error-border));\n }\n :host([status='error']) ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-error-helper-text,var(--hybrid-select-local-error-helper-text));\n }\n\n :host(:not([disabled])) .select-trigger:hover {\n background-color: var(--hybrid-select-hover-background-color,var(--hybrid-select-local-hover-background-color));\n }\n\n :host([disabled]) .wrapper {\n border: none;\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n :host([disabled]) ::slotted([slot='helper-text']),\n :host([disabled]) ::slotted([slot='label']) {\n opacity: var(--hybrid-select-disabled-opacity,var(--hybrid-select-local-disabled-opacity));\n }\n :host([show]) .options {\n display: flex;\n }\n :host([type='inline']) {\n display: flex;\n gap: var(--hybrid-select-inline-gap,var(--hybrid-select-local-inline-gap));\n }\n :host([type='inline']) ::slotted([slot='helper-text']),\n :host([type='inline']) ::slotted([slot='label']) {\n display: flex;\n align-items: center;\n }\n\n ::slotted([slot='helper-text']) {\n color: var(--hybrid-select-helper-text-color,var(--hybrid-select-local-helper-text-color));\n font-size:var(--hybrid-select-helper-text-font-size,var(--hybrid-select-local-helper-text-font-size))\n }\n\n ::slotted([slot='label']) {\n color: var(--hybrid-select-label-text-color,var(--hybrid-select-local-label-text-color));\n font-size:var(--hybrid-select-label-font-size,var(--hybrid-select-local-label-font-size))\n\n }\n :host {\n --hybrid-select-local-width: 100%;\n --hybrid-select-local-background-color: #f4f4f4;\n --hybrid-select-local-hover-background-color: #e0e0e0;\n --hybrid-select-local-border-bottom: 1px solid #cccccc;\n --hybrid-select-local-border-top: 3px solid transparent;\n --hybrid-select-local-border-left: 2px solid transparent;\n --hybrid-select-local-border-right: 2px solid transparent;\n --hybrid-select-local-trigger-text-color: #161616;\n --hybrid-select-local-option-text-color: #161616;\n --hybrid-select-local-padding-left: 5px;\n --hybrid-select-local-option-padding-left: 3px;\n --hybrid-select-local-focus-border: 2px solid #0f62fe;\n --hybrid-select-local-options-background-color: #f4f4f4;\n --hybrid-select-local-border-radius: 2px;\n --hybrid-select-hover-local-border-radius: 0px;\n --hybrid-select-local-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n --hybrid-select-local-max-height: 250px;\n --hybrid-select-local-option-medium-padding: 10px;\n --hybrid-select-local-option-large-padding: 12px;\n --hybrid-select-local-option-small-padding: 8px;\n --hybrid-select-local-option-padding-left: 17px;\n --hybrid-select-local-option-hover: #e0e0e0;\n --hybrid-select-local-icons-padding: 3px;\n --hybrid-select-local-icon-width: 14px;\n --hybrid-select-local-icon-unselect-one-width: 12px;\n --hybrid-select-local-small-height: 25px;\n --hybrid-select-local-medium-height: 35px;\n --hybrid-select-local-large-height: 45px;\n --hybrid-select-local-small-font-size: 12px;\n --hybrid-select-local-medium-font-size: 14px;\n --hybrid-select-local-large-font-size: 16px;\n --hybrid-select-local-error-border: 2px solid #da1e28;\n --hybrid-select-local-error-icon-color: #da1e28;\n --hybrid-select-local-warning-icon-color: #f0c300;\n --hybrid-select-local-error-helper-text: #da1e28;\n --hybrid-select-local-disabled-opacity: 0.5;\n --hybrid-select-local-inline-gap: 5px;\n --hybrid-select-local-helper-text-color: #a8a8a8;\n --hybrid-select-local-label-text-color: #a8a8a8;\n --hybrid-select-local-helper-text-font-size:13px;\n --hybrid-select-local-label-font-size:13px;\n }\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-select-local-focus-border: 2px solid #ffffff;\n --hybrid-select-local-background-color: #393939;\n --hybrid-select-local-hover-background-color: #4c4c4c;\n --hybrid-select-local-options-background-color: #393939;\n --hybrid-select-local-option-hover: #4c4c4c;\n --hybrid-select-local-helper-text-color: #c6c6c6;\n --hybrid-select-local-label-text-color: #c6c6c6;\n --hybrid-select-local-border-bottom: 1px solid #6f6f6f;\n --hybrid-select-local-trigger-text-color: #f4f4f4;\n --hybrid-select-local-option-text-color: #f4f4f4;\n }\n }\n`;\nexport const styles = selectStyle;\n"]}