design-angular-kit/esm2022/lib/components/form/checkbox/checkbox.component.mjs

Un toolkit Angular conforme alle linee guida di design per i servizi web della PA

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component';
import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { inputToBoolean } from '../../../utils/coercion';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
export class ItCheckboxComponent extends ItAbstractFormComponent {
    ngOnInit() {
        super.ngOnInit();
        this.markAsChecked();
    }
    ngOnChanges(changes) {
        if (changes['checked']) {
            this.markAsChecked();
        }
    }
    markAsChecked() {
        if (this.control.value || this.checked === undefined) {
            return;
        }
        const value = this.checked;
        this.writeValue(value);
        return this.onChange(value);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCheckboxComponent, isStandalone: true, selector: "it-checkbox", inputs: { toggle: ["toggle", "toggle", inputToBoolean], inline: ["inline", "inline", inputToBoolean], group: ["group", "group", inputToBoolean], checked: ["checked", "checked", inputToBoolean], indeterminate: ["indeterminate", "indeterminate", inputToBoolean] }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCheckboxComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'it-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ReactiveFormsModule, AsyncPipe], template: "<ng-container>\n  <div class=\"form-check\" [class.form-check-group]=\"group\" [class.form-check-inline]=\"inline\">\n    @if (toggle) {\n      <div class=\"toggles\">\n        <label [for]=\"id\">\n          <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n          <input\n            [id]=\"id\"\n            type=\"checkbox\"\n            [formControl]=\"control\"\n            [attr.aria-describedby]=\"id + '-help'\"\n            (click)=\"$event.stopPropagation()\" />\n          <span class=\"lever\"></span>\n        </label>\n      </div>\n    } @else {\n      <input\n        [id]=\"id\"\n        type=\"checkbox\"\n        [class.is-invalid]=\"isInvalid\"\n        [class.is-valid]=\"isValid\"\n        [class.semi-checked]=\"indeterminate\"\n        [formControl]=\"control\"\n        [attr.aria-describedby]=\"id + '-help'\"\n        (click)=\"$event.stopPropagation()\" />\n      <label class=\"form-check-label\" [for]=\"id\">\n        <ng-container *ngTemplateOutlet=\"htmlLabel\"></ng-container>\n      </label>\n    }\n\n    @if (group) {\n      <small [id]=\"id + '-help'\" class=\"form-text\">\n        <ng-content></ng-content>\n      </small>\n    }\n\n    @if (isInvalid && group) {\n      <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n        <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n      </div>\n    }\n  </div>\n\n  @if (isInvalid && !group) {\n    <div class=\"form-feedback just-validate-error-label\" [id]=\"id + '-error'\">\n      <ng-container *ngTemplateOutlet=\"error\"></ng-container>\n    </div>\n  }\n</ng-container>\n\n<ng-template #error>\n  <div #customError>\n    <ng-content select=\"[error]\"></ng-content>\n  </div>\n  @if (!customError.hasChildNodes()) {\n    {{ invalidMessage | async }}\n  }\n</ng-template>\n\n<ng-template #htmlLabel>\n  <div #customLabel>\n    <ng-content select=\"[label]\"></ng-content>\n  </div>\n  @if (!customLabel.hasChildNodes()) {\n    {{ label }}\n  }\n</ng-template>\n" }]
        }], propDecorators: { toggle: [{
                type: Input,
                args: [{ transform: inputToBoolean }]
            }], inline: [{
                type: Input,
                args: [{ transform: inputToBoolean }]
            }], group: [{
                type: Input,
                args: [{ transform: inputToBoolean }]
            }], checked: [{
                type: Input,
                args: [{ transform: inputToBoolean }]
            }], indeterminate: [{
                type: Input,
                args: [{ transform: inputToBoolean }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGVzaWduLWFuZ3VsYXIta2l0L3NyYy9saWIvY29tcG9uZW50cy9mb3JtL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2Rlc2lnbi1hbmd1bGFyLWtpdC9zcmMvbGliL2NvbXBvbmVudHMvZm9ybS9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBb0MsTUFBTSxlQUFlLENBQUM7QUFDNUcsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDckYsT0FBTyxFQUFFLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQzs7O0FBU3pELE1BQU0sT0FBTyxtQkFBb0IsU0FBUSx1QkFBbUQ7SUErQmpGLFFBQVE7UUFDZixLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFUSxXQUFXLENBQUMsT0FBc0I7UUFDekMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQztJQUNILENBQUM7SUFFTyxhQUFhO1FBQ25CLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxTQUFTLEVBQUUsQ0FBQztZQUNyRCxPQUFPO1FBQ1QsQ0FBQztRQUVELE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUM7UUFDM0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN2QixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQzs4R0FsRFUsbUJBQW1CO2tHQUFuQixtQkFBbUIsc0ZBS1YsY0FBYyxnQ0FNZCxjQUFjLDZCQU1kLGNBQWMsbUNBTWQsY0FBYyxxREFNZCxjQUFjLHlFQzFDcEMsODlEQW1FQSw0Q0R4RFksZ0JBQWdCLG1KQUFFLG1CQUFtQixzZUFBRSxTQUFTOzsyRkFFL0MsbUJBQW1CO2tCQVAvQixTQUFTO2lDQUNJLElBQUksWUFDTixhQUFhLG1CQUVOLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxnQkFBZ0IsRUFBRSxtQkFBbUIsRUFBRSxTQUFTLENBQUM7OEJBT3JCLE1BQU07c0JBQTNDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFO2dCQU1FLE1BQU07c0JBQTNDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFO2dCQU1FLEtBQUs7c0JBQTFDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFO2dCQU1FLE9BQU87c0JBQTVDLEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFO2dCQU1FLGFBQWE7c0JBQWxELEtBQUs7dUJBQUMsRUFBRSxTQUFTLEVBQUUsY0FBYyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJdEFic3RyYWN0Rm9ybUNvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL2Fic3RyYWN0cy9hYnN0cmFjdC1mb3JtLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBc3luY1BpcGUsIE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IGlucHV0VG9Cb29sZWFuIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMvY29lcmNpb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgc2VsZWN0b3I6ICdpdC1jaGVja2JveCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGVja2JveC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTmdUZW1wbGF0ZU91dGxldCwgUmVhY3RpdmVGb3Jtc01vZHVsZSwgQXN5bmNQaXBlXSxcbn0pXG5leHBvcnQgY2xhc3MgSXRDaGVja2JveENvbXBvbmVudCBleHRlbmRzIEl0QWJzdHJhY3RGb3JtQ29tcG9uZW50PGJvb2xlYW4gfCBudWxsIHwgdW5kZWZpbmVkPiBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcbiAgLyoqXG4gICAqIElmIHNob3cgY2hlY2tib3ggYXMgdG9nZ2xlXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIHRvZ2dsZT86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIElmIHNob3cgY2hlY2tib3ggaW5saW5lXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGlubGluZT86IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIElmIGlzIGNoZWNrYm94IGdyb3VwXG4gICAqIEBkZWZhdWx0IGZhbHNlXG4gICAqL1xuICBASW5wdXQoeyB0cmFuc2Zvcm06IGlucHV0VG9Cb29sZWFuIH0pIGdyb3VwPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogSWYgY2hlY2tib3ggaXMgY2hlY2tlZFxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBjaGVja2VkPzogYm9vbGVhbjtcblxuICAvKipcbiAgICogSWYgY2hlY2tib3ggaXMgaW5kZXRlcm1pbmF0ZVxuICAgKiBAZGVmYXVsdCBmYWxzZVxuICAgKi9cbiAgQElucHV0KHsgdHJhbnNmb3JtOiBpbnB1dFRvQm9vbGVhbiB9KSBpbmRldGVybWluYXRlPzogYm9vbGVhbjtcblxuICBvdmVycmlkZSBuZ09uSW5pdCgpIHtcbiAgICBzdXBlci5uZ09uSW5pdCgpO1xuICAgIHRoaXMubWFya0FzQ2hlY2tlZCgpO1xuICB9XG5cbiAgb3ZlcnJpZGUgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzWydjaGVja2VkJ10pIHtcbiAgICAgIHRoaXMubWFya0FzQ2hlY2tlZCgpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgbWFya0FzQ2hlY2tlZCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5jb250cm9sLnZhbHVlIHx8IHRoaXMuY2hlY2tlZCA9PT0gdW5kZWZpbmVkKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgY29uc3QgdmFsdWUgPSB0aGlzLmNoZWNrZWQ7XG4gICAgdGhpcy53cml0ZVZhbHVlKHZhbHVlKTtcbiAgICByZXR1cm4gdGhpcy5vbkNoYW5nZSh2YWx1ZSk7XG4gIH1cbn1cbiIsIjxuZy1jb250YWluZXI+XG4gIDxkaXYgY2xhc3M9XCJmb3JtLWNoZWNrXCIgW2NsYXNzLmZvcm0tY2hlY2stZ3JvdXBdPVwiZ3JvdXBcIiBbY2xhc3MuZm9ybS1jaGVjay1pbmxpbmVdPVwiaW5saW5lXCI+XG4gICAgQGlmICh0b2dnbGUpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGVzXCI+XG4gICAgICAgIDxsYWJlbCBbZm9yXT1cImlkXCI+XG4gICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImh0bWxMYWJlbFwiPjwvbmctY29udGFpbmVyPlxuICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgW2lkXT1cImlkXCJcbiAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXG4gICAgICAgICAgICBbYXR0ci5hcmlhLWRlc2NyaWJlZGJ5XT1cImlkICsgJy1oZWxwJ1wiXG4gICAgICAgICAgICAoY2xpY2spPVwiJGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpXCIgLz5cbiAgICAgICAgICA8c3BhbiBjbGFzcz1cImxldmVyXCI+PC9zcGFuPlxuICAgICAgICA8L2xhYmVsPlxuICAgICAgPC9kaXY+XG4gICAgfSBAZWxzZSB7XG4gICAgICA8aW5wdXRcbiAgICAgICAgW2lkXT1cImlkXCJcbiAgICAgICAgdHlwZT1cImNoZWNrYm94XCJcbiAgICAgICAgW2NsYXNzLmlzLWludmFsaWRdPVwiaXNJbnZhbGlkXCJcbiAgICAgICAgW2NsYXNzLmlzLXZhbGlkXT1cImlzVmFsaWRcIlxuICAgICAgICBbY2xhc3Muc2VtaS1jaGVja2VkXT1cImluZGV0ZXJtaW5hdGVcIlxuICAgICAgICBbZm9ybUNvbnRyb2xdPVwiY29udHJvbFwiXG4gICAgICAgIFthdHRyLmFyaWEtZGVzY3JpYmVkYnldPVwiaWQgKyAnLWhlbHAnXCJcbiAgICAgICAgKGNsaWNrKT1cIiRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiIC8+XG4gICAgICA8bGFiZWwgY2xhc3M9XCJmb3JtLWNoZWNrLWxhYmVsXCIgW2Zvcl09XCJpZFwiPlxuICAgICAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaHRtbExhYmVsXCI+PC9uZy1jb250YWluZXI+XG4gICAgICA8L2xhYmVsPlxuICAgIH1cblxuICAgIEBpZiAoZ3JvdXApIHtcbiAgICAgIDxzbWFsbCBbaWRdPVwiaWQgKyAnLWhlbHAnXCIgY2xhc3M9XCJmb3JtLXRleHRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9zbWFsbD5cbiAgICB9XG5cbiAgICBAaWYgKGlzSW52YWxpZCAmJiBncm91cCkge1xuICAgICAgPGRpdiBjbGFzcz1cImZvcm0tZmVlZGJhY2sganVzdC12YWxpZGF0ZS1lcnJvci1sYWJlbFwiIFtpZF09XCJpZCArICctZXJyb3InXCI+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJlcnJvclwiPjwvbmctY29udGFpbmVyPlxuICAgICAgPC9kaXY+XG4gICAgfVxuICA8L2Rpdj5cblxuICBAaWYgKGlzSW52YWxpZCAmJiAhZ3JvdXApIHtcbiAgICA8ZGl2IGNsYXNzPVwiZm9ybS1mZWVkYmFjayBqdXN0LXZhbGlkYXRlLWVycm9yLWxhYmVsXCIgW2lkXT1cImlkICsgJy1lcnJvcidcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJlcnJvclwiPjwvbmctY29udGFpbmVyPlxuICAgIDwvZGl2PlxuICB9XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLXRlbXBsYXRlICNlcnJvcj5cbiAgPGRpdiAjY3VzdG9tRXJyb3I+XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2Vycm9yXVwiPjwvbmctY29udGVudD5cbiAgPC9kaXY+XG4gIEBpZiAoIWN1c3RvbUVycm9yLmhhc0NoaWxkTm9kZXMoKSkge1xuICAgIHt7IGludmFsaWRNZXNzYWdlIHwgYXN5bmMgfX1cbiAgfVxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNodG1sTGFiZWw+XG4gIDxkaXYgI2N1c3RvbUxhYmVsPlxuICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltsYWJlbF1cIj48L25nLWNvbnRlbnQ+XG4gIDwvZGl2PlxuICBAaWYgKCFjdXN0b21MYWJlbC5oYXNDaGlsZE5vZGVzKCkpIHtcbiAgICB7eyBsYWJlbCB9fVxuICB9XG48L25nLXRlbXBsYXRlPlxuIl19