@ascentgl/ads-ui 20.12.0 → 20.13.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.
|
@@ -6570,11 +6570,11 @@ class AdsSideNavBarComponent extends AbstractSideNavBarComponent {
|
|
|
6570
6570
|
this.registry.register([adsIconSearch]);
|
|
6571
6571
|
}
|
|
6572
6572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdsSideNavBarComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\r\n #splitter\r\n [useTransition]=\"true\"\r\n unit=\"pixel\"\r\n [gutterSize]=\"10\"\r\n (gutterDblClick)=\"expandSidebar()\"\r\n [gutterDblClickDuration]=\"500\"\r\n (dragEnd)=\"dragEnd($event)\"\r\n>\r\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\r\n <div class=\"left-side-content-container\">\r\n <div class=\"logo-container\">\r\n <a [routerLink]=\"'/'\">\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\r\n </a>\r\n </div>\r\n\r\n <div class=\"nav-items-wrapper\">\r\n <!-- Regular navigation items -->\r\n <div class=\"nav-items-container\">\r\n @for (item of regularNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Bottom navigation items -->\r\n @if (hasBottomItems()) {\r\n <div class=\"bottom-nav-section\">\r\n <div class=\"nav-items-container bottom-items\">\r\n @for (item of bottomNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link bottom-item\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link bottom-item\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </as-split-area>\r\n\r\n <as-split-area>\r\n <ng-content></ng-content>\r\n </as-split-area>\r\n</as-split>\r\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
6573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AdsSideNavBarComponent, isStandalone: false, selector: "ads-side-nav-bar", inputs: { searchTemplate: { classPropertyName: "searchTemplate", publicName: "searchTemplate", isSignal: true, isRequired: false, transformFunction: null }, extraDataTemplate: { classPropertyName: "extraDataTemplate", publicName: "extraDataTemplate", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "splitter", first: true, predicate: ["splitter"], descendants: true }, { propertyName: "sideNavArea", first: true, predicate: ["sideNavArea"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<as-split\r\n #splitter\r\n [useTransition]=\"true\"\r\n unit=\"pixel\"\r\n [gutterSize]=\"10\"\r\n (gutterDblClick)=\"expandSidebar()\"\r\n [gutterDblClickDuration]=\"500\"\r\n (dragEnd)=\"dragEnd($event)\"\r\n>\r\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\r\n <div class=\"left-side-content-container\">\r\n <div class=\"logo-container\">\r\n <a [routerLink]=\"'/'\">\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\r\n </a>\r\n </div>\r\n\r\n <div class=\"nav-items-wrapper\">\r\n <!-- Regular navigation items -->\r\n <div class=\"nav-items-container\">\r\n @for (item of regularNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Bottom navigation items -->\r\n @if (hasBottomItems()) {\r\n <div class=\"bottom-nav-section\">\r\n <div class=\"nav-items-container bottom-items\">\r\n @for (item of bottomNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link bottom-item {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link bottom-item {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </as-split-area>\r\n\r\n <as-split-area>\r\n <ng-content></ng-content>\r\n </as-split-area>\r\n</as-split>\r\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"], dependencies: [{ kind: "component", type: AdsPrimaryLogoComponent, selector: "ads-primary-logo" }, { kind: "component", type: i3$4.SplitComponent, selector: "as-split", inputs: ["gutterSize", "gutterStep", "disabled", "gutterClickDeltaPx", "direction", "dir", "unit", "gutterAriaLabel", "restrictMove", "useTransition", "gutterDblClickDuration"], outputs: ["gutterClick", "gutterDblClick", "dragStart", "dragEnd", "transitionEnd"], exportAs: ["asSplit"] }, { kind: "component", type: i3$4.SplitAreaComponent, selector: "as-split-area", inputs: ["size", "minSize", "maxSize", "lockSize", "visible"], exportAs: ["asSplitArea"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
6574
6574
|
}
|
|
6575
6575
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AdsSideNavBarComponent, decorators: [{
|
|
6576
6576
|
type: Component,
|
|
6577
|
-
args: [{ selector: 'ads-side-nav-bar', standalone: false, template: "<as-split\r\n #splitter\r\n [useTransition]=\"true\"\r\n unit=\"pixel\"\r\n [gutterSize]=\"10\"\r\n (gutterDblClick)=\"expandSidebar()\"\r\n [gutterDblClickDuration]=\"500\"\r\n (dragEnd)=\"dragEnd($event)\"\r\n>\r\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\r\n <div class=\"left-side-content-container\">\r\n <div class=\"logo-container\">\r\n <a [routerLink]=\"'/'\">\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\r\n </a>\r\n </div>\r\n\r\n <div class=\"nav-items-wrapper\">\r\n <!-- Regular navigation items -->\r\n <div class=\"nav-items-container\">\r\n @for (item of regularNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Bottom navigation items -->\r\n @if (hasBottomItems()) {\r\n <div class=\"bottom-nav-section\">\r\n <div class=\"nav-items-container bottom-items\">\r\n @for (item of bottomNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link bottom-item\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link bottom-item\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </as-split-area>\r\n\r\n <as-split-area>\r\n <ng-content></ng-content>\r\n </as-split-area>\r\n</as-split>\r\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"] }]
|
|
6577
|
+
args: [{ selector: 'ads-side-nav-bar', standalone: false, template: "<as-split\r\n #splitter\r\n [useTransition]=\"true\"\r\n unit=\"pixel\"\r\n [gutterSize]=\"10\"\r\n (gutterDblClick)=\"expandSidebar()\"\r\n [gutterDblClickDuration]=\"500\"\r\n (dragEnd)=\"dragEnd($event)\"\r\n>\r\n <as-split-area [size]=\"sidebarSize()\" [minSize]=\"50\" [maxSize]=\"maxExpandedWidth()\" #sideNavArea>\r\n <div class=\"left-side-content-container\">\r\n <div class=\"logo-container\">\r\n <a [routerLink]=\"'/'\">\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"true\" class=\"show-on-collapsed\" />\r\n <ads-primary-logo [mobileWidth]=\"70\" [isCollapsed]=\"false\" class=\"hide-on-collapsed\" />\r\n </a>\r\n </div>\r\n\r\n <div class=\"nav-items-wrapper\">\r\n <!-- Regular navigation items -->\r\n <div class=\"nav-items-container\">\r\n @for (item of regularNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n\r\n <!-- Bottom navigation items -->\r\n @if (hasBottomItems()) {\r\n <div class=\"bottom-nav-section\">\r\n <div class=\"nav-items-container bottom-items\">\r\n @for (item of bottomNavItems(); track $index) {\r\n @if (item.click) {\r\n <a\r\n class=\"ads-nav-link bottom-item {{item.class}}\"\r\n (click)=\"item.click()\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n } @else {\r\n <a\r\n [routerLink]=\"item.href\"\r\n routerLinkActive=\"active-nav-link\"\r\n [routerLinkActiveOptions]=\"{ exact: true }\"\r\n class=\"ads-nav-link bottom-item {{item.class}}\"\r\n >\r\n <div class=\"ads-nav-item-container\">\r\n @if (!!item.icon) {\r\n <ads-icon [name]=\"item.icon!\" size=\"sm\" theme=\"iconPrimary\" stroke=\"iconPrimary\" />\r\n }\r\n <span class=\"hide-on-collapsed\">{{ item.label }}</span>\r\n </div>\r\n </a>\r\n }\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </as-split-area>\r\n\r\n <as-split-area>\r\n <ng-content></ng-content>\r\n </as-split-area>\r\n</as-split>\r\n", styles: [".nav-items-wrapper{display:flex;flex-direction:column;height:100%;min-height:0}.nav-items-container{display:flex;flex-direction:column;border-bottom:1px solid var(--color-light)}.nav-items-container a{cursor:pointer}.nav-items-container .ads-nav-item-container{display:flex;padding:14px 12px;gap:12px;background-color:var(--color-white);align-items:center;overflow:hidden;white-space:nowrap}.nav-items-container .ads-nav-item-container span{font-weight:400;line-height:20px;color:var(--color-medium);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:unset;display:inline-block}.nav-items-container .ads-nav-item-container ads-icon{flex-shrink:0}.nav-items-container .ads-nav-item-container:hover span,.nav-items-container .ads-nav-item-container:focus span,.nav-items-container .ads-nav-item-container:active span{color:var(--color-white)}.nav-items-container .ads-nav-item-container:hover ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:focus ads-icon ::ng-deep svg,.nav-items-container .ads-nav-item-container:active ads-icon ::ng-deep svg{stroke:var(--color-white);fill:var(--color-white)!important}.nav-items-container .ads-nav-item-container:hover{background-color:var(--color-secondary-hover)!important}.nav-items-container .ads-nav-item-container:active{background-color:var(--color-secondary-pressed)!important}.nav-items-container .ads-nav-item-container:focus{background-color:var(--color-secondary)!important}as-split-area{background-color:var(--color-white)}.logo-container{padding:16px 12px;border-bottom:1px solid var(--color-light);height:auto}.ads-nav-link.active-nav-link .ads-nav-item-container{background-color:var(--color-secondary)!important}.ads-nav-link.active-nav-link .ads-nav-item-container span{color:var(--color-white)!important}.ads-nav-link.active-nav-link .ads-nav-item-container ads-icon ::ng-deep svg{stroke:var(--color-white)!important;fill:var(--color-white)!important}.ads-nav-link{text-decoration:none}.left-side-content-container{container-type:inline-size;display:flex;flex-direction:column;height:100vh}::ng-deep as-split .as-split-gutter{background-color:var(--color-light-30)}::ng-deep as-split .as-split-gutter:hover,::ng-deep as-split .as-split-gutter:focus{outline:none}::ng-deep as-split .as-split-gutter:hover .as-split-gutter-icon,::ng-deep as-split .as-split-gutter:focus .as-split-gutter-icon{background-color:var(--color-light-80)}::ng-deep as-split .as-split-gutter:active{background-color:var(--color-light)}::ng-deep as-split .as-split-gutter-icon{width:8px;background-color:var(--color-light-30);background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"11\" viewBox=\"0 0 6 11\" fill=\"none\"><path d=\"M4.7142 2.92855C5.42428 2.92855 5.99991 2.35291 5.99991 1.64283C5.99991 0.932751 5.42428 0.357117 4.7142 0.357117C4.00412 0.357117 3.42848 0.932751 3.42848 1.64283C3.42848 2.35291 4.00412 2.92855 4.7142 2.92855Z\" fill=\"%23041F41\"/><path d=\"M4.7142 6.78566C5.42428 6.78566 5.99991 6.21003 5.99991 5.49995C5.99991 4.78987 5.42428 4.21423 4.7142 4.21423C4.00412 4.21423 3.42848 4.78987 3.42848 5.49995C3.42848 6.21003 4.00412 6.78566 4.7142 6.78566Z\" fill=\"%23041F41\"/><path d=\"M4.7142 10.6428C5.42428 10.6428 5.99991 10.0672 5.99991 9.35713C5.99991 8.64704 5.42428 8.07141 4.7142 8.07141C4.00412 8.07141 3.42848 8.64704 3.42848 9.35713C3.42848 10.0672 4.00412 10.6428 4.7142 10.6428Z\" fill=\"%23041F41\"/><path d=\"M1.28571 2.92855C1.99579 2.92855 2.57143 2.35291 2.57143 1.64283C2.57143 0.932751 1.99579 0.357117 1.28571 0.357117C0.575634 0.357117 0 0.932751 0 1.64283C0 2.35291 0.575634 2.92855 1.28571 2.92855Z\" fill=\"%23041F41\"/><path d=\"M1.28571 6.78566C1.99579 6.78566 2.57143 6.21003 2.57143 5.49995C2.57143 4.78987 1.99579 4.21423 1.28571 4.21423C0.575634 4.21423 0 4.78987 0 5.49995C0 6.21003 0.575634 6.78566 1.28571 6.78566Z\" fill=\"%23041F41\"/><path d=\"M1.28571 10.6428C1.99579 10.6428 2.57143 10.0672 2.57143 9.35713C2.57143 8.64704 1.99579 8.07141 1.28571 8.07141C0.575634 8.07141 0 8.64704 0 9.35713C0 10.0672 0.575634 10.6428 1.28571 10.6428Z\" fill=\"%23041F41\"/></svg>')!important}.bottom-container{padding:16px 12px;flex-grow:1;display:flex;flex-direction:column}.bottom-nav-section{margin-top:auto}.bottom-nav-section .nav-items-container{border-bottom:none}@container (max-width: 70px){.bottom-container{flex-grow:unset}.bottom-container:hover{background-color:var(--color-secondary-hover)}.bottom-container:hover ads-icon ::ng-deep svg{stroke:var(--color-white)}.bottom-container:active{background-color:var(--color-secondary-pressed)}.hide-on-collapsed{display:none}.show-on-collapsed{display:contents}}@container (min-width: 71px){.hide-on-collapsed{display:contents}.show-on-collapsed{display:none}}\n"] }]
|
|
6578
6578
|
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }], propDecorators: { splitter: [{
|
|
6579
6579
|
type: ViewChild,
|
|
6580
6580
|
args: ['splitter']
|