ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
109 lines (107 loc) • 11.5 kB
JavaScript
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import * as i0 from "@angular/core";
import * as i1 from "ng-zorro-antd/icon";
export class NzSiderTriggerComponent {
constructor() {
this.nzCollapsed = false;
this.nzReverseArrow = false;
this.nzZeroTrigger = null;
this.nzTrigger = undefined;
this.matchBreakPoint = false;
this.nzCollapsedWidth = null;
this.siderWidth = null;
this.nzBreakpoint = null;
this.isZeroTrigger = false;
this.isNormalTrigger = false;
}
updateTriggerType() {
this.isZeroTrigger =
this.nzCollapsedWidth === 0 && ((this.nzBreakpoint && this.matchBreakPoint) || !this.nzBreakpoint);
this.isNormalTrigger = this.nzCollapsedWidth !== 0;
}
ngOnInit() {
this.updateTriggerType();
}
ngOnChanges() {
this.updateTriggerType();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzSiderTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: NzSiderTriggerComponent, isStandalone: true, selector: "[nz-sider-trigger]", inputs: { nzCollapsed: "nzCollapsed", nzReverseArrow: "nzReverseArrow", nzZeroTrigger: "nzZeroTrigger", nzTrigger: "nzTrigger", matchBreakPoint: "matchBreakPoint", nzCollapsedWidth: "nzCollapsedWidth", siderWidth: "siderWidth", nzBreakpoint: "nzBreakpoint" }, host: { properties: { "class.ant-layout-sider-trigger": "isNormalTrigger", "style.width": "isNormalTrigger ? siderWidth : null", "class.ant-layout-sider-zero-width-trigger": "isZeroTrigger", "class.ant-layout-sider-zero-width-trigger-right": "isZeroTrigger && nzReverseArrow", "class.ant-layout-sider-zero-width-trigger-left": "isZeroTrigger && !nzReverseArrow" } }, exportAs: ["nzSiderTrigger"], usesOnChanges: true, ngImport: i0, template: `
(isZeroTrigger) {
<ng-template [ngTemplateOutlet]="nzZeroTrigger || defaultZeroTrigger" />
}
(isNormalTrigger) {
<ng-template [ngTemplateOutlet]="nzTrigger || defaultTrigger" />
}
<ng-template #defaultTrigger>
(nzReverseArrow) {
<span nz-icon [nzType]="nzCollapsed ? 'left' : 'right'"></span>
} {
<span nz-icon [nzType]="nzCollapsed ? 'right' : 'left'"></span>
}
</ng-template>
<ng-template #defaultZeroTrigger>
<span nz-icon nzType="bars"></span>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NzIconModule }, { kind: "directive", type: i1.NzIconDirective, selector: "[nz-icon]", inputs: ["nzSpin", "nzRotate", "nzType", "nzTheme", "nzTwotoneColor", "nzIconfont"], exportAs: ["nzIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NzSiderTriggerComponent, decorators: [{
type: Component,
args: [{
selector: '[nz-sider-trigger]',
exportAs: 'nzSiderTrigger',
preserveWhitespaces: false,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
(isZeroTrigger) {
<ng-template [ngTemplateOutlet]="nzZeroTrigger || defaultZeroTrigger" />
}
(isNormalTrigger) {
<ng-template [ngTemplateOutlet]="nzTrigger || defaultTrigger" />
}
<ng-template #defaultTrigger>
(nzReverseArrow) {
<span nz-icon [nzType]="nzCollapsed ? 'left' : 'right'"></span>
} {
<span nz-icon [nzType]="nzCollapsed ? 'right' : 'left'"></span>
}
</ng-template>
<ng-template #defaultZeroTrigger>
<span nz-icon nzType="bars"></span>
</ng-template>
`,
host: {
'[class.ant-layout-sider-trigger]': 'isNormalTrigger',
'[style.width]': 'isNormalTrigger ? siderWidth : null',
'[class.ant-layout-sider-zero-width-trigger]': 'isZeroTrigger',
'[class.ant-layout-sider-zero-width-trigger-right]': 'isZeroTrigger && nzReverseArrow',
'[class.ant-layout-sider-zero-width-trigger-left]': 'isZeroTrigger && !nzReverseArrow'
},
imports: [NgTemplateOutlet, NzIconModule],
standalone: true
}]
}], propDecorators: { nzCollapsed: [{
type: Input
}], nzReverseArrow: [{
type: Input
}], nzZeroTrigger: [{
type: Input
}], nzTrigger: [{
type: Input
}], matchBreakPoint: [{
type: Input
}], nzCollapsedWidth: [{
type: Input
}], siderWidth: [{
type: Input
}], nzBreakpoint: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZXItdHJpZ2dlci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2xheW91dC9zaWRlci10cmlnZ2VyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNuRCxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxLQUFLLEVBSUwsaUJBQWlCLEVBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBR3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7O0FBcUNsRCxNQUFNLE9BQU8sdUJBQXVCO0lBbkNwQztRQW9DVyxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUN2QixrQkFBYSxHQUE2QixJQUFJLENBQUM7UUFDL0MsY0FBUyxHQUF5QyxTQUFTLENBQUM7UUFDNUQsb0JBQWUsR0FBRyxLQUFLLENBQUM7UUFDeEIscUJBQWdCLEdBQWtCLElBQUksQ0FBQztRQUN2QyxlQUFVLEdBQWtCLElBQUksQ0FBQztRQUNqQyxpQkFBWSxHQUEyQixJQUFJLENBQUM7UUFDckQsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFDdEIsb0JBQWUsR0FBRyxLQUFLLENBQUM7S0FZekI7SUFYQyxpQkFBaUI7UUFDZixJQUFJLENBQUMsYUFBYTtZQUNoQixJQUFJLENBQUMsZ0JBQWdCLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNyRyxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsS0FBSyxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUNELFFBQVE7UUFDTixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztJQUMzQixDQUFDO0lBQ0QsV0FBVztRQUNULElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO0lBQzNCLENBQUM7OEdBckJVLHVCQUF1QjtrR0FBdkIsdUJBQXVCLG92QkE3QnhCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQlQsNERBUVMsZ0JBQWdCLG1KQUFFLFlBQVk7OzJGQUc3Qix1QkFBdUI7a0JBbkNuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxvQkFBb0I7b0JBQzlCLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLG1CQUFtQixFQUFFLEtBQUs7b0JBQzFCLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJO29CQUNyQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtvQkFDL0MsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQlQ7b0JBQ0QsSUFBSSxFQUFFO3dCQUNKLGtDQUFrQyxFQUFFLGlCQUFpQjt3QkFDckQsZUFBZSxFQUFFLHFDQUFxQzt3QkFDdEQsNkNBQTZDLEVBQUUsZUFBZTt3QkFDOUQsbURBQW1ELEVBQUUsaUNBQWlDO3dCQUN0RixrREFBa0QsRUFBRSxrQ0FBa0M7cUJBQ3ZGO29CQUNELE9BQU8sRUFBRSxDQUFDLGdCQUFnQixFQUFFLFlBQVksQ0FBQztvQkFDekMsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzhCQUVVLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csZUFBZTtzQkFBdkIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2dpdGh1Yi5jb20vTkctWk9SUk8vbmctem9ycm8tYW50ZC9ibG9iL21hc3Rlci9MSUNFTlNFXG4gKi9cblxuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTnpCcmVha3BvaW50S2V5IH0gZnJvbSAnbmctem9ycm8tYW50ZC9jb3JlL3NlcnZpY2VzJztcbmltcG9ydCB7IE56SWNvbk1vZHVsZSB9IGZyb20gJ25nLXpvcnJvLWFudGQvaWNvbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tuei1zaWRlci10cmlnZ2VyXScsXG4gIGV4cG9ydEFzOiAnbnpTaWRlclRyaWdnZXInLFxuICBwcmVzZXJ2ZVdoaXRlc3BhY2VzOiBmYWxzZSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHRlbXBsYXRlOiBgXG4gICAgQGlmIChpc1plcm9UcmlnZ2VyKSB7XG4gICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibnpaZXJvVHJpZ2dlciB8fCBkZWZhdWx0WmVyb1RyaWdnZXJcIiAvPlxuICAgIH1cblxuICAgIEBpZiAoaXNOb3JtYWxUcmlnZ2VyKSB7XG4gICAgICA8bmctdGVtcGxhdGUgW25nVGVtcGxhdGVPdXRsZXRdPVwibnpUcmlnZ2VyIHx8IGRlZmF1bHRUcmlnZ2VyXCIgLz5cbiAgICB9XG4gICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0VHJpZ2dlcj5cbiAgICAgIEBpZiAobnpSZXZlcnNlQXJyb3cpIHtcbiAgICAgICAgPHNwYW4gbnotaWNvbiBbbnpUeXBlXT1cIm56Q29sbGFwc2VkID8gJ2xlZnQnIDogJ3JpZ2h0J1wiPjwvc3Bhbj5cbiAgICAgIH0gQGVsc2Uge1xuICAgICAgICA8c3BhbiBuei1pY29uIFtuelR5cGVdPVwibnpDb2xsYXBzZWQgPyAncmlnaHQnIDogJ2xlZnQnXCI+PC9zcGFuPlxuICAgICAgfVxuICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0WmVyb1RyaWdnZXI+XG4gICAgICA8c3BhbiBuei1pY29uIG56VHlwZT1cImJhcnNcIj48L3NwYW4+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbiAgYCxcbiAgaG9zdDoge1xuICAgICdbY2xhc3MuYW50LWxheW91dC1zaWRlci10cmlnZ2VyXSc6ICdpc05vcm1hbFRyaWdnZXInLFxuICAgICdbc3R5bGUud2lkdGhdJzogJ2lzTm9ybWFsVHJpZ2dlciA/IHNpZGVyV2lkdGggOiBudWxsJyxcbiAgICAnW2NsYXNzLmFudC1sYXlvdXQtc2lkZXItemVyby13aWR0aC10cmlnZ2VyXSc6ICdpc1plcm9UcmlnZ2VyJyxcbiAgICAnW2NsYXNzLmFudC1sYXlvdXQtc2lkZXItemVyby13aWR0aC10cmlnZ2VyLXJpZ2h0XSc6ICdpc1plcm9UcmlnZ2VyICYmIG56UmV2ZXJzZUFycm93JyxcbiAgICAnW2NsYXNzLmFudC1sYXlvdXQtc2lkZXItemVyby13aWR0aC10cmlnZ2VyLWxlZnRdJzogJ2lzWmVyb1RyaWdnZXIgJiYgIW56UmV2ZXJzZUFycm93J1xuICB9LFxuICBpbXBvcnRzOiBbTmdUZW1wbGF0ZU91dGxldCwgTnpJY29uTW9kdWxlXSxcbiAgc3RhbmRhbG9uZTogdHJ1ZVxufSlcbmV4cG9ydCBjbGFzcyBOelNpZGVyVHJpZ2dlckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcywgT25Jbml0IHtcbiAgQElucHV0KCkgbnpDb2xsYXBzZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgbnpSZXZlcnNlQXJyb3cgPSBmYWxzZTtcbiAgQElucHV0KCkgbnpaZXJvVHJpZ2dlcjogVGVtcGxhdGVSZWY8dm9pZD4gfCBudWxsID0gbnVsbDtcbiAgQElucHV0KCkgbnpUcmlnZ2VyOiBUZW1wbGF0ZVJlZjx2b2lkPiB8IHVuZGVmaW5lZCB8IG51bGwgPSB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIG1hdGNoQnJlYWtQb2ludCA9IGZhbHNlO1xuICBASW5wdXQoKSBuekNvbGxhcHNlZFdpZHRoOiBudW1iZXIgfCBudWxsID0gbnVsbDtcbiAgQElucHV0KCkgc2lkZXJXaWR0aDogc3RyaW5nIHwgbnVsbCA9IG51bGw7XG4gIEBJbnB1dCgpIG56QnJlYWtwb2ludDogTnpCcmVha3BvaW50S2V5IHwgbnVsbCA9IG51bGw7XG4gIGlzWmVyb1RyaWdnZXIgPSBmYWxzZTtcbiAgaXNOb3JtYWxUcmlnZ2VyID0gZmFsc2U7XG4gIHVwZGF0ZVRyaWdnZXJUeXBlKCk6IHZvaWQge1xuICAgIHRoaXMuaXNaZXJvVHJpZ2dlciA9XG4gICAgICB0aGlzLm56Q29sbGFwc2VkV2lkdGggPT09IDAgJiYgKCh0aGlzLm56QnJlYWtwb2ludCAmJiB0aGlzLm1hdGNoQnJlYWtQb2ludCkgfHwgIXRoaXMubnpCcmVha3BvaW50KTtcbiAgICB0aGlzLmlzTm9ybWFsVHJpZ2dlciA9IHRoaXMubnpDb2xsYXBzZWRXaWR0aCAhPT0gMDtcbiAgfVxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnVwZGF0ZVRyaWdnZXJUeXBlKCk7XG4gIH1cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgdGhpcy51cGRhdGVUcmlnZ2VyVHlwZSgpO1xuICB9XG59XG4iXX0=