cax-design-system 2.4.0 → 2.5.0
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/README.md +1 -1
- package/autocomplete/autocomplete.d.ts +5 -3
- package/button/button.directive.d.ts +5 -2
- package/esm2022/autocomplete/autocomplete.mjs +12 -8
- package/esm2022/button/button.directive.mjs +36 -4
- package/esm2022/button/button.mjs +2 -2
- package/esm2022/calendar/calendar.mjs +2 -2
- package/esm2022/confirmdialog/confirmdialog.mjs +2 -2
- package/esm2022/inputgroup/inputgroup.mjs +10 -3
- package/esm2022/inputnumber/inputnumber.mjs +2 -2
- package/esm2022/selectbutton/public_api.mjs +2 -1
- package/esm2022/selectbutton/selectbutton.mjs +11 -86
- package/esm2022/selectbutton/selectbutton.module.mjs +21 -0
- package/esm2022/speeddial/speeddial.mjs +1 -1
- package/esm2022/splitbutton/splitbutton.mjs +4 -4
- package/esm2022/tableconfiguration/tableconfiguration.mjs +8 -3
- package/esm2022/tabview/tabview.mjs +31 -3
- package/esm2022/tabview/tabview.module.mjs +5 -4
- package/esm2022/timeline/timeline.mjs +2 -2
- package/fesm2022/cax-design-system-autocomplete.mjs +11 -7
- package/fesm2022/cax-design-system-autocomplete.mjs.map +1 -1
- package/fesm2022/cax-design-system-button.mjs +36 -4
- package/fesm2022/cax-design-system-button.mjs.map +1 -1
- package/fesm2022/cax-design-system-calendar.mjs +1 -1
- package/fesm2022/cax-design-system-calendar.mjs.map +1 -1
- package/fesm2022/cax-design-system-confirmdialog.mjs +1 -1
- package/fesm2022/cax-design-system-confirmdialog.mjs.map +1 -1
- package/fesm2022/cax-design-system-inputgroup.mjs +9 -2
- package/fesm2022/cax-design-system-inputgroup.mjs.map +1 -1
- package/fesm2022/cax-design-system-inputnumber.mjs +1 -1
- package/fesm2022/cax-design-system-inputnumber.mjs.map +1 -1
- package/fesm2022/cax-design-system-selectbutton.mjs +12 -70
- package/fesm2022/cax-design-system-selectbutton.mjs.map +1 -1
- package/fesm2022/cax-design-system-speeddial.mjs +1 -1
- package/fesm2022/cax-design-system-speeddial.mjs.map +1 -1
- package/fesm2022/cax-design-system-splitbutton.mjs +3 -3
- package/fesm2022/cax-design-system-splitbutton.mjs.map +1 -1
- package/fesm2022/cax-design-system-tableconfiguration.mjs +7 -2
- package/fesm2022/cax-design-system-tableconfiguration.mjs.map +1 -1
- package/fesm2022/cax-design-system-tabview.mjs +34 -5
- package/fesm2022/cax-design-system-tabview.mjs.map +1 -1
- package/fesm2022/cax-design-system-timeline.mjs +2 -2
- package/fesm2022/cax-design-system-timeline.mjs.map +1 -1
- package/inputgroup/inputgroup.d.ts +6 -1
- package/package.json +194 -194
- package/resources/cax.min.scss +1 -1
- package/resources/cax.scss +373 -261
- package/resources/components/autocomplete/autocomplete.scss +73 -1
- package/resources/components/tabview/tabview.scss +19 -1
- package/resources/components/timeline/timeline.scss +4 -9
- package/selectbutton/public_api.d.ts +1 -0
- package/selectbutton/selectbutton.d.ts +2 -10
- package/selectbutton/selectbutton.module.d.ts +11 -0
- package/splitbutton/splitbutton.d.ts +2 -2
- package/tabview/tabview.d.ts +10 -1
- package/tabview/tabview.module.d.ts +2 -1
|
@@ -55,7 +55,7 @@ class SplitButton {
|
|
|
55
55
|
* Defines the size of the button.
|
|
56
56
|
* @group Props
|
|
57
57
|
*/
|
|
58
|
-
size =
|
|
58
|
+
size = 'medium';
|
|
59
59
|
/**
|
|
60
60
|
* Add a plain textual class to the button without a background initially.
|
|
61
61
|
* @group Props
|
|
@@ -278,13 +278,13 @@ class SplitButton {
|
|
|
278
278
|
this.onMenuShow.emit();
|
|
279
279
|
}
|
|
280
280
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
281
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: SplitButton, selector: "cax-splitButton", inputs: { model: "model", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], icon: "icon", iconPos: "iconPos", label: "label", tooltip: "tooltip", tooltipOptions: "tooltipOptions", style: "style", styleClass: "styleClass", menuStyle: "menuStyle", menuStyleClass: "menuStyleClass", appendTo: "appendTo", dir: "dir", expandAriaLabel: "expandAriaLabel", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", buttonProps: "buttonProps", menuButtonProps: "menuButtonProps", autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], menuButtonDisabled: "menuButtonDisabled", buttonDisabled: "buttonDisabled" }, outputs: { onClick: "onClick", onMenuHide: "onMenuHide", onMenuShow: "onMenuShow", onDropdownClick: "onDropdownClick" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "buttonViewChild", first: true, predicate: ["defaultbtn"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': '
|
|
281
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: SplitButton, selector: "cax-splitButton", inputs: { model: "model", severity: "severity", raised: ["raised", "raised", booleanAttribute], rounded: ["rounded", "rounded", booleanAttribute], text: ["text", "text", booleanAttribute], outlined: ["outlined", "outlined", booleanAttribute], size: "size", plain: ["plain", "plain", booleanAttribute], icon: "icon", iconPos: "iconPos", label: "label", tooltip: "tooltip", tooltipOptions: "tooltipOptions", style: "style", styleClass: "styleClass", menuStyle: "menuStyle", menuStyleClass: "menuStyleClass", appendTo: "appendTo", dir: "dir", expandAriaLabel: "expandAriaLabel", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", buttonProps: "buttonProps", menuButtonProps: "menuButtonProps", autofocus: ["autofocus", "autofocus", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], menuButtonDisabled: "menuButtonDisabled", buttonDisabled: "buttonDisabled" }, outputs: { onClick: "onClick", onMenuHide: "onMenuHide", onMenuShow: "onMenuShow", onDropdownClick: "onDropdownClick" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "buttonViewChild", first: true, predicate: ["defaultbtn"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': 'absolute', 'z-index': '9999' }\"\r\n [popup]=\"true\"\r\n [model]=\"model\"\r\n [style]=\"menuStyle\"\r\n [styleClass]=\"menuStyleClass\"\r\n [appendTo]=\"'body'\"\r\n [showTransitionOptions]=\"showTransitionOptions\"\r\n [hideTransitionOptions]=\"hideTransitionOptions\"\r\n (onHide)=\"onHide()\"\r\n (onShow)=\"onShow()\"\r\n ></cax-tieredMenu>\r\n</div>\r\n", styles: ["@layer cax{.cax-splitbutton{display:inline-flex;position:relative}.cax-splitbutton .cax-splitbutton-defaultbutton,.cax-splitbutton.cax-button-rounded>.cax-splitbutton-defaultbutton.cax-button,.cax-splitbutton.cax-button-outlined>.cax-splitbutton-defaultbutton.cax-button{flex:1 1 auto;padding:var(--space-100) var(--space-150) var(--space-100) var(--space-150)!important;border-top-left-radius:var(--radius-100)!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-bottom-left-radius:var(--radius-100)!important;border-right:0 none}.cax-splitbutton-menubutton,.cax-splitbutton.cax-button-rounded>.cax-splitbutton-menubutton.cax-button,.cax-splitbutton.cax-button-outlined>.cax-splitbutton-menubutton.cax-button{display:flex;align-items:center;justify-content:center;border-top-left-radius:0!important;border-top-right-radius:var(--radius-100)!important;border-bottom-right-radius:var(--radius-100)!important;border-bottom-left-radius:0!important}.cax-splitbutton .cax-menu{min-width:100%}.cax-fluid .cax-splitbutton{display:flex}.cax-splitbutton-divider{width:8px;display:inline-block}.cax-splitbutton-divider{width:0px;height:100%;background-color:#dcdcdc;margin:0 1px;display:inline-block;vertical-align:middle}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }, { kind: "component", type: i3.TieredMenu, selector: "cax-tieredMenu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "autoDisplay", "showTransitionOptions", "hideTransitionOptions", "id", "ariaLabel", "ariaLabelledBy", "disabled", "tabindex"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "directive", type: i5.AutoFocus, selector: "[caxAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i6.ChevronDownIcon, selector: "ChevronDownIcon" }, { kind: "component", type: i7.ChevronUpIcon, selector: "ChevronUpIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
282
282
|
}
|
|
283
283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SplitButton, decorators: [{
|
|
284
284
|
type: Component,
|
|
285
285
|
args: [{ selector: 'cax-splitButton', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
286
286
|
class: 'cax-element'
|
|
287
|
-
}, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': '
|
|
287
|
+
}, template: "<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': 'absolute', 'z-index': '9999' }\"\r\n [popup]=\"true\"\r\n [model]=\"model\"\r\n [style]=\"menuStyle\"\r\n [styleClass]=\"menuStyleClass\"\r\n [appendTo]=\"'body'\"\r\n [showTransitionOptions]=\"showTransitionOptions\"\r\n [hideTransitionOptions]=\"hideTransitionOptions\"\r\n (onHide)=\"onHide()\"\r\n (onShow)=\"onShow()\"\r\n ></cax-tieredMenu>\r\n</div>\r\n", styles: ["@layer cax{.cax-splitbutton{display:inline-flex;position:relative}.cax-splitbutton .cax-splitbutton-defaultbutton,.cax-splitbutton.cax-button-rounded>.cax-splitbutton-defaultbutton.cax-button,.cax-splitbutton.cax-button-outlined>.cax-splitbutton-defaultbutton.cax-button{flex:1 1 auto;padding:var(--space-100) var(--space-150) var(--space-100) var(--space-150)!important;border-top-left-radius:var(--radius-100)!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-bottom-left-radius:var(--radius-100)!important;border-right:0 none}.cax-splitbutton-menubutton,.cax-splitbutton.cax-button-rounded>.cax-splitbutton-menubutton.cax-button,.cax-splitbutton.cax-button-outlined>.cax-splitbutton-menubutton.cax-button{display:flex;align-items:center;justify-content:center;border-top-left-radius:0!important;border-top-right-radius:var(--radius-100)!important;border-bottom-right-radius:var(--radius-100)!important;border-bottom-left-radius:0!important}.cax-splitbutton .cax-menu{min-width:100%}.cax-fluid .cax-splitbutton{display:flex}.cax-splitbutton-divider{width:8px;display:inline-block}.cax-splitbutton-divider{width:0px;height:100%;background-color:#dcdcdc;margin:0 1px;display:inline-block;vertical-align:middle}}\n"] }]
|
|
288
288
|
}], propDecorators: { model: [{
|
|
289
289
|
type: Input
|
|
290
290
|
}], severity: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cax-design-system-splitbutton.mjs","sources":["../../src/app/components/splitbutton/splitbutton.ts","../../src/app/components/splitbutton/splitbutton.html","../../src/app/components/splitbutton/splitbutton.module.ts","../../src/app/components/splitbutton/cax-design-system-splitbutton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute, signal } from '@angular/core';\nimport { MenuItem, CaxTemplate } from 'cax-design-system/api';\nimport { TieredMenu } from 'cax-design-system/tieredmenu';\nimport { UniqueComponentId } from 'cax-design-system/utils';\n\nimport { ButtonProps, MenuButtonProps } from './splitbutton.interface';\n\ntype SplitButtonIconPosition = 'left' | 'right';\n/**\n * SplitButton groups a set of commands in an overlay with a default command.\n * @group Components\n */\n@Component({\n selector: 'cax-splitButton',\n templateUrl: './splitbutton.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./splitbutton.scss'],\n host: {\n class: 'cax-element'\n }\n})\nexport class SplitButton {\n /**\n * MenuModel instance to define the overlay items.\n * @group Props\n */\n @Input() model: MenuItem[] | undefined;\n /**\n * Defines the style of the button.\n * @group Props\n */\n @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n /**\n * Add a shadow to indicate elevation.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) raised: boolean = false;\n /**\n * Add a circular border radius to the button.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) rounded: boolean = false;\n /**\n * Add a textual class to the button without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) text: boolean = false;\n /**\n * Add a border class without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) outlined: boolean = false;\n /**\n * Defines the size of the button.\n * @group Props\n */\n @Input() size: 'small' | 'large' | undefined | null = null;\n /**\n * Add a plain textual class to the button without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) plain: boolean = false;\n /**\n * Name of the icon.\n * @group Props\n */\n @Input() icon: string | undefined;\n /**\n * Position of the icon.\n * @group Props\n */\n @Input() iconPos: SplitButtonIconPosition = 'left';\n /**\n * Text of the button.\n * @group Props\n */\n @Input() label: string | undefined;\n /**\n * Tooltip for the main button.\n * @group Props\n */\n @Input() tooltip: string | undefined;\n /**\n * Tooltip options for the main button.\n * @group Props\n */\n @Input() tooltipOptions: string | undefined;\n /**\n * Inline style of the element.\n * @group Props\n */\n @Input() style: { [klass: string]: any } | null | undefined;\n /**\n * Class of the element.\n * @group Props\n */\n @Input() styleClass: string | undefined;\n /**\n * Inline style of the overlay menu.\n * @group Props\n */\n @Input() menuStyle: { [klass: string]: any } | null | undefined;\n /**\n * Style class of the overlay menu.\n * @group Props\n */\n @Input() menuStyleClass: string | undefined;\n\n /**\n * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n * @group Props\n */\n @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n /**\n * Indicates the direction of the element.\n * @group Props\n */\n @Input() dir: string | undefined;\n /**\n * Defines a string that labels the expand button for accessibility.\n * @group Props\n */\n @Input() expandAriaLabel: string | undefined;\n /**\n * Transition options of the show animation.\n * @group Props\n */\n @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n /**\n * Transition options of the hide animation.\n * @group Props\n */\n @Input() hideTransitionOptions: string = '.1s linear';\n /**\n * Button Props\n */\n @Input() buttonProps: ButtonProps | undefined;\n /**\n * Menu Button Props\n */\n @Input() menuButtonProps: MenuButtonProps | undefined;\n /**\n * When present, it specifies that the component should automatically get focus on load.\n * @group Props\n */\n isMenuOpen: boolean = false;\n @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n /**\n * When present, it specifies that the element should be disabled.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) set disabled(v: boolean | undefined) {\n this._disabled = v;\n this._buttonDisabled = v;\n this.menuButtonDisabled = v;\n }\n public get disabled(): boolean | undefined {\n return this._disabled;\n }\n /**\n * Index of the element in tabbing order.\n * @group Props\n */\n @Input({ transform: numberAttribute }) tabindex: number | undefined;\n /**\n * When present, it specifies that the menu button element should be disabled.\n * @group Props\n */\n @Input('menuButtonDisabled') set menuButtonDisabled(v: boolean | undefined) {\n if (this.disabled) {\n this._menuButtonDisabled = this.disabled;\n } else this._menuButtonDisabled = v;\n }\n public get menuButtonDisabled(): boolean | undefined {\n return this._menuButtonDisabled;\n }\n /**\n * When present, it specifies that the button element should be disabled.\n * @group Props\n */\n @Input() set buttonDisabled(v: boolean | undefined) {\n if (this.disabled) {\n this.buttonDisabled = this.disabled;\n } else this._buttonDisabled = v;\n }\n public get buttonDisabled(): boolean {\n return this._buttonDisabled;\n }\n /**\n * Callback to invoke when default command button is clicked.\n * @param {MouseEvent} event - Mouse event.\n * @group Emits\n */\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n /**\n * Callback to invoke when overlay menu is hidden.\n * @group Emits\n */\n @Output() onMenuHide: EventEmitter<any> = new EventEmitter<any>();\n /**\n * Callback to invoke when overlay menu is shown.\n * @group Emits\n */\n @Output() onMenuShow: EventEmitter<any> = new EventEmitter<any>();\n /**\n * Callback to invoke when dropdown button is clicked.\n * @param {MouseEvent} event - Mouse event.\n * @group Emits\n */\n @Output() onDropdownClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n\n @ViewChild('container') containerViewChild: ElementRef | undefined;\n\n @ViewChild('defaultbtn') buttonViewChild: ElementRef | undefined;\n\n @ViewChild('menu') menu: TieredMenu | undefined;\n\n @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n contentTemplate: TemplateRef<any> | undefined;\n\n dropdownIconTemplate: TemplateRef<any> | undefined;\n\n ariaId: string | undefined;\n\n isExpanded = signal<boolean>(false);\n\n private _disabled: boolean | undefined;\n\n private _buttonDisabled: boolean | undefined;\n\n private _menuButtonDisabled: boolean | undefined;\n\n ngOnInit() {\n this.ariaId = UniqueComponentId();\n }\n\n ngAfterContentInit() {\n this.templates?.forEach((item) => {\n switch (item.getType()) {\n case 'content':\n this.contentTemplate = item.template;\n break;\n\n case 'dropdownicon':\n this.dropdownIconTemplate = item.template;\n break;\n\n default:\n this.contentTemplate = item.template;\n break;\n }\n });\n }\n\n get containerClass() {\n const cls = {\n 'cax-splitbutton cax-component': true,\n 'cax-button-raised': this.raised,\n 'cax-button-rounded': this.rounded,\n 'cax-button-outlined': this.outlined,\n 'cax-button-text': this.text,\n [`cax-button-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size\n };\n\n return { ...cls };\n }\n\n onDefaultButtonClick(event: MouseEvent) {\n this.onClick.emit(event);\n this.menu.hide();\n }\n\n onDropdownButtonClick(event?: MouseEvent) {\n this.isMenuOpen = !this.isMenuOpen;\n this.onDropdownClick.emit(event);\n this.menu?.toggle({ currentTarget: this.containerViewChild?.nativeElement, relativeAlign: this.appendTo == null });\n }\n\n onDropdownButtonKeydown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n this.onDropdownButtonClick();\n event.preventDefault();\n }\n }\n\n onHide() {\n this.isMenuOpen = false;\n this.isExpanded.set(false);\n this.onMenuHide.emit();\n }\n\n onShow() {\n this.isMenuOpen = true;\n this.isExpanded.set(true);\n this.onMenuShow.emit();\n }\n}\n","<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': 'fixed', 'z-index': '9999' }\"\r\n [popup]=\"true\"\r\n [model]=\"model\"\r\n [style]=\"menuStyle\"\r\n [styleClass]=\"menuStyleClass\"\r\n [appendTo]=\"appendTo\"\r\n [showTransitionOptions]=\"showTransitionOptions\"\r\n [hideTransitionOptions]=\"hideTransitionOptions\"\r\n (onHide)=\"onHide()\"\r\n (onShow)=\"onShow()\"\r\n ></cax-tieredMenu>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';\nimport { SplitButton } from './splitbutton';\nimport { TieredMenuModule } from 'cax-design-system/tieredmenu';\nimport { ChevronUpIcon } from 'cax-design-system/icons/chevronup';\n\n@NgModule({\n imports: [CommonModule, ButtonModule, TieredMenuModule, AutoFocusModule, ChevronDownIcon, ChevronUpIcon],\n exports: [SplitButton, ButtonModule, TieredMenuModule],\n declarations: [SplitButton]\n})\nexport class SplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cax-design-system-splitbutton.mjs","sources":["../../src/app/components/splitbutton/splitbutton.ts","../../src/app/components/splitbutton/splitbutton.html","../../src/app/components/splitbutton/splitbutton.module.ts","../../src/app/components/splitbutton/cax-design-system-splitbutton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ContentChildren, ElementRef, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation, booleanAttribute, numberAttribute, signal } from '@angular/core';\nimport { MenuItem, CaxTemplate } from 'cax-design-system/api';\nimport { TieredMenu } from 'cax-design-system/tieredmenu';\nimport { UniqueComponentId } from 'cax-design-system/utils';\n\nimport { ButtonProps, MenuButtonProps } from './splitbutton.interface';\n\ntype SplitButtonIconPosition = 'left' | 'right';\n/**\n * SplitButton groups a set of commands in an overlay with a default command.\n * @group Components\n */\n@Component({\n selector: 'cax-splitButton',\n templateUrl: './splitbutton.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./splitbutton.scss'],\n host: {\n class: 'cax-element'\n }\n})\nexport class SplitButton {\n /**\n * MenuModel instance to define the overlay items.\n * @group Props\n */\n @Input() model: MenuItem[] | undefined;\n /**\n * Defines the style of the button.\n * @group Props\n */\n @Input() severity: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast' | null | undefined;\n /**\n * Add a shadow to indicate elevation.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) raised: boolean = false;\n /**\n * Add a circular border radius to the button.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) rounded: boolean = false;\n /**\n * Add a textual class to the button without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) text: boolean = false;\n /**\n * Add a border class without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) outlined: boolean = false;\n /**\n * Defines the size of the button.\n * @group Props\n */\n @Input() size: 'small' | 'medium' | 'large' | undefined | null = 'medium';\n /**\n * Add a plain textual class to the button without a background initially.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) plain: boolean = false;\n /**\n * Name of the icon.\n * @group Props\n */\n @Input() icon: string | undefined;\n /**\n * Position of the icon.\n * @group Props\n */\n @Input() iconPos: SplitButtonIconPosition = 'left';\n /**\n * Text of the button.\n * @group Props\n */\n @Input() label: string | undefined;\n /**\n * Tooltip for the main button.\n * @group Props\n */\n @Input() tooltip: string | undefined;\n /**\n * Tooltip options for the main button.\n * @group Props\n */\n @Input() tooltipOptions: string | undefined;\n /**\n * Inline style of the element.\n * @group Props\n */\n @Input() style: { [klass: string]: any } | null | undefined;\n /**\n * Class of the element.\n * @group Props\n */\n @Input() styleClass: string | undefined;\n /**\n * Inline style of the overlay menu.\n * @group Props\n */\n @Input() menuStyle: { [klass: string]: any } | null | undefined;\n /**\n * Style class of the overlay menu.\n * @group Props\n */\n @Input() menuStyleClass: string | undefined;\n\n /**\n * Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]=\"mydiv\" for a div element having #mydiv as variable name).\n * @group Props\n */\n @Input() appendTo: HTMLElement | ElementRef | TemplateRef<any> | string | null | undefined | any;\n /**\n * Indicates the direction of the element.\n * @group Props\n */\n @Input() dir: string | undefined;\n /**\n * Defines a string that labels the expand button for accessibility.\n * @group Props\n */\n @Input() expandAriaLabel: string | undefined;\n /**\n * Transition options of the show animation.\n * @group Props\n */\n @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';\n /**\n * Transition options of the hide animation.\n * @group Props\n */\n @Input() hideTransitionOptions: string = '.1s linear';\n /**\n * Button Props\n */\n @Input() buttonProps: ButtonProps | undefined;\n /**\n * Menu Button Props\n */\n @Input() menuButtonProps: MenuButtonProps | undefined;\n /**\n * When present, it specifies that the component should automatically get focus on load.\n * @group Props\n */\n isMenuOpen: boolean = false;\n @Input({ transform: booleanAttribute }) autofocus: boolean | undefined;\n /**\n * When present, it specifies that the element should be disabled.\n * @group Props\n */\n @Input({ transform: booleanAttribute }) set disabled(v: boolean | undefined) {\n this._disabled = v;\n this._buttonDisabled = v;\n this.menuButtonDisabled = v;\n }\n public get disabled(): boolean | undefined {\n return this._disabled;\n }\n /**\n * Index of the element in tabbing order.\n * @group Props\n */\n @Input({ transform: numberAttribute }) tabindex: number | undefined;\n /**\n * When present, it specifies that the menu button element should be disabled.\n * @group Props\n */\n @Input('menuButtonDisabled') set menuButtonDisabled(v: boolean | undefined) {\n if (this.disabled) {\n this._menuButtonDisabled = this.disabled;\n } else this._menuButtonDisabled = v;\n }\n public get menuButtonDisabled(): boolean | undefined {\n return this._menuButtonDisabled;\n }\n /**\n * When present, it specifies that the button element should be disabled.\n * @group Props\n */\n @Input() set buttonDisabled(v: boolean | undefined) {\n if (this.disabled) {\n this.buttonDisabled = this.disabled;\n } else this._buttonDisabled = v;\n }\n public get buttonDisabled(): boolean {\n return this._buttonDisabled;\n }\n /**\n * Callback to invoke when default command button is clicked.\n * @param {MouseEvent} event - Mouse event.\n * @group Emits\n */\n @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n /**\n * Callback to invoke when overlay menu is hidden.\n * @group Emits\n */\n @Output() onMenuHide: EventEmitter<any> = new EventEmitter<any>();\n /**\n * Callback to invoke when overlay menu is shown.\n * @group Emits\n */\n @Output() onMenuShow: EventEmitter<any> = new EventEmitter<any>();\n /**\n * Callback to invoke when dropdown button is clicked.\n * @param {MouseEvent} event - Mouse event.\n * @group Emits\n */\n @Output() onDropdownClick: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();\n\n @ViewChild('container') containerViewChild: ElementRef | undefined;\n\n @ViewChild('defaultbtn') buttonViewChild: ElementRef | undefined;\n\n @ViewChild('menu') menu: TieredMenu | undefined;\n\n @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n contentTemplate: TemplateRef<any> | undefined;\n\n dropdownIconTemplate: TemplateRef<any> | undefined;\n\n ariaId: string | undefined;\n\n isExpanded = signal<boolean>(false);\n\n private _disabled: boolean | undefined;\n\n private _buttonDisabled: boolean | undefined;\n\n private _menuButtonDisabled: boolean | undefined;\n\n ngOnInit() {\n this.ariaId = UniqueComponentId();\n }\n\n ngAfterContentInit() {\n this.templates?.forEach((item) => {\n switch (item.getType()) {\n case 'content':\n this.contentTemplate = item.template;\n break;\n\n case 'dropdownicon':\n this.dropdownIconTemplate = item.template;\n break;\n\n default:\n this.contentTemplate = item.template;\n break;\n }\n });\n }\n\n get containerClass() {\n const cls = {\n 'cax-splitbutton cax-component': true,\n 'cax-button-raised': this.raised,\n 'cax-button-rounded': this.rounded,\n 'cax-button-outlined': this.outlined,\n 'cax-button-text': this.text,\n [`cax-button-${this.size === 'small' ? 'sm' : 'lg'}`]: this.size\n };\n\n return { ...cls };\n }\n\n onDefaultButtonClick(event: MouseEvent) {\n this.onClick.emit(event);\n this.menu.hide();\n }\n\n onDropdownButtonClick(event?: MouseEvent) {\n this.isMenuOpen = !this.isMenuOpen;\n this.onDropdownClick.emit(event);\n this.menu?.toggle({ currentTarget: this.containerViewChild?.nativeElement, relativeAlign: this.appendTo == null });\n }\n\n onDropdownButtonKeydown(event: KeyboardEvent) {\n if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n this.onDropdownButtonClick();\n event.preventDefault();\n }\n }\n\n onHide() {\n this.isMenuOpen = false;\n this.isExpanded.set(false);\n this.onMenuHide.emit();\n }\n\n onShow() {\n this.isMenuOpen = true;\n this.isExpanded.set(true);\n this.onMenuShow.emit();\n }\n}\n","<div #container [ngClass]=\"containerClass\" [class]=\"styleClass\" [ngStyle]=\"style\">\r\n <ng-container *ngIf=\"contentTemplate; else defaultButton\">\r\n <button\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"disabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel'] || label\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n </button>\r\n </ng-container>\r\n <ng-template #defaultButton>\r\n <button\r\n #defaultbtn\r\n class=\"cax-splitbutton-defaultbutton\"\r\n type=\"button\"\r\n caxButton\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n [size]=\"size\"\r\n [icon]=\"icon\"\r\n [iconPos]=\"iconPos\"\r\n [label]=\"label\"\r\n (click)=\"onDefaultButtonClick($event)\"\r\n [disabled]=\"buttonDisabled\"\r\n [attr.tabindex]=\"tabindex\"\r\n [ariaLabel]=\"buttonProps?.['ariaLabel']\"\r\n caxAutoFocus\r\n [autofocus]=\"autofocus\"\r\n [caxTooltip]=\"tooltip\"\r\n [tooltipOptions]=\"tooltipOptions\"\r\n ></button>\r\n </ng-template>\r\n <div class=\"cax-splitbutton-divider\"></div>\r\n <button\r\n type=\"button\"\r\n caxButton\r\n [size]=\"size\"\r\n [severity]=\"severity\"\r\n [text]=\"text\"\r\n [outlined]=\"outlined\"\r\n class=\"cax-splitbutton-menubutton cax-button-icon-only\"\r\n (click)=\"onDropdownButtonClick($event)\"\r\n (keydown)=\"onDropdownButtonKeydown($event)\"\r\n [ariaLabel]=\"menuButtonProps?.['ariaLabel'] || expandAriaLabel\"\r\n [attr.aria-haspopup]=\"menuButtonProps?.['ariaHasPopup'] || true\"\r\n [attr.aria-expanded]=\"menuButtonProps?.['ariaExpanded'] || isExpanded()\"\r\n [attr.aria-controls]=\"menuButtonProps?.['ariaControls'] || ariaId\"\r\n >\r\n <ChevronDownIcon *ngIf=\"!dropdownIconTemplate && !isMenuOpen\" />\r\n <ChevronUpIcon *ngIf=\"!dropdownIconTemplate && isMenuOpen\" />\r\n <ng-template *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-template>\r\n </button>\r\n <cax-tieredMenu\r\n [id]=\"ariaId\"\r\n #menu\r\n [ngStyle]=\"{ 'position': 'absolute', 'z-index': '9999' }\"\r\n [popup]=\"true\"\r\n [model]=\"model\"\r\n [style]=\"menuStyle\"\r\n [styleClass]=\"menuStyleClass\"\r\n [appendTo]=\"'body'\"\r\n [showTransitionOptions]=\"showTransitionOptions\"\r\n [hideTransitionOptions]=\"hideTransitionOptions\"\r\n (onHide)=\"onHide()\"\r\n (onShow)=\"onShow()\"\r\n ></cax-tieredMenu>\r\n</div>\r\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\nimport { AutoFocusModule } from 'cax-design-system/autofocus';\nimport { ChevronDownIcon } from 'cax-design-system/icons/chevrondown';\nimport { SplitButton } from './splitbutton';\nimport { TieredMenuModule } from 'cax-design-system/tieredmenu';\nimport { ChevronUpIcon } from 'cax-design-system/icons/chevronup';\n\n@NgModule({\n imports: [CommonModule, ButtonModule, TieredMenuModule, AutoFocusModule, ChevronDownIcon, ChevronUpIcon],\n exports: [SplitButton, ButtonModule, TieredMenuModule],\n declarations: [SplitButton]\n})\nexport class SplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import { ButtonModule } from 'cax-design-system/button';
|
|
|
7
7
|
|
|
8
8
|
class Tableconfiguration {
|
|
9
9
|
fontConfiguration = 'md';
|
|
10
|
-
rowConfiguration = '
|
|
10
|
+
rowConfiguration = 'md';
|
|
11
11
|
fontSizeOptions = [12, 14, 16, 18];
|
|
12
12
|
fontValue = 14;
|
|
13
13
|
rowHeightChange = new EventEmitter();
|
|
@@ -19,7 +19,7 @@ class Tableconfiguration {
|
|
|
19
19
|
resetTableConfiguration() {
|
|
20
20
|
this.fontValue = 14;
|
|
21
21
|
this.fontConfiguration = 'md';
|
|
22
|
-
this.rowConfiguration = '
|
|
22
|
+
this.rowConfiguration = 'md';
|
|
23
23
|
this.fontSizeChange.emit(this.fontConfiguration);
|
|
24
24
|
this.rowHeightChange.emit(this.rowConfiguration);
|
|
25
25
|
}
|
|
@@ -29,14 +29,19 @@ class Tableconfiguration {
|
|
|
29
29
|
switch (this.fontValue) {
|
|
30
30
|
case 12:
|
|
31
31
|
this.fontConfiguration = 'sm';
|
|
32
|
+
break;
|
|
32
33
|
case 14:
|
|
33
34
|
this.fontConfiguration = 'md';
|
|
35
|
+
break;
|
|
34
36
|
case 16:
|
|
35
37
|
this.fontConfiguration = 'lg';
|
|
38
|
+
break;
|
|
36
39
|
case 18:
|
|
37
40
|
this.fontConfiguration = 'xl';
|
|
41
|
+
break;
|
|
38
42
|
default:
|
|
39
43
|
this.fontConfiguration = 'md';
|
|
44
|
+
break;
|
|
40
45
|
}
|
|
41
46
|
this.fontSizeChange.emit(this.fontConfiguration);
|
|
42
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\n\n@Component({\n selector: 'cax-tableconfiguration',\n templateUrl: './tableconfiguration.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./tableconfiguration.scss'],\n imports: [ButtonModule, CommonModule],\n standalone: true,\n host: {\n class: 'cax-element'\n }\n})\nexport class Tableconfiguration {\n fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = '
|
|
1
|
+
{"version":3,"file":"cax-design-system-tableconfiguration.mjs","sources":["../../src/app/components/tableconfiguration/tableconfiguration.ts","../../src/app/components/tableconfiguration/tableconfiguration.html","../../src/app/components/tableconfiguration/tableconfiguration.module.ts","../../src/app/components/tableconfiguration/cax-design-system-tableconfiguration.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';\nimport { ButtonModule } from 'cax-design-system/button';\n\n@Component({\n selector: 'cax-tableconfiguration',\n templateUrl: './tableconfiguration.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n styleUrls: ['./tableconfiguration.scss'],\n imports: [ButtonModule, CommonModule],\n standalone: true,\n host: {\n class: 'cax-element'\n }\n})\nexport class Tableconfiguration {\n fontConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n rowConfiguration: 'sm' | 'md' | 'lg' | 'xl' = 'md';\n fontSizeOptions = [12, 14, 16, 18];\n fontValue = 14;\n\n @Output() rowHeightChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n @Output() fontSizeChange: EventEmitter<'sm' | 'md' | 'lg' | 'xl'> = new EventEmitter<'sm' | 'md' | 'lg' | 'xl'>();\n\n updateRowHeight(size: 'sm' | 'md' | 'lg' | 'xl') {\n this.rowConfiguration = size;\n this.rowHeightChange.emit(this.rowConfiguration);\n }\n\n resetTableConfiguration() {\n this.fontValue = 14;\n this.fontConfiguration = 'md';\n this.rowConfiguration = 'md';\n this.fontSizeChange.emit(this.fontConfiguration);\n this.rowHeightChange.emit(this.rowConfiguration);\n }\n\n onSliderChange(event: Event) {\n const newValue = Number((event.target as HTMLInputElement).value);\n this.fontValue = newValue;\n switch (this.fontValue) {\n case 12:\n this.fontConfiguration = 'sm';\n break;\n case 14:\n this.fontConfiguration = 'md';\n break;\n case 16:\n this.fontConfiguration = 'lg';\n break;\n case 18:\n this.fontConfiguration = 'xl';\n break;\n default:\n this.fontConfiguration = 'md';\n break;\n }\n this.fontSizeChange.emit(this.fontConfiguration);\n }\n}\n","<div class=\"table-configuration\">\r\n <div class=\"table-font-size\">\r\n <div class=\"header-details\">\r\n <span>Font Size</span>\r\n <cax-button (click)=\"resetTableConfiguration()\" [label]=\"'Reset to default'\" [severity]=\"'danger'\" [link]=\"true\" [size]=\"'small'\"></cax-button>\r\n </div>\r\n <div class=\"font-configuration\">\r\n <div class=\"font-labels\">\r\n <span *ngFor=\"let option of fontSizeOptions\" [class.active]=\"fontValue === option\" [style.fontSize]=\"option + 'px'\"> {{ option }}px </span>\r\n </div>\r\n <div class=\"slider-wrapper\">\r\n <input type=\"range\" min=\"12\" max=\"18\" step=\"2\" [value]=\"fontValue\" (input)=\"onSliderChange($event)\" class=\"custom-slider\" />\r\n <div class=\"range-marker\">\r\n <div *ngFor=\"let option of fontSizeOptions\" class=\"range\" [class.active]=\"fontValue === option\"></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"table-row-size\">\r\n <div class=\"header-details\">\r\n <span>Row Height</span>\r\n </div>\r\n <div class=\"row-configuration\">\r\n <li [class.active]=\"rowConfiguration === 'sm'\" (click)=\"updateRowHeight('sm')\">Compact</li>\r\n <li [class.active]=\"rowConfiguration === 'md'\" (click)=\"updateRowHeight('md')\">Medium</li>\r\n <li [class.active]=\"rowConfiguration === 'lg'\" (click)=\"updateRowHeight('lg')\">Large</li>\r\n <li [class.active]=\"rowConfiguration === 'xl'\" (click)=\"updateRowHeight('xl')\">Extra Large</li>\r\n </div>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { Tableconfiguration } from './tableconfiguration';\n\n@NgModule({\n imports: [Tableconfiguration],\n exports: [Tableconfiguration]\n})\nexport class TableconfigurationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -15,6 +15,8 @@ import * as i5 from 'cax-design-system/icons/chevronleft';
|
|
|
15
15
|
import { ChevronLeftIcon } from 'cax-design-system/icons/chevronleft';
|
|
16
16
|
import * as i6 from 'cax-design-system/icons/chevronright';
|
|
17
17
|
import { ChevronRightIcon } from 'cax-design-system/icons/chevronright';
|
|
18
|
+
import * as i7 from 'cax-design-system/button';
|
|
19
|
+
import { ButtonModule } from 'cax-design-system/button';
|
|
18
20
|
|
|
19
21
|
/**
|
|
20
22
|
* TabPanel is a helper component for TabView component.
|
|
@@ -346,6 +348,15 @@ class TabView {
|
|
|
346
348
|
* @group Props
|
|
347
349
|
*/
|
|
348
350
|
tabindex = 0;
|
|
351
|
+
actionButton;
|
|
352
|
+
actionButtonSeverity = 'primary';
|
|
353
|
+
actionButtonSize = null;
|
|
354
|
+
actionButtonOutlined = false;
|
|
355
|
+
actionButtonRounded = false;
|
|
356
|
+
actionButtonIcon;
|
|
357
|
+
actionButtonLoading = false;
|
|
358
|
+
actionButtonLink = false;
|
|
359
|
+
actionButtonDisabled = false;
|
|
349
360
|
/**
|
|
350
361
|
* Callback to invoke on tab change.
|
|
351
362
|
* @param {TabViewChangeEvent} event - Custom tab change event
|
|
@@ -816,13 +827,13 @@ class TabView {
|
|
|
816
827
|
content.scrollLeft = pos >= lastPos ? lastPos : pos;
|
|
817
828
|
}
|
|
818
829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabView, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
819
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TabView, selector: "cax-tabView", inputs: { fullMode: "fullMode", style: "style", styleClass: "styleClass", controlClose: ["controlClose", "controlClose", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: ["autoHideButtons", "autoHideButtons", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], mode: "mode", pinnedIndexes: "pinnedIndexes" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }, { propertyName: "elementToObserve", first: true, predicate: ["elementToObserve"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n <a\r\n role=\"tab\"\r\n class=\"cax-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n </ul>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div class=\"cax-segment-tabview-header\">\r\n <span class=\"cax-arrow-buttons\">\r\n <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n </span>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li\r\n role=\"presentation\"\r\n [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n [attr.data-cax-disabled]=\"tab.disabled\"\r\n [ngStyle]=\"tab.headerStyle\"\r\n [class]=\"tab.headerStyleClass\"\r\n *ngIf=\"!tab.closed\"\r\n >\r\n <a\r\n role=\"tab\"\r\n class=\"cax-segment-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n </ul>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div class=\"cax-tabview-panels\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: i6.ChevronRightIcon, selector: "ChevronRightIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.9", type: TabView, selector: "cax-tabView", inputs: { fullMode: "fullMode", style: "style", styleClass: "styleClass", controlClose: ["controlClose", "controlClose", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], activeIndex: "activeIndex", selectOnFocus: ["selectOnFocus", "selectOnFocus", booleanAttribute], nextButtonAriaLabel: "nextButtonAriaLabel", prevButtonAriaLabel: "prevButtonAriaLabel", autoHideButtons: ["autoHideButtons", "autoHideButtons", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], actionButton: "actionButton", actionButtonSeverity: "actionButtonSeverity", actionButtonSize: "actionButtonSize", actionButtonOutlined: "actionButtonOutlined", actionButtonRounded: "actionButtonRounded", actionButtonIcon: "actionButtonIcon", actionButtonLoading: "actionButtonLoading", actionButtonLink: "actionButtonLink", actionButtonDisabled: "actionButtonDisabled", mode: "mode", pinnedIndexes: "pinnedIndexes" }, outputs: { onChange: "onChange", onClose: "onClose", activeIndexChange: "activeIndexChange" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "tabPanels", predicate: TabPanel }, { propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true }, { propertyName: "prevBtn", first: true, predicate: ["prevBtn"], descendants: true }, { propertyName: "nextBtn", first: true, predicate: ["nextBtn"], descendants: true }, { propertyName: "inkbar", first: true, predicate: ["inkbar"], descendants: true }, { propertyName: "elementToObserve", first: true, predicate: ["elementToObserve"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n <a\r\n role=\"tab\"\r\n class=\"cax-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n </ul>\r\n </div>\r\n \r\n <!-- Configurable Buttons -->\r\n <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\r\n <ng-container *ngFor=\"let button of actionButton\" >\r\n <div class=\"cax-tabview-separator\"></div>\r\n <button type=\"button\" caxButton \r\n class=\"cax-tabview-extra-btn\" \r\n [label]=\"button.label\"\r\n [severity]=\"button.actionButtonSeverity\"\r\n [link]=\"button.actionButtonLink\"\r\n [icon]=\"button.actionButtonIcon\"\r\n [disabled]=\"button.actionButtonDisabled\"\r\n [outlined]=\"button.actionButtonOutlined\"\r\n [rounded]=\"button.actionButtonRounded\"\r\n [size]=\"button.actionButtonSize\"\r\n [loading]=\"button.actionButtonLoading\"\r\n (click)=\"button.action()\">\r\n </button>\r\n </ng-container>\r\n </div>\r\n \r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div class=\"cax-segment-tabview-header\">\r\n <span class=\"cax-arrow-buttons\">\r\n <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n </span>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li\r\n role=\"presentation\"\r\n [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n [attr.data-cax-disabled]=\"tab.disabled\"\r\n [ngStyle]=\"tab.headerStyle\"\r\n [class]=\"tab.headerStyleClass\"\r\n *ngIf=\"!tab.closed\"\r\n >\r\n <a\r\n role=\"tab\"\r\n class=\"cax-segment-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n </ul>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div class=\"cax-tabview-panels\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "directive", type: i3.Ripple, selector: "[caxRipple]" }, { kind: "component", type: i4.TimesIcon, selector: "TimesIcon" }, { kind: "component", type: i5.ChevronLeftIcon, selector: "ChevronLeftIcon" }, { kind: "component", type: i6.ChevronRightIcon, selector: "ChevronRightIcon" }, { kind: "directive", type: i7.ButtonDirective, selector: "[caxButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "link"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
820
831
|
}
|
|
821
832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabView, decorators: [{
|
|
822
833
|
type: Component,
|
|
823
834
|
args: [{ selector: 'cax-tabView', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
824
835
|
class: 'cax-element'
|
|
825
|
-
}, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n <a\r\n role=\"tab\"\r\n class=\"cax-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n </ul>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div class=\"cax-segment-tabview-header\">\r\n <span class=\"cax-arrow-buttons\">\r\n <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n </span>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li\r\n role=\"presentation\"\r\n [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n [attr.data-cax-disabled]=\"tab.disabled\"\r\n [ngStyle]=\"tab.headerStyle\"\r\n [class]=\"tab.headerStyleClass\"\r\n *ngIf=\"!tab.closed\"\r\n >\r\n <a\r\n role=\"tab\"\r\n class=\"cax-segment-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n </ul>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div class=\"cax-tabview-panels\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>\r\n", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"] }]
|
|
836
|
+
}, template: "<div [ngClass]=\"{ 'cax-tabview cax-component': true, 'cax-tabview-scrollable': scrollable }\" [ngStyle]=\"style\" [class]=\"styleClass\" [attr.data-pc-name]=\"'tabview'\">\r\n <div #elementToObserve class=\"cax-tabview-nav-container\" *ngIf=\"mode == 'line'\" [ngClass]=\"fullMode ? 'block-mode' : 'flex-mode'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li role=\"presentation\" [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled }\" [attr.data-cax-disabled]=\"tab.disabled\" [ngStyle]=\"tab.headerStyle\" [class]=\"tab.headerStyleClass\"\r\n [class.full-mode]=\"fullMode\" [class.half-mode]=\"!fullMode\" *ngIf=\"!tab.closed\">\r\n <a\r\n role=\"tab\"\r\n class=\"cax-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n <li #inkbar class=\"cax-tabview-ink-bar\" role=\"presentation\" aria-hidden=\"true\" [attr.data-pc-section]=\"'inkbar'\"></li>\r\n </ul>\r\n </div>\r\n \r\n <!-- Configurable Buttons -->\r\n <div class=\"cax-tabview-action-buttons\" *ngIf=\"actionButton?.length && !fullMode\">\r\n <ng-container *ngFor=\"let button of actionButton\" >\r\n <div class=\"cax-tabview-separator\"></div>\r\n <button type=\"button\" caxButton \r\n class=\"cax-tabview-extra-btn\" \r\n [label]=\"button.label\"\r\n [severity]=\"button.actionButtonSeverity\"\r\n [link]=\"button.actionButtonLink\"\r\n [icon]=\"button.actionButtonIcon\"\r\n [disabled]=\"button.actionButtonDisabled\"\r\n [outlined]=\"button.actionButtonOutlined\"\r\n [rounded]=\"button.actionButtonRounded\"\r\n [size]=\"button.actionButtonSize\"\r\n [loading]=\"button.actionButtonLoading\"\r\n (click)=\"button.action()\">\r\n </button>\r\n </ng-container>\r\n </div>\r\n \r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div #elementToObserve class=\"cax-tabview-nav-container cax-segment-tabview-container\" *ngIf=\"mode == 'segment'\">\r\n <button\r\n *ngIf=\"scrollable && !backwardIsDisabled && autoHideButtons\"\r\n #prevBtn\r\n class=\"cax-tabview-nav-prev cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navBackward()\"\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"prevButtonAriaLabel\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronLeftIcon *ngIf=\"!previousIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n </button>\r\n <div class=\"cax-segment-tabview-header\">\r\n <span class=\"cax-arrow-buttons\">\r\n <button #prevBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"prevButtonAriaLabel\" class=\"cax cax-arrow-left cax-left-arrow\" (click)=\"arrowLeft()\" type=\"button\" [disabled]=\"activeTabIndex === 0\"></button>\r\n <button #nextBtn [attr.tabindex]=\"tabindex\" [attr.aria-label]=\"nextButtonAriaLabel\" class=\"cax cax-arrow-right cax-right-arrow\" [disabled]=\"activeTabIndex === tabs.length - 1\" (click)=\"arrowRight()\" type=\"button\"></button>\r\n </span>\r\n <div #content class=\"cax-tabview-nav-content\" (scroll)=\"onScroll($event)\" [attr.data-pc-section]=\"'navcontent'\">\r\n <ul #navbar class=\"cax-segment-tabview-nav\" role=\"tablist\" [attr.data-pc-section]=\"'nav'\">\r\n <ng-template ngFor let-tab [ngForOf]=\"tabs\" let-i=\"index\">\r\n <li\r\n role=\"presentation\"\r\n [ngClass]=\"{ 'cax-highlight': tab.selected, 'cax-disabled': tab.disabled, 'pinned': tab.pinned }\"\r\n [attr.data-cax-disabled]=\"tab.disabled\"\r\n [ngStyle]=\"tab.headerStyle\"\r\n [class]=\"tab.headerStyleClass\"\r\n *ngIf=\"!tab.closed\"\r\n >\r\n <a\r\n role=\"tab\"\r\n class=\"cax-segment-tabview-nav-link\"\r\n [caxTooltip]=\"tab.tooltip\"\r\n [tooltipPosition]=\"tab.tooltipPosition\"\r\n [positionStyle]=\"tab.tooltipPositionStyle\"\r\n [tooltipStyleClass]=\"tab.tooltipStyleClass\"\r\n [attr.id]=\"getTabHeaderActionId(tab.id)\"\r\n [attr.aria-controls]=\"getTabContentId(tab.id)\"\r\n [attr.aria-selected]=\"tab.selected\"\r\n [attr.tabindex]=\"tab.disabled || !tab.selected ? '-1' : tabindex\"\r\n [attr.aria-disabled]=\"tab.disabled\"\r\n [attr.data-pc-index]=\"i\"\r\n [attr.data-pc-section]=\"'headeraction'\"\r\n (click)=\"open($event, tab)\"\r\n (keydown)=\"onTabKeyDown($event, tab)\"\r\n caxRipple\r\n >\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n <span class=\"cax-tabview-left-icon\" [ngClass]=\"tab.leftIcon\" *ngIf=\"tab.leftIcon && !tab.leftIconTemplate\"></span>\r\n <span *ngIf=\"tab.leftIconTemplate\" class=\"cax-tabview-left-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.leftIconTemplate\"></ng-template>\r\n </span>\r\n <span *ngIf=\"tab.icon\" class=\"cax-dynamic-icon\" [class]=\"tab.icon\"></span>\r\n <span *ngIf=\"tab.header\" class=\"cax-tabview-title\">{{ tab.header }}</span>\r\n <span class=\"cax-tabview-right-icon\" [ngClass]=\"tab.rightIcon\" *ngIf=\"tab.rightIcon && !tab.rightIconTemplate\"></span>\r\n <span *ngIf=\"tab.rightIconTemplate\" class=\"cax-tabview-right-icon\">\r\n <ng-template *ngTemplateOutlet=\"tab.rightIconTemplate\"></ng-template>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate\"></ng-container>\r\n <ng-container *ngIf=\"tab.closable\">\r\n <TimesIcon *ngIf=\"!tab.closeIconTemplate\" [styleClass]=\"'cax-tabview-close'\" (click)=\"close($event, tab)\" />\r\n <span class=\"tab.closeIconTemplate\" *ngIf=\"tab.closeIconTemplate\"></span>\r\n <ng-template *ngTemplateOutlet=\"tab.closeIconTemplate\"></ng-template>\r\n </ng-container>\r\n </a>\r\n </li>\r\n </ng-template>\r\n </ul>\r\n </div>\r\n </div>\r\n <button\r\n *ngIf=\"scrollable && !forwardIsDisabled && buttonVisible\"\r\n #nextBtn\r\n [attr.tabindex]=\"tabindex\"\r\n [attr.aria-label]=\"nextButtonAriaLabel\"\r\n class=\"cax-tabview-nav-next cax-segment-tabview-nav-btn cax-link\"\r\n (click)=\"navForward()\"\r\n type=\"button\"\r\n caxRipple\r\n >\r\n <ChevronRightIcon *ngIf=\"!nextIconTemplate\" [attr.aria-hidden]=\"true\" />\r\n <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n </button>\r\n </div>\r\n <div class=\"cax-tabview-panels\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["@layer cax{.cax-tabview-nav-container{position:relative}.cax-tabview-nav-container.block-mode{display:block}.cax-tabview-nav-container.flex-mode{display:flex}.cax-tabview-action-buttons{display:flex;align-items:center;margin-left:auto}.cax-tabview-separator{width:2px;height:35px;display:inline-block;vertical-align:middle;margin-right:8px}.cax-tabview-scrollable .cax-tabview-nav-container{overflow:hidden;white-space:nowrap}.cax-tabview-nav-content{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior:contain auto}.cax-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-tabview-nav li.full-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:1!important}.cax-tabview-nav li.full-mode cax-tabview .cax-tabview-nav li .cax-tabview-nav-link{border:none}.cax-tabview-nav li.half-mode{min-height:60px;display:flex;justify-content:center;align-items:center;flex:none!important}.cax-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-tabview-ink-bar{display:none;z-index:1}.cax-tabview-nav-link:focus{z-index:1}.cax-tabview-title{line-height:1;white-space:nowrap}.cax-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-tabview-nav-prev{left:0}.cax-tabview-nav-next{right:0}.cax-tabview-nav-content::-webkit-scrollbar{display:none}.cax-tabview-close{z-index:1}.cax-segment-tabview-container{flex-direction:row;height:48px}.cax-segment-tabview-header{display:flex;align-items:center;height:48px}.cax-segment-tabview-nav{display:inline-flex;min-width:100%;margin:0;padding:0;list-style-type:none;flex:1 1 auto}.cax-segment-tabview-nav-link{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;position:relative;text-decoration:none;overflow:hidden}.cax-segment-tabview-nav-link{z-index:1}.cax-left-arrow,.cax-right-arrow{position:sticky;top:0;z-index:100;background:transparent;border:none;cursor:pointer;font-size:1.25rem}.cax-arrow-buttons{display:flex;align-items:center;gap:16px}.cax-left-arrow,.cax-right-arrow{position:sticky;left:0;z-index:100;transition:transform .2s ease}.cax-left-arrow{left:0;padding-left:var(--space-200)}.cax-right-arrow{right:0;padding-right:var(--space-200)}.cax-dynamic-icon{font-size:1.25rem;cursor:pointer}.cax-segment-tabview-nav-btn{position:absolute;top:0;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}.cax-segment-tabview-nav li.pinned{position:sticky;left:var(--pinned-left, 0);z-index:10;background-color:var(--white-100)}}\n"] }]
|
|
826
837
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
827
838
|
type: Inject,
|
|
828
839
|
args: [PLATFORM_ID]
|
|
@@ -853,6 +864,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
853
864
|
}], tabindex: [{
|
|
854
865
|
type: Input,
|
|
855
866
|
args: [{ transform: numberAttribute }]
|
|
867
|
+
}], actionButton: [{
|
|
868
|
+
type: Input
|
|
869
|
+
}], actionButtonSeverity: [{
|
|
870
|
+
type: Input
|
|
871
|
+
}], actionButtonSize: [{
|
|
872
|
+
type: Input
|
|
873
|
+
}], actionButtonOutlined: [{
|
|
874
|
+
type: Input
|
|
875
|
+
}], actionButtonRounded: [{
|
|
876
|
+
type: Input
|
|
877
|
+
}], actionButtonIcon: [{
|
|
878
|
+
type: Input
|
|
879
|
+
}], actionButtonLoading: [{
|
|
880
|
+
type: Input
|
|
881
|
+
}], actionButtonLink: [{
|
|
882
|
+
type: Input
|
|
883
|
+
}], actionButtonDisabled: [{
|
|
884
|
+
type: Input
|
|
856
885
|
}], onChange: [{
|
|
857
886
|
type: Output
|
|
858
887
|
}], onClose: [{
|
|
@@ -891,13 +920,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
891
920
|
|
|
892
921
|
class TabViewModule {
|
|
893
922
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
894
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon], exports: [TabView, TabPanel, SharedModule] });
|
|
895
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, SharedModule] });
|
|
923
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, declarations: [TabView, TabPanel], imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule], exports: [TabView, TabPanel, SharedModule] });
|
|
924
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule, SharedModule] });
|
|
896
925
|
}
|
|
897
926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TabViewModule, decorators: [{
|
|
898
927
|
type: NgModule,
|
|
899
928
|
args: [{
|
|
900
|
-
imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon],
|
|
929
|
+
imports: [CommonModule, SharedModule, TooltipModule, RippleModule, TimesIcon, ChevronLeftIcon, ChevronRightIcon, ButtonModule],
|
|
901
930
|
exports: [TabView, TabPanel, SharedModule],
|
|
902
931
|
declarations: [TabView, TabPanel]
|
|
903
932
|
}]
|