import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, HostBinding, Input, computed, input } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { splitByHighlight } from '@metad/ocap-angular/core';
import { DisplayBehaviour } from '@metad/ocap-core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
export class NgmDisplayBehaviourComponent {
    constructor() {
        this.DISPLAY_BEHAVIOUR = DisplayBehaviour;
        this.option = input({});
        this.highlight = input();
        this.isDisplayBehaviour = true;
        this.value = computed(() => {
            const highlight = this.highlight();
            const option = this.option();
            return splitByHighlight(option.key ?? option.value, highlight);
        });
        this.text = computed(() => {
            const highlight = this.highlight();
            const option = this.option();
            return splitByHighlight(option.caption || option.label, highlight);
        });
    }
    get isDescriptionAndId() {
        return this.displayBehaviour === DisplayBehaviour.descriptionAndId;
    }
    get isIdAndDescription() {
        return this.displayBehaviour === DisplayBehaviour.idAndDescription;
    }
    get isDescriptionOnly() {
        return this.displayBehaviour === DisplayBehaviour.descriptionOnly;
    }
    get isAuto() {
        return this.displayBehaviour === DisplayBehaviour.auto || !this.displayBehaviour;
    }
    get noLabel() {
        return !(this.option()?.caption || this.option()?.label);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmDisplayBehaviourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmDisplayBehaviourComponent, isStandalone: true, selector: "ngm-display-behaviour", inputs: { displayBehaviour: { classPropertyName: "displayBehaviour", publicName: "displayBehaviour", isSignal: false, isRequired: false, transformFunction: null }, excludeSelected: { classPropertyName: "excludeSelected", publicName: "excludeSelected", isSignal: false, isRequired: false, transformFunction: null }, option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ngm-display-behaviour__exclude-selected": "this.excludeSelected", "class.ngm-display-behaviour": "this.isDisplayBehaviour", "class.ngm-display-behaviour__descriptionAndId": "this.isDescriptionAndId", "class.ngm-display-behaviour__idAndDescription": "this.isIdAndDescription", "class.ngm-display-behaviour__descriptionOnly": "this.isDescriptionOnly", "class.ngm-display-behaviour__auto": "this.isAuto", "class.ngm-display-behaviour__no-label": "this.noLabel" } }, ngImport: i0, template: "@switch (displayBehaviour) {\n  @case (DISPLAY_BEHAVIOUR.descriptionAndId) {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.descriptionOnly) {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.idOnly) {\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.idAndDescription) {\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @default {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n}\n\n@if (option().selected) {\n  <mat-icon class=\"ngm-display-behaviour__selected\" color=\"accent\">done</mat-icon>\n}", styles: ["@charset \"UTF-8\";:host{display:flex;place-content:center space-between;align-items:center;white-space:nowrap}:host.ngm-display-behaviour__exclude-selected{text-decoration-line:line-through}:host.ngm-display-behaviour__auto:hover .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__auto.ngm-display-behaviour__no-label .ngm-display-behaviour__option-text{flex:0}:host.ngm-display-behaviour__auto.ngm-display-behaviour__no-label .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-text{flex:1}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-value{flex:0}:host.ngm-display-behaviour__idAndDescription .ngm-display-behaviour__option-value{margin-right:1em}:host.ngm-display-behaviour__idAndDescription .ngm-display-behaviour__option-text{font-style:italic;padding:0 .25em;font-size:.85em}:host.ngm-display-behaviour__descriptionAndId.ngm-display-behaviour__no-label .ngm-display-behaviour__option-text{flex:0}:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-text{flex:1;margin-right:1em}:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__descriptionOnly .ngm-display-behaviour__option-text{flex:1}:host.ngm-display-behaviour__descriptionOnly .ngm-display-behaviour__option-value{flex:0}:host .ngm-display-behaviour__option-text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}:host .ngm-display-behaviour__selected.mat-icon{margin-right:0}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-value,:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-value{font-size:.85em;opacity:.6;font-style:oblique;margin-left:.25em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmDisplayBehaviourComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ngm-display-behaviour', imports: [CommonModule, MatIconModule], template: "@switch (displayBehaviour) {\n  @case (DISPLAY_BEHAVIOUR.descriptionAndId) {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.descriptionOnly) {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.idOnly) {\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @case(DISPLAY_BEHAVIOUR.idAndDescription) {\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n  @default {\n    <span class=\"ngm-display-behaviour__option-text\" [title]=\"option().caption || option().label\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of text()\">{{\n        item.value\n      }}</span>\n    </span>\n    <span class=\"ngm-display-behaviour__option-value\" [title]=\"option().key ?? option().value\">\n      <span [ngClass]=\"item.match ? 'ngm-display-behaviour__highlight' : ''\" *ngFor=\"let item of value()\">{{\n        item.value\n      }}</span>\n    </span>\n  }\n}\n\n@if (option().selected) {\n  <mat-icon class=\"ngm-display-behaviour__selected\" color=\"accent\">done</mat-icon>\n}", styles: ["@charset \"UTF-8\";:host{display:flex;place-content:center space-between;align-items:center;white-space:nowrap}:host.ngm-display-behaviour__exclude-selected{text-decoration-line:line-through}:host.ngm-display-behaviour__auto:hover .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__auto.ngm-display-behaviour__no-label .ngm-display-behaviour__option-text{flex:0}:host.ngm-display-behaviour__auto.ngm-display-behaviour__no-label .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-text{flex:1}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-value{flex:0}:host.ngm-display-behaviour__idAndDescription .ngm-display-behaviour__option-value{margin-right:1em}:host.ngm-display-behaviour__idAndDescription .ngm-display-behaviour__option-text{font-style:italic;padding:0 .25em;font-size:.85em}:host.ngm-display-behaviour__descriptionAndId.ngm-display-behaviour__no-label .ngm-display-behaviour__option-text{flex:0}:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-text{flex:1;margin-right:1em}:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-value{flex:1}:host.ngm-display-behaviour__descriptionOnly .ngm-display-behaviour__option-text{flex:1}:host.ngm-display-behaviour__descriptionOnly .ngm-display-behaviour__option-value{flex:0}:host .ngm-display-behaviour__option-text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}:host .ngm-display-behaviour__selected.mat-icon{margin-right:0}:host.ngm-display-behaviour__auto .ngm-display-behaviour__option-value,:host.ngm-display-behaviour__descriptionAndId .ngm-display-behaviour__option-value{font-size:.85em;opacity:.6;font-style:oblique;margin-left:.25em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}\n"] }]
        }], propDecorators: { displayBehaviour: [{
                type: Input
            }], excludeSelected: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__exclude-selected']
            }, {
                type: Input
            }], isDisplayBehaviour: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour']
            }], isDescriptionAndId: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__descriptionAndId']
            }], isIdAndDescription: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__idAndDescription']
            }], isDescriptionOnly: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__descriptionOnly']
            }], isAuto: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__auto']
            }], noLabel: [{
                type: HostBinding,
                args: ['class.ngm-display-behaviour__no-label']
            }] } });
//# sourceMappingURL=data:application/json;base64, 