@ardium-ui/ui 5.0.0-alpha.101 → 5.0.0-alpha.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ardium-ui-ui.mjs +59 -12
- package/fesm2022/ardium-ui-ui.mjs.map +1 -1
- package/lib/_internal/utils/context-to-inputs.d.ts +2 -0
- package/lib/_internal/utils/date.utils.d.ts +2 -0
- package/lib/checkbox/checkbox.component.d.ts +2 -0
- package/lib/checkbox/checkbox.defaults.d.ts +3 -1
- package/lib/checkbox/checkbox.types.d.ts +3 -0
- package/lib/types/utility.types.d.ts +4 -0
- package/package.json +2 -2
- package/prebuilt-themes/default/inputs/date-input.css +4 -0
- package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
- package/themes/default/inputs/date-input.scss +4 -0
|
@@ -2,10 +2,10 @@ import 'first-last';
|
|
|
2
2
|
import { Overlay, ScrollStrategyOptions, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
|
|
3
3
|
import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
|
|
4
4
|
import * as i0 from '@angular/core';
|
|
5
|
-
import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, Injectable, Injector } from '@angular/core';
|
|
5
|
+
import { signal, computed, InjectionToken, Directive, Input, HostBinding, input, output, ViewChildren, viewChild, contentChild, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, inject, ViewContainerRef, TemplateRef, forwardRef, HostListener, NgModule, effect, viewChildren, Pipe, model, ElementRef, ChangeDetectorRef, ContentChildren, Renderer2, linkedSignal, untracked, contentChildren, reflectComponentType, Injectable, Injector } from '@angular/core';
|
|
6
6
|
import { Validators, NG_VALUE_ACCESSOR, TouchedChangeEvent } from '@angular/forms';
|
|
7
7
|
import * as i4 from '@ardium-ui/devkit';
|
|
8
|
-
import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule,
|
|
8
|
+
import { arraySignal, coerceBooleanProperty, coerceNumberProperty, trackBoundControl, coerceArrayProperty, ArdiumClickOutsideModule, ArdiumEscapeHTMLModule, FileSystemService, FileSystemMethod, ArdiumFilePipesModule, coerceDateOnlyProperty, getUTCDate as getUTCDate$1, ArdiumHoldModule } from '@ardium-ui/devkit';
|
|
9
9
|
import { isDefined, any, isPrimitive, isAnyString, isNull, isNumber, isString, isArray, isFunction, isRegExp, evaluate, isObject, isPromise, isDate } from 'simple-bool';
|
|
10
10
|
import { resolvePath } from 'resolve-object-path';
|
|
11
11
|
import { TakeChance } from 'take-chance';
|
|
@@ -5924,6 +5924,18 @@ function getDateComponents(date, UTC) {
|
|
|
5924
5924
|
date: UTC ? date.getUTCDate() : date.getDate(),
|
|
5925
5925
|
};
|
|
5926
5926
|
}
|
|
5927
|
+
function startOfDay(date, UTC = false) {
|
|
5928
|
+
if (UTC) {
|
|
5929
|
+
return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
|
|
5930
|
+
}
|
|
5931
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
5932
|
+
}
|
|
5933
|
+
function endOfDay(date, UTC = false) {
|
|
5934
|
+
if (UTC) {
|
|
5935
|
+
return getUTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), 23, 59, 59, 999);
|
|
5936
|
+
}
|
|
5937
|
+
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
|
|
5938
|
+
}
|
|
5927
5939
|
|
|
5928
5940
|
//public (exported)
|
|
5929
5941
|
class ArdDateInputPrefixTemplateDirective {
|
|
@@ -6170,8 +6182,12 @@ class _AbstractDateInput extends _FormFieldComponentBase {
|
|
|
6170
6182
|
return value;
|
|
6171
6183
|
},
|
|
6172
6184
|
});
|
|
6173
|
-
this.min = input(this._DEFAULTS.min, {
|
|
6174
|
-
|
|
6185
|
+
this.min = input(this._DEFAULTS.min, {
|
|
6186
|
+
transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
|
|
6187
|
+
});
|
|
6188
|
+
this.max = input(this._DEFAULTS.max, {
|
|
6189
|
+
transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
|
|
6190
|
+
});
|
|
6175
6191
|
this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
|
|
6176
6192
|
this._UTCAfterInit = signal(this._DEFAULTS.UTC);
|
|
6177
6193
|
this.filter = input(this._DEFAULTS.filter);
|
|
@@ -7732,10 +7748,10 @@ class _AbstractCalendar extends _FormFieldComponentBase {
|
|
|
7732
7748
|
this.yearSelect = output();
|
|
7733
7749
|
this.monthSelect = output();
|
|
7734
7750
|
this.min = input(this._DEFAULTS.min, {
|
|
7735
|
-
transform: v => (v === null ? null :
|
|
7751
|
+
transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.min, true)),
|
|
7736
7752
|
});
|
|
7737
7753
|
this.max = input(this._DEFAULTS.max, {
|
|
7738
|
-
transform: v => (v === null ? null :
|
|
7754
|
+
transform: v => (v === null ? null : coerceDateOnlyProperty(v, this._DEFAULTS.max, true)),
|
|
7739
7755
|
});
|
|
7740
7756
|
this.UTC = input(this._DEFAULTS.UTC, { transform: v => coerceBooleanProperty(v) });
|
|
7741
7757
|
this._UTCAfterInit = signal(this._DEFAULTS.UTC);
|
|
@@ -8831,17 +8847,30 @@ class ArdiumDateInputComponent extends _AbstractDateInput {
|
|
|
8831
8847
|
if (this.minMaxStrategy() === ArdDateInputMinMaxStrategy.Adjust && date) {
|
|
8832
8848
|
const min = this.min();
|
|
8833
8849
|
const max = this.max();
|
|
8850
|
+
// min and max are always in UTC when they are set, so we need to convert the date to UTC for comparison
|
|
8851
|
+
date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
|
|
8834
8852
|
if (min && date < min) {
|
|
8835
|
-
date =
|
|
8853
|
+
date = min;
|
|
8836
8854
|
}
|
|
8837
8855
|
else if (max && date > max) {
|
|
8838
|
-
date =
|
|
8856
|
+
date = max;
|
|
8857
|
+
}
|
|
8858
|
+
// convert the date back to local time if the UTC mode is off
|
|
8859
|
+
if (!this._UTCAfterInit()) {
|
|
8860
|
+
date = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
|
|
8861
|
+
}
|
|
8862
|
+
if (date.toISOString() !== this.value()?.toISOString()) {
|
|
8863
|
+
this.value.set(date);
|
|
8839
8864
|
}
|
|
8865
|
+
return;
|
|
8840
8866
|
}
|
|
8867
|
+
// deserialized date should always be in local time, so we need to convert it to UTC if the UTC mode is on
|
|
8841
8868
|
if (date && this._UTCAfterInit()) {
|
|
8842
8869
|
date = getUTCDate(date.getFullYear(), date.getMonth(), date.getDate());
|
|
8843
8870
|
}
|
|
8844
|
-
this.value
|
|
8871
|
+
if (date?.toISOString() !== this.value()?.toISOString()) {
|
|
8872
|
+
this.value.set(date);
|
|
8873
|
+
}
|
|
8845
8874
|
}
|
|
8846
8875
|
_setDateInputAttributes() {
|
|
8847
8876
|
const input = this.dateInput()?.nativeElement;
|
|
@@ -10669,10 +10698,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
10669
10698
|
}]
|
|
10670
10699
|
}] });
|
|
10671
10700
|
|
|
10701
|
+
function contextToInputs(context, component) {
|
|
10702
|
+
let allowed;
|
|
10703
|
+
return computed(() => {
|
|
10704
|
+
if (!component)
|
|
10705
|
+
return {};
|
|
10706
|
+
if (!allowed) {
|
|
10707
|
+
const meta = reflectComponentType(component);
|
|
10708
|
+
if (!meta)
|
|
10709
|
+
return {};
|
|
10710
|
+
allowed = new Set(meta.inputs.map(i => i.templateName));
|
|
10711
|
+
}
|
|
10712
|
+
return Object.fromEntries(Object.entries(context()).filter(([key]) => allowed.has(key)));
|
|
10713
|
+
});
|
|
10714
|
+
}
|
|
10715
|
+
|
|
10672
10716
|
const _checkboxDefaults = {
|
|
10673
10717
|
..._booleanComponentDefaults,
|
|
10674
10718
|
color: SimpleComponentColor.Primary,
|
|
10675
10719
|
unselectedColor: SimpleComponentColor.None,
|
|
10720
|
+
CheckboxIconComponent: undefined,
|
|
10676
10721
|
};
|
|
10677
10722
|
const ARD_CHECKBOX_DEFAULTS = new InjectionToken('ard-checkbox-defaults', {
|
|
10678
10723
|
factory: () => ({
|
|
@@ -10735,6 +10780,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
10735
10780
|
});
|
|
10736
10781
|
this.State = CheckboxState;
|
|
10737
10782
|
//! templates
|
|
10783
|
+
this.checkboxIconComponent = this._DEFAULTS.CheckboxIconComponent;
|
|
10738
10784
|
this.templateRepository = contentChild(_CheckboxTemplateRepositoryDirective);
|
|
10739
10785
|
this.checkboxTemplate = contentChild(ArdCheckboxTemplateDirective);
|
|
10740
10786
|
this.checkboxTemplateContext = computed(() => ({
|
|
@@ -10744,6 +10790,7 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
10744
10790
|
state: this.state(),
|
|
10745
10791
|
internalState: this.internalState(),
|
|
10746
10792
|
}));
|
|
10793
|
+
this.checkboxIconInputs = contextToInputs(this.checkboxTemplateContext, this.checkboxIconComponent);
|
|
10747
10794
|
}
|
|
10748
10795
|
//override the "selected" setter, so it changes the state too.
|
|
10749
10796
|
set _selected(v) {
|
|
@@ -10765,13 +10812,13 @@ class ArdiumCheckboxComponent extends _BooleanComponentBase {
|
|
|
10765
10812
|
this._emitTouched();
|
|
10766
10813
|
}
|
|
10767
10814
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, deps: [{ token: ARD_CHECKBOX_DEFAULTS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10768
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
10815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ArdiumCheckboxComponent, isStandalone: false, 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 }, internalState: { classPropertyName: "internalState", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { internalState: "stateChange" }, providers: [
|
|
10769
10816
|
{
|
|
10770
10817
|
provide: NG_VALUE_ACCESSOR,
|
|
10771
10818
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
10772
10819
|
multi: true,
|
|
10773
10820
|
},
|
|
10774
|
-
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n
|
|
10821
|
+
], queries: [{ propertyName: "templateRepository", first: true, predicate: _CheckboxTemplateRepositoryDirective, descendants: true, isSignal: true }, { propertyName: "checkboxTemplate", first: true, predicate: ArdCheckboxTemplateDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n @if (checkboxIconComponent) {\r\n <!-- render the component -->\r\n <ng-template\r\n [ngComponentOutlet]=\"checkboxIconComponent\"\r\n [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n />\r\n } @else {\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n let-state=\"state\"\r\n let-selected=\"selected\"\r\n >\r\n <ard-icon\r\n [icon]=\"\r\n state === State.Selected\r\n ? 'check_box'\r\n : state === State.Unselected\r\n ? 'check_box_outline_blank'\r\n : 'indeterminate_check_box'\r\n \"\r\n [filled]=\"state !== State.Indeterminate\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"\r\n templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n \"\r\n [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n />\r\n }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ArdiumIconComponent, selector: "ard-icon", inputs: ["ariaLabel", "icon", "filled", "weight", "grade", "opticalSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10775
10822
|
}
|
|
10776
10823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ArdiumCheckboxComponent, decorators: [{
|
|
10777
10824
|
type: Component,
|
|
@@ -10781,7 +10828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
10781
10828
|
useExisting: forwardRef(() => ArdiumCheckboxComponent),
|
|
10782
10829
|
multi: true,
|
|
10783
10830
|
},
|
|
10784
|
-
], template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n
|
|
10831
|
+
], template: "<button\r\n class=\"ard-checkbox\"\r\n role=\"checkbox\"\r\n type=\"button\"\r\n [attr.id]=\"htmlId()\"\r\n [attr.name]=\"htmlName()\"\r\n [attr.aria-checked]=\"selectedAccountingForReverse()\"\r\n [attr.aria-disabled]=\"disabled()\"\r\n [tabindex]=\"tabIndex()\"\r\n [ngClass]=\"ngClasses()\"\r\n (click)=\"toggleState()\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n>\r\n <div class=\"ard-hitbox\"></div>\r\n <div class=\"ard-focus-overlay\"></div>\r\n\r\n @if (checkboxIconComponent) {\r\n <!-- render the component -->\r\n <ng-template\r\n [ngComponentOutlet]=\"checkboxIconComponent\"\r\n [ngComponentOutletInputs]=\"checkboxIconInputs()\"\r\n />\r\n } @else {\r\n <ng-template\r\n #defaultCheckboxTemplate\r\n let-state=\"state\"\r\n let-selected=\"selected\"\r\n >\r\n <ard-icon\r\n [icon]=\"\r\n state === State.Selected\r\n ? 'check_box'\r\n : state === State.Unselected\r\n ? 'check_box_outline_blank'\r\n : 'indeterminate_check_box'\r\n \"\r\n [filled]=\"state !== State.Indeterminate\"\r\n />\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"\r\n templateRepository()?.checkboxTmp()?.template ?? checkboxTemplate()?.template ?? defaultCheckboxTemplate\r\n \"\r\n [ngTemplateOutletContext]=\"checkboxTemplateContext()\"\r\n />\r\n }\r\n</button>\r\n", styles: ["@layer ard-ui{ard-checkbox{display:block}.ard-checkbox{font-size:inherit}.ard-checkbox>ard-icon{font-size:1.5em}ard-checkbox.ard-readonly .ard-checkbox,ard-checkbox.ard-disabled .ard-checkbox{cursor:default}ard-checkbox.ard-readonly .ard-checkbox .ard-focus-overlay,ard-checkbox.ard-disabled .ard-checkbox .ard-focus-overlay{display:none}}\n"] }]
|
|
10785
10832
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10786
10833
|
type: Inject,
|
|
10787
10834
|
args: [ARD_CHECKBOX_DEFAULTS]
|