@ardium-ui/ui 3.3.0-alpha.4 → 3.3.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/_internal/form-field-component.mjs +4 -28
- package/esm2022/lib/_internal/ngmodel-component.mjs +43 -3
- package/esm2022/lib/_internal/selectable-list-component.mjs +1 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +2 -3
- package/esm2022/lib/checkbox-list/checkbox-list.component.mjs +2 -4
- package/esm2022/lib/file-inputs/file-input-base.mjs +3 -4
- package/esm2022/lib/radio/radio/radio.component.mjs +2 -4
- package/esm2022/lib/radio/radio-group.component.mjs +3 -3
- package/esm2022/lib/slider/range-slider/range-slider.component.mjs +2 -1
- package/esm2022/lib/table/table.component.mjs +1 -1
- package/fesm2022/ardium-ui-ui.mjs +48 -37
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/form-field-component.d.ts +3 -13
- package/lib/_internal/ngmodel-component.d.ts +13 -3
- package/lib/_internal/selectable-list-component.d.ts +0 -1
- package/lib/checkbox/checkbox.component.d.ts +1 -2
- package/lib/checkbox-list/checkbox-list.component.d.ts +1 -2
- package/lib/file-inputs/file-input-base.d.ts +1 -2
- package/lib/radio/radio/radio.component.d.ts +1 -2
- package/lib/radio/radio-group.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import 'first-last';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
|
|
3
|
+
import { input, signal, Directive, Input, HostBinding, computed, output, ViewChildren, inject, Injector, runInInjectionContext, InjectionToken, effect, viewChildren, forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, NgModule, viewChild, contentChild, ViewContainerRef, TemplateRef, HostListener, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, ViewChild, ContentChild, contentChildren, Renderer2, Injectable } from '@angular/core';
|
|
4
4
|
import { NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
5
|
import * as i4 from '@ardium-ui/devkit';
|
|
6
6
|
import { coerceBooleanProperty, coerceNumberProperty, coerceArrayProperty, ArdiumClickOutsideEventModule, ArdiumInnerHTMLModule, ArdiumFilesizePipeModule, ArdiumFilenamePipeModule, ArdiumFileextPipeModule, ArdiumHoldEventModule } from '@ardium-ui/devkit';
|
|
7
|
+
import { toObservable } from '@angular/core/rxjs-interop';
|
|
7
8
|
import { map, Subject, merge, takeUntil, startWith, BehaviorSubject } from 'rxjs';
|
|
8
9
|
import { TakeChance } from 'take-chance';
|
|
9
10
|
import { isAnyString, isNull, isArray, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
|
|
@@ -159,6 +160,19 @@ const _ngModelComponentDefaults = {
|
|
|
159
160
|
* **Warning**: `writeValue` function should be implemented on the child component!
|
|
160
161
|
*/
|
|
161
162
|
class _NgModelComponentBase extends _FocusableComponentBase {
|
|
163
|
+
constructor() {
|
|
164
|
+
super(...arguments);
|
|
165
|
+
//! form field related
|
|
166
|
+
this._injector = inject(Injector);
|
|
167
|
+
this._ngControl = null;
|
|
168
|
+
this.htmlId = input(TakeChance.id());
|
|
169
|
+
this._hasError = input(undefined, {
|
|
170
|
+
transform: v => coerceBooleanProperty(v),
|
|
171
|
+
alias: 'hasError',
|
|
172
|
+
});
|
|
173
|
+
this._hasErrorInControl = signal(false);
|
|
174
|
+
this.hasError = computed(() => this._hasError() ?? (this.wasTouched() && this._hasErrorInControl()));
|
|
175
|
+
}
|
|
162
176
|
/**
|
|
163
177
|
* Registers a function to handle touched state. Required by ControlValueAccessor.
|
|
164
178
|
* @param fn The function to register.
|
|
@@ -185,8 +199,30 @@ class _NgModelComponentBase extends _FocusableComponentBase {
|
|
|
185
199
|
super.onBlur(event);
|
|
186
200
|
this._onTouchedRegistered?.();
|
|
187
201
|
}
|
|
202
|
+
ngOnInit() {
|
|
203
|
+
this._ngControl = this._injector.get(NgControl, null);
|
|
204
|
+
if (this._ngControl) {
|
|
205
|
+
this._ngControl.valueAccessor = this;
|
|
206
|
+
this._hasErrorInControl.set(this._ngControl.status === 'INVALID');
|
|
207
|
+
this._statusChangesSub = this._ngControl.statusChanges
|
|
208
|
+
?.pipe(map(v => v === 'INVALID'))
|
|
209
|
+
.subscribe(v => this._hasErrorInControl.set(v));
|
|
210
|
+
if (!this._ngControl.control)
|
|
211
|
+
return;
|
|
212
|
+
runInInjectionContext(this._injector, () => {
|
|
213
|
+
// do not read the next line of code if you are easily frightened
|
|
214
|
+
// I'm not proud of this part, but it had to be done. God please forgive me
|
|
215
|
+
// I didn't find any other feasible way to detect when the control changes its touched state
|
|
216
|
+
// so it had to be hacked like this
|
|
217
|
+
toObservable(this._ngControl?.control?.touchedReactive)?.subscribe(v => this.wasTouched.set(v));
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
ngOnDestroy() {
|
|
222
|
+
this._statusChangesSub?.unsubscribe();
|
|
223
|
+
}
|
|
188
224
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _NgModelComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
189
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
225
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _NgModelComponentBase, inputs: { htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: true, isRequired: false, transformFunction: null }, _hasError: { classPropertyName: "_hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
190
226
|
}
|
|
191
227
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _NgModelComponentBase, decorators: [{
|
|
192
228
|
type: Directive
|
|
@@ -204,39 +240,17 @@ const _formFieldComponentDefaults = {
|
|
|
204
240
|
class _FormFieldComponentBase extends _NgModelComponentBase {
|
|
205
241
|
constructor() {
|
|
206
242
|
super(...arguments);
|
|
207
|
-
this._injector = inject(Injector);
|
|
208
|
-
this._ngControl = null;
|
|
209
243
|
this._required = input(undefined, {
|
|
210
244
|
transform: v => coerceBooleanProperty(v),
|
|
211
245
|
alias: 'required',
|
|
212
246
|
});
|
|
213
|
-
this.htmlId = input(TakeChance.id());
|
|
214
|
-
this._hasError = input(undefined, {
|
|
215
|
-
transform: v => coerceBooleanProperty(v),
|
|
216
|
-
alias: 'hasError',
|
|
217
|
-
});
|
|
218
|
-
this._hasErrorInControl = signal(false);
|
|
219
|
-
this.hasError = computed(() => this._hasError() ?? (this.wasTouched() && this._hasErrorInControl()));
|
|
220
247
|
this.isSuccess = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
221
248
|
}
|
|
222
|
-
ngOnInit() {
|
|
223
|
-
this._ngControl = this._injector.get(NgControl, null);
|
|
224
|
-
if (this._ngControl) {
|
|
225
|
-
this._ngControl.valueAccessor = this;
|
|
226
|
-
this._hasErrorInControl.set(this._ngControl.status === 'INVALID');
|
|
227
|
-
this._statusChangesSub = this._ngControl.statusChanges
|
|
228
|
-
?.pipe(map(v => v === 'INVALID'))
|
|
229
|
-
.subscribe(v => this._hasErrorInControl.set(v));
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
249
|
get required() {
|
|
233
250
|
return this._required() ?? !!this._ngControl?.control?.hasValidator(Validators.required);
|
|
234
251
|
}
|
|
235
|
-
ngOnDestroy() {
|
|
236
|
-
this._statusChangesSub?.unsubscribe();
|
|
237
|
-
}
|
|
238
252
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
239
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null },
|
|
253
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: _FormFieldComponentBase, inputs: { _required: { classPropertyName: "_required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, isSuccess: { classPropertyName: "isSuccess", publicName: "isSuccess", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
|
|
240
254
|
}
|
|
241
255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FormFieldComponentBase, decorators: [{
|
|
242
256
|
type: Directive
|
|
@@ -4471,7 +4485,6 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4471
4485
|
constructor() {
|
|
4472
4486
|
super(...arguments);
|
|
4473
4487
|
this.fileInputEl = viewChild('fileInput');
|
|
4474
|
-
this.htmlId = input(TakeChance.id());
|
|
4475
4488
|
this.name = input('');
|
|
4476
4489
|
this._wasViewInit = false;
|
|
4477
4490
|
//! appearance
|
|
@@ -4493,6 +4506,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4493
4506
|
this._beforeDragoverState = 'idle';
|
|
4494
4507
|
}
|
|
4495
4508
|
ngOnInit() {
|
|
4509
|
+
super.ngOnInit();
|
|
4496
4510
|
if (!(window.File && window.FileReader && window.Blob)) {
|
|
4497
4511
|
console.error(new Error(`ARD-${this.componentId}0: Cannot use Ardium UI file features because this browser does not support file handling!`));
|
|
4498
4512
|
}
|
|
@@ -4607,7 +4621,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4607
4621
|
inputEl.files = dataTransfer.files;
|
|
4608
4622
|
}
|
|
4609
4623
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4610
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: {
|
|
4624
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "18.2.13", type: _FileInputComponentBase, inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, blockAfterUpload: { classPropertyName: "blockAfterUpload", publicName: "blockAfterUpload", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", dragFilesEvent: "dragFiles" }, viewQueries: [{ propertyName: "fileInputEl", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 }); }
|
|
4611
4625
|
}
|
|
4612
4626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, decorators: [{
|
|
4613
4627
|
type: Directive
|
|
@@ -5909,7 +5923,6 @@ const CheckboxState = {
|
|
|
5909
5923
|
class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
5910
5924
|
constructor(defaults) {
|
|
5911
5925
|
super(defaults);
|
|
5912
|
-
this.htmlId = input('');
|
|
5913
5926
|
//! appearance
|
|
5914
5927
|
this.color = input(this._DEFAULTS.color);
|
|
5915
5928
|
this.unselectedColor = input(this._DEFAULTS.unselectedColor);
|
|
@@ -5933,7 +5946,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
5933
5946
|
this._emitChange();
|
|
5934
5947
|
}
|
|
5935
5948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5936
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: {
|
|
5949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, unselectedColor: { classPropertyName: "unselectedColor", publicName: "unselectedColor", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { state: "stateChange" }, providers: [
|
|
5937
5950
|
{
|
|
5938
5951
|
provide: NG_VALUE_ACCESSOR,
|
|
5939
5952
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
@@ -5986,7 +5999,6 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
5986
5999
|
constructor(defaults) {
|
|
5987
6000
|
super(defaults);
|
|
5988
6001
|
this._changeDetector = inject(ChangeDetectorRef);
|
|
5989
|
-
this.htmlId = input(TakeChance.id());
|
|
5990
6002
|
this.value = input();
|
|
5991
6003
|
//! appearance
|
|
5992
6004
|
this.color = input(this._DEFAULTS.color);
|
|
@@ -6014,7 +6026,7 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
6014
6026
|
this._changeDetector.markForCheck();
|
|
6015
6027
|
}
|
|
6016
6028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, deps: [{ token: ARD_RADIO_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6017
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: {
|
|
6029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ArdiumRadioComponent, selector: "ard-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n #focusableElement\n class=\"ard-radio\"\n type=\"button\"\n [ngClass]=\"ngClasses()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n (mousedown)=\"onMousedown()\"\n (mouseup)=\"onMouseup()\"\n [tabindex]=\"tabIndex()\"\n>\n <div class=\"ard-radio-circles\">\n <div class=\"ard-radio-outer-circle\"></div>\n <div class=\"ard-radio-inner-circle\"></div>\n <div class=\"ard-focus-overlay\"></div>\n <div class=\"ard-hitbox\"></div>\n </div>\n <label [for]=\"htmlId()\">\n <ng-content></ng-content>\n </label>\n</button>\n\n<input\n class=\"ard-radio-input-element\"\n type=\"radio\"\n [name]=\"name()\"\n [id]=\"htmlId()\"\n [checked]=\"selected()\"\n #radio\n/>\n", styles: [".ard-radio{border:none;background:none}.ard-radio>label{pointer-events:none}ard-radio>.ard-radio-input-element{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6018
6030
|
}
|
|
6019
6031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
|
|
6020
6032
|
type: Component,
|
|
@@ -6031,7 +6043,6 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6031
6043
|
constructor() {
|
|
6032
6044
|
super(_ngModelComponentDefaults); // no need for injecting a token with default values
|
|
6033
6045
|
this._radios = contentChildren(ArdiumRadioComponent, { descendants: true });
|
|
6034
|
-
this.htmlId = input('');
|
|
6035
6046
|
this.valueChange = output();
|
|
6036
6047
|
this.changeEvent = output({ alias: 'change' });
|
|
6037
6048
|
/**
|
|
@@ -6166,6 +6177,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6166
6177
|
}
|
|
6167
6178
|
}
|
|
6168
6179
|
ngOnDestroy() {
|
|
6180
|
+
super.ngOnDestroy();
|
|
6169
6181
|
this._destroyChildSubscriptions();
|
|
6170
6182
|
}
|
|
6171
6183
|
_destroyChildSubscriptions() {
|
|
@@ -6175,7 +6187,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6175
6187
|
this._childEventSubs = [];
|
|
6176
6188
|
}
|
|
6177
6189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6178
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: {
|
|
6190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: ArdiumRadioGroupComponent, selector: "ard-radio-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change", selected: "selectedChange" }, host: { attributes: { "role": "radiogroup" }, properties: { "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.id": "this._htmlIdHostAttribute" } }, providers: [
|
|
6179
6191
|
{
|
|
6180
6192
|
provide: NG_VALUE_ACCESSOR,
|
|
6181
6193
|
useExisting: forwardRef(() => ArdiumRadioGroupComponent),
|
|
@@ -6582,7 +6594,6 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
|
|
|
6582
6594
|
super(...arguments);
|
|
6583
6595
|
//! public constants
|
|
6584
6596
|
this.itemStorage = new SimpleItemStorage(this);
|
|
6585
|
-
this.htmlId = TakeChance.id();
|
|
6586
6597
|
this.DEFAULTS = this._DEFAULTS;
|
|
6587
6598
|
this._cd = inject(ChangeDetectorRef);
|
|
6588
6599
|
//! binding-related inputs
|
|
@@ -7349,6 +7360,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
|
|
|
7349
7360
|
this.currentHandle = signal(null);
|
|
7350
7361
|
}
|
|
7351
7362
|
ngOnInit() {
|
|
7363
|
+
super.ngOnInit();
|
|
7352
7364
|
if (this._value.low !== -Infinity && this._value.high !== Infinity)
|
|
7353
7365
|
return;
|
|
7354
7366
|
this.writeValue({ low: this.min(), high: this.max() });
|
|
@@ -8119,7 +8131,6 @@ function provideCheckboxListDefaults(config) {
|
|
|
8119
8131
|
class ArdiumCheckboxListComponent extends _NgModelComponentBase {
|
|
8120
8132
|
constructor(defaults) {
|
|
8121
8133
|
super(defaults);
|
|
8122
|
-
this.htmlId = input(TakeChance.id());
|
|
8123
8134
|
this.DEFAULTS = this._DEFAULTS;
|
|
8124
8135
|
// static values. Not meant to be changed.
|
|
8125
8136
|
this.multiselectable = signal(true);
|
|
@@ -8204,7 +8215,7 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
|
|
|
8204
8215
|
this.selectItem(v);
|
|
8205
8216
|
}
|
|
8206
8217
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, deps: [{ token: ARD_CHECKBOX_LIST_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8207
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: {
|
|
8218
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumCheckboxListComponent, selector: "ard-checkbox-list", inputs: { valueFrom: { classPropertyName: "valueFrom", publicName: "valueFrom", isSignal: true, isRequired: false, transformFunction: null }, labelFrom: { classPropertyName: "labelFrom", publicName: "labelFrom", isSignal: true, isRequired: false, transformFunction: null }, disabledFrom: { classPropertyName: "disabledFrom", publicName: "disabledFrom", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, invertDisabled: { classPropertyName: "invertDisabled", publicName: "invertDisabled", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", changeEvent: "change" }, host: { properties: { "attr.id": "this._htmlIdHostAttribute" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"ard-checkbox-list\"\n [ngClass]=\"ngClasses()\"\n>\n @for (item of items; track item.index) {\n <div\n class=\"ard-checkbox-list__item\"\n [class.ard-item-highlighted]=\"item.highlighted()\"\n [class.ard-item-disabled]=\"item.disabled()\"\n (mouseover)=\"onItemHighlight(item)\"\n (mouseleave)=\"onItemBlur()\"\n (click)=\"toggleItem(item)\"\n >\n <div class=\"ard-focus-overlay\"></div>\n <ard-checkbox\n [selected]=\"item.selected()\"\n [disabled]=\"item.disabled()\"\n [color]=\"color()\"\n [htmlId]=\"htmlId() + item.index\"\n [tabIndex]=\"tabIndex()\"\n (focus)=\"onFocus($event)\"\n (focus)=\"onItemFocus(item)\"\n (blur)=\"onBlur($event)\"\n (blur)=\"onItemBlur()\"\n (select)=\"selectItem(item)\"\n (unselect)=\"unselectItem(item)\"\n (click)=\"$event.stopPropagation()\"\n />\n <label [for]=\"htmlId() + item.index\">\n {{ item.label() }}\n </label>\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8208
8219
|
}
|
|
8209
8220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
|
|
8210
8221
|
type: Component,
|
|
@@ -10371,7 +10382,7 @@ class ArdiumTableComponent extends _FocusableComponentBase {
|
|
|
10371
10382
|
};
|
|
10372
10383
|
}
|
|
10373
10384
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, deps: [{ token: ARD_TABLE_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n class=\"ard-table\"\n [ngClass]=\"ngClasses()\"\n>\n @if (caption()) {\n <caption class=\"ard-table__caption\">\n <div class=\"ard-table__caption-container\">\n <ng-template\n #defaultCaptionTemplate\n let-captionText\n >\n {{ captionText }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n />\n </div>\n </caption>\n }\n <thead class=\"ard-table__header\">\n @for (row of headerCells(); track $index) {\n <tr class=\"ard-table__header-row\">\n @for (cell of row; track $index) {\n <th\n class=\"ard-table__header-cell\"\n [ngClass]=\"cell.cell().cellClass\"\n [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n [attr.colspan]=\"cell.colspan()\"\n [attr.rowspan]=\"cell.rowspan()\"\n [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n >\n <div\n class=\"ard-table__cell-container\"\n [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n [style.width]=\"cell.width\"\n [style.minWidth]=\"cell.minWidth\"\n >\n @if (isHeaderCellCheckbox(cell)) {\n <ng-template\n #defaultHeaderCheckboxTemplate\n let-state\n let-onChange=\"onChange\"\n >\n <ard-checkbox\n [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n [state]=\"state\"\n [color]=\"getHeaderCheckboxColor()\"\n unselectedColor=\"currentColor\"\n (change)=\"onChange()\"\n />\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n />\n } @else {\n <ng-template\n #defaultHeaderCellTemplate\n let-content\n let-sortable=\"sortable\"\n let-sortType=\"sortType\"\n let-onTriggerSort=\"onTriggerSort\"\n let-onTriggerResetSort=\"onTriggerResetSort\"\n >\n <div\n class=\"ard-table__header-template-container\"\n [class.ard-sortable]=\"sortable\"\n [class.ard-nonsortable]=\"!sortable\"\n >\n @if (sortable) {\n <button\n type=\"button\"\n class=\"ard-table__header-content-container\"\n (click)=\"onTriggerSort($event)\"\n [tabindex]=\"tabIndex()\"\n (keydown.Esc)=\"onTriggerResetSort($event)\"\n >\n <div class=\"ard-table__header-content\">{{ content }}</div>\n @if (sortType !== null) {\n <div class=\"ard-table__header-sort-icon\">\n @if (sortType === 'ascending') {\n <ard-icon>south</ard-icon>\n } @else if (sortType === 'descending') {\n <ard-icon>north</ard-icon>\n }\n </div>\n }\n </button>\n } @else {\n <div class=\"ard-table__header-content-container\">\n <div class=\"ard-table__header-content\">{{ content }}</div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n />\n }\n </div>\n </th>\n }\n </tr>\n }\n <tr class=\"ard-table__progress-bar-row\">\n <th\n class=\"ard-table__progress-bar-cell\"\n colspan=\"9999\"\n >\n @if (isLoading()) {\n <ard-progress-bar\n [value]=\"loadingProgress()\"\n [bufferValue]=\"loadingProgressBuffer()\"\n [mode]=\"loadingBarMode()\"\n [color]=\"loadingBarColor()\"\n variant=\"sharp\"\n hideValue\n />\n }\n </th>\n </tr>\n </thead>\n <tbody class=\"ard-table__body\">\n @for (row of dataRows(); track $index) {\n @if (row.isEmpty()) {\n <tr class=\"ard-table__empty-row\">\n <td\n class=\"ard-table__empty-cell\"\n colspan=\"9999\"\n ></td>\n </tr>\n } @else {\n <tr\n class=\"ard-table__body-row\"\n [class.ard-table__selected-row]=\"row.selected()\"\n [class.ard-table__highlighted-row]=\"row.highlighted()\"\n [class.ard-table__disabled-row]=\"row.disabled()\"\n [class.ard-table__bold-row]=\"row.bold()\"\n (click)=\"onRowClick(row, $event)\"\n (mouseover)=\"onRowMouseOver($event)\"\n (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n >\n @for (cell of row.data(); track $index) {\n <ng-template #cellTmp>\n <div\n class=\"ard-table__cell-container\"\n [style]=\"getCellStyle(row.dataColumns()[$index])\"\n >\n @if (isCellCheckbox(cell)) {\n <ng-template\n #defaultCheckboxTemplate\n let-isChecked\n let-onChange=\"onChange\"\n let-disabled=\"disabled\"\n >\n <ard-checkbox\n [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n [selected]=\"isChecked\"\n [color]=\"color()\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n />\n } @else {\n <ng-template\n #defaultCellTemplate\n let-content\n >\n {{ content }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n />\n }\n </div>\n </ng-template>\n @if (!row.dataColumns()[$index].isRowHeader) {\n <td\n class=\"ard-table__body-cell\"\n [ngClass]=\"row.dataColumns()[$index].cellClass\"\n [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n >\n <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n </td>\n } @else {\n <th\n class=\"ard-table__body-cell ard-table__row-header\"\n scope=\"row\"\n [ngClass]=\"row.dataColumns()[$index].cellClass\"\n [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n >\n <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n </th>\n }\n }\n </tr>\n }\n }\n </tbody>\n @if (canDisplayPagination()) {\n <tfoot class=\"ard-table__foot\">\n <tr class=\"ard-table__foot-row\">\n <td\n class=\"ard-table__pagination-cell\"\n colspan=\"9999\"\n >\n <ard-table-pagination\n [options]=\"paginationOptions()\"\n [totalItems]=\"totalItems()!\"\n [disabled]=\"paginationDisabled()\"\n [(itemsPerPage)]=\"itemsPerPage\"\n [(page)]=\"page\"\n [align]=\"paginationAlign()\"\n [isLoading]=\"isLoading()\"\n [itemsPerPageText]=\"itemsPerPageText()\"\n [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n />\n </td>\n </tr>\n </tfoot>\n }\n</table>\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["htmlId", "color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10385
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumTableComponent, selector: "ard-table", inputs: { rowDisabledFrom: { classPropertyName: "rowDisabledFrom", publicName: "rowDisabledFrom", isSignal: true, isRequired: false, transformFunction: null }, rowBoldFrom: { classPropertyName: "rowBoldFrom", publicName: "rowBoldFrom", isSignal: true, isRequired: false, transformFunction: null }, invertRowDisabled: { classPropertyName: "invertRowDisabled", publicName: "invertRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, invertRowBold: { classPropertyName: "invertRowBold", publicName: "invertRowBold", isSignal: true, isRequired: false, transformFunction: null }, selectableRows: { classPropertyName: "selectableRows", publicName: "selectableRows", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedItems: { classPropertyName: "maxSelectedItems", publicName: "maxSelectedItems", isSignal: true, isRequired: false, transformFunction: null }, clickableRows: { classPropertyName: "clickableRows", publicName: "clickableRows", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, loadingProgress: { classPropertyName: "loadingProgress", publicName: "loadingProgress", isSignal: true, isRequired: false, transformFunction: null }, loadingProgressBuffer: { classPropertyName: "loadingProgressBuffer", publicName: "loadingProgressBuffer", isSignal: true, isRequired: false, transformFunction: null }, loadingBarMode: { classPropertyName: "loadingBarMode", publicName: "loadingBarMode", isSignal: true, isRequired: false, transformFunction: null }, loadingBarColor: { classPropertyName: "loadingBarColor", publicName: "loadingBarColor", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, headerAlign: { classPropertyName: "headerAlign", publicName: "headerAlign", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, zebra: { classPropertyName: "zebra", publicName: "zebra", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationStrategy: { classPropertyName: "paginationStrategy", publicName: "paginationStrategy", isSignal: true, isRequired: false, transformFunction: null }, paginationOptions: { classPropertyName: "paginationOptions", publicName: "paginationOptions", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, paginationColor: { classPropertyName: "paginationColor", publicName: "paginationColor", isSignal: true, isRequired: false, transformFunction: null }, paginationAlign: { classPropertyName: "paginationAlign", publicName: "paginationAlign", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPageText: { classPropertyName: "itemsPerPageText", publicName: "itemsPerPageText", isSignal: true, isRequired: false, transformFunction: null }, currentItemsFormatFn: { classPropertyName: "currentItemsFormatFn", publicName: "currentItemsFormatFn", isSignal: true, isRequired: false, transformFunction: null }, pageFillRemaining: { classPropertyName: "pageFillRemaining", publicName: "pageFillRemaining", isSignal: true, isRequired: false, transformFunction: null }, paginationDisabled: { classPropertyName: "paginationDisabled", publicName: "paginationDisabled", isSignal: true, isRequired: false, transformFunction: null }, useFirstLastButtons: { classPropertyName: "useFirstLastButtons", publicName: "useFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, treatDataSourceAsString: { classPropertyName: "treatDataSourceAsString", publicName: "treatDataSourceAsString", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsPerPage: "itemsPerPageChange", page: "pageChange", selectedRowsChangeEvent: "selectedRowsChange", failedSelectRowEvent: "failedSelectRow", selectRowEvent: "selectRow", unselectRowEvent: "unselectRow", clickRowEvent: "clickRow" }, queries: [{ propertyName: "checkboxTemplate", first: true, predicate: ArdiumTableCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ArdiumTableHeaderCheckboxTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "captionTemplate", first: true, predicate: ArdiumTableCaptionTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "templateChildren", predicate: ArdiumTableTemplateDirective, isSignal: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<table\n class=\"ard-table\"\n [ngClass]=\"ngClasses()\"\n>\n @if (caption()) {\n <caption class=\"ard-table__caption\">\n <div class=\"ard-table__caption-container\">\n <ng-template\n #defaultCaptionTemplate\n let-captionText\n >\n {{ captionText }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"captionTemplate() ?? defaultCaptionTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: caption() }\"\n />\n </div>\n </caption>\n }\n <thead class=\"ard-table__header\">\n @for (row of headerCells(); track $index) {\n <tr class=\"ard-table__header-row\">\n @for (cell of row; track $index) {\n <th\n class=\"ard-table__header-cell\"\n [ngClass]=\"cell.cell().cellClass\"\n [class.ard-table__checkbox-cell]=\"isHeaderCellCheckbox(cell)\"\n [attr.colspan]=\"cell.colspan()\"\n [attr.rowspan]=\"cell.rowspan()\"\n [scope]=\"cell.colspan() > 1 ? 'colgroup' : 'col'\"\n >\n <div\n class=\"ard-table__cell-container\"\n [class.ard-table__sortable]=\"isHeaderCellSortable(cell)\"\n [style.width]=\"cell.width\"\n [style.minWidth]=\"cell.minWidth\"\n >\n @if (isHeaderCellCheckbox(cell)) {\n <ng-template\n #defaultHeaderCheckboxTemplate\n let-state\n let-onChange=\"onChange\"\n >\n <ard-checkbox\n [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n [state]=\"state\"\n [color]=\"getHeaderCheckboxColor()\"\n unselectedColor=\"currentColor\"\n (change)=\"onChange()\"\n />\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"headerCheckboxTemplate() ?? defaultHeaderCheckboxTemplate\"\n [ngTemplateOutletContext]=\"getHeaderCheckboxContext()\"\n />\n } @else {\n <ng-template\n #defaultHeaderCellTemplate\n let-content\n let-sortable=\"sortable\"\n let-sortType=\"sortType\"\n let-onTriggerSort=\"onTriggerSort\"\n let-onTriggerResetSort=\"onTriggerResetSort\"\n >\n <div\n class=\"ard-table__header-template-container\"\n [class.ard-sortable]=\"sortable\"\n [class.ard-nonsortable]=\"!sortable\"\n >\n @if (sortable) {\n <button\n type=\"button\"\n class=\"ard-table__header-content-container\"\n (click)=\"onTriggerSort($event)\"\n [tabindex]=\"tabIndex()\"\n (keydown.Esc)=\"onTriggerResetSort($event)\"\n >\n <div class=\"ard-table__header-content\">{{ content }}</div>\n @if (sortType !== null) {\n <div class=\"ard-table__header-sort-icon\">\n @if (sortType === 'ascending') {\n <ard-icon>south</ard-icon>\n } @else if (sortType === 'descending') {\n <ard-icon>north</ard-icon>\n }\n </div>\n }\n </button>\n } @else {\n <div class=\"ard-table__header-content-container\">\n <div class=\"ard-table__header-content\">{{ content }}</div>\n </div>\n }\n </div>\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"getHeaderTemplate(cell.cell().header) ?? defaultHeaderCellTemplate\"\n [ngTemplateOutletContext]=\"getHeaderContext(cell.cell(), $index)\"\n />\n }\n </div>\n </th>\n }\n </tr>\n }\n <tr class=\"ard-table__progress-bar-row\">\n <th\n class=\"ard-table__progress-bar-cell\"\n colspan=\"9999\"\n >\n @if (isLoading()) {\n <ard-progress-bar\n [value]=\"loadingProgress()\"\n [bufferValue]=\"loadingProgressBuffer()\"\n [mode]=\"loadingBarMode()\"\n [color]=\"loadingBarColor()\"\n variant=\"sharp\"\n hideValue\n />\n }\n </th>\n </tr>\n </thead>\n <tbody class=\"ard-table__body\">\n @for (row of dataRows(); track $index) {\n @if (row.isEmpty()) {\n <tr class=\"ard-table__empty-row\">\n <td\n class=\"ard-table__empty-cell\"\n colspan=\"9999\"\n ></td>\n </tr>\n } @else {\n <tr\n class=\"ard-table__body-row\"\n [class.ard-table__selected-row]=\"row.selected()\"\n [class.ard-table__highlighted-row]=\"row.highlighted()\"\n [class.ard-table__disabled-row]=\"row.disabled()\"\n [class.ard-table__bold-row]=\"row.bold()\"\n (click)=\"onRowClick(row, $event)\"\n (mouseover)=\"onRowMouseOver($event)\"\n (mouseenter)=\"onRowMouseEnter(row.index(), $event)\"\n (mouseleave)=\"onRowMouseLeave(row.index(), $event)\"\n >\n @for (cell of row.data(); track $index) {\n <ng-template #cellTmp>\n <div\n class=\"ard-table__cell-container\"\n [style]=\"getCellStyle(row.dataColumns()[$index])\"\n >\n @if (isCellCheckbox(cell)) {\n <ng-template\n #defaultCheckboxTemplate\n let-isChecked\n let-onChange=\"onChange\"\n let-disabled=\"disabled\"\n >\n <ard-checkbox\n [tabIndex]=\"isLoading() ? -1 : tabIndex()\"\n [selected]=\"isChecked\"\n [color]=\"color()\"\n [disabled]=\"disabled\"\n (change)=\"onChange()\"\n (click)=\"$event.stopPropagation()\"\n />\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"checkboxTemplate() ?? defaultCheckboxTemplate\"\n [ngTemplateOutletContext]=\"getCheckboxContext(row.index())\"\n />\n } @else {\n <ng-template\n #defaultCellTemplate\n let-content\n >\n {{ content }}\n </ng-template>\n\n <ng-template\n [ngTemplateOutlet]=\"getCellTemplate(row.dataColumns()[$index].template) ?? defaultCellTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: cell }\"\n />\n }\n </div>\n </ng-template>\n @if (!row.dataColumns()[$index].isRowHeader) {\n <td\n class=\"ard-table__body-cell\"\n [ngClass]=\"row.dataColumns()[$index].cellClass\"\n [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n >\n <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n </td>\n } @else {\n <th\n class=\"ard-table__body-cell ard-table__row-header\"\n scope=\"row\"\n [ngClass]=\"row.dataColumns()[$index].cellClass\"\n [class.ard-table__checkbox-cell]=\"isCellCheckbox(cell)\"\n >\n <ng-template [ngTemplateOutlet]=\"cellTmp\"></ng-template>\n </th>\n }\n }\n </tr>\n }\n }\n </tbody>\n @if (canDisplayPagination()) {\n <tfoot class=\"ard-table__foot\">\n <tr class=\"ard-table__foot-row\">\n <td\n class=\"ard-table__pagination-cell\"\n colspan=\"9999\"\n >\n <ard-table-pagination\n [options]=\"paginationOptions()\"\n [totalItems]=\"totalItems()!\"\n [disabled]=\"paginationDisabled()\"\n [(itemsPerPage)]=\"itemsPerPage\"\n [(page)]=\"page\"\n [align]=\"paginationAlign()\"\n [isLoading]=\"isLoading()\"\n [itemsPerPageText]=\"itemsPerPageText()\"\n [currentItemsFormatFn]=\"currentItemsFormatFn()\"\n />\n </td>\n </tr>\n </tfoot>\n }\n</table>\n", styles: [".ard-table__cell-container,.ard-table__header-template-container{width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumCheckboxComponent, selector: "ard-checkbox", inputs: ["color", "unselectedColor", "state"], outputs: ["stateChange"] }, { kind: "component", type: ArdiumTablePaginationComponent, selector: "ard-table-pagination", inputs: ["totalItems", "options", "itemsPerPage", "page", "color", "align", "compact", "useFirstLastButtons", "isLoading", "itemsPerPageText", "currentItemsFormatFn"], outputs: ["itemsPerPageChange", "pageChange"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }, { kind: "component", type: ArdiumProgressBarComponent, selector: "ard-progress-bar", inputs: ["value", "bufferValue", "color", "variant", "size", "mode", "hideValue"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10375
10386
|
}
|
|
10376
10387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, decorators: [{
|
|
10377
10388
|
type: Component,
|