import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
/**
 * A simple, stateless toggle button for indicating selection.
 */
export class SelectToggleComponent {
    constructor() {
        this.size = 'large';
        this.selected = false;
        this.hiddenWhenOff = false;
        this.disabled = false;
        this.selectedChange = new EventEmitter();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: { size: "size", selected: "selected", hiddenWhenOff: "hiddenWhenOff", disabled: "disabled", label: "label" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n    class=\"toggle\"\n    [class.hide-when-off]=\"hiddenWhenOff\"\n    [class.disabled]=\"disabled\"\n    [class.small]=\"size === 'small'\"\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [class.selected]=\"selected\"\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\n    (click)=\"selectedChange.emit(!selected)\"\n>\n    <clr-icon\n        shape=\"check-circle\"\n        [class.is-solid]=\"selected\"\n        [attr.size]=\"size === 'small' ? 24 : 32\"\n    ></clr-icon>\n</div>\n<div\n    class=\"toggle-label\"\n    [class.selected]=\"selected\"\n    [class.disabled]=\"disabled\"\n    *ngIf=\"label\"\n    (click)=\"selectedChange.emit(!selected)\"\n>\n    {{ label }}\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-inline-start:6px;text-align:start;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: SelectToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-select-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    class=\"toggle\"\n    [class.hide-when-off]=\"hiddenWhenOff\"\n    [class.disabled]=\"disabled\"\n    [class.small]=\"size === 'small'\"\n    [attr.tabindex]=\"disabled ? null : 0\"\n    [class.selected]=\"selected\"\n    (keydown.enter)=\"selectedChange.emit(!selected)\"\n    (keydown.space)=\"$event.preventDefault(); selectedChange.emit(!selected)\"\n    (click)=\"selectedChange.emit(!selected)\"\n>\n    <clr-icon\n        shape=\"check-circle\"\n        [class.is-solid]=\"selected\"\n        [attr.size]=\"size === 'small' ? 24 : 32\"\n    ></clr-icon>\n</div>\n<div\n    class=\"toggle-label\"\n    [class.selected]=\"selected\"\n    [class.disabled]=\"disabled\"\n    *ngIf=\"label\"\n    (click)=\"selectedChange.emit(!selected)\"\n>\n    {{ label }}\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:center}.toggle{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;cursor:pointer;color:var(--color-grey-300);background-color:var(--color-component-bg-100);border-radius:50%;top:-12px;left:-12px;transition:opacity .1s,color .1s}.toggle.hide-when-off{opacity:0}.toggle.small{width:24px;height:24px}.toggle:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle.selected{opacity:1;color:var(--color-success-700)}.toggle.selected:not(.disabled):hover{color:var(--color-success-600);opacity:.9}.toggle:focus{outline:none;box-shadow:0 0 2px 2px var(--color-primary-700)}.toggle.disabled{cursor:default}.toggle-label{flex:1;margin-inline-start:6px;text-align:start;font-size:12px}.toggle-label:not(.disabled){cursor:pointer}.toggle-label.selected{color:var(--color-success-800)}\n"] }]
        }], propDecorators: { size: [{
                type: Input
            }], selected: [{
                type: Input
            }], hiddenWhenOff: [{
                type: Input
            }], disabled: [{
                type: Input
            }], label: [{
                type: Input
            }], selectedChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LXRvZ2dsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3NlbGVjdC10b2dnbGUvc2VsZWN0LXRvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3NlbGVjdC10b2dnbGUvc2VsZWN0LXRvZ2dsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBRXhHOztHQUVHO0FBT0gsTUFBTSxPQUFPLHFCQUFxQjtJQU5sQztRQU9hLFNBQUksR0FBc0IsT0FBTyxDQUFDO1FBQ2xDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDakIsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVoQixtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FDMUQ7OEdBUFkscUJBQXFCO2tHQUFyQixxQkFBcUIsOE5DWGxDLCt3QkEwQkE7OzJGRGZhLHFCQUFxQjtrQkFOakMsU0FBUzsrQkFDSSxtQkFBbUIsbUJBR1osdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsSUFBSTtzQkFBWixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBBIHNpbXBsZSwgc3RhdGVsZXNzIHRvZ2dsZSBidXR0b24gZm9yIGluZGljYXRpbmcgc2VsZWN0aW9uLlxuICovXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Zkci1zZWxlY3QtdG9nZ2xlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LXRvZ2dsZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LXRvZ2dsZS5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RUb2dnbGVDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIHNpemU6ICdzbWFsbCcgfCAnbGFyZ2UnID0gJ2xhcmdlJztcbiAgICBASW5wdXQoKSBzZWxlY3RlZCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGhpZGRlbldoZW5PZmYgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuICAgIEBJbnB1dCgpIGxhYmVsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gICAgQE91dHB1dCgpIHNlbGVjdGVkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xufVxuIiwiPGRpdlxuICAgIGNsYXNzPVwidG9nZ2xlXCJcbiAgICBbY2xhc3MuaGlkZS13aGVuLW9mZl09XCJoaWRkZW5XaGVuT2ZmXCJcbiAgICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgIFtjbGFzcy5zbWFsbF09XCJzaXplID09PSAnc21hbGwnXCJcbiAgICBbYXR0ci50YWJpbmRleF09XCJkaXNhYmxlZCA/IG51bGwgOiAwXCJcbiAgICBbY2xhc3Muc2VsZWN0ZWRdPVwic2VsZWN0ZWRcIlxuICAgIChrZXlkb3duLmVudGVyKT1cInNlbGVjdGVkQ2hhbmdlLmVtaXQoIXNlbGVjdGVkKVwiXG4gICAgKGtleWRvd24uc3BhY2UpPVwiJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7IHNlbGVjdGVkQ2hhbmdlLmVtaXQoIXNlbGVjdGVkKVwiXG4gICAgKGNsaWNrKT1cInNlbGVjdGVkQ2hhbmdlLmVtaXQoIXNlbGVjdGVkKVwiXG4+XG4gICAgPGNsci1pY29uXG4gICAgICAgIHNoYXBlPVwiY2hlY2stY2lyY2xlXCJcbiAgICAgICAgW2NsYXNzLmlzLXNvbGlkXT1cInNlbGVjdGVkXCJcbiAgICAgICAgW2F0dHIuc2l6ZV09XCJzaXplID09PSAnc21hbGwnID8gMjQgOiAzMlwiXG4gICAgPjwvY2xyLWljb24+XG48L2Rpdj5cbjxkaXZcbiAgICBjbGFzcz1cInRvZ2dsZS1sYWJlbFwiXG4gICAgW2NsYXNzLnNlbGVjdGVkXT1cInNlbGVjdGVkXCJcbiAgICBbY2xhc3MuZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICpuZ0lmPVwibGFiZWxcIlxuICAgIChjbGljayk9XCJzZWxlY3RlZENoYW5nZS5lbWl0KCFzZWxlY3RlZClcIlxuPlxuICAgIHt7IGxhYmVsIH19XG48L2Rpdj5cbiJdfQ==