@haiilo/catalyst-angular 10.26.1 → 10.27.0

package/fesm2020/haiilo-catalyst-angular.mjs

@@ -1,15 +1,15 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, HostListener, Component, ViewEncapsulation, ContentChild, Input, ChangeDetectionStrategy, EventEmitter, Inject, Output, Self, Optional, Host, SkipSelf, NgModule, Injectable } from '@angular/core';
+import { InjectionToken, Directive, HostListener, Optional, SkipSelf, Component, ViewEncapsulation, ContentChild, Input, ChangeDetectionStrategy, EventEmitter, Inject, Output, Self, Host, NgModule, Injectable } from '@angular/core';
 import * as i3 from '@haiilo/catalyst';
 import { catI18nRegistry, catIconRegistry, catNotificationService } from '@haiilo/catalyst';
 import log from 'loglevel';
-import * as i1 from '@angular/cdk/dialog';
+import * as i1$1 from '@angular/cdk/dialog';
 import { DialogModule } from '@angular/cdk/dialog';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { defineCustomElements } from '@haiilo/catalyst/loader';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import * as i1 from '@angular/forms';
+import { Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { __decorate } from 'tslib';
 import { fromEvent } from 'rxjs';
 
@@ -70,12 +70,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class DateValueAccessor extends ValueAccessor {
-    constructor(el) {
+    constructor(el, ngControl) {
         super(el);
+        this.ngControl = ngControl;
     }
     get nativeElement() {
         return this.el.nativeElement;
     }
+    ngAfterViewInit() {
+        if (this.ngControl?.control?.hasValidator(Validators.required)) {
+            this.el.nativeElement.required = true;
+        }
+    }
     writeValue(value) {
         if (!this.el.nativeElement.range) {
             return super.writeValue(this.toISO(value));
@@ -97,6 +103,12 @@ class DateValueAccessor extends ValueAccessor {
         }
         super.handleChangeEvent(null);
     }
+    updateErrors() {
+        setTimeout(() => {
+            this.el.nativeElement.errors =
+                this.ngControl?.control?.errors?.required && !this.el.nativeElement.value ? { required: true } : null;
+        });
+    }
     toISO(value) {
         if (value instanceof Date) {
             const year = value.getFullYear();
@@ -111,8 +123,8 @@ class DateValueAccessor extends ValueAccessor {
         return match ? new Date(Number(year), Number(month) - 1, Number(day)) : null;
     }
 }
-DateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-DateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: DateValueAccessor, selector: "cat-date, cat-date-inline", host: { listeners: { "catChange": "handleChangeEvent($event.target.value)" } }, providers: [
+DateValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateValueAccessor, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+DateValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: DateValueAccessor, selector: "cat-date, cat-date-inline", host: { listeners: { "catChange": "handleChangeEvent($event.target.value); updateErrors()", "catBlur": "updateErrors()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: DateValueAccessor,
@@ -125,7 +137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     /* tslint:disable-next-line:directive-selector */
                     selector: 'cat-date, cat-date-inline',
                     host: {
-                        '(catChange)': 'handleChangeEvent($event.target.value)'
+                        '(catChange)': 'handleChangeEvent($event.target.value); updateErrors()',
+                        '(catBlur)': 'updateErrors()'
                     },
                     providers: [
                         {
@@ -135,15 +148,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; } });
 
 class TimeValueAccessor extends ValueAccessor {
-    constructor(el) {
+    constructor(el, ngControl) {
         super(el);
+        this.ngControl = ngControl;
     }
     get nativeElement() {
         return this.el.nativeElement;
     }
+    ngAfterViewInit() {
+        if (this.ngControl?.control?.hasValidator(Validators.required)) {
+            this.el.nativeElement.required = true;
+        }
+    }
     writeValue(value) {
         if (value && value instanceof Date) {
             const hours = value.getHours().toString().padStart(2, '0');
@@ -161,9 +184,15 @@ class TimeValueAccessor extends ValueAccessor {
         }
         return super.handleChangeEvent(null);
     }
+    updateErrors() {
+        setTimeout(() => {
+            this.el.nativeElement.errors =
+                this.ngControl?.control?.errors?.required && !this.el.nativeElement.value ? { required: true } : null;
+        });
+    }
 }
-TimeValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TimeValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TimeValueAccessor, selector: "cat-time", host: { listeners: { "catChange": "handleChangeEvent($event.target.value)" } }, providers: [
+TimeValueAccessor.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeValueAccessor, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+TimeValueAccessor.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TimeValueAccessor, selector: "cat-time", host: { listeners: { "catChange": "handleChangeEvent($event.target.value); updateErrors()", "catBlur": "updateErrors()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: TimeValueAccessor,
@@ -176,7 +205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     /* tslint:disable-next-line:directive-selector */
                     selector: 'cat-time',
                     host: {
-                        '(catChange)': 'handleChangeEvent($event.target.value)'
+                        '(catChange)': 'handleChangeEvent($event.target.value); updateErrors()',
+                        '(catBlur)': 'updateErrors()'
                     },
                     providers: [
                         {
@@ -186,7 +216,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         }
                     ]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; } });
 
 class DatetimeComponent {
     get min() {
@@ -950,10 +984,10 @@ let CatSpinner = class CatSpinner {
     }
 };
 CatSpinner.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatSpinner, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-CatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CatSpinner, selector: "cat-spinner", inputs: { a11yLabel: "a11yLabel", size: "size" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CatSpinner.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CatSpinner, selector: "cat-spinner", inputs: { a11yLabel: "a11yLabel", size: "size", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 CatSpinner = __decorate([
     ProxyCmp({
-        inputs: ['a11yLabel', 'size']
+        inputs: ['a11yLabel', 'size', 'value']
     })
 ], CatSpinner);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatSpinner, decorators: [{
@@ -963,7 +997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['a11yLabel', 'size'],
+                    inputs: ['a11yLabel', 'size', 'value'],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; } });
 let CatTab = class CatTab {
@@ -1214,14 +1248,14 @@ class CatDialogComponent {
         this.header?.close.subscribe(() => this.dialogRef.close());
     }
 }
-CatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogComponent, deps: [{ token: i1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+CatDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
 CatDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CatDialogComponent, selector: "cat-dialog", inputs: { noScroll: "noScroll", noOverscroll: "noOverscroll", noScrolledInit: "noScrolledInit", scrolledBuffer: "scrolledBuffer" }, outputs: { scrolledBottom: "scrolledBottom" }, host: { classAttribute: "cat-dialog" }, queries: [{ propertyName: "header", first: true, predicate: CatDialogHeaderComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n<cat-scrollable\n  *ngIf=\"!noScroll; else noScrollTemplate\"\n  [noOverscroll]=\"noOverscroll\"\n  [noScrolledInit]=\"noScrolledInit\"\n  [scrolledBuffer]=\"scrolledBuffer\"\n  (scrolledBottom)=\"scrolledBottom.emit()\"\n>\n  <div class=\"cat-dialog-content\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</cat-scrollable>\n<ng-template #noScrollTemplate>\n  <div class=\"cat-dialog-content no-scroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cat-backdrop{transition-duration:.5s}.cat-dialog-pane{transform:translateZ(0)}.cat-dialog-pane .cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog{width:100%;height:100%;min-height:inherit;max-height:inherit;animation:cat-dialog-enter .25s ease}.cat-dialog cat-scrollable{flex-grow:1}@keyframes cat-dialog-enter{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.cat-dialog-content.no-scroll{height:100%;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CatScrollable, selector: "cat-scrollable", inputs: ["noOverflowX", "noOverflowY", "noOverscroll", "noScrolledInit", "noShadowX", "noShadowY", "scrolledBuffer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cat-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'cat-dialog'
                     }, template: "<ng-content select=\"cat-dialog-header\"></ng-content>\n<cat-scrollable\n  *ngIf=\"!noScroll; else noScrollTemplate\"\n  [noOverscroll]=\"noOverscroll\"\n  [noScrolledInit]=\"noScrolledInit\"\n  [scrolledBuffer]=\"scrolledBuffer\"\n  (scrolledBottom)=\"scrolledBottom.emit()\"\n>\n  <div class=\"cat-dialog-content\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</cat-scrollable>\n<ng-template #noScrollTemplate>\n  <div class=\"cat-dialog-content no-scroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n<ng-content select=\"cat-dialog-actions\"></ng-content>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;inset:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cat-backdrop{transition-duration:.5s}.cat-dialog-pane{transform:translateZ(0)}.cat-dialog-pane .cdk-dialog-container>*:only-child{display:block;width:100%;height:100%;min-height:inherit;max-height:inherit}.cat-dialog{width:100%;height:100%;min-height:inherit;max-height:inherit;animation:cat-dialog-enter .25s ease}.cat-dialog cat-scrollable{flex-grow:1}@keyframes cat-dialog-enter{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.cat-dialog-content.no-scroll{height:100%;overflow:hidden}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DialogRef }]; }, propDecorators: { noScroll: [{
+        }], ctorParameters: function () { return [{ type: i1$1.DialogRef }]; }, propDecorators: { noScroll: [{
                 type: Input
             }], noOverscroll: [{
                 type: Input
@@ -1411,7 +1445,7 @@ class ValueAccessorDecorator {
         this.el.nativeElement.errors = this.controlDirective?.errors || !!this.controlDirective?.invalid;
     }
 }
-ValueAccessorDecorator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValueAccessorDecorator, deps: [{ token: i0.ElementRef }, { token: i1$1.NgControl, optional: true, self: true }, { token: i1$1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
+ValueAccessorDecorator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValueAccessorDecorator, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true, self: true }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive });
 ValueAccessorDecorator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: ValueAccessorDecorator, selector: "cat-input, cat-textarea, cat-datepicker, cat-select, cat-date, cat-time, cat-tag", inputs: { errorInit: "errorInit" }, host: { listeners: { "catBlur": "updateErrors()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValueAccessorDecorator, decorators: [{
             type: Directive,
@@ -1422,11 +1456,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         '(catBlur)': 'updateErrors()'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: i1$1.ControlContainer, decorators: [{
+                }] }, { type: i1.ControlContainer, decorators: [{
                     type: Optional
                 }, {
                     type: Host
@@ -1574,14 +1608,14 @@ class CatDialogService {
         this.dialog.closeAll();
     }
 }
-CatDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogService, deps: [{ token: i1.Dialog }], target: i0.ɵɵFactoryTarget.Injectable });
+CatDialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogService, deps: [{ token: i1$1.Dialog }], target: i0.ɵɵFactoryTarget.Injectable });
 CatDialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CatDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.Dialog }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.Dialog }]; } });
 
 /**
  * Generated bundle index. Do not edit.