@ardium-ui/ui 3.3.0-alpha.3 → 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/form-field/form-field.component.mjs +3 -4
- package/esm2022/lib/form-field/horizontal-form-field.component.mjs +3 -4
- package/esm2022/lib/inputs/digit-input/digit-input.component.mjs +12 -2
- package/esm2022/lib/inputs/digit-input/digit-input.model.mjs +23 -11
- package/esm2022/lib/inputs/digit-input/digit-input.utils.mjs +1 -1
- 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 +86 -55
- 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/form-field/form-field.component.d.ts +0 -1
- package/lib/form-field/horizontal-form-field.component.d.ts +0 -1
- package/lib/inputs/digit-input/digit-input.component.d.ts +5 -2
- package/lib/inputs/digit-input/digit-input.utils.d.ts +1 -0
- 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
- package/prebuilt-themes/default/form-field.css +8 -0
- package/prebuilt-themes/default/form-field.css.map +1 -1
- package/themes/default/form-field.scss +8 -0
|
@@ -1,12 +1,13 @@
|
|
|
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
|
-
import {
|
|
10
|
+
import { isAnyString, isNull, isArray, isNumber, isFunction, isRegExp, isDefined, any, isPrimitive, isString, evaluate, isObject, isPromise } from 'simple-bool';
|
|
10
11
|
import * as i1 from '@angular/common';
|
|
11
12
|
import { CommonModule, DOCUMENT, DecimalPipe, AsyncPipe } from '@angular/common';
|
|
12
13
|
import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
@@ -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
|
|
@@ -375,13 +389,23 @@ class DigitInputModel {
|
|
|
375
389
|
return !!this.value()?.[index];
|
|
376
390
|
}
|
|
377
391
|
writeValue(v) {
|
|
378
|
-
if (
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
392
|
+
if (this._ardHost.outputAsString()) {
|
|
393
|
+
if (!isAnyString(v) && !isNull(v)) {
|
|
394
|
+
throw new Error(`ARD-FT0040b: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), but the input uses [outputAsString]="true", and thus expects string or null.`);
|
|
395
|
+
}
|
|
396
|
+
const vArray = v?.split('') ?? [];
|
|
397
|
+
if (vArray.length > this._configArrayNoStatics().length) {
|
|
398
|
+
console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
|
|
399
|
+
}
|
|
400
|
+
return this._writeValue(vArray);
|
|
401
|
+
}
|
|
402
|
+
if (!isAnyString(v) && !isNull(v) && !isArray(v)) {
|
|
403
|
+
throw new Error(`ARD-FT0041: Trying to set <ard-digit-input>'s value to "${v}" (of type ${typeof v}), expected string or array of characters.`);
|
|
383
404
|
}
|
|
384
405
|
const vArray = coerceArrayProperty(v);
|
|
406
|
+
if (vArray.length > this._configArrayNoStatics().length) {
|
|
407
|
+
console.warn(`ARD-WA0041: Value provided to <ard-digit-input> is too long. Got ${vArray.length} characters, but expected a maximum of ${this._configArrayNoStatics().length} characters.`);
|
|
408
|
+
}
|
|
385
409
|
const problemIndex = vArray.findIndex(el => !isAnyString(el) || el.length > 1);
|
|
386
410
|
if (problemIndex !== -1) {
|
|
387
411
|
throw new Error(`ARD-FT0042: Array passed to <ard-digit-input>'s value must only contain strings of length 1 or 0. Element "${vArray[problemIndex]}" at index ${problemIndex} does not match those requirements.`);
|
|
@@ -389,17 +413,19 @@ class DigitInputModel {
|
|
|
389
413
|
return this._writeValue(vArray);
|
|
390
414
|
}
|
|
391
415
|
_writeValue(v) {
|
|
392
|
-
const
|
|
416
|
+
const isOldValueTheSame = this.value() ? this.value().every((ch, i) => ch === v?.[i]) : !v;
|
|
417
|
+
if (isOldValueTheSame)
|
|
418
|
+
return false;
|
|
393
419
|
this.value.set(v && v.map(el => el || null));
|
|
394
420
|
this.validateValueAndUpdate();
|
|
395
421
|
this._updateInputElements();
|
|
396
|
-
return
|
|
422
|
+
return true;
|
|
397
423
|
}
|
|
398
424
|
_updateInputElements() {
|
|
399
|
-
const
|
|
425
|
+
const v = this.value() ?? [];
|
|
400
426
|
let i = 0;
|
|
401
427
|
for (const inputEl of this._ardHost.inputs()) {
|
|
402
|
-
inputEl.nativeElement.value =
|
|
428
|
+
inputEl.nativeElement.value = v[i] ?? '';
|
|
403
429
|
i++;
|
|
404
430
|
}
|
|
405
431
|
}
|
|
@@ -475,7 +501,7 @@ class DigitInputModel {
|
|
|
475
501
|
//get the corresponding HTML input element
|
|
476
502
|
const inputEl = this._ardHost.inputs()[index];
|
|
477
503
|
if (!inputEl) {
|
|
478
|
-
throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found.
|
|
504
|
+
throw new Error("ARD-IS0048: <ard-digit-input>'s value changed, but its corresponding input element could not be found. If you are reading this, you probably experienced a problem with Ardium UI. Please report this issue to the creators.");
|
|
479
505
|
}
|
|
480
506
|
//update the input element and value array
|
|
481
507
|
const newVal = inputChar ?? before;
|
|
@@ -565,6 +591,7 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
565
591
|
this._oldConfigArrayDataLength = this.configArrayData().length;
|
|
566
592
|
this._emitChange();
|
|
567
593
|
});
|
|
594
|
+
this._wasViewInit = false;
|
|
568
595
|
//! value two-way binding
|
|
569
596
|
this.outputAsString = input(this._DEFAULTS.outputAsString, { transform: v => coerceBooleanProperty(v) });
|
|
570
597
|
this.outputControlValueAccessorOnFinish = input(false, { transform: v => coerceBooleanProperty(v) });
|
|
@@ -587,13 +614,22 @@ class ArdiumDigitInputComponent extends _FormFieldComponentBase {
|
|
|
587
614
|
isInputEmpty(index) {
|
|
588
615
|
return !this.model.isDefinedAtIndex(index);
|
|
589
616
|
}
|
|
590
|
-
//! control value accessor's write value implementation
|
|
591
617
|
writeValue(v) {
|
|
618
|
+
if (!this._wasViewInit) {
|
|
619
|
+
this._valueBeforeViewInit = v;
|
|
620
|
+
return;
|
|
621
|
+
}
|
|
592
622
|
this._writeValue(v);
|
|
593
623
|
}
|
|
594
624
|
_writeValue(v) {
|
|
595
625
|
return this.model.writeValue(v);
|
|
596
626
|
}
|
|
627
|
+
ngAfterViewInit() {
|
|
628
|
+
this._wasViewInit = true;
|
|
629
|
+
if (this._valueBeforeViewInit) {
|
|
630
|
+
this._writeValue(this._valueBeforeViewInit);
|
|
631
|
+
}
|
|
632
|
+
}
|
|
597
633
|
set value(v) {
|
|
598
634
|
this.writeValue(v);
|
|
599
635
|
}
|
|
@@ -4449,7 +4485,6 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4449
4485
|
constructor() {
|
|
4450
4486
|
super(...arguments);
|
|
4451
4487
|
this.fileInputEl = viewChild('fileInput');
|
|
4452
|
-
this.htmlId = input(TakeChance.id());
|
|
4453
4488
|
this.name = input('');
|
|
4454
4489
|
this._wasViewInit = false;
|
|
4455
4490
|
//! appearance
|
|
@@ -4471,6 +4506,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4471
4506
|
this._beforeDragoverState = 'idle';
|
|
4472
4507
|
}
|
|
4473
4508
|
ngOnInit() {
|
|
4509
|
+
super.ngOnInit();
|
|
4474
4510
|
if (!(window.File && window.FileReader && window.Blob)) {
|
|
4475
4511
|
console.error(new Error(`ARD-${this.componentId}0: Cannot use Ardium UI file features because this browser does not support file handling!`));
|
|
4476
4512
|
}
|
|
@@ -4585,7 +4621,7 @@ class _FileInputComponentBase extends _NgModelComponentBase {
|
|
|
4585
4621
|
inputEl.files = dataTransfer.files;
|
|
4586
4622
|
}
|
|
4587
4623
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4588
|
-
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 }); }
|
|
4589
4625
|
}
|
|
4590
4626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: _FileInputComponentBase, decorators: [{
|
|
4591
4627
|
type: Directive
|
|
@@ -5887,7 +5923,6 @@ const CheckboxState = {
|
|
|
5887
5923
|
class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
5888
5924
|
constructor(defaults) {
|
|
5889
5925
|
super(defaults);
|
|
5890
|
-
this.htmlId = input('');
|
|
5891
5926
|
//! appearance
|
|
5892
5927
|
this.color = input(this._DEFAULTS.color);
|
|
5893
5928
|
this.unselectedColor = input(this._DEFAULTS.unselectedColor);
|
|
@@ -5911,7 +5946,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
5911
5946
|
this._emitChange();
|
|
5912
5947
|
}
|
|
5913
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 }); }
|
|
5914
|
-
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: [
|
|
5915
5950
|
{
|
|
5916
5951
|
provide: NG_VALUE_ACCESSOR,
|
|
5917
5952
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
@@ -5964,7 +5999,6 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
5964
5999
|
constructor(defaults) {
|
|
5965
6000
|
super(defaults);
|
|
5966
6001
|
this._changeDetector = inject(ChangeDetectorRef);
|
|
5967
|
-
this.htmlId = input(TakeChance.id());
|
|
5968
6002
|
this.value = input();
|
|
5969
6003
|
//! appearance
|
|
5970
6004
|
this.color = input(this._DEFAULTS.color);
|
|
@@ -5992,7 +6026,7 @@ class ArdiumRadioComponent extends _BooleanComponentBase {
|
|
|
5992
6026
|
this._changeDetector.markForCheck();
|
|
5993
6027
|
}
|
|
5994
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 }); }
|
|
5995
|
-
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 }); }
|
|
5996
6030
|
}
|
|
5997
6031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioComponent, decorators: [{
|
|
5998
6032
|
type: Component,
|
|
@@ -6009,7 +6043,6 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6009
6043
|
constructor() {
|
|
6010
6044
|
super(_ngModelComponentDefaults); // no need for injecting a token with default values
|
|
6011
6045
|
this._radios = contentChildren(ArdiumRadioComponent, { descendants: true });
|
|
6012
|
-
this.htmlId = input('');
|
|
6013
6046
|
this.valueChange = output();
|
|
6014
6047
|
this.changeEvent = output({ alias: 'change' });
|
|
6015
6048
|
/**
|
|
@@ -6144,6 +6177,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6144
6177
|
}
|
|
6145
6178
|
}
|
|
6146
6179
|
ngOnDestroy() {
|
|
6180
|
+
super.ngOnDestroy();
|
|
6147
6181
|
this._destroyChildSubscriptions();
|
|
6148
6182
|
}
|
|
6149
6183
|
_destroyChildSubscriptions() {
|
|
@@ -6153,7 +6187,7 @@ class ArdiumRadioGroupComponent extends _NgModelComponentBase {
|
|
|
6153
6187
|
this._childEventSubs = [];
|
|
6154
6188
|
}
|
|
6155
6189
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6156
|
-
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: [
|
|
6157
6191
|
{
|
|
6158
6192
|
provide: NG_VALUE_ACCESSOR,
|
|
6159
6193
|
useExisting: forwardRef(() => ArdiumRadioGroupComponent),
|
|
@@ -6560,7 +6594,6 @@ class _SelectableListComponentBase extends _NgModelComponentBase {
|
|
|
6560
6594
|
super(...arguments);
|
|
6561
6595
|
//! public constants
|
|
6562
6596
|
this.itemStorage = new SimpleItemStorage(this);
|
|
6563
|
-
this.htmlId = TakeChance.id();
|
|
6564
6597
|
this.DEFAULTS = this._DEFAULTS;
|
|
6565
6598
|
this._cd = inject(ChangeDetectorRef);
|
|
6566
6599
|
//! binding-related inputs
|
|
@@ -7327,6 +7360,7 @@ class ArdiumRangeSliderComponent extends _AbstractSlider {
|
|
|
7327
7360
|
this.currentHandle = signal(null);
|
|
7328
7361
|
}
|
|
7329
7362
|
ngOnInit() {
|
|
7363
|
+
super.ngOnInit();
|
|
7330
7364
|
if (this._value.low !== -Infinity && this._value.high !== Infinity)
|
|
7331
7365
|
return;
|
|
7332
7366
|
this.writeValue({ low: this.min(), high: this.max() });
|
|
@@ -8097,7 +8131,6 @@ function provideCheckboxListDefaults(config) {
|
|
|
8097
8131
|
class ArdiumCheckboxListComponent extends _NgModelComponentBase {
|
|
8098
8132
|
constructor(defaults) {
|
|
8099
8133
|
super(defaults);
|
|
8100
|
-
this.htmlId = input(TakeChance.id());
|
|
8101
8134
|
this.DEFAULTS = this._DEFAULTS;
|
|
8102
8135
|
// static values. Not meant to be changed.
|
|
8103
8136
|
this.multiselectable = signal(true);
|
|
@@ -8182,7 +8215,7 @@ class ArdiumCheckboxListComponent extends _NgModelComponentBase {
|
|
|
8182
8215
|
this.selectItem(v);
|
|
8183
8216
|
}
|
|
8184
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 }); }
|
|
8185
|
-
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 }); }
|
|
8186
8219
|
}
|
|
8187
8220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumCheckboxListComponent, decorators: [{
|
|
8188
8221
|
type: Component,
|
|
@@ -8755,7 +8788,6 @@ class ArdiumFormFieldComponent {
|
|
|
8755
8788
|
this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
|
|
8756
8789
|
this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
|
|
8757
8790
|
this.control = contentChild(_FormFieldComponentBase);
|
|
8758
|
-
this.controlId = computed(() => this.control()?.htmlId());
|
|
8759
8791
|
this.label = contentChild(ArdiumLabelComponent);
|
|
8760
8792
|
this.hints = contentChildren(ArdiumHintDirective);
|
|
8761
8793
|
this.errors = contentChildren(ArdiumErrorDirective);
|
|
@@ -8768,11 +8800,11 @@ class ArdiumFormFieldComponent {
|
|
|
8768
8800
|
}
|
|
8769
8801
|
}
|
|
8770
8802
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"
|
|
8803
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumFormFieldComponent, selector: "ard-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"control()?.htmlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8772
8804
|
}
|
|
8773
8805
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumFormFieldComponent, decorators: [{
|
|
8774
8806
|
type: Component,
|
|
8775
|
-
args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"
|
|
8807
|
+
args: [{ selector: 'ard-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"control()?.htmlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8776
8808
|
}] });
|
|
8777
8809
|
|
|
8778
8810
|
class ArdiumHintComponent {
|
|
@@ -8793,7 +8825,6 @@ class ArdiumHorizontalFormFieldComponent {
|
|
|
8793
8825
|
this._DEFAULTS = inject(ARD_FORM_FIELD_DEFAULTS);
|
|
8794
8826
|
this.alignHintToLeftByDefault = this._DEFAULTS.defaultHintAlign === SimpleOneAxisAlignment.Left;
|
|
8795
8827
|
this.control = contentChild(_FormFieldComponentBase);
|
|
8796
|
-
this.controlId = computed(() => this.control()?.htmlId());
|
|
8797
8828
|
this.label = contentChild(ArdiumLabelComponent);
|
|
8798
8829
|
this.hints = contentChildren(ArdiumHintDirective);
|
|
8799
8830
|
this.errors = contentChildren(ArdiumErrorDirective);
|
|
@@ -8806,11 +8837,11 @@ class ArdiumHorizontalFormFieldComponent {
|
|
|
8806
8837
|
}
|
|
8807
8838
|
}
|
|
8808
8839
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"
|
|
8840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ArdiumHorizontalFormFieldComponent, selector: "ard-horizontal-form-field", inputs: { reserveHintLine: { classPropertyName: "reserveHintLine", publicName: "reserveHintLine", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "control", first: true, predicate: _FormFieldComponentBase, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: ArdiumLabelComponent, descendants: true, isSignal: true }, { propertyName: "hints", predicate: ArdiumHintDirective, isSignal: true }, { propertyName: "errors", predicate: ArdiumErrorDirective, isSignal: true }], ngImport: i0, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"control()?.htmlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8810
8841
|
}
|
|
8811
8842
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumHorizontalFormFieldComponent, decorators: [{
|
|
8812
8843
|
type: Component,
|
|
8813
|
-
args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"
|
|
8844
|
+
args: [{ selector: 'ard-horizontal-form-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"ard-horizontal-form-field\"\r\n [class.ard-form-field__with-error]=\"control()?.hasError()\"\r\n [class.ard-form-field__is-success]=\"control()?.isSuccess()\"\r\n [class.ard-form-field__control-disabled]=\"control()?.disabled()\"\r\n>\r\n <div class=\"ard-form-field__label-container\">\r\n <label\r\n class=\"ard-label\"\r\n [attr.for]=\"control()?.htmlId()\"\r\n >\r\n <ng-content select=\"ard-label, [ard-label]\" />\r\n </label>\r\n </div>\r\n <div class=\"ard-form-field__non-label\">\r\n <div class=\"ard-form-field__input\">\r\n <ng-content />\r\n </div>\r\n <div\r\n class=\"ard-form-field__hints\"\r\n [class.ard-form-field__reserve-hint-line]=\"reserveHintLine()\"\r\n [class.ard-form-field__hints-default-left]=\"alignHintToLeftByDefault\"\r\n >\r\n @if (hasAnyError()) {\r\n <div class=\"ard-form-field__error\">\r\n <ng-content select=\"ard-error, [ard-error]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ard-form-field__hints-left\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[left], [ard-hint][left]\" />\r\n </div>\r\n <div class=\"ard-form-field__hints-right\">\r\n <div class=\"ard-form-field__default-hint\">\r\n <ng-content select=\"ard-hint:not([left]):not([right]), [ard-hint]:not([left]):not([right])\" />\r\n </div>\r\n <ng-content select=\"ard-hint[right], [ard-hint][right]\" />\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}.ard-horizontal-form-field{display:flex}.ard-form-field__hints{display:flex;justify-content:space-between}.ard-form-field__hints>*{display:flex;flex-direction:column}\n"] }]
|
|
8814
8845
|
}] });
|
|
8815
8846
|
|
|
8816
8847
|
class ArdiumFormFieldModule {
|
|
@@ -10351,7 +10382,7 @@ class ArdiumTableComponent extends _FocusableComponentBase {
|
|
|
10351
10382
|
};
|
|
10352
10383
|
}
|
|
10353
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 }); }
|
|
10354
|
-
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 }); }
|
|
10355
10386
|
}
|
|
10356
10387
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ArdiumTableComponent, decorators: [{
|
|
10357
10388
|
type: Component,
|