@testgorilla/tgo-ui 2.33.17 → 2.33.19
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/components/button/button.component.d.ts +1 -1
- package/components/confirm-dialog/confirm-dialog.component.d.ts +5 -0
- package/components/confirm-dialog/confirm-dialog.model.d.ts +5 -0
- package/components/dialog/dialog.component.d.ts +8 -1
- package/components/scale/scale.component.d.ts +1 -0
- package/components/tabs/tab.directive.d.ts +2 -1
- package/components/tabs/tabs.component.d.ts +3 -0
- package/components/tabs/tabs.model.d.ts +1 -0
- package/esm2022/components/button/button.component.mjs +1 -8
- package/esm2022/components/confirm-dialog/confirm-dialog.component.mjs +6 -3
- package/esm2022/components/confirm-dialog/confirm-dialog.model.mjs +1 -1
- package/esm2022/components/dialog/dialog.component.mjs +12 -5
- package/esm2022/components/scale/scale.component.mjs +15 -3
- package/esm2022/components/tabs/tab.directive.mjs +5 -2
- package/esm2022/components/tabs/tabs.component.mjs +31 -3
- package/esm2022/components/tabs/tabs.model.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui.mjs +64 -18
- package/fesm2022/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/projects/tgo-canopy-ui/theme/_tooltip.scss +4 -0
|
@@ -5220,13 +5220,6 @@ class ButtonComponent {
|
|
|
5220
5220
|
* @memberof ButtonComponent
|
|
5221
5221
|
*/
|
|
5222
5222
|
this.justIcon = false;
|
|
5223
|
-
/**
|
|
5224
|
-
* Name of ui-icon
|
|
5225
|
-
*
|
|
5226
|
-
* @type {IconName}
|
|
5227
|
-
* @memberof ButtonComponent
|
|
5228
|
-
*/
|
|
5229
|
-
this.iconName = '';
|
|
5230
5223
|
/**
|
|
5231
5224
|
* Indicator if the button should be disabled
|
|
5232
5225
|
*
|
|
@@ -6585,12 +6578,18 @@ class DialogComponent {
|
|
|
6585
6578
|
* @memberof DialogComponent
|
|
6586
6579
|
*/
|
|
6587
6580
|
this.primaryButtonLabel = '';
|
|
6581
|
+
/**
|
|
6582
|
+
* Primary button icon name
|
|
6583
|
+
*
|
|
6584
|
+
* @memberof DialogComponent
|
|
6585
|
+
*/
|
|
6586
|
+
this.primaryButtonIconName = '';
|
|
6588
6587
|
/**
|
|
6589
6588
|
* Secondary button type
|
|
6590
6589
|
*
|
|
6591
6590
|
* @memberof DialogComponent
|
|
6592
6591
|
*/
|
|
6593
|
-
this.secondaryButtonType = '
|
|
6592
|
+
this.secondaryButtonType = 'ghost';
|
|
6594
6593
|
/**
|
|
6595
6594
|
* Primary button type
|
|
6596
6595
|
*
|
|
@@ -6689,7 +6688,6 @@ class DialogComponent {
|
|
|
6689
6688
|
this.applicationTheme = this.data.applicationTheme;
|
|
6690
6689
|
}
|
|
6691
6690
|
if (this.applicationTheme !== 'classic') {
|
|
6692
|
-
this.secondaryButtonType = 'ghost';
|
|
6693
6691
|
this.companyColor = this.companyColor || '#D410AA';
|
|
6694
6692
|
}
|
|
6695
6693
|
else {
|
|
@@ -6732,11 +6730,11 @@ class DialogComponent {
|
|
|
6732
6730
|
this.primaryButtonClickEvent.emit(event);
|
|
6733
6731
|
}
|
|
6734
6732
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6735
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", primaryButtonDataTestId: "primaryButtonDataTestId", secondaryButtonDataTestId: "secondaryButtonDataTestId", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n
|
|
6733
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", showCloseButton: "showCloseButton", canCloseFn: "canCloseFn", secondaryButtonLabel: "secondaryButtonLabel", primaryButtonLabel: "primaryButtonLabel", primaryButtonIconName: "primaryButtonIconName", secondaryButtonType: "secondaryButtonType", primaryButtonType: "primaryButtonType", primaryButtonDataTestId: "primaryButtonDataTestId", secondaryButtonDataTestId: "secondaryButtonDataTestId", companyColor: "companyColor", applicationTheme: "applicationTheme", disablePrimaryButton: "disablePrimaryButton", disableClose: "disableClose", shouldDisableButtons: "shouldDisableButtons", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", keyboardOpen: "keyboardOpen" }, outputs: { closeEvent: "closeEvent", secondaryButtonClickEvent: "secondaryButtonClickEvent", primaryButtonClickEvent: "primaryButtonClickEvent" }, host: { listeners: { "keydown.esc": "onEsc($event)" }, properties: { "style.--color": "this.companyColor" } }, queries: [{ propertyName: "customHeader", first: true, predicate: ["dialogHeader"], descendants: true }], viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n *ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n *ngIf=\"!!primaryButtonLabel\"\n iconPosition=\"left\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6736
6734
|
}
|
|
6737
6735
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
6738
6736
|
type: Component,
|
|
6739
|
-
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n
|
|
6737
|
+
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"dialog-container\" [attr.theme]=\"applicationTheme\">\n <div\n mat-dialog-title\n class=\"dialog-title\"\n [attr.aria-modal]=\"true\"\n [attr.aria-labelledby]=\"'labelledby'\"\n [attr.aria-describedby]=\"'ariaDescribedby'\"\n >\n <span [style.display]=\"'none'\" id=\"ariaDescribedby\">{{ ariaDescribedby }}</span>\n\n <!-- Default header content -->\n <ng-container *ngIf=\"!hasCustomHeader\">\n <h3 class=\"bold\" id=\"labelledby\">{{ title }}</h3>\n <div *ngIf=\"showCloseButton\">\n <ui-button\n #closeButton\n [variant]=\"'icon-button'\"\n [iconName]=\"'Close'\"\n [companyColor]=\"applicationTheme === 'classic' ? '#000' : '#242424'\"\n [applicationTheme]=\"applicationTheme\"\n [tooltip]=\"(('COMMON.CLOSE') | uiTranslate | async)!\"\n (click)=\"onClose($event)\"\n (buttonClickEvent)=\"dismiss()\"\n id=\"dialog-close-button\"\n ></ui-button>\n </div>\n </ng-container>\n\n <!-- Custom header content projection -->\n <ng-content select=\"[dialogHeader]\"></ng-content>\n </div>\n <mat-dialog-content>\n <ng-content></ng-content>\n </mat-dialog-content>\n <div mat-dialog-actions *ngIf=\"secondaryButtonLabel !== '' || primaryButtonLabel !== ''\">\n <ui-button\n *ngIf=\"!!secondaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [variant]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [label]=\"secondaryButtonLabel\"\n [attr.data-testid]=\"secondaryButtonDataTestId\"\n (click)=\"onSecondaryButtonClick($event)\"\n ></ui-button>\n <ui-button\n *ngIf=\"!!primaryButtonLabel\"\n iconPosition=\"left\"\n [iconName]=\"primaryButtonIconName ? primaryButtonIconName : undefined\"\n [variant]=\"primaryButtonType\"\n [disabled]=\"disableButtons || disablePrimaryButton\"\n [applicationTheme]=\"applicationTheme\"\n (click)=\"onPrimaryButtonClick($event)\"\n [label]=\"primaryButtonLabel\"\n [companyColor]=\"companyColor\"\n [attr.data-testid]=\"primaryButtonDataTestId\"\n (buttonClickEvent)=\"dismiss()\"\n ></ui-button>\n </div>\n\n <!-- This is announcement for screen reader that dialog was closed-->\n <div aria-live=\"assertive\" role=\"alert\" style=\"position: absolute; left: -9999px;\">\n <span *ngIf=\"modalClosed\">{{ 'DIALOG.CLOSED' | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ui-dialog-wrapper{display:flex;flex-flow:column}.ui-dialog-wrapper.small{width:600px}.ui-dialog-wrapper.large{width:956px}.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:8px;padding:16px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{padding:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface,.ui-dialog-wrapper.light .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{border-radius:10px}.ui-dialog-wrapper.dark .dialog-title,.ui-dialog-wrapper.light .dialog-title{height:40px;padding:0;margin-bottom:32px}.ui-dialog-wrapper.dark .mat-mdc-dialog-content,.ui-dialog-wrapper.light .mat-mdc-dialog-content{padding:0}.ui-dialog-wrapper.dark .mat-mdc-dialog-actions,.ui-dialog-wrapper.light .mat-mdc-dialog-actions{padding:0;margin-top:32px}.ui-dialog-wrapper .mat-mdc-dialog-content{font-size:14px;color:#000;line-height:20px}.ui-dialog-wrapper.dark .mat-mdc-dialog-container{--mdc-dialog-container-color: #424242}.ui-dialog-wrapper.dark .mat-mdc-dialog-content{color:#fff!important}.ui-dialog-wrapper.dark .dialog-title{--mdc-dialog-subhead-color: #ffffff}.dialog-title{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:0}.dialog-title .close{margin-right:-24px}.dialog-title:before{content:none}.mat-mdc-dialog-actions{display:flex;justify-content:flex-end;column-gap:16px;padding:16px 0 0;margin-bottom:0;min-height:48px}@media (max-width: 1024px){.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:320px;max-width:600px;border-radius:0}.mat-mdc-dialog-content{max-height:524px}}@media (max-width: 600px){.cdk-overlay-pane.ui-dialog-wrapper{max-width:100%!important;min-height:100%;display:flex;justify-content:center}.cdk-overlay-pane.ui-dialog-wrapper .mat-mdc-dialog-container .mdc-dialog__container .mat-mdc-dialog-surface{min-width:100%;max-width:100%;height:100%;display:flex;flex-grow:1;border-radius:0}ui-dialog{height:100%;display:flex;flex-flow:column}.mat-mdc-dialog-content{max-height:unset;display:flex;flex-grow:1;flex-direction:column}}\n"] }]
|
|
6740
6738
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
6741
6739
|
type: Optional
|
|
6742
6740
|
}, {
|
|
@@ -6755,6 +6753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
6755
6753
|
type: Input
|
|
6756
6754
|
}], primaryButtonLabel: [{
|
|
6757
6755
|
type: Input
|
|
6756
|
+
}], primaryButtonIconName: [{
|
|
6757
|
+
type: Input
|
|
6758
6758
|
}], secondaryButtonType: [{
|
|
6759
6759
|
type: Input
|
|
6760
6760
|
}], primaryButtonType: [{
|
|
@@ -10545,6 +10545,9 @@ class ConfirmDialogComponent {
|
|
|
10545
10545
|
this.showCloseButton = data.showCloseButton ?? false;
|
|
10546
10546
|
this.showSecondaryButton = data.showSecondaryButton ?? true;
|
|
10547
10547
|
this.color = data.color ?? null;
|
|
10548
|
+
this.primaryButtonType = data.primaryButtonType ?? 'primary';
|
|
10549
|
+
this.secondaryButtonType = data.secondaryButtonType ?? 'ghost';
|
|
10550
|
+
this.primaryButtonIconName = data.primaryButtonIconName ?? undefined;
|
|
10548
10551
|
this.primaryButtonDataTestId = data.primaryButtonDataTestId ?? 'confirm-dialog.confirm-button';
|
|
10549
10552
|
this.secondaryButtonDataTestId = data.secondaryButtonDataTestId ?? 'confirm-dialog.cancel-button';
|
|
10550
10553
|
if (defaultAppTheme) {
|
|
@@ -10552,11 +10555,11 @@ class ConfirmDialogComponent {
|
|
|
10552
10555
|
}
|
|
10553
10556
|
}
|
|
10554
10557
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10555
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"
|
|
10558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ConfirmDialogComponent, selector: "ui-confirm-dialog", inputs: { applicationTheme: "applicationTheme" }, ngImport: i0, template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "showCloseButton", "canCloseFn", "secondaryButtonLabel", "primaryButtonLabel", "primaryButtonIconName", "secondaryButtonType", "primaryButtonType", "primaryButtonDataTestId", "secondaryButtonDataTestId", "companyColor", "applicationTheme", "disablePrimaryButton", "disableClose", "shouldDisableButtons", "ariaLabelledby", "ariaDescribedby", "keyboardOpen"], outputs: ["closeEvent", "secondaryButtonClickEvent", "primaryButtonClickEvent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
10556
10559
|
}
|
|
10557
10560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
10558
10561
|
type: Component,
|
|
10559
|
-
args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n primaryButtonType=\"
|
|
10562
|
+
args: [{ selector: 'ui-confirm-dialog', template: "<ng-container>\n <ui-dialog\n [title]=\"title ?? ('COMMON.CONFIRM' | uiTranslate | async)!\"\n [primaryButtonLabel]=\"confirmButtonText ?? ('COMMON.YES' | uiTranslate | async)!\"\n [secondaryButtonLabel]=\"\n showSecondaryButton ? cancelButtonText ?? ('COMMON.CANCEL' | uiTranslate | async)! : undefined\n \"\n (primaryButtonClickEvent)=\"dialogRef.close(true)\"\n (secondaryButtonClickEvent)=\"dialogRef.close(false)\"\n (closeEvent)=\"dialogRef.close(null)\"\n [primaryButtonType]=\"primaryButtonType\"\n [primaryButtonIconName]=\"primaryButtonIconName\"\n [secondaryButtonType]=\"secondaryButtonType\"\n [applicationTheme]=\"applicationTheme\"\n [showCloseButton]=\"showCloseButton\"\n [companyColor]=\"color\"\n [primaryButtonDataTestId]=\"primaryButtonDataTestId\"\n [secondaryButtonDataTestId]=\"secondaryButtonDataTestId\"\n >\n <div class=\"message\">{{ confirmMessage }}</div>\n @if (confirmMessageHtml) {\n <div class=\"message\" [innerHTML]=\"confirmMessageHtml\"></div>\n }\n </ui-dialog>\n</ng-container>\n", styles: ["::ng-deep .ui-dialog-wrapper{max-width:600px!important}\n"] }]
|
|
10560
10563
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
10561
10564
|
type: Optional
|
|
10562
10565
|
}, {
|
|
@@ -11195,6 +11198,12 @@ class ScaleComponent {
|
|
|
11195
11198
|
this.MIN_LENGTH = 1;
|
|
11196
11199
|
this.DEFAULT_LENGTH = 5;
|
|
11197
11200
|
this.items = [];
|
|
11201
|
+
/**
|
|
11202
|
+
* The value representing the selected item of the scale.
|
|
11203
|
+
* @type {number}
|
|
11204
|
+
* @memberof ScaleComponent
|
|
11205
|
+
*/
|
|
11206
|
+
this.selectedIndex = null;
|
|
11198
11207
|
/**
|
|
11199
11208
|
*
|
|
11200
11209
|
* Defines the application theme
|
|
@@ -11273,12 +11282,18 @@ class ScaleComponent {
|
|
|
11273
11282
|
styles['--selected-color'] = this.companyColor;
|
|
11274
11283
|
this.styles.set(styles);
|
|
11275
11284
|
}
|
|
11285
|
+
onFocus(item) {
|
|
11286
|
+
// If no item is selected when the component receives focus, select the first item
|
|
11287
|
+
if (this.selectedIndex === null && item === 0) {
|
|
11288
|
+
this.select(0);
|
|
11289
|
+
}
|
|
11290
|
+
}
|
|
11276
11291
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScaleComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11277
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n
|
|
11292
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ScaleComponent, selector: "ui-scale", inputs: { selectedIndex: "selectedIndex", length: "length", applicationTheme: "applicationTheme", companyColor: "companyColor" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "scaleItems", predicate: ["scaleItem"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : (item === selectedIndex ? '0' : '-1')\"\n [attr.aria-checked]=\"selectedIndex === null ? (item === 0 ? 'true' : 'false') : (item === selectedIndex ? 'true' : 'false')\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11278
11293
|
}
|
|
11279
11294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ScaleComponent, decorators: [{
|
|
11280
11295
|
type: Component,
|
|
11281
|
-
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n
|
|
11296
|
+
args: [{ selector: 'ui-scale', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scale\" [ngStyle]=\"styles()\"\n [ngClass]=\"{ 'scale-classic': applicationTheme === 'classic' }\">\n <div class=\"scale-item\" *ngFor=\"let item of items\" (click)=\"select(item)\"\n #scaleItem\n role=\"radio\"\n (keydown)=\"onKeyDown($event, item)\"\n (focus)=\"onFocus(item)\"\n [class.scale-item-focus-prev]=\"selectedIndex && selectedIndex > 0 ? item === (selectedIndex - 1) : false\"\n [attr.tabindex]=\"selectedIndex === null ? (item === 0 ? '0' : '-1') : (item === selectedIndex ? '0' : '-1')\"\n [attr.aria-checked]=\"selectedIndex === null ? (item === 0 ? 'true' : 'false') : (item === selectedIndex ? 'true' : 'false')\"\n [attr.aria-label]=\"getAriaLabel(item)\"\n [ngClass]=\"{ 'scale-item-selected': item === selectedIndex }\">\n {{ item + 1 }}\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.scale{display:flex;align-content:center;justify-content:flex-start;align-items:center}.scale-item{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;width:72px;height:48px;border:1px solid #919191;border-left:0;cursor:pointer;font-size:16px;font-weight:400;font-family:ModernGothic,serif;background-color:#fff}.scale-item:hover:not(.scale-item-selected){background-color:var(--hover-color)}.scale-item:first-child{border-radius:10px 0 0 10px;border-left:1px solid #919191}.scale-item:last-child{border-radius:0 10px 10px 0}.scale-item-selected{background-color:var(--selected-color);color:#fff;font-weight:700}@keyframes focus-ring-animation{0%{box-shadow:0 0 0 4px #242424}to{box-shadow:0 0 0 2px #242424}}.scale-item.scale-item-focus-prev{border-right:none}.scale-item:focus-visible{outline:none;border-radius:8px;border:2px solid #ffffff;box-shadow:0 0 0 2px #242424;z-index:1;animation:focus-ring-animation .4s forwards}.scale-classic .scale-item{border-color:#e0e0e0;font-family:Open Sans,serif}.scale-classic .scale-item:first-child{border-radius:4px 0 0 4px;border-left:1px solid #E0E0E0}.scale-classic .scale-item:last-child{border-radius:0 4px 4px 0}.scale-classic .scale-item:not(.scale-item-selected){color:#242424}.scale-classic .scale-item:hover:not(.scale-item-selected){background-color:#b5ddd5}.scale-classic .scale-item-selected{background-color:#46a997}\n"] }]
|
|
11282
11297
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
11283
11298
|
type: Optional
|
|
11284
11299
|
}, {
|
|
@@ -14513,6 +14528,8 @@ class TabsComponent {
|
|
|
14513
14528
|
this.tabs = [];
|
|
14514
14529
|
this.tabIndex = signal(0);
|
|
14515
14530
|
this.tabIndexMap = {};
|
|
14531
|
+
// Counter for default ordering when order is not specified
|
|
14532
|
+
this.insertionCounter = 0;
|
|
14516
14533
|
if (defaultAppTheme) {
|
|
14517
14534
|
this.applicationTheme = defaultAppTheme;
|
|
14518
14535
|
}
|
|
@@ -14560,8 +14577,29 @@ class TabsComponent {
|
|
|
14560
14577
|
});
|
|
14561
14578
|
}
|
|
14562
14579
|
addTab(tab) {
|
|
14580
|
+
// If no explicit order is provided, use the insertion counter
|
|
14581
|
+
if (tab.order === undefined) {
|
|
14582
|
+
tab.order = this.insertionCounter++;
|
|
14583
|
+
}
|
|
14584
|
+
// Add the tab and sort the tabs array
|
|
14563
14585
|
this.tabs.push(tab);
|
|
14564
|
-
this.
|
|
14586
|
+
this.sortTabs();
|
|
14587
|
+
// Update the index map
|
|
14588
|
+
this.updateTabIndexMap();
|
|
14589
|
+
}
|
|
14590
|
+
sortTabs() {
|
|
14591
|
+
// Sort by the order property (lowest first)
|
|
14592
|
+
this.tabs.sort((a, b) => {
|
|
14593
|
+
const orderA = a.order ?? Infinity;
|
|
14594
|
+
const orderB = b.order ?? Infinity;
|
|
14595
|
+
return orderA - orderB;
|
|
14596
|
+
});
|
|
14597
|
+
}
|
|
14598
|
+
updateTabIndexMap() {
|
|
14599
|
+
// Update the index map after sorting
|
|
14600
|
+
this.tabs.forEach((tab, index) => {
|
|
14601
|
+
this.tabIndexMap[tab.tabName] = index;
|
|
14602
|
+
});
|
|
14565
14603
|
}
|
|
14566
14604
|
onTabChange(ev) {
|
|
14567
14605
|
const selectedTab = this.tabs[ev.index];
|
|
@@ -14588,13 +14626,18 @@ class TabsComponent {
|
|
|
14588
14626
|
if (index !== undefined) {
|
|
14589
14627
|
this.tabs.splice(index, 1);
|
|
14590
14628
|
delete this.tabIndexMap[tabName];
|
|
14591
|
-
this.
|
|
14629
|
+
this.updateTabIndexMap();
|
|
14592
14630
|
}
|
|
14593
14631
|
}
|
|
14594
14632
|
updateTab(tabName, tab) {
|
|
14595
14633
|
const index = this.tabIndexMap[tabName];
|
|
14596
14634
|
if (index !== undefined) {
|
|
14597
14635
|
this.tabs[index] = { ...this.tabs[index], ...tab };
|
|
14636
|
+
// Re-sort if the order changed
|
|
14637
|
+
if (tab.order !== undefined) {
|
|
14638
|
+
this.sortTabs();
|
|
14639
|
+
this.updateTabIndexMap();
|
|
14640
|
+
}
|
|
14598
14641
|
}
|
|
14599
14642
|
}
|
|
14600
14643
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -14649,6 +14692,7 @@ class TabDirective {
|
|
|
14649
14692
|
this.disabled = input(false, { transform: booleanAttribute });
|
|
14650
14693
|
this.canLeave = input();
|
|
14651
14694
|
this.linkUrl = input();
|
|
14695
|
+
this.order = input();
|
|
14652
14696
|
this.tabsComponent = inject(TabsComponent);
|
|
14653
14697
|
this.template = inject(TemplateRef);
|
|
14654
14698
|
this.syncProps = effect(() => {
|
|
@@ -14659,6 +14703,7 @@ class TabDirective {
|
|
|
14659
14703
|
disabled: this.disabled(),
|
|
14660
14704
|
canLeave: this.canLeave(),
|
|
14661
14705
|
linkUrl: this.linkUrl(),
|
|
14706
|
+
order: this.order(),
|
|
14662
14707
|
});
|
|
14663
14708
|
});
|
|
14664
14709
|
this.cleanup = inject(DestroyRef).onDestroy(() => {
|
|
@@ -14678,10 +14723,11 @@ class TabDirective {
|
|
|
14678
14723
|
contentTemplateRef: this.template,
|
|
14679
14724
|
canLeave: this.canLeave(),
|
|
14680
14725
|
linkUrl: this.linkUrl(),
|
|
14726
|
+
order: this.order(),
|
|
14681
14727
|
});
|
|
14682
14728
|
}
|
|
14683
14729
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14684
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: TabDirective, isStandalone: true, selector: "ng-template[uiTab]", inputs: { tabLabel: { classPropertyName: "tabLabel", publicName: "tabLabel", isSignal: true, isRequired: true, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: true, isRequired: true, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canLeave: { classPropertyName: "canLeave", publicName: "canLeave", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
14730
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.12", type: TabDirective, isStandalone: true, selector: "ng-template[uiTab]", inputs: { tabLabel: { classPropertyName: "tabLabel", publicName: "tabLabel", isSignal: true, isRequired: true, transformFunction: null }, tabName: { classPropertyName: "tabName", publicName: "tabName", isSignal: true, isRequired: true, transformFunction: null }, iconLeft: { classPropertyName: "iconLeft", publicName: "iconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRight: { classPropertyName: "iconRight", publicName: "iconRight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canLeave: { classPropertyName: "canLeave", publicName: "canLeave", isSignal: true, isRequired: false, transformFunction: null }, linkUrl: { classPropertyName: "linkUrl", publicName: "linkUrl", isSignal: true, isRequired: false, transformFunction: null }, order: { classPropertyName: "order", publicName: "order", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
14685
14731
|
}
|
|
14686
14732
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabDirective, decorators: [{
|
|
14687
14733
|
type: Directive,
|