ngx-gccb 0.32.2 → 0.33.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-gccb.mjs +110 -76
- package/fesm2022/ngx-gccb.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-gccb.d.ts +12 -9
package/fesm2022/ngx-gccb.mjs
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
2
|
+
import * as i1 from '@angular/common';
|
|
3
|
+
import { NgClass, CommonModule } from '@angular/common';
|
|
2
4
|
import * as i0 from '@angular/core';
|
|
3
5
|
import { forwardRef, inject, ElementRef, input, output, computed, ChangeDetectionStrategy, Component, ViewContainerRef, Injector, HostListener, Directive, Renderer2, effect, HostBinding, Input, Pipe, NgZone, viewChild, EventEmitter, Output, model, Injectable, TemplateRef, contentChildren } from '@angular/core';
|
|
4
6
|
import dayjs from 'dayjs';
|
|
5
7
|
import isoWeek from 'dayjs/plugin/isoWeek';
|
|
6
|
-
import * as
|
|
8
|
+
import * as i2$1 from '@angular/cdk/a11y';
|
|
7
9
|
import { ConfigurableFocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
|
|
8
|
-
import { Overlay } from '@angular/cdk/overlay';
|
|
10
|
+
import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
|
|
9
11
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
10
12
|
import * as i2 from '@angular/forms';
|
|
11
13
|
import { UntypedFormGroup, UntypedFormControl, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
12
14
|
import { debounceTime } from 'rxjs';
|
|
13
|
-
import * as i1 from '@angular/common';
|
|
14
|
-
import { CommonModule } from '@angular/common';
|
|
15
15
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
16
16
|
import { createPopper } from '@popperjs/core';
|
|
17
17
|
|
|
@@ -52,25 +52,21 @@ class NgxButtonComponent {
|
|
|
52
52
|
this.onClick = output();
|
|
53
53
|
this.onFocus = output();
|
|
54
54
|
this.onBlur = output();
|
|
55
|
-
this.
|
|
56
|
-
const cssClasses = ['btn'];
|
|
55
|
+
this.getCssClasses = computed(() => {
|
|
56
|
+
const cssClasses = ['btn', 'flex-shrink-0'];
|
|
57
57
|
if (this.variant() === 'outline' || this.variant() === 'text') {
|
|
58
58
|
cssClasses.push(`btn-${this.variant()}-${this.color()}`);
|
|
59
59
|
}
|
|
60
60
|
else {
|
|
61
61
|
cssClasses.push(`btn-${this.color()}`);
|
|
62
62
|
}
|
|
63
|
-
// if (this.focused()) {
|
|
64
|
-
// cssClasses.push(`focus-ring-${this.color()}`);
|
|
65
|
-
// }
|
|
66
63
|
if (this.shadow()) {
|
|
67
64
|
cssClasses.push('shadow-sm');
|
|
68
65
|
}
|
|
69
66
|
cssClasses.push(`btn-${this.size() || 'sm'}`);
|
|
70
|
-
cssClasses.push('flex-shrink-0');
|
|
71
67
|
cssClasses.push(this.cssClass());
|
|
72
68
|
return cssClasses.join(' ');
|
|
73
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
69
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
74
70
|
}
|
|
75
71
|
focus() {
|
|
76
72
|
const nativeButton = this.elementRef.nativeElement.querySelector('button');
|
|
@@ -82,22 +78,33 @@ class NgxButtonComponent {
|
|
|
82
78
|
}
|
|
83
79
|
}
|
|
84
80
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
85
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxButtonComponent, isStandalone: true, selector: "ngx-button", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "d-inline-flex align-items-center" }, providers: [HOST_COMPONENT_PROVIDER], ngImport: i0, template: "<button\n\t[
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxButtonComponent, isStandalone: true, selector: "ngx-button", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "d-inline-flex align-items-center" }, providers: [HOST_COMPONENT_PROVIDER], ngImport: i0, template: "<button\n\t[ngClass]=\"getCssClasses()\"\n\t[attr.type]=\"type()\"\n\t[disabled]=\"disabled()\"\n\t(click)=\"onClick.emit($event)\"\n\t(focus)=\"onFocus.emit($event)\"\n\t(blur)=\"onBlur.emit($event)\">\n\t<ng-content />\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
86
82
|
}
|
|
87
83
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxButtonComponent, decorators: [{
|
|
88
84
|
type: Component,
|
|
89
|
-
args: [{ selector: 'ngx-button', host: { class: 'd-inline-flex align-items-center' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [HOST_COMPONENT_PROVIDER], template: "<button\n\t[
|
|
85
|
+
args: [{ selector: 'ngx-button', host: { class: 'd-inline-flex align-items-center' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [HOST_COMPONENT_PROVIDER], imports: [NgClass], template: "<button\n\t[ngClass]=\"getCssClasses()\"\n\t[attr.type]=\"type()\"\n\t[disabled]=\"disabled()\"\n\t(click)=\"onClick.emit($event)\"\n\t(focus)=\"onFocus.emit($event)\"\n\t(blur)=\"onBlur.emit($event)\">\n\t<ng-content />\n</button>\n" }]
|
|
90
86
|
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
|
|
91
87
|
|
|
92
88
|
dayjs.extend(isoWeek);
|
|
93
89
|
class CalendarComponent {
|
|
94
90
|
constructor() {
|
|
95
91
|
this.onDaySelected = output();
|
|
92
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
96
93
|
this.weekdayHeaders = [];
|
|
97
94
|
this.currentMonth = dayjs();
|
|
98
95
|
this.weeks = [];
|
|
99
96
|
this.selectedDay = null;
|
|
100
97
|
this.hoveredDay = null;
|
|
98
|
+
this.getCssClasses = computed(() => {
|
|
99
|
+
const cssClasses = [
|
|
100
|
+
'd-flex',
|
|
101
|
+
'justify-content-between',
|
|
102
|
+
'align-items-center',
|
|
103
|
+
'mb-3',
|
|
104
|
+
];
|
|
105
|
+
cssClasses.push(this.cssClass());
|
|
106
|
+
return cssClasses.join(' ');
|
|
107
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
101
108
|
}
|
|
102
109
|
ngOnInit() {
|
|
103
110
|
this.init();
|
|
@@ -142,62 +149,62 @@ class CalendarComponent {
|
|
|
142
149
|
return this.selectedDay?.isSame(day, 'day') || false;
|
|
143
150
|
}
|
|
144
151
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CalendarComponent, isStandalone: true, selector: "ngx-calendar", outputs: { onDaySelected: "onDaySelected" }, ngImport: i0, template: "<div
|
|
152
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: CalendarComponent, isStandalone: true, selector: "ngx-calendar", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDaySelected: "onDaySelected" }, ngImport: i0, template: "<div [ngClass]=\"getCssClasses()\">\n\t<ngx-button variant=\"outline\" (click)=\"previousMonth()\">\u00AB</ngx-button>\n\t<h4 class=\"m-0\">\n\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t</h4>\n\t<ngx-button variant=\"outline\" (click)=\"nextMonth()\">\u00BB</ngx-button>\n</div>\n\n<div class=\"table-responsive\">\n\t<table class=\"table table-bordered text-center\">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t@for (weekdayHeader of weekdayHeaders; track weekdayHeader) {\n\t\t\t\t\t<th>{{ weekdayHeader }}</th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t[class.bg-primary]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t[class.text-white]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isToday(day)\"\n\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"], dependencies: [{ kind: "component", type: NgxButtonComponent, selector: "ngx-button", inputs: ["cssClass", "type", "color", "size", "variant", "disabled", "shadow"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
146
153
|
}
|
|
147
154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
148
155
|
type: Component,
|
|
149
|
-
args: [{ selector: 'ngx-calendar', imports: [NgxButtonComponent], template: "<div
|
|
150
|
-
}], propDecorators: { onDaySelected: [{ type: i0.Output, args: ["onDaySelected"] }] } });
|
|
156
|
+
args: [{ selector: 'ngx-calendar', imports: [NgxButtonComponent, NgClass], template: "<div [ngClass]=\"getCssClasses()\">\n\t<ngx-button variant=\"outline\" (click)=\"previousMonth()\">\u00AB</ngx-button>\n\t<h4 class=\"m-0\">\n\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t</h4>\n\t<ngx-button variant=\"outline\" (click)=\"nextMonth()\">\u00BB</ngx-button>\n</div>\n\n<div class=\"table-responsive\">\n\t<table class=\"table table-bordered text-center\">\n\t\t<thead>\n\t\t\t<tr>\n\t\t\t\t@for (weekdayHeader of weekdayHeaders; track weekdayHeader) {\n\t\t\t\t\t<th>{{ weekdayHeader }}</th>\n\t\t\t\t}\n\t\t\t</tr>\n\t\t</thead>\n\t\t<tbody>\n\t\t\t@for (week of weeks; track $index) {\n\t\t\t\t<tr>\n\t\t\t\t\t@for (day of week; track day.date()) {\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\tclass=\"day\"\n\t\t\t\t\t\t\t[class.bg-light]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t[class.bg-primary]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t[class.text-white]=\"isSelected(day) || day === hoveredDay\"\n\t\t\t\t\t\t\t[class.bg-dark-subtle]=\"isToday(day)\"\n\t\t\t\t\t\t\t(click)=\"onSelectDay(day)\"\n\t\t\t\t\t\t\t(mouseover)=\"hoveredDay = day\"\n\t\t\t\t\t\t\t(mouseout)=\"hoveredDay = null\">\n\t\t\t\t\t\t\t{{ day.date() }}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t}\n\t\t\t\t</tr>\n\t\t\t}\n\t\t</tbody>\n\t</table>\n</div>\n", styles: [".day:hover{cursor:pointer}\n"] }]
|
|
157
|
+
}], propDecorators: { onDaySelected: [{ type: i0.Output, args: ["onDaySelected"] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
|
|
151
158
|
|
|
152
159
|
class NgxCardBodyComponent {
|
|
153
160
|
constructor() {
|
|
154
161
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
155
|
-
this.
|
|
162
|
+
this.getCssClasses = computed(() => {
|
|
156
163
|
const cssClasses = ['card-body'];
|
|
157
164
|
cssClasses.push(this.cssClass());
|
|
158
165
|
return cssClasses.join(' ');
|
|
159
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
166
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
160
167
|
}
|
|
161
168
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardBodyComponent, isStandalone: true, selector: "ngx-card-body", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [
|
|
169
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardBodyComponent, isStandalone: true, selector: "ngx-card-body", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"getCssClasses()\"><ng-content /></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
163
170
|
}
|
|
164
171
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardBodyComponent, decorators: [{
|
|
165
172
|
type: Component,
|
|
166
|
-
args: [{ selector: 'ngx-card-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [
|
|
173
|
+
args: [{ selector: 'ngx-card-body', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div [ngClass]=\"getCssClasses()\"><ng-content /></div>\n" }]
|
|
167
174
|
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
|
|
168
175
|
|
|
169
176
|
class NgxCardTitleComponent {
|
|
170
177
|
constructor() {
|
|
171
178
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
172
|
-
this.
|
|
179
|
+
this.getCssClasses = computed(() => {
|
|
173
180
|
const cssClasses = ['card-title'];
|
|
174
181
|
cssClasses.push(this.cssClass());
|
|
175
182
|
return cssClasses.join(' ');
|
|
176
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
183
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
177
184
|
}
|
|
178
185
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
179
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardTitleComponent, isStandalone: true, selector: "ngx-card-title", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h5 [
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardTitleComponent, isStandalone: true, selector: "ngx-card-title", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h5 [ngClass]=\"getCssClasses()\"><ng-content /></h5>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
180
187
|
}
|
|
181
188
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardTitleComponent, decorators: [{
|
|
182
189
|
type: Component,
|
|
183
|
-
args: [{ selector: 'ngx-card-title', changeDetection: ChangeDetectionStrategy.OnPush, template: "<h5 [
|
|
190
|
+
args: [{ selector: 'ngx-card-title', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<h5 [ngClass]=\"getCssClasses()\"><ng-content /></h5>\n" }]
|
|
184
191
|
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
|
|
185
192
|
|
|
186
193
|
class NgxCardComponent {
|
|
187
194
|
constructor() {
|
|
188
195
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
189
|
-
this.
|
|
196
|
+
this.getCssClasses = computed(() => {
|
|
190
197
|
const cssClasses = ['card'];
|
|
191
198
|
cssClasses.push(this.cssClass());
|
|
192
199
|
return cssClasses.join(' ');
|
|
193
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
200
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
194
201
|
}
|
|
195
202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardComponent, isStandalone: true, selector: "ngx-card", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [
|
|
203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxCardComponent, isStandalone: true, selector: "ngx-card", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [ngClass]=\"getCssClasses()\"><ng-content /></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
197
204
|
}
|
|
198
205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxCardComponent, decorators: [{
|
|
199
206
|
type: Component,
|
|
200
|
-
args: [{ selector: 'ngx-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [
|
|
207
|
+
args: [{ selector: 'ngx-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<div [ngClass]=\"getCssClasses()\"><ng-content /></div>\n" }]
|
|
201
208
|
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
|
|
202
209
|
|
|
203
210
|
class NgxDropdownDirective {
|
|
@@ -206,6 +213,7 @@ class NgxDropdownDirective {
|
|
|
206
213
|
this.viewContainerRef = inject(ViewContainerRef);
|
|
207
214
|
this.injector = inject(Injector);
|
|
208
215
|
this.overlay = inject(Overlay);
|
|
216
|
+
this.overlayPositionBuilder = inject(OverlayPositionBuilder);
|
|
209
217
|
this.focusTrapFactory = inject(ConfigurableFocusTrapFactory);
|
|
210
218
|
this.hostComponent = inject(FocusableHost, {
|
|
211
219
|
optional: true,
|
|
@@ -254,6 +262,26 @@ class NgxDropdownDirective {
|
|
|
254
262
|
});
|
|
255
263
|
const portal = new TemplatePortal(this.ngxDropdown(), this.viewContainerRef, null, this.createChildInjector());
|
|
256
264
|
this.overlayRef.attach(portal);
|
|
265
|
+
if (this.placement() === 'bottom-end') {
|
|
266
|
+
requestAnimationFrame(() => {
|
|
267
|
+
const pane = this.overlayRef.overlayElement;
|
|
268
|
+
const inner = pane.querySelector('.ngx-dropdown-root') ??
|
|
269
|
+
pane.firstElementChild;
|
|
270
|
+
const measuringEl = inner ?? pane;
|
|
271
|
+
const bb = measuringEl?.getBoundingClientRect();
|
|
272
|
+
const width = bb?.width ?? measuringEl?.offsetWidth ?? 0;
|
|
273
|
+
this.overlayRef.updatePositionStrategy(this.overlayPositionBuilder.flexibleConnectedTo(this.elementRef).withPositions([
|
|
274
|
+
{
|
|
275
|
+
originX: 'end',
|
|
276
|
+
originY: 'bottom',
|
|
277
|
+
overlayX: 'end',
|
|
278
|
+
overlayY: 'top',
|
|
279
|
+
offsetY: 3,
|
|
280
|
+
offsetX: -width,
|
|
281
|
+
},
|
|
282
|
+
]));
|
|
283
|
+
});
|
|
284
|
+
}
|
|
257
285
|
if (this.overlayRef.overlayElement) {
|
|
258
286
|
this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
|
|
259
287
|
void this.focusTrap.focusInitialElementWhenReady();
|
|
@@ -282,23 +310,25 @@ class NgxDropdownDirective {
|
|
|
282
310
|
});
|
|
283
311
|
}
|
|
284
312
|
createPositionStrategy() {
|
|
285
|
-
const positions = [
|
|
286
|
-
|
|
287
|
-
{
|
|
313
|
+
const positions = [];
|
|
314
|
+
if (this.placement() === 'bottom-start') {
|
|
315
|
+
positions.push({
|
|
288
316
|
originX: 'start',
|
|
289
317
|
originY: 'bottom',
|
|
290
318
|
overlayX: 'start',
|
|
291
319
|
overlayY: 'top',
|
|
292
320
|
offsetY: 3,
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
|
|
321
|
+
});
|
|
322
|
+
}
|
|
323
|
+
else if (this.placement() === 'bottom-end') {
|
|
324
|
+
positions.push({
|
|
296
325
|
originX: 'end',
|
|
297
|
-
originY: '
|
|
326
|
+
originY: 'bottom',
|
|
298
327
|
overlayX: 'end',
|
|
299
328
|
overlayY: 'bottom',
|
|
300
|
-
|
|
301
|
-
|
|
329
|
+
offsetY: 3,
|
|
330
|
+
});
|
|
331
|
+
}
|
|
302
332
|
// Ankerpunkt ist der Host-Element
|
|
303
333
|
return this.overlay
|
|
304
334
|
.position()
|
|
@@ -308,7 +338,7 @@ class NgxDropdownDirective {
|
|
|
308
338
|
.withPush(true);
|
|
309
339
|
}
|
|
310
340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxDropdownDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
311
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: NgxDropdownDirective, isStandalone: true, selector: "[ngxDropdown]", inputs: { ngxDropdown: { classPropertyName: "ngxDropdown", publicName: "ngxDropdown", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngxDropdownItemSelected: "ngxDropdownItemSelected" }, host: { listeners: { "click": "toggleDropdown()", "document:keydown.escape": "handleKeyboardEvent()" } }, exportAs: ["ngxDropdown"], ngImport: i0 }); }
|
|
341
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.3", type: NgxDropdownDirective, isStandalone: true, selector: "[ngxDropdown]", inputs: { ngxDropdown: { classPropertyName: "ngxDropdown", publicName: "ngxDropdown", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ngxDropdownItemSelected: "ngxDropdownItemSelected" }, host: { listeners: { "keydown.enter": "toggleDropdown()", "click": "toggleDropdown()", "document:keydown.escape": "handleKeyboardEvent()" } }, exportAs: ["ngxDropdown"], ngImport: i0 }); }
|
|
312
342
|
}
|
|
313
343
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxDropdownDirective, decorators: [{
|
|
314
344
|
type: Directive,
|
|
@@ -317,6 +347,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
317
347
|
exportAs: 'ngxDropdown',
|
|
318
348
|
}]
|
|
319
349
|
}], propDecorators: { ngxDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxDropdown", required: true }] }], ngxDropdownItemSelected: [{ type: i0.Output, args: ["ngxDropdownItemSelected"] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], toggleDropdown: [{
|
|
350
|
+
type: HostListener,
|
|
351
|
+
args: ['keydown.enter']
|
|
352
|
+
}, {
|
|
320
353
|
type: HostListener,
|
|
321
354
|
args: ['click']
|
|
322
355
|
}], handleKeyboardEvent: [{
|
|
@@ -641,11 +674,11 @@ class NgxFormComponent {
|
|
|
641
674
|
constructor() {
|
|
642
675
|
this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
|
|
643
676
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
644
|
-
this.
|
|
677
|
+
this.getCssClasses = computed(() => {
|
|
645
678
|
const cssClasses = [''];
|
|
646
679
|
cssClasses.push(this.cssClass());
|
|
647
680
|
return cssClasses.join(' ');
|
|
648
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
681
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
649
682
|
this.formGroupDirective = viewChild(NgxFormGroupDirective, ...(ngDevMode ? [{ debugName: "formGroupDirective" }] : []));
|
|
650
683
|
this.onValidated = output();
|
|
651
684
|
this.keepOriginalOrder = () => 0;
|
|
@@ -661,7 +694,7 @@ class NgxFormComponent {
|
|
|
661
694
|
this.formGroupDirective()?.resetForm();
|
|
662
695
|
}
|
|
663
696
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValidated: "onValidated" }, viewQueries: [{ propertyName: "formGroupDirective", first: true, predicate: NgxFormGroupDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form
|
|
697
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValidated: "onValidated" }, viewQueries: [{ propertyName: "formGroupDirective", first: true, predicate: NgxFormGroupDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form\n\t[ngClass]=\"getCssClasses()\"\n\tngxFormGroup\n\t#formGroupDirective=\"ngxFormGroup\"\n\t[formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls\n\t\t\t\t\t\t| keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t@if (control.value | appIsFormControl; as typedControl) {\n\t\t<div class=\"mb-3\">\n\t\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ typedControl.customConfig?.label }}\n\t\t</label> -->\n\n\t\t\t@switch (typedControl.config?.type) {\n\t\t\t\t@case ('textarea') {\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[rows]=\"typedControl.config?.textareaConfig?.rows || 4\">\n\t\t\t\t\t</textarea>\n\t\t\t\t}\n\n\t\t\t\t@case ('select') {\n\t\t\t\t\t<select\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t\t@for (\n\t\t\t\t\t\t\toption of typedControl.config?.selectConfig?.options;\n\t\t\t\t\t\t\ttrack option.value\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t}\n\t\t\t\t\t</select>\n\t\t\t\t}\n\n\t\t\t\t@case ('checkbox') {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\n\t\t\t\t@default {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\t[type]=\"typedControl.config?.type || 'text'\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[autocomplete]=\"\n\t\t\t\t\t\t\ttypedControl.config?.type === 'password' ? 'new-password' : undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t\t{{ typedControl.config?.label }}\n\t\t\t</label>\n\n\t\t\t@if (typedControl.config?.hint) {\n\t\t\t\t<small class=\"text-muted\">\n\t\t\t\t\t{{ typedControl.config?.hint }}\n\t\t\t\t</small>\n\t\t\t}\n\n\t\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgxFormGroupDirective, selector: "[ngxFormGroup]", inputs: ["formGroup", "validateOnChange"], exportAs: ["ngxFormGroup"] }, { kind: "directive", type: NgxFormLabelDirective, selector: "label[ngxFormLabel]" }, { kind: "component", type: NgxFormErrorsComponent, selector: "ngx-form-errors", inputs: ["isDirty", "errors"] }, { kind: "directive", type: NgxFormInputDirective, selector: "[ngxFormInput]", inputs: ["ngxFormInput", "formControl", "id", "name", "type", "placeholder", "isFloatingLabel"] }, { kind: "directive", type: NgxAutofocusDirective, selector: "[ngxAutofocus]", inputs: ["ngxAutofocus"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: AppIsFormControlPipe, name: "appIsFormControl" }, { kind: "pipe", type: NgxIsFormGroupPipe, name: "ngxIsFormGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
665
698
|
}
|
|
666
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxFormComponent, decorators: [{
|
|
667
700
|
type: Component,
|
|
@@ -675,7 +708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
675
708
|
AppIsFormControlPipe,
|
|
676
709
|
NgxIsFormGroupPipe,
|
|
677
710
|
NgxAutofocusDirective,
|
|
678
|
-
|
|
711
|
+
NgClass,
|
|
712
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form\n\t[ngClass]=\"getCssClasses()\"\n\tngxFormGroup\n\t#formGroupDirective=\"ngxFormGroup\"\n\t[formGroup]=\"formGroup()\">\n\t@for (control of formGroup().controls | keyvalue: keepOriginalOrder; track $index) {\n\t\t@if (isFormControl(control.value)) {\n\t\t\t<ng-container *ngTemplateOutlet=\"formField; context: { control: control }\" />\n\t\t} @else {\n\t\t\t<div ngxFormGroup [formGroup]=\"control.value | ngxIsFormGroup\" class=\"row\">\n\t\t\t\t@for (\n\t\t\t\t\tsubControl of (control.value | ngxIsFormGroup).controls\n\t\t\t\t\t\t| keyvalue: keepOriginalOrder;\n\t\t\t\t\ttrack $index\n\t\t\t\t) {\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t\t\t<ng-container\n\t\t\t\t\t\t\t*ngTemplateOutlet=\"formField; context: { control: subControl }\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t}\n</form>\n\n<ng-template #formField let-control=\"control\">\n\t@if (control.value | appIsFormControl; as typedControl) {\n\t\t<div class=\"mb-3\">\n\t\t\t<!-- <label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t{{ typedControl.customConfig?.label }}\n\t\t</label> -->\n\n\t\t\t@switch (typedControl.config?.type) {\n\t\t\t\t@case ('textarea') {\n\t\t\t\t\t<textarea\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"textarea\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[rows]=\"typedControl.config?.textareaConfig?.rows || 4\">\n\t\t\t\t\t</textarea>\n\t\t\t\t}\n\n\t\t\t\t@case ('select') {\n\t\t\t\t\t<select\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"select\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\">\n\t\t\t\t\t\t<option value=\"\" disabled selected>Select your option</option>\n\t\t\t\t\t\t@for (\n\t\t\t\t\t\t\toption of typedControl.config?.selectConfig?.options;\n\t\t\t\t\t\t\ttrack option.value\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t<option [value]=\"option.value\" [disabled]=\"option.disabled\">\n\t\t\t\t\t\t\t\t{{ option.label }}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t}\n\t\t\t\t\t</select>\n\t\t\t\t}\n\n\t\t\t\t@case ('checkbox') {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\n\t\t\t\t@default {\n\t\t\t\t\t<input\n\t\t\t\t\t\tngxFormInput\n\t\t\t\t\t\t[type]=\"typedControl.config?.type || 'text'\"\n\t\t\t\t\t\t[ngxAutofocus]=\"typedControl.config?.autofocus || false\"\n\t\t\t\t\t\t[id]=\"control.key\"\n\t\t\t\t\t\t[placeholder]=\"typedControl.config?.placeholder\"\n\t\t\t\t\t\t[formControl]=\"typedControl\"\n\t\t\t\t\t\t[autocomplete]=\"\n\t\t\t\t\t\t\ttypedControl.config?.type === 'password' ? 'new-password' : undefined\n\t\t\t\t\t\t\"\n\t\t\t\t\t\t(keydown.enter)=\"validate()\" />\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t<label ngxFormLabel [attr.for]=\"control.key\">\n\t\t\t\t{{ typedControl.config?.label }}\n\t\t\t</label>\n\n\t\t\t@if (typedControl.config?.hint) {\n\t\t\t\t<small class=\"text-muted\">\n\t\t\t\t\t{{ typedControl.config?.hint }}\n\t\t\t\t</small>\n\t\t\t}\n\n\t\t\t<ngx-form-errors [errors]=\"control.value.errors\" [isDirty]=\"control.value.dirty\" />\n\t\t</div>\n\t}\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
679
713
|
}], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], formGroupDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxFormGroupDirective), { isSignal: true }] }], onValidated: [{ type: i0.Output, args: ["onValidated"] }] } });
|
|
680
714
|
|
|
681
715
|
class NgxIconComponent {
|
|
@@ -748,7 +782,7 @@ class NgxIconButtonComponent {
|
|
|
748
782
|
this.onClick = output();
|
|
749
783
|
this.onFocus = output();
|
|
750
784
|
this.onBlur = output();
|
|
751
|
-
this.
|
|
785
|
+
this.getCssClasses = computed(() => {
|
|
752
786
|
const cssClasses = ['btn', 'icon-btn', `icon-btn-${this.color()}`];
|
|
753
787
|
if (this.shadow()) {
|
|
754
788
|
cssClasses.push('shadow-sm');
|
|
@@ -756,14 +790,14 @@ class NgxIconButtonComponent {
|
|
|
756
790
|
cssClasses.push(`btn-${this.size() || 'sm'}`);
|
|
757
791
|
cssClasses.push('flex-shrink-0');
|
|
758
792
|
return cssClasses.join(' ');
|
|
759
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
793
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
760
794
|
}
|
|
761
795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
762
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxIconButtonComponent, isStandalone: true, selector: "ngx-icon-button", inputs: { svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "d-inline-flex align-items-center" }, ngImport: i0, template: "<button\n\t[
|
|
796
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxIconButtonComponent, isStandalone: true, selector: "ngx-icon-button", inputs: { svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: true, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur" }, host: { classAttribute: "d-inline-flex align-items-center" }, ngImport: i0, template: "<button\n\t[ngClass]=\"getCssClasses()\"\n\t[attr.type]=\"type()\"\n\t[disabled]=\"disabled()\"\n\t(click)=\"onClick.emit($event)\"\n\t(focus)=\"onFocus.emit($event)\"\n\t(blur)=\"onBlur.emit($event)\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n", styles: [".icon-btn{display:flex;align-items:center;justify-content:center;min-width:40px;width:40px;height:40px;border-radius:100%;background-color:transparent;border-color:transparent}.icon-btn svg{max-width:20px;max-height:20px}\n"], dependencies: [{ kind: "component", type: NgxIconComponent, selector: "ngx-icon", inputs: ["svg", "size", "title", "ariaHidden", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
763
797
|
}
|
|
764
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxIconButtonComponent, decorators: [{
|
|
765
799
|
type: Component,
|
|
766
|
-
args: [{ selector: 'ngx-icon-button', host: { class: 'd-inline-flex align-items-center' }, imports: [NgxIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n\t[
|
|
800
|
+
args: [{ selector: 'ngx-icon-button', host: { class: 'd-inline-flex align-items-center' }, imports: [NgxIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n\t[ngClass]=\"getCssClasses()\"\n\t[attr.type]=\"type()\"\n\t[disabled]=\"disabled()\"\n\t(click)=\"onClick.emit($event)\"\n\t(focus)=\"onFocus.emit($event)\"\n\t(blur)=\"onBlur.emit($event)\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n", styles: [".icon-btn{display:flex;align-items:center;justify-content:center;min-width:40px;width:40px;height:40px;border-radius:100%;background-color:transparent;border-color:transparent}.icon-btn svg{max-width:20px;max-height:20px}\n"] }]
|
|
767
801
|
}], propDecorators: { svg: [{ type: i0.Input, args: [{ isSignal: true, alias: "svg", required: true }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
|
|
768
802
|
|
|
769
803
|
class NgxListGroupItemAvatarDirective {
|
|
@@ -858,13 +892,13 @@ class NgxLoadingIndicatorComponent {
|
|
|
858
892
|
this.icon = input(LibIcons.faSpinner, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
859
893
|
this.spin = model(false, ...(ngDevMode ? [{ debugName: "spin" }] : []));
|
|
860
894
|
this.float = model(false, ...(ngDevMode ? [{ debugName: "float" }] : []));
|
|
861
|
-
this.
|
|
895
|
+
this.getCssClasses = computed(() => {
|
|
862
896
|
const cssClasses = [''];
|
|
863
897
|
if (this.spin()) {
|
|
864
898
|
cssClasses.push(`spin`);
|
|
865
899
|
}
|
|
866
900
|
return cssClasses.join(' ');
|
|
867
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
901
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
868
902
|
}
|
|
869
903
|
get hostClass() {
|
|
870
904
|
const cssClasses = [''];
|
|
@@ -874,11 +908,11 @@ class NgxLoadingIndicatorComponent {
|
|
|
874
908
|
return cssClasses.join(' ');
|
|
875
909
|
}
|
|
876
910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
877
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxLoadingIndicatorComponent, isStandalone: true, selector: "ngx-loading-indicator", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spin: "spinChange", float: "floatChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ngx-icon [
|
|
911
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxLoadingIndicatorComponent, isStandalone: true, selector: "ngx-loading-indicator", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, float: { classPropertyName: "float", publicName: "float", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spin: "spinChange", float: "floatChange" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ngx-icon [ngClass]=\"getCssClasses()\" [svg]=\"icon()\" />\n", styles: [":host{color:#495057}:host.float{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "component", type: NgxIconComponent, selector: "ngx-icon", inputs: ["svg", "size", "title", "ariaHidden", "class"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
878
912
|
}
|
|
879
913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxLoadingIndicatorComponent, decorators: [{
|
|
880
914
|
type: Component,
|
|
881
|
-
args: [{ selector: 'ngx-loading-indicator', imports: [NgxIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-icon [
|
|
915
|
+
args: [{ selector: 'ngx-loading-indicator', imports: [NgxIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-icon [ngClass]=\"getCssClasses()\" [svg]=\"icon()\" />\n", styles: [":host{color:#495057}:host.float{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
|
|
882
916
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], spin: [{ type: i0.Input, args: [{ isSignal: true, alias: "spin", required: false }] }, { type: i0.Output, args: ["spinChange"] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }, { type: i0.Output, args: ["floatChange"] }], hostClass: [{
|
|
883
917
|
type: HostBinding,
|
|
884
918
|
args: ['class']
|
|
@@ -929,29 +963,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
929
963
|
}]
|
|
930
964
|
}] });
|
|
931
965
|
|
|
932
|
-
class NgxColDirective {
|
|
933
|
-
constructor() {
|
|
934
|
-
this.el = inject(ElementRef);
|
|
935
|
-
this.span = 'col';
|
|
936
|
-
}
|
|
937
|
-
set col(val) {
|
|
938
|
-
if (val) {
|
|
939
|
-
this.span = val;
|
|
940
|
-
}
|
|
941
|
-
}
|
|
942
|
-
ngAfterViewInit() {
|
|
943
|
-
this.el.nativeElement.classList.add(this.span);
|
|
944
|
-
}
|
|
945
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
946
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: NgxColDirective, isStandalone: true, selector: "[ngxCol]", inputs: { col: "col" }, ngImport: i0 }); }
|
|
947
|
-
}
|
|
948
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxColDirective, decorators: [{
|
|
949
|
-
type: Directive,
|
|
950
|
-
args: [{ selector: '[ngxCol]' }]
|
|
951
|
-
}], propDecorators: { col: [{
|
|
952
|
-
type: Input
|
|
953
|
-
}] } });
|
|
954
|
-
|
|
955
966
|
class NgxTooltipDirective {
|
|
956
967
|
constructor() {
|
|
957
968
|
this.elementRef = inject(ElementRef);
|
|
@@ -1205,11 +1216,11 @@ class NgxModalComponent {
|
|
|
1205
1216
|
this.onClose.emit();
|
|
1206
1217
|
}
|
|
1207
1218
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NgxModalComponent, isStandalone: true, selector: "ngx-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent()" } }, ngImport: i0, template: "<
|
|
1219
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NgxModalComponent, isStandalone: true, selector: "ngx-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, centered: { classPropertyName: "centered", publicName: "centered", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { listeners: { "document:keydown.escape": "handleKeyboardEvent()" } }, ngImport: i0, template: "<section\n\tclass=\"modal d-flex justify-content-center align-items-center\"\n\tcdkTrapFocus\n\t[cdkTrapFocusAutoCapture]=\"true\"\n\ttabindex=\"0\"\n\trole=\"dialog\"\n\taria-modal=\"true\"\n\taria-labelledby=\"modal-title\"\n\taria-describedby=\"modal-body\">\n\t<div class=\"modal-dialog w-100\" [ngClass]=\"dialogCssClasses()\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header justify-content-between\">\n\t\t\t\t<h5 id=\"modal-title\" class=\"modal-title\">{{ title() }}</h5>\n\n\t\t\t\t@if (showClose()) {\n\t\t\t\t\t<ngx-icon-button\n\t\t\t\t\t\tcolor=\"secondary\"\n\t\t\t\t\t\tngxTooltip=\"close\"\n\t\t\t\t\t\t[ngxTooltipZIndex]=\"1055\"\n\t\t\t\t\t\tcdkFocusInitial\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t(onClick)=\"handleClickClose()\"\n\t\t\t\t\t\t[svg]=\"LibIcons.faXmark\" />\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div id=\"modal-body\" class=\"modal-body\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<ng-content select=\"[footer]\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n<div class=\"modal-backdrop fade show\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgxTooltipDirective, selector: "[ngxTooltip]", inputs: ["ngxTooltip", "ngxTooltipClass", "ngxTooltipPlacement", "ngxTooltipIsShow", "ngxTooltipXOffset", "ngxTooltipYOffset", "ngxTooltipDelay", "ngxTooltipTriggers", "ngxTooltipSize", "ngxTooltipZIndex", "ngxTooltipAdaptivePosition", "ngxTooltipFallbackPlacements"], exportAs: ["ngxTooltip"] }, { kind: "component", type: NgxIconButtonComponent, selector: "ngx-icon-button", inputs: ["svg", "type", "color", "size", "variant", "disabled", "shadow"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1209
1220
|
}
|
|
1210
1221
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxModalComponent, decorators: [{
|
|
1211
1222
|
type: Component,
|
|
1212
|
-
args: [{ selector: 'ngx-modal', imports: [CommonModule, NgxTooltipDirective, NgxIconButtonComponent,
|
|
1223
|
+
args: [{ selector: 'ngx-modal', imports: [CommonModule, NgxTooltipDirective, NgxIconButtonComponent, A11yModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n\tclass=\"modal d-flex justify-content-center align-items-center\"\n\tcdkTrapFocus\n\t[cdkTrapFocusAutoCapture]=\"true\"\n\ttabindex=\"0\"\n\trole=\"dialog\"\n\taria-modal=\"true\"\n\taria-labelledby=\"modal-title\"\n\taria-describedby=\"modal-body\">\n\t<div class=\"modal-dialog w-100\" [ngClass]=\"dialogCssClasses()\">\n\t\t<div class=\"modal-content\">\n\t\t\t<div class=\"modal-header justify-content-between\">\n\t\t\t\t<h5 id=\"modal-title\" class=\"modal-title\">{{ title() }}</h5>\n\n\t\t\t\t@if (showClose()) {\n\t\t\t\t\t<ngx-icon-button\n\t\t\t\t\t\tcolor=\"secondary\"\n\t\t\t\t\t\tngxTooltip=\"close\"\n\t\t\t\t\t\t[ngxTooltipZIndex]=\"1055\"\n\t\t\t\t\t\tcdkFocusInitial\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t(onClick)=\"handleClickClose()\"\n\t\t\t\t\t\t[svg]=\"LibIcons.faXmark\" />\n\t\t\t\t}\n\t\t\t</div>\n\n\t\t\t<div id=\"modal-body\" class=\"modal-body\">\n\t\t\t\t<ng-content />\n\t\t\t</div>\n\n\t\t\t<div class=\"modal-footer\">\n\t\t\t\t<ng-content select=\"[footer]\" />\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>\n<div class=\"modal-backdrop fade show\"></div>\n" }]
|
|
1213
1224
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], fullScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullScreen", required: false }] }], scrollable: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollable", required: false }] }], centered: [{ type: i0.Input, args: [{ isSignal: true, alias: "centered", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onClose: [{ type: i0.Output, args: ["onClose"] }], handleKeyboardEvent: [{
|
|
1214
1225
|
type: HostListener,
|
|
1215
1226
|
args: ['document:keydown.escape']
|
|
@@ -1273,7 +1284,7 @@ class NgxOffCanvasComponent {
|
|
|
1273
1284
|
this.onClose.emit();
|
|
1274
1285
|
}
|
|
1275
1286
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxOffCanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxOffCanvasComponent, isStandalone: true, selector: "ngx-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "attr.aria-labelledby": "this.ariaLabelledBy" } }, ngImport: i0, template: "<div\n\tclass=\"offcanvas offcanvas-start show\"\n\ttabindex=\"-1\"\n\tid=\"offcanvas\"\n\tstyle=\"z-index: 1051\"\n\tcdkTrapFocus\n\t[cdkTrapFocusAutoCapture]=\"true\"\n\t(keydown)=\"handleKeyDown($event)\">\n\t<div class=\"offcanvas-header justify-content-between\">\n\t\t<h5 class=\"offcanvas-title\" id=\"ngx-offcanvas-title\">{{ title() }}</h5>\n\t\t<ngx-icon-button\n\t\t\tcolor=\"secondary\"\n\t\t\tclass=\"ml-auto\"\n\t\t\t(onClick)=\"handleClickClose()\"\n\t\t\t[svg]=\"LibIcons.faXmark\"\n\t\t\tngxTooltip=\"close menu\"\n\t\t\t[ngxTooltipZIndex]=\"1052\" />\n\t</div>\n\t<div class=\"overflow-y-scroll\">\n\t\t<ng-content />\n\t</div>\n</div>\n\n<div class=\"modal-backdrop fade show\" (click)=\"handleClickClose()\"></div>\n", styles: [":host{z-index:9999;display:block;outline:none}\n"], dependencies: [{ kind: "component", type: NgxIconButtonComponent, selector: "ngx-icon-button", inputs: ["svg", "type", "color", "size", "variant", "disabled", "shadow"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgxTooltipDirective, selector: "[ngxTooltip]", inputs: ["ngxTooltip", "ngxTooltipClass", "ngxTooltipPlacement", "ngxTooltipIsShow", "ngxTooltipXOffset", "ngxTooltipYOffset", "ngxTooltipDelay", "ngxTooltipTriggers", "ngxTooltipSize", "ngxTooltipZIndex", "ngxTooltipAdaptivePosition", "ngxTooltipFallbackPlacements"], exportAs: ["ngxTooltip"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type:
|
|
1287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: NgxOffCanvasComponent, isStandalone: true, selector: "ngx-off-canvas", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-modal": "this.ariaModal", "attr.aria-labelledby": "this.ariaLabelledBy" } }, ngImport: i0, template: "<div\n\tclass=\"offcanvas offcanvas-start show\"\n\ttabindex=\"-1\"\n\tid=\"offcanvas\"\n\tstyle=\"z-index: 1051\"\n\tcdkTrapFocus\n\t[cdkTrapFocusAutoCapture]=\"true\"\n\t(keydown)=\"handleKeyDown($event)\">\n\t<div class=\"offcanvas-header justify-content-between\">\n\t\t<h5 class=\"offcanvas-title\" id=\"ngx-offcanvas-title\">{{ title() }}</h5>\n\t\t<ngx-icon-button\n\t\t\tcolor=\"secondary\"\n\t\t\tclass=\"ml-auto\"\n\t\t\t(onClick)=\"handleClickClose()\"\n\t\t\t[svg]=\"LibIcons.faXmark\"\n\t\t\tngxTooltip=\"close menu\"\n\t\t\t[ngxTooltipZIndex]=\"1052\" />\n\t</div>\n\t<div class=\"overflow-y-scroll\">\n\t\t<ng-content />\n\t</div>\n</div>\n\n<div class=\"modal-backdrop fade show\" (click)=\"handleClickClose()\"></div>\n", styles: [":host{z-index:9999;display:block;outline:none}\n"], dependencies: [{ kind: "component", type: NgxIconButtonComponent, selector: "ngx-icon-button", inputs: ["svg", "type", "color", "size", "variant", "disabled", "shadow"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgxTooltipDirective, selector: "[ngxTooltip]", inputs: ["ngxTooltip", "ngxTooltipClass", "ngxTooltipPlacement", "ngxTooltipIsShow", "ngxTooltipXOffset", "ngxTooltipYOffset", "ngxTooltipDelay", "ngxTooltipTriggers", "ngxTooltipSize", "ngxTooltipZIndex", "ngxTooltipAdaptivePosition", "ngxTooltipFallbackPlacements"], exportAs: ["ngxTooltip"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1277
1288
|
}
|
|
1278
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxOffCanvasComponent, decorators: [{
|
|
1279
1290
|
type: Component,
|
|
@@ -1454,6 +1465,29 @@ function NgxLog(methodName, logType = LogType.log, logArgs = false) {
|
|
|
1454
1465
|
};
|
|
1455
1466
|
}
|
|
1456
1467
|
|
|
1468
|
+
class NgxColDirective {
|
|
1469
|
+
constructor() {
|
|
1470
|
+
this.el = inject(ElementRef);
|
|
1471
|
+
this.span = 'col';
|
|
1472
|
+
}
|
|
1473
|
+
set col(val) {
|
|
1474
|
+
if (val) {
|
|
1475
|
+
this.span = val;
|
|
1476
|
+
}
|
|
1477
|
+
}
|
|
1478
|
+
ngAfterViewInit() {
|
|
1479
|
+
this.el.nativeElement.classList.add(this.span);
|
|
1480
|
+
}
|
|
1481
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxColDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1482
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: NgxColDirective, isStandalone: true, selector: "[ngxCol]", inputs: { col: "col" }, ngImport: i0 }); }
|
|
1483
|
+
}
|
|
1484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxColDirective, decorators: [{
|
|
1485
|
+
type: Directive,
|
|
1486
|
+
args: [{ selector: '[ngxCol]' }]
|
|
1487
|
+
}], propDecorators: { col: [{
|
|
1488
|
+
type: Input
|
|
1489
|
+
}] } });
|
|
1490
|
+
|
|
1457
1491
|
class NgxImageService {
|
|
1458
1492
|
async compress(imageBase64, quality = 0.8, fileType = 'image/jpeg') {
|
|
1459
1493
|
const img = await this.load(imageBase64);
|