@ng-doc/ui-kit/fesm2022/ng-doc-ui-kit-components-checkbox.mjs

<!-- PROJECT LOGO --> <br /> <div align="center"> <a href="https://github.com/ng-doc/ng-doc"> <img src="https://ng-doc.com/assets/images/ng-doc.svg?raw=true" alt="Logo" height="150px"> </a>

import * as i0 from '@angular/core';
import { inject, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgDocIconComponent } from '@ng-doc/ui-kit/components/icon';
import { NgDocCheckedChangeDirective } from '@ng-doc/ui-kit/directives/checked-change';
import { NgDocFocusableDirective } from '@ng-doc/ui-kit/directives/focusable';
import { DIStateControl, DICompareHost, injectHostControl } from 'di-controls';

class NgDocCheckboxComponent extends DIStateControl {
    constructor() {
        super({
            host: injectHostControl({ optional: true }),
            compareHost: inject(DICompareHost, { optional: true }),
        });
        this.color = 'primary';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: NgDocCheckboxComponent, isStandalone: true, selector: "ng-doc-checkbox", inputs: { color: "color" }, host: { properties: { "attr.data-lu-color": "this.color" } }, usesInheritance: true, ngImport: i0, template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\"\n      [ngDocFocusable]=\"false\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column;font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([data-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[data-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-checkbox-border);flex:0 0 calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);background-color:var(--ng-doc-base-0);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-content{display:flex;align-items:flex-start}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-base-gutter);margin-top:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-base-gutter);line-height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgDocCheckedChangeDirective, selector: "input[ngDocChecked], input[ngDocCheckedChange]", inputs: ["ngDocChecked"], outputs: ["ngDocCheckedChange"] }, { kind: "directive", type: NgDocFocusableDirective, selector: "[ngDocFocusable]", inputs: ["ngDocFocusable"], exportAs: ["ngDocFocusable"] }, { kind: "component", type: NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "customIcon", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NgDocCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-doc-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgDocCheckedChangeDirective, NgDocFocusableDirective, NgDocIconComponent], template: "<label class=\"ng-doc-checkbox-wrapper\">\n  <div class=\"ng-doc-checkbox\">\n    <input\n      type=\"checkbox\"\n      [disabled]=\"disabled\"\n      [ngDocChecked]=\"checked()\"\n      (ngDocCheckedChange)=\"toggle(); touch()\"\n      (blur)=\"touch()\"\n      [ngDocFocusable]=\"false\" />\n    @if (isIntermediate) {\n      <ng-doc-icon icon=\"minus\"></ng-doc-icon>\n    }\n    @if (checked()) {\n      <ng-doc-icon icon=\"check\"></ng-doc-icon>\n    }\n  </div>\n  <div class=\"ng-doc-checkbox-content\">\n    <span class=\"ng-doc-checkbox-icons\">\n      <ng-content select=\"ng-doc-icon\"></ng-content>\n    </span>\n    <div class=\"ng-doc-checkbox-text\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</label>\n", styles: [":host{display:inline-flex;align-items:flex-start;flex-direction:column;font-family:var(--ng-doc-font-family);font-variant:no-contextual;color:var(--ng-doc-text);line-height:var(--ng-doc-line-height);font-size:var(--ng-doc-font-size);font-weight:var(--ng-doc-font-weight)}:host:not(:last-of-type){margin-bottom:var(--ng-doc-list-element-vertical-space);margin-right:var(--ng-doc-list-element-horizontal-space)}:host:hover:not([data-checked=true]) .ng-doc-checkbox{border:var(--ng-doc-checkbox-border-hover)}:host:not([data-disabled=true]) .ng-doc-checkbox-wrapper{cursor:pointer}:host[data-checked=true] .ng-doc-checkbox{background-color:var(--ng-doc-checkbox-color);--ng-doc-checkbox-border: var(--ng-doc-checkbox-color);--ng-doc-checkbox-border-hover: var(--ng-doc-checkbox-color);--ng-doc-icon-color: var(--ng-doc-checkbox-color-text)}input{position:absolute;bottom:0;left:50%;border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;outline:0}.ng-doc-checkbox-wrapper{display:flex}.ng-doc-checkbox{position:relative;display:flex;align-items:center;justify-content:center;width:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);border:var(--ng-doc-checkbox-border);flex:0 0 calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2);background-color:var(--ng-doc-base-0);transition:background-color var(--ng-doc-transition);box-sizing:border-box;border-radius:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-content{display:flex;align-items:flex-start}.ng-doc-checkbox-icons{display:flex;margin-left:var(--ng-doc-base-gutter);margin-top:calc(var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-icons:empty{display:none}.ng-doc-checkbox-text{margin-left:var(--ng-doc-base-gutter);line-height:calc(var(--ng-doc-base-gutter) * 2 + var(--ng-doc-base-gutter) / 2)}.ng-doc-checkbox-text:empty{display:none}\n"] }]
        }], ctorParameters: () => [], propDecorators: { color: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['attr.data-lu-color']
            }] } });

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

export { NgDocCheckboxComponent };
//# sourceMappingURL=ng-doc-ui-kit-components-checkbox.mjs.map