@vallift/ngl 22.0.25 → 22.0.26
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/vallift-ngl.mjs +105 -13
- package/fesm2022/vallift-ngl.mjs.map +1 -1
- package/package.json +1 -1
- package/types/vallift-ngl.d.ts +34 -3
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -2507,7 +2507,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2507
2507
|
}] } });
|
|
2508
2508
|
|
|
2509
2509
|
class ColorPickerDirective {
|
|
2510
|
-
|
|
2510
|
+
initialHexColor = input('', /* @ts-ignore */
|
|
2511
|
+
...(ngDevMode ? [{ debugName: "initialHexColor" }] : /* istanbul ignore next */ []));
|
|
2512
|
+
enableAlpha = input(true, /* @ts-ignore */
|
|
2513
|
+
...(ngDevMode ? [{ debugName: "enableAlpha" }] : /* istanbul ignore next */ []));
|
|
2514
|
+
enableAdditionalColor = input(false, /* @ts-ignore */
|
|
2515
|
+
...(ngDevMode ? [{ debugName: "enableAdditionalColor" }] : /* istanbul ignore next */ []));
|
|
2516
|
+
disabled = input(false, /* @ts-ignore */
|
|
2517
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2518
|
+
colorChanged = output();
|
|
2519
|
+
pickerClosed = output();
|
|
2511
2520
|
componentRef = null;
|
|
2512
2521
|
overlay = null;
|
|
2513
2522
|
elementRef = inject(ElementRef);
|
|
@@ -2515,6 +2524,9 @@ class ColorPickerDirective {
|
|
|
2515
2524
|
appRef = inject(ApplicationRef);
|
|
2516
2525
|
injector = inject(Injector);
|
|
2517
2526
|
onClick() {
|
|
2527
|
+
if (this.disabled()) {
|
|
2528
|
+
return;
|
|
2529
|
+
}
|
|
2518
2530
|
if (this.componentRef) {
|
|
2519
2531
|
this.closeColorPicker();
|
|
2520
2532
|
return;
|
|
@@ -2522,7 +2534,7 @@ class ColorPickerDirective {
|
|
|
2522
2534
|
this.initializeColorPicker();
|
|
2523
2535
|
}
|
|
2524
2536
|
initializeColorPicker() {
|
|
2525
|
-
if (this.componentRef !== null) {
|
|
2537
|
+
if (this.disabled() || this.componentRef !== null) {
|
|
2526
2538
|
return;
|
|
2527
2539
|
}
|
|
2528
2540
|
const componentRef = createComponent(ColorPickerComponent, {
|
|
@@ -2530,8 +2542,12 @@ class ColorPickerDirective {
|
|
|
2530
2542
|
elementInjector: this.injector,
|
|
2531
2543
|
});
|
|
2532
2544
|
this.componentRef = componentRef;
|
|
2545
|
+
componentRef.setInput('hexColor', this.initialHexColor() || '#000000');
|
|
2546
|
+
componentRef.setInput('enableAlpha', this.enableAlpha());
|
|
2547
|
+
componentRef.setInput('enableAdditionalColor', this.enableAdditionalColor());
|
|
2548
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
2533
2549
|
this.appRef.attachView(componentRef.hostView);
|
|
2534
|
-
const
|
|
2550
|
+
const pickerElement = componentRef.location.nativeElement;
|
|
2535
2551
|
const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
2536
2552
|
this.overlay = document.createElement('div');
|
|
2537
2553
|
this.overlay.id = 'ng-color-picker';
|
|
@@ -2542,10 +2558,10 @@ class ColorPickerDirective {
|
|
|
2542
2558
|
this.overlay.style.zIndex = '2000';
|
|
2543
2559
|
this.overlay.style.top = '0';
|
|
2544
2560
|
this.overlay.style.left = '0';
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2561
|
+
pickerElement.style.position = 'absolute';
|
|
2562
|
+
pickerElement.style.zIndex = '2001';
|
|
2563
|
+
pickerElement.style.top = `${elementRect.bottom + 20}px`;
|
|
2564
|
+
pickerElement.style.left = `${elementRect.left}px`;
|
|
2549
2565
|
componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
|
|
2550
2566
|
componentRef.instance.COLOR_PICKER_WIDTH.set(250);
|
|
2551
2567
|
componentRef.instance.isTooltip.set(true);
|
|
@@ -2557,7 +2573,8 @@ class ColorPickerDirective {
|
|
|
2557
2573
|
this.closeColorPicker();
|
|
2558
2574
|
});
|
|
2559
2575
|
document.body.appendChild(this.overlay);
|
|
2560
|
-
document.body.appendChild(
|
|
2576
|
+
document.body.appendChild(pickerElement);
|
|
2577
|
+
componentRef.changeDetectorRef.detectChanges();
|
|
2561
2578
|
}
|
|
2562
2579
|
closeColorPicker() {
|
|
2563
2580
|
if (!this.componentRef) {
|
|
@@ -2568,12 +2585,13 @@ class ColorPickerDirective {
|
|
|
2568
2585
|
this.overlay?.remove();
|
|
2569
2586
|
this.overlay = null;
|
|
2570
2587
|
this.componentRef = null;
|
|
2588
|
+
this.pickerClosed.emit();
|
|
2571
2589
|
}
|
|
2572
2590
|
ngOnDestroy() {
|
|
2573
2591
|
this.closeColorPicker();
|
|
2574
2592
|
}
|
|
2575
2593
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2576
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2594
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", inputs: { initialHexColor: { classPropertyName: "initialHexColor", publicName: "initialHexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", pickerClosed: "pickerClosed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
2577
2595
|
}
|
|
2578
2596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: ColorPickerDirective, decorators: [{
|
|
2579
2597
|
type: Directive,
|
|
@@ -2581,9 +2599,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
2581
2599
|
selector: '[appColorPicker]',
|
|
2582
2600
|
standalone: true,
|
|
2583
2601
|
}]
|
|
2584
|
-
}], propDecorators: { colorChanged: [{
|
|
2585
|
-
type: Output
|
|
2586
|
-
}], onClick: [{
|
|
2602
|
+
}], propDecorators: { initialHexColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialHexColor", required: false }] }], enableAlpha: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAlpha", required: false }] }], enableAdditionalColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableAdditionalColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }], pickerClosed: [{ type: i0.Output, args: ["pickerClosed"] }], onClick: [{
|
|
2587
2603
|
type: HostListener,
|
|
2588
2604
|
args: ['click']
|
|
2589
2605
|
}] } });
|
|
@@ -14697,6 +14713,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
14697
14713
|
args: ['trackRef']
|
|
14698
14714
|
}] } });
|
|
14699
14715
|
|
|
14716
|
+
let nextColorFieldId = 0;
|
|
14717
|
+
const DEFAULT_COLOR = '#000000';
|
|
14718
|
+
const HEX_COLOR_PATTERN = /^#[0-9A-Fa-f]{6}$/;
|
|
14719
|
+
class SignalColorField extends BaseSignalTextInputControl {
|
|
14720
|
+
label = input('', /* @ts-ignore */
|
|
14721
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
14722
|
+
hint = input('', /* @ts-ignore */
|
|
14723
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
14724
|
+
id = input(/* @ts-ignore */
|
|
14725
|
+
...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
|
|
14726
|
+
valueChange = output();
|
|
14727
|
+
colorInputRef;
|
|
14728
|
+
instanceId = ++nextColorFieldId;
|
|
14729
|
+
colorInputId = computed(() => this.id() ?? `signal-color-field-${this.instanceId}`, /* @ts-ignore */
|
|
14730
|
+
...(ngDevMode ? [{ debugName: "colorInputId" }] : /* istanbul ignore next */ []));
|
|
14731
|
+
isInteractive = computed(() => !this.disabled() && !this.readonly(), /* @ts-ignore */
|
|
14732
|
+
...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
|
|
14733
|
+
usesPeerFloatingLabel = computed(() => usesPeerFloatingLabel(this.appearance()), /* @ts-ignore */
|
|
14734
|
+
...(ngDevMode ? [{ debugName: "usesPeerFloatingLabel" }] : /* istanbul ignore next */ []));
|
|
14735
|
+
resolvedColor = computed(() => {
|
|
14736
|
+
const current = this.value();
|
|
14737
|
+
return current && HEX_COLOR_PATTERN.test(current) ? current : DEFAULT_COLOR;
|
|
14738
|
+
}, /* @ts-ignore */
|
|
14739
|
+
...(ngDevMode ? [{ debugName: "resolvedColor" }] : /* istanbul ignore next */ []));
|
|
14740
|
+
displayHex = computed(() => {
|
|
14741
|
+
const current = this.value();
|
|
14742
|
+
return current && HEX_COLOR_PATTERN.test(current) ? current : this.resolvedColor();
|
|
14743
|
+
}, /* @ts-ignore */
|
|
14744
|
+
...(ngDevMode ? [{ debugName: "displayHex" }] : /* istanbul ignore next */ []));
|
|
14745
|
+
appearanceWrapperClasses = computed(() => {
|
|
14746
|
+
const base = getAppearanceWrapperClasses(this.appearance(), this.isFocused(), this.disabled());
|
|
14747
|
+
if (this.showError() && !this.disabled()) {
|
|
14748
|
+
return `${base} border-error ring-4 ring-error-subtle`;
|
|
14749
|
+
}
|
|
14750
|
+
return base;
|
|
14751
|
+
}, /* @ts-ignore */
|
|
14752
|
+
...(ngDevMode ? [{ debugName: "appearanceWrapperClasses" }] : /* istanbul ignore next */ []));
|
|
14753
|
+
wrapperHeightClasses = computed(() => getWrapperHeightClasses(this.appearance(), this.size()), /* @ts-ignore */
|
|
14754
|
+
...(ngDevMode ? [{ debugName: "wrapperHeightClasses" }] : /* istanbul ignore next */ []));
|
|
14755
|
+
inputSizeClasses = computed(() => getInputSizeClasses(this.appearance(), this.size(), this.isFocused(), this.displayHex()), /* @ts-ignore */
|
|
14756
|
+
...(ngDevMode ? [{ debugName: "inputSizeClasses" }] : /* istanbul ignore next */ []));
|
|
14757
|
+
horizontalPaddingClasses = computed(() => getHorizontalPaddingClasses(this.appearance(), this.size(), false, true, false, false, false, false), /* @ts-ignore */
|
|
14758
|
+
...(ngDevMode ? [{ debugName: "horizontalPaddingClasses" }] : /* istanbul ignore next */ []));
|
|
14759
|
+
inFieldLabelLeftClasses = computed(() => getInFieldLabelLeftClasses(this.size(), false), /* @ts-ignore */
|
|
14760
|
+
...(ngDevMode ? [{ debugName: "inFieldLabelLeftClasses" }] : /* istanbul ignore next */ []));
|
|
14761
|
+
floatingLabelClasses = computed(() => getFloatingLabelClasses(this.size()), /* @ts-ignore */
|
|
14762
|
+
...(ngDevMode ? [{ debugName: "floatingLabelClasses" }] : /* istanbul ignore next */ []));
|
|
14763
|
+
iftaLabelClasses = computed(() => getIftaLabelClasses(this.size()), /* @ts-ignore */
|
|
14764
|
+
...(ngDevMode ? [{ debugName: "iftaLabelClasses" }] : /* istanbul ignore next */ []));
|
|
14765
|
+
floatingOutlineLabelClasses = computed(() => getFloatingOutlineLabelClasses(this.size(), false), /* @ts-ignore */
|
|
14766
|
+
...(ngDevMode ? [{ debugName: "floatingOutlineLabelClasses" }] : /* istanbul ignore next */ []));
|
|
14767
|
+
openColorPicker() {
|
|
14768
|
+
if (!this.isInteractive()) {
|
|
14769
|
+
return;
|
|
14770
|
+
}
|
|
14771
|
+
this.colorInputRef?.nativeElement.click();
|
|
14772
|
+
}
|
|
14773
|
+
onInput(event) {
|
|
14774
|
+
if (!this.isInteractive()) {
|
|
14775
|
+
return;
|
|
14776
|
+
}
|
|
14777
|
+
const nextValue = event.target.value;
|
|
14778
|
+
this.setValue(nextValue);
|
|
14779
|
+
this.valueChange.emit(nextValue);
|
|
14780
|
+
}
|
|
14781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalColorField, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
14782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: SignalColorField, isStandalone: true, selector: "lib-signal-color-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "colorInputRef", first: true, predicate: ["colorInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"colorInputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n", dependencies: [{ kind: "component", type: BaseSignalInput, selector: "lib-base-signal-input", inputs: ["label", "showExternalLabel", "showRequired", "showError", "errorMessage", "disabled", "hint", "inputId"] }] });
|
|
14783
|
+
}
|
|
14784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: SignalColorField, decorators: [{
|
|
14785
|
+
type: Component,
|
|
14786
|
+
args: [{ selector: 'lib-signal-color-field', imports: [BaseSignalInput], template: "<lib-base-signal-input\n [label]=\"label()\"\n [showExternalLabel]=\"appearance() === 'outline' || appearance() === 'fill'\"\n [showRequired]=\"showRequiredIndicator()\"\n [showError]=\"showError()\"\n [errorMessage]=\"errorMessage()\"\n [disabled]=\"disabled()\"\n [hint]=\"hint()\"\n [inputId]=\"colorInputId()\">\n\n <div\n input\n class=\"relative flex items-center w-full rounded-xl transition-colors duration-200 ease-in-out\"\n [class.overflow-hidden]=\"appearance() !== 'floatingOutline'\"\n [class.overflow-visible]=\"appearance() === 'floatingOutline'\"\n [class.opacity-70]=\"disabled()\"\n [class]=\"appearanceWrapperClasses() + ' ' + wrapperHeightClasses()\">\n\n <div class=\"relative flex h-full min-w-0 flex-1 items-center\">\n @if (usesPeerFloatingLabel()) {\n <input\n type=\"text\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n readonly\n class=\"peer pointer-events-none absolute h-full w-full opacity-0 border-0 bg-transparent placeholder-transparent\"\n placeholder=\" \"\n [id]=\"colorInputId()\"\n [value]=\"displayHex()\" />\n }\n\n <button\n type=\"button\"\n class=\"relative h-full w-full text-left font-mono transition outline-none bg-transparent border-0 rounded-none truncate\"\n [class]=\"inputSizeClasses() + ' ' + horizontalPaddingClasses()\"\n [class.text-role-disabled]=\"disabled()\"\n [class.text-role-body]=\"!disabled()\"\n [class.cursor-pointer]=\"isInteractive()\"\n [class.cursor-default]=\"readonly() && !disabled()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [id]=\"usesPeerFloatingLabel() ? null : colorInputId()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (click)=\"openColorPicker()\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\">\n {{ displayHex() }}\n </button>\n\n @if (appearance() === 'floating' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'floatingOutline' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"floatingOutlineLabelClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n\n @if (appearance() === 'ifta' && label()) {\n <label\n [attr.for]=\"colorInputId()\"\n [class]=\"iftaLabelClasses() + ' ' + inFieldLabelLeftClasses()\"\n [class.text-primary]=\"isFocused() && !showError() && !disabled()\"\n [class.text-error]=\"showError() && !disabled()\"\n [class.text-role-disabled]=\"disabled()\">\n {{ label() }}\n @if (showRequiredIndicator()) {\n <span class=\"text-error\" aria-hidden=\"true\">*</span>\n }\n </label>\n }\n </div>\n\n <span class=\"relative mr-3 h-7 w-7 shrink-0\">\n <span\n aria-hidden=\"true\"\n class=\"block h-7 w-7 rounded-full border border-default\"\n [style.background-color]=\"resolvedColor()\"></span>\n\n <input\n #colorInputRef\n type=\"color\"\n class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0\"\n [class.cursor-default]=\"readonly()\"\n [class.cursor-not-allowed]=\"disabled()\"\n [class.pointer-events-none]=\"!isInteractive()\"\n [value]=\"resolvedColor()\"\n [disabled]=\"disabled()\"\n [attr.aria-readonly]=\"readonly() || null\"\n [attr.aria-required]=\"showRequiredIndicator() || null\"\n [attr.aria-invalid]=\"showError() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" />\n </span>\n </div>\n\n</lib-base-signal-input>\n" }]
|
|
14787
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], colorInputRef: [{
|
|
14788
|
+
type: ViewChild,
|
|
14789
|
+
args: ['colorInputRef']
|
|
14790
|
+
}] } });
|
|
14791
|
+
|
|
14700
14792
|
function signalValidationError(kind, message) {
|
|
14701
14793
|
return { kind, message };
|
|
14702
14794
|
}
|
|
@@ -15398,5 +15490,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
15398
15490
|
* Generated bundle index. Do not edit.
|
|
15399
15491
|
*/
|
|
15400
15492
|
|
|
15401
|
-
export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
|
|
15493
|
+
export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseSignalInput, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DEFAULT_NGL_BUTTON_CONFIG, DEFAULT_NGL_INPUT_CONFIG, DEFAULT_NGL_LIST_RESPONSE, DEFAULT_PHONE_COUNTRIES, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InfiniteScrollDirective, InfiniteScrollModule, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OpenFloatingMenuDirective, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SIGNAL_FORM_ERRORS, SharedConstants, ShimmerComponent, SignalButton, SignalCheckbox, SignalColorField, SignalDataTableComponent, SignalDateField, SignalDatePicker, SignalDateRangeField, SignalDateRangePicker, SignalDropdown, SignalError, SignalFormDirective, SignalFormValidators, SignalMultiSelectDropdown, SignalNumberField, SignalOtpField, SignalPhoneNumberField, SignalRadio, SignalRadioGroup, SignalRangeSlider, SignalRating, SignalSlider, SignalSwitch, SignalTextField, SignalTextarea, SignalTimeField, SignalTimePicker, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, ThemeService, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipDirective, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, defaultSignalFormErrors, getDynamicTypeStructure, getSignalButtonClasses, getSignalButtonIconClasses, getSignalButtonSpinnerBorderClass, getSignalFieldErrorMessage, getSignalValidationErrorMessage, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, phoneNumbers, phoneNumbersAll, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase, validateSignalForm };
|
|
15402
15494
|
//# sourceMappingURL=vallift-ngl.mjs.map
|