@agorapulse/ui-components 20.3.38 → 20.3.40

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

@@ -1,3 +1,4 @@
+import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { SymbolRegistry, apErrorFill, apRoundedCheckFill, apClose, apSearch, SymbolComponent } from '@agorapulse/ui-symbol';
 import * as i0 from '@angular/core';
 import { forwardRef, inject, ElementRef, EventEmitter, signal, booleanAttribute, Output, Input, ViewChild, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
@@ -16,6 +17,9 @@ const SEARCH_SYMBOL_ID = 'search';
 class InputComponent {
     elementRef = inject(ElementRef);
     symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
+    }
     symbols;
     symbolWrapper;
     inputElement;
@@ -131,7 +135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             multi: true,
                         },
                     ], encapsulation: ViewEncapsulation.None, template: "@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\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    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\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            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\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-text-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:0 var(--comp-input-padding-horizontal);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);color:var(--comp-input-text-disabled-color)}ap-input .input-wrapper .content input:disabled:placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content input[type=search]::-webkit-search-decoration,ap-input .input-wrapper .content input[type=search]::-webkit-search-cancel-button,ap-input .input-wrapper .content input[type=search]::-webkit-search-results-button,ap-input .input-wrapper .content input[type=search]::-webkit-search-results-decoration{display:none}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;box-sizing:content-box}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(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-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: [{
+        }], ctorParameters: () => [], propDecorators: { symbols: [{
                 type: ContentChildren,
                 args: [SymbolComponent]
             }], symbolWrapper: [{

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-legacy-input.mjs","sources":["../../../libs/ui-components/legacy/input/src/input.component.ts","../../../libs/ui-components/legacy/input/src/input.component.html","../../../libs/ui-components/legacy/input/src/agorapulse-ui-components-legacy-input.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apClose, apErrorFill, apRoundedCheckFill, apSearch } from '@agorapulse/ui-symbol';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnInit,\n    Output,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n    | 'color'\n    | 'datetime'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'range'\n    | 'search'\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\nconst SEARCH_SYMBOL_ID = 'search';\n\n/**\n * @deprecated use native input with directive apInput, ap-input-group and ap-form-field instead\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-input',\n    styleUrls: ['./input.component.scss'],\n    imports: [FormsModule, SymbolComponent],\n    providers: [\n        AP_INPUT_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: InputComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './input.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, 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() symbolId?: string;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() keyup = new EventEmitter<KeyboardEvent>();\n\n    private _controlValueAccessorChangeFn!: (value: string | null) => void;\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        if (this.inputType === 'search') {\n            this.symbolId = SEARCH_SYMBOL_ID;\n            this.symbolPosition = 'left';\n        }\n        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n        this.elementRef.nativeElement.removeAttribute('data-test');\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill, apClose, apSearch]);\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    validate() {\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    onBlurHandle($event: FocusEvent): void {\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focus.emit($event);\n    }\n\n    onKeyup($event: KeyboardEvent): void {\n        this.keyup.emit($event);\n    }\n\n    onClear(): void {\n        this.writeValue(null);\n    }\n}\n","@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\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    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\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            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\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-legacy-input.mjs","sources":["../../../libs/ui-components/legacy/input/src/input.component.ts","../../../libs/ui-components/legacy/input/src/input.component.html","../../../libs/ui-components/legacy/input/src/agorapulse-ui-components-legacy-input.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { SymbolComponent, SymbolRegistry, apClose, apErrorFill, apRoundedCheckFill, apSearch } from '@agorapulse/ui-symbol';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnInit,\n    Output,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n    | 'color'\n    | 'datetime'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'range'\n    | 'search'\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\nconst SEARCH_SYMBOL_ID = 'search';\n\n/**\n * @deprecated use native input with directive apInput, ap-input-group and ap-form-field instead\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-input',\n    styleUrls: ['./input.component.scss'],\n    imports: [FormsModule, SymbolComponent],\n    providers: [\n        AP_INPUT_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: InputComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './input.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n    readonly elementRef: ElementRef = inject(ElementRef);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n    }\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() symbolId?: string;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() keyup = new EventEmitter<KeyboardEvent>();\n\n    private _controlValueAccessorChangeFn!: (value: string | null) => void;\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        if (this.inputType === 'search') {\n            this.symbolId = SEARCH_SYMBOL_ID;\n            this.symbolPosition = 'left';\n        }\n        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n        this.elementRef.nativeElement.removeAttribute('data-test');\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill, apClose, apSearch]);\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    validate() {\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    onBlurHandle($event: FocusEvent): void {\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focus.emit($event);\n    }\n\n    onKeyup($event: KeyboardEvent): void {\n        this.keyup.emit($event);\n    }\n\n    onClear(): void {\n        this.writeValue(null);\n    }\n}\n","@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\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    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\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            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\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-modal.mjs

@@ -1,10 +1,10 @@
-import { ButtonComponent } from '@agorapulse/ui-components/button';
 import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import * as i2 from '@agorapulse/ui-symbol';
 import { apClose, SymbolComponent } from '@agorapulse/ui-symbol';
 import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { firstValueFrom } from 'rxjs';
 import * as i1 from '@angular/material/dialog';
 
 class ModalComponent {
@@ -34,6 +34,19 @@ class ModalComponent {
     /**
      * Use it to open a modal containing the {@link componentType} component, with the right configuration.
      */
+    static openDialog(matDialog, config, componentType) {
+        return this.openWithComponent(matDialog, config, componentType);
+    }
+    /**
+     * Use it to open a modal containing the {@link componentType} component, with the right configuration, and wait for it to be closed.
+     */
+    static async openDialogAndWait(matDialog, config, componentType) {
+        return firstValueFrom(ModalComponent.openDialog(matDialog, config, componentType).afterClosed());
+    }
+    /**
+     * Use it to open a modal containing the {@link componentType} component, with the right configuration.
+     * @deprecated use {@link openDialog} instead for better type inference
+     */
     static openWithComponent(matDialog, config, componentType) {
         let matDialogConfig;
         if (config) {
@@ -63,7 +76,7 @@ class ModalComponent {
      * Use it to open a modal containing the provided templates, with the right configuration.
      */
     static openWithTemplates(matDialog, headerTemplate, mainTemplate, footerTemplate, config, sidePaneTemplate) {
-        const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);
+        const dialogRef = ModalComponent.openDialog(matDialog, config, ModalComponent);
         dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;
         dialogRef.componentInstance.headerBottomBorderEnabled =
             config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;
@@ -81,7 +94,7 @@ class ModalComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-modal', imports: [SymbolComponent, NgStyle, NgClass, ButtonComponent, NgTemplateOutlet, IconButtonComponent], template: "@if (sidePaneTemplate) {\n    <div\n        [ngStyle]=\"sidePaneStyle\"\n        [ngClass]=\"{ pane: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n    </div>\n}\n\n<div\n    class=\"modal-wrapper\"\n    [ngStyle]=\"containerStyle\"\n    [class.default-layout]=\"defaultLayout\">\n    @if (closable) {\n        <ap-icon-button\n            class=\"close-button\"\n            ariaLabel=\"Close button\"\n            name=\"close-button\"\n            color=\"none\"\n            type=\"flat\"\n            (onClick)=\"close()\">\n            <ap-symbol symbolId=\"close\" />\n        </ap-icon-button>\n    }\n    @if (headerTemplate && headerVisible) {\n        <div\n            [ngStyle]=\"headerStyle\"\n            [ngClass]=\"{ header: defaultLayout }\"\n            [class.border-bottom]=\"headerBottomBorderEnabled\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n        </div>\n    }\n    @if (mainTemplate) {\n        <div\n            [ngStyle]=\"contentStyle\"\n            [class.content]=\"defaultLayout\">\n            <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n        </div>\n    }\n    @if (footerTemplate && footerVisible) {\n        <div\n            [ngStyle]=\"footerStyle\"\n            [ngClass]=\"{ footer: defaultLayout }\">\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n        </div>\n    }\n</div>\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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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{display:flex;flex-direction:row;max-height:90vh}.modal-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.modal-wrapper.default-layout{padding-top:24px;padding-bottom:16px}.modal-wrapper .close-button{margin:-12px;position:absolute;right:24px;top:24px}.modal-wrapper .close-button ap-symbol{height:12px;width:12px}.modal-wrapper .header ::ng-deep h2{margin-top:0}.modal-wrapper .header{padding:0 24px 16px}.modal-wrapper .header.border-bottom{border-bottom:1px solid #eaecef;margin-bottom:16px}.modal-wrapper .content{color:#5d6a82;font-size:16px;padding:0 24px;flex:1;overflow-y:auto;overflow-x:hidden}.modal-wrapper .footer{align-items:center;box-shadow:0 1px #eaecef inset;display:flex;justify-content:flex-end;margin-top:24px;padding:16px 24px 0}.pane{padding:24px}::ng-deep .modal-container{max-width:100vw!important;margin:24px 24px 64px}::ng-deep .modal-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px;box-shadow:0 25px 50px #0000000a;max-width:100vw;padding:0}::ng-deep .cdk-overlay-dark-backdrop{background:#344563b3}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-modal', imports: [SymbolComponent, NgStyle, NgClass, NgTemplateOutlet, IconButtonComponent], template: "@if (sidePaneTemplate) {\n    <div\n        [ngStyle]=\"sidePaneStyle\"\n        [ngClass]=\"{ pane: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n    </div>\n}\n\n<div\n    class=\"modal-wrapper\"\n    [ngStyle]=\"containerStyle\"\n    [class.default-layout]=\"defaultLayout\">\n    @if (closable) {\n        <ap-icon-button\n            class=\"close-button\"\n            ariaLabel=\"Close button\"\n            name=\"close-button\"\n            color=\"none\"\n            type=\"flat\"\n            (onClick)=\"close()\">\n            <ap-symbol symbolId=\"close\" />\n        </ap-icon-button>\n    }\n    @if (headerTemplate && headerVisible) {\n        <div\n            [ngStyle]=\"headerStyle\"\n            [ngClass]=\"{ header: defaultLayout }\"\n            [class.border-bottom]=\"headerBottomBorderEnabled\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n        </div>\n    }\n    @if (mainTemplate) {\n        <div\n            [ngStyle]=\"contentStyle\"\n            [class.content]=\"defaultLayout\">\n            <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n        </div>\n    }\n    @if (footerTemplate && footerVisible) {\n        <div\n            [ngStyle]=\"footerStyle\"\n            [ngClass]=\"{ footer: defaultLayout }\">\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n        </div>\n    }\n</div>\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=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[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{display:flex;flex-direction:row;max-height:90vh}.modal-wrapper{position:relative;width:100%;display:flex;flex-direction:column}.modal-wrapper.default-layout{padding-top:24px;padding-bottom:16px}.modal-wrapper .close-button{margin:-12px;position:absolute;right:24px;top:24px}.modal-wrapper .close-button ap-symbol{height:12px;width:12px}.modal-wrapper .header ::ng-deep h2{margin-top:0}.modal-wrapper .header{padding:0 24px 16px}.modal-wrapper .header.border-bottom{border-bottom:1px solid #eaecef;margin-bottom:16px}.modal-wrapper .content{color:#5d6a82;font-size:16px;padding:0 24px;flex:1;overflow-y:auto;overflow-x:hidden}.modal-wrapper .footer{align-items:center;box-shadow:0 1px #eaecef inset;display:flex;justify-content:flex-end;margin-top:24px;padding:16px 24px 0}.pane{padding:24px}::ng-deep .modal-container{max-width:100vw!important;margin:24px 24px 64px}::ng-deep .modal-container .mat-mdc-dialog-container .mdc-dialog__surface{border-radius:10px;box-shadow:0 25px 50px #0000000a;max-width:100vw;padding:0}::ng-deep .cdk-overlay-dark-backdrop{background:#344563b3}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i2.SymbolRegistry }], propDecorators: { closable: [{
                 type: Input
             }], headerBottomBorderEnabled: [{

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-modal.mjs","sources":["../../../libs/ui-components/modal/src/modal.component.ts","../../../libs/ui-components/modal/src/modal.component.html","../../../libs/ui-components/modal/src/agorapulse-ui-components-modal.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport { IconButtonComponent } from '@agorapulse/ui-components/icon-button';\nimport { apClose, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';\nimport { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface ModalConfig<T = unknown> extends ModalConfigBase<T> {\n    closable?: boolean;\n    headerBottomBorderEnabled?: boolean;\n}\n\nexport interface ModalConfigBase<T> {\n    backdropCloseEnable?: boolean;\n    matDialogConfig?: MatDialogConfig<T>;\n}\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-modal',\n    templateUrl: 'modal.component.html',\n    imports: [SymbolComponent, NgStyle, NgClass, ButtonComponent, NgTemplateOutlet, IconButtonComponent],\n    styleUrls: ['modal.component.scss'],\n})\nexport class ModalComponent {\n    static readonly PANEL_CLASS = 'modal-container';\n\n    constructor(\n        public dialogRef: MatDialogRef<ComponentType<any>>,\n        public symbolRegistry: SymbolRegistry\n    ) {\n        dialogRef.disableClose = true;\n        this.symbolRegistry.registerSymbols([apClose]);\n    }\n\n    @Input() closable = false;\n    @Input() headerBottomBorderEnabled = false;\n    @Input() footerTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() footerVisible = true;\n    @Input() headerTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() headerVisible = true;\n    @Input({\n        required: true,\n    })\n    mainTemplate!: TemplateRef<any>;\n    @Input() sidePaneTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() sidePaneStyle: { [arg: string]: string } | undefined = {};\n    @Input() containerStyle: { [arg: string]: string } | undefined = {};\n    @Input() headerStyle: { [arg: string]: string } | undefined = {};\n    @Input() contentStyle: { [arg: string]: string } | undefined = {};\n    @Input() footerStyle: { [arg: string]: string } | undefined = {};\n    @Input() defaultLayout = true;\n\n    /**\n     * Use it to open a modal containing the {@link componentType} component, with the right configuration.\n     */\n    static openWithComponent<T, Y>(\n        matDialog: MatDialog,\n        config: ModalConfigBase<Y> | undefined,\n        componentType: ComponentType<T>\n    ): MatDialogRef<T> {\n        let matDialogConfig: MatDialogConfig<Y> | undefined;\n        if (config) {\n            matDialogConfig = config.matDialogConfig;\n            if (matDialogConfig && config.matDialogConfig) {\n                matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)\n                    ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array\n                    : [config.matDialogConfig.panelClass ?? '', ModalComponent.PANEL_CLASS]; // in the other case, it's a String\n            } else {\n                matDialogConfig = { panelClass: ModalComponent.PANEL_CLASS };\n            }\n        } else {\n            matDialogConfig = {\n                panelClass: ModalComponent.PANEL_CLASS,\n            };\n        }\n        matDialogConfig.autoFocus = false; // Prevent first button to be focused\n\n        const dialogRef = matDialog.open(componentType, matDialogConfig);\n        if (config?.backdropCloseEnable === true) {\n            dialogRef.disableClose = false;\n        }\n        return dialogRef;\n    }\n\n    /**\n     * Use it to open a modal containing the provided templates, with the right configuration.\n     */\n    static openWithTemplates<T>(\n        matDialog: MatDialog,\n        headerTemplate: TemplateRef<any> | undefined,\n        mainTemplate: TemplateRef<any>,\n        footerTemplate?: TemplateRef<any> | undefined,\n        config?: ModalConfig<T>,\n        sidePaneTemplate?: TemplateRef<any> | undefined\n    ): MatDialogRef<ModalComponent> {\n        const dialogRef = ModalComponent.openWithComponent(matDialog, config, ModalComponent);\n        dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;\n        dialogRef.componentInstance.headerBottomBorderEnabled =\n            config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;\n        dialogRef.componentInstance.headerTemplate = headerTemplate;\n        dialogRef.componentInstance.mainTemplate = mainTemplate;\n        dialogRef.componentInstance.footerTemplate = footerTemplate;\n        dialogRef.componentInstance.sidePaneTemplate = sidePaneTemplate;\n        return dialogRef;\n    }\n\n    close(): void {\n        this.dialogRef.close();\n    }\n}\n","@if (sidePaneTemplate) {\n    <div\n        [ngStyle]=\"sidePaneStyle\"\n        [ngClass]=\"{ pane: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n    </div>\n}\n\n<div\n    class=\"modal-wrapper\"\n    [ngStyle]=\"containerStyle\"\n    [class.default-layout]=\"defaultLayout\">\n    @if (closable) {\n        <ap-icon-button\n            class=\"close-button\"\n            ariaLabel=\"Close button\"\n            name=\"close-button\"\n            color=\"none\"\n            type=\"flat\"\n            (onClick)=\"close()\">\n            <ap-symbol symbolId=\"close\" />\n        </ap-icon-button>\n    }\n    @if (headerTemplate && headerVisible) {\n        <div\n            [ngStyle]=\"headerStyle\"\n            [ngClass]=\"{ header: defaultLayout }\"\n            [class.border-bottom]=\"headerBottomBorderEnabled\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n        </div>\n    }\n    @if (mainTemplate) {\n        <div\n            [ngStyle]=\"contentStyle\"\n            [class.content]=\"defaultLayout\">\n            <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n        </div>\n    }\n    @if (footerTemplate && footerVisible) {\n        <div\n            [ngStyle]=\"footerStyle\"\n            [ngClass]=\"{ footer: defaultLayout }\">\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n        </div>\n    }\n</div>\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-modal.mjs","sources":["../../../libs/ui-components/modal/src/modal.component.ts","../../../libs/ui-components/modal/src/modal.component.html","../../../libs/ui-components/modal/src/agorapulse-ui-components-modal.ts"],"sourcesContent":["import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';\nimport { apClose, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';\nimport { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\nimport { firstValueFrom } from 'rxjs';\n\nexport interface ModalConfig<T = unknown> extends ModalConfigBase<T> {\n    closable?: boolean;\n    headerBottomBorderEnabled?: boolean;\n}\n\nexport interface ModalConfigBase<T> {\n    backdropCloseEnable?: boolean;\n    matDialogConfig?: MatDialogConfig<T>;\n}\n\ninterface HasDialogRef<T, R> {\n    dialogRef: MatDialogRef<T, R>;\n}\ntype HasModalData<D> = {\n    [x in 'modalData' | 'dialogData' | 'data']: D;\n};\n\ntype ExtractDialogRef<C> = C extends HasDialogRef<infer T, infer R> ? MatDialogRef<T, R> : MatDialogRef<C>;\ntype ExtractModalData<C> = C extends HasModalData<infer D> ? D : unknown;\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-modal',\n    templateUrl: 'modal.component.html',\n    imports: [SymbolComponent, NgStyle, NgClass, NgTemplateOutlet, IconButtonComponent],\n    styleUrls: ['modal.component.scss'],\n})\nexport class ModalComponent {\n    static readonly PANEL_CLASS = 'modal-container';\n\n    constructor(\n        public dialogRef: MatDialogRef<ModalComponent, void>,\n        public symbolRegistry: SymbolRegistry\n    ) {\n        dialogRef.disableClose = true;\n        this.symbolRegistry.registerSymbols([apClose]);\n    }\n\n    @Input() closable = false;\n    @Input() headerBottomBorderEnabled = false;\n    @Input() footerTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() footerVisible = true;\n    @Input() headerTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() headerVisible = true;\n    @Input({\n        required: true,\n    })\n    mainTemplate!: TemplateRef<any>;\n    @Input() sidePaneTemplate: TemplateRef<any> | undefined = undefined;\n    @Input() sidePaneStyle: { [arg: string]: string } | undefined = {};\n    @Input() containerStyle: { [arg: string]: string } | undefined = {};\n    @Input() headerStyle: { [arg: string]: string } | undefined = {};\n    @Input() contentStyle: { [arg: string]: string } | undefined = {};\n    @Input() footerStyle: { [arg: string]: string } | undefined = {};\n    @Input() defaultLayout = true;\n\n    /**\n     * Use it to open a modal containing the {@link componentType} component, with the right configuration.\n     */\n    static openDialog<C>(matDialog: MatDialog, config: ModalConfigBase<ExtractModalData<C>> | undefined, componentType: ComponentType<C>) {\n        return this.openWithComponent(matDialog, config, componentType) as ExtractDialogRef<C>;\n    }\n\n    /**\n     * Use it to open a modal containing the {@link componentType} component, with the right configuration, and wait for it to be closed.\n     */\n    static async openDialogAndWait<C>(\n        matDialog: MatDialog,\n        config: ModalConfigBase<ExtractModalData<C>> | undefined,\n        componentType: ComponentType<C>\n    ): Promise<C extends HasDialogRef<unknown, infer R> ? R : unknown> {\n        return firstValueFrom(ModalComponent.openDialog(matDialog, config, componentType).afterClosed());\n    }\n\n    /**\n     * Use it to open a modal containing the {@link componentType} component, with the right configuration.\n     * @deprecated use {@link openDialog} instead for better type inference\n     */\n    static openWithComponent<T, Y>(\n        matDialog: MatDialog,\n        config: ModalConfigBase<Y> | undefined,\n        componentType: ComponentType<T>\n    ): MatDialogRef<T> {\n        let matDialogConfig: MatDialogConfig<Y> | undefined;\n        if (config) {\n            matDialogConfig = config.matDialogConfig;\n            if (matDialogConfig && config.matDialogConfig) {\n                matDialogConfig.panelClass = Array.isArray(config.matDialogConfig.panelClass)\n                    ? [...config.matDialogConfig.panelClass, ModalComponent.PANEL_CLASS] // in case where the panelClass is an array\n                    : [config.matDialogConfig.panelClass ?? '', ModalComponent.PANEL_CLASS]; // in the other case, it's a String\n            } else {\n                matDialogConfig = { panelClass: ModalComponent.PANEL_CLASS };\n            }\n        } else {\n            matDialogConfig = {\n                panelClass: ModalComponent.PANEL_CLASS,\n            };\n        }\n        matDialogConfig.autoFocus = false; // Prevent first button to be focused\n\n        const dialogRef = matDialog.open(componentType, matDialogConfig);\n        if (config?.backdropCloseEnable === true) {\n            dialogRef.disableClose = false;\n        }\n        return dialogRef;\n    }\n\n    /**\n     * Use it to open a modal containing the provided templates, with the right configuration.\n     */\n    static openWithTemplates<T>(\n        matDialog: MatDialog,\n        headerTemplate: TemplateRef<any> | undefined,\n        mainTemplate: TemplateRef<any>,\n        footerTemplate?: TemplateRef<any> | undefined,\n        config?: ModalConfig<T>,\n        sidePaneTemplate?: TemplateRef<any> | undefined\n    ): MatDialogRef<ModalComponent> {\n        const dialogRef = ModalComponent.openDialog(matDialog, config, ModalComponent);\n        dialogRef.componentInstance.closable = config && config.closable ? config.closable : false;\n        dialogRef.componentInstance.headerBottomBorderEnabled =\n            config && config.headerBottomBorderEnabled ? config.headerBottomBorderEnabled : false;\n        dialogRef.componentInstance.headerTemplate = headerTemplate;\n        dialogRef.componentInstance.mainTemplate = mainTemplate;\n        dialogRef.componentInstance.footerTemplate = footerTemplate;\n        dialogRef.componentInstance.sidePaneTemplate = sidePaneTemplate;\n        return dialogRef;\n    }\n\n    close(): void {\n        this.dialogRef.close();\n    }\n}\n","@if (sidePaneTemplate) {\n    <div\n        [ngStyle]=\"sidePaneStyle\"\n        [ngClass]=\"{ pane: defaultLayout }\">\n        <ng-template [ngTemplateOutlet]=\"sidePaneTemplate\" />\n    </div>\n}\n\n<div\n    class=\"modal-wrapper\"\n    [ngStyle]=\"containerStyle\"\n    [class.default-layout]=\"defaultLayout\">\n    @if (closable) {\n        <ap-icon-button\n            class=\"close-button\"\n            ariaLabel=\"Close button\"\n            name=\"close-button\"\n            color=\"none\"\n            type=\"flat\"\n            (onClick)=\"close()\">\n            <ap-symbol symbolId=\"close\" />\n        </ap-icon-button>\n    }\n    @if (headerTemplate && headerVisible) {\n        <div\n            [ngStyle]=\"headerStyle\"\n            [ngClass]=\"{ header: defaultLayout }\"\n            [class.border-bottom]=\"headerBottomBorderEnabled\">\n            <ng-template [ngTemplateOutlet]=\"headerTemplate\" />\n        </div>\n    }\n    @if (mainTemplate) {\n        <div\n            [ngStyle]=\"contentStyle\"\n            [class.content]=\"defaultLayout\">\n            <ng-template [ngTemplateOutlet]=\"mainTemplate\" />\n        </div>\n    }\n    @if (footerTemplate && footerVisible) {\n        <div\n            [ngStyle]=\"footerStyle\"\n            [ngClass]=\"{ footer: defaultLayout }\">\n            <ng-template [ngTemplateOutlet]=\"footerTemplate\" />\n        </div>\n    }\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-nav-selector.mjs

@@ -5,6 +5,7 @@ import * as i0 from '@angular/core';
 import { input, inject, Component, afterEveryRender, Directive, effect, untracked, signal, computed, Injectable, ChangeDetectionStrategy, contentChildren, output, viewChild, model, contentChild, ElementRef, afterNextRender } from '@angular/core';
 import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
+import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
 import { NgTemplateOutlet } from '@angular/common';
 import { outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
@@ -18,7 +19,6 @@ import { apMore, apFeatureLock as apFeatureLock$1, apPlus } from '@agorapulse/ui
 import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
 import { CounterComponent } from '@agorapulse/ui-components/counter';
 import { ActionDropdownComponent, ActionDropdownTriggerDirective } from '@agorapulse/ui-components/action-dropdown';
-import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
 
 class NavSelectorPopoverItemComponent {
     selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
@@ -2982,6 +2982,7 @@ const EXPANDED_STATE_WIDTH = '224px';
 const MINIFIED_STATE_WIDTH = '64px';
 let nextUniqueId = 0;
 class NavSelectorComponent {
+    symbolRegistry = inject(SymbolRegistry);
     navSelectorEntries = input.required(...(ngDevMode ? [{ debugName: "navSelectorEntries" }] : []));
     translatedTexts = input.required(...(ngDevMode ? [{ debugName: "translatedTexts" }] : []));
     multipleModeEnabled = input(false, ...(ngDevMode ? [{ debugName: "multipleModeEnabled" }] : []));
@@ -3010,10 +3011,10 @@ class NavSelectorComponent {
     stableNavSelectorEntries = computed(() => this.navSelectorEntries(), ...(ngDevMode ? [{ debugName: "stableNavSelectorEntries", equal: isEqual }] : [{ equal: isEqual }]));
     expanded = this.navSelectorState.expanded.asReadonly();
     entries = computed(() => this.navSelectorState.entries(), ...(ngDevMode ? [{ debugName: "entries", equal: isEqual }] : [{ equal: isEqual }]));
-    selectableEntryUids = computed(() => computeSelectableUids(this.entries()), ...(ngDevMode ? [{ debugName: "selectableEntryUids", equal: isEqual }] : [{ equal: isEqual }]));
     visibleEntryUids = computed(() => computeVisibleUids(this.entries()), ...(ngDevMode ? [{ debugName: "visibleEntryUids", equal: isEqual }] : [{ equal: isEqual }]));
     visibleAccountsChange = outputFromObservable(toObservable(this.visibleEntryUids).pipe(map(visibleAccountUids => ({ visibleAccountUids }))));
     constructor() {
+        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
         this.navSelectorState.style = this.style;
         this.navSelectorState.registerOnSelectedUidsChange(selectedUids => {
             const isInit = !!this.entries().length;