@seniorsistemas/angular-components 17.27.1-feature-sds-110-35ee9b4f → 17.27.1-feature-sds-110-174b0744

package/fesm2022/seniorsistemas-angular-components-checkbox.mjs

@@ -1,34 +1,38 @@
-import * as i0 from '@angular/core';
-import { forwardRef, Component, Input, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { model, input, forwardRef, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 class CheckboxComponent {
-    data;
-    state = {
-        checked: false,
-        indeterminate: false,
-        children: {},
-    };
+    disabled = model(false);
+    checked = model(false);
+    indeterminate = model(false);
+    label = input('');
     _onChange = () => { };
     _onTouched = () => { };
-    writeValue(value) {
-        if (value) {
-            this.state = value;
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.indeterminate()) {
+            this.indeterminate.set(false);
+            this.checked.set(false);
+            this.emit(false);
         }
         else {
-            this.state = {
-                checked: false,
-                indeterminate: false,
-                disabled: false,
-                children: this._initializeChildren(this.data),
-            };
+            const newValue = !this.checked();
+            this.checked.set(newValue);
+            this.emit(newValue);
         }
     }
-    get renderType() {
-        return this.data.renderType ?? "inline";
+    emit(value) {
+        this._onChange(value);
+        this.checked.set(value);
+        this.indeterminate.set(value);
+    }
+    writeValue(value) {
+        this.checked.set(!!value);
     }
     registerOnChange(onChange) {
         this._onChange = onChange;
@@ -36,116 +40,35 @@ class CheckboxComponent {
     registerOnTouched(onTouched) {
         this._onTouched = onTouched;
     }
-    _initializeChildren(item) {
-        const childrenState = {};
-        if (item.children) {
-            item.children.forEach((child) => {
-                childrenState[child.label] = {
-                    checked: false,
-                    indeterminate: false,
-                    children: this._initializeChildren(child),
-                };
-            });
-        }
-        return childrenState;
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
     }
-    getCheckboxState(item, label) {
-        if (item) {
-            return item[label];
-        }
-        else {
-            return {};
-        }
-    }
-    updateParent() {
-        const _getProperty = (obj, field) => {
-            if (obj) {
-                return obj[field];
-            }
-            else {
-                return null;
-            }
-        };
-        if (this.data.children && this.data.children.length > 0) {
-            const allChecked = this.data.children.every((child) => _getProperty(this.state.children, child.label)?.checked);
-            const someChecked = this.data.children.some((child) => _getProperty(this.state.children, child.label)?.checked ||
-                _getProperty(this.state.children, child.label)?.indeterminate);
-            this.state.checked = allChecked;
-            this.state.indeterminate = !allChecked && someChecked;
-        }
-        this._onChange(this.state);
-        this._onTouched();
-    }
-    onCheckboxChange() {
-        if (this.state.disabled) {
-            return;
-        }
-        this.state.checked = !this.state.checked;
-        this.state.indeterminate = false;
-        this._toggleChildrenCheck(this.data, this.state, this.state.checked);
-        this._onChange(this.state);
+    onBlur() {
         this._onTouched();
     }
-    _toggleChildrenCheck(item, state, checked) {
-        if (item.children?.length) {
-            item.children.forEach((child) => {
-                if (state.children && !state.children[child.label]) {
-                    state.children[child.label] = {
-                        checked: false,
-                        indeterminate: false,
-                        children: this._initializeChildren(child),
-                    };
-                }
-                if (state.children) {
-                    state.children[child.label].checked = checked;
-                    state.children[child.label].indeterminate = false;
-                }
-                if (child.children && state.children) {
-                    this._toggleChildrenCheck(child, state.children[child.label], checked);
-                }
-            });
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxComponent, selector: "s-checkbox", inputs: { data: "data" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CheckboxComponent, isStandalone: true, selector: "s-checkbox", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", indeterminate: "indeterminateChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [class.checkbox-wrapper--disabled]=\"state.disabled\"\n            [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n            [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n        >\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate,\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n            />\n            {{ data.label }}\n        </div>\n    </label>\n    <div\n        *ngIf=\"data.children && data.children.length\"\n        class=\"checkbox-children\"\n    >\n        <s-checkbox\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"getCheckboxState(state.children, child.label)\"\n            (ngModelChange)=\"updateParent()\"\n        >\n        </s-checkbox>\n    </div>\n</div>\n", styles: [".checkbox{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.checkbox .checkbox-wrapper{color:#212533;display:flex;font-family:\"Open Sans\" sans-serif;font-size:14px;gap:12px}.checkbox .checkbox-wrapper-inline{align-items:center}.checkbox .checkbox-wrapper-block{flex-direction:column-reverse}.checkbox .checkbox-wrapper .checkbox-input{appearance:none;background-color:#fff;border:1px solid #c1c1cc;border-radius:4px;cursor:pointer;flex-shrink:0;height:20px;width:20px;position:relative}.checkbox .checkbox-wrapper .checkbox-input--checked{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox .checkbox-wrapper .checkbox-input--indeterminate{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.checkbox .checkbox-wrapper:not(.checkbox-wrapper--disabled) .checkbox-input:not(.checkbox-input--checked):hover{background-color:#e5eaea;border-color:#ccc}.checkbox .checkbox-wrapper--disabled{opacity:.5;cursor:auto}.checkbox .checkbox-children{margin-left:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "s-checkbox", inputs: ["data"] }] });
+        ], ngImport: i0, template: "<div\n    class=\"flex cursor-pointer select-none gap-3\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"flex h-5 w-5 items-center justify-center rounded border border-grayscale-30 transition-all duration-200 hover:border-grayscale-50\"\n        [ngClass]=\"{\n            'bg-primary hover:bg-tarawera-500': checked() || indeterminate(),\n            'bg-grayscale-0': !checked() && !indeterminate(),\n            'border-primary hover:border-tarawera-500': checked() || indeterminate(),\n            'opacity-50': disabled(),\n        }\"\n    >\n        @if (indeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n    <span\n        [class.opacity-50]=\"disabled()\"\n        class=\"text-grayscale-90\"\n    >\n        {{ label() }}\n    </span>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-checkbox', providers: [
+            args: [{ selector: 's-checkbox', standalone: true, imports: [CommonModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [class.checkbox-wrapper--disabled]=\"state.disabled\"\n            [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n            [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n        >\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate,\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n            />\n            {{ data.label }}\n        </div>\n    </label>\n    <div\n        *ngIf=\"data.children && data.children.length\"\n        class=\"checkbox-children\"\n    >\n        <s-checkbox\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"getCheckboxState(state.children, child.label)\"\n            (ngModelChange)=\"updateParent()\"\n        >\n        </s-checkbox>\n    </div>\n</div>\n", styles: [".checkbox{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.checkbox .checkbox-wrapper{color:#212533;display:flex;font-family:\"Open Sans\" sans-serif;font-size:14px;gap:12px}.checkbox .checkbox-wrapper-inline{align-items:center}.checkbox .checkbox-wrapper-block{flex-direction:column-reverse}.checkbox .checkbox-wrapper .checkbox-input{appearance:none;background-color:#fff;border:1px solid #c1c1cc;border-radius:4px;cursor:pointer;flex-shrink:0;height:20px;width:20px;position:relative}.checkbox .checkbox-wrapper .checkbox-input--checked{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox .checkbox-wrapper .checkbox-input--indeterminate{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.checkbox .checkbox-wrapper:not(.checkbox-wrapper--disabled) .checkbox-input:not(.checkbox-input--checked):hover{background-color:#e5eaea;border-color:#ccc}.checkbox .checkbox-wrapper--disabled{opacity:.5;cursor:auto}.checkbox .checkbox-children{margin-left:20px}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
-
-class CheckboxModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, declarations: [CheckboxComponent], imports: [CommonModule, FormsModule], exports: [CheckboxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, imports: [CommonModule, FormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FormsModule],
-                    declarations: [CheckboxComponent],
-                    exports: [CheckboxComponent],
-                }]
+                    ], template: "<div\n    class=\"flex cursor-pointer select-none gap-3\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"flex h-5 w-5 items-center justify-center rounded border border-grayscale-30 transition-all duration-200 hover:border-grayscale-50\"\n        [ngClass]=\"{\n            'bg-primary hover:bg-tarawera-500': checked() || indeterminate(),\n            'bg-grayscale-0': !checked() && !indeterminate(),\n            'border-primary hover:border-tarawera-500': checked() || indeterminate(),\n            'opacity-50': disabled(),\n        }\"\n    >\n        @if (indeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n    <span\n        [class.opacity-50]=\"disabled()\"\n        class=\"text-grayscale-90\"\n    >\n        {{ label() }}\n    </span>\n</div>\n" }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxComponent, CheckboxModule };
+export { CheckboxComponent };
 //# sourceMappingURL=seniorsistemas-angular-components-checkbox.mjs.map

package/fesm2022/seniorsistemas-angular-components-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.module.ts","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { CheckboxData } from './models/checkbox-data';\nimport { CheckboxChildren, CheckboxState } from './models/checkbox-state';\n\n@Component({\n    selector: 's-checkbox',\n    templateUrl: './checkbox.component.html',\n    styleUrls: ['./checkbox.component.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => CheckboxComponent),\n            multi: true,\n        },\n    ],\n})\nexport class CheckboxComponent implements ControlValueAccessor {\n    @Input({ required: true })\n    public data!: CheckboxData;\n\n    public state: CheckboxState = {\n        checked: false,\n        indeterminate: false,\n        children: {},\n    };\n\n    private _onChange: (value: CheckboxState) => void = () => { };\n    private _onTouched: () => void = () => { };\n\n    public writeValue(value: CheckboxState): void {\n        if (value) {\n            this.state = value;\n        } else {\n            this.state = {\n                checked: false,\n                indeterminate: false,\n                disabled: false,\n                children: this._initializeChildren(this.data),\n            };\n        }\n    }\n\n    public get renderType() {\n        return this.data.renderType ?? \"inline\";\n    }\n\n    public registerOnChange(onChange: (value: CheckboxState) => void): void {\n        this._onChange = onChange;\n    }\n\n    public registerOnTouched(onTouched: () => void): void {\n        this._onTouched = onTouched;\n    }\n\n    private _initializeChildren(item: CheckboxData): CheckboxChildren {\n        const childrenState: CheckboxChildren = {};\n        if (item.children) {\n            item.children.forEach((child) => {\n                childrenState[child.label] = {\n                    checked: false,\n                    indeterminate: false,\n                    children: this._initializeChildren(child),\n                };\n            });\n        }\n        return childrenState;\n    }\n\n    public getCheckboxState(item: CheckboxChildren | undefined, label: string) {\n        if (item) {\n            return item[label];\n        } else {\n            return {};\n        }\n    }\n\n    public updateParent(): void {\n        const _getProperty = (obj: CheckboxChildren | undefined, field: string) => {\n            if (obj) {\n                return obj[field];\n            } else {\n                return null;\n            }\n        };\n        if (this.data.children && this.data.children.length > 0) {\n            const allChecked = this.data.children.every(\n                (child) => _getProperty(this.state.children, child.label)?.checked,\n            );\n            const someChecked = this.data.children.some(\n                (child) =>\n                    _getProperty(this.state.children, child.label)?.checked ||\n                    _getProperty(this.state.children, child.label)?.indeterminate,\n            );\n            this.state.checked = allChecked;\n            this.state.indeterminate = !allChecked && someChecked;\n        }\n        this._onChange(this.state);\n        this._onTouched();\n    }\n\n    public onCheckboxChange(): void {\n        if (this.state.disabled) {\n            return;\n        }\n\n        this.state.checked = !this.state.checked;\n        this.state.indeterminate = false;\n        this._toggleChildrenCheck(this.data, this.state, this.state.checked);\n        this._onChange(this.state);\n        this._onTouched();\n    }\n\n    private _toggleChildrenCheck(item: CheckboxData, state: CheckboxState, checked: boolean): void {\n        if (item.children?.length) {\n            item.children.forEach((child) => {\n                if (state.children && !state.children[child.label]) {\n                    state.children[child.label] = {\n                        checked: false,\n                        indeterminate: false,\n                        children: this._initializeChildren(child),\n                    };\n                }\n                if (state.children) {\n                    state.children[child.label].checked = checked;\n                    state.children[child.label].indeterminate = false;\n                }\n                if (child.children && state.children) {\n                    this._toggleChildrenCheck(child, state.children[child.label], checked);\n                }\n            });\n        }\n    }\n}\n","<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [class.checkbox-wrapper--disabled]=\"state.disabled\"\n            [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n            [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n        >\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate,\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n            />\n            {{ data.label }}\n        </div>\n    </label>\n    <div\n        *ngIf=\"data.children && data.children.length\"\n        class=\"checkbox-children\"\n    >\n        <s-checkbox\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"getCheckboxState(state.children, child.label)\"\n            (ngModelChange)=\"updateParent()\"\n        >\n        </s-checkbox>\n    </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { CheckboxComponent } from './checkbox.component';\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    declarations: [CheckboxComponent],\n    exports: [CheckboxComponent],\n})\nexport class CheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["\nimport { CommonModule } from '@angular/common';\nimport { Component, forwardRef, input, model, output } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 's-checkbox',\n  standalone: true,\n  imports: [CommonModule],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => CheckboxComponent),\n      multi: true,\n    },\n  ],\n  templateUrl: './checkbox.component.html',\n})\nexport class CheckboxComponent implements ControlValueAccessor {\n  public disabled = model(false);\n  public checked = model(false);\n  public indeterminate = model(false);\n  public label = input<string>('');\n\n  private _onChange: (value: boolean) => void = () => { };\n  private _onTouched: () => void = () => { };\n\n  public toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    if (this.indeterminate()) {\n      this.indeterminate.set(false);\n      this.checked.set(false);\n      this.emit(false);\n    } else {\n      const newValue = !this.checked();\n      this.checked.set(newValue);\n      this.emit(newValue);\n    }\n  }\n\n  public emit(value: boolean): void {\n    this._onChange(value);\n    this.checked.set(value);\n    this.indeterminate.set(value);\n  }\n\n  public writeValue(value: any): void {\n    this.checked.set(!!value);\n  }\n\n  public registerOnChange(onChange: (value: boolean) => void): void {\n    this._onChange = onChange;\n  }\n\n  public registerOnTouched(onTouched: () => void): void {\n    this._onTouched = onTouched;\n  }\n\n  public setDisabledState(disabled: boolean): void {\n    this.disabled.set(disabled);\n  }\n\n  public onBlur(): void {\n    this._onTouched();\n  }\n}\n","<div\n    class=\"flex cursor-pointer select-none gap-3\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"flex h-5 w-5 items-center justify-center rounded border border-grayscale-30 transition-all duration-200 hover:border-grayscale-50\"\n        [ngClass]=\"{\n            'bg-primary hover:bg-tarawera-500': checked() || indeterminate(),\n            'bg-grayscale-0': !checked() && !indeterminate(),\n            'border-primary hover:border-tarawera-500': checked() || indeterminate(),\n            'opacity-50': disabled(),\n        }\"\n    >\n        @if (indeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n    <span\n        [class.opacity-50]=\"disabled()\"\n        class=\"text-grayscale-90\"\n    >\n        {{ label() }}\n    </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-dynamic-form.mjs

@@ -58,14 +58,12 @@ import { AutoComplete, AutoCompleteModule } from 'primeng/autocomplete';
 import { ButtonModule as ButtonModule$1 } from 'primeng/button';
 import * as i3$3 from 'primeng/datepicker';
 import { DatePickerModule } from 'primeng/datepicker';
-import { DropdownModule } from 'primeng/dropdown';
 import * as i5$1 from 'primeng/inputmask';
 import { InputMask, InputMaskModule } from 'primeng/inputmask';
 import * as i7 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i6$1 from 'primeng/keyfilter';
 import { KeyFilterModule } from 'primeng/keyfilter';
-import * as i3$5 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import { PanelModule } from 'primeng/panel';
 import * as i4$1 from 'primeng/radiobutton';
@@ -85,16 +83,16 @@ import * as i2$a from '@seniorsistemas/angular-components/slider';
 import { SliderModule } from '@seniorsistemas/angular-components/slider';
 import * as i2$8 from 'primeng/editor';
 import { EditorModule } from 'primeng/editor';
-import * as i4$2 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
 import * as i2$5 from '@seniorsistemas/angular-components/fieldset';
 import { FieldsetModule } from '@seniorsistemas/angular-components/fieldset';
 import { PrimeNG } from 'primeng/config';
-import * as i2$7 from '@seniorsistemas/angular-components/checkbox';
-import { CheckboxModule } from '@seniorsistemas/angular-components/checkbox';
+import * as i2$7 from '@seniorsistemas/angular-components/checkbox-list';
+import { CheckboxListModule } from '@seniorsistemas/angular-components/checkbox-list';
 import * as i1$4 from '@angular/cdk/clipboard';
 import * as i1$6 from '@seniorsistemas/angular-components/currency';
 import { currencies } from '@seniorsistemas/angular-components/currency';
+import * as i3$5 from '@seniorsistemas/angular-components/select';
+import { SelectComponent } from '@seniorsistemas/angular-components/select';
 import * as i2$c from '@seniorsistemas/angular-components/text-area';
 import { TextAreaModule } from '@seniorsistemas/angular-components/text-area';
 import * as i2$d from '@seniorsistemas/angular-components/star-rating';
@@ -547,6 +545,7 @@ class RadioButtonField extends Field {
 class SelectField extends Field {
     appendTo;
     optionLabel;
+    optionValue;
     dataKey;
     autoDisplayFirst;
     options;
@@ -563,6 +562,7 @@ class SelectField extends Field {
         this.appendTo = config.appendTo;
         this.dataKey = config.dataKey;
         this.optionLabel = config.optionLabel;
+        this.optionValue = config.optionValue;
         this.autoDisplayFirst = config.autoDisplayFirst;
         this.options = config.options;
         this.multiple = config.multiple;
@@ -2822,11 +2822,11 @@ class CheckboxFieldComponent {
     field;
     formControl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxFieldComponent, selector: "ng-component", inputs: { field: "field", formControl: "formControl" }, ngImport: i0, template: "<s-checkbox\n    [data]=\"field.data\"\n    [formControl]=\"formControl\">\n</s-checkbox>", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$7.CheckboxComponent, selector: "s-checkbox", inputs: ["data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxFieldComponent, selector: "ng-component", inputs: { field: "field", formControl: "formControl" }, ngImport: i0, template: "<s-checkbox-list\n    [data]=\"field.data\"\n    [formControl]=\"formControl\"\n>\n</s-checkbox-list>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$7.CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<s-checkbox\n    [data]=\"field.data\"\n    [formControl]=\"formControl\">\n</s-checkbox>" }]
+            args: [{ template: "<s-checkbox-list\n    [data]=\"field.data\"\n    [formControl]=\"formControl\"\n>\n</s-checkbox-list>\n" }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3329,11 +3329,11 @@ class SelectFieldComponent extends BaseFieldComponent {
     field;
     formControl;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectFieldComponent, selector: "ng-component", inputs: { field: "field", formControl: "formControl" }, usesInheritance: true, ngImport: i0, template: "<s-field-label [field]=\"field\"></s-field-label>\n\n@if (field.multiple) {\n    <p-multiSelect\n        [formControl]=\"formControl\"\n        [name]=\"field.name\"\n        [inputId]=\"field.id || field.name\"\n        [options]=\"getFieldProperty(field.options)\"\n        [group]=\"field.group\"\n        [placeholder]=\"field.placeholder || ''\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [emptyFilterMessage]=\"field.emptyMessage || 'platform.angular_components.no_records_found' | translate\"\n        [showDelay]=\"500\"\n        [selectedItemsLabel]=\"\n            field.multipleSelectedLabel || 'platform.angular_components.total_records_selected' | translate\n        \"\n        [appendTo]=\"field.appendTo || 'body'\"\n        (clicked)=\"field.onClick ? field.onClick($event) : null\"\n        (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    >\n    </p-multiSelect>\n} @else {\n    <p-select\n        [filter]=\"field.filter\"\n        [inputId]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [options]=\"getFieldProperty(field.options)\"\n        [placeholder]=\"field.placeholder || ' '\"\n        [formControl]=\"formControl\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [showClear]=\"field.showClear\"\n        [dataKey]=\"field.dataKey\"\n        [optionLabel]=\"field.optionLabel ?? 'label'\"\n        optionValue=\"value\"\n        [autoDisplayFirst]=\"field.autoDisplayFirst\"\n        [appendTo]=\"field.appendTo || 'body'\"\n        [editable]=\"field.editable\"\n        (clicked)=\"field.onClick ? field.onClick($event) : null\"\n        (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    >\n    </p-select>\n}\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef"] }, { kind: "component", type: i3$5.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i4$2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }, { kind: "pipe", type: i2$2.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SelectFieldComponent, selector: "ng-component", inputs: { field: "field", formControl: "formControl" }, usesInheritance: true, ngImport: i0, template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<s-select\n    [multiple]=\"field.multiple ?? false\"\n    [filter]=\"field.filter ?? false\"\n    [id]=\"field.id || field.name\"\n    [options]=\"getFieldProperty(field.options)\"\n    [placeholder]=\"field.placeholder || ' '\"\n    [formControl]=\"formControl\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    [group]=\"field.group ?? false\"\n    [showClear]=\"field.showClear ?? false\"\n    [optionLabel]=\"field.optionLabel ?? 'label'\"\n    [optionValue]=\"field.optionValue ?? 'value'\"\n    (clicked)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    [emptyMessage]=\"field.emptyMessage ?? null\"\n>\n</s-select>\n", dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef"] }, { kind: "component", type: i3$5.SelectComponent, selector: "s-select", inputs: ["placeholder", "multiple", "options", "optionLabel", "optionValue", "showClear", "filter", "checkmark", "filterBy", "group", "virtualScroll", "virtualScrollItemSize", "emptyMessage", "useRawValue", "dataKey", "disabled"], outputs: ["disabledChange"] }, { kind: "component", type: FieldLabelComponent, selector: "s-field-label", inputs: ["field", "fieldContainerRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectFieldComponent, decorators: [{
             type: Component,
-            args: [{ template: "<s-field-label [field]=\"field\"></s-field-label>\n\n@if (field.multiple) {\n    <p-multiSelect\n        [formControl]=\"formControl\"\n        [name]=\"field.name\"\n        [inputId]=\"field.id || field.name\"\n        [options]=\"getFieldProperty(field.options)\"\n        [group]=\"field.group\"\n        [placeholder]=\"field.placeholder || ''\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [emptyFilterMessage]=\"field.emptyMessage || 'platform.angular_components.no_records_found' | translate\"\n        [showDelay]=\"500\"\n        [selectedItemsLabel]=\"\n            field.multipleSelectedLabel || 'platform.angular_components.total_records_selected' | translate\n        \"\n        [appendTo]=\"field.appendTo || 'body'\"\n        (clicked)=\"field.onClick ? field.onClick($event) : null\"\n        (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    >\n    </p-multiSelect>\n} @else {\n    <p-select\n        [filter]=\"field.filter\"\n        [inputId]=\"field.id || field.name\"\n        [name]=\"field.name\"\n        [options]=\"getFieldProperty(field.options)\"\n        [placeholder]=\"field.placeholder || ' '\"\n        [formControl]=\"formControl\"\n        [sTooltip]=\"field.tooltip\"\n        tooltipPosition=\"top\"\n        [showDelay]=\"500\"\n        [showClear]=\"field.showClear\"\n        [dataKey]=\"field.dataKey\"\n        [optionLabel]=\"field.optionLabel ?? 'label'\"\n        optionValue=\"value\"\n        [autoDisplayFirst]=\"field.autoDisplayFirst\"\n        [appendTo]=\"field.appendTo || 'body'\"\n        [editable]=\"field.editable\"\n        (clicked)=\"field.onClick ? field.onClick($event) : null\"\n        (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    >\n    </p-select>\n}\n" }]
+            args: [{ template: "<s-field-label [field]=\"field\"></s-field-label>\n\n<s-select\n    [multiple]=\"field.multiple ?? false\"\n    [filter]=\"field.filter ?? false\"\n    [id]=\"field.id || field.name\"\n    [options]=\"getFieldProperty(field.options)\"\n    [placeholder]=\"field.placeholder || ' '\"\n    [formControl]=\"formControl\"\n    [sTooltip]=\"field.tooltip\"\n    tooltipPosition=\"top\"\n    [showDelay]=\"500\"\n    [group]=\"field.group ?? false\"\n    [showClear]=\"field.showClear ?? false\"\n    [optionLabel]=\"field.optionLabel ?? 'label'\"\n    [optionValue]=\"field.optionValue ?? 'value'\"\n    (clicked)=\"field.onClick ? field.onClick($event) : null\"\n    (onChange)=\"field.onChange ? field.onChange($event) : null\"\n    [emptyMessage]=\"field.emptyMessage ?? null\"\n>\n</s-select>\n" }]
         }], propDecorators: { field: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3645,7 +3645,6 @@ class DynamicFormModule {
             ControlErrorsModule,
             CountryPhonePickerModule,
             DialogModule,
-            DropdownModule,
             EmptyStateModule,
             FormsModule,
             HotkeyModule,
@@ -3670,14 +3669,14 @@ class DynamicFormModule {
             PasswordStrengthModule,
             SliderModule,
             DatePickerModule, i2$2.TranslateModule, MultiSelectModule,
-            SelectModule,
             ProfilePicturePickerModule,
             NumberInputModule,
             EditorModule,
-            CheckboxModule,
+            CheckboxListModule,
             TextAreaIAModule,
             TextAreaModule,
-            StarRatingComponent], exports: [DynamicFormComponent, DynamicFormDirective, LookupComponent] });
+            StarRatingComponent,
+            SelectComponent], exports: [DynamicFormComponent, DynamicFormDirective, LookupComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormModule, imports: [AutoCompleteModule,
             BadgeModule,
             BignumberInputModule,
@@ -3688,7 +3687,6 @@ class DynamicFormModule {
             ControlErrorsModule,
             CountryPhonePickerModule,
             DialogModule,
-            DropdownModule,
             EmptyStateModule,
             FormsModule,
             HotkeyModule,
@@ -3717,14 +3715,14 @@ class DynamicFormModule {
             DatePickerModule,
             TranslateModule.forChild(),
             MultiSelectModule,
-            SelectModule,
             ProfilePicturePickerModule,
             NumberInputModule,
             EditorModule,
-            CheckboxModule,
+            CheckboxListModule,
             TextAreaIAModule,
             TextAreaModule,
-            StarRatingComponent] });
+            StarRatingComponent,
+            SelectComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicFormModule, decorators: [{
             type: NgModule,
@@ -3740,7 +3738,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ControlErrorsModule,
                         CountryPhonePickerModule,
                         DialogModule,
-                        DropdownModule,
                         EmptyStateModule,
                         FormsModule,
                         HotkeyModule,
@@ -3769,14 +3766,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DatePickerModule,
                         TranslateModule.forChild(),
                         MultiSelectModule,
-                        SelectModule,
                         ProfilePicturePickerModule,
                         NumberInputModule,
                         EditorModule,
-                        CheckboxModule,
+                        CheckboxListModule,
                         TextAreaIAModule,
                         TextAreaModule,
-                        StarRatingComponent
+                        StarRatingComponent,
+                        SelectComponent,
                     ],
                     declarations: [
                         FieldLabelComponent,