@libs-ui/components-dropdown 0.2.10-6.2
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.
- package/README.md +3 -0
- package/dropdown.component.d.ts +131 -0
- package/esm2022/dropdown.component.mjs +451 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/interfaces/dropdown.interface.mjs +2 -0
- package/esm2022/interfaces/function-control-event.interface.mjs +2 -0
- package/esm2022/interfaces/index.mjs +3 -0
- package/esm2022/libs-ui-components-dropdown.mjs +5 -0
- package/esm2022/tabs/tabs.component.mjs +23 -0
- package/fesm2022/libs-ui-components-dropdown.mjs +476 -0
- package/fesm2022/libs-ui-components-dropdown.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/interfaces/dropdown.interface.d.ts +55 -0
- package/interfaces/function-control-event.interface.d.ts +11 -0
- package/interfaces/index.d.ts +2 -0
- package/package.json +25 -0
- package/tabs/tabs.component.d.ts +12 -0
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './dropdown.component';
|
|
2
|
+
export * from './interfaces';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2Ryb3Bkb3duLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMnOyJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2Ryb3Bkb3duL3NyYy9pbnRlcmZhY2VzL2Ryb3Bkb3duLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueSAqL1xuaW1wb3J0IHsgSVZhbGlkIH0gZnJvbSBcIkBsaWJzLXVpL2NvbXBvbmVudHMtaW5wdXRzLXZhbGlkXCI7XG5pbXBvcnQgeyBJTGlzdENvbmZpZ0l0ZW0gfSBmcm9tIFwiQGxpYnMtdWkvY29tcG9uZW50cy1saXN0XCI7XG5pbXBvcnQgeyBUWVBFX1BPUE9WRVJfRElSRUNUSU9OLCBUWVBFX1BPUE9WRVJfUE9TSVRJT05fTU9ERSB9IGZyb20gXCJAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXJcIjtcbmltcG9ydCB7IElIdHRwUmVxdWVzdENvbmZpZyB9IGZyb20gXCJAbGlicy11aS9zZXJ2aWNlcy1odHRwLXJlcXVlc3RcIjtcblxuZXhwb3J0IGludGVyZmFjZSBJRW1pdFNlbGVjdEtleSB7XG4gIGtleT86IHVua25vd247XG4gIGl0ZW0/OiBhbnk7XG4gIGlzQ2xpY2tNYW51YWw/OiBib29sZWFuO1xuICB0YWJLZXlBY3RpdmU/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUVtaXRNdWx0aUtleSB7XG4gIGtleXM/OiBBcnJheTx1bmtub3duPjtcbiAgbWFwS2V5cz86IEFycmF5PElFbWl0U2VsZWN0S2V5PjtcbiAgaXNDbGlja01hbnVhbD86IGJvb2xlYW47XG4gIHRhYktleUFjdGl2ZT86IHN0cmluZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJUG9wb3ZlckN1c3RvbUNvbmZpZyB7XG4gIHdpZHRoQnlQYXJlbnQ/OiBib29sZWFuO1xuICBwYXJlbnRCb3JkZXJXaWR0aD86IG51bWJlcjtcbiAgbWF4SGVpZ2h0PzogbnVtYmVyO1xuICBtYXhXaWR0aD86IG51bWJlcjtcbiAgZGlyZWN0aW9uPzogVFlQRV9QT1BPVkVSX0RJUkVDVElPTjtcbiAgaWdub3JlQXJyb3c/OiBib29sZWFuO1xuICBjbGFzc0luY2x1ZGU/OiBzdHJpbmc7XG4gIGRpc2FibGU/OiBib29sZWFuO1xuICBjbGlja0V4YWN0bHk/OiBib29sZWFuO1xuICBwYWRkaW5nTGVmdEl0ZW0/OiBib29sZWFuO1xuICB0aW1lckRlc3Ryb3k/OiBudW1iZXI7XG4gIHBvc2l0aW9uPzoge1xuICAgIG1vZGU6IFRZUEVfUE9QT1ZFUl9QT1NJVElPTl9NT0RFO1xuICAgIGRpc3RhbmNlOiBudW1iZXI7XG4gIH07XG4gIGFuaW1hdGlvbkNvbmZpZz86IHtcbiAgICB0aW1lPzogbnVtYmVyO1xuICAgIGRpc3RhbmNlPzogbnVtYmVyO1xuICB9O1xuICB3aWR0aD86IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJRHJvcGRvd25UYWJzSXRlbSB7XG4gIGtleTogc3RyaW5nO1xuICBuYW1lOiBzdHJpbmc7XG4gIGh0dHBSZXF1ZXN0RGF0YT86IElIdHRwUmVxdWVzdENvbmZpZztcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJVmFsaWRNYXhJdGVtU2VsZWN0ZWQgZXh0ZW5kcyBJVmFsaWQge1xuICB2YWx1ZTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElEcm9wZG93biB7XG4gIGxpc3RWaWV3Q29uZmlnPzogSUxpc3RDb25maWdJdGVtO1xuICBsaXN0Vmlld0JhY2tncm91bmRMaXN0Q3VzdG9tPzogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBsaXN0Vmlld01heEl0ZW1TaG93PzogbnVtYmVyIHwgdW5kZWZpbmVkO1xuICBjbGFzc0luY2x1ZGVQb3B1cD86IHN0cmluZztcbiAgcGFkZGluZ0xlZnRJdGVtPzogYm9vbGVhbjtcbiAgY2xpY2tFeGFjdGx5PzogYm9vbGVhbjtcbiAgekluZGV4PzogbnVtYmVyO1xufSJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSURyb3Bkb3duRnVuY3Rpb25Db250cm9sRXZlbnQge1xuICB2YWxpZDogKCkgPT4gUHJvbWlzZTxib29sZWFuPjtcbiAgcmVzZXRFcnJvcjogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgc2V0RXJyb3I/OiAobWVzc2FnZTogc3RyaW5nKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZW1vdmVMaXN0OiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICB1cGRhdGVMYWJlbEl0ZW1TZWxlY3RlZDogKGxhYmVsOiBzdHJpbmcpID0+IFByb21pc2U8dm9pZD47XG4gIHJlc2V0OiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZWZyZXNoTGlzdDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbiAgc2V0SXRlbVNlbGVjdGVkQnlLZXk6IChpZDogdW5rbm93bikgPT4gUHJvbWlzZTx2b2lkPjtcbiAgZ2V0RGlzYWJsZTogKCkgPT4gUHJvbWlzZTxib29sZWFuPjtcbn1cbiJdfQ==
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './dropdown.interface';
|
|
2
|
+
export * from './function-control-event.interface';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL2ludGVyZmFjZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLG9DQUFvQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9kcm9wZG93bi5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7Il19
|
|
@@ -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.13", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
17
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div 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.13", 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 class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL3RhYnMvdGFicy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvZHJvcGRvd24vc3JjL3RhYnMvdGFicy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pGLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBWXRELE1BQU0sT0FBTyxxQ0FBcUM7SUFFdkMsa0JBQWtCLEdBQUcsS0FBSyxFQUFXLENBQUM7SUFDdEMsVUFBVSxHQUFHLEtBQUssRUFBNEIsQ0FBQztJQUMvQyxZQUFZLEdBQUcsS0FBSyxFQUFVLENBQUM7SUFDL0IsT0FBTyxHQUFHLEtBQUssRUFBVyxDQUFDO0lBRTNCLFNBQVMsR0FBRyxNQUFNLEVBQVEsQ0FBQztJQUUxQixnQkFBZ0IsQ0FBQyxLQUFZLEVBQUUsR0FBVztRQUNsRCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN4QixDQUFDO3dHQWJVLHFDQUFxQzs0RkFBckMscUNBQXFDLGt1QkNibEQsZ2hCQVlBLHVxQkREWSxlQUFlOzs0RkFFZCxxQ0FBcUM7a0JBVGpELFNBQVM7K0JBRUUsa0NBQWtDLGNBR2hDLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLGVBQWUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBtb2RlbCwgb3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gXCJAbmd4LXRyYW5zbGF0ZS9jb3JlXCI7XG5pbXBvcnQgeyBJRHJvcGRvd25UYWJzSXRlbSB9IGZyb20gXCIuLi9pbnRlcmZhY2VzL2Ryb3Bkb3duLmludGVyZmFjZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6IFwibGlic191aS1jb21wb25lbnRzLWRyb3Bkb3duLXRhYnNcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi90YWJzLmNvbXBvbmVudC5odG1sXCIsXG4gIHN0eWxlVXJsOiBcIi4vdGFicy5jb21wb25lbnQuc2Nzc1wiLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW1RyYW5zbGF0ZU1vZHVsZV1cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0Ryb3Bkb3duVGFic0NvbXBvbmVudCB7XG5cbiAgcmVhZG9ubHkgaWdub3JlQm9yZGVyQm90dG9tID0gaW5wdXQ8Ym9vbGVhbj4oKTtcbiAgcmVhZG9ubHkgdGFic0NvbmZpZyA9IGlucHV0PEFycmF5PElEcm9wZG93blRhYnNJdGVtPj4oKTtcbiAgcmVhZG9ubHkgdGFiS2V5QWN0aXZlID0gbW9kZWw8c3RyaW5nPigpO1xuICByZWFkb25seSBkaXNhYmxlID0gaW5wdXQ8Ym9vbGVhbj4oKTtcblxuICByZWFkb25seSBvdXRDaGFuZ2UgPSBvdXRwdXQ8dm9pZD4oKTtcblxuICBwcm90ZWN0ZWQgaGFuZGxlclNlbGVjdFRhYihldmVudDogRXZlbnQsIGtleTogc3RyaW5nKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy50YWJLZXlBY3RpdmUuc2V0KGtleSk7XG4gICAgdGhpcy5vdXRDaGFuZ2UuZW1pdCgpO1xuICB9XG5cbn0iLCI8ZGl2IGNsYXNzPVwibGlicy11aS1kcm9wZG93bi10YWItY29udGFpbmVyXCJcbiAgW2NsYXNzLmxpYnMtdWktYm9yZGVyLWJvdHRvbS1nZW5lcmFsXT1cIiFpZ25vcmVCb3JkZXJCb3R0b20oKVwiPlxuICBAZm9yICh0YWIgb2YgdGFic0NvbmZpZygpOyB0cmFjayB0YWIpIHtcbiAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1kcm9wZG93bi10YWItY29udGFpbmVyLWl0ZW0gbGlicy11aS1mb250LWg2bVwiXG4gICAgICBbY2xhc3MubGlicy11aS1kcm9wZG93bi10YWItY29udGFpbmVyLWl0ZW0tYWN0aXZlXT1cInRhYktleUFjdGl2ZSgpID09PSB0YWIua2V5XCJcbiAgICAgIFtjbGFzcy5saWJzLXVpLWRpc2FibGVdPVwiZGlzYWJsZSgpXCJcbiAgICAgIFtjbGFzcy5wb2ludGVyLWV2ZW50cy1ub25lXT1cImRpc2FibGUoKVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlclNlbGVjdFRhYigkZXZlbnQsdGFiLmtleSlcIj5cbiAgICAgIHt7IHRhYi5uYW1lIHwgdHJhbnNsYXRlIH19XG4gICAgPC9kaXY+XG4gIH1cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,476 @@
|
|
|
1
|
+
import { AsyncPipe } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { input, model, output, Component, ChangeDetectionStrategy, 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 { get, set, isNil, CHARACTER_DATA_EMPTY, cloneDeep, 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.13", ngImport: i0, type: LibsUiComponentsDropdownTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div 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.13", 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 class=\"libs-ui-dropdown-tab-container\"\n [class.libs-ui-border-bottom-general]=\"!ignoreBorderBottom()\">\n @for (tab of tabsConfig(); track tab) {\n <div 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
|
+
/* 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
|
+
fieldLabel = signal('labelDisplay');
|
|
43
|
+
popoverItemSelected = signal(undefined);
|
|
44
|
+
labelItemSelectedComputed = computed(this.getLabelItemSelected.bind(this));
|
|
45
|
+
autoSelectedFirstItemCallOutsideBefore = signal(false);
|
|
46
|
+
keysSelected = signal([]);
|
|
47
|
+
popoverFunctionControl = signal(undefined);
|
|
48
|
+
fieldKey = signal('id');
|
|
49
|
+
listFunctionControl = signal(undefined);
|
|
50
|
+
/* INPUT */
|
|
51
|
+
useXssFilter = input(false);
|
|
52
|
+
popoverElementRefCustom = input();
|
|
53
|
+
classInclude = input();
|
|
54
|
+
ignoreStopPropagationEvent = input(false);
|
|
55
|
+
flagMouse = model({ isMouseEnter: false, isMouseEnterContent: false });
|
|
56
|
+
flagMouseContent = model();
|
|
57
|
+
popoverCustomConfig = input();
|
|
58
|
+
isNgContent = input();
|
|
59
|
+
zIndex = input();
|
|
60
|
+
convertItemSelected = input(this.defaultConvertItemSelected.bind(this));
|
|
61
|
+
getPopoverItemSelected = input();
|
|
62
|
+
httpRequestDetailItemById = input();
|
|
63
|
+
lengthKeys = model(0);
|
|
64
|
+
textDisplayWhenNoSelect = input('i18n_select_value');
|
|
65
|
+
textDisplayWhenMultiSelect = input('i18n_selecting_options');
|
|
66
|
+
classIncludeTextDisplayWhenNoSelect = input('libs-ui-font-h5r');
|
|
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
|
+
listSearchConfig = input({ noBorder: true }, { transform: value => value || { noBorder: true } });
|
|
87
|
+
isSearchOnline = input(false);
|
|
88
|
+
listHiddenInputSearch = input();
|
|
89
|
+
listSearchPadding = input();
|
|
90
|
+
listKeySearch = input();
|
|
91
|
+
listDividerClassInclude = input();
|
|
92
|
+
listConfig = input();
|
|
93
|
+
listButtonsOther = input();
|
|
94
|
+
listHasButtonUnSelectOption = input();
|
|
95
|
+
listClickExactly = input();
|
|
96
|
+
listBackgroundCustom = input();
|
|
97
|
+
listMaxItemShow = input(6);
|
|
98
|
+
listKeySelected = model();
|
|
99
|
+
listMultiKeySelected = model();
|
|
100
|
+
listKeysDisable = input(); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
|
|
101
|
+
listKeysHidden = input(); // không dùng giá trị này kết hợp với template checkbox có config chứa configCheckboxCheckAll
|
|
102
|
+
validRequired = input();
|
|
103
|
+
validMaxItemSelected = input();
|
|
104
|
+
changeValidUndefinedResetError = input();
|
|
105
|
+
allowSelectItemMultiple = input();
|
|
106
|
+
focusInputSearch = input(true);
|
|
107
|
+
onlyEmitDataWhenReset = input(); // true khi muốn emit sự kiện thay đổi key
|
|
108
|
+
resetKeyWhenSelectAllKey = input();
|
|
109
|
+
listConfigHasDivider = input(true);
|
|
110
|
+
classIncludeIcon = input('ml-[8px]', { transform: value => value || 'ml-[8px]' });
|
|
111
|
+
classIncludeContent = input();
|
|
112
|
+
listIgnoreClassDisableDefaultWhenUseKeysDisableItem = input(); // bỏ chế độ disable item trên html list view để disable từng phần trong rows
|
|
113
|
+
tabKeyActive = model();
|
|
114
|
+
tabsConfig = input();
|
|
115
|
+
ignoreBorderBottom = input();
|
|
116
|
+
/* OUTPUT */
|
|
117
|
+
outSelectKey = output(); // sử dụng cho type chọn 1.
|
|
118
|
+
outSelectMultiKey = output(); // sử dụng cho type cho phép chọn nhiều.
|
|
119
|
+
outFunctionsControl = output();
|
|
120
|
+
outValidEvent = output();
|
|
121
|
+
outChangStageFlagMouse = output();
|
|
122
|
+
outDataChange = output();
|
|
123
|
+
outClickButtonOther = output();
|
|
124
|
+
outShowList = output();
|
|
125
|
+
outChangeTabKeyActive = output();
|
|
126
|
+
/* INJECT*/
|
|
127
|
+
translate = inject(TranslateService);
|
|
128
|
+
httpRequestService = inject(LibsUiHttpRequestService);
|
|
129
|
+
constructor() {
|
|
130
|
+
effect(() => {
|
|
131
|
+
const listConfig = this.listConfig();
|
|
132
|
+
if (listConfig) {
|
|
133
|
+
untracked(() => this.fieldKey.set(getFieldKeyByType(listConfig, 'id')));
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
effect(() => {
|
|
137
|
+
if (this.listKeySelected() && !this.itemsSelected()) {
|
|
138
|
+
untracked(() => {
|
|
139
|
+
this.handlerSelectedKey({ key: this.listKeySelected(), item: undefined, isClickManual: false });
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
});
|
|
143
|
+
effect(() => {
|
|
144
|
+
if (this.changeValidUndefinedResetError() && this.validRequired()) {
|
|
145
|
+
untracked(() => this.resetError());
|
|
146
|
+
}
|
|
147
|
+
});
|
|
148
|
+
effect(() => {
|
|
149
|
+
if (this.listMultiKeySelected()) {
|
|
150
|
+
untracked(() => {
|
|
151
|
+
const previousValue = this.keysSelected() || [];
|
|
152
|
+
const currentValue = this.listMultiKeySelected() || [];
|
|
153
|
+
if (previousValue.length !== currentValue.length) {
|
|
154
|
+
this.handlerSelectMultiKey({ keys: currentValue, mapKeys: [], isClickManual: false });
|
|
155
|
+
return;
|
|
156
|
+
}
|
|
157
|
+
for (const keyPrevious of previousValue) {
|
|
158
|
+
if (!currentValue.some(keyCurrent => keyCurrent === keyPrevious)) {
|
|
159
|
+
this.handlerSelectMultiKey({ keys: currentValue, mapKeys: [], isClickManual: false });
|
|
160
|
+
break;
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
async ngOnInit() {
|
|
168
|
+
const listConfig = this.listConfig();
|
|
169
|
+
if (!this.lengthKeys() && listConfig && (listConfig.autoSelectFirstItem || listConfig.configTemplateCheckbox?.()?.autoSelectAllItem || listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect) && listConfig.httpRequestData) {
|
|
170
|
+
try {
|
|
171
|
+
this.loadingDetail.set(true);
|
|
172
|
+
const httpRequestData = listConfig.httpRequestData();
|
|
173
|
+
const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestData;
|
|
174
|
+
this.httpRequestService.updateArguments(argumentsValue, { ...this.httpRequestService.fakeResponsePagingApi(), dropdownTabKeyActive: this.tabKeyActive }, {}, '', true, false, guideAutoUpdateArgumentsValue);
|
|
175
|
+
const result = await this.httpRequestService.callApi(httpRequestData);
|
|
176
|
+
this.loadingDetail.set(false);
|
|
177
|
+
if (result?.data) {
|
|
178
|
+
this.items.set(result.data);
|
|
179
|
+
this.emitAutoSelectKey(result.data, listConfig.type);
|
|
180
|
+
this.autoSelectedFirstItemCallOutsideBefore.set(true);
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
catch (error) {
|
|
184
|
+
console.log(error);
|
|
185
|
+
this.items.set([]);
|
|
186
|
+
this.loadingDetail.set(false);
|
|
187
|
+
}
|
|
188
|
+
this.outDataChange.emit(this.items());
|
|
189
|
+
}
|
|
190
|
+
this.outFunctionsControl.emit({
|
|
191
|
+
reset: this.reset.bind(this),
|
|
192
|
+
valid: this.valid.bind(this),
|
|
193
|
+
resetError: this.resetError.bind(this),
|
|
194
|
+
setError: this.setError.bind(this),
|
|
195
|
+
removeList: async () => this.popoverFunctionControl()?.removePopoverOverlay(),
|
|
196
|
+
getDisable: async () => this.disable() ?? false,
|
|
197
|
+
updateLabelItemSelected: async (label) => this.itemsSelected.update(value => ({ ...value, [this.fieldLabel()]: this.translate.instant(label) })),
|
|
198
|
+
refreshList: async () => this.listFunctionControl()?.refresh(),
|
|
199
|
+
setItemSelectedByKey: this.setItemSelectedByKey.bind(this)
|
|
200
|
+
});
|
|
201
|
+
this.checkValid(true);
|
|
202
|
+
}
|
|
203
|
+
/* FUNCTIONS */
|
|
204
|
+
defaultConvertItemSelected(item) {
|
|
205
|
+
if (!item) {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
const fieldGetLabel = this.fieldGetLabel();
|
|
209
|
+
const value = fieldGetLabel ? get(item, fieldGetLabel) : undefined;
|
|
210
|
+
set(item, this.fieldLabel(), value ?? get(item, 'label') ?? get(item, 'name') ?? ' ');
|
|
211
|
+
}
|
|
212
|
+
getLabelItemSelected() {
|
|
213
|
+
let label = ' ';
|
|
214
|
+
if (!this.lengthKeys()) {
|
|
215
|
+
label = this.textDisplayWhenNoSelect();
|
|
216
|
+
}
|
|
217
|
+
if (this.lengthKeys() > 1) {
|
|
218
|
+
label = this.textDisplayWhenMultiSelect();
|
|
219
|
+
}
|
|
220
|
+
if (this.lengthKeys() === 1) {
|
|
221
|
+
label = this.itemsSelected()?.[this.fieldLabel()] || this.textDisplayWhenNoSelect();
|
|
222
|
+
}
|
|
223
|
+
return label;
|
|
224
|
+
}
|
|
225
|
+
emitAutoSelectKey(items, type) {
|
|
226
|
+
const listConfig = this.listConfig();
|
|
227
|
+
if (!items || !items.length || !listConfig || (!listConfig.autoSelectFirstItem && !listConfig.configTemplateCheckbox?.()?.autoSelectAllItem && !listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect)) {
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
const flatItemsSupportAutoSelect = listConfig.configTemplateGroup?.()?.flatItemsSupportAutoSelect;
|
|
231
|
+
if (type === 'group' && flatItemsSupportAutoSelect) {
|
|
232
|
+
items = flatItemsSupportAutoSelect(items);
|
|
233
|
+
}
|
|
234
|
+
if (listConfig.autoSelectFirstItem) {
|
|
235
|
+
const item = items[0];
|
|
236
|
+
const key = get(item, this.fieldKey());
|
|
237
|
+
if (type === 'radio' || type === 'text') {
|
|
238
|
+
this.handlerSelectedKey({ key, item, isClickManual: false });
|
|
239
|
+
this.listKeySelected.set(key);
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
this.handlerSelectMultiKey({ keys: [key], mapKeys: [{ key, item, isClickManual: false }], isClickManual: false });
|
|
243
|
+
this.listMultiKeySelected.set([key]);
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
if (type !== 'checkbox' && type !== 'group') {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
const keys = [];
|
|
250
|
+
const mapKeys = [];
|
|
251
|
+
items.forEach(item => {
|
|
252
|
+
const key = get(item, this.fieldKey());
|
|
253
|
+
if (isNil(key)) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
keys.push(key);
|
|
257
|
+
mapKeys.push({ key, item, isClickManual: false });
|
|
258
|
+
});
|
|
259
|
+
this.handlerSelectMultiKey({ keys, mapKeys, isClickManual: false });
|
|
260
|
+
this.listMultiKeySelected.set(keys);
|
|
261
|
+
}
|
|
262
|
+
handlerEvent(type) {
|
|
263
|
+
if (type === 'click') {
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
if (type === 'remove') {
|
|
267
|
+
this.showList.set(false);
|
|
268
|
+
this.outShowList.emit(this.showList());
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
this.showList.set(true);
|
|
272
|
+
this.outShowList.emit(this.showList());
|
|
273
|
+
}
|
|
274
|
+
handlerDataChange(items) {
|
|
275
|
+
this.items.set(items);
|
|
276
|
+
this.popoverFunctionControl()?.updatePopoverOverlayPosition();
|
|
277
|
+
this.outDataChange.emit(this.items());
|
|
278
|
+
}
|
|
279
|
+
handlerChangeFlagMouse(event) {
|
|
280
|
+
this.flagMouseContent.set(event);
|
|
281
|
+
this.mergeFlagMouse();
|
|
282
|
+
}
|
|
283
|
+
handlerClickButtonOther(button) {
|
|
284
|
+
this.outClickButtonOther.emit(button);
|
|
285
|
+
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
286
|
+
}
|
|
287
|
+
handlerPopoverControlEvent(event) {
|
|
288
|
+
this.popoverFunctionControl.set(event);
|
|
289
|
+
}
|
|
290
|
+
async handlerSelectedKey(event) {
|
|
291
|
+
const key = event?.key;
|
|
292
|
+
const item = event?.item;
|
|
293
|
+
const isClickManual = event?.isClickManual;
|
|
294
|
+
this.lengthKeys.set(!(isNil(key) || (typeof key === 'string' && key === '')) ? 1 : 0);
|
|
295
|
+
this.listKeySelected.set(key);
|
|
296
|
+
if (!this.allowSelectItemMultiple() && this.itemsSelected() && get(this.itemsSelected(), this.fieldKey()) === key) {
|
|
297
|
+
return;
|
|
298
|
+
}
|
|
299
|
+
if (isClickManual) {
|
|
300
|
+
if (!(isNil(key) || (typeof key === 'string' && key === '')) && (item || this.itemsSelected())) {
|
|
301
|
+
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
this.checkValid();
|
|
305
|
+
if (this.lengthKeys() && !item && this.httpRequestDetailItemById()) {
|
|
306
|
+
let itemSelected = await this.setItemSelectedByKey(key);
|
|
307
|
+
if (!itemSelected) {
|
|
308
|
+
itemSelected = {
|
|
309
|
+
[this.fieldKey()]: key,
|
|
310
|
+
[this.fieldLabel()]: CHARACTER_DATA_EMPTY
|
|
311
|
+
};
|
|
312
|
+
this.itemsSelected.set(itemSelected);
|
|
313
|
+
}
|
|
314
|
+
if (event) {
|
|
315
|
+
event.item = itemSelected;
|
|
316
|
+
}
|
|
317
|
+
this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
|
|
318
|
+
return;
|
|
319
|
+
}
|
|
320
|
+
this.itemsSelected.set(cloneDeep(item));
|
|
321
|
+
this.buildDisplay();
|
|
322
|
+
this.outSelectKey.emit({ ...event, tabKeyActive: this.tabKeyActive() });
|
|
323
|
+
}
|
|
324
|
+
async handlerSelectMultiKey(event, isClickManual = false) {
|
|
325
|
+
if (this.listConfig()?.configTemplateGroup?.()?.singleSelectItem && event?.mapKeys?.length) {
|
|
326
|
+
const itemClickManual = event.mapKeys.find(mapKey => mapKey.item && mapKey.item.isCheckManual);
|
|
327
|
+
if (itemClickManual) {
|
|
328
|
+
setTimeout(() => itemClickManual.item.isCheckManual = false);
|
|
329
|
+
event.keys = [itemClickManual.key];
|
|
330
|
+
event.mapKeys = [itemClickManual];
|
|
331
|
+
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
this.keysSelected.set([...(event?.keys || [])]);
|
|
335
|
+
this.listMultiKeySelected.set([...(event?.keys || [])]);
|
|
336
|
+
this.lengthKeys.set(event?.keys?.length || 0);
|
|
337
|
+
this.checkValid();
|
|
338
|
+
if (this.lengthKeys() > 1) {
|
|
339
|
+
this.outSelectMultiKey.emit({ ...(event || {}), isClickManual, tabKeyActive: this.tabKeyActive() });
|
|
340
|
+
return;
|
|
341
|
+
}
|
|
342
|
+
const key = event?.keys[0];
|
|
343
|
+
let item = event?.mapKeys?.find(item => item.key === key)?.item;
|
|
344
|
+
if (this.lengthKeys() && !item && this.httpRequestDetailItemById()) {
|
|
345
|
+
item = await this.setItemSelectedByKey(key);
|
|
346
|
+
this.outSelectMultiKey.emit({ keys: [key], mapKeys: [{ key, item }], isClickManual, tabKeyActive: this.tabKeyActive() });
|
|
347
|
+
return;
|
|
348
|
+
}
|
|
349
|
+
this.itemsSelected.set(cloneDeep(item));
|
|
350
|
+
this.buildDisplay();
|
|
351
|
+
this.outSelectMultiKey.emit({ ...(event || {}), isClickManual, tabKeyActive: this.tabKeyActive() });
|
|
352
|
+
}
|
|
353
|
+
async setItemSelectedByKey(key) {
|
|
354
|
+
const httpRequestDetailItemById = this.httpRequestDetailItemById();
|
|
355
|
+
if (!httpRequestDetailItemById || this.loadingDetail()) {
|
|
356
|
+
return;
|
|
357
|
+
}
|
|
358
|
+
try {
|
|
359
|
+
this.loadingDetail.set(true);
|
|
360
|
+
const { argumentsValue, guideAutoUpdateArgumentsValue } = httpRequestDetailItemById;
|
|
361
|
+
this.httpRequestService.updateArguments(argumentsValue, { key, dropdownTabKeyActive: this.tabKeyActive() }, {}, '', false, false, guideAutoUpdateArgumentsValue);
|
|
362
|
+
const result = await this.httpRequestService.callApi(httpRequestDetailItemById);
|
|
363
|
+
const item = cloneDeep(result.data[0] || result.data);
|
|
364
|
+
this.itemsSelected.set(item);
|
|
365
|
+
this.buildDisplay();
|
|
366
|
+
this.loadingDetail.set(false);
|
|
367
|
+
return item;
|
|
368
|
+
}
|
|
369
|
+
catch (error) {
|
|
370
|
+
console.log(error);
|
|
371
|
+
this.loadingDetail.set(false);
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
}
|
|
375
|
+
handlerChangeTab() {
|
|
376
|
+
this.outChangeTabKeyActive.emit(this.tabKeyActive());
|
|
377
|
+
}
|
|
378
|
+
handlerLoadingList(event) {
|
|
379
|
+
this.loadingList.set(event);
|
|
380
|
+
}
|
|
381
|
+
async setError(error) {
|
|
382
|
+
this.error.set({ message: error });
|
|
383
|
+
this.showBorderError.set(true);
|
|
384
|
+
}
|
|
385
|
+
async valid() {
|
|
386
|
+
if (this.error()?.message) {
|
|
387
|
+
return false;
|
|
388
|
+
}
|
|
389
|
+
return this.checkValid();
|
|
390
|
+
}
|
|
391
|
+
checkValid(validateDefault) {
|
|
392
|
+
this.error.set(undefined);
|
|
393
|
+
const valid = { required: true, limitMaxItemSelect: true };
|
|
394
|
+
const validMaxItemSelected = this.validMaxItemSelected();
|
|
395
|
+
if (this.validRequired() && !this.lengthKeys()) {
|
|
396
|
+
valid.required = false;
|
|
397
|
+
}
|
|
398
|
+
if (validMaxItemSelected && this.lengthKeys() > validMaxItemSelected.value) {
|
|
399
|
+
valid.limitMaxItemSelect = false;
|
|
400
|
+
}
|
|
401
|
+
if (!validateDefault && valid.required === false) {
|
|
402
|
+
const validRequired = this.validRequired();
|
|
403
|
+
this.error.set({ ...(validRequired || {}), message: validRequired?.message || ERROR_MESSAGE_EMPTY_VALID });
|
|
404
|
+
}
|
|
405
|
+
if (!validateDefault && !this.error() && valid.limitMaxItemSelect === false) {
|
|
406
|
+
const validMaxItemSelected = this.validMaxItemSelected();
|
|
407
|
+
this.error.set({ ...(validMaxItemSelected || {}), message: validMaxItemSelected?.message || ERROR_MESSAGE_MAX_VALID, interpolateParams: { value: validMaxItemSelected?.value } });
|
|
408
|
+
}
|
|
409
|
+
this.outValidEvent.emit(valid.required && valid.limitMaxItemSelect);
|
|
410
|
+
return valid.required && valid.limitMaxItemSelect;
|
|
411
|
+
}
|
|
412
|
+
async resetError() {
|
|
413
|
+
this.error.set(undefined);
|
|
414
|
+
this.showBorderError.set(false);
|
|
415
|
+
}
|
|
416
|
+
handlerListFunctionsControl(event) {
|
|
417
|
+
this.listFunctionControl.set(event);
|
|
418
|
+
}
|
|
419
|
+
handlerChangStageFlagMouse(flag) {
|
|
420
|
+
this.flagMouse.set(flag);
|
|
421
|
+
this.mergeFlagMouse();
|
|
422
|
+
}
|
|
423
|
+
async reset() {
|
|
424
|
+
this.itemsSelected.set(undefined);
|
|
425
|
+
this.lengthKeys.set(0);
|
|
426
|
+
this.listFunctionControl()?.resetKeySelected();
|
|
427
|
+
if (!this.showList() && this.onlyEmitDataWhenReset()) {
|
|
428
|
+
this.outSelectKey.emit(undefined);
|
|
429
|
+
this.outSelectMultiKey.emit(undefined);
|
|
430
|
+
}
|
|
431
|
+
this.listKeySelected.set(undefined);
|
|
432
|
+
this.listMultiKeySelected.set(undefined);
|
|
433
|
+
this.keysSelected.set([]);
|
|
434
|
+
this.error.set(undefined);
|
|
435
|
+
}
|
|
436
|
+
async buildDisplay() {
|
|
437
|
+
if (this.itemsSelected()) {
|
|
438
|
+
this.convertItemSelected()(this.itemsSelected(), this.translate);
|
|
439
|
+
const getPopoverItemSelected = this.getPopoverItemSelected();
|
|
440
|
+
if (getPopoverItemSelected) {
|
|
441
|
+
this.popoverItemSelected.set(await getPopoverItemSelected(this.itemsSelected, this.translate));
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
mergeFlagMouse() {
|
|
446
|
+
const flag = { isMouseEnter: false, isMouseEnterContent: false, isContainerHasScroll: false };
|
|
447
|
+
if (this.flagMouseContent()?.isMouseEnter || this.flagMouse().isMouseEnter) {
|
|
448
|
+
flag.isMouseEnter = true;
|
|
449
|
+
}
|
|
450
|
+
if (this.flagMouseContent()?.isMouseEnterContent || this.flagMouse().isMouseEnterContent) {
|
|
451
|
+
flag.isMouseEnterContent = true;
|
|
452
|
+
}
|
|
453
|
+
if (this.flagMouseContent()?.isContainerHasScroll || this.flagMouse().isContainerHasScroll) {
|
|
454
|
+
flag.isContainerHasScroll = true;
|
|
455
|
+
}
|
|
456
|
+
this.outChangStageFlagMouse.emit(flag);
|
|
457
|
+
}
|
|
458
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 }, 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 }, 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 [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 [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] ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general ') + ((listConfig()?.type === 'text' && listConfig()?.configTemplateText?.()?.notUseVirtualScroll) ? ' overflow-hidden' : ''),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div [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 class=\"flex items-center w-full absolute\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover [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 @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover [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 class=\"text-[16px] libs-ui-icon-move-right rotate-90 {{ classIncludeIcon() }}\"\n [class.text-[#6a7383]]=\"!readonly() && !classIncludeIcon()\"\n [class.text-[#9ca2ad]]=\"(readonly() || disable()) && !classIncludeIcon()\"></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 <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\"\n [innerHtml]=\"(error.message || ' ') | translate:(error.interpolateParams || {})\">\n </div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div style=\"display: flex; flex-direction: column;\">\n @if (tabsConfig()) {\n <libs_ui-components-dropdown-tabs [tabsConfig]=\"tabsConfig()\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? true\"\n [disable]=\"disable() || loadingDetail()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"(listConfig()?.type === 'text' && listConfig()?.configTemplateText?.()?.notUseVirtualScroll) ? 0 : 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", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "itemChangeUnSelect", "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", "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 });
|
|
460
|
+
}
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsDropdownComponent, decorators: [{
|
|
462
|
+
type: Component,
|
|
463
|
+
args: [{ selector: 'libs_ui-components-dropdown', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
464
|
+
TranslateModule, LibsUiPipesSecurityTrustPipe, AsyncPipe,
|
|
465
|
+
LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent,
|
|
466
|
+
LibsUiComponentsAvatarComponent, LibsUiComponentsListComponent,
|
|
467
|
+
LibsUiComponentsDropdownTabsComponent
|
|
468
|
+
], template: "<div class=\"flex flex-col w-full\">\n @if (labelConfig(); as label) {\n <libs_ui-components-label [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 [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] ' + (popoverCustomConfig()?.classInclude ?? 'libs-ui-border-general ') + ((listConfig()?.type === 'text' && listConfig()?.configTemplateText?.()?.notUseVirtualScroll) ? ' overflow-hidden' : ''),\n position: popoverCustomConfig()?.position || { mode: 'start', distance: 0 },\n width: popoverCustomConfig()?.width\n }\"\n (outFunctionsControl)=\"handlerPopoverControlEvent($event)\"\n (outEvent)=\"handlerEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n @if (!isNgContent()) {\n <div [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 class=\"flex items-center w-full absolute\">\n @if (lengthKeys() === 1) {\n @if (itemsSelected(); as itemsSelected) {\n @if (fieldGetImage(); as fieldGetImage) {\n <libs_ui-components-avatar [classInclude]=\"classAvatarInclude()\"\n [typeShape]=\"typeShape()\"\n [size]=\"imageSize()\"\n [linkAvatar]=\"itemsSelected[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError()\"\n [idGenColor]=\"itemsSelected[fieldGetColorAvatar() || fieldGetTextAvatar()]\"\n [textAvatar]=\"itemsSelected[fieldGetTextAvatar()]\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace()\" />\n }\n @if (fieldGetIcon(); as fieldGetIcon) {\n <i [class]=\"itemsSelected[fieldGetIcon] + ' mr-[8px]'\"></i>\n }\n }\n }\n <libs_ui-components-popover [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 @if (popoverItemSelected(); as popoverItemSelected) {\n <libs_ui-components-popover [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 class=\"text-[16px] libs-ui-icon-move-right rotate-90 {{ classIncludeIcon() }}\"\n [class.text-[#6a7383]]=\"!readonly() && !classIncludeIcon()\"\n [class.text-[#9ca2ad]]=\"(readonly() || disable()) && !classIncludeIcon()\"></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 <div class=\"mt-[8px] text-[#ee2d41] libs-ui-font-h7r\"\n [innerHtml]=\"(error.message || ' ') | translate:(error.interpolateParams || {})\">\n </div>\n }\n }\n</div>\n<ng-template #listViewEl>\n <div style=\"display: flex; flex-direction: column;\">\n @if (tabsConfig()) {\n <libs_ui-components-dropdown-tabs [tabsConfig]=\"tabsConfig()\"\n [(tabKeyActive)]=\"tabKeyActive\"\n [ignoreBorderBottom]=\"ignoreBorderBottom()\"\n [disable]=\"disable() || loadingDetail() || loadingList()\"\n (outChange)=\"handlerChangeTab()\" />\n }\n <libs_ui-components-list [searchConfig]=\"listSearchConfig()\"\n [isSearchOnline]=\"isSearchOnline()\"\n [dropdownTabKeyActive]=\"tabKeyActive()\"\n [keySearch]=\"listKeySearch()\"\n [config]=\"listConfig()\"\n [autoSelectedFirstItemCallOutsideBefore]=\"autoSelectedFirstItemCallOutsideBefore()\"\n [paddingLeftItem]=\"popoverCustomConfig()?.paddingLeftItem ?? true\"\n [disable]=\"disable() || loadingDetail()\"\n [hiddenInputSearch]=\"listHiddenInputSearch()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"(listConfig()?.type === 'text' && listConfig()?.configTemplateText?.()?.notUseVirtualScroll) ? 0 : 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"] }]
|
|
469
|
+
}], ctorParameters: () => [] });
|
|
470
|
+
|
|
471
|
+
/**
|
|
472
|
+
* Generated bundle index. Do not edit.
|
|
473
|
+
*/
|
|
474
|
+
|
|
475
|
+
export { LibsUiComponentsDropdownComponent };
|
|
476
|
+
//# sourceMappingURL=libs-ui-components-dropdown.mjs.map
|