@acorex/components 20.7.52 → 20.7.54
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/calendar/index.d.ts +5 -1
- package/fesm2022/acorex-components-calendar.mjs +30 -14
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-list.mjs +54 -4
- package/fesm2022/acorex-components-list.mjs.map +1 -1
- package/fesm2022/acorex-components-loading-dialog.mjs +1 -0
- package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +20 -7
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-select-box.mjs +35 -5
- package/fesm2022/acorex-components-select-box.mjs.map +1 -1
- package/fesm2022/acorex-components-time-duration.mjs +6 -2
- package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
- package/list/index.d.ts +15 -1
- package/loading-dialog/index.d.ts +16 -16
- package/menu/index.d.ts +6 -2
- package/package.json +7 -7
- package/select-box/index.d.ts +1 -0
- package/time-duration/index.d.ts +1 -0
|
@@ -103,7 +103,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
|
|
|
103
103
|
if (Array.isArray(v)) {
|
|
104
104
|
this._listDataSource = convertArrayToDataSource(v, {
|
|
105
105
|
key: this.valueField,
|
|
106
|
-
pageSize: 10,
|
|
106
|
+
pageSize: v.length || 10,
|
|
107
107
|
});
|
|
108
108
|
}
|
|
109
109
|
else {
|
|
@@ -181,7 +181,6 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
|
|
|
181
181
|
_handleOnOpenedEvent(e) {
|
|
182
182
|
if (!this.renderList()) {
|
|
183
183
|
this.renderList.set(true);
|
|
184
|
-
this.list?.render();
|
|
185
184
|
}
|
|
186
185
|
else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
|
|
187
186
|
this.list?.refresh(false);
|
|
@@ -275,7 +274,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
|
|
|
275
274
|
this._dropdownWidth.set('100%');
|
|
276
275
|
}
|
|
277
276
|
else {
|
|
278
|
-
const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()));
|
|
277
|
+
const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
|
|
279
278
|
const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
|
|
280
279
|
const maxItems = Number(this.maxVisibleItems());
|
|
281
280
|
this._dropdownWidth.set(`${hostWidth}px`);
|
|
@@ -295,8 +294,39 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
|
|
|
295
294
|
this.setDropdownSize(this._listDataSource.totalCount);
|
|
296
295
|
this.updateDropdownPosition();
|
|
297
296
|
this.list?.render();
|
|
297
|
+
if (!this.isItemTruncated()) {
|
|
298
|
+
setTimeout(() => {
|
|
299
|
+
this._fitDropdownToContent();
|
|
300
|
+
setTimeout(() => this._fitDropdownToContent(), 100);
|
|
301
|
+
});
|
|
302
|
+
}
|
|
298
303
|
});
|
|
299
304
|
}
|
|
305
|
+
_fitDropdownToContent() {
|
|
306
|
+
const panel = this.panel?.nativeElement;
|
|
307
|
+
if (!panel)
|
|
308
|
+
return;
|
|
309
|
+
const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
|
|
310
|
+
let contentWidth = hostWidth;
|
|
311
|
+
panel.querySelectorAll('li.list-item').forEach((item) => {
|
|
312
|
+
const label = item.querySelector('.ax-label-container span');
|
|
313
|
+
if (label) {
|
|
314
|
+
const labelContainer = label.parentElement;
|
|
315
|
+
const horizontalPadding = labelContainer
|
|
316
|
+
? item.offsetWidth - labelContainer.clientWidth
|
|
317
|
+
: 0;
|
|
318
|
+
contentWidth = Math.max(contentWidth, label.scrollWidth + horizontalPadding);
|
|
319
|
+
}
|
|
320
|
+
else {
|
|
321
|
+
contentWidth = Math.max(contentWidth, item.scrollWidth);
|
|
322
|
+
}
|
|
323
|
+
});
|
|
324
|
+
const nextWidth = `${Math.max(hostWidth, contentWidth)}px`;
|
|
325
|
+
if (this._dropdownWidth() !== nextWidth) {
|
|
326
|
+
this._dropdownWidth.set(nextWidth);
|
|
327
|
+
this.dropdown.updatePosition();
|
|
328
|
+
}
|
|
329
|
+
}
|
|
300
330
|
internalValueChanged(value) {
|
|
301
331
|
super.internalValueChanged(value);
|
|
302
332
|
this.updateDropdownPosition();
|
|
@@ -394,7 +424,7 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
|
|
|
394
424
|
useClass: MXSelectionBridgeService,
|
|
395
425
|
},
|
|
396
426
|
AXUnsubscriber,
|
|
397
|
-
], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n <div class=\"ax-chips\">\n {{ getDisplayText(item) | translate | async }}\n @if (!disabled && !readonly && multiple) {\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n }\n </div>\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-button\">\n @if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"_dropdownWidth()\">\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n <div class=\"ax-search-container\">\n <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n </div>\n }\n @if (renderList()) {\n <ax-list\n [name]=\"name\"\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [itemHeight]=\"itemHeight()\"\n [itemTemplate]=\"itemTemplate\"\n [textTemplate]=\"textTemplate\"\n [dataSource]=\"_listDataSource\"\n [style.height]=\"_dropdownHeight()\"\n [loadingTemplate]=\"loadingTemplate\"\n [isItemTruncated]=\"isItemTruncated()\"\n [showItemTooltip]=\"showItemTooltip()\"\n (onItemClick)=\"_handleItemClick($event)\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n (onItemSelected)=\"_handleItemSelected($event)\"\n >\n </ax-list>\n <ng-template #empty>\n {{ '@acorex:common.general.no-result-found' | translate | async }}\n </ng-template>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-editor-container.ax-fill .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surfaceest);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-flat .ax-chips,.ax-editor-container.ax-outline .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-solid .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-light-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-light-surface)}ax-select-box .ax-chips-container{outline:0px solid transparent}.ax-xs ax-select-box,ax-select-box.ax-xs{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .625rem;--ax-comp-editor-placeholder-space-x: .375rem}.ax-sm ax-select-box,ax-select-box.ax-sm{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .75rem;--ax-comp-editor-placeholder-space-x: .5rem}ax-select-box,ax-select-box.ax-md{--ax-comp-select-box-chips-padding-x: .5rem;--ax-comp-select-box-chips-padding-y: .25rem;--ax-comp-select-box-chips-font-size: .875rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-lg ax-select-box,ax-select-box.ax-lg{--ax-comp-select-box-chips-padding-x: .75rem;--ax-comp-select-box-chips-padding-y: .5rem;--ax-comp-select-box-chips-font-size: 1rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-xl ax-select-box,ax-select-box.ax-xl{--ax-comp-select-box-chips-padding-x: .875rem;--ax-comp-select-box-chips-padding-y: .75rem;--ax-comp-select-box-chips-font-size: 1.125rem;--ax-comp-editor-placeholder-space-x: .75rem}ax-select-box{display:block;width:100%;border-radius:var(--ax-sys-border-radius)}ax-select-box.ax-float-label .ax-editor{padding-top:1.75rem!important}ax-select-box .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-select-box .ax-state-disabled .ax-content,ax-select-box .ax-state-disabled .ax-editor-button{cursor:not-allowed}ax-select-box .ax-state-disabled .ax-chips-container{cursor:not-allowed!important}ax-select-box ax-dropdown-box{border-radius:inherit!important}ax-select-box ax-dropdown-box.ax-state-multiple{height:auto;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-select-box ax-dropdown-box.ax-state-multiple .ax-placeholder{padding:0 var(--ax-comp-editor-placeholder-space-x)}ax-select-box .ax-chips-container{display:flex;flex:1 1 0%;min-width:0;cursor:pointer!important;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-select-box-chips-gap, .25rem);min-height:var(--ax-sys-size-base)}ax-select-box .ax-chips-container .ax-chips{display:block;overflow:hidden;text-wrap:nowrap;line-height:normal;text-overflow:ellipsis;padding:0 var(--ax-comp-editor-padding-x, .25rem);color:rgb(var(--ax-comp-select-box-chips-text-color));font-size:var(--ax-comp-select-box-chips-font-size)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips{background-color:rgb(var(--ax-comp-select-box-chips-bg-color));border-radius:var(--ax-comp-select-box-chips-border-radius, 999rem);border-width:var(--ax-comp-select-box-chips-border-width, 0px);padding:var(--ax-comp-select-box-chips-padding-y, .25rem) var(--ax-comp-select-box-chips-padding-x, .5rem)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips .ax-icon-close{cursor:pointer;margin-inline-start:var(--ax-comp-select-box-chips-padding-x)}ax-select-box .ax-chips-container .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel .ax-select-box-loading-container{display:flex;align-items:center;justify-content:center;padding:1rem}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-500))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:1rem;line-height:1.5rem;font-weight:500}@media (width <= 40rem){.ax-select-box-panel .list-item{padding:1rem}}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
427
|
+
], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n <div class=\"ax-chips\">\n {{ getDisplayText(item) | translate | async }}\n @if (!disabled && !readonly && multiple) {\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n }\n </div>\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-button\">\n @if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div\n #panel\n class=\"ax-select-box-panel\"\n [class.ax-no-truncate]=\"!isItemTruncated()\"\n [style.min-width]=\"_dropdownWidth()\"\n >\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n <div class=\"ax-search-container\">\n <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n </div>\n }\n @if (renderList()) {\n <ax-list\n [name]=\"name\"\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [itemHeight]=\"itemHeight()\"\n [itemTemplate]=\"itemTemplate\"\n [textTemplate]=\"textTemplate\"\n [dataSource]=\"_listDataSource\"\n [style.height]=\"_dropdownHeight()\"\n [loadingTemplate]=\"loadingTemplate\"\n [isItemTruncated]=\"isItemTruncated()\"\n [showItemTooltip]=\"showItemTooltip()\"\n (onItemClick)=\"_handleItemClick($event)\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n (onItemSelected)=\"_handleItemSelected($event)\"\n >\n </ax-list>\n <ng-template #empty>\n {{ '@acorex:common.general.no-result-found' | translate | async }}\n </ng-template>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-editor-container.ax-fill .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surfaceest);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-flat .ax-chips,.ax-editor-container.ax-outline .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-solid .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-light-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-light-surface)}ax-select-box .ax-chips-container{outline:0px solid transparent}.ax-xs ax-select-box,ax-select-box.ax-xs{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .625rem;--ax-comp-editor-placeholder-space-x: .375rem}.ax-sm ax-select-box,ax-select-box.ax-sm{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .75rem;--ax-comp-editor-placeholder-space-x: .5rem}ax-select-box,ax-select-box.ax-md{--ax-comp-select-box-chips-padding-x: .5rem;--ax-comp-select-box-chips-padding-y: .25rem;--ax-comp-select-box-chips-font-size: .875rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-lg ax-select-box,ax-select-box.ax-lg{--ax-comp-select-box-chips-padding-x: .75rem;--ax-comp-select-box-chips-padding-y: .5rem;--ax-comp-select-box-chips-font-size: 1rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-xl ax-select-box,ax-select-box.ax-xl{--ax-comp-select-box-chips-padding-x: .875rem;--ax-comp-select-box-chips-padding-y: .75rem;--ax-comp-select-box-chips-font-size: 1.125rem;--ax-comp-editor-placeholder-space-x: .75rem}ax-select-box{display:block;width:100%;border-radius:var(--ax-sys-border-radius)}ax-select-box.ax-float-label .ax-editor{padding-top:1.75rem!important}ax-select-box .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-select-box .ax-state-disabled .ax-content,ax-select-box .ax-state-disabled .ax-editor-button{cursor:not-allowed}ax-select-box .ax-state-disabled .ax-chips-container{cursor:not-allowed!important}ax-select-box ax-dropdown-box{border-radius:inherit!important}ax-select-box ax-dropdown-box.ax-state-multiple{height:auto;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-select-box ax-dropdown-box.ax-state-multiple .ax-placeholder{padding:0 var(--ax-comp-editor-placeholder-space-x)}ax-select-box .ax-chips-container{display:flex;flex:1 1 0%;min-width:0;cursor:pointer!important;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-select-box-chips-gap, .25rem);min-height:var(--ax-sys-size-base)}ax-select-box .ax-chips-container .ax-chips{display:block;overflow:hidden;text-wrap:nowrap;line-height:normal;text-overflow:ellipsis;padding:0 var(--ax-comp-editor-padding-x, .25rem);color:rgb(var(--ax-comp-select-box-chips-text-color));font-size:var(--ax-comp-select-box-chips-font-size)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips{background-color:rgb(var(--ax-comp-select-box-chips-bg-color));border-radius:var(--ax-comp-select-box-chips-border-radius, 999rem);border-width:var(--ax-comp-select-box-chips-border-width, 0px);padding:var(--ax-comp-select-box-chips-padding-y, .25rem) var(--ax-comp-select-box-chips-padding-x, .5rem)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips .ax-icon-close{cursor:pointer;margin-inline-start:var(--ax-comp-select-box-chips-padding-x)}ax-select-box .ax-chips-container .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{display:flex;align-items:center;justify-content:center;padding:1rem}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-500))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:1rem;line-height:1.5rem;font-weight:500}@media (width <= 40rem){.ax-select-box-panel .list-item{padding:1rem}}\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { 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: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
398
428
|
}
|
|
399
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
|
|
400
430
|
type: Component,
|
|
@@ -457,7 +487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
457
487
|
AXLoadingComponent,
|
|
458
488
|
AsyncPipe,
|
|
459
489
|
AXTranslatorPipe,
|
|
460
|
-
], template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n <div class=\"ax-chips\">\n {{ getDisplayText(item) | translate | async }}\n @if (!disabled && !readonly && multiple) {\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n }\n </div>\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-button\">\n @if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div
|
|
490
|
+
], template: "<ax-dropdown-box\n [class.ax-state-multiple]=\"multiple\"\n (onOpened)=\"_handleOnOpenedEvent($event)\"\n (onClosed)=\"_handleOnClosedEvent($event)\"\n (focus)=\"emitOnFocusEvent($event)\"\n (blur)=\"emitOnBlurEvent($event)\"\n [disabled]=\"disabled\"\n [look]=\"look\"\n [popoverWidth]=\"dropdownWidth()\"\n>\n <ng-container input>\n <ng-content select=\"ax-prefix\"> </ng-content>\n <div\n class=\"ax-editor ax-chips-container ax-content ax-input\"\n [class.ax-state-multiple]=\"multiple\"\n [tabindex]=\"tabIndex\"\n >\n @if (selectedItems.length === 0) {\n <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n {{ placeholder | translate | async }}\n </div>\n }\n @for (item of selectedItems; track $index) {\n @if (selectedTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"selectedTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n ></ng-template>\n } @else {\n <div class=\"ax-chips\">\n {{ getDisplayText(item) | translate | async }}\n @if (!disabled && !readonly && multiple) {\n <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"> </span>\n }\n </div>\n }\n }\n </div>\n @if (selectedItems?.length && !disabled && !readonly) {\n <ng-content select=\"ax-clear-button\"></ng-content>\n }\n <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-editor-button\">\n @if (isLoading()) {\n <ax-loading></ax-loading>\n } @else {\n <span\n class=\"ax-icon\"\n [ngClass]=\"{\n 'ax-icon-chevron-down': !isOpen,\n 'ax-icon-chevron-up': isOpen,\n }\"\n ></span>\n }\n </button>\n <ng-content select=\"ax-suffix\"> </ng-content>\n <ng-template #search>\n <ng-content select=\"ax-search-box\"> </ng-content>\n </ng-template>\n </ng-container>\n <ng-container panel>\n <div\n #panel\n class=\"ax-select-box-panel\"\n [class.ax-no-truncate]=\"!isItemTruncated()\"\n [style.min-width]=\"_dropdownWidth()\"\n >\n @if (dropdown.isActionsheetStyle) {\n <ax-header class=\"ax-solid\">\n <ax-title>{{ caption || placeholder || '@acorex:selectbox.popover.title' | translate | async }}</ax-title>\n <ax-close-button [icon]=\"multiple ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n </ax-header>\n }\n @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n <div class=\"ax-search-container\">\n <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n </div>\n }\n @if (renderList()) {\n <ax-list\n [name]=\"name\"\n [ngModel]=\"value\"\n [readonly]=\"readonly\"\n [multiple]=\"multiple\"\n [textField]=\"textField\"\n [selectionMode]=\"'item'\"\n [valueField]=\"valueField\"\n [itemHeight]=\"itemHeight()\"\n [itemTemplate]=\"itemTemplate\"\n [textTemplate]=\"textTemplate\"\n [dataSource]=\"_listDataSource\"\n [style.height]=\"_dropdownHeight()\"\n [loadingTemplate]=\"loadingTemplate\"\n [isItemTruncated]=\"isItemTruncated()\"\n [showItemTooltip]=\"showItemTooltip()\"\n (onItemClick)=\"_handleItemClick($event)\"\n [emptyTemplate]=\"emptyTemplate ?? empty\"\n (onValueChanged)=\"_handleValueChanged($event)\"\n (onItemSelected)=\"_handleItemSelected($event)\"\n >\n </ax-list>\n <ng-template #empty>\n {{ '@acorex:common.general.no-result-found' | translate | async }}\n </ng-template>\n }\n\n @if (isLoading()) {\n @if (loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n }\n }\n\n <ng-content select=\"ax-footer\"> </ng-content>\n </div>\n </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-editor-container.ax-fill .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surfaceest);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-flat .ax-chips,.ax-editor-container.ax-outline .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-surface-high)}.ax-editor-container.ax-solid .ax-chips{--ax-comp-select-box-chips-bg-color: var(--ax-sys-color-light-surface);--ax-comp-select-box-chips-text-color: var(--ax-sys-color-on-light-surface)}ax-select-box .ax-chips-container{outline:0px solid transparent}.ax-xs ax-select-box,ax-select-box.ax-xs{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .625rem;--ax-comp-editor-placeholder-space-x: .375rem}.ax-sm ax-select-box,ax-select-box.ax-sm{--ax-comp-select-box-chips-padding-x: .25rem;--ax-comp-select-box-chips-padding-y: .125rem;--ax-comp-select-box-chips-font-size: .75rem;--ax-comp-editor-placeholder-space-x: .5rem}ax-select-box,ax-select-box.ax-md{--ax-comp-select-box-chips-padding-x: .5rem;--ax-comp-select-box-chips-padding-y: .25rem;--ax-comp-select-box-chips-font-size: .875rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-lg ax-select-box,ax-select-box.ax-lg{--ax-comp-select-box-chips-padding-x: .75rem;--ax-comp-select-box-chips-padding-y: .5rem;--ax-comp-select-box-chips-font-size: 1rem;--ax-comp-editor-placeholder-space-x: .75rem}.ax-xl ax-select-box,ax-select-box.ax-xl{--ax-comp-select-box-chips-padding-x: .875rem;--ax-comp-select-box-chips-padding-y: .75rem;--ax-comp-select-box-chips-font-size: 1.125rem;--ax-comp-editor-placeholder-space-x: .75rem}ax-select-box{display:block;width:100%;border-radius:var(--ax-sys-border-radius)}ax-select-box.ax-float-label .ax-editor{padding-top:1.75rem!important}ax-select-box .ax-state-disabled{opacity:.5;cursor:not-allowed}ax-select-box .ax-state-disabled .ax-content,ax-select-box .ax-state-disabled .ax-editor-button{cursor:not-allowed}ax-select-box .ax-state-disabled .ax-chips-container{cursor:not-allowed!important}ax-select-box ax-dropdown-box{border-radius:inherit!important}ax-select-box ax-dropdown-box.ax-state-multiple{height:auto;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-select-box ax-dropdown-box.ax-state-multiple .ax-placeholder{padding:0 var(--ax-comp-editor-placeholder-space-x)}ax-select-box .ax-chips-container{display:flex;flex:1 1 0%;min-width:0;cursor:pointer!important;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-select-box-chips-gap, .25rem);min-height:var(--ax-sys-size-base)}ax-select-box .ax-chips-container .ax-chips{display:block;overflow:hidden;text-wrap:nowrap;line-height:normal;text-overflow:ellipsis;padding:0 var(--ax-comp-editor-padding-x, .25rem);color:rgb(var(--ax-comp-select-box-chips-text-color));font-size:var(--ax-comp-select-box-chips-font-size)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips{background-color:rgb(var(--ax-comp-select-box-chips-bg-color));border-radius:var(--ax-comp-select-box-chips-border-radius, 999rem);border-width:var(--ax-comp-select-box-chips-border-width, 0px);padding:var(--ax-comp-select-box-chips-padding-y, .25rem) var(--ax-comp-select-box-chips-padding-x, .5rem)}ax-select-box .ax-chips-container.ax-state-multiple .ax-chips .ax-icon-close{cursor:pointer;margin-inline-start:var(--ax-comp-select-box-chips-padding-x)}ax-select-box .ax-chips-container .ax-selectbox-input{width:0px;opacity:0}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}.ax-select-box-panel{height:fit-content}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{display:flex;align-items:center;justify-content:center;padding:1rem}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-500))}.ax-select-box-panel>ax-header.ax-solid{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-select-box-panel>ax-header.ax-solid ax-title{font-size:1rem;line-height:1.5rem;font-weight:500}@media (width <= 40rem){.ax-select-box-panel .list-item{padding:1rem}}\n"] }]
|
|
461
491
|
}], propDecorators: { dataSource: [{
|
|
462
492
|
type: Input
|
|
463
493
|
}], placeholder: [{
|