@alauda/ui 6.3.5-beta.0 → 6.3.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/esm2020/form/form-item/form-item.component.mjs +5 -7
- package/esm2020/time-picker/component.mjs +8 -4
- package/esm2020/time-picker/panel/panel.component.mjs +6 -4
- package/fesm2015/alauda-ui.mjs +24 -22
- package/fesm2015/alauda-ui.mjs.map +1 -1
- package/fesm2020/alauda-ui.mjs +24 -22
- package/fesm2020/alauda-ui.mjs.map +1 -1
- package/form/form-item/form-item.component.d.ts +1 -2
- package/package.json +1 -1
- package/time-picker/component.d.ts +2 -1
package/fesm2020/alauda-ui.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { TemplateRef, Injectable, Pipe, NgModule, Optional, Inject, SkipSelf, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Directive, EventEmitter, Output, HostBinding, ViewChild, ContentChild, Host, isDevMode, HostListener, InjectionToken, Injector, ContentChildren, forwardRef, ElementRef, ViewChildren, ViewContainerRef, ChangeDetectorRef, Type } from '@angular/core';
|
|
3
|
-
import { Observable, ReplaySubject, Subject, merge, fromEvent, BehaviorSubject, combineLatest,
|
|
3
|
+
import { Observable, ReplaySubject, Subject, merge, fromEvent, BehaviorSubject, combineLatest, take, pluck, of, Subscription, map as map$1, tap as tap$1, publishReplay as publishReplay$1, refCount as refCount$1, startWith as startWith$1, switchMap as switchMap$1, takeUntil as takeUntil$1, EMPTY, animationFrameScheduler } from 'rxjs';
|
|
4
4
|
import { startWith, map, publishReplay, refCount, distinctUntilChanged, takeUntil, switchMap, throttleTime, debounceTime, first, tap, take as take$1, observeOn, repeat, takeWhile, endWith, filter } from 'rxjs/operators';
|
|
5
5
|
import * as i1$1 from '@angular/cdk/table';
|
|
6
6
|
import { CdkCellDef, CdkCell, CdkColumnDef, CdkHeaderCellDef, CdkHeaderCell, CdkHeaderRowDef, CdkHeaderRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkRow, CdkTable, CDK_TABLE, _COALESCED_STYLE_SCHEDULER, _CoalescedStyleScheduler, CDK_TABLE_TEMPLATE, CdkTableModule } from '@angular/cdk/table';
|
|
@@ -2782,7 +2782,6 @@ class FormItemComponent {
|
|
|
2782
2782
|
this.labelWidth = null;
|
|
2783
2783
|
this.labelPosition = LabelPosition.Right;
|
|
2784
2784
|
this.emptyAddon = false;
|
|
2785
|
-
this.plain = false;
|
|
2786
2785
|
this.destroy$$ = new Subject();
|
|
2787
2786
|
this.parentForm = formGroup || ngForm;
|
|
2788
2787
|
if (this.auiForm) {
|
|
@@ -2795,25 +2794,25 @@ class FormItemComponent {
|
|
|
2795
2794
|
: '';
|
|
2796
2795
|
}
|
|
2797
2796
|
ngAfterContentInit() {
|
|
2798
|
-
this.hasError$ = this.ngControls.changes.pipe(startWith
|
|
2799
|
-
this.errorCount$ = this.errors.changes.pipe(map
|
|
2800
|
-
this.hintCount$ = this.hints.changes.pipe(map
|
|
2797
|
+
this.hasError$ = this.ngControls.changes.pipe(startWith(this.ngControls), switchMap((controls) => combineLatest(controls.map(control => this.mapControlStatus(control))).pipe(map(statuses => statuses.some(status => status)))));
|
|
2798
|
+
this.errorCount$ = this.errors.changes.pipe(map(errors => errors.length), startWith(this.errors.length));
|
|
2799
|
+
this.hintCount$ = this.hints.changes.pipe(map(hints => hints.length), startWith(this.hints.length));
|
|
2801
2800
|
}
|
|
2802
2801
|
subscribeInputsFromParent() {
|
|
2803
2802
|
this.auiForm.labelWidth$
|
|
2804
|
-
.pipe(takeUntil
|
|
2803
|
+
.pipe(takeUntil(this.destroy$$))
|
|
2805
2804
|
.subscribe(width => {
|
|
2806
2805
|
this.labelWidth = width;
|
|
2807
2806
|
this.cdr.markForCheck();
|
|
2808
2807
|
});
|
|
2809
2808
|
this.auiForm.labelPosition$
|
|
2810
|
-
.pipe(takeUntil
|
|
2809
|
+
.pipe(takeUntil(this.destroy$$))
|
|
2811
2810
|
.subscribe(position => {
|
|
2812
2811
|
this.labelPosition = position;
|
|
2813
2812
|
this.cdr.markForCheck();
|
|
2814
2813
|
});
|
|
2815
2814
|
this.auiForm.emptyAddon$
|
|
2816
|
-
.pipe(takeUntil
|
|
2815
|
+
.pipe(takeUntil(this.destroy$$))
|
|
2817
2816
|
.subscribe(emptyAddon => {
|
|
2818
2817
|
this.emptyAddon = emptyAddon;
|
|
2819
2818
|
this.cdr.markForCheck();
|
|
@@ -2822,20 +2821,20 @@ class FormItemComponent {
|
|
|
2822
2821
|
mapControlStatus(control) {
|
|
2823
2822
|
return (this.parentForm
|
|
2824
2823
|
? combineLatest([
|
|
2825
|
-
control.statusChanges.pipe(startWith
|
|
2826
|
-
merge(this.parentForm.statusChanges.pipe(startWith
|
|
2827
|
-
]).pipe(map
|
|
2828
|
-
: control.statusChanges).pipe(map
|
|
2824
|
+
control.statusChanges.pipe(startWith(control.status)),
|
|
2825
|
+
merge(this.parentForm.statusChanges.pipe(startWith(this.parentForm.status)), this.parentForm.ngSubmit),
|
|
2826
|
+
]).pipe(map(([status]) => status))
|
|
2827
|
+
: control.statusChanges).pipe(map((status) => status === 'INVALID' && (control.dirty || this.parentForm?.submitted)), publishReplay(1), refCount());
|
|
2829
2828
|
}
|
|
2830
2829
|
ngOnDestroy() {
|
|
2831
2830
|
this.destroy$$.next();
|
|
2832
2831
|
}
|
|
2833
2832
|
}
|
|
2834
2833
|
FormItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormDirective, optional: true }, { token: i4.NgForm, optional: true }, { token: i4.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
2835
|
-
FormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FormItemComponent, selector: "aui-form-item", inputs: { labelWidth: "labelWidth", width: "width", labelPosition: "labelPosition", emptyAddon: "emptyAddon"
|
|
2834
|
+
FormItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FormItemComponent, selector: "aui-form-item", inputs: { labelWidth: "labelWidth", width: "width", labelPosition: "labelPosition", emptyAddon: "emptyAddon" }, queries: [{ propertyName: "itemLabel", first: true, predicate: FormItemLabelDirective, descendants: true }, { propertyName: "itemControl", first: true, predicate: FormItemControlDirective, descendants: true }, { propertyName: "ngControls", predicate: NgControl, descendants: true }, { propertyName: "addons", predicate: FormItemAddonDirective }, { propertyName: "errors", predicate: FormItemErrorDirective }, { propertyName: "hints", predicate: FormItemHintDirective }], ngImport: i0, template: "<div [class]=\"bem.block(labelPosition)\" [class.hasError]=\"hasError$ | async\">\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div class=\"aui-form-item__content\" [ngClass]=\"formItemWidthClass\">\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div *ngIf=\"hintCount$ | async\" class=\"aui-form-item__hint-wrapper\">\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);color:rgb(var(--aui-color-n-1));font-size:var(--aui-font-size-m)}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-xs)}.aui-form-item--top .aui-form-item__label-wrapper:after{display:none}.aui-form-item__label-wrapper{display:flex;align-items:center;line-height:var(--aui-inline-height-m);flex-shrink:0;padding-right:var(--aui-spacing-m);overflow:hidden}.aui-form-item__label-wrapper--required .aui-form-item__label:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:var(--aui-spacing-s)}.aui-form-item__label-wrapper.hasLabel:after{content:\":\";align-self:flex-start;margin-left:var(--aui-spacing-xs);line-height:var(--aui-inline-height-m)}.aui-form-item__label-wrapper--left{justify-content:flex-start}.aui-form-item__label-wrapper--left .aui-form-item__label{text-align:start}.aui-form-item__label-wrapper--right{justify-content:flex-end}.aui-form-item__label-wrapper--right .aui-form-item__label{text-align:end}.aui-form-item__label{display:block;line-height:var(--aui-line-height-s)}.aui-form-item__container{width:100%;min-width:0}.aui-form-item__content{display:flex;align-items:center;min-height:var(--aui-inline-height-m)}.aui-form-item__content--large .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-l)}.aui-form-item__content--medium .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-m)}.aui-form-item__content--small .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-s)}.aui-form-item__content+.aui-form-item__hint-wrapper,.aui-form-item__content+.aui-form-item__error-wrapper{margin-top:var(--aui-spacing-s)}.aui-form-item__hint-wrapper,.aui-form-item__error-wrapper{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-form-item__hint-wrapper{color:rgb(var(--aui-color-n-4))}.aui-form-item__error-wrapper{color:rgb(var(--aui-color-red))}.aui-form-item__addon-wrapper{align-self:flex-start;display:flex;align-items:center;flex-shrink:0;box-sizing:content-box;height:var(--aui-inline-height-m);min-width:var(--aui-icon-size-m);padding-left:var(--aui-spacing-m);color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m)}.aui-form-item__addon-wrapper aui-icon{font-size:var(--aui-icon-size-m)}.aui-form--inline{display:flex}.aui-form--inline .aui-form-item{margin-bottom:0;margin-right:var(--aui-spacing-m)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2836
2835
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FormItemComponent, decorators: [{
|
|
2837
2836
|
type: Component,
|
|
2838
|
-
args: [{ selector: 'aui-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div
|
|
2837
|
+
args: [{ selector: 'aui-form-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, template: "<div [class]=\"bem.block(labelPosition)\" [class.hasError]=\"hasError$ | async\">\n <div\n [ngClass]=\"\n bem.element(\n 'label-wrapper',\n { required: !!itemControl?.required },\n labelPosition\n )\n \"\n [class.hasLabel]=\"!!itemLabel\"\n [style.width]=\"labelWidth\"\n >\n <ng-content select=\"label[auiFormItemLabel]\"></ng-content>\n </div>\n <div class=\"aui-form-item__container\">\n <div class=\"aui-form-item__content\" [ngClass]=\"formItemWidthClass\">\n <ng-content></ng-content>\n <div\n *ngIf=\"emptyAddon || addons?.length\"\n class=\"aui-form-item__addon-wrapper\"\n >\n <ng-content select=\"[auiFormItemAddon]\"></ng-content>\n </div>\n </div>\n <div\n *ngIf=\"(hasError$ | async) && (errorCount$ | async)\"\n class=\"aui-form-item__error-wrapper\"\n >\n <ng-content select=\"[auiFormItemError]\"></ng-content>\n </div>\n <div *ngIf=\"hintCount$ | async\" class=\"aui-form-item__hint-wrapper\">\n <ng-content select=\"[auiFormItemHint]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".aui-form-item{display:flex;align-items:flex-start;margin-bottom:var(--aui-spacing-xl);color:rgb(var(--aui-color-n-1));font-size:var(--aui-font-size-m)}.aui-form-item--top{flex-direction:column}.aui-form-item--top .aui-form-item__label-wrapper{line-height:var(--aui-line-height-m);margin-bottom:var(--aui-spacing-xs)}.aui-form-item--top .aui-form-item__label-wrapper:after{display:none}.aui-form-item__label-wrapper{display:flex;align-items:center;line-height:var(--aui-inline-height-m);flex-shrink:0;padding-right:var(--aui-spacing-m);overflow:hidden}.aui-form-item__label-wrapper--required .aui-form-item__label:before{content:\"*\";color:rgb(var(--aui-color-red));margin-right:var(--aui-spacing-s)}.aui-form-item__label-wrapper.hasLabel:after{content:\":\";align-self:flex-start;margin-left:var(--aui-spacing-xs);line-height:var(--aui-inline-height-m)}.aui-form-item__label-wrapper--left{justify-content:flex-start}.aui-form-item__label-wrapper--left .aui-form-item__label{text-align:start}.aui-form-item__label-wrapper--right{justify-content:flex-end}.aui-form-item__label-wrapper--right .aui-form-item__label{text-align:end}.aui-form-item__label{display:block;line-height:var(--aui-line-height-s)}.aui-form-item__container{width:100%;min-width:0}.aui-form-item__content{display:flex;align-items:center;min-height:var(--aui-inline-height-m)}.aui-form-item__content--large .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-l)}.aui-form-item__content--medium .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-m)}.aui-form-item__content--small .aui-form-item__control{flex:1;max-width:var(--aui-form-item-width-s)}.aui-form-item__content+.aui-form-item__hint-wrapper,.aui-form-item__content+.aui-form-item__error-wrapper{margin-top:var(--aui-spacing-s)}.aui-form-item__hint-wrapper,.aui-form-item__error-wrapper{font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-form-item__hint-wrapper{color:rgb(var(--aui-color-n-4))}.aui-form-item__error-wrapper{color:rgb(var(--aui-color-red))}.aui-form-item__addon-wrapper{align-self:flex-start;display:flex;align-items:center;flex-shrink:0;box-sizing:content-box;height:var(--aui-inline-height-m);min-width:var(--aui-icon-size-m);padding-left:var(--aui-spacing-m);color:rgb(var(--aui-color-n-4));font-size:var(--aui-font-size-m)}.aui-form-item__addon-wrapper aui-icon{font-size:var(--aui-icon-size-m)}.aui-form--inline{display:flex}.aui-form--inline .aui-form-item{margin-bottom:0;margin-right:var(--aui-spacing-m)}\n"] }]
|
|
2839
2838
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FormDirective, decorators: [{
|
|
2840
2839
|
type: Optional
|
|
2841
2840
|
}] }, { type: i4.NgForm, decorators: [{
|
|
@@ -2850,8 +2849,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
2850
2849
|
type: Input
|
|
2851
2850
|
}], emptyAddon: [{
|
|
2852
2851
|
type: Input
|
|
2853
|
-
}], plain: [{
|
|
2854
|
-
type: Input
|
|
2855
2852
|
}], itemLabel: [{
|
|
2856
2853
|
type: ContentChild,
|
|
2857
2854
|
args: [FormItemLabelDirective, { static: false }]
|
|
@@ -9806,7 +9803,8 @@ class TimePickerPanelComponent extends CommonFormControl {
|
|
|
9806
9803
|
if (!type) {
|
|
9807
9804
|
return;
|
|
9808
9805
|
}
|
|
9809
|
-
const result = (currentValue ||
|
|
9806
|
+
const result = (currentValue ||
|
|
9807
|
+
updateDateByTimeModel(dayjs(), { hour: 0, minute: 0, second: 0 })).set(type, value);
|
|
9810
9808
|
this.emitModel(result);
|
|
9811
9809
|
return result;
|
|
9812
9810
|
}
|
|
@@ -9888,7 +9886,7 @@ TimePickerPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
|
|
|
9888
9886
|
useExisting: forwardRef(() => TimePickerPanelComponent),
|
|
9889
9887
|
multi: true,
|
|
9890
9888
|
},
|
|
9891
|
-
], viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"enabledColumns\" [class]=\"bem.block()\" [style.width.px]=\"totalWidth\">\n <div [class]=\"bem.element('content')\">\n <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(\n item,\n TimePickerControlType.Hour,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(\n item,\n TimePickerControlType.Minute,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(\n item,\n TimePickerControlType.Second,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container\n [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this }\"\n ></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{
|
|
9889
|
+
], viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"enabledColumns\" [class]=\"bem.block()\" [style.width.px]=\"totalWidth\">\n <div [class]=\"bem.element('content')\">\n <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(\n item,\n TimePickerControlType.Hour,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(\n item,\n TimePickerControlType.Minute,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(\n item,\n TimePickerControlType.Second,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container\n [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this }\"\n ></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"], components: [{ type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "number": i2.DecimalPipe, "auiI18n": I18nPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9892
9890
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimePickerPanelComponent, decorators: [{
|
|
9893
9891
|
type: Component,
|
|
9894
9892
|
args: [{ selector: 'aui-time-picker-panel', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -9899,7 +9897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
9899
9897
|
},
|
|
9900
9898
|
], host: {
|
|
9901
9899
|
mousedown: '$event.preventDefault()',
|
|
9902
|
-
}, template: "<div *ngIf=\"enabledColumns\" [class]=\"bem.block()\" [style.width.px]=\"totalWidth\">\n <div [class]=\"bem.element('content')\">\n <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(\n item,\n TimePickerControlType.Hour,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(\n item,\n TimePickerControlType.Minute,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(\n item,\n TimePickerControlType.Second,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container\n [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this }\"\n ></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{
|
|
9900
|
+
}, template: "<div *ngIf=\"enabledColumns\" [class]=\"bem.block()\" [style.width.px]=\"totalWidth\">\n <div [class]=\"bem.element('content')\">\n <div [class]=\"bem.element('column')\" #hourRef *ngIf=\"hourEnabled\">\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(\n item,\n TimePickerControlType.Hour,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #minuteRef *ngIf=\"minuteEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(\n item,\n TimePickerControlType.Minute,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div [class]=\"bem.element('column')\" #secondRef *ngIf=\"secondEnabled\">\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(\n item,\n TimePickerControlType.Second,\n model\n )\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container\n [ngTemplateOutlet]=\"footerTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: this }\"\n ></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"] }]
|
|
9903
9901
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { format: [{
|
|
9904
9902
|
type: Input
|
|
9905
9903
|
}], hourStep: [{
|
|
@@ -9994,12 +9992,16 @@ class TimePickerComponent extends CommonFormControl {
|
|
|
9994
9992
|
break;
|
|
9995
9993
|
}
|
|
9996
9994
|
}
|
|
9997
|
-
|
|
9995
|
+
handleTooltipOpen() {
|
|
9996
|
+
this.open.emit();
|
|
9997
|
+
}
|
|
9998
|
+
handleTooltipHide() {
|
|
9998
9999
|
if (this.onTouched) {
|
|
9999
10000
|
this.onTouched();
|
|
10000
10001
|
}
|
|
10001
10002
|
this.setValue(this.timeValue);
|
|
10002
10003
|
this.submit();
|
|
10004
|
+
this.close.emit();
|
|
10003
10005
|
}
|
|
10004
10006
|
openPanel() {
|
|
10005
10007
|
if (this.tooltipRef.isCreated) {
|
|
@@ -10042,7 +10044,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
10042
10044
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10043
10045
|
multi: true,
|
|
10044
10046
|
},
|
|
10045
|
-
], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"aui-time-picker\"\n [class.isDisabled]=\"disabled\"\n [class.isClearable]=\"clearable && timeFormatValue\"\n #tooltipRef=\"auiTooltip\"\n [auiTooltip]=\"template\"\n auiTooltipType=\"plain\"\n auiTooltipTrigger=\"click\"\n auiTooltipPosition=\"bottom start\"\n [auiTooltipDisabled]=\"disabled\"\n (auiTooltipShow)=\"
|
|
10047
|
+
], viewQueries: [{ propertyName: "tooltipRef", first: true, predicate: ["tooltipRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n class=\"aui-time-picker\"\n [class.isDisabled]=\"disabled\"\n [class.isClearable]=\"clearable && timeFormatValue\"\n #tooltipRef=\"auiTooltip\"\n [auiTooltip]=\"template\"\n auiTooltipType=\"plain\"\n auiTooltipTrigger=\"click\"\n auiTooltipPosition=\"bottom start\"\n [auiTooltipDisabled]=\"disabled\"\n (auiTooltipShow)=\"handleTooltipOpen()\"\n (auiTooltipHide)=\"handleTooltipHide()\"\n>\n <aui-input-group>\n <input\n aui-input\n autocomplete=\"off\"\n [size]=\"size\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"timeFormatValue\"\n (ngModelChange)=\"changeFromInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n <span\n *ngIf=\"showIcon\"\n auiInputSuffix\n class=\"aui-time-picker__icon-container\"\n >\n <aui-icon class=\"aui-time-picker__indicator\" icon=\"time\"></aui-icon>\n <aui-icon\n class=\"aui-time-picker__clear\"\n icon=\"close_small\"\n (click)=\"clearValue($event)\"\n ></aui-icon>\n </span>\n </aui-input-group>\n</div>\n\n<ng-template #template>\n <aui-time-picker-panel\n [disabled]=\"disabled\"\n [disableHours]=\"disableHours\"\n [disableMinutes]=\"disableMinutes\"\n [disableSeconds]=\"disableSeconds\"\n [hourStep]=\"hourStep\"\n [minuteStep]=\"minuteStep\"\n [secondStep]=\"secondStep\"\n [format]=\"format\"\n [footerTemplate]=\"footerTemplate\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"changeFromPanel($event)\"\n (confirm)=\"submit()\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative;color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"], components: [{ type: InputGroupComponent, selector: "aui-input-group" }, { type: InputComponent, selector: "input[aui-input],textarea[aui-input]", inputs: ["size", "disabled"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { type: TimePickerPanelComponent, selector: "aui-time-picker-panel", inputs: ["format", "hourStep", "minuteStep", "secondStep", "footerTemplate", "disableHours", "disableMinutes", "disableSeconds"], outputs: ["confirm"] }], directives: [{ type: TooltipDirective, selector: "[auiTooltip]", inputs: ["auiTooltip", "auiTooltipContext", "auiTooltipClass", "auiTooltipType", "auiTooltipPosition", "auiTooltipTrigger", "auiTooltipDisabled", "auiTooltipHideOnClick"], outputs: ["auiTooltipShow", "auiTooltipHide"], exportAs: ["auiTooltip"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: InputSuffixDirective, selector: "[auiInputSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10046
10048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: TimePickerComponent, decorators: [{
|
|
10047
10049
|
type: Component,
|
|
10048
10050
|
args: [{ selector: 'aui-time-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -10051,7 +10053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
|
|
|
10051
10053
|
useExisting: forwardRef(() => TimePickerComponent),
|
|
10052
10054
|
multi: true,
|
|
10053
10055
|
},
|
|
10054
|
-
], template: "<div\n class=\"aui-time-picker\"\n [class.isDisabled]=\"disabled\"\n [class.isClearable]=\"clearable && timeFormatValue\"\n #tooltipRef=\"auiTooltip\"\n [auiTooltip]=\"template\"\n auiTooltipType=\"plain\"\n auiTooltipTrigger=\"click\"\n auiTooltipPosition=\"bottom start\"\n [auiTooltipDisabled]=\"disabled\"\n (auiTooltipShow)=\"
|
|
10056
|
+
], template: "<div\n class=\"aui-time-picker\"\n [class.isDisabled]=\"disabled\"\n [class.isClearable]=\"clearable && timeFormatValue\"\n #tooltipRef=\"auiTooltip\"\n [auiTooltip]=\"template\"\n auiTooltipType=\"plain\"\n auiTooltipTrigger=\"click\"\n auiTooltipPosition=\"bottom start\"\n [auiTooltipDisabled]=\"disabled\"\n (auiTooltipShow)=\"handleTooltipOpen()\"\n (auiTooltipHide)=\"handleTooltipHide()\"\n>\n <aui-input-group>\n <input\n aui-input\n autocomplete=\"off\"\n [size]=\"size\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"timeFormatValue\"\n (ngModelChange)=\"changeFromInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n />\n <span\n *ngIf=\"showIcon\"\n auiInputSuffix\n class=\"aui-time-picker__icon-container\"\n >\n <aui-icon class=\"aui-time-picker__indicator\" icon=\"time\"></aui-icon>\n <aui-icon\n class=\"aui-time-picker__clear\"\n icon=\"close_small\"\n (click)=\"clearValue($event)\"\n ></aui-icon>\n </span>\n </aui-input-group>\n</div>\n\n<ng-template #template>\n <aui-time-picker-panel\n [disabled]=\"disabled\"\n [disableHours]=\"disableHours\"\n [disableMinutes]=\"disableMinutes\"\n [disableSeconds]=\"disableSeconds\"\n [hourStep]=\"hourStep\"\n [minuteStep]=\"minuteStep\"\n [secondStep]=\"secondStep\"\n [format]=\"format\"\n [footerTemplate]=\"footerTemplate\"\n [(ngModel)]=\"timeValue\"\n (ngModelChange)=\"changeFromPanel($event)\"\n (confirm)=\"submit()\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.preventDefault()\"\n ></aui-time-picker-panel>\n</ng-template>\n", styles: [".aui-time-picker{display:inline-block;position:relative;width:var(--aui-form-item-width-s)}.aui-time-picker__icon-container{display:block;position:relative;color:rgb(var(--aui-color-n-4))}.aui-time-picker__clear{display:none}.aui-time-picker__clear .aui-icon{border-radius:50%;color:rgb(var(--aui-color-help-text));cursor:pointer;transition:all .3s ease}.aui-time-picker__clear .aui-icon:hover{color:rgb(var(--aui-color-main-bg));background-color:rgb(var(--aui-color-help-text))}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__indicator{display:none}.aui-time-picker.isClearable:not(.isDisabled):hover .aui-time-picker__clear{display:flex}aui-time-picker.ng-invalid.ng-dirty .aui-input,.ng-submitted aui-time-picker.ng-invalid .aui-input{border-color:rgb(var(--aui-color-red))!important}:root aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,:root aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,:root .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,:root .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=light] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=light] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=system] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=system] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}}html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input:focus,html[aui-theme-mode=dark] aui-time-picker.ng-invalid.ng-dirty .aui-input.isFocused,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input:focus,html[aui-theme-mode=dark] .ng-submitted aui-time-picker.ng-invalid .aui-input.isFocused{box-shadow:0 0 0 2px rgba(var(--aui-color-red),.3)}\n"] }]
|
|
10055
10057
|
}], propDecorators: { format: [{
|
|
10056
10058
|
type: Input
|
|
10057
10059
|
}], size: [{
|