carbon-components-angular
Version:
Next generation components
119 lines • 12 kB
JavaScript
import { Component, ContentChild, EventEmitter, Input, Output, ViewEncapsulation } from "@angular/core";
import { OverflowMenuDirective } from "./overflow-menu.directive";
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 "./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 {
constructor(elementRef, i18n) {
this.elementRef = elementRef;
this.i18n = i18n;
this.buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;
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", 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 }], ngImport: i0, template: `
<button
[]="options"
[]="{'cds--overflow-menu--open': open}"
class="cds--overflow-menu {{triggerClass}}"
[]="buttonLabel"
[]="flip"
[]="open"
(isOpenChange)="handleOpenChange($event)"
[]="offset"
[]="wrapperClass"
aria-haspopup="true"
class="cds--overflow-menu"
type="button"
[]="placement">
<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
</button>
<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.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: `
<button
[]="options"
[]="{'cds--overflow-menu--open': open}"
class="cds--overflow-menu {{triggerClass}}"
[]="buttonLabel"
[]="flip"
[]="open"
(isOpenChange)="handleOpenChange($event)"
[]="offset"
[]="wrapperClass"
aria-haspopup="true"
class="cds--overflow-menu"
type="button"
[]="placement">
<ng-template *ngIf="customTrigger; else defaultIcon" [ngTemplateOutlet]="customTrigger"></ng-template>
</button>
<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
}], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3ZlcmZsb3ctbWVudS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvZGlhbG9nL292ZXJmbG93LW1lbnUvb3ZlcmZsb3ctbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNOLFNBQVMsRUFDVCxZQUFZLEVBRVosWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBRU4saUJBQWlCLEVBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDOzs7Ozs7QUFFbEU7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUJHO0FBOENILE1BQU0sT0FBTyxZQUFZO0lBNkJ4QixZQUFzQixVQUFzQixFQUFZLElBQVU7UUFBNUMsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUFZLFNBQUksR0FBSixJQUFJLENBQU07UUE1QnpELGdCQUFXLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDO1FBRXJELFNBQUksR0FBRyxLQUFLLENBQUM7UUFFYixjQUFTLEdBQXFCLFFBQVEsQ0FBQztRQUV2QyxTQUFJLEdBQUcsS0FBSyxDQUFDO1FBRVosZUFBVSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFXMUMsaUJBQVksR0FBRyxFQUFFLENBQUM7UUFFM0I7O1dBRUc7UUFDTSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztJQUkwQyxDQUFDO0lBRXRFLGdCQUFnQixDQUFDLEtBQWM7UUFDOUIsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7UUFDbEIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7eUdBbENXLFlBQVk7NkZBQVosWUFBWSxnWEEyQlYscUJBQXFCLGdEQXRFekI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBdUJUOzJGQW9CVyxZQUFZO2tCQTdDeEIsU0FBUzsrQkFDQyxzQ0FBc0MsWUFDdEM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0VBdUJULGlCQWtCYyxpQkFBaUIsQ0FBQyxJQUFJO29IQUc1QixXQUFXO3NCQUFuQixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNO2dCQUlFLGFBQWE7c0JBQXJCLEtBQUs7Z0JBS0csTUFBTTtzQkFBZCxLQUFLO2dCQUVHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBS0csWUFBWTtzQkFBcEIsS0FBSztnQkFFK0IscUJBQXFCO3NCQUF6RCxZQUFZO3VCQUFDLHFCQUFxQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0Q29udGVudENoaWxkLFxuXHRFbGVtZW50UmVmLFxuXHRFdmVudEVtaXR0ZXIsXG5cdElucHV0LFxuXHRPdXRwdXQsXG5cdFRlbXBsYXRlUmVmLFxuXHRWaWV3RW5jYXBzdWxhdGlvblxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgSTE4biB9IGZyb20gXCJjYXJib24tY29tcG9uZW50cy1hbmd1bGFyL2kxOG5cIjtcbmltcG9ydCB7IE92ZXJmbG93TWVudURpcmVjdGl2ZSB9IGZyb20gXCIuL292ZXJmbG93LW1lbnUuZGlyZWN0aXZlXCI7XG5cbi8qKlxuICogVGhlIE92ZXJGbG93IG1lbnUgY29tcG9uZW50IGVuY2Fwc3VsYXRlcyB0aGUgT3ZlckZsb3dNZW51IGRpcmVjdGl2ZSwgYW5kIHRoZSBtZW51IGljb25vZ3JhcGh5IGludG8gb25lIGNvbnZpZW5lbnQgY29tcG9uZW50LlxuICpcbiAqIEdldCBzdGFydGVkIHdpdGggaW1wb3J0aW5nIHRoZSBtb2R1bGU6XG4gKlxuICogYGBgdHlwZXNjcmlwdFxuICogaW1wb3J0IHsgRGlhbG9nTW9kdWxlIH0gZnJvbSAnY2FyYm9uLWNvbXBvbmVudHMtYW5ndWxhcic7XG4gKiBgYGBcbiAqXG4gKiBgYGBodG1sXG4gKiA8Y2RzLW92ZXJmbG93LW1lbnU+XG4gKlx0PGNkcy1vdmVyZmxvdy1tZW51LW9wdGlvbj5PcHRpb24gMTwvY2RzLW92ZXJmbG93LW1lbnUtb3B0aW9uPlxuICpcdDxjZHMtb3ZlcmZsb3ctbWVudS1vcHRpb24+T3B0aW9uIDI8L2Nkcy1vdmVyZmxvdy1tZW51LW9wdGlvbj5cbiAqIDwvY2RzLW92ZXJmbG93LW1lbnU+XG4gKiBgYGBcbiAqXG4gKiBbU2VlIGRlbW9dKC4uLy4uLz9wYXRoPS9zdG9yeS9jb21wb25lbnRzLW92ZXJmbG93LW1lbnUtLWJhc2ljKVxuICovXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6IFwiY2RzLW92ZXJmbG93LW1lbnUsIGlibS1vdmVyZmxvdy1tZW51XCIsXG5cdHRlbXBsYXRlOiBgXG5cdFx0PGJ1dHRvblxuXHRcdFx0W2Nkc092ZXJmbG93TWVudV09XCJvcHRpb25zXCJcblx0XHRcdFtuZ0NsYXNzXT1cInsnY2RzLS1vdmVyZmxvdy1tZW51LS1vcGVuJzogb3Blbn1cIlxuXHRcdFx0Y2xhc3M9XCJjZHMtLW92ZXJmbG93LW1lbnUge3t0cmlnZ2VyQ2xhc3N9fVwiXG5cdFx0XHRbYXR0ci5hcmlhLWxhYmVsXT1cImJ1dHRvbkxhYmVsXCJcblx0XHRcdFtmbGlwXT1cImZsaXBcIlxuXHRcdFx0W2lzT3Blbl09XCJvcGVuXCJcblx0XHRcdChpc09wZW5DaGFuZ2UpPVwiaGFuZGxlT3BlbkNoYW5nZSgkZXZlbnQpXCJcblx0XHRcdFtvZmZzZXRdPVwib2Zmc2V0XCJcblx0XHRcdFt3cmFwcGVyQ2xhc3NdPVwid3JhcHBlckNsYXNzXCJcblx0XHRcdGFyaWEtaGFzcG9wdXA9XCJ0cnVlXCJcblx0XHRcdGNsYXNzPVwiY2RzLS1vdmVyZmxvdy1tZW51XCJcblx0XHRcdHR5cGU9XCJidXR0b25cIlxuXHRcdFx0W3BsYWNlbWVudF09XCJwbGFjZW1lbnRcIj5cblx0XHRcdDxuZy10ZW1wbGF0ZSAqbmdJZj1cImN1c3RvbVRyaWdnZXI7IGVsc2UgZGVmYXVsdEljb25cIiBbbmdUZW1wbGF0ZU91dGxldF09XCJjdXN0b21UcmlnZ2VyXCI+PC9uZy10ZW1wbGF0ZT5cblx0XHQ8L2J1dHRvbj5cblx0XHQ8bmctdGVtcGxhdGUgI29wdGlvbnM+XG5cdFx0XHQ8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG5cdFx0PC9uZy10ZW1wbGF0ZT5cblx0XHQ8bmctdGVtcGxhdGUgI2RlZmF1bHRJY29uPlxuXHRcdFx0PHN2ZyBjZHNJY29uPVwib3ZlcmZsb3ctbWVudS0tdmVydGljYWxcIiBzaXplPVwiMTZcIiBjbGFzcz1cImNkcy0tb3ZlcmZsb3ctbWVudV9faWNvblwiPjwvc3ZnPlxuXHRcdDwvbmctdGVtcGxhdGU+XG5cdGAsXG5cdHN0eWxlczogW2Bcblx0XHQuY2RzLS1vdmVyZmxvdy1tZW51LS1vcGVuIHtcblx0XHRcdG9wYWNpdHk6IDFcblx0XHR9XG5cblx0XHQvKlxuXHRcdFJvdGF0ZSB0aGUgb3ZlcmZsb3cgbWVudSBjb250YWluZXIgYXMgd2VsbCBhcyB0aGUgaWNvbiwgc2luY2Vcblx0XHR3ZSBjYWxjdWxhdGUgb3VyIG1lbnUgcG9zaXRpb24gYmFzZWQgb24gdGhlIGNvbnRhaW5lciwgbm90IHRoZSBpY29uLlxuXHRcdCovXG5cdFx0LmNkcy0tZGF0YS10YWJsZS12MiAuY2RzLS1vdmVyZmxvdy1tZW51IHtcblx0XHRcdHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTtcblx0XHR9XG5cblx0XHQuY2RzLS1kYXRhLXRhYmxlLXYyIC5jZHMtLW92ZXJmbG93LW1lbnVfX2ljb24ge1xuXHRcdFx0dHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTtcblx0XHR9XG5cdGBdLFxuXHRlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXG59KVxuZXhwb3J0IGNsYXNzIE92ZXJmbG93TWVudSB7XG5cdEBJbnB1dCgpIGJ1dHRvbkxhYmVsID0gdGhpcy5pMThuLmdldCgpLk9WRVJGTE9XX01FTlUuT1ZFUkZMT1c7XG5cblx0QElucHV0KCkgZmxpcCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpIHBsYWNlbWVudDogXCJib3R0b21cIiB8IFwidG9wXCIgPSBcImJvdHRvbVwiO1xuXG5cdEBJbnB1dCgpIG9wZW4gPSBmYWxzZTtcblxuXHRAT3V0cHV0KCkgb3BlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblx0LyoqXG5cdCAqIFNldHMgdGhlIGN1c3RvbSBvdmVyZmxvdyBtZW51IHRyaWdnZXJcblx0ICovXG5cdEBJbnB1dCgpIGN1c3RvbVRyaWdnZXI6IFRlbXBsYXRlUmVmPGFueT47XG5cblx0LyoqXG5cdCAqIFRoaXMgc3BlY2lmaWVzIGFueSB2ZXJ0aWNhbCBhbmQgaG9yaXpvbnRhbCBvZmZzZXQgZm9yIHRoZSBwb3NpdGlvbiBvZiB0aGUgZGlhbG9nXG5cdCAqL1xuXHRASW5wdXQoKSBvZmZzZXQ6IHsgeDogbnVtYmVyLCB5OiBudW1iZXIgfTtcblxuXHRASW5wdXQoKSB3cmFwcGVyQ2xhc3MgPSBcIlwiO1xuXG5cdC8qKlxuXHQgKiBUaGlzIGFwcGVuZHMgYWRkaXRpb25hbCBjbGFzc2VzIHRvIHRoZSBvdmVyZmxvdyB0cmlnZ2VyL2J1dHRvbi5cblx0ICovXG5cdEBJbnB1dCgpIHRyaWdnZXJDbGFzcyA9IFwiXCI7XG5cblx0QENvbnRlbnRDaGlsZChPdmVyZmxvd01lbnVEaXJlY3RpdmUpIG92ZXJmbG93TWVudURpcmVjdGl2ZTogT3ZlcmZsb3dNZW51RGlyZWN0aXZlO1xuXG5cdGNvbnN0cnVjdG9yKHByb3RlY3RlZCBlbGVtZW50UmVmOiBFbGVtZW50UmVmLCBwcm90ZWN0ZWQgaTE4bjogSTE4bikge31cblxuXHRoYW5kbGVPcGVuQ2hhbmdlKGV2ZW50OiBib29sZWFuKSB7XG5cdFx0dGhpcy5vcGVuID0gZXZlbnQ7XG5cdFx0dGhpcy5vcGVuQ2hhbmdlLmVtaXQoZXZlbnQpO1xuXHR9XG59XG4iXX0=