@nettyapps/ntyui 0.1.14 → 21.0.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.
|
@@ -6,8 +6,6 @@ import * as i2 from '@angular/material/form-field';
|
|
|
6
6
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
7
7
|
import * as i3 from '@angular/material/input';
|
|
8
8
|
import { MatInputModule } from '@angular/material/input';
|
|
9
|
-
import * as i1$1 from '@angular/common';
|
|
10
|
-
import { CommonModule } from '@angular/common';
|
|
11
9
|
import * as i4 from '@angular/material/icon';
|
|
12
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
11
|
import * as i4$1 from '@angular/material/datepicker';
|
|
@@ -15,6 +13,8 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
|
15
13
|
import { DateAdapter, MatNativeDateModule, provideNativeDateAdapter } from '@angular/material/core';
|
|
16
14
|
import * as i6 from '@angular/material/timepicker';
|
|
17
15
|
import { MatTimepickerModule } from '@angular/material/timepicker';
|
|
16
|
+
import * as i1$1 from '@angular/common';
|
|
17
|
+
import { CommonModule } from '@angular/common';
|
|
18
18
|
import * as i1$2 from '@angular/material/checkbox';
|
|
19
19
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
20
20
|
import * as i2$1 from '@angular/material/slide-toggle';
|
|
@@ -36,14 +36,14 @@ import { HttpClient } from '@angular/common/http';
|
|
|
36
36
|
import { EnvironmentProxy } from '@nettyapps/ntycontract';
|
|
37
37
|
|
|
38
38
|
class Ntyui {
|
|
39
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
40
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
39
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Ntyui, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
40
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: Ntyui, isStandalone: false, selector: "lib-ntyui", ngImport: i0, template: `
|
|
41
41
|
<p>
|
|
42
42
|
ntyui works!
|
|
43
43
|
</p>
|
|
44
44
|
`, isInline: true, styles: [""] });
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Ntyui, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
48
|
args: [{ selector: 'lib-ntyui', standalone: false, template: `
|
|
49
49
|
<p>
|
|
@@ -53,11 +53,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImpo
|
|
|
53
53
|
}] });
|
|
54
54
|
|
|
55
55
|
class NtyuiModule {
|
|
56
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
57
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
58
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
56
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NtyuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
57
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: NtyuiModule, declarations: [Ntyui], exports: [Ntyui] });
|
|
58
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NtyuiModule });
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NtyuiModule, decorators: [{
|
|
61
61
|
type: NgModule,
|
|
62
62
|
args: [{
|
|
63
63
|
declarations: [Ntyui],
|
|
@@ -70,11 +70,13 @@ class UiBase {
|
|
|
70
70
|
// Input properties
|
|
71
71
|
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
72
72
|
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
73
|
-
required = input(false, ...(ngDevMode ?
|
|
74
|
-
disabled = input(false, ...(ngDevMode ?
|
|
73
|
+
required = input(false, { ...(ngDevMode ? { debugName: "required" } : {}), transform: booleanAttribute });
|
|
74
|
+
disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
75
75
|
appearance = input('outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
76
76
|
maxLength = input(...(ngDevMode ? [undefined, { debugName: "maxLength" }] : []));
|
|
77
77
|
minLength = input(...(ngDevMode ? [undefined, { debugName: "minLength" }] : []));
|
|
78
|
+
validateRegex = input(null, ...(ngDevMode ? [{ debugName: "validateRegex" }] : []));
|
|
79
|
+
validateRegexErrorMessage = input('@invalidFormat', ...(ngDevMode ? [{ debugName: "validateRegexErrorMessage" }] : []));
|
|
78
80
|
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
79
81
|
// Error messages
|
|
80
82
|
errorMessages = input({
|
|
@@ -95,6 +97,11 @@ class UiBase {
|
|
|
95
97
|
effect(() => {
|
|
96
98
|
this.onChange(this.value());
|
|
97
99
|
});
|
|
100
|
+
effect(() => {
|
|
101
|
+
if (this.validateRegex()) {
|
|
102
|
+
this.updateValidators();
|
|
103
|
+
}
|
|
104
|
+
});
|
|
98
105
|
}
|
|
99
106
|
// ControlValueAccessor interface implementation
|
|
100
107
|
writeValue(value) {
|
|
@@ -118,6 +125,9 @@ class UiBase {
|
|
|
118
125
|
if (this.ngModel.control.hasError('maxlength')) {
|
|
119
126
|
return this.errorMessages().maxlength;
|
|
120
127
|
}
|
|
128
|
+
if (this.ngModel.control.hasError('pattern')) {
|
|
129
|
+
return this.errorMessages().pattern || this.validateRegexErrorMessage();
|
|
130
|
+
}
|
|
121
131
|
return undefined;
|
|
122
132
|
}
|
|
123
133
|
// Update validators based on input changes
|
|
@@ -142,12 +152,34 @@ class UiBase {
|
|
|
142
152
|
if (maxLength !== undefined) {
|
|
143
153
|
validators.push(Validators.maxLength(maxLength));
|
|
144
154
|
}
|
|
155
|
+
// Regex validation
|
|
156
|
+
const regexPattern = this.validateRegex();
|
|
157
|
+
if (regexPattern) {
|
|
158
|
+
const pattern = regexPattern instanceof RegExp
|
|
159
|
+
? regexPattern
|
|
160
|
+
: new RegExp(regexPattern);
|
|
161
|
+
validators.push(Validators.pattern(pattern));
|
|
162
|
+
}
|
|
145
163
|
this.ngModel.control.setValidators(validators);
|
|
146
164
|
this.ngModel.control.updateValueAndValidity();
|
|
147
165
|
}
|
|
148
|
-
// Update your onInputChange method to call onChange
|
|
149
166
|
onInputChange(event) {
|
|
150
|
-
const
|
|
167
|
+
const input = event.target;
|
|
168
|
+
let value = input.value;
|
|
169
|
+
const regexPattern = this.validateRegex();
|
|
170
|
+
if (regexPattern && value) {
|
|
171
|
+
const pattern = regexPattern instanceof RegExp
|
|
172
|
+
? regexPattern
|
|
173
|
+
: new RegExp(regexPattern, 'g');
|
|
174
|
+
const matches = value.match(pattern);
|
|
175
|
+
if (matches) {
|
|
176
|
+
value = matches.join('');
|
|
177
|
+
}
|
|
178
|
+
else {
|
|
179
|
+
value = '';
|
|
180
|
+
}
|
|
181
|
+
input.value = value;
|
|
182
|
+
}
|
|
151
183
|
this.value.set(value);
|
|
152
184
|
this.onTouched();
|
|
153
185
|
}
|
|
@@ -157,33 +189,32 @@ class UiBase {
|
|
|
157
189
|
this.ngModel?.control.setValue('');
|
|
158
190
|
this.onTouched();
|
|
159
191
|
}
|
|
160
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
192
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UiBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UiBase, isStandalone: true, selector: "ntyui-ui-base", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, validateRegex: { classPropertyName: "validateRegex", publicName: "validateRegex", isSignal: true, isRequired: false, transformFunction: null }, validateRegexErrorMessage: { classPropertyName: "validateRegexErrorMessage", publicName: "validateRegexErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputModel", first: true, predicate: ["inputModel"], descendants: true, isSignal: true }], ngImport: i0, template: "<p>ui-base works!</p>\n", styles: [""] });
|
|
162
194
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UiBase, decorators: [{
|
|
164
196
|
type: Component,
|
|
165
197
|
args: [{ selector: 'ntyui-ui-base', imports: [], template: "<p>ui-base works!</p>\n" }]
|
|
166
|
-
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], inputModel: [{ type: i0.ViewChild, args: ['inputModel', { isSignal: true }] }] } });
|
|
198
|
+
}], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], validateRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegex", required: false }] }], validateRegexErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateRegexErrorMessage", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], inputModel: [{ type: i0.ViewChild, args: ['inputModel', { isSignal: true }] }] } });
|
|
167
199
|
|
|
168
200
|
class NettyUITextInput extends UiBase {
|
|
169
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
201
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITextInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUITextInput, isStandalone: true, selector: "ntyui-text-input", providers: [
|
|
171
203
|
{
|
|
172
204
|
provide: NG_VALUE_ACCESSOR,
|
|
173
205
|
useExisting: forwardRef(() => NettyUITextInput),
|
|
174
206
|
multi: true,
|
|
175
207
|
},
|
|
176
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"value.set($event)\"\n (input)=\"onInputChange($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type:
|
|
208
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder()\"\n [ngModel]=\"value()\"\n (ngModelChange)=\"value.set($event)\"\n (input)=\"onInputChange($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
177
209
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITextInput, decorators: [{
|
|
179
211
|
type: Component,
|
|
180
212
|
args: [{ selector: 'ntyui-text-input', imports: [
|
|
181
213
|
FormsModule,
|
|
182
214
|
MatFormFieldModule,
|
|
183
215
|
MatInputModule,
|
|
184
|
-
CommonModule,
|
|
185
216
|
MatIconModule,
|
|
186
|
-
ReactiveFormsModule
|
|
217
|
+
ReactiveFormsModule
|
|
187
218
|
], providers: [
|
|
188
219
|
{
|
|
189
220
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -215,24 +246,23 @@ class NettyUIEmailInput extends UiBase {
|
|
|
215
246
|
}
|
|
216
247
|
return undefined;
|
|
217
248
|
}
|
|
218
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
249
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIEmailInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIEmailInput, isStandalone: true, selector: "ntyui-email-input", providers: [
|
|
220
251
|
{
|
|
221
252
|
provide: NG_VALUE_ACCESSOR,
|
|
222
253
|
useExisting: forwardRef(() => NettyUIEmailInput),
|
|
223
254
|
multi: true,
|
|
224
255
|
},
|
|
225
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n />\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }
|
|
256
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n type=\"email\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n />\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
226
257
|
}
|
|
227
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIEmailInput, decorators: [{
|
|
228
259
|
type: Component,
|
|
229
260
|
args: [{ selector: 'ntyui-email-input', imports: [
|
|
230
261
|
FormsModule,
|
|
231
262
|
MatFormFieldModule,
|
|
232
263
|
MatInputModule,
|
|
233
264
|
ReactiveFormsModule,
|
|
234
|
-
MatIconModule
|
|
235
|
-
CommonModule,
|
|
265
|
+
MatIconModule
|
|
236
266
|
], providers: [
|
|
237
267
|
{
|
|
238
268
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -340,22 +370,21 @@ class NettyUIDateTime extends UiBase {
|
|
|
340
370
|
this.onChange(null);
|
|
341
371
|
this.onTouched();
|
|
342
372
|
}
|
|
343
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
344
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
373
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIDateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIDateTime, isStandalone: true, selector: "ntyui-date-time", inputs: { dateTimeValue: { classPropertyName: "dateTimeValue", publicName: "dateTimeValue", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, timeLabel: { classPropertyName: "timeLabel", publicName: "timeLabel", isSignal: true, isRequired: false, transformFunction: null }, dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateTimeValue: "dateTimeValueChange" }, viewQueries: [{ propertyName: "dateModel", first: true, predicate: ["dateModel"], descendants: true, isSignal: true }, { propertyName: "timeModel", first: true, predicate: ["timeModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (dateLabel()) {\n <mat-label>{{ dateLabel() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"dateValue\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n />\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }] });
|
|
345
375
|
}
|
|
346
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIDateTime, decorators: [{
|
|
347
377
|
type: Component,
|
|
348
378
|
args: [{ selector: 'ntyui-date-time', imports: [
|
|
349
379
|
FormsModule,
|
|
350
380
|
MatFormFieldModule,
|
|
351
381
|
MatInputModule,
|
|
352
|
-
CommonModule,
|
|
353
382
|
ReactiveFormsModule,
|
|
354
383
|
MatDatepickerModule,
|
|
355
384
|
MatNativeDateModule,
|
|
356
385
|
MatIconModule,
|
|
357
|
-
MatTimepickerModule
|
|
358
|
-
], template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (dateLabel()) {\n <mat-label>{{ dateLabel() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"dateValue\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n />\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media
|
|
386
|
+
MatTimepickerModule
|
|
387
|
+
], template: "<div class=\"datetime-container\">\n <!-- Datetime -->\n <mat-form-field\n [appearance]=\"appearance()\"\n class=\"datepicker\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && dateValue()\"\n >\n @if (dateLabel()) {\n <mat-label>{{ dateLabel() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"dateValue\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n @if (dateValue() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n\n <!-- Timepicker -->\n <mat-form-field\n class=\"time-field\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n >\n @if (timeLabel()) {\n <mat-label>{{ timeLabel() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"timepicker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [ngModelOptions]=\"{updateOn: 'blur'}\"\n />\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #timepicker />\n <mat-timepicker-toggle [for]=\"timepicker\" matSuffix />\n </mat-form-field>\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.datetime-container{display:flex;align-items:flex-start}@media(max-width:600px){.datetime-container{flex-wrap:nowrap;overflow-x:auto;align-items:flex-start}}.datepicker,.time-field{width:50%}\n"] }]
|
|
359
388
|
}], ctorParameters: () => [], propDecorators: { dateTimeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeValue", required: false }] }, { type: i0.Output, args: ["dateTimeValueChange"] }], dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], timeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeLabel", required: false }] }], dateRestriction: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateRestriction", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], dateModel: [{ type: i0.ViewChild, args: ['dateModel', { isSignal: true }] }], timeModel: [{ type: i0.ViewChild, args: ['timeModel', { isSignal: true }] }] } });
|
|
360
389
|
|
|
361
390
|
class NettyUIDatePicker extends UiBase {
|
|
@@ -447,26 +476,25 @@ class NettyUIDatePicker extends UiBase {
|
|
|
447
476
|
this.onChange(this.required() ? null : this.NULL_DATE);
|
|
448
477
|
this.onTouched();
|
|
449
478
|
}
|
|
450
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
451
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
479
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
480
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIDatePicker, isStandalone: true, selector: "ntyui-date-picker", inputs: { dateRestriction: { classPropertyName: "dateRestriction", publicName: "dateRestriction", isSignal: true, isRequired: false, transformFunction: null }, dateValue: { classPropertyName: "dateValue", publicName: "dateValue", isSignal: true, isRequired: false, transformFunction: null }, selectedDate: { classPropertyName: "selectedDate", publicName: "selectedDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateValue: "dateValueChange", selectedDate: "selectedDateChange" }, providers: [
|
|
452
481
|
{
|
|
453
482
|
provide: NG_VALUE_ACCESSOR,
|
|
454
483
|
useExisting: forwardRef(() => NettyUIDatePicker),
|
|
455
484
|
multi: true,
|
|
456
485
|
},
|
|
457
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"selectedDate\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n <button\n mat-icon-button\n matSuffix\n [class.invisible]=\"!selectedDate() || disabled()\"\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type:
|
|
486
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n class=\"example-full-width\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && selectedDate()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matDatepicker]=\"picker\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"selectedDate\"\n (dateChange)=\"onDateChange($event)\"\n [min]=\"minDate() ?? undefined\"\n [max]=\"maxDate() ?? undefined\"\n />\n\n <button\n mat-icon-button\n matSuffix\n [class.invisible]=\"!selectedDate() || disabled()\"\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn date-clear\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n\n @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.mat-datepicker-toggle{margin-right:5px}.clear-btn{opacity:1;transition:opacity .2s}.clear-btn.invisible{opacity:0;pointer-events:none}.mat-form-field-suffix{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
458
487
|
}
|
|
459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIDatePicker, decorators: [{
|
|
460
489
|
type: Component,
|
|
461
490
|
args: [{ selector: 'ntyui-date-picker', imports: [
|
|
462
491
|
FormsModule,
|
|
463
492
|
MatFormFieldModule,
|
|
464
493
|
MatInputModule,
|
|
465
|
-
CommonModule,
|
|
466
494
|
ReactiveFormsModule,
|
|
467
495
|
MatDatepickerModule,
|
|
468
496
|
MatNativeDateModule,
|
|
469
|
-
MatIconModule
|
|
497
|
+
MatIconModule
|
|
470
498
|
], providers: [
|
|
471
499
|
{
|
|
472
500
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -592,24 +620,23 @@ class NettyUIMaskedInput extends UiBase {
|
|
|
592
620
|
}
|
|
593
621
|
return undefined;
|
|
594
622
|
}
|
|
595
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
596
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
623
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIMaskedInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIMaskedInput, isStandalone: true, selector: "ntyui-masked-input", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
597
625
|
{
|
|
598
626
|
provide: NG_VALUE_ACCESSOR,
|
|
599
627
|
useExisting: forwardRef(() => NettyUIMaskedInput),
|
|
600
628
|
multi: true,
|
|
601
629
|
},
|
|
602
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type:
|
|
630
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n <input\n #inputModel=\"ngModel\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel.invalid && (inputModel.dirty || inputModel.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
603
631
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
632
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIMaskedInput, decorators: [{
|
|
605
633
|
type: Component,
|
|
606
634
|
args: [{ selector: 'ntyui-masked-input', imports: [
|
|
607
635
|
FormsModule,
|
|
608
636
|
MatFormFieldModule,
|
|
609
637
|
MatInputModule,
|
|
610
|
-
CommonModule,
|
|
611
638
|
MatIconModule,
|
|
612
|
-
ReactiveFormsModule
|
|
639
|
+
ReactiveFormsModule
|
|
613
640
|
], providers: [
|
|
614
641
|
{
|
|
615
642
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -662,10 +689,10 @@ class NettyUICarousel {
|
|
|
662
689
|
this.selectedIndex.update((currentIndex) => currentIndex < this.slides().length - 1 ? currentIndex + 1 : 0);
|
|
663
690
|
}, 3000);
|
|
664
691
|
}
|
|
665
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
692
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUICarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUICarousel, isStandalone: true, selector: "ntyui-carousel", inputs: { slides: { classPropertyName: "slides", publicName: "slides", isSignal: true, isRequired: false, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, textPosition: { classPropertyName: "textPosition", publicName: "textPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (slides() && slides().length > 0) {\n<div class=\"carousel-container\">\n @for (slide of slides(); track slide.imageSrc; let i = $index) {\n <div class=\"slide-container\" [class.active]=\"selectedIndex() === i\">\n <div class=\"image-container\">\n <img\n [src]=\"slide.imageSrc\"\n [alt]=\"slide.imageAlt\"\n [ngClass]=\"{ 'image-active': selectedIndex() === i }\"\n />\n </div>\n\n @if (showText()) {\n <div class=\"text-container\" [class]=\"'text-' + textPosition()\">\n @if (slide.title) {\n <h2 class=\"slide-title\">{{ slide.title }}</h2>\n } @if (slide.description) {\n <p class=\"slide-description\">{{ slide.description }}</p>\n }\n </div>\n }\n </div>\n } @if (indicators()) {\n <div class=\"carousel-dot-container\">\n @for (dot of slides(); track dot.imageSrc; let i = $index) {\n <span\n class=\"dot\"\n [ngClass]=\"{ active: selectedIndex() === i }\"\n (click)=\"selectImage(i)\"\n ></span>\n }\n </div>\n }\n</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.carousel-container{position:relative;margin:auto;text-align:center;width:100%;height:100%;border-radius:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.carousel-container .slide-container{position:relative;width:100%;height:100%;display:none}.carousel-container .slide-container.active{display:block}.carousel-container img{display:none;border-radius:15px;width:100%;height:100%;object-fit:cover}.carousel-container img.image-active{display:block}.carousel-container .text-container{position:absolute;color:#fff;background:#00000080;padding:1rem;border-radius:8px;max-width:80%;transition:all .3s ease;margin-bottom:20px}.carousel-container .text-container.text-bottom{bottom:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-top{top:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-left{left:20px;top:50%;transform:translateY(-50%);text-align:left}.carousel-container .text-container.text-right{right:20px;top:50%;transform:translateY(-50%);text-align:right}.carousel-container .text-container .slide-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.carousel-container .text-container .slide-description{margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.carousel-container .carousel-dot-container{position:absolute;right:0;left:0;bottom:0;display:flex;justify-content:center;padding:0;margin-bottom:1rem;z-index:2}.carousel-container .dot{cursor:pointer;height:13px;width:13px;margin:0 5px;background-color:#fff;border-radius:50%;display:inline-block;transition:opacity .6s ease;opacity:.5}.carousel-container .dot.active,.carousel-container .dot:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
667
694
|
}
|
|
668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
695
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUICarousel, decorators: [{
|
|
669
696
|
type: Component,
|
|
670
697
|
args: [{ selector: 'ntyui-carousel', imports: [CommonModule, FormsModule], template: "@if (slides() && slides().length > 0) {\n<div class=\"carousel-container\">\n @for (slide of slides(); track slide.imageSrc; let i = $index) {\n <div class=\"slide-container\" [class.active]=\"selectedIndex() === i\">\n <div class=\"image-container\">\n <img\n [src]=\"slide.imageSrc\"\n [alt]=\"slide.imageAlt\"\n [ngClass]=\"{ 'image-active': selectedIndex() === i }\"\n />\n </div>\n\n @if (showText()) {\n <div class=\"text-container\" [class]=\"'text-' + textPosition()\">\n @if (slide.title) {\n <h2 class=\"slide-title\">{{ slide.title }}</h2>\n } @if (slide.description) {\n <p class=\"slide-description\">{{ slide.description }}</p>\n }\n </div>\n }\n </div>\n } @if (indicators()) {\n <div class=\"carousel-dot-container\">\n @for (dot of slides(); track dot.imageSrc; let i = $index) {\n <span\n class=\"dot\"\n [ngClass]=\"{ active: selectedIndex() === i }\"\n (click)=\"selectImage(i)\"\n ></span>\n }\n </div>\n }\n</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.carousel-container{position:relative;margin:auto;text-align:center;width:100%;height:100%;border-radius:15px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.carousel-container .slide-container{position:relative;width:100%;height:100%;display:none}.carousel-container .slide-container.active{display:block}.carousel-container img{display:none;border-radius:15px;width:100%;height:100%;object-fit:cover}.carousel-container img.image-active{display:block}.carousel-container .text-container{position:absolute;color:#fff;background:#00000080;padding:1rem;border-radius:8px;max-width:80%;transition:all .3s ease;margin-bottom:20px}.carousel-container .text-container.text-bottom{bottom:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-top{top:20px;left:50%;transform:translate(-50%);text-align:center}.carousel-container .text-container.text-left{left:20px;top:50%;transform:translateY(-50%);text-align:left}.carousel-container .text-container.text-right{right:20px;top:50%;transform:translateY(-50%);text-align:right}.carousel-container .text-container .slide-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.8)}.carousel-container .text-container .slide-description{margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.carousel-container .carousel-dot-container{position:absolute;right:0;left:0;bottom:0;display:flex;justify-content:center;padding:0;margin-bottom:1rem;z-index:2}.carousel-container .dot{cursor:pointer;height:13px;width:13px;margin:0 5px;background-color:#fff;border-radius:50%;display:inline-block;transition:opacity .6s ease;opacity:.5}.carousel-container .dot.active,.carousel-container .dot:hover{opacity:1}\n"] }]
|
|
671
698
|
}], ctorParameters: () => [], propDecorators: { slides: [{ type: i0.Input, args: [{ isSignal: true, alias: "slides", required: false }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }], textPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "textPosition", required: false }] }] } });
|
|
@@ -712,18 +739,18 @@ class NettyUICheckboxToggle extends UiBase {
|
|
|
712
739
|
this.inputModel()?.control.setValidators(validators);
|
|
713
740
|
this.inputModel()?.control.updateValueAndValidity();
|
|
714
741
|
}
|
|
715
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
716
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
742
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUICheckboxToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUICheckboxToggle, isStandalone: true, selector: "ntyui-checkbox-toggle", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, providers: [
|
|
717
744
|
{
|
|
718
745
|
provide: NG_VALUE_ACCESSOR,
|
|
719
746
|
useExisting: forwardRef(() => NettyUICheckboxToggle),
|
|
720
747
|
multi: true,
|
|
721
748
|
},
|
|
722
|
-
], usesInheritance: true, ngImport: i0, template: "@if (type() === 'checkbox') {\n<mat-checkbox\n #inputModel=\"ngModel\"\n [ngModel]=\"checked()\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"disabled()\"\n [labelPosition]=\"labelPosition()\"\n [class.circle]=\"shape() === 'circle'\"\n [class.rectangle]=\"shape() === 'rectangle'\"\n>\n {{ label() }}\n</mat-checkbox>\n} @else {\n<mat-slide-toggle\n #inputModel=\"ngModel\"\n [ngModel]=\"checked()\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"disabled()\"\n class=\"slide-toggle\"\n>\n {{ label() }}\n</mat-slide-toggle>\n}\n\n<!-- Error message display using UiBase's getErrorMessage() -->\n@if (ngModel?.invalid && (ngModel?.dirty || ngModel?.touched)) {\n<div class=\"error-message\">{{ getErrorMessage() }}</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }
|
|
749
|
+
], usesInheritance: true, ngImport: i0, template: "@if (type() === 'checkbox') {\n<mat-checkbox\n #inputModel=\"ngModel\"\n [ngModel]=\"checked()\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"disabled()\"\n [labelPosition]=\"labelPosition()\"\n [class.circle]=\"shape() === 'circle'\"\n [class.rectangle]=\"shape() === 'rectangle'\"\n>\n {{ label() }}\n</mat-checkbox>\n} @else {\n<mat-slide-toggle\n #inputModel=\"ngModel\"\n [ngModel]=\"checked()\"\n (ngModelChange)=\"onValueChange($event)\"\n [disabled]=\"disabled()\"\n class=\"slide-toggle\"\n>\n {{ label() }}\n</mat-slide-toggle>\n}\n\n<!-- Error message display using UiBase's getErrorMessage() -->\n@if (ngModel?.invalid && (ngModel?.dirty || ngModel?.touched)) {\n<div class=\"error-message\">{{ getErrorMessage() }}</div>\n}\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
723
750
|
}
|
|
724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
751
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUICheckboxToggle, decorators: [{
|
|
725
752
|
type: Component,
|
|
726
|
-
args: [{ selector: 'ntyui-checkbox-toggle', imports: [MatCheckboxModule, MatSlideToggleModule, FormsModule
|
|
753
|
+
args: [{ selector: 'ntyui-checkbox-toggle', imports: [MatCheckboxModule, MatSlideToggleModule, FormsModule], providers: [
|
|
727
754
|
{
|
|
728
755
|
provide: NG_VALUE_ACCESSOR,
|
|
729
756
|
useExisting: forwardRef(() => NettyUICheckboxToggle),
|
|
@@ -735,9 +762,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImpo
|
|
|
735
762
|
class NettyUIButton extends UiBase {
|
|
736
763
|
// Input signals
|
|
737
764
|
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
738
|
-
isFilled = input(false, ...(ngDevMode ?
|
|
765
|
+
isFilled = input(false, { ...(ngDevMode ? { debugName: "isFilled" } : {}), transform: booleanAttribute });
|
|
739
766
|
menuReference = input(null, ...(ngDevMode ? [{ debugName: "menuReference" }] : []));
|
|
740
|
-
disableOnClick = input(false, ...(ngDevMode ?
|
|
767
|
+
disableOnClick = input(false, { ...(ngDevMode ? { debugName: "disableOnClick" } : {}), transform: booleanAttribute });
|
|
741
768
|
disableDuration = input(0, ...(ngDevMode ? [{ debugName: "disableDuration" }] : []));
|
|
742
769
|
waitingText = input('', ...(ngDevMode ? [{ debugName: "waitingText" }] : []));
|
|
743
770
|
type = input('menu', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
@@ -779,18 +806,17 @@ class NettyUIButton extends UiBase {
|
|
|
779
806
|
ngOnDestroy() {
|
|
780
807
|
this.timerSub?.unsubscribe();
|
|
781
808
|
}
|
|
782
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
783
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
809
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIButton, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
810
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIButton, isStandalone: true, selector: "ntyui-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isFilled: { classPropertyName: "isFilled", publicName: "isFilled", isSignal: true, isRequired: false, transformFunction: null }, menuReference: { classPropertyName: "menuReference", publicName: "menuReference", isSignal: true, isRequired: false, transformFunction: null }, disableOnClick: { classPropertyName: "disableOnClick", publicName: "disableOnClick", isSignal: true, isRequired: false, transformFunction: null }, disableDuration: { classPropertyName: "disableDuration", publicName: "disableDuration", isSignal: true, isRequired: false, transformFunction: null }, waitingText: { classPropertyName: "waitingText", publicName: "waitingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, toolTip: { classPropertyName: "toolTip", publicName: "toolTip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, usesInheritance: true, ngImport: i0, template: "@switch (type()) { @case ('menu') {\n<button\n type=\"button\"\n mat-button\n [matTooltip]=\"toolTip()\"\n [class]=\"getDisplayText().length > 0 ? 'ui-menu-button-text' : 'ui-menu-button'\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matMenuTriggerFor]=\"menuReference()\"\n>\n @if (icon() && countdown() === 0) {\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> }\n <span>{{ getDisplayText() }}</span>\n @if (menuReference() && !(countdown() > 0)){\n <mat-icon class=\"menu-icon\">arrow_drop_down</mat-icon>\n }\n</button>\n} @case ('close') {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"ui-close-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } @else\n {<mat-icon> close </mat-icon>} {{ getDisplayText() }}\n</button>\n} @default { @if(isFilled()){\n<button\n mat-raised-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n matButton=\"filled\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} @else {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} } }\n", styles: ["@charset \"UTF-8\";.example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.flex-container{display:flex;justify-content:center;align-items:center}.ui-menu-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin:0;height:40px}.ui-menu-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}ui-menu-button-text{flex-direction:row-reverse;max-width:75px;min-width:25px;flex-grow:1;padding:0;margin:0;height:40px}ui-menu-button-text mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}.ui-menu-button .menu-icon{margin-left:15px}.ui-close-button{width:25px;min-width:25px;padding:0;margin:0;height:40px;background-color:var(--mat-sys-secondary)}.ui-close-button mat-icon{color:var(--mat-sys-on-secondary);font-size:20px;width:20px;height:20px;margin:0;padding-right:1px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
|
|
784
811
|
}
|
|
785
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIButton, decorators: [{
|
|
786
813
|
type: Component,
|
|
787
814
|
args: [{ selector: 'ntyui-button', imports: [
|
|
788
815
|
MatButtonModule,
|
|
789
816
|
MatTooltipModule,
|
|
790
817
|
MatIconModule,
|
|
791
|
-
MatMenuModule
|
|
792
|
-
|
|
793
|
-
], template: "@switch (type()) { @case ('menu') {\n<button\n type=\"button\"\n mat-button\n [matTooltip]=\"toolTip()\"\n [class]=\"getDisplayText().length > 0 ? 'ui-menu-button-text' : 'ui-menu-button'\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matMenuTriggerFor]=\"menuReference()\"\n>\n @if (icon() && countdown() === 0) {\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> }\n <span>{{ getDisplayText() }}</span>\n @if (menuReference() && !(countdown() > 0)){\n <mat-icon class=\"menu-icon\">arrow_drop_down</mat-icon>\n }\n</button>\n} @case ('close') {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"ui-close-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } @else\n {<mat-icon> close </mat-icon>} {{ getDisplayText() }}\n</button>\n} @default { @if(isFilled()){\n<button\n mat-raised-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n matButton=\"filled\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} @else {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} } }\n", styles: ["@charset \"UTF-8\";.example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.flex-container{display:flex;justify-content:center;align-items:center}.ui-menu-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin:0;height:40px}.ui-menu-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}ui-menu-button-text{flex-direction:row-reverse;max-width:75px;min-width:25px;flex-grow:1;padding:0;margin:0;height:40px}ui-menu-button-text mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button .menu-icon{margin-left:15px}.ui-close-button{width:25px;min-width:25px;padding:0;margin:0;height:40px;background-color:var(--mat-sys-secondary)}.ui-close-button mat-icon{color:var(--mat-sys-on-secondary);font-size:20px;width:20px;height:20px;margin:0;padding-right:1px}\n"] }]
|
|
818
|
+
MatMenuModule
|
|
819
|
+
], template: "@switch (type()) { @case ('menu') {\n<button\n type=\"button\"\n mat-button\n [matTooltip]=\"toolTip()\"\n [class]=\"getDisplayText().length > 0 ? 'ui-menu-button-text' : 'ui-menu-button'\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matMenuTriggerFor]=\"menuReference()\"\n>\n @if (icon() && countdown() === 0) {\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> }\n <span>{{ getDisplayText() }}</span>\n @if (menuReference() && !(countdown() > 0)){\n <mat-icon class=\"menu-icon\">arrow_drop_down</mat-icon>\n }\n</button>\n} @case ('close') {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"ui-close-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } @else\n {<mat-icon> close </mat-icon>} {{ getDisplayText() }}\n</button>\n} @default { @if(isFilled()){\n<button\n mat-raised-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n matButton=\"filled\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} @else {\n<button\n mat-stroked-button\n color=\"primary\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n [matTooltip]=\"toolTip()\"\n class=\"regular-button\"\n>\n @if(icon()){\n <mat-icon class=\"material-symbols-outlined\">{{ icon() }}</mat-icon> } {{\n getDisplayText() }}\n</button>\n} } }\n", styles: ["@charset \"UTF-8\";.example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.flex-container{display:flex;justify-content:center;align-items:center}.ui-menu-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin:0;height:40px}.ui-menu-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}ui-menu-button-text{flex-direction:row-reverse;max-width:75px;min-width:25px;flex-grow:1;padding:0;margin:0;height:40px}ui-menu-button-text mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.ui-menu-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}.ui-menu-button .menu-icon{margin-left:15px}.ui-close-button{width:25px;min-width:25px;padding:0;margin:0;height:40px;background-color:var(--mat-sys-secondary)}.ui-close-button mat-icon{color:var(--mat-sys-on-secondary);font-size:20px;width:20px;height:20px;margin:0;padding-right:1px}\n"] }]
|
|
794
820
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], isFilled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFilled", required: false }] }], menuReference: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuReference", required: false }] }], disableOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOnClick", required: false }] }], disableDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableDuration", required: false }] }], waitingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "toolTip", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
795
821
|
|
|
796
822
|
class NettyUIFilterButton extends UiBase {
|
|
@@ -871,12 +897,12 @@ class NettyUIFilterButton extends UiBase {
|
|
|
871
897
|
ngOnDestroy() {
|
|
872
898
|
clearTimeout(this.debounceTimer);
|
|
873
899
|
}
|
|
874
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
875
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
900
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIFilterButton, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
901
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIFilterButton, isStandalone: true, selector: "ntyui-filter-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, waitingText: { classPropertyName: "waitingText", publicName: "waitingText", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked", onSearch: "onSearch", isSearchOpen: "isSearchOpen" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, viewQueries: [{ propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\n mat-button\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n class=\"filter-button\"\n [style.background-color]=\"buttonBackgroundColor()\"\n>\n @if (icon()){\n <mat-icon [style.color]=\"iconColor()\">{{ icon() }}</mat-icon>\n }\n</button>\n\n@if (showFilterInput()) {\n<input\n #filterInput\n type=\"text\"\n class=\"filter-input\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"_searchValue()\"\n (ngModelChange)=\"onSearchInputChange($event)\"\n (click)=\"onFilterInputClick($event)\"\n/>\n}\n", styles: ["@charset \"UTF-8\";.example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.filter-input{position:absolute;z-index:10;width:300px;height:30px;border-radius:5px}.filter-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin-right:2px;height:30px;border-radius:5px}.filter-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.filter-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
876
902
|
}
|
|
877
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
903
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIFilterButton, decorators: [{
|
|
878
904
|
type: Component,
|
|
879
|
-
args: [{ selector: 'ntyui-filter-button', imports: [MatButtonModule, MatIconModule,
|
|
905
|
+
args: [{ selector: 'ntyui-filter-button', imports: [MatButtonModule, MatIconModule, FormsModule], template: "<button\n mat-button\n [disabled]=\"isDisabled()\"\n (click)=\"onClicked()\"\n class=\"filter-button\"\n [style.background-color]=\"buttonBackgroundColor()\"\n>\n @if (icon()){\n <mat-icon [style.color]=\"iconColor()\">{{ icon() }}</mat-icon>\n }\n</button>\n\n@if (showFilterInput()) {\n<input\n #filterInput\n type=\"text\"\n class=\"filter-input\"\n [placeholder]=\"placeholder()\"\n [ngModel]=\"_searchValue()\"\n (ngModelChange)=\"onSearchInputChange($event)\"\n (click)=\"onFilterInputClick($event)\"\n/>\n}\n", styles: ["@charset \"UTF-8\";.example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.filter-input{position:absolute;z-index:10;width:300px;height:30px;border-radius:5px}.filter-button{flex-direction:row-reverse;width:25px;min-width:25px;padding:0;margin-right:2px;height:30px;border-radius:5px}.filter-button mat-icon{font-size:20px;width:20px;height:20px;margin:0;padding:0}.filter-button:hover{background-color:var(--mat-sys-primary);color:var(--mat-sys-surface);border-radius:5px;height:30px}\n"] }]
|
|
880
906
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], waitingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "waitingText", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], filterInput: [{ type: i0.ViewChild, args: ['filterInput', { isSignal: true }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], isSearchOpen: [{ type: i0.Output, args: ["isSearchOpen"] }], handleDocumentClick: [{
|
|
881
907
|
type: HostListener,
|
|
882
908
|
args: ['document:click', ['$event']]
|
|
@@ -904,24 +930,23 @@ class NettyUINumberInput extends UiBase {
|
|
|
904
930
|
}, 2000);
|
|
905
931
|
}
|
|
906
932
|
}
|
|
907
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
908
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
933
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUINumberInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUINumberInput, isStandalone: true, selector: "ntyui-number-input", providers: [
|
|
909
935
|
{
|
|
910
936
|
provide: NG_VALUE_ACCESSOR,
|
|
911
937
|
useExisting: forwardRef(() => NettyUINumberInput),
|
|
912
938
|
multi: true,
|
|
913
939
|
},
|
|
914
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keydown.enter)=\"calculateExpression($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type:
|
|
940
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n name=\"calculation\"\n #calcInput\n class=\"calculation-input\"\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keydown.enter)=\"calculateExpression($event)\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n } @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.calculation-input{text-align:right;padding-left:-24px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
915
941
|
}
|
|
916
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUINumberInput, decorators: [{
|
|
917
943
|
type: Component,
|
|
918
944
|
args: [{ selector: 'ntyui-number-input', imports: [
|
|
919
945
|
MatInputModule,
|
|
920
946
|
MatFormFieldModule,
|
|
921
947
|
FormsModule,
|
|
922
948
|
MatIconModule,
|
|
923
|
-
|
|
924
|
-
ReactiveFormsModule,
|
|
949
|
+
ReactiveFormsModule
|
|
925
950
|
], providers: [
|
|
926
951
|
{
|
|
927
952
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -937,24 +962,23 @@ class NettyUISearchInput extends UiBase {
|
|
|
937
962
|
emitSearch() {
|
|
938
963
|
this.search.emit(this.value());
|
|
939
964
|
}
|
|
940
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
941
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
965
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUISearchInput, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUISearchInput, isStandalone: true, selector: "ntyui-search-input", outputs: { search: "search" }, providers: [
|
|
942
967
|
{
|
|
943
968
|
provide: NG_VALUE_ACCESSOR,
|
|
944
969
|
useExisting: forwardRef(() => NettyUISearchInput),
|
|
945
970
|
multi: true,
|
|
946
971
|
},
|
|
947
|
-
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"emitSearch()\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n }\n\n <button\n class=\"search-icon\"\n mat-icon-button\n matSuffix\n (click)=\"emitSearch()\"\n aria-label=\"Search\"\n >\n <mat-icon matSuffix>search</mat-icon>\n </button>\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type:
|
|
972
|
+
], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n type=\"text\"\n matInput\n [placeholder]=\"placeholder()\"\n [(ngModel)]=\"value\"\n (input)=\"onInputChange($event)\"\n (keyup.enter)=\"emitSearch()\"\n />\n\n @if (value() && !disabled()) {\n <button\n mat-icon-button\n matSuffix\n (click)=\"clearInput()\"\n aria-label=\"Clear\"\n class=\"clear-btn number-clear-btn\"\n >\n <mat-icon>cancel</mat-icon>\n </button>\n }\n\n <button\n class=\"search-icon\"\n mat-icon-button\n matSuffix\n (click)=\"emitSearch()\"\n aria-label=\"Search\"\n >\n <mat-icon matSuffix>search</mat-icon>\n </button>\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
948
973
|
}
|
|
949
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUISearchInput, decorators: [{
|
|
950
975
|
type: Component,
|
|
951
976
|
args: [{ selector: 'ntyui-search-input', imports: [
|
|
952
977
|
FormsModule,
|
|
953
978
|
MatFormFieldModule,
|
|
954
979
|
MatInputModule,
|
|
955
980
|
MatIconModule,
|
|
956
|
-
|
|
957
|
-
ReactiveFormsModule,
|
|
981
|
+
ReactiveFormsModule
|
|
958
982
|
], providers: [
|
|
959
983
|
{
|
|
960
984
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -966,10 +990,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImpo
|
|
|
966
990
|
|
|
967
991
|
class NettyUISelect extends UiBase {
|
|
968
992
|
// Input properties
|
|
969
|
-
showNoneOption = input(false, ...(ngDevMode ?
|
|
970
|
-
nullAllowed = input(false, ...(ngDevMode ?
|
|
971
|
-
multiple = input(false, ...(ngDevMode ?
|
|
972
|
-
showCustomTrigger = input(false, ...(ngDevMode ?
|
|
993
|
+
showNoneOption = input(false, { ...(ngDevMode ? { debugName: "showNoneOption" } : {}), transform: booleanAttribute });
|
|
994
|
+
nullAllowed = input(false, { ...(ngDevMode ? { debugName: "nullAllowed" } : {}), transform: booleanAttribute });
|
|
995
|
+
multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : {}), transform: booleanAttribute });
|
|
996
|
+
showCustomTrigger = input(false, { ...(ngDevMode ? { debugName: "showCustomTrigger" } : {}), transform: booleanAttribute });
|
|
973
997
|
enumList = model([], ...(ngDevMode ? [{ debugName: "enumList" }] : []));
|
|
974
998
|
selectedValue = model(this.multiple() ? [] : null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : []));
|
|
975
999
|
// Template reference
|
|
@@ -1016,23 +1040,22 @@ class NettyUISelect extends UiBase {
|
|
|
1016
1040
|
this.selectedValue.set(value);
|
|
1017
1041
|
}
|
|
1018
1042
|
}
|
|
1019
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1020
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1043
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUISelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUISelect, isStandalone: true, selector: "ntyui-select", inputs: { showNoneOption: { classPropertyName: "showNoneOption", publicName: "showNoneOption", isSignal: true, isRequired: false, transformFunction: null }, nullAllowed: { classPropertyName: "nullAllowed", publicName: "nullAllowed", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showCustomTrigger: { classPropertyName: "showCustomTrigger", publicName: "showCustomTrigger", isSignal: true, isRequired: false, transformFunction: null }, enumList: { classPropertyName: "enumList", publicName: "enumList", isSignal: true, isRequired: false, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { enumList: "enumListChange", selectedValue: "selectedValueChange" }, providers: [
|
|
1021
1045
|
{
|
|
1022
1046
|
provide: NG_VALUE_ACCESSOR,
|
|
1023
1047
|
useExisting: forwardRef(() => NettyUISelect),
|
|
1024
1048
|
multi: true,
|
|
1025
1049
|
},
|
|
1026
|
-
], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"placeholder()\"\n [required]=\"required() && !nullAllowed()\"\n [multiple]=\"multiple()\"\n >\n <!-- Custom trigger -->\n @if (showCustomTrigger()) {\n <mat-select-trigger>\n @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n ((selectedValue()?.length || 0) > 1) {\n <span class=\"additional-selection\">\n (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n 'others' }})\n </span>\n } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n </mat-select-trigger>\n }\n <!-- None option -->\n @if (hasNoneOption()) {\n <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n }\n <!-- Dynamic options -->\n @for (option of enumList(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n }\n </mat-select>\n\n @if (inputModel?.hasError('required')) {\n <mat-error>{{ getErrorMessage() }}</mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type:
|
|
1050
|
+
], viewQueries: [{ propertyName: "selectModel", first: true, predicate: ["selectModel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n class=\"example-full-width\"\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && value()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <mat-select\n #inputModel=\"ngModel\"\n [(ngModel)]=\"selectedValue\"\n [placeholder]=\"placeholder()\"\n [required]=\"required() && !nullAllowed()\"\n [multiple]=\"multiple()\"\n >\n <!-- Custom trigger -->\n @if (showCustomTrigger()) {\n <mat-select-trigger>\n @if (multiple()) { {{ getSelectedText(selectedValue()?.[0]) || '' }} @if\n ((selectedValue()?.length || 0) > 1) {\n <span class=\"additional-selection\">\n (+{{ getSelectedCount() - 1 }} {{ getSelectedCount() === 2 ? 'other' :\n 'others' }})\n </span>\n } } @else { {{ getSelectedText(selectedValue()) || '' }} }\n </mat-select-trigger>\n }\n <!-- None option -->\n @if (hasNoneOption()) {\n <mat-option [value]=\"null\"> {{ placeholder() || 'Hepsi' }} </mat-option>\n }\n <!-- Dynamic options -->\n @for (option of enumList(); track option.value) {\n <mat-option [value]=\"option.value\"> {{ option.text }} </mat-option>\n }\n </mat-select>\n\n @if (inputModel?.hasError('required')) {\n <mat-error>{{ getErrorMessage() }}</mat-error>\n }\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.example-full-width{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i2$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }] });
|
|
1027
1051
|
}
|
|
1028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1052
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUISelect, decorators: [{
|
|
1029
1053
|
type: Component,
|
|
1030
1054
|
args: [{ selector: 'ntyui-select', imports: [
|
|
1031
1055
|
MatFormFieldModule,
|
|
1032
1056
|
MatSelectModule,
|
|
1033
1057
|
FormsModule,
|
|
1034
|
-
|
|
1035
|
-
MatInputModule,
|
|
1058
|
+
MatInputModule
|
|
1036
1059
|
], providers: [
|
|
1037
1060
|
{
|
|
1038
1061
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1069,10 +1092,10 @@ class NettyUITimePicker extends UiBase {
|
|
|
1069
1092
|
fixedDate.setMinutes(newTime.getMinutes());
|
|
1070
1093
|
this.timeValue.set(fixedDate);
|
|
1071
1094
|
}
|
|
1072
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1073
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1095
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1096
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUITimePicker, isStandalone: true, selector: "ntyui-time-picker", inputs: { timeValue: { classPropertyName: "timeValue", publicName: "timeValue", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeValue: "timeValueChange" }, providers: [provideNativeDateAdapter()], usesInheritance: true, ngImport: i0, template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"placeholder()\"\n />\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #picker />\n <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}mat-form-field{margin-right:16px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i6.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i6.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i6.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1074
1097
|
}
|
|
1075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1098
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITimePicker, decorators: [{
|
|
1076
1099
|
type: Component,
|
|
1077
1100
|
args: [{ selector: 'ntyui-time-picker', imports: [
|
|
1078
1101
|
MatFormFieldModule,
|
|
@@ -1080,8 +1103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.11", ngImpo
|
|
|
1080
1103
|
MatTimepickerModule,
|
|
1081
1104
|
MatDatepickerModule,
|
|
1082
1105
|
FormsModule,
|
|
1083
|
-
|
|
1084
|
-
ReactiveFormsModule,
|
|
1106
|
+
ReactiveFormsModule
|
|
1085
1107
|
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideNativeDateAdapter()], template: "<mat-form-field\n [appearance]=\"appearance()\"\n [class.required-field]=\"required()\"\n [class.required-with-value]=\"required() && timeValue()\"\n>\n @if (label()) {\n <mat-label>{{ label() }}</mat-label>\n }\n\n <input\n #inputModel=\"ngModel\"\n matInput\n [matTimepicker]=\"picker\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"onTimeChange($event)\"\n [placeholder]=\"placeholder()\"\n />\n\n @if (inputModel?.invalid && (inputModel?.dirty || inputModel?.touched)) {\n <mat-error> {{ getErrorMessage() }} </mat-error>\n }\n\n <mat-timepicker #picker />\n <mat-timepicker-toggle [for]=\"picker\" matSuffix />\n</mat-form-field>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}mat-form-field{margin-right:16px}\n"] }]
|
|
1086
1108
|
}], ctorParameters: () => [], propDecorators: { timeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeValue", required: false }] }, { type: i0.Output, args: ["timeValueChange"] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }] } });
|
|
1087
1109
|
|
|
@@ -1325,17 +1347,16 @@ class NettyUITree {
|
|
|
1325
1347
|
}
|
|
1326
1348
|
return node.children.every((child) => child.disabled || this.allChildrenDisabled(child));
|
|
1327
1349
|
}
|
|
1328
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1329
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1350
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITree, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1351
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUITree, isStandalone: true, selector: "ntyui-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectedIds: { classPropertyName: "selectedIds", publicName: "selectedIds", isSignal: true, isRequired: false, transformFunction: null }, selectBranch: { classPropertyName: "selectBranch", publicName: "selectBranch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", selectionMode: "selectionModeChange", selectedIds: "selectedIdsChange" }, ngImport: i0, template: "<div class=\"tree-container\">\n @for (node of treeData(); track node.id) {\n <div class=\"tree-node\" [style.margin-left.px]=\"getNodeLevel(node) * 24\">\n <!-- Expand/Collapse button -->\n @if (node.children && node.children.length > 0) {\n <button\n mat-icon-button\n class=\"expand-btn\"\n (click)=\"toggleExpand(node);\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n >\n <mat-icon>{{ node.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n </button>\n } @else {\n <!-- Empty space for leaf nodes -->\n <div class=\"expand-spacer\"></div>\n }\n\n <!-- Checkbox for multiple selection -->\n @if (selectionMode() === 'multiple') {\n <mat-checkbox\n class=\"node-checkbox\"\n [checked]=\"node.selected || false\"\n [indeterminate]=\"node.indeterminate || false\"\n (change)=\"onCheckboxChange(node, $event)\"\n [id]=\"'checkbox-' + node.id\"\n [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n >\n {{ node.text }}\n </mat-checkbox>\n }\n\n <!-- Radio button for single selection -->\n @if (selectionMode() === 'single') {\n <mat-radio-button\n class=\"node-radio\"\n [checked]=\"node.selected || false\"\n (change)=\"onRadioChange(node)\"\n [name]=\"'tree-radio-' + componentId\"\n [id]=\"'radio-' + node.id\"\n [value]=\"node.id\"\n [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n >\n {{ node.text }}\n </mat-radio-button>\n }\n </div>\n }\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.tree-container{font-family:Roboto,sans-serif;-webkit-user-select:none;user-select:none;padding:8px 0}.tree-node{display:flex;align-items:center;padding:4px 0;min-height:40px}.expand-btn{width:32px;height:32px;margin-right:8px;flex-shrink:0}.expand-btn mat-icon{font-size:18px;width:18px;height:18px}.expand-spacer{width:40px;display:inline-block;flex-shrink:0}.node-checkbox,.node-radio{flex-grow:1}.node-checkbox ::ng-deep .mat-mdc-checkbox-label,.node-radio ::ng-deep .mat-mdc-radio-label{width:100%}.tree-node:hover{background-color:#0000000a;border-radius:4px}.node-checkbox.mat-mdc-checkbox-checked,.node-radio.mat-mdc-radio-checked{background-color:#3f51b514;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i2$4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
1330
1352
|
}
|
|
1331
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUITree, decorators: [{
|
|
1332
1354
|
type: Component,
|
|
1333
1355
|
args: [{ selector: 'ntyui-tree', imports: [
|
|
1334
|
-
CommonModule,
|
|
1335
1356
|
MatCheckboxModule,
|
|
1336
1357
|
MatRadioModule,
|
|
1337
1358
|
MatButtonModule,
|
|
1338
|
-
MatIconModule
|
|
1359
|
+
MatIconModule
|
|
1339
1360
|
], template: "<div class=\"tree-container\">\n @for (node of treeData(); track node.id) {\n <div class=\"tree-node\" [style.margin-left.px]=\"getNodeLevel(node) * 24\">\n <!-- Expand/Collapse button -->\n @if (node.children && node.children.length > 0) {\n <button\n mat-icon-button\n class=\"expand-btn\"\n (click)=\"toggleExpand(node);\"\n [attr.aria-label]=\"node.expanded ? 'Collapse' : 'Expand'\"\n >\n <mat-icon>{{ node.expanded ? 'expand_less' : 'expand_more' }}</mat-icon>\n </button>\n } @else {\n <!-- Empty space for leaf nodes -->\n <div class=\"expand-spacer\"></div>\n }\n\n <!-- Checkbox for multiple selection -->\n @if (selectionMode() === 'multiple') {\n <mat-checkbox\n class=\"node-checkbox\"\n [checked]=\"node.selected || false\"\n [indeterminate]=\"node.indeterminate || false\"\n (change)=\"onCheckboxChange(node, $event)\"\n [id]=\"'checkbox-' + node.id\"\n [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n >\n {{ node.text }}\n </mat-checkbox>\n }\n\n <!-- Radio button for single selection -->\n @if (selectionMode() === 'single') {\n <mat-radio-button\n class=\"node-radio\"\n [checked]=\"node.selected || false\"\n (change)=\"onRadioChange(node)\"\n [name]=\"'tree-radio-' + componentId\"\n [id]=\"'radio-' + node.id\"\n [value]=\"node.id\"\n [disabled]=\"node.disabled || allChildrenDisabled(node)\"\n >\n {{ node.text }}\n </mat-radio-button>\n }\n </div>\n }\n</div>\n", styles: [".example-full-width{width:100%;max-width:500px}.mat-mdc-form-field-subscript-wrapper{width:auto;height:0}.clear-btn{background:none;border:none;box-shadow:none;cursor:pointer}.search-icon{background:none;border:none;box-shadow:none;opacity:1;cursor:pointer}.search-icon:hover,.clear-btn:hover{color:var(--mat-sys-primary)}.required-field{background-color:var(--mat-sys-required)}.required-with-value{background-color:transparent!important}::ng-deep .circle .mdc-checkbox__background{border-radius:50%!important}::ng-deep .circle .mdc-checkbox__background:before{border-radius:50%!important}.tree-container{font-family:Roboto,sans-serif;-webkit-user-select:none;user-select:none;padding:8px 0}.tree-node{display:flex;align-items:center;padding:4px 0;min-height:40px}.expand-btn{width:32px;height:32px;margin-right:8px;flex-shrink:0}.expand-btn mat-icon{font-size:18px;width:18px;height:18px}.expand-spacer{width:40px;display:inline-block;flex-shrink:0}.node-checkbox,.node-radio{flex-grow:1}.node-checkbox ::ng-deep .mat-mdc-checkbox-label,.node-radio ::ng-deep .mat-mdc-radio-label{width:100%}.tree-node:hover{background-color:#0000000a;border-radius:4px}.node-checkbox.mat-mdc-checkbox-checked,.node-radio.mat-mdc-radio-checked{background-color:#3f51b514;border-radius:4px}\n"] }]
|
|
1340
1361
|
}], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }, { type: i0.Output, args: ["dataChange"] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }, { type: i0.Output, args: ["selectionModeChange"] }], selectedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIds", required: false }] }, { type: i0.Output, args: ["selectedIdsChange"] }], selectBranch: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectBranch", required: false }] }] } });
|
|
1341
1362
|
|
|
@@ -1434,10 +1455,10 @@ class NettyUIColorPicker {
|
|
|
1434
1455
|
this.colorChange.emit(color);
|
|
1435
1456
|
this.closePicker();
|
|
1436
1457
|
}
|
|
1437
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1458
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIColorPicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: NettyUIColorPicker, isStandalone: true, selector: "ntyui-color-picker", inputs: { selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, customColorPresets: { classPropertyName: "customColorPresets", publicName: "customColorPresets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedColor: "selectedColorChange", colorChange: "colorChange" }, viewQueries: [{ propertyName: "colorInput", first: true, predicate: ["colorInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-form-field appearance=\"outline\" class=\"color-picker-input-container\">\n <span\n matPrefix\n class=\"color-preview\"\n [style.background-color]=\"selectedColor()\"\n (click)=\"togglePicker()\"\n ></span>\n\n <input\n matInput\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"onInputChange($event)\"\n placeholder=\"Renk Kodu (\u00F6rn: #FFFFFF)\"\n />\n\n <mat-icon matSuffix (click)=\"togglePicker()\">search</mat-icon>\n</mat-form-field>\n\n<input\n type=\"color\"\n class=\"hidden-color-input\"\n #colorInput\n [value]=\"selectedColor()\"\n (change)=\"onColorPickerChange($event)\"\n/>\n\n<!-- Custom color picker pop-up -->\n@if (isPickerVisible()) {\n<div class=\"custom-color-picker-overlay\" (click)=\"closePicker()\">\n <div class=\"custom-color-picker\" (click)=\"$event.stopPropagation()\">\n <!-- Header -->\n <div class=\"picker-header\">\n <h3>{{'@choose_Color' | translate}}</h3>\n <button class=\"close-btn\" (click)=\"closePicker()\" type=\"button\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <!-- Content -->\n <div class=\"picker-content\">\n <!-- Custom color picker -->\n <div class=\"color-input-section\">\n <label class=\"section-label\"\n >{{'@choose_Custom_Color' | translate}}</label\n >\n <input\n type=\"color\"\n [value]=\"selectedColor()\"\n (change)=\"onCustomColorChange($event)\"\n class=\"native-color-input\"\n />\n <span class=\"current-color\"\n >{{'@available' | translate}}: {{ selectedColor() }}</span\n >\n </div>\n\n <!-- Custom colors -->\n @if (hasCustomColors()) {\n <div class=\"color-presets-section\">\n <label class=\"section-label\">{{'@defined_Colors' | translate}}</label>\n <div class=\"color-presets-grid\">\n @for (color of customColorPresets(); track color) {\n <div\n class=\"color-preset\"\n [style.background-color]=\"color\"\n (click)=\"selectColor(color)\"\n [class.selected]=\"color === selectedColor()\"\n [title]=\"color\"\n >\n @if (color === selectedColor()) {\n <mat-icon class=\"check-icon\">check</mat-icon>\n }\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Standard colors -->\n <div class=\"color-presets-section\">\n <label class=\"section-label\">\n {{ hasCustomColors() ? ('@standard_Colors' | translate) :\n ('@color_Palette' | translate) }}\n </label>\n <div class=\"color-presets-grid\">\n @for (color of defaultColorPresets(); track color) {\n <div\n class=\"color-preset\"\n [style.background-color]=\"color\"\n (click)=\"selectColor(color)\"\n [class.selected]=\"color === selectedColor()\"\n [title]=\"color\"\n >\n @if (color === selectedColor()) {\n <mat-icon class=\"check-icon\">check</mat-icon>\n }\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n}\n", styles: [".color-picker-input-container{width:100%;max-width:280px}.color-preview{display:inline-block;width:20px;height:20px;margin-left:16px;border-radius:50%;border:2px solid #e0e0e0;cursor:pointer;margin-right:8px;transition:all .2s ease}.color-preview:hover{border-color:#999;transform:scale(1.1)}.hidden-color-input{display:none}.custom-color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}.custom-color-picker{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0003;width:min(90vw,340px);max-height:min(80vh,600px);overflow:hidden;animation:slideUp .2s ease}.picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#fff}.picker-header h3{margin:0;font-size:16px;font-weight:600;color:#333}.picker-header .close-btn{background:none;border:none;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%}.picker-header .close-btn:hover{background-color:#f5f5f5;color:#333}.picker-header .close-btn mat-icon{font-size:20px;width:20px;height:20px}.picker-content{padding:20px;display:flex;flex-direction:column;gap:24px}.color-input-section{display:flex;flex-direction:column;gap:12px}.color-input-section .section-label{font-weight:600;color:#333;font-size:14px}.color-input-section .native-color-input{width:100%;height:48px;cursor:pointer;border:2px solid #e0e0e0;border-radius:8px}.color-input-section .native-color-input:hover{border-color:#ccc}.color-input-section .current-color{font-size:12px;color:#666;text-align:center}.color-presets-section .section-label{display:block;font-weight:600;color:#333;font-size:14px;margin-bottom:12px}.color-presets-section .color-presets-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.color-presets-section .color-presets-grid .color-preset{position:relative;width:100%;aspect-ratio:1;border-radius:8px;cursor:pointer;border:2px solid #e0e0e0;transition:all .2s ease}.color-presets-section .color-presets-grid .color-preset:hover{transform:scale(1.1);border-color:#999;box-shadow:0 4px 12px #00000026}.color-presets-section .color-presets-grid .color-preset.selected{border-color:#333;transform:scale(1.05)}.color-presets-section .color-presets-grid .color-preset .check-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;width:16px;height:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
|
|
1439
1460
|
}
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyUIColorPicker, decorators: [{
|
|
1441
1462
|
type: Component,
|
|
1442
1463
|
args: [{ selector: 'ntyui-color-picker', imports: [
|
|
1443
1464
|
FormsModule,
|
|
@@ -1480,10 +1501,10 @@ class NettyEnumStorageProxy {
|
|
|
1480
1501
|
return [];
|
|
1481
1502
|
return JSON.parse(data);
|
|
1482
1503
|
}
|
|
1483
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1484
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1504
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyEnumStorageProxy, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1505
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyEnumStorageProxy, providedIn: 'root' });
|
|
1485
1506
|
}
|
|
1486
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: NettyEnumStorageProxy, decorators: [{
|
|
1487
1508
|
type: Injectable,
|
|
1488
1509
|
args: [{
|
|
1489
1510
|
providedIn: 'root',
|