UNPKG

carbon-components-angular

Version:
154 lines (152 loc) 14.6 kB
import { Component, ContentChild, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core"; import { OverflowMenuDirective } from "./overflow-menu.directive"; import { BaseIconButton } from "carbon-components-angular/button"; import * as i0 from "@angular/core"; import * as i1 from "carbon-components-angular/i18n"; import * as i2 from "@angular/common"; import * as i3 from "carbon-components-angular/icon"; import * as i4 from "carbon-components-angular/button"; import * as i5 from "carbon-components-angular/tooltip"; import * as i6 from "./overflow-menu.directive"; /** * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component. * * Get started with importing the module: * * ```typescript * import { DialogModule } from 'carbon-components-angular'; * ``` * * ```html * <cds-overflow-menu> * <cds-overflow-menu-option>Option 1</cds-overflow-menu-option> * <cds-overflow-menu-option>Option 2</cds-overflow-menu-option> * </cds-overflow-menu> * ``` * * [See demo](../../?path=/story/components-overflow-menu--basic) */ export class OverflowMenu extends BaseIconButton { constructor(elementRef, i18n) { super(); this.elementRef = elementRef; this.i18n = i18n; this.buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW; this.description = this.i18n.get().OVERFLOW_MENU.ICON_DESCRIPTION; this.flip = false; this.placement = "bottom"; this.open = false; this.openChange = new EventEmitter(); this.wrapperClass = ""; /** * This appends additional classes to the overflow trigger/button. */ this.triggerClass = ""; } handleOpenChange(event) { this.open = event; this.openChange.emit(event); } } OverflowMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverflowMenu, deps: [{ token: i0.ElementRef }, { token: i1.I18n }], target: i0.ɵɵFactoryTarget.Component }); OverflowMenu.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OverflowMenu, selector: "cds-overflow-menu, ibm-overflow-menu", inputs: { buttonLabel: "buttonLabel", description: "description", flip: "flip", placement: "placement", open: "open", customTrigger: "customTrigger", offset: "offset", wrapperClass: "wrapperClass", triggerClass: "triggerClass" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "overflowMenuDirective", first: true, predicate: OverflowMenuDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ` <cds-tooltip class="cds--icon-tooltip" [description]="description" [caret]="caret" [dropShadow]="dropShadow" [highContrast]="highContrast" [isOpen]="isOpen" [align]="align" [autoAlign]="autoAlign" [enterDelayMs]="enterDelayMs" [leaveDelayMs]="leaveDelayMs"> <button cdsButton="ghost" [cdsOverflowMenu]="options" [ngClass]="{'cds--overflow-menu--open': open}" class="cds--overflow-menu {{triggerClass}}" [iconOnly]="true" [attr.aria-label]="buttonLabel" [flip]="flip" [isOpen]="open" (isOpenChange)="handleOpenChange($event)" [offset]="offset" [wrapperClass]="wrapperClass" aria-haspopup="true" type="button" [placement]="placement"> <ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template> </button> </cds-tooltip> <ng-template #options> <ng-content></ng-content> </ng-template> <ng-template #defaultIcon> <svg cdsIcon="overflow-menu--vertical" size="16" class="cds--overflow-menu__icon"></svg> </ng-template> `, isInline: true, styles: [".cds--overflow-menu--open{opacity:1}.cds--data-table-v2 .cds--overflow-menu{transform:rotate(90deg)}.cds--data-table-v2 .cds--overflow-menu__icon{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "directive", type: i4.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i5.Tooltip, selector: "cds-tooltip, ibm-tooltip", inputs: ["id", "enterDelayMs", "leaveDelayMs", "disabled", "description", "templateContext"] }, { kind: "directive", type: i6.OverflowMenuDirective, selector: "[cdsOverflowMenu], [ibmOverflowMenu]", inputs: ["ibmOverflowMenu", "cdsOverflowMenu", "flip", "offset", "wrapperClass", "customPane"], exportAs: ["overflowMenu"] }], encapsulation: i0.ViewEncapsulation.None }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverflowMenu, decorators: [{ type: Component, args: [{ selector: "cds-overflow-menu, ibm-overflow-menu", template: ` <cds-tooltip class="cds--icon-tooltip" [description]="description" [caret]="caret" [dropShadow]="dropShadow" [highContrast]="highContrast" [isOpen]="isOpen" [align]="align" [autoAlign]="autoAlign" [enterDelayMs]="enterDelayMs" [leaveDelayMs]="leaveDelayMs"> <button cdsButton="ghost" [cdsOverflowMenu]="options" [ngClass]="{'cds--overflow-menu--open': open}" class="cds--overflow-menu {{triggerClass}}" [iconOnly]="true" [attr.aria-label]="buttonLabel" [flip]="flip" [isOpen]="open" (isOpenChange)="handleOpenChange($event)" [offset]="offset" [wrapperClass]="wrapperClass" aria-haspopup="true" type="button" [placement]="placement"> <ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template> </button> </cds-tooltip> <ng-template #options> <ng-content></ng-content> </ng-template> <ng-template #defaultIcon> <svg cdsIcon="overflow-menu--vertical" size="16" class="cds--overflow-menu__icon"></svg> </ng-template> `, encapsulation: ViewEncapsulation.None, styles: [".cds--overflow-menu--open{opacity:1}.cds--data-table-v2 .cds--overflow-menu{transform:rotate(90deg)}.cds--data-table-v2 .cds--overflow-menu__icon{transform:rotate(180deg)}\n"] }] }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.I18n }]; }, propDecorators: { buttonLabel: [{ type: Input }], description: [{ type: Input }], flip: [{ type: Input }], placement: [{ type: Input }], open: [{ type: Input }], openChange: [{ type: Output }], customTrigger: [{ type: Input }], offset: [{ type: Input }], wrapperClass: [{ type: Input }], triggerClass: [{ type: Input }], overflowMenuDirective: [{ type: ContentChild, args: [OverflowMenuDirective] }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmZsb3ctbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZGlhbG9nL292ZXJmbG93LW1lbnUvb3ZlcmZsb3ctbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBRVosWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBRU4saUJBQWlCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQzs7Ozs7Ozs7QUFFbEU7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBNERILE1BQU0sT0FBTyxZQUFhLFNBQVEsY0FBYztJQStCL0MsWUFBc0IsVUFBc0IsRUFBWSxJQUFVO1FBQ2pFLEtBQUssRUFBRSxDQUFDO1FBRGEsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUFZLFNBQUksR0FBSixJQUFJLENBQU07UUE5QnpELGdCQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDO1FBRXJELGdCQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUM7UUFFN0QsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUViLGNBQVMsR0FBbUQsUUFBUSxDQUFDO1FBRXJFLFNBQUksR0FBRyxLQUFLLENBQUM7UUFFWixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQVcxQyxpQkFBWSxHQUFHLEVBQUUsQ0FBQztRQUUzQjs7V0FFRztRQUNNLGlCQUFZLEdBQUcsRUFBRSxDQUFDO0lBTTNCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxLQUFjO1FBQzlCLElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO1FBQ2xCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzdCLENBQUM7O3lHQXRDVyxZQUFZOzZGQUFaLFlBQVksNFlBNkJWLHFCQUFxQix1RUF0RnpCOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBcUNUOzJGQW9CVyxZQUFZO2tCQTNEeEIsU0FBUzsrQkFDQyxzQ0FBc0MsWUFDdEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7RUFxQ1QsaUJBa0JjLGlCQUFpQixDQUFDLElBQUk7b0hBRzVCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBRUcsV0FBVztzQkFBbkIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsU0FBUztzQkFBakIsS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUksVUFBVTtzQkFBbkIsTUFBTTtnQkFJRSxhQUFhO3NCQUFyQixLQUFLO2dCQUtHLE1BQU07c0JBQWQsS0FBSztnQkFFRyxZQUFZO3NCQUFwQixLQUFLO2dCQUtHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRStCLHFCQUFxQjtzQkFBekQsWUFBWTt1QkFBQyxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuXHRDb21wb25lbnQsXG5cdENvbnRlbnRDaGlsZCxcblx0RWxlbWVudFJlZixcblx0RXZlbnRFbWl0dGVyLFxuXHRJbnB1dCxcblx0T3V0cHV0LFxuXHRUZW1wbGF0ZVJlZixcblx0Vmlld0VuY2Fwc3VsYXRpb25cbn0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcbmltcG9ydCB7IEkxOG4gfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9pMThuXCI7XG5pbXBvcnQgeyBPdmVyZmxvd01lbnVEaXJlY3RpdmUgfSBmcm9tIFwiLi9vdmVyZmxvdy1tZW51LmRpcmVjdGl2ZVwiO1xuaW1wb3J0IHsgQmFzZUljb25CdXR0b24gfSBmcm9tIFwiY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhci9idXR0b25cIjtcblxuLyoqXG4gKiBUaGUgT3ZlckZsb3cgbWVudSBjb21wb25lbnQgZW5jYXBzdWxhdGVzIHRoZSBPdmVyRmxvd01lbnUgZGlyZWN0aXZlLCBhbmQgdGhlIG1lbnUgaWNvbm9ncmFwaHkgaW50byBvbmUgY29udmllbmVudCBjb21wb25lbnQuXG4gKlxuICogR2V0IHN0YXJ0ZWQgd2l0aCBpbXBvcnRpbmcgdGhlIG1vZHVsZTpcbiAqXG4gKiBgYGB0eXBlc2NyaXB0XG4gKiBpbXBvcnQgeyBEaWFsb2dNb2R1bGUgfSBmcm9tICdjYXJib24tY29tcG9uZW50cy1hbmd1bGFyJztcbiAqIGBgYFxuICpcbiAqIGBgYGh0bWxcbiAqIDxjZHMtb3ZlcmZsb3ctbWVudT5cbiAqXHQ8Y2RzLW92ZXJmbG93LW1lbnUtb3B0aW9uPk9wdGlvbiAxPC9jZHMtb3ZlcmZsb3ctbWVudS1vcHRpb24+XG4gKlx0PGNkcy1vdmVyZmxvdy1tZW51LW9wdGlvbj5PcHRpb24gMjwvY2RzLW92ZXJmbG93LW1lbnUtb3B0aW9uPlxuICogPC9jZHMtb3ZlcmZsb3ctbWVudT5cbiAqIGBgYFxuICpcbiAqIFtTZWUgZGVtb10oLi4vLi4vP3BhdGg9L3N0b3J5L2NvbXBvbmVudHMtb3ZlcmZsb3ctbWVudS0tYmFzaWMpXG4gKi9cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogXCJjZHMtb3ZlcmZsb3ctbWVudSwgaWJtLW92ZXJmbG93LW1lbnVcIixcblx0dGVtcGxhdGU6IGBcblx0XHQ8Y2RzLXRvb2x0aXBcblx0XHRcdGNsYXNzPVwiY2RzLS1pY29uLXRvb2x0aXBcIlxuXHRcdFx0W2Rlc2NyaXB0aW9uXT1cImRlc2NyaXB0aW9uXCJcblx0XHRcdFtjYXJldF09XCJjYXJldFwiXG5cdFx0XHRbZHJvcFNoYWRvd109XCJkcm9wU2hhZG93XCJcblx0XHRcdFtoaWdoQ29udHJhc3RdPVwiaGlnaENvbnRyYXN0XCJcblx0XHRcdFtpc09wZW5dPVwiaXNPcGVuXCJcblx0XHRcdFthbGlnbl09XCJhbGlnblwiXG5cdFx0XHRbYXV0b0FsaWduXT1cImF1dG9BbGlnblwiXG5cdFx0XHRbZW50ZXJEZWxheU1zXT1cImVudGVyRGVsYXlNc1wiXG5cdFx0XHRbbGVhdmVEZWxheU1zXT1cImxlYXZlRGVsYXlNc1wiPlxuXHRcdFx0PGJ1dHRvblxuXHRcdFx0XHRjZHNCdXR0b249XCJnaG9zdFwiXG5cdFx0XHRcdFtjZHNPdmVyZmxvd01lbnVdPVwib3B0aW9uc1wiXG5cdFx0XHRcdFtuZ0NsYXNzXT1cInsnY2RzLS1vdmVyZmxvdy1tZW51LS1vcGVuJzogb3Blbn1cIlxuXHRcdFx0XHRjbGFzcz1cImNkcy0tb3ZlcmZsb3ctbWVudSB7e3RyaWdnZXJDbGFzc319XCJcblx0XHRcdFx0W2ljb25Pbmx5XT1cInRydWVcIlxuXHRcdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cImJ1dHRvbkxhYmVsXCJcblx0XHRcdFx0W2ZsaXBdPVwiZmxpcFwiXG5cdFx0XHRcdFtpc09wZW5dPVwib3BlblwiXG5cdFx0XHRcdChpc09wZW5DaGFuZ2UpPVwiaGFuZGxlT3BlbkNoYW5nZSgkZXZlbnQpXCJcblx0XHRcdFx0W29mZnNldF09XCJvZmZzZXRcIlxuXHRcdFx0XHRbd3JhcHBlckNsYXNzXT1cIndyYXBwZXJDbGFzc1wiXG5cdFx0XHRcdGFyaWEtaGFzcG9wdXA9XCJ0cnVlXCJcblx0XHRcdFx0dHlwZT1cImJ1dHRvblwiXG5cdFx0XHRcdFtwbGFjZW1lbnRdPVwicGxhY2VtZW50XCI+XG5cdFx0XHRcdDxuZy10ZW1wbGF0ZSAqbmdJZj1cImN1c3RvbVRyaWdnZXI7IGVsc2UgZGVmYXVsdEljb25cIiBbbmdUZW1wbGF0ZU91dGxldF09XCJjdXN0b21UcmlnZ2VyXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHRcdDwvYnV0dG9uPlxuXHRcdDwvY2RzLXRvb2x0aXA+XG5cblx0XHQ8bmctdGVtcGxhdGUgI29wdGlvbnM+XG5cdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHQ8bmctdGVtcGxhdGUgI2RlZmF1bHRJY29uPlxuXHRcdFx0PHN2ZyBjZHNJY29uPVwib3ZlcmZsb3ctbWVudS0tdmVydGljYWxcIiBzaXplPVwiMTZcIiBjbGFzcz1cImNkcy0tb3ZlcmZsb3ctbWVudV9faWNvblwiPjwvc3ZnPlxuXHRcdDwvbmctdGVtcGxhdGU+XG5cdGAsXG5cdHN0eWxlczogW2Bcblx0XHQuY2RzLS1vdmVyZmxvdy1tZW51LS1vcGVuIHtcblx0XHRcdG9wYWNpdHk6IDFcblx0XHR9XG5cblx0XHQvKlxuXHRcdFJvdGF0ZSB0aGUgb3ZlcmZsb3cgbWVudSBjb250YWluZXIgYXMgd2VsbCBhcyB0aGUgaWNvbiwgc2luY2Vcblx0XHR3ZSBjYWxjdWxhdGUgb3VyIG1lbnUgcG9zaXRpb24gYmFzZWQgb24gdGhlIGNvbnRhaW5lciwgbm90IHRoZSBpY29uLlxuXHRcdCovXG5cdFx0LmNkcy0tZGF0YS10YWJsZS12MiAuY2RzLS1vdmVyZmxvdy1tZW51IHtcblx0XHRcdHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTtcblx0XHR9XG5cblx0XHQuY2RzLS1kYXRhLXRhYmxlLXYyIC5jZHMtLW92ZXJmbG93LW1lbnVfX2ljb24ge1xuXHRcdFx0dHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcblx0XHR9XG5cdGBdLFxuXHRlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIE92ZXJmbG93TWVudSBleHRlbmRzIEJhc2VJY29uQnV0dG9uIHtcblx0QElucHV0KCkgYnV0dG9uTGFiZWwgPSB0aGlzLmkxOG4uZ2V0KCkuT1ZFUkZMT1dfTUVOVS5PVkVSRkxPVztcblxuXHRASW5wdXQoKSBkZXNjcmlwdGlvbiA9IHRoaXMuaTE4bi5nZXQoKS5PVkVSRkxPV19NRU5VLklDT05fREVTQ1JJUFRJT047XG5cblx0QElucHV0KCkgZmxpcCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpIHBsYWNlbWVudDogXCJib3R0b21cIiB8IFwidG9wXCIgfCBcImJvdHRvbSx0b3BcIiB8IFwidG9wLGJvdHRvbVwiID0gXCJib3R0b21cIjtcblxuXHRASW5wdXQoKSBvcGVuID0gZmFsc2U7XG5cblx0QE91dHB1dCgpIG9wZW5DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cdC8qKlxuXHQgKiBTZXRzIHRoZSBjdXN0b20gb3ZlcmZsb3cgbWVudSB0cmlnZ2VyXG5cdCAqL1xuXHRASW5wdXQoKSBjdXN0b21UcmlnZ2VyOiBUZW1wbGF0ZVJlZjxhbnk+O1xuXG5cdC8qKlxuXHQgKiBUaGlzIHNwZWNpZmllcyBhbnkgdmVydGljYWwgYW5kIGhvcml6b250YWwgb2Zmc2V0IGZvciB0aGUgcG9zaXRpb24gb2YgdGhlIGRpYWxvZ1xuXHQgKi9cblx0QElucHV0KCkgb2Zmc2V0OiB7IHg6IG51bWJlciwgeTogbnVtYmVyIH07XG5cblx0QElucHV0KCkgd3JhcHBlckNsYXNzID0gXCJcIjtcblxuXHQvKipcblx0ICogVGhpcyBhcHBlbmRzIGFkZGl0aW9uYWwgY2xhc3NlcyB0byB0aGUgb3ZlcmZsb3cgdHJpZ2dlci9idXR0b24uXG5cdCAqL1xuXHRASW5wdXQoKSB0cmlnZ2VyQ2xhc3MgPSBcIlwiO1xuXG5cdEBDb250ZW50Q2hpbGQoT3ZlcmZsb3dNZW51RGlyZWN0aXZlKSBvdmVyZmxvd01lbnVEaXJlY3RpdmU6IE92ZXJmbG93TWVudURpcmVjdGl2ZTtcblxuXHRjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZWxlbWVudFJlZjogRWxlbWVudFJlZiwgcHJvdGVjdGVkIGkxOG46IEkxOG4pIHtcblx0XHRzdXBlcigpO1xuXHR9XG5cblx0aGFuZGxlT3BlbkNoYW5nZShldmVudDogYm9vbGVhbikge1xuXHRcdHRoaXMub3BlbiA9IGV2ZW50O1xuXHRcdHRoaXMub3BlbkNoYW5nZS5lbWl0KGV2ZW50KTtcblx0fVxufVxuIl19