carbon-components-angular
Version:
Next generation components
154 lines (152 loc) • 14.6 kB
JavaScript
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"
[]="caret"
[]="dropShadow"
[]="highContrast"
[]="isOpen"
[]="align"
[]="autoAlign"
[]="enterDelayMs"
[]="leaveDelayMs">
<button
cdsButton="ghost"
[]="options"
[]="{'cds--overflow-menu--open': open}"
class="cds--overflow-menu {{triggerClass}}"
[]="true"
[]="buttonLabel"
[]="flip"
[]="open"
(isOpenChange)="handleOpenChange($event)"
[]="offset"
[]="wrapperClass"
aria-haspopup="true"
type="button"
[]="placement">
<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
</button>
</cds-tooltip>
<ng-template
<ng-content></ng-content>
</ng-template>
<ng-template
<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"
[]="caret"
[]="dropShadow"
[]="highContrast"
[]="isOpen"
[]="align"
[]="autoAlign"
[]="enterDelayMs"
[]="leaveDelayMs">
<button
cdsButton="ghost"
[]="options"
[]="{'cds--overflow-menu--open': open}"
class="cds--overflow-menu {{triggerClass}}"
[]="true"
[]="buttonLabel"
[]="flip"
[]="open"
(isOpenChange)="handleOpenChange($event)"
[]="offset"
[]="wrapperClass"
aria-haspopup="true"
type="button"
[]="placement">
<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
</button>
</cds-tooltip>
<ng-template
<ng-content></ng-content>
</ng-template>
<ng-template
<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