@unipin/angular-applet 18.6.16 → 18.6.18

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.
@@ -2560,6 +2560,7 @@ class FilterComponent {
2560
2560
  this.onSearch = new EventEmitter();
2561
2561
  this.form = new FormGroup({});
2562
2562
  this.activeFilter = [];
2563
+ this.initialItems = new Map();
2563
2564
  }
2564
2565
  ngOnInit() {
2565
2566
  this.config.fields.forEach(({ key, initialValue }) => {
@@ -2573,6 +2574,7 @@ class FilterComponent {
2573
2574
  if (savedState) {
2574
2575
  const state = JSON.parse(savedState);
2575
2576
  this.activeFilter = state.activeFilter;
2577
+ this.initialItems = new Map(Object.entries(state.initialItems));
2576
2578
  this.form.patchValue(state.formValues);
2577
2579
  this.emitValue();
2578
2580
  }
@@ -2584,6 +2586,7 @@ class FilterComponent {
2584
2586
  this.resetValue();
2585
2587
  this.form.reset();
2586
2588
  localStorage.removeItem(`${this.id}`);
2589
+ this.initialItems.clear();
2587
2590
  this.onSearch.emit({ mode: this.config.mode, data: null });
2588
2591
  }
2589
2592
  removeFilter(i) {
@@ -2593,12 +2596,27 @@ class FilterComponent {
2593
2596
  }
2594
2597
  search() {
2595
2598
  this.resetValue();
2596
- this.emitValue((k, v) => this.activeFilter.push({ key: k, value: v, label: `${k}:${k.includes('date') ? formatDate(v, 'dd MMM yyyy', 'en-US') : v}` }));
2599
+ this.emitValue((k, v) => {
2600
+ if (Array.isArray(v)) {
2601
+ v.forEach((value) => this.processFilter(k, value));
2602
+ }
2603
+ else {
2604
+ this.processFilter(k, v);
2605
+ }
2606
+ });
2597
2607
  if (this.activeFilter.length === 0) {
2608
+ this.initialItems.clear();
2598
2609
  localStorage.removeItem(`${this.id}`);
2599
2610
  }
2600
2611
  this.close();
2601
2612
  }
2613
+ processFilter(key, value) {
2614
+ const initialItem = this.initialItems.get(key)?.find(item => item.value === value);
2615
+ const label = initialItem
2616
+ ? `${key}: ${initialItem.label}`
2617
+ : `${key}: ${key.includes('date') ? formatDate(value, 'dd MMM yyyy', 'en-US') : value}`;
2618
+ this.activeFilter.push({ key, value, label });
2619
+ }
2602
2620
  add() {
2603
2621
  const { key, value } = this.getValue(this.searchBox.nativeElement.value);
2604
2622
  if (this.config.fields.findIndex(({ key: k }) => k === key) === -1) {
@@ -2617,6 +2635,13 @@ class FilterComponent {
2617
2635
  this.searchBox.nativeElement.value = '';
2618
2636
  this.emitValue();
2619
2637
  }
2638
+ applyInitialItems(item, key) {
2639
+ if (!Array.isArray(item)) {
2640
+ this.initialItems = this.initialItems.set(key, [item]);
2641
+ return;
2642
+ }
2643
+ this.initialItems = this.initialItems.set(key, item);
2644
+ }
2620
2645
  resetValue() {
2621
2646
  this.activeFilter.length = 0;
2622
2647
  this.searchBox.nativeElement.value = '';
@@ -2641,6 +2666,7 @@ class FilterComponent {
2641
2666
  this.onSearch.emit({ mode: this.config.mode, data: flag ? data : null });
2642
2667
  localStorage.setItem(`${this.id}`, JSON.stringify({
2643
2668
  activeFilter: this.activeFilter,
2669
+ initialItems: Object.fromEntries(this.initialItems),
2644
2670
  formValues: this.form.getRawValue()
2645
2671
  }));
2646
2672
  }
@@ -2652,7 +2678,7 @@ class FilterComponent {
2652
2678
  }
2653
2679
  }
2654
2680
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [{ token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
2655
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n @if (activeFilter.length > 0) {\n <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n @for (item of activeFilter; track item.key; let i = $index) {\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n \n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter overflow-auto\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n @for (c of config.fields; track c.key) {\n @switch (c.type) {\n @case ('number') {\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n\n @case ('checkbox') {\n <div class=\"my-4\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n }\n\n @case ('date-range') {\n <div class=\"d-flex gap-3 my-4\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n }\n\n @case ('select') { \n <up-select \n class=\"my-4\"\n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [items]=\"c.options!\" \n [multiple]=\"c.multiple || false\"\n /> \n }\n\n @case ('searchable-select') { \n <up-searchable-select \n class=\"my-4\" \n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [queryFunc]=\"c.getOptions!\" \n [initialItems]=\"c.options!\" \n [multiple]=\"c.multiple || false\"\n /> \n }\n \n @default { \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n }\n }\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled", "presentation", "minDate", "maxDate"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "addTag", "disabled", "searchable", "bindLabel", "bindValue", "appendTo"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue", "appendTo"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2681
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "up-filter", inputs: { id: "id", config: "config" }, outputs: { onSearch: "onSearch" }, host: { classAttribute: "d-block position-relative" }, viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["searchBox"], descendants: true }], ngImport: i0, template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n @if (activeFilter.length > 0) {\n <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n @for (item of activeFilter; track item.key; let i = $index) {\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n \n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter overflow-auto\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n @for (c of config.fields; track c.key) {\n @switch (c.type) {\n @case ('number') {\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n\n @case ('checkbox') {\n <div class=\"my-4\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n }\n\n @case ('date-range') {\n <div class=\"d-flex gap-3 my-4\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n }\n\n @case ('select') { \n <up-select \n class=\"my-4\"\n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [items]=\"c.options!\"\n [multiple]=\"c.multiple || false\"\n /> \n }\n\n @case ('searchable-select') { \n <up-searchable-select \n class=\"my-4\" \n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [queryFunc]=\"c.getOptions!\" \n [initialItems]=\"c.options! || initialItems.get(c.key.toString())!\"\n [multiple]=\"c.multiple || false\"\n (onChange)=\"applyInitialItems($event, c.key.toString())\"\n /> \n }\n \n @default { \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n }\n }\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["alignment", "checked", "color", "disabled", "indeterminate", "justify", "labelPlacement", "legacy", "mode", "name", "value"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonPopover, selector: "ion-popover" }, { kind: "directive", type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { kind: "component", type: FormDateComponent, selector: "up-date", inputs: ["label", "required", "disabled", "presentation", "minDate", "maxDate"] }, { kind: "component", type: FormInputComponent, selector: "up-input", inputs: ["label", "value", "required", "disabled"], outputs: ["onInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FormSelectComponent, selector: "up-select", inputs: ["items", "clearable", "label", "multiple", "required", "addTag", "disabled", "searchable", "bindLabel", "bindValue", "appendTo"] }, { kind: "component", type: FormSearchableSelectComponent, selector: "up-searchable-select", inputs: ["queryFunc", "clearable", "label", "initialItems", "required", "addTag", "disabled", "multiple", "bindLabel", "bindValue", "appendTo"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
2656
2682
  }
2657
2683
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
2658
2684
  type: Component,
@@ -2665,7 +2691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2665
2691
  ReactiveFormsModule,
2666
2692
  FormSelectComponent,
2667
2693
  FormSearchableSelectComponent
2668
- ], template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n @if (activeFilter.length > 0) {\n <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n @for (item of activeFilter; track item.key; let i = $index) {\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n \n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter overflow-auto\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n @for (c of config.fields; track c.key) {\n @switch (c.type) {\n @case ('number') {\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n\n @case ('checkbox') {\n <div class=\"my-4\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n }\n\n @case ('date-range') {\n <div class=\"d-flex gap-3 my-4\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n }\n\n @case ('select') { \n <up-select \n class=\"my-4\"\n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [items]=\"c.options!\" \n [multiple]=\"c.multiple || false\"\n /> \n }\n\n @case ('searchable-select') { \n <up-searchable-select \n class=\"my-4\" \n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [queryFunc]=\"c.getOptions!\" \n [initialItems]=\"c.options!\" \n [multiple]=\"c.multiple || false\"\n /> \n }\n \n @default { \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n }\n }\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"] }]
2694
+ ], template: "<ion-icon name=\"search\" class=\"fs-4 position-absolute\" />\n\n<div class=\"d-flex align-items-center form-control ps-5 py-0 pe-0 gap-3\">\n @if (activeFilter.length > 0) {\n <div class=\"d-flex flex-grow-1 flex-shrink-0 tag-container gap-2 text-nowrap overflow-auto\">\n @for (item of activeFilter; track item.key; let i = $index) {\n <div class=\"tag-item p-1 rounded d-flex align-items-center user-select-none\">\n <ion-icon name=\"close\" class=\"pe-1 me-1 cursor-pointer text-primary\" (click)=\"removeFilter(i);\" />\n {{ item.label }}\n </div>\n }\n </div>\n }\n\n <input #searchBox type=\"search\" placeholder=\"{{ placeholder }}\" class=\"flex-shrink-1 border-0 form-control ps-0 py-2\" [class.adv]=\"config.mode === 'advanced'\" (keyup.enter)=\"add();\" />\n</div>\n\n@if (config.mode === 'advanced') {\n <ion-icon name=\"filter\" class=\"position-absolute fs-4 cursor-pointer\" id=\"filter-{{ id }}\" />\n <ion-icon name=\"close\" class=\"position-absolute fs-4 cursor-pointer\" (click)=\"clear();\" />\n \n <ion-popover trigger=\"filter-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n <div class=\"d-flex flex-column filter overflow-auto\">\n <div class=\"flex-shrink-0 border-bottom p-1 pe-4 d-flex align-items-center\">\n <ion-buttons>\n <ion-button size=\"small\" (click)=\"close()\">\n <ion-icon slot=\"icon-only\" name=\"close\" />\n </ion-button>\n </ion-buttons>\n \n <div class=\"fs-5 fw-medium\">Advanced Filter</div>\n </div>\n \n <form class=\"flex-grow-1 overflow-auto px-4\" [formGroup]=\"form\">\n @for (c of config.fields; track c.key) {\n @switch (c.type) {\n @case ('number') {\n <up-input type=\"number\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n\n @case ('checkbox') {\n <div class=\"my-4\">\n <ion-checkbox labelPlacement=\"end\" formControlName=\"{{ c.key }}\">{{ c.label }}</ion-checkbox>\n </div>\n }\n\n @case ('date-range') {\n <div class=\"d-flex gap-3 my-4\">\n <up-date class=\"flex-grow-1\" name=\"filter-from\" label=\"{{ c.label[0] }}\" formControlName=\"{{ c.key[0] }}\" />\n <up-date class=\"flex-grow-1\" name=\"filter-to\" label=\"{{ c.label[1] }}\" formControlName=\"{{ c.key[1] }}\" />\n </div>\n }\n\n @case ('select') { \n <up-select \n class=\"my-4\"\n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [items]=\"c.options!\"\n [multiple]=\"c.multiple || false\"\n /> \n }\n\n @case ('searchable-select') { \n <up-searchable-select \n class=\"my-4\" \n appendTo=\"body\" \n label=\"{{ c.label }}\" \n formControlName=\"{{ c.key }}\" \n [queryFunc]=\"c.getOptions!\" \n [initialItems]=\"c.options! || initialItems.get(c.key.toString())!\"\n [multiple]=\"c.multiple || false\"\n (onChange)=\"applyInitialItems($event, c.key.toString())\"\n /> \n }\n \n @default { \n <up-input type=\"text\" autocomplete=\"off\" class=\"my-4\" label=\"{{ c.label }}\" formControlName=\"{{ c.key }}\" /> \n }\n }\n }\n </form>\n \n <div class=\"flex-shrink-0 py-3 px-4 border-top d-flex gap-3\">\n <ion-button class=\"flex-grow-1\" color=\"secondary\" (click)=\"form.reset();\">Reset</ion-button>\n <ion-button class=\"flex-grow-1\" color=\"primary\" (click)=\"search();\">Search</ion-button>\n </div>\n </div>\n </ng-template>\n </ion-popover> \n}\n", styles: ["ion-icon{top:7px}ion-icon[name=close]{right:16px}ion-icon[name=search]{left:14px}ion-icon[name=filter]{right:48px}ion-popover{--width: 80%;--max-width: 450px}.adv{padding-right:60px}.fs-5,ion-icon{color:#616161}.tag-container{max-width:45%}@media (max-width: 576px){.tag-container{max-width:35%}}.tag-container::-webkit-scrollbar{height:0px}.tag-item{color:#ed6b26;background-color:#fef3ee}.tag-item ion-icon{border-right:1px solid #fbd1be}input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{-webkit-appearance:none}\n"] }]
2669
2695
  }], ctorParameters: () => [{ type: undefined, decorators: [{
2670
2696
  type: Attribute,
2671
2697
  args: ['placeholder']
@@ -3825,6 +3851,22 @@ const headerInterceptor = (request, next) => {
3825
3851
  },
3826
3852
  }));
3827
3853
  };
3854
+ class HeaderInterceptor {
3855
+ intercept(request, next) {
3856
+ return next.handle(request.clone({
3857
+ headers: request.headers,
3858
+ setHeaders: {
3859
+ authorization: AuthService.authToken,
3860
+ project: 'unipin'
3861
+ }
3862
+ }));
3863
+ }
3864
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
3865
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderInterceptor }); }
3866
+ }
3867
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderInterceptor, decorators: [{
3868
+ type: Injectable
3869
+ }] });
3828
3870
 
3829
3871
  const refreshTokenInterceptor = (request, next) => {
3830
3872
  const authService = inject(AuthService);
@@ -3856,6 +3898,45 @@ const refreshTokenInterceptor = (request, next) => {
3856
3898
  }));
3857
3899
  }));
3858
3900
  };
3901
+ class RefreshTokenInterceptor {
3902
+ constructor(authService) {
3903
+ this.authService = authService;
3904
+ }
3905
+ intercept(request, next) {
3906
+ return next.handle(request).pipe(catchError(({ error: { errors } }) => {
3907
+ if (errors[0].extensions.code === 'USER_INVALID_TOKEN') {
3908
+ return this.authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(switchMap(({ data }) => {
3909
+ const { accessToken, refreshToken } = data.authMsRefreshAccessToken;
3910
+ AuthService.authToken = accessToken;
3911
+ AuthService.refreshToken = refreshToken;
3912
+ localStorage.setItem('authToken', accessToken);
3913
+ localStorage.setItem('refreshToken', refreshToken);
3914
+ return next.handle(request.clone({
3915
+ setHeaders: {
3916
+ authorization: accessToken
3917
+ }
3918
+ }));
3919
+ }), catchError(() => {
3920
+ localStorage.removeItem('roles');
3921
+ localStorage.removeItem('userGuid');
3922
+ localStorage.removeItem('authToken');
3923
+ localStorage.removeItem('refreshToken');
3924
+ AuthService.authToken = '';
3925
+ AuthService.refreshToken = '';
3926
+ this.authService.user = undefined;
3927
+ location.href = '/auth/login';
3928
+ return throwError(() => errors[0]);
3929
+ }));
3930
+ }
3931
+ return throwError(() => errors[0]);
3932
+ }));
3933
+ }
3934
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RefreshTokenInterceptor, deps: [{ token: AuthService }], target: i0.ɵɵFactoryTarget.Injectable }); }
3935
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RefreshTokenInterceptor }); }
3936
+ }
3937
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RefreshTokenInterceptor, decorators: [{
3938
+ type: Injectable
3939
+ }], ctorParameters: () => [{ type: AuthService }] });
3859
3940
 
3860
- export { APPROVAL_ENTITIES, AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormCountryInputComponent, FormCurrencyInputComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, InfiniteScrollComponent, InfiniteScrollDirective, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionService, ProfileService, TabContentComponent, TabGroupComponent, UnauthorizedPage, bootstrap, formatCapitalize, generateContrastColor, getFormErrorMessage, headerInterceptor, provideAppletConfig, provideApprovalEntities, provideLoadingConfig, refreshTokenInterceptor };
3941
+ export { APPROVAL_ENTITIES, AppletContainerComponent, ApprovalDetailComponent, ApprovalListComponent, AuditDetailComponent, AuditListComponent, AuthGuard, AuthResolver, AuthService, ButtonGroupComponent, ButtonLoadingComponent, ColumnContainerComponent, ColumnHeaderContainerComponent, CountryService, CurrencyService, FilterComponent, FormCountryInputComponent, FormCurrencyInputComponent, FormDateComponent, FormImagePickerComponent, FormInputComponent, FormNumberComponent, FormPasswordComponent, FormSearchableSelectComponent, FormSelectComponent, FormTextareaComponent, GridPaginationComponent, GridService, GridSnapshotComponent, HeaderInterceptor, InfiniteScrollComponent, InfiniteScrollDirective, ListPaginationContainerComponent, ListSnapshotContainerComponent, LoadingPage, ModalContainerComponent, PermissionDirective, PermissionGuard, PermissionService, ProfileService, RefreshTokenInterceptor, TabContentComponent, TabGroupComponent, UnauthorizedPage, bootstrap, formatCapitalize, generateContrastColor, getFormErrorMessage, headerInterceptor, provideAppletConfig, provideApprovalEntities, provideLoadingConfig, refreshTokenInterceptor };
3861
3942
  //# sourceMappingURL=unipin-angular-applet.mjs.map