@koalarx/ui/fesm2022/koalarx-ui-shared-components-input-field-select.mjs

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.

import * as i0 from '@angular/core';
import { input, Component } from '@angular/core';
import * as i1 from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { FieldErrors } from '@koalarx/ui/shared/components/field-errors';
import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';

class Select extends InputFieldBase {
    options = input.required();
    onSelectChange(event) {
        const select = event.target;
        let value = select.value;
        const selectedOption = this.options()
            .value()
            .find((item) => String(item.value) === value);
        if (selectedOption) {
            if (typeof selectedOption.value === 'number') {
                value = Number(value);
            }
            else if (typeof selectedOption.value === 'boolean') {
                value = value === 'true';
            }
            else {
                value = selectedOption.value;
            }
            this.control().setValue(value, { emitEvent: true });
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Select, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: Select, isStandalone: true, selector: "kl-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@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\u00E7\u00E3o...</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", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: FieldErrors, selector: "kl-field-errors", inputs: ["field"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Select, decorators: [{
            type: Component,
            args: [{ selector: 'kl-select', imports: [ReactiveFormsModule, FieldErrors], template: "@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\u00E7\u00E3o...</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" }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { Select };
//# sourceMappingURL=koalarx-ui-shared-components-input-field-select.mjs.map