@acorex/components 20.3.15 → 20.3.16
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/acorex-components-datetime-picker.mjs +2 -2
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-dropdown.mjs +2 -2
- package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
- package/fesm2022/acorex-components-media-viewer.mjs +21 -14
- package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
- package/fesm2022/acorex-components-picker.mjs +4 -3
- package/fesm2022/acorex-components-picker.mjs.map +1 -1
- package/fesm2022/acorex-components-popover.mjs +19 -4
- package/fesm2022/acorex-components-popover.mjs.map +1 -1
- package/fesm2022/acorex-components-tooltip.mjs +24 -30
- package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
- package/media-viewer/index.d.ts +1 -0
- package/package.json +7 -7
- package/popover/index.d.ts +6 -2
- package/tooltip/index.d.ts +1 -1
|
@@ -424,7 +424,7 @@ class AXDateTimePickerComponent extends classes(MXCalendarBaseComponent, (MXValu
|
|
|
424
424
|
useExisting: forwardRef(() => AXDateTimePickerComponent),
|
|
425
425
|
multi: true,
|
|
426
426
|
},
|
|
427
|
-
], viewQueries: [{ propertyName: "tabs", first: true, predicate: AXTabsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item\n [text]=\"'@acorex:dateTime.date' | translate | async\"\n [key]=\"'date'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n <ax-tab-item\n [text]=\"'@acorex:dateTime.time' | translate | async\"\n [key]=\"'time'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [ngModel]=\"editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n @if (picker() === 'datetime') {\n {{ editingDateObj() | format: 'time' : '
|
|
427
|
+
], viewQueries: [{ propertyName: "tabs", first: true, predicate: AXTabsComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item\n [text]=\"'@acorex:dateTime.date' | translate | async\"\n [key]=\"'date'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n <ax-tab-item\n [text]=\"'@acorex:dateTime.time' | translate | async\"\n [key]=\"'time'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [ngModel]=\"editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n @if (picker() === 'datetime') {\n {{ editingDateObj() | format: 'time' : 'short' | async }}\n {{ editingDateObj() | format: 'date' : 'short' | async }}\n } @else {\n {{ editingDateObj() | format: picker() : 'medium' | async }}\n }\n </div>\n <div dir=\"ltr\" class=\"ax-picker-time-container\">\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n </div>\n </div>\n }\n</div>\n@if (!disabled && !readonly && (currentTimeButton || _hasTimePart)) {\n <div class=\"ax-footer\">\n <div>\n @if (currentTimeButton) {\n <ax-button\n [text]=\"`@acorex:${buttonText()}` | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleNowClick()\"\n [disabled]=\"isTodayDisabled()\"\n ></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button\n color=\"primary\"\n [text]=\"'@acorex:dateTime.set' | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleSetClick()\"\n ></ax-button>\n }\n </div>\n </div>\n}\n\n<ng-template #hourRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.hour' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"hours\"\n [ngModel]=\"editingDateObj().hour\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'hour')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerHoursMinValue()\"\n [maxValue]=\"pickerHoursMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #minuteRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.minute' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"editingDateObj().minute\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'minute')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerMinuteMinValue()\"\n [maxValue]=\"pickerMinuteMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #secondRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.second' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"editingDateObj().second\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'second')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerSecondMinValue()\"\n [maxValue]=\"pickerSecondMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n", styles: ["ax-datetime-picker{display:flex;flex-direction:column}ax-datetime-picker>.ax-header{display:flex;justify-content:center;padding-top:var(--ax-comp-datetime-picker-header-padding-t, .5rem);padding-left:var(--ax-comp-datetime-picker-header-padding-x, .5rem);padding-right:var(--ax-comp-datetime-picker-header-padding-x, .5rem)}ax-datetime-picker>.ax-content{width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 768px){ax-datetime-picker>.ax-content{width:var(--ax-comp-datetime-picker-md-width, 20rem)}}ax-datetime-picker>.ax-content .ax-picker-part{width:100%;display:flex;flex-direction:column;height:var(--ax-comp-datetime-picker-picker-part-height, 376px)}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{display:flex;height:100%}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{font-weight:500;text-align:center;padding:var(--ax-comp-datetime-picker-picker-part-header-padding, .75rem);font-size:var(--ax-comp-datetime-picker-picker-part-header-font-size, 1rem);border-bottom:solid;border-bottom-width:var(--ax-comp-datetime-picker-picker-part-header-border-width, 1px);border-bottom-color:rgba(var(--ax-comp-datetime-picker-picker-part-header-border-color, var(--ax-sys-color-border-surface)))}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1 1 0%}ax-datetime-picker>.ax-content .ax-calendar-part{width:100%;padding-top:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem);padding-bottom:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{display:flex;justify-content:space-between;padding:var(--ax-comp-datetime-picker-footer-padding, .5rem);border-color:rgba(var(--ax-comp-datetime-picker-footer-border-color, var(--ax-sys-color-border-surface)));border-top-width:var(--ax-comp-datetime-picker-footer-border-top-width, 1px)}ax-datetime-picker>.ax-footer ax-button{min-width:100px}\n"], dependencies: [{ kind: "component", type: AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXPickerContainerComponent, selector: "ax-picker-container", inputs: ["class"] }, { kind: "component", type: AXPickerTitleComponent, selector: "ax-picker-title" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPickerItemsComponent, selector: "ax-picker-items", inputs: ["disabled", "readonly", "readonlyChange", "disabledChange", "items", "valueField", "textField", "slidesPerGroup", "loop", "minValue", "maxValue"], outputs: ["onValueChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
428
428
|
}
|
|
429
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDateTimePickerComponent, decorators: [{
|
|
430
430
|
type: Component,
|
|
@@ -486,7 +486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
486
486
|
AsyncPipe,
|
|
487
487
|
AXFormatPipe,
|
|
488
488
|
AXTranslatorPipe,
|
|
489
|
-
], template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item\n [text]=\"'@acorex:dateTime.date' | translate | async\"\n [key]=\"'date'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n <ax-tab-item\n [text]=\"'@acorex:dateTime.time' | translate | async\"\n [key]=\"'time'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [ngModel]=\"editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n @if (picker() === 'datetime') {\n {{ editingDateObj() | format: 'time' : '
|
|
489
|
+
], template: "@if (_hasDatePart && _hasTimePart) {\n <div class=\"ax-header\">\n <ax-tabs [look]=\"'default'\" [fitParent]=\"true\" [location]=\"'top'\" (onActiveTabChanged)=\"_handleViewChanged($event)\">\n <ax-tab-item\n [text]=\"'@acorex:dateTime.date' | translate | async\"\n [key]=\"'date'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n <ax-tab-item\n [text]=\"'@acorex:dateTime.time' | translate | async\"\n [key]=\"'time'\"\n [disabled]=\"disabled\"\n ></ax-tab-item>\n </ax-tabs>\n </div>\n}\n<div class=\"ax-content\">\n @if (_activePart() === 'date') {\n <div class=\"ax-calendar-part\">\n <ax-calendar\n #calendar\n id=\"calendar\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [weekend]=\"weekend()\"\n [weekdays]=\"weekdays()\"\n [ngModel]=\"editingDateObj().date\"\n [minValue]=\"minValue\"\n [maxValue]=\"maxValue\"\n [disabledDates]=\"disabledDates\"\n [holidayDates]=\"holidayDates\"\n [depth]=\"depth\"\n (onNavigate)=\"_handleCalendarOnNavigate($event)\"\n (onValueChanged)=\"_handleCalendarOnValueChanged($event)\"\n [type]=\"_calendarSystem()\"\n >\n </ax-calendar>\n </div>\n }\n\n @if (_activePart() === 'time') {\n <div class=\"ax-picker-part\">\n <div class=\"ax-header\">\n @if (picker() === 'datetime') {\n {{ editingDateObj() | format: 'time' : 'short' | async }}\n {{ editingDateObj() | format: 'date' : 'short' | async }}\n } @else {\n {{ editingDateObj() | format: picker() : 'medium' | async }}\n }\n </div>\n <div dir=\"ltr\" class=\"ax-picker-time-container\">\n @if (_parts.hour.enabled) {\n <ng-container [ngTemplateOutlet]=\"hourRef\"> </ng-container>\n }\n\n @if (_parts.minute.enabled) {\n <ng-container [ngTemplateOutlet]=\"minuteRef\"> </ng-container>\n }\n\n @if (_parts.second.enabled) {\n <ng-container [ngTemplateOutlet]=\"secondRef\"> </ng-container>\n }\n </div>\n </div>\n }\n</div>\n@if (!disabled && !readonly && (currentTimeButton || _hasTimePart)) {\n <div class=\"ax-footer\">\n <div>\n @if (currentTimeButton) {\n <ax-button\n [text]=\"`@acorex:${buttonText()}` | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleNowClick()\"\n [disabled]=\"isTodayDisabled()\"\n ></ax-button>\n }\n </div>\n <div>\n @if (_hasTimePart) {\n <ax-button\n color=\"primary\"\n [text]=\"'@acorex:dateTime.set' | translate | async\"\n class=\"ax-sm\"\n (onClick)=\"_handleSetClick()\"\n ></ax-button>\n }\n </div>\n </div>\n}\n\n<ng-template #hourRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.hour' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"hours\"\n [ngModel]=\"editingDateObj().hour\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'hour')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerHoursMinValue()\"\n [maxValue]=\"pickerHoursMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #minuteRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.minute' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"editingDateObj().minute\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'minute')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerMinuteMinValue()\"\n [maxValue]=\"pickerMinuteMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n\n<ng-template #secondRef>\n <ax-picker-container>\n <ax-picker-title>\n <ax-text>{{ '@acorex:dateTime.units.second' | translate | async }}</ax-text>\n </ax-picker-title>\n <ax-picker-items\n [items]=\"minutes\"\n [ngModel]=\"editingDateObj().second\"\n (onValueChanged)=\"_handlePickerOnValueChanged($event, 'second')\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [minValue]=\"pickerSecondMinValue()\"\n [maxValue]=\"pickerSecondMaxValue()\"\n ></ax-picker-items>\n </ax-picker-container>\n</ng-template>\n", styles: ["ax-datetime-picker{display:flex;flex-direction:column}ax-datetime-picker>.ax-header{display:flex;justify-content:center;padding-top:var(--ax-comp-datetime-picker-header-padding-t, .5rem);padding-left:var(--ax-comp-datetime-picker-header-padding-x, .5rem);padding-right:var(--ax-comp-datetime-picker-header-padding-x, .5rem)}ax-datetime-picker>.ax-content{width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (min-width: 768px){ax-datetime-picker>.ax-content{width:var(--ax-comp-datetime-picker-md-width, 20rem)}}ax-datetime-picker>.ax-content .ax-picker-part{width:100%;display:flex;flex-direction:column;height:var(--ax-comp-datetime-picker-picker-part-height, 376px)}ax-datetime-picker>.ax-content .ax-picker-part .ax-picker-time-container{display:flex;height:100%}ax-datetime-picker>.ax-content .ax-picker-part>.ax-header{font-weight:500;text-align:center;padding:var(--ax-comp-datetime-picker-picker-part-header-padding, .75rem);font-size:var(--ax-comp-datetime-picker-picker-part-header-font-size, 1rem);border-bottom:solid;border-bottom-width:var(--ax-comp-datetime-picker-picker-part-header-border-width, 1px);border-bottom-color:rgba(var(--ax-comp-datetime-picker-picker-part-header-border-color, var(--ax-sys-color-border-surface)))}ax-datetime-picker>.ax-content .ax-picker-part ax-picker{flex:1 1 0%}ax-datetime-picker>.ax-content .ax-calendar-part{width:100%;padding-top:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem);padding-bottom:var(--ax-comp-datetime-picker-calendar-part-padding, .25rem)}ax-datetime-picker>.ax-content .ax-calendar-part ax-calendar{width:100%}ax-datetime-picker>.ax-footer{display:flex;justify-content:space-between;padding:var(--ax-comp-datetime-picker-footer-padding, .5rem);border-color:rgba(var(--ax-comp-datetime-picker-footer-border-color, var(--ax-sys-color-border-surface)));border-top-width:var(--ax-comp-datetime-picker-footer-border-top-width, 1px)}ax-datetime-picker>.ax-footer ax-button{min-width:100px}\n"] }]
|
|
490
490
|
}], propDecorators: { weekend: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekend", required: false }] }], weekdays: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekdays", required: false }] }], currentTimeButton: [{
|
|
491
491
|
type: Input
|
|
492
492
|
}], tabs: [{
|