@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
1 lines • 4.19 kB
Source Map (JSON)
{"version":3,"file":"koalarx-ui-shared-components-input-field-select.mjs","sources":["../../projects/koala-ui/shared/components/input-field/select/select.ts","../../projects/koala-ui/shared/components/input-field/select/select.html","../../projects/koala-ui/shared/components/input-field/select/koalarx-ui-shared-components-input-field-select.ts"],"sourcesContent":["import { Component, input, ResourceRef } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { FieldErrors } from '@koalarx/ui/shared/components/field-errors';\nimport { InputFieldBase } from '@koalarx/ui/shared/components/input-field';\n\ntype SelectValue = string | number | boolean | null;\nexport interface SelectOption<TData = any> {\n label: string;\n value: SelectValue;\n data?: TData;\n}\nexport type SelectList<TData = any> = SelectOption<TData>[];\n\n@Component({\n selector: 'kl-select',\n templateUrl: './select.html',\n imports: [ReactiveFormsModule, FieldErrors],\n})\nexport class Select extends InputFieldBase {\n options = input.required<ResourceRef<SelectList>>();\n\n onSelectChange(event: Event) {\n const select = event.target as HTMLSelectElement;\n let value: SelectValue = select.value;\n\n const selectedOption = this.options()\n .value()\n .find((item) => String(item.value) === value);\n\n if (selectedOption) {\n if (typeof selectedOption.value === 'number') {\n value = Number(value);\n } else if (typeof selectedOption.value === 'boolean') {\n value = value === 'true';\n } else {\n value = selectedOption.value;\n }\n this.control().setValue(value, { emitEvent: true });\n }\n }\n}\n","@if (options(); as items) {\n <label [attr.for]=\"fieldId\" class=\"floating-label select w-full\">\n\n @if (label(); as label) {\n <span>{{ label }} {{ isRequired() ? '*' : '' }}</span>\n }\n\n <select\n [id]=\"fieldId\"\n [value]=\"control().value\"\n (change)=\"onSelectChange($event)\"\n [disabled]=\"items.isLoading()\">\n\n @if (items.isLoading()) {\n <option [value]=\"null\">Carregando...</option>\n } @else {\n <option [value]=\"null\">Selecione uma opção...</option>\n }\n @for (item of items.value(); track $index) {\n <option\n [value]=\"`${item.value}`\"\n [selected]=\"item.value === control().value\">\n {{ item.label }}\n </option>\n }\n </select>\n </label>\n\n <kl-field-errors [field]=\"control()\">\n <ng-container errors>\n <ng-content select=\"[errors]\" />\n </ng-container>\n </kl-field-errors>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAkBM,MAAO,MAAO,SAAQ,cAAc,CAAA;AACxC,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAA2B;AAEnD,IAAA,cAAc,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;AAChD,QAAA,IAAI,KAAK,GAAgB,MAAM,CAAC,KAAK;AAErC,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO;AAChC,aAAA,KAAK;AACL,aAAA,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE/C,IAAI,cAAc,EAAE;AAClB,YAAA,IAAI,OAAO,cAAc,CAAC,KAAK,KAAK,QAAQ,EAAE;AAC5C,gBAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;;AAChB,iBAAA,IAAI,OAAO,cAAc,CAAC,KAAK,KAAK,SAAS,EAAE;AACpD,gBAAA,KAAK,GAAG,KAAK,KAAK,MAAM;;iBACnB;AACL,gBAAA,KAAK,GAAG,cAAc,CAAC,KAAK;;AAE9B,YAAA,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;;uGAnB5C,MAAM,EAAA,IAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAN,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAM,EClBnB,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,u8BAkCA,EDlBY,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,mBAAmB,4OAAE,WAAW,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAE/B,MAAM,EAAA,UAAA,EAAA,CAAA;kBALlB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAEZ,OAAA,EAAA,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAA,QAAA,EAAA,u8BAAA,EAAA;;;AEhB7C;;AAEG;;;;"}