@clr/angular
Version:
Angular components for Clarity
79 lines • 13.8 kB
JavaScript
/*
* Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
* This software is released under MIT license.
* The full license information can be found in LICENSE in the root directory of this project.
*/
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { VerticalNavGroupRegistrationService } from './providers/vertical-nav-group-registration.service';
import { VerticalNavIconService } from './providers/vertical-nav-icon.service';
import { VerticalNavService } from './providers/vertical-nav.service';
import * as i0 from "@angular/core";
import * as i1 from "./providers/vertical-nav.service";
import * as i2 from "./providers/vertical-nav-icon.service";
import * as i3 from "./providers/vertical-nav-group-registration.service";
import * as i4 from "../../utils/i18n/common-strings.service";
import * as i5 from "@angular/common";
import * as i6 from "../../icon/icon";
export class ClrVerticalNav {
constructor(_navService, _navIconService, _navGroupRegistrationService, commonStrings) {
this._navService = _navService;
this._navIconService = _navIconService;
this._navGroupRegistrationService = _navGroupRegistrationService;
this.commonStrings = commonStrings;
this._collapsedChanged = new EventEmitter(true);
this._sub = this._navService.collapsedChanged.subscribe(value => {
this._collapsedChanged.emit(value);
});
}
get collapsible() {
return this._navService.collapsible;
}
set collapsible(value) {
this._navService.collapsible = value;
}
get collapsed() {
return this._navService.collapsed;
}
set collapsed(value) {
this._navService.collapsed = value;
}
get hasNavGroups() {
return this._navGroupRegistrationService.navGroupCount > 0;
}
get hasIcons() {
return this._navIconService.hasIcons;
}
get ariaExpanded() {
if (!this.collapsible) {
return null;
}
return !this.collapsed ? 'true' : 'false';
}
ngOnDestroy() {
this._sub.unsubscribe();
}
toggleByButton() {
this.collapsed = !this.collapsed;
}
}
ClrVerticalNav.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrVerticalNav, deps: [{ token: i1.VerticalNavService }, { token: i2.VerticalNavIconService }, { token: i3.VerticalNavGroupRegistrationService }, { token: i4.ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
ClrVerticalNav.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrVerticalNav, selector: "clr-vertical-nav", inputs: { collapsible: ["clrVerticalNavCollapsible", "collapsible"], collapsed: ["clrVerticalNavCollapsed", "collapsed"] }, outputs: { _collapsedChanged: "clrVerticalNavCollapsedChange" }, host: { properties: { "class.is-collapsed": "collapsed", "class.has-nav-groups": "hasNavGroups", "class.has-icons": "hasIcons" }, classAttribute: "clr-vertical-nav" }, providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <ng-content></ng-content>\n <button\n type=\"button\"\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdsIconCustomTag, selector: "cds-icon" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrVerticalNav, decorators: [{
type: Component,
args: [{ selector: 'clr-vertical-nav', providers: [VerticalNavService, VerticalNavIconService, VerticalNavGroupRegistrationService], host: {
class: 'clr-vertical-nav',
'[class.is-collapsed]': 'collapsed',
'[class.has-nav-groups]': 'hasNavGroups',
'[class.has-icons]': 'hasIcons',
}, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<button\n type=\"button\"\n class=\"nav-trigger\"\n [class.on-collapse]=\"collapsed\"\n [attr.aria-expanded]=\"ariaExpanded\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n (click)=\"toggleByButton()\"\n *ngIf=\"collapsible\"\n>\n <cds-icon\n shape=\"angle-double\"\n class=\"nav-trigger-icon\"\n [attr.direction]=\"(this.collapsed) ? 'right' : 'left'\"\n ></cds-icon>\n</button>\n<div class=\"nav-content\">\n <ng-content></ng-content>\n <button\n type=\"button\"\n (click)=\"collapsed = false\"\n class=\"nav-btn\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [attr.aria-label]=\"commonStrings.keys.verticalNavToggle\"\n *ngIf=\"collapsible && collapsed\"\n ></button>\n</div>\n" }]
}], ctorParameters: function () { return [{ type: i1.VerticalNavService }, { type: i2.VerticalNavIconService }, { type: i3.VerticalNavGroupRegistrationService }, { type: i4.ClrCommonStringsService }]; }, propDecorators: { _collapsedChanged: [{
type: Output,
args: ['clrVerticalNavCollapsedChange']
}], collapsible: [{
type: Input,
args: ['clrVerticalNavCollapsible']
}], collapsed: [{
type: Input,
args: ['clrVerticalNavCollapsed']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtbmF2LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci9zcmMvbGF5b3V0L3ZlcnRpY2FsLW5hdi92ZXJ0aWNhbC1uYXYudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyL3NyYy9sYXlvdXQvdmVydGljYWwtbmF2L3ZlcnRpY2FsLW5hdi5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7O0dBSUc7QUFFSCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBSWxGLE9BQU8sRUFBRSxtQ0FBbUMsRUFBRSxNQUFNLHFEQUFxRCxDQUFDO0FBQzFHLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHVDQUF1QyxDQUFDO0FBQy9FLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFDOzs7Ozs7OztBQWF0RSxNQUFNLE9BQU8sY0FBYztJQUt6QixZQUNVLFdBQStCLEVBQy9CLGVBQXVDLEVBQ3ZDLDRCQUFpRSxFQUNsRSxhQUFzQztRQUhyQyxnQkFBVyxHQUFYLFdBQVcsQ0FBb0I7UUFDL0Isb0JBQWUsR0FBZixlQUFlLENBQXdCO1FBQ3ZDLGlDQUE0QixHQUE1Qiw0QkFBNEIsQ0FBcUM7UUFDbEUsa0JBQWEsR0FBYixhQUFhLENBQXlCO1FBUkUsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLENBQVUsSUFBSSxDQUFDLENBQUM7UUFVbkcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUM5RCxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUM7SUFDdEMsQ0FBQztJQUNELElBQUksV0FBVyxDQUFDLEtBQXVCO1FBQ3JDLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxHQUFHLEtBQWdCLENBQUM7SUFDbEQsQ0FBQztJQUVELElBQ0ksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUM7SUFDcEMsQ0FBQztJQUNELElBQUksU0FBUyxDQUFDLEtBQXVCO1FBQ25DLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxHQUFHLEtBQWdCLENBQUM7SUFDaEQsQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLE9BQU8sSUFBSSxDQUFDLDRCQUE0QixDQUFDLGFBQWEsR0FBRyxDQUFDLENBQUM7SUFDN0QsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLENBQUM7SUFDdkMsQ0FBQztJQUVELElBQUksWUFBWTtRQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3JCLE9BQU8sSUFBSSxDQUFDO1NBQ2I7UUFDRCxPQUFPLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUM7SUFDNUMsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxjQUFjO1FBQ1osSUFBSSxDQUFDLFNBQVMsR0FBRyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUM7SUFDbkMsQ0FBQzs7MkdBckRVLGNBQWM7K0ZBQWQsY0FBYyxnWkFSZCxDQUFDLGtCQUFrQixFQUFFLHNCQUFzQixFQUFFLG1DQUFtQyxDQUFDLDBCQ2pCOUYsbThCQWlDQTsyRkRSYSxjQUFjO2tCQVgxQixTQUFTOytCQUNFLGtCQUFrQixhQUVqQixDQUFDLGtCQUFrQixFQUFFLHNCQUFzQixFQUFFLG1DQUFtQyxDQUFDLFFBQ3RGO3dCQUNKLEtBQUssRUFBRSxrQkFBa0I7d0JBQ3pCLHNCQUFzQixFQUFFLFdBQVc7d0JBQ25DLHdCQUF3QixFQUFFLGNBQWM7d0JBQ3hDLG1CQUFtQixFQUFFLFVBQVU7cUJBQ2hDO3NPQUdnRCxpQkFBaUI7c0JBQWpFLE1BQU07dUJBQUMsK0JBQStCO2dCQWdCbkMsV0FBVztzQkFEZCxLQUFLO3VCQUFDLDJCQUEyQjtnQkFTOUIsU0FBUztzQkFEWixLQUFLO3VCQUFDLHlCQUF5QiIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBDb3B5cmlnaHQgKGMpIDIwMTYtMjAyMyBWTXdhcmUsIEluYy4gQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqIFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gKiBUaGUgZnVsbCBsaWNlbnNlIGluZm9ybWF0aW9uIGNhbiBiZSBmb3VuZCBpbiBMSUNFTlNFIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHByb2plY3QuXG4gKi9cblxuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkRlc3Ryb3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7IENsckNvbW1vblN0cmluZ3NTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vdXRpbHMvaTE4bi9jb21tb24tc3RyaW5ncy5zZXJ2aWNlJztcbmltcG9ydCB7IFZlcnRpY2FsTmF2R3JvdXBSZWdpc3RyYXRpb25TZXJ2aWNlIH0gZnJvbSAnLi9wcm92aWRlcnMvdmVydGljYWwtbmF2LWdyb3VwLXJlZ2lzdHJhdGlvbi5zZXJ2aWNlJztcbmltcG9ydCB7IFZlcnRpY2FsTmF2SWNvblNlcnZpY2UgfSBmcm9tICcuL3Byb3ZpZGVycy92ZXJ0aWNhbC1uYXYtaWNvbi5zZXJ2aWNlJztcbmltcG9ydCB7IFZlcnRpY2FsTmF2U2VydmljZSB9IGZyb20gJy4vcHJvdmlkZXJzL3ZlcnRpY2FsLW5hdi5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY2xyLXZlcnRpY2FsLW5hdicsXG4gIHRlbXBsYXRlVXJsOiAnLi92ZXJ0aWNhbC1uYXYuaHRtbCcsXG4gIHByb3ZpZGVyczogW1ZlcnRpY2FsTmF2U2VydmljZSwgVmVydGljYWxOYXZJY29uU2VydmljZSwgVmVydGljYWxOYXZHcm91cFJlZ2lzdHJhdGlvblNlcnZpY2VdLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdjbHItdmVydGljYWwtbmF2JyxcbiAgICAnW2NsYXNzLmlzLWNvbGxhcHNlZF0nOiAnY29sbGFwc2VkJyxcbiAgICAnW2NsYXNzLmhhcy1uYXYtZ3JvdXBzXSc6ICdoYXNOYXZHcm91cHMnLFxuICAgICdbY2xhc3MuaGFzLWljb25zXSc6ICdoYXNJY29ucycsXG4gIH0sXG59KVxuZXhwb3J0IGNsYXNzIENsclZlcnRpY2FsTmF2IGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgQE91dHB1dCgnY2xyVmVydGljYWxOYXZDb2xsYXBzZWRDaGFuZ2UnKSBwcml2YXRlIF9jb2xsYXBzZWRDaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPih0cnVlKTtcblxuICBwcml2YXRlIF9zdWI6IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9uYXZTZXJ2aWNlOiBWZXJ0aWNhbE5hdlNlcnZpY2UsXG4gICAgcHJpdmF0ZSBfbmF2SWNvblNlcnZpY2U6IFZlcnRpY2FsTmF2SWNvblNlcnZpY2UsXG4gICAgcHJpdmF0ZSBfbmF2R3JvdXBSZWdpc3RyYXRpb25TZXJ2aWNlOiBWZXJ0aWNhbE5hdkdyb3VwUmVnaXN0cmF0aW9uU2VydmljZSxcbiAgICBwdWJsaWMgY29tbW9uU3RyaW5nczogQ2xyQ29tbW9uU3RyaW5nc1NlcnZpY2VcbiAgKSB7XG4gICAgdGhpcy5fc3ViID0gdGhpcy5fbmF2U2VydmljZS5jb2xsYXBzZWRDaGFuZ2VkLnN1YnNjcmliZSh2YWx1ZSA9PiB7XG4gICAgICB0aGlzLl9jb2xsYXBzZWRDaGFuZ2VkLmVtaXQodmFsdWUpO1xuICAgIH0pO1xuICB9XG5cbiAgQElucHV0KCdjbHJWZXJ0aWNhbE5hdkNvbGxhcHNpYmxlJylcbiAgZ2V0IGNvbGxhcHNpYmxlKCk6IGJvb2xlYW4gfCBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLl9uYXZTZXJ2aWNlLmNvbGxhcHNpYmxlO1xuICB9XG4gIHNldCBjb2xsYXBzaWJsZSh2YWx1ZTogYm9vbGVhbiB8IHN0cmluZykge1xuICAgIHRoaXMuX25hdlNlcnZpY2UuY29sbGFwc2libGUgPSB2YWx1ZSBhcyBib29sZWFuO1xuICB9XG5cbiAgQElucHV0KCdjbHJWZXJ0aWNhbE5hdkNvbGxhcHNlZCcpXG4gIGdldCBjb2xsYXBzZWQoKTogYm9vbGVhbiB8IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX25hdlNlcnZpY2UuY29sbGFwc2VkO1xuICB9XG4gIHNldCBjb2xsYXBzZWQodmFsdWU6IGJvb2xlYW4gfCBzdHJpbmcpIHtcbiAgICB0aGlzLl9uYXZTZXJ2aWNlLmNvbGxhcHNlZCA9IHZhbHVlIGFzIGJvb2xlYW47XG4gIH1cblxuICBnZXQgaGFzTmF2R3JvdXBzKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9uYXZHcm91cFJlZ2lzdHJhdGlvblNlcnZpY2UubmF2R3JvdXBDb3VudCA+IDA7XG4gIH1cblxuICBnZXQgaGFzSWNvbnMoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuX25hdkljb25TZXJ2aWNlLmhhc0ljb25zO1xuICB9XG5cbiAgZ2V0IGFyaWFFeHBhbmRlZCgpOiBzdHJpbmcge1xuICAgIGlmICghdGhpcy5jb2xsYXBzaWJsZSkge1xuICAgICAgcmV0dXJuIG51bGw7XG4gICAgfVxuICAgIHJldHVybiAhdGhpcy5jb2xsYXBzZWQgPyAndHJ1ZScgOiAnZmFsc2UnO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5fc3ViLnVuc3Vic2NyaWJlKCk7XG4gIH1cblxuICB0b2dnbGVCeUJ1dHRvbigpIHtcbiAgICB0aGlzLmNvbGxhcHNlZCA9ICF0aGlzLmNvbGxhcHNlZDtcbiAgfVxufVxuIiwiPCEtLVxuICB+IENvcHlyaWdodCAoYykgMjAxNi0yMDIzIFZNd2FyZSwgSW5jLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxuICB+IFRoaXMgc29mdHdhcmUgaXMgcmVsZWFzZWQgdW5kZXIgTUlUIGxpY2Vuc2UuXG4gIH4gVGhlIGZ1bGwgbGljZW5zZSBpbmZvcm1hdGlvbiBjYW4gYmUgZm91bmQgaW4gTElDRU5TRSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBwcm9qZWN0LlxuICAtLT5cblxuPGJ1dHRvblxuICB0eXBlPVwiYnV0dG9uXCJcbiAgY2xhc3M9XCJuYXYtdHJpZ2dlclwiXG4gIFtjbGFzcy5vbi1jb2xsYXBzZV09XCJjb2xsYXBzZWRcIlxuICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImFyaWFFeHBhbmRlZFwiXG4gIFthdHRyLmFyaWEtbGFiZWxdPVwiY29tbW9uU3RyaW5ncy5rZXlzLnZlcnRpY2FsTmF2VG9nZ2xlXCJcbiAgKGNsaWNrKT1cInRvZ2dsZUJ5QnV0dG9uKClcIlxuICAqbmdJZj1cImNvbGxhcHNpYmxlXCJcbj5cbiAgPGNkcy1pY29uXG4gICAgc2hhcGU9XCJhbmdsZS1kb3VibGVcIlxuICAgIGNsYXNzPVwibmF2LXRyaWdnZXItaWNvblwiXG4gICAgW2F0dHIuZGlyZWN0aW9uXT1cIih0aGlzLmNvbGxhcHNlZCkgPyAncmlnaHQnIDogJ2xlZnQnXCJcbiAgPjwvY2RzLWljb24+XG48L2J1dHRvbj5cbjxkaXYgY2xhc3M9XCJuYXYtY29udGVudFwiPlxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIDxidXR0b25cbiAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAoY2xpY2spPVwiY29sbGFwc2VkID0gZmFsc2VcIlxuICAgIGNsYXNzPVwibmF2LWJ0blwiXG4gICAgYXJpYS1oaWRkZW49XCJ0cnVlXCJcbiAgICB0YWJpbmRleD1cIi0xXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsXT1cImNvbW1vblN0cmluZ3Mua2V5cy52ZXJ0aWNhbE5hdlRvZ2dsZVwiXG4gICAgKm5nSWY9XCJjb2xsYXBzaWJsZSAmJiBjb2xsYXBzZWRcIlxuICA+PC9idXR0b24+XG48L2Rpdj5cbiJdfQ==