@unipin/angular-applet 18.6.10 → 18.6.12
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/esm2022/lib/components/buttons/group/btn-group.component.mjs +8 -10
- package/esm2022/lib/components/containers/column-container/column-container.component.mjs +3 -3
- package/esm2022/lib/components/filter/filter.component.mjs +3 -3
- package/esm2022/lib/components/filter/interfaces/filter-field.interface.mjs +1 -1
- package/esm2022/lib/components/forms/date/form-date.component.mjs +8 -4
- package/fesm2022/unipin-angular-applet.mjs +18 -16
- package/fesm2022/unipin-angular-applet.mjs.map +1 -1
- package/lib/components/buttons/group/btn-group.component.d.ts +3 -3
- package/lib/components/filter/interfaces/filter-field.interface.d.ts +1 -0
- package/lib/components/forms/date/form-date.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, Attribute, HostBinding, enableProdMode, NgZone, Injectable, Inject, Directive, inject, NgModule, HostListener, Pipe, ContentChild, output, contentChildren } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, input, Attribute, HostBinding, enableProdMode, NgZone, Injectable, Inject, Directive, inject, NgModule, HostListener, Pipe, ContentChild, output, contentChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@ionic/angular';
|
|
4
4
|
import { IonButton, IonicModule } from '@ionic/angular';
|
|
5
5
|
import * as i1$2 from '@angular/router';
|
|
@@ -71,6 +71,7 @@ class ButtonGroupComponent {
|
|
|
71
71
|
constructor(id, popoverCtrl) {
|
|
72
72
|
this.id = id;
|
|
73
73
|
this.popoverCtrl = popoverCtrl;
|
|
74
|
+
this.config = input.required();
|
|
74
75
|
this.isHidden = false;
|
|
75
76
|
this.activeIndex = 0;
|
|
76
77
|
}
|
|
@@ -81,28 +82,25 @@ class ButtonGroupComponent {
|
|
|
81
82
|
}
|
|
82
83
|
}
|
|
83
84
|
clickBtn(b) {
|
|
84
|
-
this.config[this.activeIndex].onClick(b);
|
|
85
|
+
this.config()[this.activeIndex].onClick(b);
|
|
85
86
|
}
|
|
86
87
|
change(i) {
|
|
87
88
|
this.activeIndex = i;
|
|
88
89
|
this.popoverCtrl.dismiss();
|
|
89
90
|
}
|
|
90
91
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: 'id', attribute: true }, { token: i1.PopoverController }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
91
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonGroupComponent, isStandalone: true, selector: "up-btn-group", inputs: { config: "config" }, host: { properties: { "class.d-none": "this.isHidden" } }, usesOnChanges: true, ngImport: i0, template: "@if (config.length > 0) {\n <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"
|
|
92
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonGroupComponent, isStandalone: true, selector: "up-btn-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.d-none": "this.isHidden" } }, usesOnChanges: true, ngImport: i0, template: "@if (config().length > 0) {\n @let c = config();\n\n <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"c[activeIndex].type\" [disabled]=\"c[activeIndex].disabled\" [form]=\"c[activeIndex].form\" [color]=\"c[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n @if (c[activeIndex].icon) {\n <ion-icon class=\"me-2\" name=\"{{ c[activeIndex].icon }}\" />\n }\n {{ c[activeIndex].label }}\n </up-btn-loading>\n\n @defer (when config().length > 1) {\n @if (config().length > 1) {\n <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"c[activeIndex].color\">\n <ion-icon name=\"caret-down-outline\" />\n </ion-button>\n\n <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n @for (c of c; track $index; let i = $index) {\n <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" (click)=\"change(i);\">\n <div class=\"icon flex-shrink-0\">\n @if (i === activeIndex) {\n <ion-icon name=\"checkmark\" />\n }\n </div>\n\n <div class=\"flex-grow-1\">\n <div class=\"fw-medium\">{{ c.label }}</div>\n\n @if (c.description) {\n <div class=\"f12 pt-1\">\n {{ c.description }}\n </div>\n }\n </div>\n </div>\n }\n </ng-template>\n </ion-popover>\n }\n }\n}\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ButtonLoadingComponent, selector: "up-btn-loading", inputs: ["disabled", "form", "type", "fill", "color"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.IonButton, i1.IonIcon, i1.IonPopover]] }); }
|
|
92
93
|
}
|
|
93
94
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonGroupComponent, decorators: [{
|
|
94
95
|
type: Component,
|
|
95
|
-
args: [{ standalone: true, selector: 'up-btn-group', imports: [
|
|
96
|
+
args: [{ standalone: true, selector: 'up-btn-group', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
96
97
|
IonicModule,
|
|
97
98
|
ButtonLoadingComponent
|
|
98
|
-
], template: "@if (config.length > 0) {\n <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"
|
|
99
|
+
], template: "@if (config().length > 0) {\n @let c = config();\n\n <up-btn-loading class=\"flex-grow-1\" [class.multi]=\"config.length > 1\" [type]=\"c[activeIndex].type\" [disabled]=\"c[activeIndex].disabled\" [form]=\"c[activeIndex].form\" [color]=\"c[activeIndex].color\" (onClick)=\"clickBtn($event);\">\n @if (c[activeIndex].icon) {\n <ion-icon class=\"me-2\" name=\"{{ c[activeIndex].icon }}\" />\n }\n {{ c[activeIndex].label }}\n </up-btn-loading>\n\n @defer (when config().length > 1) {\n @if (config().length > 1) {\n <ion-button class=\"flex-shrink-0\" id=\"btn-{{ id }}\" [color]=\"c[activeIndex].color\">\n <ion-icon name=\"caret-down-outline\" />\n </ion-button>\n\n <ion-popover trigger=\"btn-{{ id }}\" triggerAction=\"click\">\n <ng-template>\n @for (c of c; track $index; let i = $index) {\n <div class=\"item px-2 py-3 cursor-pointer border-bottom d-flex gap-2\" (click)=\"change(i);\">\n <div class=\"icon flex-shrink-0\">\n @if (i === activeIndex) {\n <ion-icon name=\"checkmark\" />\n }\n </div>\n\n <div class=\"flex-grow-1\">\n <div class=\"fw-medium\">{{ c.label }}</div>\n\n @if (c.description) {\n <div class=\"f12 pt-1\">\n {{ c.description }}\n </div>\n }\n </div>\n </div>\n }\n </ng-template>\n </ion-popover>\n }\n }\n}\n", styles: [":host{display:flex}up-btn-loading.multi ::ng-deep ion-button{--border-radius: 4px 0 0 4px}ion-button::part(native){border-radius:0 4px 4px 0;border-left:1px solid rgba(255,255,255,.3)}.item:hover{color:#ed6b26;background:#fef3ee}.item ion-icon{--ionicon-stroke-width: 64px}.item .icon{width:14px}.item .f12{color:#616161}\n"] }]
|
|
99
100
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
100
101
|
type: Attribute,
|
|
101
102
|
args: ['id']
|
|
102
|
-
}] }, { type: i1.PopoverController }], propDecorators: {
|
|
103
|
-
type: Input,
|
|
104
|
-
args: [{ required: true }]
|
|
105
|
-
}], isHidden: [{
|
|
103
|
+
}] }, { type: i1.PopoverController }], propDecorators: { isHidden: [{
|
|
106
104
|
type: HostBinding,
|
|
107
105
|
args: ['class.d-none']
|
|
108
106
|
}] } });
|
|
@@ -471,7 +469,7 @@ class ColumnContainerComponent {
|
|
|
471
469
|
this.colSize = window.innerWidth <= 768 ? 100 : 50;
|
|
472
470
|
}
|
|
473
471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnContainerComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
474
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split [
|
|
472
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ColumnContainerComponent, isStandalone: true, selector: "up-column-container", host: { listeners: { "window:resize": "checkScreen($event)" }, classAttribute: "d-block h-100 w-100" }, ngImport: i0, template: "<as-split \n [gutterSize]=\"0\"\n [disabled]=\"true\" \n [useTransition]=\"true\" \n>\n @for (a of areas; track $index; let i = $index) {\n <as-split-area \n class=\"border-start\"\n [attr.order]=\"i\"\n [size]=\"colSize\" \n [visible]=\"a.visible\"\n >\n <ng-container [loadRoute]=\"a.route\" />\n </as-split-area>\n }\n</as-split>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularSplitModule }, { kind: "component", type: i2.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i2.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: LazyRouteDirective, selector: "[loadRoute]", inputs: ["loadRoute"] }] }); }
|
|
475
473
|
}
|
|
476
474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnContainerComponent, decorators: [{
|
|
477
475
|
type: Component,
|
|
@@ -480,7 +478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
480
478
|
}, imports: [
|
|
481
479
|
AngularSplitModule,
|
|
482
480
|
LazyRouteDirective
|
|
483
|
-
], template: "<as-split [
|
|
481
|
+
], template: "<as-split \n [gutterSize]=\"0\"\n [disabled]=\"true\" \n [useTransition]=\"true\" \n>\n @for (a of areas; track $index; let i = $index) {\n <as-split-area \n class=\"border-start\"\n [attr.order]=\"i\"\n [size]=\"colSize\" \n [visible]=\"a.visible\"\n >\n <ng-container [loadRoute]=\"a.route\" />\n </as-split-area>\n }\n</as-split>\n" }]
|
|
484
482
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { checkScreen: [{
|
|
485
483
|
type: HostListener,
|
|
486
484
|
args: ['window:resize', ['$event']]
|
|
@@ -649,7 +647,7 @@ class FormDateComponent {
|
|
|
649
647
|
}
|
|
650
648
|
}
|
|
651
649
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormDateComponent, deps: [{ token: 'name', attribute: true }, { token: 'placeholder', attribute: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormDateComponent, isStandalone: true, selector: "up-date", inputs: { label: "label", required: "required", disabled: "disabled", presentation: "presentation" }, host: { classAttribute: "d-block position-relative" }, providers: [
|
|
650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FormDateComponent, isStandalone: true, selector: "up-date", inputs: { label: "label", required: "required", disabled: "disabled", presentation: "presentation", minDate: "minDate", maxDate: "maxDate" }, host: { classAttribute: "d-block position-relative" }, providers: [
|
|
653
651
|
{
|
|
654
652
|
multi: true,
|
|
655
653
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -660,7 +658,7 @@ class FormDateComponent {
|
|
|
660
658
|
provide: NG_VALIDATORS,
|
|
661
659
|
useExisting: FormDateComponent
|
|
662
660
|
}
|
|
663
|
-
], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n <ng-content select=\"[icon]\" />\n <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n <ng-template>\n <ion-datetime mode=\"md\" hourCycle=\"h23\"
|
|
661
|
+
], ngImport: i0, template: "<label class=\"form-label d-flex align-items-center\">\n <ng-content select=\"[icon]\" />\n <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n <ng-template>\n <ion-datetime \n mode=\"md\" \n hourCycle=\"h23\" \n value=\"{{ localValue }}\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [showDefaultButtons]=\"true\" \n [presentation]=\"presentation\"\n (ionChange)=\"changeDate($event)\" \n />\n </ng-template>\n</ion-modal>\n\n@if (errorMsg) {\n <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "formatOptions", "highlightedDates", "hourCycle", "hourValues", "isDateEnabled", "locale", "max", "min", "minuteValues", "mode", "monthValues", "multiple", "name", "preferWheel", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "titleSelectedDatesFormatter", "value", "yearValues"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonModal, selector: "ion-modal" }, { kind: "directive", type: i1.SelectValueAccessor, selector: "ion-select, ion-radio-group, ion-segment, ion-datetime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
664
662
|
}
|
|
665
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormDateComponent, decorators: [{
|
|
666
664
|
type: Component,
|
|
@@ -680,7 +678,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
680
678
|
provide: NG_VALIDATORS,
|
|
681
679
|
useExisting: FormDateComponent
|
|
682
680
|
}
|
|
683
|
-
], template: "<label class=\"form-label d-flex align-items-center\">\n <ng-content select=\"[icon]\" />\n <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n <ng-template>\n <ion-datetime mode=\"md\" hourCycle=\"h23\"
|
|
681
|
+
], template: "<label class=\"form-label d-flex align-items-center\">\n <ng-content select=\"[icon]\" />\n <span>{{ label }}</span>\n</label>\n\n<input readonly type=\"text\" id=\"{{ name }}-date\" placeholder=\"{{ placeholder }}\" class=\"form-control cursor-pointer\" [disabled]=\"disabled\" [required]=\"required\" [value]=\"value | date:dateFormat \">\n<ion-icon name=\"calendar\" class=\"position-absolute fs-4 cursor-pointer\" />\n\n<ion-modal trigger=\"{{ name }}-date\">\n <ng-template>\n <ion-datetime \n mode=\"md\" \n hourCycle=\"h23\" \n value=\"{{ localValue }}\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [showDefaultButtons]=\"true\" \n [presentation]=\"presentation\"\n (ionChange)=\"changeDate($event)\" \n />\n </ng-template>\n</ion-modal>\n\n@if (errorMsg) {\n <label class=\"is-invalid\">{{ errorMsg }}</label>\n}\n", styles: ["ion-datetime{--background: white}ion-modal{--width: 290px;--height: auto}ion-icon{top:32px;right:16px;color:#616161}\n"] }]
|
|
684
682
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
685
683
|
type: Attribute,
|
|
686
684
|
args: ['name']
|
|
@@ -695,6 +693,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
695
693
|
type: Input
|
|
696
694
|
}], presentation: [{
|
|
697
695
|
type: Input
|
|
696
|
+
}], minDate: [{
|
|
697
|
+
type: Input
|
|
698
|
+
}], maxDate: [{
|
|
699
|
+
type: Input
|
|
698
700
|
}] } });
|
|
699
701
|
|
|
700
702
|
class FormInputComponent {
|
|
@@ -2627,7 +2629,7 @@ class FilterComponent {
|
|
|
2627
2629
|
}
|
|
2628
2630
|
}
|
|
2629
2631
|
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 }); }
|
|
2630
|
-
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\">\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 class=\"my-4\"
|
|
2632
|
+
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\">\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 }); }
|
|
2631
2633
|
}
|
|
2632
2634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
2633
2635
|
type: Component,
|
|
@@ -2640,7 +2642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2640
2642
|
ReactiveFormsModule,
|
|
2641
2643
|
FormSelectComponent,
|
|
2642
2644
|
FormSearchableSelectComponent
|
|
2643
|
-
], 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\">\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 class=\"my-4\"
|
|
2645
|
+
], 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\">\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"] }]
|
|
2644
2646
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
2645
2647
|
type: Attribute,
|
|
2646
2648
|
args: ['placeholder']
|