carbon-components-angular 5.56.5 → 5.57.0

package/fesm2020/carbon-components-angular-combo-button.mjs

@@ -0,0 +1,337 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, ContentChildren, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
+import { autoUpdate, computePosition, flip } from '@floating-ui/dom';
+import * as i3 from 'carbon-components-angular/context-menu';
+import { ContextMenuItemComponent, ContextMenuModule } from 'carbon-components-angular/context-menu';
+import * as i1 from 'carbon-components-angular/button';
+import { ButtonModule } from 'carbon-components-angular/button';
+import * as i2 from 'carbon-components-angular/icon';
+import { IconModule } from 'carbon-components-angular/icon';
+import { CommonModule } from '@angular/common';
+
+class ComboButtonComponent {
+    constructor(ngZone, renderer, hostElement, viewContainerRef, changeDetectorRef) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.viewContainerRef = viewContainerRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.comboId = `combo-button-${ComboButtonComponent.comboButtonCounter++}`;
+        this.size = "lg";
+        this.disabled = false;
+        this.menuAlignment = "bottom";
+        this.tooltipAutoAlign = false;
+        this.tooltipPlacement = "bottom";
+        this.open = false;
+        this.actionClick = new EventEmitter();
+        this.comboButtonContainer = true;
+        this.documentClick = this.handleFocusOut.bind(this);
+        this.subscriptions = [];
+        this._alignment = "bottom";
+    }
+    // Listen for click & determine if menu should close
+    set projectedMenuItems(itemList) {
+        // Reset in case user dynamically updates menu item
+        this.subscriptions.forEach((sub) => sub?.unsubscribe());
+        this.subscriptions = [];
+        itemList.forEach((item) => {
+            this.subscriptions.push(item.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent)));
+        });
+    }
+    get sizeLg() { return this.size === "lg"; }
+    get sizeMd() { return this.size === "md"; }
+    get sizeSm() { return this.size === "sm"; }
+    get ariaOwns() {
+        return this.open ? this.comboId : undefined;
+    }
+    /**
+     * In case user updates alignment, store initial value.
+     * This allows us to test user passed alignment on each open
+     */
+    ngOnChanges(changes) {
+        if (changes.menuAlignment) {
+            this._alignment = changes.menuAlignment.currentValue;
+        }
+    }
+    /**
+     * If user has passed in true for open, we dynamically open the menu
+     */
+    ngAfterViewInit() {
+        if (this.open) {
+            this.open = !this.open;
+            this.toggleMenu();
+        }
+    }
+    /**
+    * Clean up Floating-ui & subscriptions
+    */
+    ngOnDestroy() {
+        this.cleanUp();
+        this.subscriptions.forEach((sub) => sub.unsubscribe());
+    }
+    /**
+     * As of now, menu button does not support nexted menu, on button click it should close
+     */
+    handleMenuItemClick(event) {
+        // If event is not type radio/checkbox, we close the menu
+        if (!event.type) {
+            this.toggleMenu();
+        }
+    }
+    /**
+     * On body click, close the menu
+     * @param event
+     */
+    handleFocusOut(event) {
+        if (!this.hostElement.nativeElement.contains(event.target)) {
+            this.toggleMenu();
+        }
+    }
+    /**
+     * Clean up `autoUpdate` if auto alignment is enabled
+     */
+    cleanUp() {
+        document.removeEventListener("click", this.documentClick);
+        if (this.unmountFloatingElement) {
+            this.menuRef.remove();
+            this.viewContainerRef.clear();
+            this.unmountFloatingElement();
+        }
+        this.unmountFloatingElement = undefined;
+        // On all instances of menu closing, make sure icon direction is correct
+        this.changeDetectorRef.markForCheck();
+    }
+    /**
+     * On action click, notify user
+     * If the menu is open, close the menu
+     * @param event
+     */
+    onActionClick(event) {
+        if (this.open) {
+            this.toggleMenu();
+        }
+        this.actionClick.emit(event);
+    }
+    /**
+     * Handles emitting open/close event
+     */
+    toggleMenu() {
+        this.open = !this.open;
+        if (this.open) {
+            // Render the template & append to view
+            const view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);
+            this.menuRef = document.body.appendChild(view.rootNodes[0]);
+            // Assign button width to the menu ref to align with button
+            Object.assign(this.menuRef.style, {
+                width: `${this.hostElement.nativeElement.clientWidth}px`,
+                top: "0",
+                left: "0"
+            });
+            // Reset & test alignment every open
+            this.menuAlignment = this._alignment;
+            document.addEventListener("click", this.documentClick);
+            // Listen for events such as scrolling to keep menu aligned
+            this.unmountFloatingElement = autoUpdate(this.hostElement.nativeElement, this.menuRef, this.recomputePosition.bind(this));
+        }
+        else {
+            this.cleanUp();
+        }
+    }
+    roundByDPR(value) {
+        const dpr = window.devicePixelRatio || 1;
+        return Math.round(value * dpr) / dpr;
+    }
+    /**
+     * Compute position of menu
+     */
+    recomputePosition() {
+        if (this.menuTemplate && this.hostElement) {
+            // Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui
+            this.ngZone.runOutsideAngular(async () => {
+                const { x, y, placement } = await computePosition(this.hostElement.nativeElement, this.menuRef, {
+                    placement: this.menuAlignment,
+                    strategy: "fixed",
+                    middleware: [
+                        flip({ crossAxis: false })
+                    ]
+                });
+                this.menuAlignment = placement;
+                // Using CSSOM to manipulate CSS to avoid content security policy inline-src
+                // https://github.com/w3c/webappsec-csp/issues/212
+                Object.assign(this.menuRef.style, {
+                    position: "fixed",
+                    // Using transform instead of top/left position to improve performance
+                    transform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`
+                });
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+    }
+}
+ComboButtonComponent.comboButtonCounter = 0;
+ComboButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ComboButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ComboButtonComponent, selector: "cds-combo-button", inputs: { comboId: "comboId", size: "size", label: "label", disabled: "disabled", menuAlignment: "menuAlignment", description: "description", tooltipAutoAlign: "tooltipAutoAlign", tooltipPlacement: "tooltipPlacement", open: "open" }, outputs: { actionClick: "actionClick" }, host: { properties: { "class.cds--combo-button__container--open": "this.open", "class.cds--combo-button__container": "this.comboButtonContainer", "class.cds--combo-button__container--lg": "this.sizeLg", "class.cds--combo-button__container--md": "this.sizeMd", "class.cds--combo-button__container--sm": "this.sizeSm", "attr.aria-owns": "this.ariaOwns" } }, queries: [{ propertyName: "projectedMenuItems", predicate: ContextMenuItemComponent }], viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+		<div class="cds--combo-button__primary-action" [attr.aria-owns]="open ? comboId : undefined">
+			<button
+				cdsButton="primary"
+				[size]="size"
+				[attr.title]="label"
+				[disabled]="disabled"
+				type="button"
+				(click)="onActionClick($event)">
+				{{label}}
+			</button>
+		</div>
+		<cds-icon-button
+			[buttonNgClass]="{ 'cds--combo-button__trigger': true }"
+			[buttonAttributes]="{
+				'aria-haspopup': true,
+				'aria-expanded': open,
+				'aria-controls': open ? comboId : undefined
+			}"
+			[size]="size"
+			[description]="description"
+			[disabled]="disabled"
+			[autoAlign]="tooltipAutoAlign"
+			[align]="tooltipPlacement"
+			(click)="toggleMenu()">
+			<svg
+				cdsIcon="chevron--down"
+				size="16">
+			</svg>
+		</cds-icon-button>
+
+		<ng-template #menuTemplate>
+			<cds-menu
+				mode="basic"
+				[size]="size"
+				[open]="open"
+				[attr.id]="comboId">
+				<ng-content select="cds-menu-item, cds-menu-divider"></ng-content>
+			</cds-menu>
+		</ng-template>
+	`, isInline: true, dependencies: [{ kind: "directive", type: i1.Button, selector: "[cdsButton], [ibmButton]", inputs: ["ibmButton", "cdsButton", "size", "skeleton", "iconOnly", "isExpressive"] }, { kind: "component", type: i1.IconButton, selector: "cds-icon-button, ibm-icon-button", inputs: ["buttonNgClass", "buttonAttributes", "buttonId", "kind", "size", "type", "isExpressive", "disabled", "description", "showTooltipWhenDisabled"], outputs: ["click", "focus", "blur", "tooltipClick"] }, { kind: "directive", type: i2.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }, { kind: "component", type: i3.ContextMenuComponent, selector: "cds-menu, cds-context-menu, ibm-context-menu", inputs: ["open", "position", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "cds-combo-button",
+                    template: `
+		<div class="cds--combo-button__primary-action" [attr.aria-owns]="open ? comboId : undefined">
+			<button
+				cdsButton="primary"
+				[size]="size"
+				[attr.title]="label"
+				[disabled]="disabled"
+				type="button"
+				(click)="onActionClick($event)">
+				{{label}}
+			</button>
+		</div>
+		<cds-icon-button
+			[buttonNgClass]="{ 'cds--combo-button__trigger': true }"
+			[buttonAttributes]="{
+				'aria-haspopup': true,
+				'aria-expanded': open,
+				'aria-controls': open ? comboId : undefined
+			}"
+			[size]="size"
+			[description]="description"
+			[disabled]="disabled"
+			[autoAlign]="tooltipAutoAlign"
+			[align]="tooltipPlacement"
+			(click)="toggleMenu()">
+			<svg
+				cdsIcon="chevron--down"
+				size="16">
+			</svg>
+		</cds-icon-button>
+
+		<ng-template #menuTemplate>
+			<cds-menu
+				mode="basic"
+				[size]="size"
+				[open]="open"
+				[attr.id]="comboId">
+				<ng-content select="cds-menu-item, cds-menu-divider"></ng-content>
+			</cds-menu>
+		</ng-template>
+	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { comboId: [{
+                type: Input
+            }], projectedMenuItems: [{
+                type: ContentChildren,
+                args: [ContextMenuItemComponent]
+            }], size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], menuAlignment: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], tooltipAutoAlign: [{
+                type: Input
+            }], tooltipPlacement: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ["class.cds--combo-button__container--open"]
+            }], actionClick: [{
+                type: Output
+            }], comboButtonContainer: [{
+                type: HostBinding,
+                args: ["class.cds--combo-button__container"]
+            }], sizeLg: [{
+                type: HostBinding,
+                args: ["class.cds--combo-button__container--lg"]
+            }], sizeMd: [{
+                type: HostBinding,
+                args: ["class.cds--combo-button__container--md"]
+            }], sizeSm: [{
+                type: HostBinding,
+                args: ["class.cds--combo-button__container--sm"]
+            }], ariaOwns: [{
+                type: HostBinding,
+                args: ["attr.aria-owns"]
+            }], menuTemplate: [{
+                type: ViewChild,
+                args: ["menuTemplate"]
+            }] } });
+
+class ComboButtonModule {
+}
+ComboButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ComboButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonModule, declarations: [ComboButtonComponent], imports: [CommonModule,
+        ButtonModule,
+        IconModule,
+        ContextMenuModule], exports: [ComboButtonComponent] });
+ComboButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonModule, imports: [CommonModule,
+        ButtonModule,
+        IconModule,
+        ContextMenuModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComboButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ButtonModule,
+                        IconModule,
+                        ContextMenuModule
+                    ],
+                    exports: [ComboButtonComponent],
+                    declarations: [ComboButtonComponent]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComboButtonComponent, ComboButtonModule };
+//# sourceMappingURL=carbon-components-angular-combo-button.mjs.map

package/fesm2020/carbon-components-angular-combo-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carbon-components-angular-combo-button.mjs","sources":["../../src/combo-button/combo-button.component.ts","../../src/combo-button/combo-button.module.ts","../../src/combo-button/carbon-components-angular-combo-button.ts"],"sourcesContent":["import {\n\tAfterViewInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tContentChildren,\n\tElementRef,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tNgZone,\n\tOnChanges,\n\tOnDestroy,\n\tOutput,\n\tQueryList,\n\tRenderer2,\n\tSimpleChanges,\n\tTemplateRef,\n\tViewChild,\n\tViewContainerRef\n} from \"@angular/core\";\nimport { Subscription } from \"rxjs\";\nimport {\n\tautoUpdate,\n\tcomputePosition,\n\tflip\n} from \"@floating-ui/dom\";\nimport { ContextMenuItemComponent, ItemClickEvent } from \"carbon-components-angular/context-menu\";\n\ntype ComboButtonPlacement = \"top\" | \"top-start\" | \"top-end\" | \"bottom\" | \"bottom-start\" | \"bottom-end\";\n\n@Component({\n\tselector: \"cds-combo-button\",\n\ttemplate: `\n\t\t<div class=\"cds--combo-button__primary-action\" [attr.aria-owns]=\"open ? comboId : undefined\">\n\t\t\t<button\n\t\t\t\tcdsButton=\"primary\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[attr.title]=\"label\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t(click)=\"onActionClick($event)\">\n\t\t\t\t{{label}}\n\t\t\t</button>\n\t\t</div>\n\t\t<cds-icon-button\n\t\t\t[buttonNgClass]=\"{ 'cds--combo-button__trigger': true }\"\n\t\t\t[buttonAttributes]=\"{\n\t\t\t\t'aria-haspopup': true,\n\t\t\t\t'aria-expanded': open,\n\t\t\t\t'aria-controls': open ? comboId : undefined\n\t\t\t}\"\n\t\t\t[size]=\"size\"\n\t\t\t[description]=\"description\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[autoAlign]=\"tooltipAutoAlign\"\n\t\t\t[align]=\"tooltipPlacement\"\n\t\t\t(click)=\"toggleMenu()\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"chevron--down\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t</cds-icon-button>\n\n\t\t<ng-template #menuTemplate>\n\t\t\t<cds-menu\n\t\t\t\tmode=\"basic\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[open]=\"open\"\n\t\t\t\t[attr.id]=\"comboId\">\n\t\t\t\t<ng-content select=\"cds-menu-item, cds-menu-divider\"></ng-content>\n\t\t\t</cds-menu>\n\t\t</ng-template>\n\t`,\n\tchangeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ComboButtonComponent implements OnChanges, AfterViewInit, OnDestroy {\n\tstatic comboButtonCounter = 0;\n\t@Input() comboId = `combo-button-${ComboButtonComponent.comboButtonCounter++}`;\n\n\t// Listen for click & determine if menu should close\n\t@ContentChildren(ContextMenuItemComponent) set projectedMenuItems(itemList: QueryList<ContextMenuItemComponent>) {\n\t\t// Reset in case user dynamically updates menu item\n\t\tthis.subscriptions.forEach((sub) => sub?.unsubscribe());\n\t\tthis.subscriptions = [];\n\t\titemList.forEach((item) => {\n\t\t\tthis.subscriptions.push(\n\t\t\t\titem.itemClick.subscribe((clickEvent) => this.handleMenuItemClick(clickEvent))\n\t\t\t);\n\t\t});\n\t}\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\t@Input() label: string;\n\t@Input() disabled = false;\n\t@Input() menuAlignment: ComboButtonPlacement = \"bottom\";\n\t@Input() description: string;\n\t@Input() tooltipAutoAlign = false;\n\t@Input() tooltipPlacement = \"bottom\";\n\t@Input() @HostBinding(\"class.cds--combo-button__container--open\") open = false;\n\t@Output() actionClick = new EventEmitter<Event>();\n\t@HostBinding(\"class.cds--combo-button__container\") comboButtonContainer = true;\n\t@HostBinding(\"class.cds--combo-button__container--lg\") get sizeLg() { return this.size === \"lg\"; }\n\t@HostBinding(\"class.cds--combo-button__container--md\") get sizeMd() { return this.size === \"md\"; }\n\t@HostBinding(\"class.cds--combo-button__container--sm\") get sizeSm() { return this.size === \"sm\"; }\n\t@HostBinding(\"attr.aria-owns\") get ariaOwns() {\n\t\treturn this.open ? this.comboId : undefined;\n\t}\n\n\t@ViewChild(\"menuTemplate\") menuTemplate: TemplateRef<any>;\n\n\tprotected documentClick = this.handleFocusOut.bind(this);\n\tprotected unmountFloatingElement: Function;\n\n\tprivate subscriptions: Subscription[] = [];\n\tprivate _alignment: ComboButtonPlacement = \"bottom\";\n\tprivate menuRef: HTMLElement;\n\n\tconstructor(\n\t\tprotected ngZone: NgZone,\n\t\tprotected renderer: Renderer2,\n\t\tprotected hostElement: ElementRef,\n\t\tprotected viewContainerRef: ViewContainerRef,\n\t\tprotected changeDetectorRef: ChangeDetectorRef\n\t) { }\n\n\n\t/**\n\t * In case user updates alignment, store initial value.\n\t * This allows us to test user passed alignment on each open\n\t */\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes.menuAlignment) {\n\t\t\tthis._alignment = changes.menuAlignment.currentValue;\n\t\t}\n\t}\n\n\n\n\t/**\n\t * If user has passed in true for open, we dynamically open the menu\n\t */\n\tngAfterViewInit(): void {\n\t\tif (this.open) {\n\t\t\tthis.open = !this.open;\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t* Clean up Floating-ui & subscriptions\n\t*/\n\tngOnDestroy(): void {\n\t\tthis.cleanUp();\n\t\tthis.subscriptions.forEach((sub) => sub.unsubscribe());\n\t}\n\n\n\t/**\n\t * As of now, menu button does not support nexted menu, on button click it should close\n\t */\n\thandleMenuItemClick(event: ItemClickEvent) {\n\t\t// If event is not type radio/checkbox, we close the menu\n\t\tif (!event.type) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * On body click, close the menu\n\t * @param event\n\t */\n\thandleFocusOut(event) {\n\t\tif (!this.hostElement.nativeElement.contains(event.target)) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t}\n\n\n\n\t/**\n\t * Clean up `autoUpdate` if auto alignment is enabled\n\t */\n\tcleanUp() {\n\t\tdocument.removeEventListener(\"click\", this.documentClick);\n\t\tif (this.unmountFloatingElement) {\n\t\t\tthis.menuRef.remove();\n\t\t\tthis.viewContainerRef.clear();\n\t\t\tthis.unmountFloatingElement();\n\t\t}\n\t\tthis.unmountFloatingElement = undefined;\n\t\t// On all instances of menu closing, make sure icon direction is correct\n\t\tthis.changeDetectorRef.markForCheck();\n\t}\n\n\n\t/**\n\t * On action click, notify user\n\t * If the menu is open, close the menu\n\t * @param event\n\t */\n\tonActionClick(event: PointerEvent) {\n\t\tif (this.open) {\n\t\t\tthis.toggleMenu();\n\t\t}\n\t\tthis.actionClick.emit(event);\n\t}\n\n\n\n\t/**\n\t * Handles emitting open/close event\n\t */\n\ttoggleMenu() {\n\t\tthis.open = !this.open;\n\t\tif (this.open) {\n\t\t\t// Render the template & append to view\n\t\t\tconst view = this.viewContainerRef.createEmbeddedView(this.menuTemplate);\n\t\t\tthis.menuRef = document.body.appendChild(view.rootNodes[0] as HTMLElement);\n\t\t\t// Assign button width to the menu ref to align with button\n\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\twidth: `${this.hostElement.nativeElement.clientWidth}px`,\n\t\t\t\ttop: \"0\",\n\t\t\t\tleft: \"0\"\n\t\t\t});\n\n\t\t\t// Reset & test alignment every open\n\t\t\tthis.menuAlignment = this._alignment;\n\n\t\t\tdocument.addEventListener(\"click\", this.documentClick);\n\n\t\t\t// Listen for events such as scrolling to keep menu aligned\n\t\t\tthis.unmountFloatingElement = autoUpdate(\n\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\tthis.menuRef,\n\t\t\t\tthis.recomputePosition.bind(this)\n\t\t\t);\n\t\t} else {\n\t\t\tthis.cleanUp();\n\t\t}\n\t}\n\n\n\n\troundByDPR(value) {\n\t\tconst dpr = window.devicePixelRatio || 1;\n\t\treturn Math.round(value * dpr) / dpr;\n\t}\n\n\n\n\t/**\n\t * Compute position of menu\n\t */\n\trecomputePosition() {\n\t\tif (this.menuTemplate && this.hostElement) {\n\t\t\t// Run outside of angular zone to avoid unnecessary change detection and rely on floating-ui\n\t\t\tthis.ngZone.runOutsideAngular(async () => {\n\t\t\t\tconst { x, y, placement } = await computePosition(\n\t\t\t\t\tthis.hostElement.nativeElement,\n\t\t\t\t\tthis.menuRef,\n\t\t\t\t\t{\n\t\t\t\t\t\tplacement: this.menuAlignment,\n\t\t\t\t\t\tstrategy: \"fixed\",\n\t\t\t\t\t\tmiddleware: [\n\t\t\t\t\t\t\tflip({ crossAxis: false })\n\t\t\t\t\t\t]\n\t\t\t\t\t});\n\n\t\t\t\tthis.menuAlignment = placement as ComboButtonPlacement;\n\n\t\t\t\t// Using CSSOM to manipulate CSS to avoid content security policy inline-src\n\t\t\t\t// https://github.com/w3c/webappsec-csp/issues/212\n\t\t\t\tObject.assign(this.menuRef.style, {\n\t\t\t\t\tposition: \"fixed\",\n\t\t\t\t\t// Using transform instead of top/left position to improve performance\n\t\t\t\t\ttransform: `translate(${this.roundByDPR(x)}px,${this.roundByDPR(y)}px)`\n\t\t\t\t});\n\t\t\t\tthis.changeDetectorRef.markForCheck();\n\t\t\t});\n\t\t}\n\t}\n}\n","import { NgModule } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { IconModule } from \"carbon-components-angular/icon\";\nimport { ContextMenuModule } from \"carbon-components-angular/context-menu\";\nimport { ButtonModule } from \"carbon-components-angular/button\";\n\nimport { ComboButtonComponent } from \"./combo-button.component\";\n\n@NgModule({\n\timports: [\n\t\tCommonModule,\n\t\tButtonModule,\n\t\tIconModule,\n\t\tContextMenuModule\n\t],\n\texports: [ComboButtonComponent],\n\tdeclarations: [ComboButtonComponent]\n})\nexport class ComboButtonModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2020/carbon-components-angular-context-menu.mjs

@@ -13,11 +13,11 @@ class ContextMenuDividerComponent {
     }
 }
 ContextMenuDividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuDividerComponent, selector: "cds-context-menu-divider, ibm-context-menu-divider", host: { properties: { "class.cds--menu-item-divider": "this.dividerClass", "attr.role": "this.role" } }, ngImport: i0, template: "", isInline: true });
+ContextMenuDividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuDividerComponent, selector: "cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider", host: { properties: { "class.cds--menu-item-divider": "this.dividerClass", "attr.role": "this.role" } }, ngImport: i0, template: "", isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuDividerComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "cds-context-menu-divider, ibm-context-menu-divider",
+                    selector: "cds-menu-divider, cds-context-menu-divider, ibm-context-menu-divider",
                     template: ""
                 }]
         }], propDecorators: { dividerClass: [{
@@ -101,13 +101,13 @@ class ContextMenuGroupComponent {
     }
 }
 ContextMenuGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuGroupComponent, deps: [{ token: ContextMenuSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuGroupComponent, selector: "cds-context-menu-group, ibm-context-menu-group", inputs: { label: "label", value: "value", type: "type" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.role", "class.cds--menu-item-radio-group": "this.radioGroup", "class.cds--menu-item-group": "this.group", "attr.aria-label": "this.label" } }, providers: [ContextMenuSelectionService], usesOnChanges: true, ngImport: i0, template: `
+ContextMenuGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuGroupComponent, selector: "cds-menu-group, cds-context-menu-group, ibm-context-menu-group", inputs: { label: "label", value: "value", type: "type" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.role": "this.role", "class.cds--menu-item-radio-group": "this.radioGroup", "class.cds--menu-item-group": "this.group", "attr.aria-label": "this.label" } }, providers: [ContextMenuSelectionService], usesOnChanges: true, ngImport: i0, template: `
 		<ng-content></ng-content>
 	`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuGroupComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "cds-context-menu-group, ibm-context-menu-group",
+                    selector: "cds-menu-group, cds-context-menu-group, ibm-context-menu-group",
                     template: `
 		<ng-content></ng-content>
 	`,
@@ -152,24 +152,35 @@ class ContextMenuComponent {
             left: 0,
             top: 0
         };
-        this.contextMenu = true;
+        this.size = "lg";
         this.role = "menu";
         this.tabindex = "-1";
+        /**
+         * @todo - convert to getter in v6, should resolve expression has changed
+         * after switching to on OnPush Change Detection Strategy
+         */
+        this.iconClass = false;
+    }
+    get hostClass() {
+        const open = this.open ? "cds--menu--open cds--menu--shown" : "";
+        return `cds--menu cds--autoalign cds--menu--${this.size} ${open}`;
     }
-    get contextMenuOpen() { return this.open; }
-    get showMenu() { return this.open; }
     get leftPosition() { return this.position.left; }
     get topPosition() { return this.position.top; }
-    get classIcons() {
-        const svgElement = this.elementRef.nativeElement
-            .querySelector(".cds--menu-item .cds--menu-item__icon svg");
-        return svgElement;
-    }
     ngOnChanges(changes) {
         if (changes.open && changes.open.currentValue) {
             this.focusMenu();
         }
     }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const nativeElement = this.elementRef.nativeElement;
+            if (nativeElement) {
+                this.iconClass = !!nativeElement
+                    .querySelector(".cds--menu-item .cds--menu-item__icon svg");
+            }
+        });
+    }
     focusMenu() {
         // wait until the next tick to let the DOM settle before changing the focus
         setTimeout(() => {
@@ -225,27 +236,23 @@ class ContextMenuComponent {
     }
 }
 ContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuComponent, selector: "cds-context-menu, ibm-context-menu", inputs: { open: "open", position: "position" }, host: { listeners: { "keydown": "handleNavigation($event)" }, properties: { "class.cds--menu": "this.contextMenu", "class.cds--menu--open": "this.contextMenuOpen", "class.cds--menu--shown": "this.showMenu", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "style.left.px": "this.leftPosition", "style.top.px": "this.topPosition", "class.cds--menu--with-icons": "this.classIcons" } }, usesOnChanges: true, ngImport: i0, template: `
+ContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuComponent, selector: "cds-menu, cds-context-menu, ibm-context-menu", inputs: { open: "open", position: "position", size: "size" }, host: { listeners: { "keydown": "handleNavigation($event)" }, properties: { "class": "this.hostClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "style.left.px": "this.leftPosition", "style.top.px": "this.topPosition", "class.cds--menu--with-icons": "this.iconClass" } }, usesOnChanges: true, ngImport: i0, template: `
 			<ng-content></ng-content>
 	`, isInline: true, styles: [":host{display:block}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cds-context-menu, ibm-context-menu", template: `
+            args: [{ selector: "cds-menu, cds-context-menu, ibm-context-menu", template: `
 			<ng-content></ng-content>
 	`, styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { open: [{
                 type: Input
             }], position: [{
                 type: Input
-            }], contextMenu: [{
-                type: HostBinding,
-                args: ["class.cds--menu"]
-            }], contextMenuOpen: [{
-                type: HostBinding,
-                args: ["class.cds--menu--open"]
-            }], showMenu: [{
+            }], size: [{
+                type: Input
+            }], hostClass: [{
                 type: HostBinding,
-                args: ["class.cds--menu--shown"]
+                args: ["class"]
             }], role: [{
                 type: HostBinding,
                 args: ["attr.role"]
@@ -258,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], topPosition: [{
                 type: HostBinding,
                 args: ["style.top.px"]
-            }], classIcons: [{
+            }], iconClass: [{
                 type: HostBinding,
                 args: ["class.cds--menu--with-icons"]
             }], handleNavigation: [{
@@ -275,6 +282,8 @@ class ContextMenuItemComponent {
         this.tabindex = -1;
         this.ariaHasPopup = null;
         this.ariaExpanded = null;
+        this.disabled = false;
+        this.danger = false;
         this.label = "";
         this.info = "";
         this.type = null;
@@ -282,6 +291,7 @@ class ContextMenuItemComponent {
         this.icon = "";
         this.value = "";
         this.checkedChange = new EventEmitter();
+        this.itemClick = new EventEmitter();
         this.hasChildren = false;
         this.selectable = false;
         this.subscriptions = new Subscription();
@@ -290,6 +300,9 @@ class ContextMenuItemComponent {
         return this.type === "checkbox" ?
             (this.checked ? true : false) : null;
     }
+    get ariaDisabled() {
+        return this.disabled;
+    }
     ngOnInit() {
         switch (this.type) {
             case "checkbox": {
@@ -343,6 +356,15 @@ class ContextMenuItemComponent {
                 this.contextMenuSelectionService.selectCheckbox(this.value);
             }
         }
+        if (!this.disabled) {
+            this.itemClick.emit({
+                event,
+                label: this.label,
+                info: this.info,
+                value: this.value,
+                type: this.type
+            });
+        }
     }
     handleSelection(selected) {
         this.checked = selected;
@@ -387,7 +409,7 @@ class ContextMenuItemComponent {
     }
 }
 ContextMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuItemComponent, deps: [{ token: i0.ElementRef }, { token: ContextMenuSelectionService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ContextMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuItemComponent, selector: "cds-context-menu-item, ibm-context-menu-item", inputs: { label: "label", info: "info", type: "type", checked: "checked", icon: "icon", value: "value" }, outputs: { checkedChange: "checkedChange" }, host: { listeners: { "keydown.enter": "handleClick($event)", "keydown.space": "handleClick($event)", "click": "handleClick($event)", "mouseover": "handleMouseOver()", "mouseout": "handleMouseOut()", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "class.cds--menu-item": "this.optionClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-checked": "this.ariaChecked" } }, queries: [{ propertyName: "childContextMenu", first: true, predicate: ContextMenuComponent, descendants: true, static: true }], ngImport: i0, template: `
+ContextMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContextMenuItemComponent, selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", inputs: { disabled: "disabled", danger: "danger", label: "label", info: "info", type: "type", checked: "checked", icon: "icon", value: "value" }, outputs: { checkedChange: "checkedChange", itemClick: "itemClick" }, host: { listeners: { "keydown.enter": "handleClick($event)", "keydown.space": "handleClick($event)", "click": "handleClick($event)", "mouseover": "handleMouseOver()", "mouseout": "handleMouseOut()", "focus": "handleFocus()", "blur": "handleBlur()" }, properties: { "class.cds--menu-item": "this.optionClass", "attr.role": "this.role", "attr.tabindex": "this.tabindex", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-checked": "this.ariaChecked", "attr.aria-disabled": "this.ariaDisabled", "class.cds--menu-item--disabled": "this.disabled", "class.cds--menu-item--danger": "this.danger" } }, queries: [{ propertyName: "childContextMenu", first: true, predicate: ContextMenuComponent, descendants: true, static: true }], ngImport: i0, template: `
 		<div class="cds--menu-item__icon">
 			<svg *ngIf="selectable && checked" cdsIcon="checkmark" size="16"></svg>
 			<svg *ngIf="!selectable && icon" [cdsIcon]="icon" size="16"></svg>
@@ -401,7 +423,7 @@ ContextMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0
 	`, isInline: true, styles: [":host{grid-template-columns:1rem 1fr max-content}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.IconDirective, selector: "[cdsIcon], [ibmIcon]", inputs: ["ibmIcon", "cdsIcon", "size", "title", "ariaLabel", "ariaLabelledBy", "ariaHidden", "isFocusable"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContextMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cds-context-menu-item, ibm-context-menu-item", template: `
+            args: [{ selector: "cds-menu-item, cds-context-menu-item, ibm-context-menu-item", template: `
 		<div class="cds--menu-item__icon">
 			<svg *ngIf="selectable && checked" cdsIcon="checkmark" size="16"></svg>
 			<svg *ngIf="!selectable && icon" [cdsIcon]="icon" size="16"></svg>
@@ -433,6 +455,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], ariaChecked: [{
                 type: HostBinding,
                 args: ["attr.aria-checked"]
+            }], ariaDisabled: [{
+                type: HostBinding,
+                args: ["attr.aria-disabled"]
+            }], disabled: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ["class.cds--menu-item--disabled"]
+            }], danger: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ["class.cds--menu-item--danger"]
             }], label: [{
                 type: Input
             }], info: [{
@@ -447,6 +482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], checkedChange: [{
                 type: Output
+            }], itemClick: [{
+                type: Output
             }], childContextMenu: [{
                 type: ContentChild,
                 args: [ContextMenuComponent, { static: true }]