@taiga-ui/kit/fesm5/taiga-ui-kit-components-checkbox-block.js

Taiga UI Angular main components kit

import { __extends, __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, HostBinding, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule } from '@angular/forms';
import { isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, TuiHoveredModule, TuiPressedModule } from '@taiga-ui/cdk';
import { TuiModeDirective, TuiWrapperModule } from '@taiga-ui/core';
import { TuiCheckboxComponent, TuiCheckboxModule } from '@taiga-ui/kit/components/checkbox';

var TuiCheckboxBlockComponent = /** @class */ (function (_super) {
    __extends(TuiCheckboxBlockComponent, _super);
    function TuiCheckboxBlockComponent(control, changeDetectorRef, modeDirective) {
        var _this = _super.call(this, control, changeDetectorRef) || this;
        _this.modeDirective = modeDirective;
        _this.contentAlign = 'right';
        _this.hideCheckbox = false;
        _this.size = 'l';
        return _this;
    }
    TuiCheckboxBlockComponent_1 = TuiCheckboxBlockComponent;
    Object.defineProperty(TuiCheckboxBlockComponent.prototype, "nativeFocusableElement", {
        get: function () {
            return this.checkbox ? this.checkbox.nativeFocusableElement : null;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiCheckboxBlockComponent.prototype, "checked", {
        get: function () {
            return this.value !== false && this.hideCheckbox;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiCheckboxBlockComponent.prototype, "checkboxSize", {
        get: function () {
            return this.size === 'l' ? 'l' : 'm';
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiCheckboxBlockComponent.prototype, "focused", {
        get: function () {
            return isNativeFocused(this.nativeFocusableElement);
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiCheckboxBlockComponent.prototype, "appearance", {
        get: function () {
            if (!this.modeDirective || !this.modeDirective.mode) {
                return this.checked
                    ? "whiteblock-active" /* WhiteblockActive */
                    : "whiteblock" /* Whiteblock */;
            }
            return this.checked ? "primary" /* Primary */ : "secondary" /* Secondary */;
        },
        enumerable: true,
        configurable: true
    });
    TuiCheckboxBlockComponent.prototype.onFocused = function (focused) {
        this.updateFocused(focused);
    };
    TuiCheckboxBlockComponent.prototype.onHovered = function (hovered) {
        this.updateHovered(hovered);
    };
    TuiCheckboxBlockComponent.prototype.onPressed = function (pressed) {
        this.updatePressed(pressed);
    };
    TuiCheckboxBlockComponent.prototype.onFocusVisible = function (focusVisible) {
        this.updateFocusVisible(focusVisible);
    };
    TuiCheckboxBlockComponent.prototype.onModelChange = function (value) {
        this.updateValue(value);
    };
    var TuiCheckboxBlockComponent_1;
    TuiCheckboxBlockComponent.ctorParameters = function () { return [
        { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
        { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
        { type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] }
    ]; };
    __decorate([
        Input(),
        HostBinding('attr.data-tui-host-align'),
        tuiDefaultProp()
    ], TuiCheckboxBlockComponent.prototype, "contentAlign", void 0);
    __decorate([
        Input(),
        HostBinding('class._hidden_checkbox'),
        tuiDefaultProp()
    ], TuiCheckboxBlockComponent.prototype, "hideCheckbox", void 0);
    __decorate([
        Input(),
        HostBinding('attr.data-tui-host-size'),
        tuiDefaultProp()
    ], TuiCheckboxBlockComponent.prototype, "size", void 0);
    __decorate([
        ViewChild(TuiCheckboxComponent)
    ], TuiCheckboxBlockComponent.prototype, "checkbox", void 0);
    __decorate([
        HostBinding('class._active')
    ], TuiCheckboxBlockComponent.prototype, "checked", null);
    TuiCheckboxBlockComponent = TuiCheckboxBlockComponent_1 = __decorate([
        Component({
            selector: 'tui-checkbox-block',
            template: "<label\n    class=\"wrapper\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (tuiPressedChange)=\"onPressed($event)\"\n>\n    <tui-wrapper\n        [appearance]=\"appearance\"\n        [disabled]=\"computedDisabled\"\n        [focused]=\"computedFocusVisible\"\n        [hovered]=\"computedHovered\"\n        [pressed]=\"computedPressed\"\n        [invalid]=\"computedInvalid\"\n    >\n        <div class=\"content-wrapper\">\n            <div class=\"content\">\n                <tui-checkbox\n                    class=\"view\"\n                    [disabled]=\"computedDisabled || readOnly\"\n                    [nativeId]=\"nativeId\"\n                    [pseudoInvalid]=\"computedInvalid\"\n                    [pseudoFocused]=\"false\"\n                    [pseudoHovered]=\"computedHovered\"\n                    [pseudoPressed]=\"computedPressed\"\n                    [size]=\"checkboxSize\"\n                    [focusable]=\"focusable\"\n                    [ngModel]=\"value\"\n                    (ngModelChange)=\"onModelChange($event)\"\n                    (focusedChange)=\"onFocused($event)\"\n                    (focusVisibleChange)=\"onFocusVisible($event)\"\n                ></tui-checkbox>\n                <div class=\"label\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n    </tui-wrapper>\n</label>\n",
            changeDetection: ChangeDetectionStrategy.OnPush,
            providers: [
                {
                    provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
                    useExisting: forwardRef(function () { return TuiCheckboxBlockComponent_1; }),
                },
            ],
            styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);display:inline-block;vertical-align:top;border-radius:var(--tui-radius-m)}:host[data-tui-host-size='l'],:host[data-tui-host-size='m']{font:var(--tui-font-text-m)}:host._disabled,:host._readonly{pointer-events:none}:host-context(.tui-group_collapsed):not(:last-child){margin-right:-2px}:host-context(.tui-group_collapsed.tui-group_orientation_vertical):not(:last-child){margin-bottom:-2px;margin-right:0}.wrapper{position:relative;border-radius:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.content-wrapper{display:flex;flex-direction:column}:host[data-tui-host-size='s'] .content-wrapper{min-height:var(--tui-height-s)}:host[data-tui-host-size='m'] .content-wrapper{min-height:var(--tui-height-m)}:host[data-tui-host-size='l'] .content-wrapper{min-height:var(--tui-height-l)}.content{display:flex;align-items:center;min-height:inherit}:host[data-tui-host-align=right] .content{flex-direction:row-reverse}:host[data-tui-host-size='s'] .content{padding:0 16px 0 8px}:host[data-tui-host-size='s'][data-tui-host-align=right] .content{padding:0 8px 0 16px}:host[data-tui-host-size='s']._hidden_checkbox .content{padding:0 16px}:host[data-tui-host-size='m'] .content{padding:0 16px 0 12px}:host[data-tui-host-size='m'][data-tui-host-align=right] .content{padding:0 12px 0 16px}:host[data-tui-host-size='m']._hidden_checkbox .content{padding:0 24px}:host[data-tui-host-size='l'] .content{padding:0 16px}:host[data-tui-host-size='l']._hidden_checkbox .content{padding:0 36px}.view{margin-top:12px;margin-right:12px;align-self:flex-start}:host[data-tui-host-align=right] .view{margin-left:12px;margin-right:0}:host[data-tui-host-size='s'] .view{margin-top:8px;margin-right:8px}:host[data-tui-host-size='s'][data-tui-host-align=right] .view{margin-left:8px}:host[data-tui-host-size='m'] .view{margin-top:14px}:host[data-tui-host-size='l'] .view{margin-top:16px}:host._hidden_checkbox .view{position:absolute;height:1px;width:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);-webkit-clip-path:inset(0);clip-path:inset(0)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}:host._hidden_checkbox .label{text-align:center}"]
        }),
        __param(0, Optional()),
        __param(0, Self()),
        __param(0, Inject(NgControl)),
        __param(1, Inject(ChangeDetectorRef)),
        __param(2, Optional()),
        __param(2, Inject(TuiModeDirective))
    ], TuiCheckboxBlockComponent);
    return TuiCheckboxBlockComponent;
}(AbstractTuiNullableControl));

var TuiCheckboxBlockModule = /** @class */ (function () {
    function TuiCheckboxBlockModule() {
    }
    TuiCheckboxBlockModule = __decorate([
        NgModule({
            imports: [
                FormsModule,
                TuiHoveredModule,
                TuiPressedModule,
                TuiCheckboxModule,
                TuiWrapperModule,
            ],
            declarations: [TuiCheckboxBlockComponent],
            exports: [TuiCheckboxBlockComponent],
        })
    ], TuiCheckboxBlockModule);
    return TuiCheckboxBlockModule;
}());

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

export { TuiCheckboxBlockComponent, TuiCheckboxBlockModule };
//# sourceMappingURL=taiga-ui-kit-components-checkbox-block.js.map