import * as i0 from '@angular/core';
import { Pipe, inject, ChangeDetectorRef, input, computed, booleanAttribute, model, output, viewChild, contentChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { NgForm, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import * as i6 from '@angular/material/chips';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i3 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import * as i4 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import { SdView } from '@sdcorejs/angular/components/view';
import { SdViewDefDirective, SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
import { SdLabel } from '@sdcorejs/angular/forms/label';
import { sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl } from '@sdcorejs/angular/forms/models';
import { I18nService } from '@sdcorejs/angular/i18n';
import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
import { Subscription } from 'rxjs';
import * as uuid from 'uuid';

class SdRemovableChipPipe {
    constructor() { }
    transform(item, removable) {
        if (typeof (removable) === 'boolean') {
            return removable;
        }
        return removable(item);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdRemovableChipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.24", ngImport: i0, type: SdRemovableChipPipe, isStandalone: true, name: "sdRemovableChip" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdRemovableChipPipe, decorators: [{
            type: Pipe,
            args: [{
                    name: 'sdRemovableChip'
                }]
        }], ctorParameters: () => [] });

class SdChipErrorStateMatcher {
    formControl;
    constructor(formControl) {
        this.formControl = formControl;
    }
    isErrorState(control, form) {
        const isSubmitted = form && form.submitted;
        return !!(this.formControl?.invalid && (this.formControl?.dirty || this.formControl?.touched || isSubmitted));
    }
}
class SdChip {
    #ref = inject(ChangeDetectorRef);
    #i18n = inject(I18nService);
    #subscription = new Subscription();
    #name = uuid.v4();
    // Signals - inputs (accept null|undefined at boundary, transform to canonical)
    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId',
            transform: (v) => v ?? undefined }] : [{
            alias: 'autoId',
            transform: (v) => v ?? undefined,
        }]));
    autoId = computed(() => (this.autoIdInput() ? `forms-chip-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
    #state = sdFormControlState(computed(() => this.formControl));
    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataDisabled" }] : []));
    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataEmpty" }] : []));
    dataValue = computed(() => sdSerializeDataValue(this.#state().value), ...(ngDevMode ? [{ debugName: "dataValue" }] : []));
    dataCount = computed(() => {
        const v = this.#state().value;
        return String(Array.isArray(v) ? v.length : 0);
    }, ...(ngDevMode ? [{ debugName: "dataCount" }] : []));
    dataRequired = computed(() => (this.required() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataRequired" }] : []));
    dataErrorMessage = computed(() => {
        void this.#state();
        const msg = this.errorMessage();
        return msg && msg.length > 0 ? msg : null;
    }, ...(ngDevMode ? [{ debugName: "dataErrorMessage" }] : []));
    name = input(undefined, ...(ngDevMode ? [{ debugName: "name", transform: (v) => v ?? undefined }] : [{
            transform: (v) => v ?? undefined,
        }]));
    appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance", transform: (v) => v || 'outline' }] : [{
            transform: (v) => v || 'outline',
        }]));
    floatLabel = input('auto', ...(ngDevMode ? [{ debugName: "floatLabel", transform: (v) => v || 'auto' }] : [{
            transform: (v) => v || 'auto',
        }]));
    size = input('md', ...(ngDevMode ? [{ debugName: "size", transform: (v) => v || 'md' }] : [{
            transform: (v) => v || 'md',
        }]));
    // why: parent may bind NgForm (template-driven), FormGroup (reactive), or a wrapper with `.form`.
    // Transform once at the input boundary so the rest of the component only deals with FormGroup.
    form = input(undefined, ...(ngDevMode ? [{ debugName: "form", transform: (val) => {
                if (!val)
                    return undefined;
                if (val instanceof NgForm)
                    return val.form;
                if (val instanceof FormGroup)
                    return val;
                if (val?.form instanceof FormGroup)
                    return val.form;
                return undefined;
            } }] : [{
            transform: (val) => {
                if (!val)
                    return undefined;
                if (val instanceof NgForm)
                    return val.form;
                if (val instanceof FormGroup)
                    return val;
                if (val?.form instanceof FormGroup)
                    return val.form;
                return undefined;
            },
        }]));
    label = input('', ...(ngDevMode ? [{ debugName: "label", transform: (v) => v ?? '' }] : [{
            transform: (v) => v ?? '',
        }]));
    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder", transform: (v) => v ?? undefined }] : [{
            transform: (v) => v ?? undefined,
        }]));
    removable = input(true, ...(ngDevMode ? [{ debugName: "removable", transform: (v) => v ?? true }] : [{
            transform: (v) => v ?? true,
        }]));
    hideInlineError = input(false, ...(ngDevMode ? [{ debugName: "hideInlineError", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    min = input(0, ...(ngDevMode ? [{ debugName: "min", transform: (v) => v ?? 0 }] : [{
            transform: (v) => v ?? 0,
        }]));
    max = input(0, ...(ngDevMode ? [{ debugName: "max", transform: (v) => v ?? 0 }] : [{
            transform: (v) => v ?? 0,
        }]));
    addable = input(true, ...(ngDevMode ? [{ debugName: "addable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
    viewed = input(false, ...(ngDevMode ? [{ debugName: "viewed", transform: sdViewedTransform }] : [{ transform: sdViewedTransform }]));
    // why: tri-state viewed — `'inline'` keeps the chip interactive; disabled `'inline'` falls back to static.
    #viewedState = sdViewedInline(this.viewed, undefined, this.disabled);
    /** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
    isViewed = this.#viewedState.isViewed;
    hyperlink = input(undefined, ...(ngDevMode ? [{ debugName: "hyperlink", transform: (v) => v ?? undefined }] : [{
            transform: (v) => v ?? undefined,
        }]));
    // Two-way model
    model = model(undefined, ...(ngDevMode ? [{ debugName: "model" }] : []));
    // Signals - outputs (modelChange auto-generated by model() signal)
    sdChange = output();
    // Template properties
    input = viewChild('input', ...(ngDevMode ? [{ debugName: "input" }] : []));
    sdViewDef = contentChild(SdViewDefDirective, ...(ngDevMode ? [{ debugName: "sdViewDef" }] : []));
    sdLabelDef = contentChild(SdLabelDefDirective, ...(ngDevMode ? [{ debugName: "sdLabelDef" }] : []));
    sdLabelTemplate = contentChild('sdLabel', ...(ngDevMode ? [{ debugName: "sdLabelTemplate" }] : []));
    sdValueTemplate = contentChild('sdValue', ...(ngDevMode ? [{ debugName: "sdValueTemplate" }] : []));
    // Local states
    #isBlurring = false;
    isFocused = false;
    #inputControl = new FormControl();
    #formControl = new SdFormControl();
    #matcher;
    separatorKeysCodes = [ENTER, COMMA];
    selectable = true;
    constructor() {
        // Update validators
        effect(() => {
            this.required();
            this.min();
            this.max();
            this.#updateValidator();
        });
        // Update model
        effect(() => {
            const values = this.model();
            if (Array.isArray(values)) {
                this.#formControl.setValue(values);
            }
        });
        // Handle disabled state
        effect(() => {
            const isDisabled = this.disabled();
            if (isDisabled) {
                this.#formControl.disable();
                this.#inputControl.disable();
            }
            else {
                this.#formControl.enable();
                this.#inputControl.enable();
            }
        });
        effect(() => {
            const nameVal = this.name();
            if (nameVal) {
                this.#name = nameVal;
            }
        });
        this.#matcher = new SdChipErrorStateMatcher(this.#formControl);
    }
    get formControl() {
        return this.#formControl;
    }
    get inputControl() {
        return this.#inputControl;
    }
    errorMessage = computed(() => {
        void this.#state();
        const errors = this.#formControl.errors;
        if (!errors)
            return undefined;
        if (errors['required'])
            return this.#i18n.t('core.form.chip.required');
        if (errors['minlength'])
            return this.#i18n.t('core.form.chip.minlength', { min: this.min() });
        if (errors['maxlength'])
            return this.#i18n.t('core.form.chip.maxlength', { max: this.max() });
        return undefined;
    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
    get matcher() {
        return this.#matcher;
    }
    ngAfterViewInit() {
        this.#subscription.add(this.#formControl.sdChanges.subscribe(() => {
            this.#ref.markForCheck();
        }));
        this.form()?.addControl(this.#name, this.#formControl);
    }
    ngOnDestroy() {
        this.form()?.removeControl(this.#name);
        this.#subscription.unsubscribe();
    }
    #updateValidator = () => {
        this.#formControl.clearValidators();
        this.#formControl.clearAsyncValidators();
        const validators = [];
        const asyncValidators = [];
        if (this.required()) {
            validators.push(Validators.required);
        }
        if (this.min() > 0) {
            validators.push(Validators.minLength(this.min()));
        }
        if (this.max() > 0) {
            validators.push(Validators.maxLength(this.max()));
        }
        this.#formControl.setValidators(validators);
        this.#formControl.setAsyncValidators(asyncValidators);
        this.#formControl.updateValueAndValidity();
    };
    #add = (event) => {
        const value = (event.value ?? '').toString().trim();
        const values = this.#formControl.value ?? [];
        if (value && this.addable() && !values.includes(value)) {
            values.push(value);
            this.#formControl.setValue(values);
            this.model.set(this.#formControl.value);
            this.sdChange.emit(this.#formControl.value);
        }
        const inputEl = this.input();
        if (inputEl)
            inputEl.nativeElement.value = '';
        this.#inputControl.setValue('');
    };
    #clickChip = ($event, item) => {
        $event.stopPropagation();
        $event.stopImmediatePropagation();
        if (!this.#formControl.disabled) {
            this.#focus();
        }
    };
    #remove = (item) => {
        const values = this.#formControl.value ?? [];
        if (typeof item === 'string' || typeof item === 'number') {
            this.#formControl.setValue(values.filter(value => item !== value));
            this.model.set(this.#formControl.value);
            this.sdChange.emit(this.#formControl.value);
        }
        this.#inputControl.setValue('');
        this.#focus();
    };
    #select = (event) => {
        const item = event.option.value;
        const values = this.#formControl.value ?? [];
        if (item) {
            if (typeof item === 'string' || typeof item === 'number') {
                if (!values.includes(item)) {
                    values.push(item);
                    this.#formControl.setValue(values);
                    this.model.set(this.#formControl.value);
                    this.sdChange.emit(this.#formControl.value);
                }
            }
            const inputEl = this.input();
            if (inputEl)
                inputEl.nativeElement.value = '';
            this.#inputControl.setValue('', {
                emitEvent: false,
            });
        }
    };
    #onFocus = () => {
        this.isFocused = true;
        this.#isBlurring = false;
        this.#inputControl.setValue('');
    };
    #onBlur = () => {
        this.#isBlurring = true;
        setTimeout(() => {
            if (this.#isBlurring) {
                this.isFocused = false;
                this.#inputControl.setValue('', {
                    emitEvent: false,
                });
                this.#ref.detectChanges();
            }
        }, 150);
    };
    #onClick = () => {
        if (this.sdViewDef()?.templateRef) {
            if (!this.#formControl.disabled && !this.isFocused) {
                this.#focus();
            }
        }
    };
    #focus = () => {
        this.isFocused = true;
        this.#isBlurring = false;
        setTimeout(() => {
            if (this.isFocused) {
                this.input()?.nativeElement?.focus();
            }
        }, 100);
    };
    #clear = ($event) => {
        $event?.stopPropagation();
        this.#inputControl.setValue('');
        this.#formControl.setValue([]);
        this.model.set(this.#formControl.value);
        this.sdChange.emit(this.#formControl.value);
        this.#ref.detectChanges();
    };
    // Public method to expose private methods for template
    onAdd = (event) => this.#add(event);
    onClickChip = (event, item) => this.#clickChip(event, item);
    onRemove = (item) => this.#remove(item);
    onSelect = (event) => this.#select(event);
    onFocus = () => this.#onFocus();
    onBlur = () => this.#onBlur();
    onClick = () => this.#onClick();
    focus = () => this.#focus();
    onClear = ($event) => this.#clear($event);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SdChip, isStandalone: true, selector: "sd-chip", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", sdChange: "sdChange" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed()" } }, queries: [{ propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelDef", first: true, predicate: SdLabelDefDirective, descendants: true, isSignal: true }, { propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _lbl = label();\n@let _app = appearance();\n@let _req = required();\n@let _viewed = isViewed();\n@let _hideErr = hideInlineError();\n@let _viewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _viewDef?.templateRef) || undefined;\n@let _errMsg = errorMessage();\n@let _size = size();\n@let _removable = removable();\n\n@if (_viewed) {\n  <sd-view\n    [label]=\"_lbl\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_app && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_app && _lbl && !_labelTemplate) {\n    <sd-label [label]=\"_lbl\" [required]=\"_req\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (keydown.enter)=\"onClick()\"\n    tabindex=\"0\"\n    (click)=\"onClick()\">\n    @if (_viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_viewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\n      <mat-form-field\n        [class.sd-md]=\"_size === 'md'\"\n        [class.sd-sm]=\"_size === 'sm'\"\n        [class.hide-inline-error]=\"_hideErr\"\n        [appearance]=\"_app\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_app && _lbl) {\n          <mat-label>{{ _lbl }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\n          @for (item of formControl.value; track $index) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"_size === 'md'\"\n                [class.sd-sm]=\"_size === 'sm'\"\n                [removable]=\"_removable\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\">\n                <span>{{ item }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _lbl\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"onAdd($event)\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            [required]=\"_req\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            #input />\n        </mat-chip-grid>\n        @if (_hideErr && _errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!_hideErr && _errMsg && formControl.touched) {\n          <mat-error>{{ _errMsg }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}.sd-chip-input{margin-top:0!important}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "pipe", type: SdRemovableChipPipe, name: "sdRemovableChip" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SdChip, decorators: [{
            type: Component,
            args: [{ selector: 'sd-chip', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed()' }, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatInputModule,
                        MatTooltipModule,
                        MatFormFieldModule,
                        MatAutocompleteModule,
                        MatIconModule,
                        MatProgressSpinnerModule,
                        MatChipsModule,
                        SdLabel,
                        SdView,
                        SdRemovableChipPipe,
                    ], template: "@let _lbl = label();\n@let _app = appearance();\n@let _req = required();\n@let _viewed = isViewed();\n@let _hideErr = hideInlineError();\n@let _viewDef = sdViewDef();\n@let _labelTemplate = (sdLabelTemplate() ?? sdLabelDef()?.templateRef) || undefined;\n@let _valueTemplate = (sdValueTemplate() ?? _viewDef?.templateRef) || undefined;\n@let _errMsg = errorMessage();\n@let _size = size();\n@let _removable = removable();\n\n@if (_viewed) {\n  <sd-view\n    [label]=\"_lbl\"\n    [labelTemplate]=\"_labelTemplate\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"_valueTemplate\">\n  </sd-view>\n} @else {\n  @if (!_app && _labelTemplate) {\n    <ng-container *ngTemplateOutlet=\"_labelTemplate\"></ng-container>\n  }\n  @if (!_app && _lbl && !_labelTemplate) {\n    <sd-label [label]=\"_lbl\" [required]=\"_req\"></sd-label>\n  }\n\n  <div\n    class=\"d-flex align-items-center\"\n    [class.sd-view]=\"!!_viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (keydown.enter)=\"onClick()\"\n    tabindex=\"0\"\n    (click)=\"onClick()\">\n    @if (_viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"_viewDef!.templateRef; context: { value: formControl.value }\"></ng-container>\n    } @else {\n      <mat-form-field\n        [class.sd-md]=\"_size === 'md'\"\n        [class.sd-sm]=\"_size === 'sm'\"\n        [class.hide-inline-error]=\"_hideErr\"\n        [appearance]=\"_app\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_app && _lbl) {\n          <mat-label>{{ _lbl }}</mat-label>\n        }\n        <mat-chip-grid [formControl]=\"formControl\" #chipList [class.sd-md]=\"_size === 'md'\" [class.sd-sm]=\"_size === 'sm'\">\n          @for (item of formControl.value; track $index) {\n            @if (item) {\n              <mat-chip-row\n                [class.sd-md]=\"_size === 'md'\"\n                [class.sd-sm]=\"_size === 'sm'\"\n                [removable]=\"_removable\"\n                (removed)=\"onRemove(item)\"\n                [disabled]=\"inputControl.disabled\"\n                (click)=\"onClickChip($event, item)\">\n                <span>{{ item }}</span>\n                @if (!inputControl.disabled && item | sdRemovableChip: _removable) {\n                  <mat-icon matChipRemove>cancel</mat-icon>\n                }\n              </mat-chip-row>\n            }\n          }\n          <input\n            class=\"sd-chip-input\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"placeholder() || _lbl\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (matChipInputTokenEnd)=\"onAdd($event)\"\n            autocomplete=\"off\"\n            [errorStateMatcher]=\"matcher\"\n            (focus)=\"onFocus()\"\n            (blur)=\"onBlur()\"\n            [required]=\"_req\"\n            matInput\n            [attr.data-autoId]=\"autoId()\"\n            [attr.data-disabled]=\"dataDisabled()\"\n            [attr.data-empty]=\"dataEmpty()\"\n            [attr.data-value]=\"dataValue()\"\n            [attr.data-count]=\"dataCount()\"\n            [attr.data-required]=\"dataRequired()\"\n            [attr.data-error-message]=\"dataErrorMessage()\"\n            #input />\n        </mat-chip-grid>\n        @if (_hideErr && _errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!_hideErr && _errMsg && formControl.touched) {\n          <mat-error>{{ _errMsg }}</mat-error>\n        }\n      </mat-form-field>\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}.sd-chip-input{margin-top:0!important}:host ::ng-deep .mat-mdc-form-field.no-padding-wrapper .mat-mdc-text-field-wrapper{padding-bottom:0}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip{padding:7px 10px;min-height:26px}:host ::ng-deep mat-form-field.c-md .mat-mdc-standard-chip .mat-mdc-chip-trailing-icon{padding:7px 7px 7px 10px}:host ::ng-deep .mat-mdc-chip-row.sd-sm{--mdc-chip-label-text-size: 12px;--mdc-chip-container-height: 20px}:host ::ng-deep .mat-mdc-chip-set.sd-md{margin-top:10px}:host ::ng-deep .mat-mdc-chip-set.sd-sm{margin-top:2px}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}\n"] }]
        }], ctorParameters: () => [], propDecorators: { autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], addable: [{ type: i0.Input, args: [{ isSignal: true, alias: "addable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], hyperlink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyperlink", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], input: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], sdViewDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdViewDefDirective), { isSignal: true }] }], sdLabelDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdLabelDefDirective), { isSignal: true }] }], sdLabelTemplate: [{ type: i0.ContentChild, args: ['sdLabel', { isSignal: true }] }], sdValueTemplate: [{ type: i0.ContentChild, args: ['sdValue', { isSignal: true }] }] } });

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

export { SdChip, SdRemovableChipPipe };
//# sourceMappingURL=sdcorejs-angular-forms-chip.mjs.map
