import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { SelectionModel } from '@angular/cdk/collections';
import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, Output, forwardRef, signal } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgmDensityDirective } from '@metad/ocap-angular/core';
import { map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@metad/ocap-angular/core";
import * as i2 from "@angular/common";
export class NgmTagsComponent {
    constructor() {
        // @HostBinding('class.ngm-tags') isTagsComponent = true
        this.tags = [];
        this.exclude = false;
        this._selectable = false;
        this._disabled = false;
        this._multiple = signal(false);
        this.selection = new SelectionModel(true, []);
        this.selectedChange = this.selection.changed.pipe(map((change) => change.source.selected));
        this._onChange = () => { };
        this._onTouched = () => { };
        this.selectedSub = this.selection.changed.pipe(map((change) => change.source.selected)).subscribe((selected) => {
            this._onChange(selected);
        });
    }
    get selectable() {
        return this._selectable;
    }
    set selectable(value) {
        this._selectable = coerceBooleanProperty(value);
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
    }
    get multiple() {
        return this._multiple();
    }
    set multiple(value) {
        this._multiple.set(coerceBooleanProperty(value));
    }
    toggleTag(tag) {
        this.selection.selected
            .filter((item) => item !== (tag.key ?? tag.value))
            .forEach((key) => {
            this.selection.deselect(key);
        });
        this.selection.toggle(tag.key ?? tag.value);
    }
    isSelected(tag) {
        return this.selection.isSelected(tag.key ?? tag.value);
    }
    writeValue(obj) {
        this.selection.clear();
        if (obj) {
            this.selection.select(...obj);
        }
    }
    registerOnChange(fn) {
        this._onChange = fn;
    }
    registerOnTouched(fn) {
        this._onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmTagsComponent, isStandalone: true, selector: "ngm-tags", inputs: { tags: "tags", exclude: "exclude", color: "color", selectable: "selectable", disabled: "disabled", multiple: "multiple" }, outputs: { selectedChange: "selectedChange" }, host: { properties: { "class.selectable": "this.selectable", "class.disabled": "this.disabled" }, classAttribute: "ngm-tags" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                multi: true,
                useExisting: forwardRef(() => NgmTagsComponent)
            }
        ], hostDirectives: [{ directive: i1.NgmDensityDirective, inputs: ["small", "small", "large", "large", "ngm-density", "ngm-density"] }], ngImport: i0, template: "@for (tag of tags; track tag.key) {\n    <div class=\"tag block font-bold leading-sm \n        overflow-hidden text-ellipsis whitespace-nowrap\"\n        [class.cursor-not-allowed]=\"disabled\"\n        [ngClass]=\"tag.color ?? color\"\n        [class.selected]=\"isSelected(tag)\"\n        (click)=\"selectable && toggleTag(tag)\">\n        <span>\n            {{tag.caption || tag.label}}\n        </span>\n    </div>\n}", styles: [":host{display:flex;align-items:center;gap:.5rem}:host.disabled .tag{opacity:.5}:host .tag{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host .tag.primary{color:var(--ngm-color-on-primary-container)}:host .tag.blue{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}:is(.dark :host .tag.blue){--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity))}:host .tag.green{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity))}:is(.dark :host .tag.green){--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity))}:host .tag.red{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}:is(.dark :host .tag.red){--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}:host .tag.yellow{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity))}:is(.dark :host .tag.yellow){--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity))}:host .tag.gray{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}:is(.dark :host .tag.gray){--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}:host.selectable .tag{cursor:pointer}:host.selectable .tag.selected{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}:is(.dark :host.selectable .tag.selected){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}:host.selectable .tag.blue.selected{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}:host.selectable .tag.green.selected{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}:host.selectable .tag.red.selected{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}:host.selectable .tag.yellow.selected{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}:host.selectable .tag.gray.selected{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}:host:not(.selectable) .tag.primary{background-color:var(--ngm-color-primary-container)}:host:not(.selectable) .tag.blue{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.blue){background-color:#dbeafecc}:host:not(.selectable) .tag.green{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.green){background-color:#dcfce7cc}:host:not(.selectable) .tag.red{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.red){background-color:#fee2e2cc}:host:not(.selectable) .tag.yellow{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.yellow){background-color:#fef9c3cc}:host:not(.selectable) .tag.gray{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.gray){background-color:#f3f4f6cc}:host.small .tag{border-radius:.375rem;padding:.125rem .375rem;font-size:.75rem;line-height:1rem;font-weight:500}:host.large .tag{border-radius:.5rem;padding:.25rem 1rem;font-size:1rem;line-height:1.5rem}.tag{border-radius:.5rem;padding:.25rem .75rem}::ng-deep .ngm-density__cosy .ngm-tags .tag,::ng-deep .ngm-tags.ngm-density__cosy .tag{border-radius:.5rem;padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem}::ng-deep .ngm-density__compact .ngm-tags .tag,::ng-deep .ngm-tags.ngm-density__compact .tag{border-radius:.375rem;padding-left:.25rem;padding-right:.25rem;padding-top:0;padding-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmTagsComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-tags', hostDirectives: [
                        {
                            directive: NgmDensityDirective,
                            inputs: ['small', 'large', 'ngm-density']
                        }
                    ], host: {
                        class: 'ngm-tags'
                    }, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => NgmTagsComponent)
                        }
                    ], template: "@for (tag of tags; track tag.key) {\n    <div class=\"tag block font-bold leading-sm \n        overflow-hidden text-ellipsis whitespace-nowrap\"\n        [class.cursor-not-allowed]=\"disabled\"\n        [ngClass]=\"tag.color ?? color\"\n        [class.selected]=\"isSelected(tag)\"\n        (click)=\"selectable && toggleTag(tag)\">\n        <span>\n            {{tag.caption || tag.label}}\n        </span>\n    </div>\n}", styles: [":host{display:flex;align-items:center;gap:.5rem}:host.disabled .tag{opacity:.5}:host .tag{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host .tag.primary{color:var(--ngm-color-on-primary-container)}:host .tag.blue{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}:is(.dark :host .tag.blue){--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity))}:host .tag.green{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity))}:is(.dark :host .tag.green){--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity))}:host .tag.red{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity))}:is(.dark :host .tag.red){--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity))}:host .tag.yellow{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity))}:is(.dark :host .tag.yellow){--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity))}:host .tag.gray{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}:is(.dark :host .tag.gray){--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity))}:host.selectable .tag{cursor:pointer}:host.selectable .tag.selected{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}:is(.dark :host.selectable .tag.selected){--tw-bg-opacity: 1;background-color:rgb(107 114 128 / var(--tw-bg-opacity))}:host.selectable .tag.blue.selected{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}:host.selectable .tag.green.selected{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}:host.selectable .tag.red.selected{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}:host.selectable .tag.yellow.selected{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}:host.selectable .tag.gray.selected{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}:host:not(.selectable) .tag.primary{background-color:var(--ngm-color-primary-container)}:host:not(.selectable) .tag.blue{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.blue){background-color:#dbeafecc}:host:not(.selectable) .tag.green{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.green){background-color:#dcfce7cc}:host:not(.selectable) .tag.red{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.red){background-color:#fee2e2cc}:host:not(.selectable) .tag.yellow{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.yellow){background-color:#fef9c3cc}:host:not(.selectable) .tag.gray{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}:is(.dark :host:not(.selectable) .tag.gray){background-color:#f3f4f6cc}:host.small .tag{border-radius:.375rem;padding:.125rem .375rem;font-size:.75rem;line-height:1rem;font-weight:500}:host.large .tag{border-radius:.5rem;padding:.25rem 1rem;font-size:1rem;line-height:1.5rem}.tag{border-radius:.5rem;padding:.25rem .75rem}::ng-deep .ngm-density__cosy .ngm-tags .tag,::ng-deep .ngm-tags.ngm-density__cosy .tag{border-radius:.5rem;padding:.125rem .5rem;font-size:.875rem;line-height:1.25rem}::ng-deep .ngm-density__compact .ngm-tags .tag,::ng-deep .ngm-tags.ngm-density__compact .tag{border-radius:.375rem;padding-left:.25rem;padding-right:.25rem;padding-top:0;padding-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:600}\n"] }]
        }], propDecorators: { tags: [{
                type: Input
            }], exclude: [{
                type: Input
            }], color: [{
                type: Input
            }], selectable: [{
                type: HostBinding,
                args: ['class.selectable']
            }, {
                type: Input
            }], disabled: [{
                type: HostBinding,
                args: ['class.disabled']
            }, {
                type: Input
            }], multiple: [{
                type: Input
            }], selectedChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 