ngx-gccb 0.39.2 → 0.40.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/README.md +1 -1
- package/assets/styles.scss +45 -30
- package/fesm2022/ngx-gccb.mjs +148 -140
- package/fesm2022/ngx-gccb.mjs.map +1 -1
- package/package.json +1 -1
- package/types/ngx-gccb.d.ts +6 -4
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ ngx-gccb interactive showcase with code snippets [link](https://ngx-gccb.netlify
|
|
|
8
8
|
|
|
9
9
|
## Stackblitz Demo
|
|
10
10
|
|
|
11
|
-
- Angular v21 and ngx-gccb [link](https://stackblitz.com/edit/ng-
|
|
11
|
+
- Angular v21 and ngx-gccb [link](https://stackblitz.com/edit/ng-21-ngx-gccb)
|
|
12
12
|
|
|
13
13
|
## Get started
|
|
14
14
|
|
package/assets/styles.scss
CHANGED
|
@@ -1,37 +1,53 @@
|
|
|
1
1
|
@import 'bootstrap/scss/functions';
|
|
2
|
-
@import 'bootstrap/scss/variables';
|
|
3
2
|
|
|
4
|
-
$primary
|
|
5
|
-
|
|
6
|
-
$
|
|
7
|
-
$
|
|
8
|
-
$
|
|
9
|
-
$
|
|
10
|
-
$
|
|
11
|
-
|
|
3
|
+
$primary: #4053bb;
|
|
4
|
+
|
|
5
|
+
$font-family-base: 'Inter', sans-serif;
|
|
6
|
+
$font-weight-base: 400 !default;
|
|
7
|
+
$font-size-base: 1rem; // default
|
|
8
|
+
$enable-responsive-font-sizes: false;
|
|
9
|
+
$line-height-base: 1.7;
|
|
10
|
+
|
|
11
|
+
$grid-gutter-width: 1rem;
|
|
12
|
+
|
|
13
|
+
$focus-ring-width: 0.185rem; // Default ist .25rem
|
|
14
|
+
// $focus-ring-opacity: 0.15;
|
|
15
|
+
|
|
16
|
+
$enable-gradients: false;
|
|
17
|
+
|
|
18
|
+
$box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.125);
|
|
19
|
+
$box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
|
|
20
|
+
$box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
|
|
21
|
+
|
|
22
|
+
$card-border-color: transparent;
|
|
23
|
+
|
|
24
|
+
$offcanvas-horizontal-width: 320px;
|
|
25
|
+
|
|
26
|
+
$list-group-border-color: transparent;
|
|
27
|
+
$list-group-action-hover-bg: var(--bs-tertiary-bg);
|
|
28
|
+
$list-group-active-bg: transparent;
|
|
29
|
+
$list-group-active-border-color: transparent;
|
|
30
|
+
$list-group-action-hover-color: var(--bs-emphasis-color);
|
|
31
|
+
$list-group-active-color: $primary;
|
|
32
|
+
|
|
33
|
+
$nav-pills-link-active-bg: $primary;
|
|
34
|
+
|
|
12
35
|
// $btn-border-width: 2px;
|
|
13
36
|
|
|
14
|
-
|
|
15
|
-
--primary-hover: #{$primary-hover};
|
|
16
|
-
--secondary-hover: #{$secondary-hover};
|
|
17
|
-
--info-hover: #{$info-hover};
|
|
18
|
-
--warning-hover: #{$warning-hover};
|
|
19
|
-
--danger-hover: #{$danger-hover};
|
|
20
|
-
--success-hover: #{$success-hover};
|
|
21
|
-
}
|
|
37
|
+
@import 'bootstrap/scss/variables';
|
|
22
38
|
|
|
23
39
|
@each $color, $value in $theme-colors {
|
|
24
40
|
.btn-ghost-#{$color} {
|
|
25
41
|
@extend .btn-outline-#{$color};
|
|
26
42
|
|
|
27
|
-
--bs-btn-border-color: transparent;
|
|
43
|
+
--bs-btn-border-color: transparent !important;
|
|
28
44
|
|
|
29
|
-
--bs-btn-hover-border-color: transparent;
|
|
30
|
-
--bs-btn-active-border-color: transparent;
|
|
31
|
-
--bs-btn-disabled-border-color: transparent;
|
|
45
|
+
--bs-btn-hover-border-color: transparent !important;
|
|
46
|
+
--bs-btn-active-border-color: transparent !important;
|
|
47
|
+
--bs-btn-disabled-border-color: transparent !important;
|
|
32
48
|
|
|
33
|
-
--bs-btn-hover-bg: rgba(var(--bs-#{$color}-rgb), 0.
|
|
34
|
-
--bs-btn-active-bg: rgba(var(--bs-#{$color}-rgb), 0.
|
|
49
|
+
--bs-btn-hover-bg: rgba(var(--bs-#{$color}-rgb), 0.2) !important;
|
|
50
|
+
--bs-btn-active-bg: rgba(var(--bs-#{$color}-rgb), 0.4) !important;
|
|
35
51
|
}
|
|
36
52
|
}
|
|
37
53
|
|
|
@@ -53,12 +69,6 @@ $dark-hover: darken($dark, 20%);
|
|
|
53
69
|
}
|
|
54
70
|
}
|
|
55
71
|
|
|
56
|
-
.focus-active {
|
|
57
|
-
z-index: 10;
|
|
58
|
-
box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
|
|
59
|
-
var(--bs-focus-ring-width) var(--bs-focus-ring-color);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
72
|
.list-group-item-avatar {
|
|
63
73
|
min-width: 24px;
|
|
64
74
|
max-width: 24px;
|
|
@@ -97,7 +107,6 @@ $dark-hover: darken($dark, 20%);
|
|
|
97
107
|
}
|
|
98
108
|
&.dropdown-item.active,
|
|
99
109
|
&.dropdown-item:active {
|
|
100
|
-
color: var(--secondary-hover);
|
|
101
110
|
background-color: rgba(0, 0, 0, 0.04) !important;
|
|
102
111
|
}
|
|
103
112
|
}
|
|
@@ -186,3 +195,9 @@ p {
|
|
|
186
195
|
.border-transparent {
|
|
187
196
|
border-color: transparent;
|
|
188
197
|
}
|
|
198
|
+
|
|
199
|
+
a:focus-visible,
|
|
200
|
+
li:focus-visible {
|
|
201
|
+
outline: 0.185rem solid var(--bs-primary);
|
|
202
|
+
outline-offset: 2px;
|
|
203
|
+
}
|
package/fesm2022/ngx-gccb.mjs
CHANGED
|
@@ -2,16 +2,16 @@ import { trigger, transition, style, animate } from '@angular/animations';
|
|
|
2
2
|
import * as i1 from '@angular/common';
|
|
3
3
|
import { NgClass, CommonModule } from '@angular/common';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { forwardRef, inject, ElementRef, input, output, computed, ChangeDetectionStrategy, Component, Renderer2, ViewContainerRef, Injector, HostListener, Directive, effect,
|
|
5
|
+
import { forwardRef, inject, ElementRef, input, output, computed, ChangeDetectionStrategy, Component, HostBinding, Renderer2, ViewContainerRef, Injector, HostListener, Directive, effect, Input, Pipe, NgZone, viewChild, EventEmitter, Output, model, Injectable, ApplicationRef, TemplateRef, contentChildren } from '@angular/core';
|
|
6
6
|
import dayjs from 'dayjs';
|
|
7
7
|
import isoWeek from 'dayjs/plugin/isoWeek';
|
|
8
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
9
|
import * as i2$1 from '@angular/cdk/a11y';
|
|
9
10
|
import { ConfigurableFocusTrapFactory, A11yModule } from '@angular/cdk/a11y';
|
|
10
11
|
import { createPopper } from '@popperjs/core';
|
|
11
12
|
import * as i2 from '@angular/forms';
|
|
12
13
|
import { UntypedFormGroup, UntypedFormControl, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
13
14
|
import { debounceTime } from 'rxjs';
|
|
14
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
15
15
|
|
|
16
16
|
const NgxFadeRightAnimation = trigger('ngxFadeRightAnimation', [
|
|
17
17
|
transition(':enter', [
|
|
@@ -91,9 +91,142 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
91
91
|
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" }]
|
|
92
92
|
}], 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"] }] } });
|
|
93
93
|
|
|
94
|
+
const LibIcons = {
|
|
95
|
+
faXmark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>',
|
|
96
|
+
faSpinner: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M272 112C272 85.5 293.5 64 320 64C346.5 64 368 85.5 368 112C368 138.5 346.5 160 320 160C293.5 160 272 138.5 272 112zM272 528C272 501.5 293.5 480 320 480C346.5 480 368 501.5 368 528C368 554.5 346.5 576 320 576C293.5 576 272 554.5 272 528zM112 272C138.5 272 160 293.5 160 320C160 346.5 138.5 368 112 368C85.5 368 64 346.5 64 320C64 293.5 85.5 272 112 272zM480 320C480 293.5 501.5 272 528 272C554.5 272 576 293.5 576 320C576 346.5 554.5 368 528 368C501.5 368 480 346.5 480 320zM139 433.1C157.8 414.3 188.1 414.3 206.9 433.1C225.7 451.9 225.7 482.2 206.9 501C188.1 519.8 157.8 519.8 139 501C120.2 482.2 120.2 451.9 139 433.1zM139 139C157.8 120.2 188.1 120.2 206.9 139C225.7 157.8 225.7 188.1 206.9 206.9C188.1 225.7 157.8 225.7 139 206.9C120.2 188.1 120.2 157.8 139 139zM501 433.1C519.8 451.9 519.8 482.2 501 501C482.2 519.8 451.9 519.8 433.1 501C414.3 482.2 414.3 451.9 433.1 433.1C451.9 414.3 482.2 414.3 501 433.1z"/></svg>',
|
|
97
|
+
faChevronRight: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>',
|
|
98
|
+
faChevronLeft: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M169.4 297.4C156.9 309.9 156.9 330.2 169.4 342.7L361.4 534.7C373.9 547.2 394.2 547.2 406.7 534.7C419.2 522.2 419.2 501.9 406.7 489.4L237.3 320L406.6 150.6C419.1 138.1 419.1 117.8 406.6 105.3C394.1 92.8 373.8 92.8 361.3 105.3L169.3 297.3z"/></svg>',
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
class NgxIconComponent {
|
|
102
|
+
constructor() {
|
|
103
|
+
this.sanitizer = inject(DomSanitizer);
|
|
104
|
+
this.svg = input.required(...(ngDevMode ? [{ debugName: "svg" }] : []));
|
|
105
|
+
this.size = input('1.25em', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
106
|
+
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
107
|
+
this.ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
|
|
108
|
+
this.cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
|
|
109
|
+
this.svgHtml = computed(() => {
|
|
110
|
+
return this.svg() ? this.sanitizer.bypassSecurityTrustHtml(this.fixFill(this.svg())) : '';
|
|
111
|
+
}, ...(ngDevMode ? [{ debugName: "svgHtml" }] : []));
|
|
112
|
+
}
|
|
113
|
+
get hostSize() {
|
|
114
|
+
const size = this.size();
|
|
115
|
+
return typeof size === 'number' ? `${size}px` : (size ?? '1.25em');
|
|
116
|
+
}
|
|
117
|
+
get hostClass() {
|
|
118
|
+
return this.cssClass() ?? null;
|
|
119
|
+
}
|
|
120
|
+
fixFill(svg) {
|
|
121
|
+
if (!svg) {
|
|
122
|
+
return '';
|
|
123
|
+
}
|
|
124
|
+
if (/^<svg[^>]*fill=/i.test(svg)) {
|
|
125
|
+
return svg.replace(/^<svg([^>]*)fill="[^"]*"/i, '<svg$1fill="currentColor"');
|
|
126
|
+
}
|
|
127
|
+
return svg.replace(/^<svg/i, '<svg fill="currentColor"');
|
|
128
|
+
}
|
|
129
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgxIconComponent, isStandalone: true, selector: "ngx-icon", inputs: { svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ngx-icon-size": "this.hostSize", "class": "this.hostClass" } }, ngImport: i0, template: `
|
|
131
|
+
<span
|
|
132
|
+
class="ngx-icon"
|
|
133
|
+
[attr.aria-hidden]="ariaHidden() ? 'true' : null"
|
|
134
|
+
[attr.role]="ariaHidden() ? null : 'img'"
|
|
135
|
+
[attr.title]="title() || null"
|
|
136
|
+
[innerHTML]="svgHtml()">
|
|
137
|
+
</span>
|
|
138
|
+
`, isInline: true, styles: [":host{display:inline-flex;line-height:0;vertical-align:middle}.ngx-icon{display:inline-flex;width:var(--ngx-icon-size, 1.5em);height:var(--ngx-icon-size, 1.5em)}.ngx-icon svg{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
139
|
+
}
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconComponent, decorators: [{
|
|
141
|
+
type: Component,
|
|
142
|
+
args: [{ selector: 'ngx-icon', standalone: true, imports: [CommonModule], template: `
|
|
143
|
+
<span
|
|
144
|
+
class="ngx-icon"
|
|
145
|
+
[attr.aria-hidden]="ariaHidden() ? 'true' : null"
|
|
146
|
+
[attr.role]="ariaHidden() ? null : 'img'"
|
|
147
|
+
[attr.title]="title() || null"
|
|
148
|
+
[innerHTML]="svgHtml()">
|
|
149
|
+
</span>
|
|
150
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;line-height:0;vertical-align:middle}.ngx-icon{display:inline-flex;width:var(--ngx-icon-size, 1.5em);height:var(--ngx-icon-size, 1.5em)}.ngx-icon svg{width:100%;height:100%;display:block}\n"] }]
|
|
151
|
+
}], propDecorators: { svg: [{ type: i0.Input, args: [{ isSignal: true, alias: "svg", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], hostSize: [{
|
|
152
|
+
type: HostBinding,
|
|
153
|
+
args: ['style.--ngx-icon-size']
|
|
154
|
+
}], hostClass: [{
|
|
155
|
+
type: HostBinding,
|
|
156
|
+
args: ['class']
|
|
157
|
+
}] } });
|
|
158
|
+
|
|
159
|
+
class NgxIconButtonComponent {
|
|
160
|
+
constructor() {
|
|
161
|
+
this.elementRef = inject(ElementRef);
|
|
162
|
+
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
163
|
+
this.svg = input.required(...(ngDevMode ? [{ debugName: "svg" }] : []));
|
|
164
|
+
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
165
|
+
this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
166
|
+
this.size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
167
|
+
this.variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
168
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
169
|
+
this.shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : []));
|
|
170
|
+
this.onClick = output();
|
|
171
|
+
this.onFocus = output();
|
|
172
|
+
this.onBlur = output();
|
|
173
|
+
this.getCssClasses = computed(() => {
|
|
174
|
+
const cssClasses = [
|
|
175
|
+
'btn',
|
|
176
|
+
'rounded-circle',
|
|
177
|
+
'p-0',
|
|
178
|
+
'd-flex',
|
|
179
|
+
'align-items-center',
|
|
180
|
+
'justify-content-center',
|
|
181
|
+
];
|
|
182
|
+
if (this.variant() !== 'contained') {
|
|
183
|
+
cssClasses.push(`btn-${this.variant()}-${this.color()}`);
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
cssClasses.push(`btn-${this.color()}`);
|
|
187
|
+
}
|
|
188
|
+
cssClasses.push(`btn-${this.size()}`);
|
|
189
|
+
cssClasses.push('flex-shrink-0');
|
|
190
|
+
if (this.shadow()) {
|
|
191
|
+
cssClasses.push('shadow-sm');
|
|
192
|
+
}
|
|
193
|
+
if (this.cssClass()) {
|
|
194
|
+
cssClasses.push(this.cssClass());
|
|
195
|
+
}
|
|
196
|
+
return cssClasses.join(' ');
|
|
197
|
+
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
198
|
+
}
|
|
199
|
+
focus() {
|
|
200
|
+
const nativeButton = this.elementRef.nativeElement.querySelector('button');
|
|
201
|
+
if (nativeButton) {
|
|
202
|
+
nativeButton.focus();
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
this.elementRef.nativeElement.focus();
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgxIconButtonComponent, isStandalone: true, selector: "ngx-icon-button", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, 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" }, providers: [
|
|
210
|
+
{
|
|
211
|
+
provide: FocusableHost,
|
|
212
|
+
useExisting: forwardRef(() => NgxIconButtonComponent),
|
|
213
|
+
},
|
|
214
|
+
], 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\tstyle=\"width: 40px; height: 40px\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n", dependencies: [{ kind: "component", type: NgxIconComponent, selector: "ngx-icon", inputs: ["svg", "size", "title", "ariaHidden", "cssClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
215
|
+
}
|
|
216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconButtonComponent, decorators: [{
|
|
217
|
+
type: Component,
|
|
218
|
+
args: [{ selector: 'ngx-icon-button', host: { class: 'd-inline-flex align-items-center' }, imports: [NgxIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
219
|
+
{
|
|
220
|
+
provide: FocusableHost,
|
|
221
|
+
useExisting: forwardRef(() => NgxIconButtonComponent),
|
|
222
|
+
},
|
|
223
|
+
], 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\tstyle=\"width: 40px; height: 40px\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n" }]
|
|
224
|
+
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], 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"] }] } });
|
|
225
|
+
|
|
94
226
|
dayjs.extend(isoWeek);
|
|
95
227
|
class CalendarComponent {
|
|
96
228
|
constructor() {
|
|
229
|
+
this.LibIcons = LibIcons;
|
|
97
230
|
this.onDaySelected = output();
|
|
98
231
|
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
99
232
|
this.weekdayHeaders = [];
|
|
@@ -155,11 +288,11 @@ class CalendarComponent {
|
|
|
155
288
|
return this.selectedDay?.isSame(day, 'day') || false;
|
|
156
289
|
}
|
|
157
290
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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
|
|
291
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", 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-icon-button\n\t\tcolor=\"secondary\"\n\t\tvariant=\"ghost\"\n\t\t[svg]=\"LibIcons.faChevronLeft\"\n\t\t(onClick)=\"previousMonth()\" />\n\t<h4 class=\"m-0\">\n\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t</h4>\n\t<ngx-icon-button\n\t\tcolor=\"secondary\"\n\t\tvariant=\"ghost\"\n\t\t(onClick)=\"nextMonth()\"\n\t\t[svg]=\"LibIcons.faChevronRight\" />\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-body-tertiary]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t[class.bg-info-subtle]=\"\n\t\t\t\t\t\t\t\tisToday(day) && !(isSelected(day) || day === hoveredDay)\n\t\t\t\t\t\t\t\"\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(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: NgxIconButtonComponent, selector: "ngx-icon-button", inputs: ["cssClass", "svg", "type", "color", "size", "variant", "disabled", "shadow"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
159
292
|
}
|
|
160
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CalendarComponent, decorators: [{
|
|
161
294
|
type: Component,
|
|
162
|
-
args: [{ selector: 'ngx-calendar', imports: [
|
|
295
|
+
args: [{ selector: 'ngx-calendar', imports: [NgxIconButtonComponent, NgClass], template: "<div [ngClass]=\"getCssClasses()\">\n\t<ngx-icon-button\n\t\tcolor=\"secondary\"\n\t\tvariant=\"ghost\"\n\t\t[svg]=\"LibIcons.faChevronLeft\"\n\t\t(onClick)=\"previousMonth()\" />\n\t<h4 class=\"m-0\">\n\t\t{{ currentMonth.format('MMMM YYYY') }}\n\t</h4>\n\t<ngx-icon-button\n\t\tcolor=\"secondary\"\n\t\tvariant=\"ghost\"\n\t\t(onClick)=\"nextMonth()\"\n\t\t[svg]=\"LibIcons.faChevronRight\" />\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-body-tertiary]=\"!isCurrentMonth(day)\"\n\t\t\t\t\t\t\t[class.bg-info-subtle]=\"\n\t\t\t\t\t\t\t\tisToday(day) && !(isSelected(day) || day === hoveredDay)\n\t\t\t\t\t\t\t\"\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(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"] }]
|
|
163
296
|
}], propDecorators: { onDaySelected: [{ type: i0.Output, args: ["onDaySelected"] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }] } });
|
|
164
297
|
|
|
165
298
|
class NgxCardBodyComponent {
|
|
@@ -715,131 +848,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
715
848
|
], 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"] }]
|
|
716
849
|
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], formGroupDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgxFormGroupDirective), { isSignal: true }] }], onValidated: [{ type: i0.Output, args: ["onValidated"] }] } });
|
|
717
850
|
|
|
718
|
-
class NgxIconComponent {
|
|
719
|
-
constructor() {
|
|
720
|
-
this.sanitizer = inject(DomSanitizer);
|
|
721
|
-
this.svg = input.required(...(ngDevMode ? [{ debugName: "svg" }] : []));
|
|
722
|
-
this.size = input('1.25em', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
723
|
-
this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
|
|
724
|
-
this.ariaHidden = input(true, ...(ngDevMode ? [{ debugName: "ariaHidden" }] : []));
|
|
725
|
-
this.cssClass = input(...(ngDevMode ? [undefined, { debugName: "cssClass" }] : []));
|
|
726
|
-
this.svgHtml = computed(() => {
|
|
727
|
-
return this.svg() ? this.sanitizer.bypassSecurityTrustHtml(this.fixFill(this.svg())) : '';
|
|
728
|
-
}, ...(ngDevMode ? [{ debugName: "svgHtml" }] : []));
|
|
729
|
-
}
|
|
730
|
-
get hostSize() {
|
|
731
|
-
const size = this.size();
|
|
732
|
-
return typeof size === 'number' ? `${size}px` : (size ?? '1.25em');
|
|
733
|
-
}
|
|
734
|
-
get hostClass() {
|
|
735
|
-
return this.cssClass() ?? null;
|
|
736
|
-
}
|
|
737
|
-
fixFill(svg) {
|
|
738
|
-
if (!svg) {
|
|
739
|
-
return '';
|
|
740
|
-
}
|
|
741
|
-
if (/^<svg[^>]*fill=/i.test(svg)) {
|
|
742
|
-
return svg.replace(/^<svg([^>]*)fill="[^"]*"/i, '<svg$1fill="currentColor"');
|
|
743
|
-
}
|
|
744
|
-
return svg.replace(/^<svg/i, '<svg fill="currentColor"');
|
|
745
|
-
}
|
|
746
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
747
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgxIconComponent, isStandalone: true, selector: "ngx-icon", inputs: { svg: { classPropertyName: "svg", publicName: "svg", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--ngx-icon-size": "this.hostSize", "class": "this.hostClass" } }, ngImport: i0, template: `
|
|
748
|
-
<span
|
|
749
|
-
class="ngx-icon"
|
|
750
|
-
[attr.aria-hidden]="ariaHidden() ? 'true' : null"
|
|
751
|
-
[attr.role]="ariaHidden() ? null : 'img'"
|
|
752
|
-
[attr.title]="title() || null"
|
|
753
|
-
[innerHTML]="svgHtml()">
|
|
754
|
-
</span>
|
|
755
|
-
`, isInline: true, styles: [":host{display:inline-flex;line-height:0;vertical-align:middle}.ngx-icon{display:inline-flex;width:var(--ngx-icon-size, 1.5em);height:var(--ngx-icon-size, 1.5em)}.ngx-icon svg{width:100%;height:100%;display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
756
|
-
}
|
|
757
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconComponent, decorators: [{
|
|
758
|
-
type: Component,
|
|
759
|
-
args: [{ selector: 'ngx-icon', standalone: true, imports: [CommonModule], template: `
|
|
760
|
-
<span
|
|
761
|
-
class="ngx-icon"
|
|
762
|
-
[attr.aria-hidden]="ariaHidden() ? 'true' : null"
|
|
763
|
-
[attr.role]="ariaHidden() ? null : 'img'"
|
|
764
|
-
[attr.title]="title() || null"
|
|
765
|
-
[innerHTML]="svgHtml()">
|
|
766
|
-
</span>
|
|
767
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;line-height:0;vertical-align:middle}.ngx-icon{display:inline-flex;width:var(--ngx-icon-size, 1.5em);height:var(--ngx-icon-size, 1.5em)}.ngx-icon svg{width:100%;height:100%;display:block}\n"] }]
|
|
768
|
-
}], propDecorators: { svg: [{ type: i0.Input, args: [{ isSignal: true, alias: "svg", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], hostSize: [{
|
|
769
|
-
type: HostBinding,
|
|
770
|
-
args: ['style.--ngx-icon-size']
|
|
771
|
-
}], hostClass: [{
|
|
772
|
-
type: HostBinding,
|
|
773
|
-
args: ['class']
|
|
774
|
-
}] } });
|
|
775
|
-
|
|
776
|
-
class NgxIconButtonComponent {
|
|
777
|
-
constructor() {
|
|
778
|
-
this.elementRef = inject(ElementRef);
|
|
779
|
-
this.cssClass = input('', ...(ngDevMode ? [{ debugName: "cssClass" }] : []));
|
|
780
|
-
this.svg = input.required(...(ngDevMode ? [{ debugName: "svg" }] : []));
|
|
781
|
-
this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
782
|
-
this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
783
|
-
this.size = input('sm', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
784
|
-
this.variant = input('ghost', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
785
|
-
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
786
|
-
this.shadow = input(...(ngDevMode ? [undefined, { debugName: "shadow" }] : []));
|
|
787
|
-
this.onClick = output();
|
|
788
|
-
this.onFocus = output();
|
|
789
|
-
this.onBlur = output();
|
|
790
|
-
this.getCssClasses = computed(() => {
|
|
791
|
-
const cssClasses = [
|
|
792
|
-
'btn',
|
|
793
|
-
'rounded-circle',
|
|
794
|
-
'p-0',
|
|
795
|
-
'd-flex',
|
|
796
|
-
'align-items-center',
|
|
797
|
-
'justify-content-center',
|
|
798
|
-
];
|
|
799
|
-
if (this.variant() !== 'contained') {
|
|
800
|
-
cssClasses.push(`btn-${this.variant()}-${this.color()}`);
|
|
801
|
-
}
|
|
802
|
-
else {
|
|
803
|
-
cssClasses.push(`btn-${this.color()}`);
|
|
804
|
-
}
|
|
805
|
-
cssClasses.push(`btn-${this.size()}`);
|
|
806
|
-
cssClasses.push('flex-shrink-0');
|
|
807
|
-
if (this.shadow()) {
|
|
808
|
-
cssClasses.push('shadow-sm');
|
|
809
|
-
}
|
|
810
|
-
if (this.cssClass()) {
|
|
811
|
-
cssClasses.push(this.cssClass());
|
|
812
|
-
}
|
|
813
|
-
return cssClasses.join(' ');
|
|
814
|
-
}, ...(ngDevMode ? [{ debugName: "getCssClasses" }] : []));
|
|
815
|
-
}
|
|
816
|
-
focus() {
|
|
817
|
-
const nativeButton = this.elementRef.nativeElement.querySelector('button');
|
|
818
|
-
if (nativeButton) {
|
|
819
|
-
nativeButton.focus();
|
|
820
|
-
}
|
|
821
|
-
else {
|
|
822
|
-
this.elementRef.nativeElement.focus();
|
|
823
|
-
}
|
|
824
|
-
}
|
|
825
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.0", type: NgxIconButtonComponent, isStandalone: true, selector: "ngx-icon-button", inputs: { cssClass: { classPropertyName: "cssClass", publicName: "cssClass", isSignal: true, isRequired: false, transformFunction: null }, 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" }, providers: [
|
|
827
|
-
{
|
|
828
|
-
provide: FocusableHost,
|
|
829
|
-
useExisting: forwardRef(() => NgxIconButtonComponent),
|
|
830
|
-
},
|
|
831
|
-
], 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\tstyle=\"width: 40px; height: 40px\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n", dependencies: [{ kind: "component", type: NgxIconComponent, selector: "ngx-icon", inputs: ["svg", "size", "title", "ariaHidden", "cssClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
832
|
-
}
|
|
833
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgxIconButtonComponent, decorators: [{
|
|
834
|
-
type: Component,
|
|
835
|
-
args: [{ selector: 'ngx-icon-button', host: { class: 'd-inline-flex align-items-center' }, imports: [NgxIconComponent, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
836
|
-
{
|
|
837
|
-
provide: FocusableHost,
|
|
838
|
-
useExisting: forwardRef(() => NgxIconButtonComponent),
|
|
839
|
-
},
|
|
840
|
-
], 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\tstyle=\"width: 40px; height: 40px\">\n\t<ngx-icon [svg]=\"svg()\" />\n</button>\n" }]
|
|
841
|
-
}], propDecorators: { cssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cssClass", required: false }] }], 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"] }] } });
|
|
842
|
-
|
|
843
851
|
class NgxListGroupItemAvatarDirective {
|
|
844
852
|
constructor() {
|
|
845
853
|
this.elementRef = inject((ElementRef));
|
|
@@ -923,11 +931,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
923
931
|
}]
|
|
924
932
|
}] });
|
|
925
933
|
|
|
926
|
-
const LibIcons = {
|
|
927
|
-
faXmark: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z"/></svg>',
|
|
928
|
-
faSpinner: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M272 112C272 85.5 293.5 64 320 64C346.5 64 368 85.5 368 112C368 138.5 346.5 160 320 160C293.5 160 272 138.5 272 112zM272 528C272 501.5 293.5 480 320 480C346.5 480 368 501.5 368 528C368 554.5 346.5 576 320 576C293.5 576 272 554.5 272 528zM112 272C138.5 272 160 293.5 160 320C160 346.5 138.5 368 112 368C85.5 368 64 346.5 64 320C64 293.5 85.5 272 112 272zM480 320C480 293.5 501.5 272 528 272C554.5 272 576 293.5 576 320C576 346.5 554.5 368 528 368C501.5 368 480 346.5 480 320zM139 433.1C157.8 414.3 188.1 414.3 206.9 433.1C225.7 451.9 225.7 482.2 206.9 501C188.1 519.8 157.8 519.8 139 501C120.2 482.2 120.2 451.9 139 433.1zM139 139C157.8 120.2 188.1 120.2 206.9 139C225.7 157.8 225.7 188.1 206.9 206.9C188.1 225.7 157.8 225.7 139 206.9C120.2 188.1 120.2 157.8 139 139zM501 433.1C519.8 451.9 519.8 482.2 501 501C482.2 519.8 451.9 519.8 433.1 501C414.3 482.2 414.3 451.9 433.1 433.1C451.9 414.3 482.2 414.3 501 433.1z"/></svg>',
|
|
929
|
-
};
|
|
930
|
-
|
|
931
934
|
class NgxLoadingIndicatorComponent {
|
|
932
935
|
constructor() {
|
|
933
936
|
this.icon = input(LibIcons.faSpinner, ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
@@ -1013,14 +1016,14 @@ class NgxTooltipDirective {
|
|
|
1013
1016
|
constructor() {
|
|
1014
1017
|
this.elementRef = inject(ElementRef);
|
|
1015
1018
|
this.renderer = inject(Renderer2);
|
|
1016
|
-
this.
|
|
1019
|
+
this.appRef = inject(ApplicationRef);
|
|
1017
1020
|
this.ngxTooltip = input.required(...(ngDevMode ? [{ debugName: "ngxTooltip" }] : []));
|
|
1018
1021
|
this.ngxTooltipClass = input('', ...(ngDevMode ? [{ debugName: "ngxTooltipClass" }] : []));
|
|
1019
1022
|
this.ngxTooltipPlacement = input('top', ...(ngDevMode ? [{ debugName: "ngxTooltipPlacement" }] : []));
|
|
1020
1023
|
this.ngxTooltipIsShow = input(false, ...(ngDevMode ? [{ debugName: "ngxTooltipIsShow" }] : []));
|
|
1021
1024
|
this.ngxTooltipXOffset = input(0, ...(ngDevMode ? [{ debugName: "ngxTooltipXOffset" }] : []));
|
|
1022
1025
|
this.ngxTooltipYOffset = input(8, ...(ngDevMode ? [{ debugName: "ngxTooltipYOffset" }] : []));
|
|
1023
|
-
this.ngxTooltipDelay = input(
|
|
1026
|
+
this.ngxTooltipDelay = input(100, ...(ngDevMode ? [{ debugName: "ngxTooltipDelay" }] : []));
|
|
1024
1027
|
this.ngxTooltipTriggers = input(['hover'], ...(ngDevMode ? [{ debugName: "ngxTooltipTriggers" }] : []));
|
|
1025
1028
|
this.ngxTooltipSize = input('sm', ...(ngDevMode ? [{ debugName: "ngxTooltipSize" }] : []));
|
|
1026
1029
|
this.ngxTooltipZIndex = input(5, ...(ngDevMode ? [{ debugName: "ngxTooltipZIndex" }] : []));
|
|
@@ -1180,18 +1183,23 @@ class NgxTooltipDirective {
|
|
|
1180
1183
|
this.renderer.appendChild(this.tooltipElement, this.renderer.createText(text));
|
|
1181
1184
|
}
|
|
1182
1185
|
renderTemplate(templateRef) {
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
embeddedViewRef.
|
|
1186
|
+
this.embeddedViewRef = templateRef.createEmbeddedView(null);
|
|
1187
|
+
this.appRef.attachView(this.embeddedViewRef);
|
|
1188
|
+
this.embeddedViewRef.detectChanges();
|
|
1189
|
+
this.embeddedViewRef.rootNodes.forEach(node => {
|
|
1186
1190
|
this.renderer.appendChild(this.tooltipElement, node);
|
|
1187
1191
|
});
|
|
1188
1192
|
}
|
|
1189
1193
|
hide() {
|
|
1190
|
-
this.viewContainerRef.clear();
|
|
1191
1194
|
this.mutationObserver?.disconnect();
|
|
1192
1195
|
clearTimeout(this.mutationTimeout);
|
|
1193
1196
|
clearTimeout(this.openTimeout);
|
|
1194
1197
|
clearTimeout(this.closeTimeout);
|
|
1198
|
+
if (this.embeddedViewRef) {
|
|
1199
|
+
this.appRef.detachView(this.embeddedViewRef);
|
|
1200
|
+
this.embeddedViewRef.destroy();
|
|
1201
|
+
this.embeddedViewRef = undefined;
|
|
1202
|
+
}
|
|
1195
1203
|
if (this.popperInstance) {
|
|
1196
1204
|
this.popperInstance.destroy();
|
|
1197
1205
|
this.popperInstance = undefined;
|