ngx-gccb 0.33.0 → 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 +66 -56
- package/fesm2022/ngx-gccb.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-gccb.d.ts +10 -8
package/fesm2022/ngx-gccb.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
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';
|
|
@@ -10,8 +12,6 @@ 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 {
|
|
@@ -255,24 +262,26 @@ class NgxDropdownDirective {
|
|
|
255
262
|
});
|
|
256
263
|
const portal = new TemplatePortal(this.ngxDropdown(), this.viewContainerRef, null, this.createChildInjector());
|
|
257
264
|
this.overlayRef.attach(portal);
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
pane.
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
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
|
+
}
|
|
276
285
|
if (this.overlayRef.overlayElement) {
|
|
277
286
|
this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
|
|
278
287
|
void this.focusTrap.focusInitialElementWhenReady();
|
|
@@ -665,11 +674,11 @@ class NgxFormComponent {
|
|
|
665
674
|
constructor() {
|
|
666
675
|
this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
|
|
667
676
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
668
|
-
this.
|
|
677
|
+
this.getCssClasses = computed(() => {
|
|
669
678
|
const cssClasses = [''];
|
|
670
679
|
cssClasses.push(this.cssClass());
|
|
671
680
|
return cssClasses.join(' ');
|
|
672
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
681
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
673
682
|
this.formGroupDirective = viewChild(NgxFormGroupDirective, ...(ngDevMode ? [{ debugName: "formGroupDirective" }] : []));
|
|
674
683
|
this.onValidated = output();
|
|
675
684
|
this.keepOriginalOrder = () => 0;
|
|
@@ -685,7 +694,7 @@ class NgxFormComponent {
|
|
|
685
694
|
this.formGroupDirective()?.resetForm();
|
|
686
695
|
}
|
|
687
696
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
688
|
-
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 }); }
|
|
689
698
|
}
|
|
690
699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxFormComponent, decorators: [{
|
|
691
700
|
type: Component,
|
|
@@ -699,7 +708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
699
708
|
AppIsFormControlPipe,
|
|
700
709
|
NgxIsFormGroupPipe,
|
|
701
710
|
NgxAutofocusDirective,
|
|
702
|
-
|
|
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"] }]
|
|
703
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"] }] } });
|
|
704
714
|
|
|
705
715
|
class NgxIconComponent {
|
|
@@ -772,7 +782,7 @@ class NgxIconButtonComponent {
|
|
|
772
782
|
this.onClick = output();
|
|
773
783
|
this.onFocus = output();
|
|
774
784
|
this.onBlur = output();
|
|
775
|
-
this.
|
|
785
|
+
this.getCssClasses = computed(() => {
|
|
776
786
|
const cssClasses = ['btn', 'icon-btn', `icon-btn-${this.color()}`];
|
|
777
787
|
if (this.shadow()) {
|
|
778
788
|
cssClasses.push('shadow-sm');
|
|
@@ -780,14 +790,14 @@ class NgxIconButtonComponent {
|
|
|
780
790
|
cssClasses.push(`btn-${this.size() || 'sm'}`);
|
|
781
791
|
cssClasses.push('flex-shrink-0');
|
|
782
792
|
return cssClasses.join(' ');
|
|
783
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
793
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
784
794
|
}
|
|
785
795
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
786
|
-
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 }); }
|
|
787
797
|
}
|
|
788
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxIconButtonComponent, decorators: [{
|
|
789
799
|
type: Component,
|
|
790
|
-
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"] }]
|
|
791
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"] }] } });
|
|
792
802
|
|
|
793
803
|
class NgxListGroupItemAvatarDirective {
|
|
@@ -882,13 +892,13 @@ class NgxLoadingIndicatorComponent {
|
|
|
882
892
|
this.icon = input(LibIcons.faSpinner, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
883
893
|
this.spin = model(false, ...(ngDevMode ? [{ debugName: "spin" }] : []));
|
|
884
894
|
this.float = model(false, ...(ngDevMode ? [{ debugName: "float" }] : []));
|
|
885
|
-
this.
|
|
895
|
+
this.getCssClasses = computed(() => {
|
|
886
896
|
const cssClasses = [''];
|
|
887
897
|
if (this.spin()) {
|
|
888
898
|
cssClasses.push(`spin`);
|
|
889
899
|
}
|
|
890
900
|
return cssClasses.join(' ');
|
|
891
|
-
}, ...(ngDevMode ? [{ debugName: "
|
|
901
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
892
902
|
}
|
|
893
903
|
get hostClass() {
|
|
894
904
|
const cssClasses = [''];
|
|
@@ -898,11 +908,11 @@ class NgxLoadingIndicatorComponent {
|
|
|
898
908
|
return cssClasses.join(' ');
|
|
899
909
|
}
|
|
900
910
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxLoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
901
|
-
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 }); }
|
|
902
912
|
}
|
|
903
913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NgxLoadingIndicatorComponent, decorators: [{
|
|
904
914
|
type: Component,
|
|
905
|
-
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"] }]
|
|
906
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: [{
|
|
907
917
|
type: HostBinding,
|
|
908
918
|
args: ['class']
|