@agorapulse/ui-components 16.0.8 → 16.1.1-beta

package/fesm2022/agorapulse-ui-components-counter.mjs

@@ -0,0 +1,66 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input } from '@angular/core';
+
+class CounterComponent {
+    get isOrangeColor() {
+        return this.color === 'orange' && !this.notif;
+    }
+    get isBlueColor() {
+        return this.color === 'blue' && !this.notif;
+    }
+    get isGreyColor() {
+        return this.color === 'grey' && !this.notif;
+    }
+    color = 'orange';
+    get isSizeNormal() {
+        return this.size === 'normal' && !this.notif;
+    }
+    get isSizeBig() {
+        return this.size === 'big' && !this.notif;
+    }
+    size = 'normal';
+    background = true;
+    notif = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: CounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: CounterComponent, isStandalone: true, selector: "ap-counter", inputs: { color: "color", size: "size", background: "background", notif: "notif" }, host: { properties: { "class.orange": "this.isOrangeColor", "class.blue": "this.isBlueColor", "class.grey": "this.isGreyColor", "class.normal": "this.isSizeNormal", "class.big": "this.isSizeBig", "class.bg": "this.background", "class.notif": "this.notif" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:var(--comp-counter-border-radius);padding:0 2px;box-sizing:border-box}ap-counter.normal{font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);font-size:var(--comp-counter-text-style-size);height:var(--comp-counter-height);max-height:var(--comp-counter-height)}ap-counter.big{font-weight:var(--comp-counter-big-text-style-font-weight);font-family:var(--comp-counter-big-text-style-font-family);line-height:var(--comp-counter-big-text-style-line-height);font-size:var(--comp-counter-big-text-style-size);height:var(--comp-counter-big-height);max-height:var(--comp-counter-big-height)}ap-counter.blue{color:var(--comp-counter-blue-color)}ap-counter.blue.bg{background-color:var(--comp-counter-blue-with-background-background-color)}ap-counter.orange{color:var(--comp-counter-orange-color)}ap-counter.orange.bg{color:var(--comp-counter-orange-with-background-color);background-color:var(--comp-counter-orange-with-background-background-color)}ap-counter.grey{color:var(--comp-counter-grey-color)}ap-counter.grey.bg{background-color:var(--comp-counter-grey-with-background-background-color)}ap-counter.notif{padding:0 4px;border-radius:var(--comp-counter-notif-border-radius);min-width:var(--comp-counter-notif-min-width);height:var(--comp-counter-notif-min-width);color:var(--comp-counter-notif-color);background-color:var(--comp-counter-notif-background-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: CounterComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-counter', standalone: true, imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["ap-counter{display:flex;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content;border-radius:var(--comp-counter-border-radius);padding:0 2px;box-sizing:border-box}ap-counter.normal{font-weight:var(--comp-counter-text-style-font-weight);font-family:var(--comp-counter-text-style-font-family);line-height:var(--comp-counter-text-style-line-height);font-size:var(--comp-counter-text-style-size);height:var(--comp-counter-height);max-height:var(--comp-counter-height)}ap-counter.big{font-weight:var(--comp-counter-big-text-style-font-weight);font-family:var(--comp-counter-big-text-style-font-family);line-height:var(--comp-counter-big-text-style-line-height);font-size:var(--comp-counter-big-text-style-size);height:var(--comp-counter-big-height);max-height:var(--comp-counter-big-height)}ap-counter.blue{color:var(--comp-counter-blue-color)}ap-counter.blue.bg{background-color:var(--comp-counter-blue-with-background-background-color)}ap-counter.orange{color:var(--comp-counter-orange-color)}ap-counter.orange.bg{color:var(--comp-counter-orange-with-background-color);background-color:var(--comp-counter-orange-with-background-background-color)}ap-counter.grey{color:var(--comp-counter-grey-color)}ap-counter.grey.bg{background-color:var(--comp-counter-grey-with-background-background-color)}ap-counter.notif{padding:0 4px;border-radius:var(--comp-counter-notif-border-radius);min-width:var(--comp-counter-notif-min-width);height:var(--comp-counter-notif-min-width);color:var(--comp-counter-notif-color);background-color:var(--comp-counter-notif-background-color)}\n"] }]
+        }], propDecorators: { isOrangeColor: [{
+                type: HostBinding,
+                args: ['class.orange']
+            }], isBlueColor: [{
+                type: HostBinding,
+                args: ['class.blue']
+            }], isGreyColor: [{
+                type: HostBinding,
+                args: ['class.grey']
+            }], color: [{
+                type: Input
+            }], isSizeNormal: [{
+                type: HostBinding,
+                args: ['class.normal']
+            }], isSizeBig: [{
+                type: HostBinding,
+                args: ['class.big']
+            }], size: [{
+                type: Input
+            }], background: [{
+                type: HostBinding,
+                args: ['class.bg']
+            }, {
+                type: Input
+            }], notif: [{
+                type: HostBinding,
+                args: ['class.notif']
+            }, {
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CounterComponent };
+//# sourceMappingURL=agorapulse-ui-components-counter.mjs.map

package/fesm2022/agorapulse-ui-components-counter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-counter.mjs","sources":["../../../libs/ui-components/counter/src/counter.component.ts","../../../libs/ui-components/counter/src/counter.component.html","../../../libs/ui-components/counter/src/agorapulse-ui-components-counter.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type CounterColor = 'blue' | 'orange' | 'grey';\nexport type CounterSize = 'big' | 'normal';\nexport type CounterStyle = 'default' | 'notif';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-counter',\n    standalone: true,\n    templateUrl: './counter.component.html',\n    imports: [],\n    styleUrls: ['./counter.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class CounterComponent {\n    @HostBinding('class.orange') get isOrangeColor(): boolean {\n        return this.color === 'orange' && !this.notif;\n    }\n    @HostBinding('class.blue') get isBlueColor(): boolean {\n        return this.color === 'blue' && !this.notif;\n    }\n    @HostBinding('class.grey') get isGreyColor(): boolean {\n        return this.color === 'grey' && !this.notif;\n    }\n    @Input()\n    color: CounterColor = 'orange';\n\n    @HostBinding('class.normal') get isSizeNormal(): boolean {\n        return this.size === 'normal' && !this.notif;\n    }\n    @HostBinding('class.big') get isSizeBig(): boolean {\n        return this.size === 'big' && !this.notif;\n    }\n\n    @Input()\n    size: CounterSize = 'normal';\n\n    @HostBinding('class.bg')\n    @Input()\n    background: boolean = true;\n\n    @HostBinding('class.notif')\n    @Input()\n    notif: boolean = false;\n}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAea,gBAAgB,CAAA;AACzB,IAAA,IAAiC,aAAa,GAAA;QAC1C,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;KACjD;AACD,IAAA,IAA+B,WAAW,GAAA;QACtC,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C;AACD,IAAA,IAA+B,WAAW,GAAA;QACtC,OAAO,IAAI,CAAC,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C;IAED,KAAK,GAAiB,QAAQ,CAAC;AAE/B,IAAA,IAAiC,YAAY,GAAA;QACzC,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;KAChD;AACD,IAAA,IAA8B,SAAS,GAAA;QACnC,OAAO,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;KAC7C;IAGD,IAAI,GAAgB,QAAQ,CAAC;IAI7B,UAAU,GAAY,IAAI,CAAC;IAI3B,KAAK,GAAY,KAAK,CAAC;wGA7Bd,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,8ZCf7B,6BACA,EAAA,MAAA,EAAA,CAAA,0jDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FDca,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,OAAA,EAEP,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,0jDAAA,CAAA,EAAA,CAAA;8BAGJ,aAAa,EAAA,CAAA;sBAA7C,WAAW;uBAAC,cAAc,CAAA;gBAGI,WAAW,EAAA,CAAA;sBAAzC,WAAW;uBAAC,YAAY,CAAA;gBAGM,WAAW,EAAA,CAAA;sBAAzC,WAAW;uBAAC,YAAY,CAAA;gBAIzB,KAAK,EAAA,CAAA;sBADJ,KAAK;gBAG2B,YAAY,EAAA,CAAA;sBAA5C,WAAW;uBAAC,cAAc,CAAA;gBAGG,SAAS,EAAA,CAAA;sBAAtC,WAAW;uBAAC,WAAW,CAAA;gBAKxB,IAAI,EAAA,CAAA;sBADH,KAAK;gBAKN,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,UAAU,CAAA;;sBACtB,KAAK;gBAKN,KAAK,EAAA,CAAA;sBAFJ,WAAW;uBAAC,aAAa,CAAA;;sBACzB,KAAK;;;AE3CV;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-input.mjs

@@ -0,0 +1,169 @@
+import { SymbolRegistry, apAlertCircle, apCheckCircle, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgIf } from '@angular/common';
+import * as i0 from '@angular/core';
+import { forwardRef, inject, ElementRef, signal, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ViewChild, Input } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
+
+const AP_INPUT_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputComponent),
+    multi: true,
+};
+class InputComponent {
+    elementRef = inject(ElementRef);
+    symbolRegistry = inject(SymbolRegistry);
+    symbols;
+    symbolWrapper;
+    inputElement;
+    ariaLabel;
+    ariaLabelledBy;
+    ariaDescribedBy;
+    disabled = false;
+    clearable = false;
+    inputType = 'text';
+    inputId;
+    name;
+    label;
+    description;
+    prefix;
+    suffix;
+    required = false;
+    placeholder;
+    errorMessage;
+    successMessage;
+    symbolPosition = 'right';
+    _controlValueAccessorChangeFn;
+    iconExists = signal(false);
+    hostDataTest = signal(undefined);
+    value;
+    onTouched;
+    ngOnInit() {
+        if (this.label && !this.inputId) {
+            throw Error('You have to provide an input id if you want to use a label.');
+        }
+        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));
+        this.elementRef.nativeElement.removeAttribute('data-test');
+        this.symbolRegistry.registerSymbols([apAlertCircle, apCheckCircle]);
+    }
+    // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.
+    // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.
+    ngAfterViewInit() {
+        const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
+        if (hostDataTest && this.hostDataTest() !== hostDataTest) {
+            this.hostDataTest.set(hostDataTest);
+            this.elementRef.nativeElement.removeAttribute('data-test');
+        }
+    }
+    ngAfterContentInit() {
+        this.iconExists.set(!!this.symbols.length);
+    }
+    validate({ value }) {
+        const isNotValid = !this.value && this.required;
+        return (isNotValid && {
+            invalid: true,
+        });
+    }
+    onValueChange() {
+        if (this.onTouched) {
+            this.onTouched();
+        }
+        if (!this.disabled) {
+            if (this._controlValueAccessorChangeFn) {
+                this._controlValueAccessorChangeFn(this.value);
+            }
+        }
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    focusInput() {
+        this.inputElement.nativeElement.focus();
+    }
+    onClear() {
+        this.writeValue(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "16.2.10", type: InputComponent, isStandalone: true, selector: "ap-input", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", disabled: "disabled", clearable: "clearable", inputType: "inputType", inputId: "inputId", name: "name", label: "label", description: "description", prefix: "prefix", suffix: "suffix", required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorMessage: "errorMessage", successMessage: "successMessage", symbolPosition: "symbolPosition" }, providers: [
+            AP_INPUT_CONTROL_VALUE_ACCESSOR,
+            {
+                provide: NG_VALIDATORS,
+                useExisting: InputComponent,
+                multi: true,
+            },
+        ], queries: [{ propertyName: "symbols", predicate: SymbolComponent }], viewQueries: [{ propertyName: "symbolWrapper", first: true, predicate: ["symbol"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<label\n    *ngIf=\"label\"\n    [for]=\"inputId\">\n    <span>\n        {{ label }}\n    </span>\n    <span\n        *ngIf=\"description\"\n        class=\"description\">\n        {{ description }}\n    </span>\n</label>\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"iconExists()\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\">\n    <div\n        *ngIf=\"prefix\"\n        class=\"prefix\">\n        <span>\n            {{ prefix }}\n        </span>\n        <span class=\"divider\"></span>\n    </div>\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"onValueChange()\" />\n        <ng-container *ngIf=\"clearable\">\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"suffix\"\n        class=\"suffix\">\n        <span class=\"divider\"></span>\n        <span>\n            {{ suffix }}\n        </span>\n    </div>\n    <ng-content\n        #symbol\n        select=\"ap-symbol\"></ng-content>\n</div>\n\n<div\n    *ngIf=\"errorMessage\"\n    class=\"form-message error\">\n    <ap-symbol\n        symbolId=\"alert-circle\"\n        size=\"micro\" />\n    <span>\n        {{ errorMessage }}\n    </span>\n</div>\n\n<div\n    *ngIf=\"successMessage\"\n    class=\"form-message success\">\n    <ap-symbol\n        symbolId=\"check-circle\"\n        size=\"micro\" />\n    <span>\n        {{ successMessage }}\n    </span>\n</div>\n", styles: ["ap-input{display:flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);--border-width: 1px}ap-input.full-width{width:100%}ap-input.full-width .input-wrapper{min-width:100%}ap-input label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-input label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-input .input-wrapper{display:flex;align-items:center;position:relative;min-width:var(--comp-input-width-default);height:var(--comp-input-height);border:var(--border-width) solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color)}ap-input .input-wrapper:hover:not(.disabled){border-color:var(--comp-input-border-hover-color)}ap-input .input-wrapper:focus-within:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper:focus-visible:not(.disabled){outline:none}ap-input .input-wrapper:active:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-border-disabled-color)}ap-input .input-wrapper .content{display:flex;gap:var(--comp-input-spacing-horizontal);flex:1;align-items:center}ap-input .input-wrapper .content input{border:none;outline:none;box-sizing:border-box;min-height:34px;max-height:34px;padding:var(--comp-input-padding-horizontal) var(--ref-spacing-sm);flex:1;font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight);line-height:var(--comp-input-text-line-height);font-family:var(--comp-input-text-font-family);color:var(--comp-input-text-default-color);min-width:0}ap-input .input-wrapper .content input::placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content input:disabled{cursor:not-allowed;pointer-events:none;background:var(--comp-input-fill-disabled-color)}ap-input .input-wrapper .content input:disabled:placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content .counter{font-size:var(--comp-input-text-counter-size);font-weight:var(--comp-input-text-counter-font-weight);line-height:var(--comp-input-text-counter-line-height);font-family:var(--comp-input-text-counter-font-family);color:var(--comp-input-text-counter-color);padding-right:var(--comp-input-spacing-horizontal)}ap-input .input-wrapper .content .clear-button{display:flex;align-items:center;justify-content:center;border:none;margin:0;padding:0 var(--comp-input-spacing-horizontal) 0 0;background-color:transparent}ap-input .input-wrapper .content .clear-button:hover{cursor:pointer}ap-input .input-wrapper .content .clear-button ap-symbol{padding:0}ap-input .input-wrapper .prefix,ap-input .input-wrapper .suffix{height:100%;display:flex;justify-content:center;align-items:center;font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--ref-font-family);color:var(--ref-color-grey-100)}ap-input .input-wrapper .prefix .divider,ap-input .input-wrapper .suffix .divider{height:18px;width:var(--border-width);background:var(--ref-color-grey-10)}ap-input .input-wrapper ap-symbol{height:var(--comp-input-icon-size);width:var(--comp-input-icon-size);min-height:var(--comp-input-icon-size);min-width:var(--comp-input-icon-size);max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);padding-right:var(--comp-input-padding-horizontal);pointer-events:none}ap-input .input-wrapper ap-symbol:hover{cursor:text}ap-input .input-wrapper.inverse{flex-direction:row-reverse}ap-input .input-wrapper.inverse.with-icon input{padding-left:0}ap-input .input-wrapper.inverse.with-icon ap-symbol{padding-right:var(--comp-input-spacing-horizontal);padding-left:var(--comp-input-padding-horizontal)}ap-input .input-wrapper.with-icon input{padding-right:var(--ref-spacing-xxxs)}ap-input .input-wrapper.with-prefix input{padding-left:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-prefix .prefix{padding-left:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix input{padding-right:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix .suffix{padding-right:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-counter input{padding-right:0}ap-input .input-wrapper.with-error{border-color:var(--comp-input-border-error-color)}ap-input .input-wrapper.with-success{border-color:var(--comp-input-border-success-color)}.form-message{font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--sys-text-style-body-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-input.ng-valid .input-wrapper{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-input.ng-invalid .input-wrapper{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-input', standalone: true, imports: [NgIf, FormsModule, SymbolComponent], providers: [
+                        AP_INPUT_CONTROL_VALUE_ACCESSOR,
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: InputComponent,
+                            multi: true,
+                        },
+                    ], encapsulation: ViewEncapsulation.None, template: "<label\n    *ngIf=\"label\"\n    [for]=\"inputId\">\n    <span>\n        {{ label }}\n    </span>\n    <span\n        *ngIf=\"description\"\n        class=\"description\">\n        {{ description }}\n    </span>\n</label>\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"iconExists()\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\">\n    <div\n        *ngIf=\"prefix\"\n        class=\"prefix\">\n        <span>\n            {{ prefix }}\n        </span>\n        <span class=\"divider\"></span>\n    </div>\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"onValueChange()\" />\n        <ng-container *ngIf=\"clearable\">\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"suffix\"\n        class=\"suffix\">\n        <span class=\"divider\"></span>\n        <span>\n            {{ suffix }}\n        </span>\n    </div>\n    <ng-content\n        #symbol\n        select=\"ap-symbol\"></ng-content>\n</div>\n\n<div\n    *ngIf=\"errorMessage\"\n    class=\"form-message error\">\n    <ap-symbol\n        symbolId=\"alert-circle\"\n        size=\"micro\" />\n    <span>\n        {{ errorMessage }}\n    </span>\n</div>\n\n<div\n    *ngIf=\"successMessage\"\n    class=\"form-message success\">\n    <ap-symbol\n        symbolId=\"check-circle\"\n        size=\"micro\" />\n    <span>\n        {{ successMessage }}\n    </span>\n</div>\n", styles: ["ap-input{display:flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);--border-width: 1px}ap-input.full-width{width:100%}ap-input.full-width .input-wrapper{min-width:100%}ap-input label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-input label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-input .input-wrapper{display:flex;align-items:center;position:relative;min-width:var(--comp-input-width-default);height:var(--comp-input-height);border:var(--border-width) solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color)}ap-input .input-wrapper:hover:not(.disabled){border-color:var(--comp-input-border-hover-color)}ap-input .input-wrapper:focus-within:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper:focus-visible:not(.disabled){outline:none}ap-input .input-wrapper:active:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-border-disabled-color)}ap-input .input-wrapper .content{display:flex;gap:var(--comp-input-spacing-horizontal);flex:1;align-items:center}ap-input .input-wrapper .content input{border:none;outline:none;box-sizing:border-box;min-height:34px;max-height:34px;padding:var(--comp-input-padding-horizontal) var(--ref-spacing-sm);flex:1;font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight);line-height:var(--comp-input-text-line-height);font-family:var(--comp-input-text-font-family);color:var(--comp-input-text-default-color);min-width:0}ap-input .input-wrapper .content input::placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content input:disabled{cursor:not-allowed;pointer-events:none;background:var(--comp-input-fill-disabled-color)}ap-input .input-wrapper .content input:disabled:placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content .counter{font-size:var(--comp-input-text-counter-size);font-weight:var(--comp-input-text-counter-font-weight);line-height:var(--comp-input-text-counter-line-height);font-family:var(--comp-input-text-counter-font-family);color:var(--comp-input-text-counter-color);padding-right:var(--comp-input-spacing-horizontal)}ap-input .input-wrapper .content .clear-button{display:flex;align-items:center;justify-content:center;border:none;margin:0;padding:0 var(--comp-input-spacing-horizontal) 0 0;background-color:transparent}ap-input .input-wrapper .content .clear-button:hover{cursor:pointer}ap-input .input-wrapper .content .clear-button ap-symbol{padding:0}ap-input .input-wrapper .prefix,ap-input .input-wrapper .suffix{height:100%;display:flex;justify-content:center;align-items:center;font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--ref-font-family);color:var(--ref-color-grey-100)}ap-input .input-wrapper .prefix .divider,ap-input .input-wrapper .suffix .divider{height:18px;width:var(--border-width);background:var(--ref-color-grey-10)}ap-input .input-wrapper ap-symbol{height:var(--comp-input-icon-size);width:var(--comp-input-icon-size);min-height:var(--comp-input-icon-size);min-width:var(--comp-input-icon-size);max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);padding-right:var(--comp-input-padding-horizontal);pointer-events:none}ap-input .input-wrapper ap-symbol:hover{cursor:text}ap-input .input-wrapper.inverse{flex-direction:row-reverse}ap-input .input-wrapper.inverse.with-icon input{padding-left:0}ap-input .input-wrapper.inverse.with-icon ap-symbol{padding-right:var(--comp-input-spacing-horizontal);padding-left:var(--comp-input-padding-horizontal)}ap-input .input-wrapper.with-icon input{padding-right:var(--ref-spacing-xxxs)}ap-input .input-wrapper.with-prefix input{padding-left:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-prefix .prefix{padding-left:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix input{padding-right:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix .suffix{padding-right:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-counter input{padding-right:0}ap-input .input-wrapper.with-error{border-color:var(--comp-input-border-error-color)}ap-input .input-wrapper.with-success{border-color:var(--comp-input-border-success-color)}.form-message{font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--sys-text-style-body-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-input.ng-valid .input-wrapper{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-input.ng-invalid .input-wrapper{border-color:var(--comp-input-border-error-color)}\n"] }]
+        }], propDecorators: { symbols: [{
+                type: ContentChildren,
+                args: [SymbolComponent]
+            }], symbolWrapper: [{
+                type: ViewChild,
+                args: ['symbol']
+            }], inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledBy: [{
+                type: Input
+            }], ariaDescribedBy: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], inputId: [{
+                type: Input
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], label: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], prefix: [{
+                type: Input
+            }], suffix: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], placeholder: [{
+                type: Input
+            }], errorMessage: [{
+                type: Input
+            }], successMessage: [{
+                type: Input
+            }], symbolPosition: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AP_INPUT_CONTROL_VALUE_ACCESSOR, InputComponent };
+//# sourceMappingURL=agorapulse-ui-components-input.mjs.map

package/fesm2022/agorapulse-ui-components-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-input.mjs","sources":["../../../libs/ui-components/input/src/input.component.ts","../../../libs/ui-components/input/src/input.component.html","../../../libs/ui-components/input/src/agorapulse-ui-components-input.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apAlertCircle, apCheckCircle } from '@agorapulse/ui-symbol';\nimport { NgIf } from '@angular/common';\nimport {\n    AfterContentInit,\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    Input,\n    OnInit,\n    QueryList,\n    Signal,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n    | 'button'\n    | 'checkbox'\n    | 'color'\n    | 'datetime'\n    | 'datetime-local'\n    | 'email'\n    | 'file'\n    | 'hidden'\n    | 'image'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'radio'\n    | 'range'\n    | 'reset'\n    | 'search'\n    | 'submit'\n    | 'text'\n    | 'tel'\n    | 'time'\n    | 'url'\n    | 'week';\n\nexport const AP_INPUT_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => InputComponent),\n    multi: true,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-input',\n    styleUrls: ['./input.component.scss'],\n    standalone: true,\n    imports: [NgIf, FormsModule, SymbolComponent],\n    providers: [\n        AP_INPUT_CONTROL_VALUE_ACCESSOR,\n\n        {\n            provide: NG_VALIDATORS,\n\n            useExisting: InputComponent,\n\n            multi: true,\n        },\n    ],\n    templateUrl: './input.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, AfterContentInit, ControlValueAccessor {\n    readonly elementRef: ElementRef = inject(ElementRef);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n    @ContentChildren(SymbolComponent) symbols!: QueryList<SymbolComponent>;\n    @ViewChild('symbol') symbolWrapper!: ElementRef;\n    @ViewChild('input') inputElement!: ElementRef;\n\n    @Input() ariaLabel!: string;\n\n    @Input() ariaLabelledBy!: string;\n\n    @Input() ariaDescribedBy!: string;\n\n    @Input() disabled: boolean = false;\n\n    @Input() clearable: boolean = false;\n\n    @Input() inputType: InputType = 'text';\n\n    @Input() inputId?: string;\n\n    @Input({\n        required: true,\n    })\n    name!: string;\n\n    @Input() label?: string;\n\n    @Input() description?: string;\n\n    @Input() prefix?: string;\n\n    @Input() suffix?: string;\n\n    @Input({ transform: booleanAttribute }) required: boolean = false;\n\n    @Input() placeholder?: string;\n\n    @Input() errorMessage?: string;\n\n    @Input() successMessage?: string;\n\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    private _controlValueAccessorChangeFn!: (value: string | null) => void;\n\n    iconExists: WritableSignal<boolean> = signal<boolean>(false);\n\n    hostDataTest: WritableSignal<string | undefined> = signal<string | undefined>(undefined);\n\n    value!: string | null;\n\n    onTouched!: () => void;\n\n    ngOnInit(): void {\n        if (this.label && !this.inputId) {\n            throw Error('You have to provide an input id if you want to use a label.');\n        }\n        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n        this.elementRef.nativeElement.removeAttribute('data-test');\n        this.symbolRegistry.registerSymbols([apAlertCircle, apCheckCircle]);\n    }\n\n    // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.\n    // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.\n    ngAfterViewInit(): void {\n        const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n\n        if (hostDataTest && this.hostDataTest() !== hostDataTest) {\n            this.hostDataTest.set(hostDataTest);\n            this.elementRef.nativeElement.removeAttribute('data-test');\n        }\n    }\n\n    ngAfterContentInit(): void {\n        this.iconExists.set(!!this.symbols.length);\n    }\n\n    validate({ value }: FormControl) {\n        const isNotValid = !this.value && this.required;\n        return (\n            isNotValid && {\n                invalid: true,\n            }\n        );\n    }\n\n    onValueChange() {\n        if (this.onTouched) {\n            this.onTouched();\n        }\n\n        if (!this.disabled) {\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.value);\n            }\n        }\n    }\n\n    writeValue(value: string | null): void {\n        this.value = value;\n    }\n\n    registerOnChange(fn: (value: string | null) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    focusInput(): void {\n        this.inputElement.nativeElement.focus();\n    }\n\n    onClear(): void {\n        this.writeValue(null);\n    }\n}\n","<label\n    *ngIf=\"label\"\n    [for]=\"inputId\">\n    <span>\n        {{ label }}\n    </span>\n    <span\n        *ngIf=\"description\"\n        class=\"description\">\n        {{ description }}\n    </span>\n</label>\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"iconExists()\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\">\n    <div\n        *ngIf=\"prefix\"\n        class=\"prefix\">\n        <span>\n            {{ prefix }}\n        </span>\n        <span class=\"divider\"></span>\n    </div>\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (ngModelChange)=\"onValueChange()\" />\n        <ng-container *ngIf=\"clearable\">\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        </ng-container>\n    </div>\n    <div\n        *ngIf=\"suffix\"\n        class=\"suffix\">\n        <span class=\"divider\"></span>\n        <span>\n            {{ suffix }}\n        </span>\n    </div>\n    <ng-content\n        #symbol\n        select=\"ap-symbol\"></ng-content>\n</div>\n\n<div\n    *ngIf=\"errorMessage\"\n    class=\"form-message error\">\n    <ap-symbol\n        symbolId=\"alert-circle\"\n        size=\"micro\" />\n    <span>\n        {{ errorMessage }}\n    </span>\n</div>\n\n<div\n    *ngIf=\"successMessage\"\n    class=\"form-message success\">\n    <ap-symbol\n        symbolId=\"check-circle\"\n        size=\"micro\" />\n    <span>\n        {{ successMessage }}\n    </span>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-labels-selector.mjs

@@ -74,7 +74,7 @@ class LabelsSelectorComponent {
         }))));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n    class=\"labels-select\"\n    appendTo=\"body\"\n    [addTag]=\"addLabelEnabled\"\n    [clearable]=\"false\"\n    [disabled]=\"disabled\"\n    [hideSelected]=\"true\"\n    [items]=\"labels$ | async\"\n    [loading]=\"labelsLoading\"\n    [minTermLength]=\"0\"\n    [multiple]=\"true\"\n    [placeholder]=\"translation.placeholder\"\n    [typeahead]=\"labelsInput$\"\n    [(ngModel)]=\"labels\"\n    (add)=\"onCreateLabel($event)\"\n    (change)=\"onLabelsChange()\"\n    (remove)=\"onDeleteLabel($event)\"\n    (open)=\"onOpen()\">\n    <ng-template\n        let-items=\"items\"\n        let-clear=\"clear\"\n        ng-multi-label-tmp>\n        <div\n            *ngFor=\"let item of items\"\n            class=\"labels-wrapper\">\n            <ap-label\n                [content]=\"item\"\n                [selectorWidth]=\"221\"\n                [removable]=\"!disabled\"\n                (remove)=\"clear(item)\" />\n        </div>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        let-search=\"searchTerm\"\n        ng-option-tmp>\n        <div *ngIf=\"search\">\n            <b>{{ item.substring(0, search.length) }}</b>\n            {{ item.substring(search.length, item.length) }}\n        </div>\n        <div *ngIf=\"!search\">{{ item }}</div>\n    </ng-template>\n    <ng-template\n        let-search=\"searchTerm\"\n        ng-tag-tmp>\n        <div class=\"add-label\">\n            <ap-symbol\n                class=\"add-label-icon\"\n                symbolId=\"add-circle-bold-alternate\"\n                size=\"micro\" />\n            <div class=\"add-label-preview\">{{ translation.createLabel }} \"{{ search }}\"</div>\n        </div>\n    </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["color", "content", "onlyText", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n    class=\"labels-select\"\n    appendTo=\"body\"\n    [addTag]=\"addLabelEnabled\"\n    [clearable]=\"false\"\n    [disabled]=\"disabled\"\n    [hideSelected]=\"true\"\n    [items]=\"labels$ | async\"\n    [loading]=\"labelsLoading\"\n    [minTermLength]=\"0\"\n    [multiple]=\"true\"\n    [placeholder]=\"translation.placeholder\"\n    [typeahead]=\"labelsInput$\"\n    [(ngModel)]=\"labels\"\n    (add)=\"onCreateLabel($event)\"\n    (change)=\"onLabelsChange()\"\n    (remove)=\"onDeleteLabel($event)\"\n    (open)=\"onOpen()\">\n    <ng-template\n        let-items=\"items\"\n        let-clear=\"clear\"\n        ng-multi-label-tmp>\n        <div\n            *ngFor=\"let item of items\"\n            class=\"labels-wrapper\">\n            <ap-label\n                [content]=\"item\"\n                [selectorWidth]=\"221\"\n                [removable]=\"!disabled\"\n                (remove)=\"clear(item)\" />\n        </div>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        let-search=\"searchTerm\"\n        ng-option-tmp>\n        <div *ngIf=\"search\">\n            <b>{{ item.substring(0, search.length) }}</b>\n            {{ item.substring(search.length, item.length) }}\n        </div>\n        <div *ngIf=\"!search\">{{ item }}</div>\n    </ng-template>\n    <ng-template\n        let-search=\"searchTerm\"\n        ng-tag-tmp>\n        <div class=\"add-label\">\n            <ap-symbol\n                class=\"add-label-icon\"\n                symbolId=\"add-circle-bold-alternate\"\n                size=\"micro\" />\n            <div class=\"add-label-preview\">{{ translation.createLabel }} \"{{ search }}\"</div>\n        </div>\n    </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgTagTemplateDirective, selector: "[ng-tag-tmp]" }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
             type: Component,

package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { SymbolComponent, apAddCircleBoldAlternate, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { AsyncPipe, NgForOf, NgIf } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectModule } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n    placeholder: string;\n    createLabel: string;\n}\n\n@Component({\n    selector: 'ap-labels-selector',\n    templateUrl: './labels-selector.component.html',\n    styleUrls: ['./labels-selector.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, NgSelectModule, LabelComponent, NgForOf, NgIf, FormsModule, AsyncPipe],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n    @Input() addLabelEnabled: boolean = true;\n    @Input() disabled: boolean = false;\n    @Input() initialLabels: string[] = [];\n    @Input() translation!: LabelsSelectorTranslation;\n    @Input() loadingOnSearch: boolean = true;\n    @Input() multipleEnabled: boolean = true;\n    @Input({\n        required: true,\n    })\n    searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n    @Output() createLabel = new EventEmitter<string>();\n    @Output() deleteLabel = new EventEmitter<string>();\n    @Output() selectLabels = new EventEmitter<string[]>();\n    @Output() searchErrorMessage = new EventEmitter<string>();\n\n    labels: string[] = [];\n    labelsInput$: Subject<string> = new Subject<string>();\n    labels$!: Observable<string[]>;\n    labelsLoading = false;\n\n    constructor(private changeDetectorRef: ChangeDetectorRef, public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apAddCircleBoldAlternate]);\n    }\n\n    ngOnInit(): void {\n        this.labels = this.initialLabels;\n        this.setSearchFunction();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes?.initialLabels?.currentValue) {\n            this.labels = this.initialLabels;\n        }\n    }\n\n    onCreateLabel(label: string): void {\n        this.createLabel.emit(label);\n    }\n\n    onDeleteLabel(event: { value: string }) {\n        this.deleteLabel.emit(event.value);\n    }\n\n    onOpen(): void {\n        this.labelsInput$.next('');\n    }\n\n    onLabelsChange(): void {\n        if (!this.multipleEnabled && this.labels.length > 1) {\n            this.labels = [this.labels[this.labels.length - 1]];\n        }\n        this.selectLabels.emit(this.labels);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    setSearchFunction(): void {\n        this.labels$ = this.labelsInput$.pipe(\n            debounceTime(this.loadingOnSearch ? 400 : 0),\n            distinctUntilChanged(),\n            tap(() => {\n                this.labelsLoading = true;\n            }),\n            switchMap((term: string) =>\n                this.searchLabelsFunction(term).pipe(\n                    catchError(response => {\n                        this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n                        return [];\n                    }),\n                    map(response => {\n                        this.labelsLoading = false;\n                        if (!response || Object.keys(response).length == 0) {\n                            return [];\n                        }\n                        return response;\n                    })\n                )\n            )\n        );\n    }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n    class=\"labels-select\"\n    appendTo=\"body\"\n    [addTag]=\"addLabelEnabled\"\n    [clearable]=\"false\"\n    [disabled]=\"disabled\"\n    [hideSelected]=\"true\"\n    [items]=\"labels$ | async\"\n    [loading]=\"labelsLoading\"\n    [minTermLength]=\"0\"\n    [multiple]=\"true\"\n    [placeholder]=\"translation.placeholder\"\n    [typeahead]=\"labelsInput$\"\n    [(ngModel)]=\"labels\"\n    (add)=\"onCreateLabel($event)\"\n    (change)=\"onLabelsChange()\"\n    (remove)=\"onDeleteLabel($event)\"\n    (open)=\"onOpen()\">\n    <ng-template\n        let-items=\"items\"\n        let-clear=\"clear\"\n        ng-multi-label-tmp>\n        <div\n            *ngFor=\"let item of items\"\n            class=\"labels-wrapper\">\n            <ap-label\n                [content]=\"item\"\n                [selectorWidth]=\"221\"\n                [removable]=\"!disabled\"\n                (remove)=\"clear(item)\" />\n        </div>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        let-search=\"searchTerm\"\n        ng-option-tmp>\n        <div *ngIf=\"search\">\n            <b>{{ item.substring(0, search.length) }}</b>\n            {{ item.substring(search.length, item.length) }}\n        </div>\n        <div *ngIf=\"!search\">{{ item }}</div>\n    </ng-template>\n    <ng-template\n        let-search=\"searchTerm\"\n        ng-tag-tmp>\n        <div class=\"add-label\">\n            <ap-symbol\n                class=\"add-label-icon\"\n                symbolId=\"add-circle-bold-alternate\"\n                size=\"micro\" />\n            <div class=\"add-label-preview\">{{ translation.createLabel }} \"{{ search }}\"</div>\n        </div>\n    </ng-template>\n</ng-select>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { SymbolComponent, apAddCircleBoldAlternate, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { AsyncPipe, NgForOf, NgIf } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectModule } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n    placeholder: string;\n    createLabel: string;\n}\n\n@Component({\n    selector: 'ap-labels-selector',\n    templateUrl: './labels-selector.component.html',\n    styleUrls: ['./labels-selector.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, NgSelectModule, LabelComponent, NgForOf, NgIf, FormsModule, AsyncPipe],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n    @Input() addLabelEnabled: boolean = true;\n    @Input() disabled: boolean = false;\n    @Input() initialLabels: string[] = [];\n    @Input() translation!: LabelsSelectorTranslation;\n    @Input() loadingOnSearch: boolean = true;\n    @Input() multipleEnabled: boolean = true;\n    @Input({\n        required: true,\n    })\n    searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n    @Output() createLabel = new EventEmitter<string>();\n    @Output() deleteLabel = new EventEmitter<string>();\n    @Output() selectLabels = new EventEmitter<string[]>();\n    @Output() searchErrorMessage = new EventEmitter<string>();\n\n    labels: string[] = [];\n    labelsInput$: Subject<string> = new Subject<string>();\n    labels$!: Observable<string[]>;\n    labelsLoading = false;\n\n    constructor(private changeDetectorRef: ChangeDetectorRef, public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apAddCircleBoldAlternate]);\n    }\n\n    ngOnInit(): void {\n        this.labels = this.initialLabels;\n        this.setSearchFunction();\n    }\n\n    ngOnChanges(changes: SimpleChanges): void {\n        if (changes?.initialLabels?.currentValue) {\n            this.labels = this.initialLabels;\n        }\n    }\n\n    onCreateLabel(label: string): void {\n        this.createLabel.emit(label);\n    }\n\n    onDeleteLabel(event: { value: string }) {\n        this.deleteLabel.emit(event.value);\n    }\n\n    onOpen(): void {\n        this.labelsInput$.next('');\n    }\n\n    onLabelsChange(): void {\n        if (!this.multipleEnabled && this.labels.length > 1) {\n            this.labels = [this.labels[this.labels.length - 1]];\n        }\n        this.selectLabels.emit(this.labels);\n        this.changeDetectorRef.markForCheck();\n    }\n\n    setSearchFunction(): void {\n        this.labels$ = this.labelsInput$.pipe(\n            debounceTime(this.loadingOnSearch ? 400 : 0),\n            distinctUntilChanged(),\n            tap(() => {\n                this.labelsLoading = true;\n            }),\n            switchMap((term: string) =>\n                this.searchLabelsFunction(term).pipe(\n                    catchError(response => {\n                        this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n                        return [];\n                    }),\n                    map(response => {\n                        this.labelsLoading = false;\n                        if (!response || Object.keys(response).length == 0) {\n                            return [];\n                        }\n                        return response;\n                    })\n                )\n            )\n        );\n    }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n    class=\"labels-select\"\n    appendTo=\"body\"\n    [addTag]=\"addLabelEnabled\"\n    [clearable]=\"false\"\n    [disabled]=\"disabled\"\n    [hideSelected]=\"true\"\n    [items]=\"labels$ | async\"\n    [loading]=\"labelsLoading\"\n    [minTermLength]=\"0\"\n    [multiple]=\"true\"\n    [placeholder]=\"translation.placeholder\"\n    [typeahead]=\"labelsInput$\"\n    [(ngModel)]=\"labels\"\n    (add)=\"onCreateLabel($event)\"\n    (change)=\"onLabelsChange()\"\n    (remove)=\"onDeleteLabel($event)\"\n    (open)=\"onOpen()\">\n    <ng-template\n        let-items=\"items\"\n        let-clear=\"clear\"\n        ng-multi-label-tmp>\n        <div\n            *ngFor=\"let item of items\"\n            class=\"labels-wrapper\">\n            <ap-label\n                [content]=\"item\"\n                [selectorWidth]=\"221\"\n                [removable]=\"!disabled\"\n                (remove)=\"clear(item)\" />\n        </div>\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        let-search=\"searchTerm\"\n        ng-option-tmp>\n        <div *ngIf=\"search\">\n            <b>{{ item.substring(0, search.length) }}</b>\n            {{ item.substring(search.length, item.length) }}\n        </div>\n        <div *ngIf=\"!search\">{{ item }}</div>\n    </ng-template>\n    <ng-template\n        let-search=\"searchTerm\"\n        ng-tag-tmp>\n        <div class=\"add-label\">\n            <ap-symbol\n                class=\"add-label-icon\"\n                symbolId=\"add-circle-bold-alternate\"\n                size=\"micro\" />\n            <div class=\"add-label-preview\">{{ translation.createLabel }} \"{{ search }}\"</div>\n        </div>\n    </ng-template>\n</ng-select>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}