@libs-ui/components-dropdown 0.1.1-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,3 @@
1
+ export * from './dropdown.component';
2
+ export * from './interfaces';
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2Ryb3Bkb3duLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMnO1xuIl19
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2Ryb3Bkb3duL3NyYy9pbnRlcmZhY2VzL2Ryb3Bkb3duLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueSAqL1xuaW1wb3J0IHsgSUxpc3RDb25maWdJdGVtIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1saXN0JztcbmltcG9ydCB7IFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04sIFRZUEVfUE9QT1ZFUl9QT1NJVElPTl9NT0RFIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IElNZXNzYWdlVHJhbnNsYXRlIH0gZnJvbSAnQGxpYnMtdWkvaW50ZXJmYWNlcy10eXBlcyc7XG5pbXBvcnQgeyBJSHR0cFJlcXVlc3RDb25maWcgfSBmcm9tICdAbGlicy11aS9zZXJ2aWNlcy1odHRwLXJlcXVlc3QnO1xuXG5leHBvcnQgaW50ZXJmYWNlIElFbWl0U2VsZWN0S2V5IHtcbiAga2V5PzogdW5rbm93bjtcbiAgaXRlbT86IGFueTtcbiAgaXNDbGlja01hbnVhbD86IGJvb2xlYW47XG4gIHRhYktleUFjdGl2ZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJRW1pdE11bHRpS2V5IHtcbiAga2V5cz86IEFycmF5PHVua25vd24+O1xuICBtYXBLZXlzPzogQXJyYXk8SUVtaXRTZWxlY3RLZXk+O1xuICBpc0NsaWNrTWFudWFsPzogYm9vbGVhbjtcbiAgdGFiS2V5QWN0aXZlPzogc3RyaW5nO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElQb3BvdmVyQ3VzdG9tQ29uZmlnIHtcbiAgd2lkdGhCeVBhcmVudD86IGJvb2xlYW47XG4gIHBhcmVudEJvcmRlcldpZHRoPzogbnVtYmVyO1xuICBtYXhIZWlnaHQ/OiBudW1iZXI7XG4gIG1heFdpZHRoPzogbnVtYmVyO1xuICBkaXJlY3Rpb24/OiBUWVBFX1BPUE9WRVJfRElSRUNUSU9OO1xuICBpZ25vcmVBcnJvdz86IGJvb2xlYW47XG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgZGlzYWJsZT86IGJvb2xlYW47XG4gIGNsaWNrRXhhY3RseT86IGJvb2xlYW47XG4gIHBhZGRpbmdMZWZ0SXRlbT86IGJvb2xlYW47XG4gIHRpbWVyRGVzdHJveT86IG51bWJlcjtcbiAgcG9zaXRpb24/OiB7XG4gICAgbW9kZTogVFlQRV9QT1BPVkVSX1BPU0lUSU9OX01PREU7XG4gICAgZGlzdGFuY2U6IG51bWJlcjtcbiAgfTtcbiAgYW5pbWF0aW9uQ29uZmlnPzoge1xuICAgIHRpbWU/OiBudW1iZXI7XG4gICAgZGlzdGFuY2U/OiBudW1iZXI7XG4gIH07XG4gIHdpZHRoPzogbnVtYmVyO1xuICBjbGFzc0luY2x1ZGVPdmVybGF5Qm9keT86IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJRHJvcGRvd25UYWJzSXRlbSB7XG4gIGtleTogc3RyaW5nO1xuICBuYW1lOiBzdHJpbmc7XG4gIGh0dHBSZXF1ZXN0RGF0YT86IElIdHRwUmVxdWVzdENvbmZpZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJVmFsaWRNYXhJdGVtU2VsZWN0ZWQgZXh0ZW5kcyBJTWVzc2FnZVRyYW5zbGF0ZSB7XG4gIHZhbHVlOiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSURyb3Bkb3duIHtcbiAgbGlzdENvbmZpZzogSUxpc3RDb25maWdJdGVtO1xuICBsaXN0QmFja2dyb3VuZExpc3RDdXN0b20/OiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIGxpc3RNYXhJdGVtU2hvdz86IG51bWJlciB8IHVuZGVmaW5lZDtcbiAgY2xhc3NJbmNsdWRlUG9wdXA/OiBzdHJpbmc7XG4gIHBhZGRpbmdMZWZ0SXRlbT86IGJvb2xlYW47XG4gIGNsaWNrRXhhY3RseT86IGJvb2xlYW47XG4gIHpJbmRleD86IG51bWJlcjtcbiAgcG9wb3ZlckN1c3RvbUNvbmZpZz86IElQb3BvdmVyQ3VzdG9tQ29uZmlnO1xuICBkaXNhYmxlPzogYm9vbGVhbjtcbn1cbiJdfQ==
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSURyb3Bkb3duRnVuY3Rpb25Db250cm9sRXZlbnQge1xuICBjaGVja0lzVmFsaWQ6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG4gIHJlc2V0RXJyb3I6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEVycm9yPzogKG1lc3NhZ2U6IHN0cmluZykgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVtb3ZlTGlzdDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgdXBkYXRlTGFiZWxJdGVtU2VsZWN0ZWQ6IChsYWJlbDogc3RyaW5nKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZXNldDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgcmVmcmVzaExpc3Q6ICgpID0+IFByb21pc2U8dm9pZD47XG4gIHNldEl0ZW1TZWxlY3RlZEJ5S2V5OiAoaWQ6IHVua25vd24pID0+IFByb21pc2U8dm9pZD47XG4gIGdldERpc2FibGU6ICgpID0+IFByb21pc2U8Ym9vbGVhbj47XG59XG4iXX0=
@@ -0,0 +1,3 @@
1
+ export * from './dropdown.interface';
2
+ export * from './function-control-event.interface';
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9kcm9wZG93bi5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7XG4iXX0=
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './index';
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWRyb3Bkb3duLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2Ryb3Bkb3duL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtZHJvcGRvd24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
@@ -0,0 +1,23 @@
1
+ import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';
2
+ import { TranslateModule } from '@ngx-translate/core';
3
+ import * as i0 from "@angular/core";
4
+ import * as i1 from "@ngx-translate/core";
5
+ export class LibsUiComponentsDropdownTabsComponent {
6
+ ignoreBorderBottom = input();
7
+ tabsConfig = input();
8
+ tabKeyActive = model();
9
+ disable = input();
10
+ outChange = output();
11
+ handlerSelectTab(event, key) {
12
+ event.stopPropagation();
13
+ this.tabKeyActive.set(key);
14
+ this.outChange.emit();
15
+ }
16
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
17
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDropdownTabsComponent, isStandalone: true, selector: "libs_ui-components-dropdown-tabs", inputs: { ignoreBorderBottom: { classPropertyName: "ignoreBorderBottom", publicName: "ignoreBorderBottom", isSignal: true, isRequired: false, transformFunction: null }, tabsConfig: { classPropertyName: "tabsConfig", publicName: "tabsConfig", isSignal: true, isRequired: false, transformFunction: null }, tabKeyActive: { classPropertyName: "tabKeyActive", publicName: "tabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabKeyActive: "tabKeyActiveChange", outChange: "outChange" }, ngImport: i0, template: "<div\n class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div\n class=\"libs-ui-dropdown-tab-container-item libs-ui-font-h6m\"\n [class.libs-ui-dropdown-tab-container-item-active]=\"tabKeyActive() === tab.key\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerSelectTab($event, tab.key)\">\n {{ tab.name | translate }}\n </div>\n }\n</div>\n", styles: [".libs-ui--tab-container{display:flex;width:100%;height:40px}.libs-ui--tab-container .libs-ui--tab-container-item{height:100%;display:flex;align-items:center;justify-content:center;margin:0 16px;position:relative;color:#6a7383;cursor:pointer}.libs-ui--tab-container .libs-ui--tab-container-item:hover:before{position:absolute;content:\"\";width:100%;height:2px;background-color:#6a7383;left:0;bottom:0}.libs-ui--tab-container .libs-ui--tab-container-item.libs-ui--tab-container-item-active:before{position:absolute;content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);left:0;bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18
+ }
19
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, decorators: [{
20
+ type: Component,
21
+ args: [{ selector: 'libs_ui-components-dropdown-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div\n class=\"libs-ui-dropdown-tab-container-item libs-ui-font-h6m\"\n [class.libs-ui-dropdown-tab-container-item-active]=\"tabKeyActive() === tab.key\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerSelectTab($event, tab.key)\">\n {{ tab.name | translate }}\n </div>\n }\n</div>\n", styles: [".libs-ui--tab-container{display:flex;width:100%;height:40px}.libs-ui--tab-container .libs-ui--tab-container-item{height:100%;display:flex;align-items:center;justify-content:center;margin:0 16px;position:relative;color:#6a7383;cursor:pointer}.libs-ui--tab-container .libs-ui--tab-container-item:hover:before{position:absolute;content:\"\";width:100%;height:2px;background-color:#6a7383;left:0;bottom:0}.libs-ui--tab-container .libs-ui--tab-container-item.libs-ui--tab-container-item-active:before{position:absolute;content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);left:0;bottom:0}\n"] }]
22
+ }] });
23
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL3RhYnMvdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL3RhYnMvdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBWXRELE1BQU0sT0FBTyxxQ0FBcUM7SUFDdkMsa0JBQWtCLEdBQUcsS0FBSyxFQUFXLENBQUM7SUFDdEMsVUFBVSxHQUFHLEtBQUssRUFBNEIsQ0FBQztJQUMvQyxZQUFZLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDL0IsT0FBTyxHQUFHLEtBQUssRUFBVyxDQUFDO0lBRTNCLFNBQVMsR0FBRyxNQUFNLEVBQVEsQ0FBQztJQUUxQixnQkFBZ0IsQ0FBQyxLQUFZLEVBQUUsR0FBVztRQUNsRCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN4QixDQUFDO3dHQVpVLHFDQUFxQzs0RkFBckMscUNBQXFDLGt1QkNibEQsMmhCQWNBLHVxQkRIWSxlQUFlOzs0RkFFZCxxQ0FBcUM7a0JBVGpELFNBQVM7K0JBRUUsa0NBQWtDLGNBR2hDLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBtb2RlbCwgb3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IElEcm9wZG93blRhYnNJdGVtIH0gZnJvbSAnLi4vaW50ZXJmYWNlcy9kcm9wZG93bi5pbnRlcmZhY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtZHJvcGRvd24tdGFicycsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3RhYnMuY29tcG9uZW50LnNjc3MnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW1RyYW5zbGF0ZU1vZHVsZV0sXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNEcm9wZG93blRhYnNDb21wb25lbnQge1xuICByZWFkb25seSBpZ25vcmVCb3JkZXJCb3R0b20gPSBpbnB1dDxib29sZWFuPigpO1xuICByZWFkb25seSB0YWJzQ29uZmlnID0gaW5wdXQ8QXJyYXk8SURyb3Bkb3duVGFic0l0ZW0+PigpO1xuICByZWFkb25seSB0YWJLZXlBY3RpdmUgPSBtb2RlbDxzdHJpbmc+KCk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPigpO1xuXG4gIHJlYWRvbmx5IG91dENoYW5nZSA9IG91dHB1dDx2b2lkPigpO1xuXG4gIHByb3RlY3RlZCBoYW5kbGVyU2VsZWN0VGFiKGV2ZW50OiBFdmVudCwga2V5OiBzdHJpbmcpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnRhYktleUFjdGl2ZS5zZXQoa2V5KTtcbiAgICB0aGlzLm91dENoYW5nZS5lbWl0KCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJsaWJzLXVpLWRyb3Bkb3duLXRhYi1jb250YWluZXJcIlxuICBbY2xhc3MubGlicy11aS1ib3JkZXItYm90dG9tLWdlbmVyYWxdPVwiIWlnbm9yZUJvcmRlckJvdHRvbSgpXCI+XG4gIEBmb3IgKHRhYiBvZiB0YWJzQ29uZmlnKCk7IHRyYWNrIHRhYikge1xuICAgIDxkaXZcbiAgICAgIGNsYXNzPVwibGlicy11aS1kcm9wZG93bi10YWItY29udGFpbmVyLWl0ZW0gbGlicy11aS1mb250LWg2bVwiXG4gICAgICBbY2xhc3MubGlicy11aS1kcm9wZG93bi10YWItY29udGFpbmVyLWl0ZW0tYWN0aXZlXT1cInRhYktleUFjdGl2ZSgpID09PSB0YWIua2V5XCJcbiAgICAgIFtjbGFzcy5saWJzLXVpLWRpc2FibGVdPVwiZGlzYWJsZSgpXCJcbiAgICAgIFtjbGFzcy5wb2ludGVyLWV2ZW50cy1ub25lXT1cImRpc2FibGUoKVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlclNlbGVjdFRhYigkZXZlbnQsIHRhYi5rZXkpXCI+XG4gICAgICB7eyB0YWIubmFtZSB8IHRyYW5zbGF0ZSB9fVxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==
@@ -0,0 +1,472 @@
1
+ import { AsyncPipe } from '@angular/common';
2
+ import * as i0 from '@angular/core';
3
+ import { input, model, output, ChangeDetectionStrategy, Component, signal, computed, inject, effect, untracked } from '@angular/core';
4
+ import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
5
+ import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
6
+ import { getFieldKeyByType, LibsUiComponentsListComponent } from '@libs-ui/components-list';
7
+ import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
8
+ import { LibsUiPipesSecurityTrustPipe } from '@libs-ui/pipes-security-trust';
9
+ import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
10
+ import { isNil, isEqual, cloneDeep, get, set, CHARACTER_DATA_EMPTY, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MAX_VALID } from '@libs-ui/utils';
11
+ import * as i1 from '@ngx-translate/core';
12
+ import { TranslateModule, TranslateService } from '@ngx-translate/core';
13
+
14
+ class LibsUiComponentsDropdownTabsComponent {
15
+ ignoreBorderBottom = input();
16
+ tabsConfig = input();
17
+ tabKeyActive = model();
18
+ disable = input();
19
+ outChange = output();
20
+ handlerSelectTab(event, key) {
21
+ event.stopPropagation();
22
+ this.tabKeyActive.set(key);
23
+ this.outChange.emit();
24
+ }
25
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
26
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDropdownTabsComponent, isStandalone: true, selector: "libs_ui-components-dropdown-tabs", inputs: { ignoreBorderBottom: { classPropertyName: "ignoreBorderBottom", publicName: "ignoreBorderBottom", isSignal: true, isRequired: false, transformFunction: null }, tabsConfig: { classPropertyName: "tabsConfig", publicName: "tabsConfig", isSignal: true, isRequired: false, transformFunction: null }, tabKeyActive: { classPropertyName: "tabKeyActive", publicName: "tabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabKeyActive: "tabKeyActiveChange", outChange: "outChange" }, ngImport: i0, template: "<div\n class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div\n class=\"libs-ui-dropdown-tab-container-item libs-ui-font-h6m\"\n [class.libs-ui-dropdown-tab-container-item-active]=\"tabKeyActive() === tab.key\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerSelectTab($event, tab.key)\">\n {{ tab.name | translate }}\n </div>\n }\n</div>\n", styles: [".libs-ui--tab-container{display:flex;width:100%;height:40px}.libs-ui--tab-container .libs-ui--tab-container-item{height:100%;display:flex;align-items:center;justify-content:center;margin:0 16px;position:relative;color:#6a7383;cursor:pointer}.libs-ui--tab-container .libs-ui--tab-container-item:hover:before{position:absolute;content:\"\";width:100%;height:2px;background-color:#6a7383;left:0;bottom:0}.libs-ui--tab-container .libs-ui--tab-container-item.libs-ui--tab-container-item-active:before{position:absolute;content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);left:0;bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
27
+ }
28
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, decorators: [{
29
+ type: Component,
30
+ args: [{ selector: 'libs_ui-components-dropdown-tabs', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule], template: "<div\n class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div\n class=\"libs-ui-dropdown-tab-container-item libs-ui-font-h6m\"\n [class.libs-ui-dropdown-tab-container-item-active]=\"tabKeyActive() === tab.key\"\n [class.libs-ui-disable]=\"disable()\"\n [class.pointer-events-none]=\"disable()\"\n (click)=\"handlerSelectTab($event, tab.key)\">\n {{ tab.name | translate }}\n </div>\n }\n</div>\n", styles: [".libs-ui--tab-container{display:flex;width:100%;height:40px}.libs-ui--tab-container .libs-ui--tab-container-item{height:100%;display:flex;align-items:center;justify-content:center;margin:0 16px;position:relative;color:#6a7383;cursor:pointer}.libs-ui--tab-container .libs-ui--tab-container-item:hover:before{position:absolute;content:\"\";width:100%;height:2px;background-color:#6a7383;left:0;bottom:0}.libs-ui--tab-container .libs-ui--tab-container-item.libs-ui--tab-container-item-active:before{position:absolute;content:\"\";width:100%;height:2px;background-color:var(--libs-ui-color-default, #226ff5);left:0;bottom:0}\n"] }]
31
+ }] });
32
+
33
+ /* eslint-disable @typescript-eslint/no-explicit-any */
34
+ class LibsUiComponentsDropdownComponent {
35
+ // #region PROPERTY
36
+ error = signal(undefined);
37
+ showList = signal(false);
38
+ itemsSelected = signal(undefined);
39
+ loadingDetail = signal(false);
40
+ loadingList = signal(false);
41
+ items = signal([]);
42
+ popoverItemSelected = signal(undefined);
43
+ labelItemSelectedComputed = computed(this.getLabelItemSelected.bind(this));
44
+ autoSelectedFirstItemCallOutsideBefore = signal(false);
45
+ keysSelected = signal([]);
46
+ popoverFunctionControl = signal(undefined);
47
+ fieldKey = signal('id');
48
+ listFunctionControl = signal(undefined);
49
+ // #region INPUT
50
+ useXssFilter = input(false);
51
+ popoverElementRefCustom = input();
52
+ classInclude = input();
53
+ ignoreStopPropagationEvent = input(false);
54
+ flagMouse = model({ isMouseEnter: false, isMouseEnterContent: false });
55
+ flagMouseContent = model();
56
+ popoverCustomConfig = input();
57
+ isNgContent = input();
58
+ zIndex = input();
59
+ convertItemSelected = input(this.defaultConvertItemSelected.bind(this));
60
+ getPopoverItemSelected = input();
61
+ httpRequestDetailItemById = input();
62
+ lengthKeys = model(0);
63
+ textDisplayWhenNoSelect = input('i18n_select_information');
64
+ textDisplayWhenMultiSelect = input('i18n_selecting_options');
65
+ classIncludeTextDisplayWhenNoSelect = input('libs-ui-font-h5r');
66
+ fieldLabel = input('labelDisplay', { transform: (value) => value || 'labelDisplay' });
67
+ fieldGetLabel = input();
68
+ labelPopoverConfig = input();
69
+ labelPopoverFullWidth = input(true);
70
+ hasContentUnitRight = input();
71
+ listSearchNoDataTemplateRef = input();
72
+ fieldGetImage = input();
73
+ imageSize = input(16);
74
+ typeShape = input('circle');
75
+ fieldGetIcon = input();
76
+ fieldGetTextAvatar = input('username');
77
+ fieldGetColorAvatar = input();
78
+ classAvatarInclude = input('mr-[8px]', { transform: (value) => value || 'mr-[8px]' });
79
+ getLastTextAfterSpace = input();
80
+ linkImageError = input();
81
+ showError = input(true);
82
+ showBorderError = model();
83
+ disable = input();
84
+ readonly = input();
85
+ labelConfig = input();
86
+ disableLabel = input();
87
+ listSearchConfig = input({ noBorder: true }, { transform: (value) => value || { noBorder: true } });
88
+ isSearchOnline = input(false);
89
+ listHiddenInputSearch = input();
90
+ listSearchPadding = input();
91
+ listKeySearch = input();
92
+ listDividerClassInclude = input();
93
+ listConfig = input();
94
+ listButtonsOther = input();
95
+ listHasButtonUnSelectOption = input();
96
+ listClickExactly = input();
97
+ listBackgroundCustom = input();
98
+ listMaxItemShow = input(5);
99
+ listKeySelected = model();
100
+ listMultiKeySelected = model();
101
+ listKeysDisable = input(); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
102
+ listKeysHidden = input(); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
103
+ validRequired = input();
104
+ validMaxItemSelected = input();
105
+ changeValidUndefinedResetError = input();
106
+ allowSelectItemMultiple = input();
107
+ focusInputSearch = input(true);
108
+ onlyEmitDataWhenReset = input(); // true khi muốn emit sự kiện thay đổi key
109
+ resetKeyWhenSelectAllKey = input();
110
+ listConfigHasDivider = input(true);
111
+ classIncludeIcon = input('ml-[8px]', { transform: (value) => value || 'ml-[8px]' });
112
+ classIncludeContent = input();
113
+ listIgnoreClassDisableDefaultWhenUseKeysDisableItem = input(); // bỏ chế độ disable item trên html list view để disable từng phần trong rows
114
+ tabKeyActive = model();
115
+ tabsConfig = input();
116
+ ignoreBorderBottom = input();
117
+ // #region OUTPUT
118
+ outSelectKey = output(); // sử dụng cho type chọn 1.
119
+ outSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
120
+ outFunctionsControl = output();
121
+ outValidEvent = output();
122
+ outChangStageFlagMouse = output();
123
+ outDataChange = output();
124
+ outClickButtonOther = output();
125
+ outShowList = output();
126
+ outChangeTabKeyActive = output();
127
+ /* INJECT*/
128
+ translate = inject(TranslateService);
129
+ httpRequestService = inject(LibsUiHttpRequestService);
130
+ constructor() {
131
+ effect(() => {
132
+ const listConfig = this.listConfig();
133
+ if (listConfig) {
134
+ untracked(() => this.fieldKey.set(getFieldKeyByType(listConfig, 'id')));
135
+ }
136
+ });
137
+ effect(() => {
138
+ if (!isNil(this.listKeySelected()) && this.listKeySelected() !== '' && !this.itemsSelected()) {
139
+ untracked(() => {
140
+ this.handlerSelectedKey({ key: this.listKeySelected(), item: undefined, isClickManual: false });
141
+ });
142
+ }
143
+ });
144
+ effect(() => {
145
+ if (this.changeValidUndefinedResetError() && this.validRequired()) {
146
+ untracked(() => this.resetError());
147
+ }
148
+ });
149
+ effect(() => {
150
+ if (this.listMultiKeySelected()) {
151
+ untracked(() => {
152
+ const previousValue = this.keysSelected() || [];
153
+ const currentValue = this.listMultiKeySelected() || [];
154
+ if (isEqual(cloneDeep(previousValue), cloneDeep(currentValue))) {
155
+ return;
156
+ }
157
+ this.handlerSelectMultiKey({ keys: currentValue, mapKeys: [], isClickManual: false });
158
+ });
159
+ }
160
+ });
161
+ }
162
+ async ngOnInit() {
163
+ const listConfig = this.listConfig();
164
+ if (this.listKeySelected() || this.listMultiKeySelected()) {
165
+ this.lengthKeys.set(this.listKeySelected() ? 1 : this.listMultiKeySelected()?.length || 0);
166
+ }
167
+ if (!this.lengthKeys() && listConfig && (listConfig.autoSelectFirstItem || listConfig.configTemplateCheckbox?.()?.autoSelectAllItem || listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect) && listConfig.httpRequestData) {
168
+ try {
169
+ this.loadingDetail.set(true);
170
+ const httpRequestData = listConfig.httpRequestData();
171
+ const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestData;
172
+ this.httpRequestService.updateArguments(argumentsValue, { ...this.httpRequestService.fakeResponsePagingApi(), dropdownTabKeyActive: this.tabKeyActive }, {}, '', true, false, guideAutoUpdateArgumentsValue);
173
+ const result = await this.httpRequestService.callApi(httpRequestData);
174
+ this.loadingDetail.set(false);
175
+ if (result?.data) {
176
+ this.items.set(result.data);
177
+ this.emitAutoSelectKey(result.data, listConfig.type);
178
+ this.autoSelectedFirstItemCallOutsideBefore.set(true);
179
+ }
180
+ }
181
+ catch (error) {
182
+ console.log(error);
183
+ this.items.set([]);
184
+ this.loadingDetail.set(false);
185
+ }
186
+ this.outDataChange.emit(this.items());
187
+ }
188
+ this.outFunctionsControl.emit(this.FunctionsControl);
189
+ this.checkValid(true);
190
+ }
191
+ /* FUNCTIONS */
192
+ get FunctionsControl() {
193
+ return {
194
+ reset: this.reset.bind(this),
195
+ checkIsValid: this.valid.bind(this),
196
+ resetError: this.resetError.bind(this),
197
+ setError: this.setError.bind(this),
198
+ removeList: async () => this.popoverFunctionControl()?.removePopoverOverlay(),
199
+ getDisable: async () => this.disable() ?? false,
200
+ updateLabelItemSelected: async (label) => this.itemsSelected.update((value) => ({ ...value, [this.fieldLabel()]: this.translate.instant(label) })),
201
+ refreshList: async () => this.listFunctionControl()?.refresh(),
202
+ setItemSelectedByKey: this.setItemSelectedByKey.bind(this),
203
+ };
204
+ }
205
+ defaultConvertItemSelected(item) {
206
+ if (!item) {
207
+ return;
208
+ }
209
+ const fieldGetLabel = this.fieldGetLabel();
210
+ const value = fieldGetLabel ? get(item, fieldGetLabel) : undefined;
211
+ set(item, this.fieldLabel(), value ?? get(item, 'label') ?? get(item, 'name') ?? ' ');
212
+ }
213
+ getLabelItemSelected() {
214
+ let label = ' ';
215
+ if (!this.lengthKeys()) {
216
+ label = this.textDisplayWhenNoSelect();
217
+ }
218
+ if (this.lengthKeys() > 1) {
219
+ label = this.textDisplayWhenMultiSelect();
220
+ }
221
+ if (this.lengthKeys() === 1) {
222
+ label = get(this.itemsSelected(), this.fieldLabel()) || this.textDisplayWhenNoSelect();
223
+ }
224
+ return label;
225
+ }
226
+ emitAutoSelectKey(items, type) {
227
+ const listConfig = this.listConfig();
228
+ if (!items || !items.length || !listConfig || (!listConfig.autoSelectFirstItem && !listConfig.configTemplateCheckbox?.()?.autoSelectAllItem && !listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect)) {
229
+ return;
230
+ }
231
+ const flatItemsSupportAutoSelect = listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect;
232
+ if (type === 'group' && flatItemsSupportAutoSelect) {
233
+ items = flatItemsSupportAutoSelect(items);
234
+ }
235
+ if (listConfig.autoSelectFirstItem) {
236
+ const item = items[0];
237
+ const key = get(item, this.fieldKey());
238
+ if (type === 'radio' || type === 'text') {
239
+ this.handlerSelectedKey({ key, item, isClickManual: false });
240
+ this.listKeySelected.set(key);
241
+ return;
242
+ }
243
+ this.handlerSelectMultiKey({ keys: [key], mapKeys: [{ key, item, isClickManual: false }], isClickManual: false });
244
+ this.listMultiKeySelected.set([key]);
245
+ return;
246
+ }
247
+ if (type !== 'checkbox' && type !== 'group') {
248
+ return;
249
+ }
250
+ const keys = [];
251
+ const mapKeys = [];
252
+ items.forEach((item) => {
253
+ const key = get(item, this.fieldKey());
254
+ if (isNil(key)) {
255
+ return;
256
+ }
257
+ keys.push(key);
258
+ mapKeys.push({ key, item, isClickManual: false });
259
+ });
260
+ this.handlerSelectMultiKey({ keys, mapKeys, isClickManual: false });
261
+ this.listMultiKeySelected.set(keys);
262
+ }
263
+ handlerEvent(type) {
264
+ if (type === 'click') {
265
+ return;
266
+ }
267
+ if (type === 'remove') {
268
+ this.showList.set(false);
269
+ this.outShowList.emit(this.showList());
270
+ return;
271
+ }
272
+ this.showList.set(true);
273
+ this.outShowList.emit(this.showList());
274
+ }
275
+ handlerDataChange(items) {
276
+ this.items.set(items);
277
+ this.popoverFunctionControl()?.updatePopoverOverlayPosition();
278
+ this.outDataChange.emit(this.items());
279
+ }
280
+ handlerChangeFlagMouse(event) {
281
+ this.flagMouseContent.set(event);
282
+ this.mergeFlagMouse();
283
+ }
284
+ handlerClickButtonOther(button) {
285
+ this.outClickButtonOther.emit(button);
286
+ this.popoverFunctionControl()?.removePopoverOverlay();
287
+ }
288
+ handlerPopoverControlEvent(event) {
289
+ this.popoverFunctionControl.set(event);
290
+ }
291
+ async handlerSelectedKey(event) {
292
+ const key = event?.key;
293
+ const item = event?.item;
294
+ const isClickManual = event?.isClickManual;
295
+ this.lengthKeys.set(!(isNil(key) || (typeof key === 'string' && key === '')) ? 1 : 0);
296
+ this.listKeySelected.set(key);
297
+ if (!this.allowSelectItemMultiple() && this.itemsSelected() && get(this.itemsSelected(), this.fieldKey()) === key) {
298
+ return;
299
+ }
300
+ if (isClickManual) {
301
+ if (!(isNil(key) || (typeof key === 'string' && key === '')) && (item || this.itemsSelected())) {
302
+ this.popoverFunctionControl()?.removePopoverOverlay();
303
+ }
304
+ }
305
+ this.checkValid();
306
+ if (this.lengthKeys() && !item && this.httpRequestDetailItemById()) {
307
+ let itemSelected = await this.setItemSelectedByKey(key);
308
+ if (!itemSelected) {
309
+ itemSelected = {
310
+ [this.fieldKey()]: key,
311
+ [this.fieldLabel()]: CHARACTER_DATA_EMPTY,
312
+ };
313
+ this.itemsSelected.set(itemSelected);
314
+ }
315
+ if (event) {
316
+ event.item = itemSelected;
317
+ }
318
+ this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
319
+ return;
320
+ }
321
+ this.itemsSelected.set(cloneDeep(item));
322
+ this.buildDisplay();
323
+ this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
324
+ }
325
+ async handlerSelectMultiKey(event, isClickManual = false) {
326
+ if (this.listConfig()?.configTemplateGroup?.()?.singleSelectItem && event?.mapKeys?.length) {
327
+ const itemClickManual = event.mapKeys.find((mapKey) => mapKey.item && mapKey.item.isCheckManual);
328
+ if (itemClickManual) {
329
+ setTimeout(() => (itemClickManual.item.isCheckManual = false));
330
+ event.keys = [itemClickManual.key];
331
+ event.mapKeys = [itemClickManual];
332
+ this.popoverFunctionControl()?.removePopoverOverlay();
333
+ }
334
+ }
335
+ this.keysSelected.set([...(event?.keys || [])]);
336
+ this.listMultiKeySelected.set([...(event?.keys || [])]);
337
+ this.lengthKeys.set(event?.keys?.length || 0);
338
+ this.checkValid();
339
+ if (this.lengthKeys() > 1) {
340
+ this.outSelectMultiKey.emit({ ...(event || {}), isClickManual, tabKeyActive: this.tabKeyActive() });
341
+ return;
342
+ }
343
+ const key = event?.keys[0];
344
+ let item = event?.mapKeys?.find((item) => item.key === key)?.item;
345
+ if (this.lengthKeys() && !item && this.httpRequestDetailItemById()) {
346
+ item = await this.setItemSelectedByKey(key);
347
+ this.outSelectMultiKey.emit({ keys: [key], mapKeys: [{ key, item }], isClickManual, tabKeyActive: this.tabKeyActive() });
348
+ return;
349
+ }
350
+ this.itemsSelected.set(cloneDeep(item));
351
+ this.buildDisplay();
352
+ this.outSelectMultiKey.emit({ ...(event || {}), isClickManual, tabKeyActive: this.tabKeyActive() });
353
+ }
354
+ async setItemSelectedByKey(key) {
355
+ const httpRequestDetailItemById = this.httpRequestDetailItemById();
356
+ if (!httpRequestDetailItemById || this.loadingDetail()) {
357
+ return;
358
+ }
359
+ try {
360
+ this.loadingDetail.set(true);
361
+ const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestDetailItemById;
362
+ this.httpRequestService.updateArguments(argumentsValue, { key, dropdownTabKeyActive: this.tabKeyActive() }, {}, '', false, false, guideAutoUpdateArgumentsValue);
363
+ const result = await this.httpRequestService.callApi(httpRequestDetailItemById);
364
+ const item = cloneDeep(result?.data?.[0] || result?.data);
365
+ this.itemsSelected.set(item);
366
+ this.buildDisplay();
367
+ this.loadingDetail.set(false);
368
+ return item;
369
+ }
370
+ catch (error) {
371
+ console.log(error);
372
+ this.loadingDetail.set(false);
373
+ return;
374
+ }
375
+ }
376
+ handlerChangeTab() {
377
+ this.outChangeTabKeyActive.emit(this.tabKeyActive());
378
+ }
379
+ handlerLoadingList(event) {
380
+ this.loadingList.set(event);
381
+ }
382
+ async setError(error) {
383
+ this.error.set({ message: error });
384
+ this.showBorderError.set(true);
385
+ }
386
+ async valid() {
387
+ if (this.error()?.message) {
388
+ return false;
389
+ }
390
+ return this.checkValid();
391
+ }
392
+ checkValid(validateDefault) {
393
+ this.error.set(undefined);
394
+ const valid = { required: true, limitMaxItemSelect: true };
395
+ const validMaxItemSelected = this.validMaxItemSelected();
396
+ if (this.validRequired() && !this.lengthKeys()) {
397
+ valid.required = false;
398
+ }
399
+ if (validMaxItemSelected && this.lengthKeys() > validMaxItemSelected.value) {
400
+ valid.limitMaxItemSelect = false;
401
+ }
402
+ if (!validateDefault && valid.required === false) {
403
+ const validRequired = this.validRequired();
404
+ this.error.set({ ...(validRequired || {}), message: validRequired?.message || ERROR_MESSAGE_EMPTY_VALID });
405
+ }
406
+ if (!validateDefault && !this.error() && valid.limitMaxItemSelect === false) {
407
+ const validMaxItemSelected = this.validMaxItemSelected();
408
+ this.error.set({ ...(validMaxItemSelected || {}), message: validMaxItemSelected?.message || ERROR_MESSAGE_MAX_VALID, interpolateParams: { value: validMaxItemSelected?.value } });
409
+ }
410
+ this.outValidEvent.emit(valid.required && valid.limitMaxItemSelect);
411
+ return valid.required && valid.limitMaxItemSelect;
412
+ }
413
+ async resetError() {
414
+ this.error.set(undefined);
415
+ this.showBorderError.set(false);
416
+ }
417
+ handlerListFunctionsControl(event) {
418
+ this.listFunctionControl.set(event);
419
+ }
420
+ handlerChangStageFlagMouse(flag) {
421
+ this.flagMouse.set(flag);
422
+ this.mergeFlagMouse();
423
+ }
424
+ async reset() {
425
+ this.itemsSelected.set(undefined);
426
+ this.lengthKeys.set(0);
427
+ this.listFunctionControl()?.resetKeySelected();
428
+ if (!this.showList() && this.onlyEmitDataWhenReset()) {
429
+ this.outSelectKey.emit(undefined);
430
+ this.outSelectMultiKey.emit(undefined);
431
+ }
432
+ this.listKeySelected.set(undefined);
433
+ this.listMultiKeySelected.set(undefined);
434
+ this.keysSelected.set([]);
435
+ this.error.set(undefined);
436
+ }
437
+ async buildDisplay() {
438
+ if (this.itemsSelected()) {
439
+ this.convertItemSelected()(this.itemsSelected(), this.translate);
440
+ const getPopoverItemSelected = this.getPopoverItemSelected();
441
+ if (getPopoverItemSelected) {
442
+ this.popoverItemSelected.set(await getPopoverItemSelected(this.itemsSelected, this.translate));
443
+ }
444
+ }
445
+ }
446
+ mergeFlagMouse() {
447
+ const flag = { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false };
448
+ if (this.flagMouseContent()?.isMouseEnter || this.flagMouse().isMouseEnter) {
449
+ flag.isMouseEnter = true;
450
+ }
451
+ if (this.flagMouseContent()?.isMouseEnterContent || this.flagMouse().isMouseEnterContent) {
452
+ flag.isMouseEnterContent = true;
453
+ }
454
+ if (this.flagMouseContent()?.isContainerHasScroll || this.flagMouse().isContainerHasScroll) {
455
+ flag.isContainerHasScroll = true;
456
+ }
457
+ this.outChangStageFlagMouse.emit(flag);
458
+ }
459
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
460
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsDropdownComponent, isStandalone: true, selector: "libs_ui-components-dropdown", inputs: { useXssFilter: { classPropertyName: "useXssFilter", publicName: "useXssFilter", isSignal: true, isRequired: false, transformFunction: null }, popoverElementRefCustom: { classPropertyName: "popoverElementRefCustom", publicName: "popoverElementRefCustom", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, flagMouse: { classPropertyName: "flagMouse", publicName: "flagMouse", isSignal: true, isRequired: false, transformFunction: null }, flagMouseContent: { classPropertyName: "flagMouseContent", publicName: "flagMouseContent", isSignal: true, isRequired: false, transformFunction: null }, popoverCustomConfig: { classPropertyName: "popoverCustomConfig", publicName: "popoverCustomConfig", isSignal: true, isRequired: false, transformFunction: null }, isNgContent: { classPropertyName: "isNgContent", publicName: "isNgContent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, convertItemSelected: { classPropertyName: "convertItemSelected", publicName: "convertItemSelected", isSignal: true, isRequired: false, transformFunction: null }, getPopoverItemSelected: { classPropertyName: "getPopoverItemSelected", publicName: "getPopoverItemSelected", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemById: { classPropertyName: "httpRequestDetailItemById", publicName: "httpRequestDetailItemById", isSignal: true, isRequired: false, transformFunction: null }, lengthKeys: { classPropertyName: "lengthKeys", publicName: "lengthKeys", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenNoSelect: { classPropertyName: "textDisplayWhenNoSelect", publicName: "textDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, textDisplayWhenMultiSelect: { classPropertyName: "textDisplayWhenMultiSelect", publicName: "textDisplayWhenMultiSelect", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTextDisplayWhenNoSelect: { classPropertyName: "classIncludeTextDisplayWhenNoSelect", publicName: "classIncludeTextDisplayWhenNoSelect", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, fieldGetLabel: { classPropertyName: "fieldGetLabel", publicName: "fieldGetLabel", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverConfig: { classPropertyName: "labelPopoverConfig", publicName: "labelPopoverConfig", isSignal: true, isRequired: false, transformFunction: null }, labelPopoverFullWidth: { classPropertyName: "labelPopoverFullWidth", publicName: "labelPopoverFullWidth", isSignal: true, isRequired: false, transformFunction: null }, hasContentUnitRight: { classPropertyName: "hasContentUnitRight", publicName: "hasContentUnitRight", isSignal: true, isRequired: false, transformFunction: null }, listSearchNoDataTemplateRef: { classPropertyName: "listSearchNoDataTemplateRef", publicName: "listSearchNoDataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, typeShape: { classPropertyName: "typeShape", publicName: "typeShape", isSignal: true, isRequired: false, transformFunction: null }, fieldGetIcon: { classPropertyName: "fieldGetIcon", publicName: "fieldGetIcon", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, fieldGetColorAvatar: { classPropertyName: "fieldGetColorAvatar", publicName: "fieldGetColorAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, showError: { classPropertyName: "showError", publicName: "showError", isSignal: true, isRequired: false, transformFunction: null }, showBorderError: { classPropertyName: "showBorderError", publicName: "showBorderError", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, disableLabel: { classPropertyName: "disableLabel", publicName: "disableLabel", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearch: { classPropertyName: "listHiddenInputSearch", publicName: "listHiddenInputSearch", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listKeySearch: { classPropertyName: "listKeySearch", publicName: "listKeySearch", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listHasButtonUnSelectOption: { classPropertyName: "listHasButtonUnSelectOption", publicName: "listHasButtonUnSelectOption", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundCustom: { classPropertyName: "listBackgroundCustom", publicName: "listBackgroundCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listKeySelected: { classPropertyName: "listKeySelected", publicName: "listKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listMultiKeySelected: { classPropertyName: "listMultiKeySelected", publicName: "listMultiKeySelected", isSignal: true, isRequired: false, transformFunction: null }, listKeysDisable: { classPropertyName: "listKeysDisable", publicName: "listKeysDisable", isSignal: true, isRequired: false, transformFunction: null }, listKeysHidden: { classPropertyName: "listKeysHidden", publicName: "listKeysHidden", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, changeValidUndefinedResetError: { classPropertyName: "changeValidUndefinedResetError", publicName: "changeValidUndefinedResetError", isSignal: true, isRequired: false, transformFunction: null }, allowSelectItemMultiple: { classPropertyName: "allowSelectItemMultiple", publicName: "allowSelectItemMultiple", isSignal: true, isRequired: false, transformFunction: null }, focusInputSearch: { classPropertyName: "focusInputSearch", publicName: "focusInputSearch", isSignal: true, isRequired: false, transformFunction: null }, onlyEmitDataWhenReset: { classPropertyName: "onlyEmitDataWhenReset", publicName: "onlyEmitDataWhenReset", isSignal: true, isRequired: false, transformFunction: null }, resetKeyWhenSelectAllKey: { classPropertyName: "resetKeyWhenSelectAllKey", publicName: "resetKeyWhenSelectAllKey", isSignal: true, isRequired: false, transformFunction: null }, listConfigHasDivider: { classPropertyName: "listConfigHasDivider", publicName: "listConfigHasDivider", isSignal: true, isRequired: false, transformFunction: null }, classIncludeIcon: { classPropertyName: "classIncludeIcon", publicName: "classIncludeIcon", isSignal: true, isRequired: false, transformFunction: null }, classIncludeContent: { classPropertyName: "classIncludeContent", publicName: "classIncludeContent", isSignal: true, isRequired: false, transformFunction: null }, listIgnoreClassDisableDefaultWhenUseKeysDisableItem: { classPropertyName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", publicName: "listIgnoreClassDisableDefaultWhenUseKeysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, tabKeyActive: { classPropertyName: "tabKeyActive", publicName: "tabKeyActive", isSignal: true, isRequired: false, transformFunction: null }, tabsConfig: { classPropertyName: "tabsConfig", publicName: "tabsConfig", isSignal: true, isRequired: false, transformFunction: null }, ignoreBorderBottom: { classPropertyName: "ignoreBorderBottom", publicName: "ignoreBorderBottom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { flagMouse: "flagMouseChange", flagMouseContent: "flagMouseContentChange", lengthKeys: "lengthKeysChange", showBorderError: "showBorderErrorChange", listKeySelected: "listKeySelectedChange", listMultiKeySelected: "listMultiKeySelectedChange", tabKeyActive: "tabKeyActiveChange", outSelectKey: "outSelectKey", outSelectMultiKey: "outSelectMultiKey", outFunctionsControl: "outFunctionsControl", outValidEvent: "outValidEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outDataChange: "outDataChange", outClickButtonOther: "outClickButtonOther", outShowList: "outShowList", outChangeTabKeyActive: "outChangeTabKeyActive" }, ngImport: i0, template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndex() ?? 1000,\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [class.h-full]=\"listMaxItemShow() === -1\"\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndex()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event, true)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LibsUiPipesSecurityTrustPipe, name: "LibsUiPipesSecurityTrustPipe" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "component", type: LibsUiComponentsDropdownTabsComponent, selector: "libs_ui-components-dropdown-tabs", inputs: ["ignoreBorderBottom", "tabsConfig", "tabKeyActive", "disable"], outputs: ["tabKeyActiveChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
461
+ }
462
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsDropdownComponent, decorators: [{
463
+ type: Component,
464
+ args: [{ selector: 'libs_ui-components-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiPipesSecurityTrustPipe, AsyncPipe, LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent, LibsUiComponentsAvatarComponent, LibsUiComponentsListComponent, LibsUiComponentsDropdownTabsComponent], template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label\n [classInclude]=\"label.classInclude\"\n [labelLeft]=\"label.labelLeft\"\n [labelLeftClass]=\"label.labelLeftClass\"\n [required]=\"label.required\"\n [description]=\"label.description\"\n [descriptionClass]=\"label.descriptionClass\"\n [labelRight]=\"label.labelRight\"\n [labelRightClass]=\"label.labelRightClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [buttonsLeft]=\"label.buttonsLeft\"\n [buttonsRight]=\"label.buttonsRight\"\n [disableButtonsLeft]=\"label.disableButtonsLeft || disable() || loadingDetail()\"\n [disableButtonsRight]=\"label.disableButtonsRight || disable() || loadingDetail()\"\n [hasToggle]=\"label.hasToggle\"\n [toggleActive]=\"label.toggleActive\"\n [toggleDisable]=\"label.toggleDisable || disable() || loadingDetail()\"\n [popover]=\"label.popover\"\n [iconPopoverClass]=\"label.iconPopoverClass\"\n [onlyShowCount]=\"label.onlyShowCount\"\n [limitLength]=\"label.limitLength\"\n [buttonsDescription]=\"label.buttonsDescription\"\n [disableButtonsDescription]=\"label.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"label.buttonsDescriptionContainerClass\"\n [count]=\"label.count\" />\n }\n <libs_ui-components-popover\n [ignoreShowPopover]=\"disable() || readonly() || loadingDetail()\"\n [class]=\"classInclude() || 'w-full'\"\n [mode]=\"'click-toggle'\"\n [flagMouse]=\"flagMouse()\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\"\n [elementRefCustom]=\"popoverElementRefCustom()\"\n [config]=\"{\n animationConfig: popoverCustomConfig()?.animationConfig || {},\n zIndex: zIndex() ?? 1000,\n widthByParent: popoverCustomConfig()?.widthByParent ?? true,\n parentBorderWidth: popoverCustomConfig()?.parentBorderWidth ?? 0,\n maxHeight: popoverCustomConfig()?.maxHeight ?? 2048,\n maxWidth: popoverCustomConfig()?.maxWidth ?? 2048,\n direction: popoverCustomConfig()?.direction ?? 'bottom',\n template: listViewEl,\n whiteTheme: true,\n timerDestroy: popoverCustomConfig()?.timerDestroy ?? 0,\n ignoreArrow: popoverCustomConfig()?.ignoreArrow ?? true,\n directionDistance: 2,\n classInclude: '!rounded-[4px] overflow-hidden ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general '),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width,\n classIncludeOverlayBody: popoverCustomConfig()?.classIncludeOverlayBody,\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div\n [class]=\"'libs-ui-dropdown ' + (classIncludeContent() || '')\"\n [class.libs-ui-border-general]=\"!error() && !showBorderError() && !showList()\"\n [class.libs-ui-border-primary-focus-general]=\"!error() && !showBorderError() && showList()\"\n [class.libs-ui-border-error-general]=\"error() || showBorderError()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.cursor-pointer]=\"!(disable() || loadingDetail() || readonly())\"\n [class.libs-ui-disable]=\"disable() || loadingDetail()\"\n [class.libs-ui-disable-background]=\"disable() || loadingDetail()\"\n [class.pointer-events-none]=\"loadingDetail()\"\n [class.rounded-tr-0]=\"hasContentUnitRight()\"\n [class.rounded-br-0]=\"hasContentUnitRight()\">\n <div class=\"flex items-center w-full\">\n <div class=\"flex items-center w-full relative\">\n <div\n class=\"flex items-center w-full absolute\"\n [class.libs-ui-dropdown-placeholder]=\"!lengthKeys()\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover\n [type]=\"'text'\"\n [classInclude]=\"(labelPopoverFullWidth() ? 'w-100 ' : '') + classIncludeTextDisplayWhenNoSelect()\"\n [innerHTML]=\"labelItemSelectedComputed() | translate: { value: lengthKeys() } | LibsUiPipesSecurityTrustPipe: 'html' : useXssFilter() | async\"\n [config]=\"{ maxWidth: labelPopoverConfig()?.maxWidth || 250, direction: 'top', zIndex: labelPopoverConfig()?.zIndex, timerDestroy: labelPopoverConfig()?.timerDestroy || 0 }\"\n [ignoreStopPropagationEvent]=\"true\" />\n\n @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover\n [type]=\"popoverItemSelected.type || 'other'\"\n [config]=\"popoverItemSelected.config || {}\">\n @if (popoverItemSelected.dataView) {\n <div [innerHtml]=\"popoverItemSelected.dataView | translate\"></div>\n } @else {\n <i class=\"libs-ui-icon-tooltip-outline text-[16px] mx-[8px]\"></i>\n }\n </libs_ui-components-popover>\n }\n </div>\n </div>\n <i\n class=\"text-[16px] libs-ui-icon-move-right rotate-90 text-[#6a7383] {{ classIncludeIcon() }}\"\n [class.libs-ui-disable]=\"readonly() || disable()\"></i>\n </div>\n </div>\n } @else {\n <ng-content></ng-content>\n }\n </libs_ui-components-popover>\n @if (showError()) {\n @if (error(); as error) {\n @let constHtmlMessage = error.message || ' ';\n <div\n class=\"mt-[8px] libs-ui-text-error libs-ui-font-h7r\"\n [innerHtml]=\"constHtmlMessage | translate: error.interpolateParams || {}\"></div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div\n style=\"display: flex; flex-direction: column\"\n [class.h-full]=\"listMaxItemShow() === -1\">\n @if (tabsConfig(); as tabsConfig) {\n <libs_ui-components-dropdown-tabs\n [tabsConfig]=\"tabsConfig\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list\n [class.h-full]=\"listMaxItemShow() === -1\"\n [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? false\"\n [disable]=\"disable() || loadingDetail()\"\n [disableLabel]=\"disableLabel()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow()\"\n [keySelected]=\"listKeySelected()\"\n [multiKeySelected]=\"listMultiKeySelected()\"\n [clickExactly]=\"popoverCustomConfig()?.clickExactly ?? false\"\n [dividerClassInclude]=\"listSearchConfig() ? listDividerClassInclude() : 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundCustom()\"\n [keysDisableItem]=\"listKeysDisable()\"\n [keysHiddenItem]=\"listKeysHidden()\"\n [hasButtonUnSelectOption]=\"listHasButtonUnSelectOption() ?? (!popoverCustomConfig() && !labelConfig()?.required && (listConfig()?.type === 'text' || listConfig()?.type === 'radio'))\"\n [templateRefSearchNoData]=\"listSearchNoDataTemplateRef()\"\n [focusInputSearch]=\"focusInputSearch()\"\n [zIndex]=\"zIndex()\"\n [resetKeyWhenSelectAllKeyDropdown]=\"resetKeyWhenSelectAllKey()\"\n [ignoreClassDisableDefaultWhenUseKeysDisableItem]=\"listIgnoreClassDisableDefaultWhenUseKeysDisableItem()\"\n [hasDivider]=\"listConfigHasDivider()\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event, true)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outFunctionsControl)=\"handlerListFunctionsControl($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoadingList($event)\" />\n </div>\n</ng-template>\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .libs-ui-dropdown{position:relative;width:100%;min-height:32px;display:flex;align-items:center;background-color:#fff;padding:0 16px;border-radius:4px;cursor:pointer}\n"] }]
465
+ }], ctorParameters: () => [] });
466
+
467
+ /**
468
+ * Generated bundle index. Do not edit.
469
+ */
470
+
471
+ export { LibsUiComponentsDropdownComponent };
472
+ //# sourceMappingURL=libs-ui-components-dropdown.mjs.map