bm-core-ui 2.12.0-beta.12 → 2.12.0-beta.14

package/build/@types/index.d.ts

@@ -9825,6 +9825,15 @@ export class BMMenuItem {
 	 */
 	CSSClass?: string | null | undefined;
 
+	/**
+	 * Updates the CSS class on this item's node.
+	 * @param fromClass         The currently applied CSS classes.
+	 * @param toClass          The new classes to apply.
+	 *     
+	 */
+	private _updateCSSClass(fromClass: string, {toClass}: {toClass: string}): void;
+
+
 	/**
 	 * An optional key sequence that may be used to select this menu item via a keyboard shortcut.
 	 * Updates to this property do not take effect while a menu displaying this menu item is open.
@@ -9838,6 +9847,14 @@ export class BMMenuItem {
 	 */
 	hintHTML?: string | null | undefined;
 
+	/**
+	 * Updates this item's HTML hint node with the specified hint.
+	 * @param hint          The hint to use.
+	 *     
+	 */
+	private _setHintHTML(hint: string): void;
+
+
 	/**
 	 * The node that represents this menu item, available while its menu
 	 * is open.
@@ -9845,6 +9862,20 @@ export class BMMenuItem {
 	 */
 	private _node?: DOMNode | null | undefined;
 
+	/**
+	 * The node that represents this menu item's icon, available while its menu
+	 * is open.
+	 *     
+	 */
+	private _iconNode?: DOMNode | null | undefined;
+
+	/**
+	 * The node that represents this menu item's title, available while its menu
+	 * is open.
+	 *     
+	 */
+	private _nameNode?: DOMNode | null | undefined;
+
 	/**
 	 * Defaults to `YES`. Controls whether this menu item is enabled. If this menu
 	 * item is not enabled, it can not be highlighted or selected.
@@ -9853,6 +9884,57 @@ export class BMMenuItem {
 	enabled: boolean;
 
 	/**
+	 * Updates the enabled state of this menu item's node.
+	 * @param enabled      Whether the item is enabled.
+	 *     
+	 */
+	private _setEnabled(enabled: boolean): void;
+
+
+	/**
+	 * The currently active replacement menu item, if any.
+	 *     
+	 */
+	private _replacementItem?: BMMenuItem | null | undefined;
+
+	/**
+	 * Causes this menu item to instead display the specified menu item instead.
+	 * @param item    The replacement menu item, or `undefined` to restore
+	 *                                      this menu item.
+	 * @return                    `YES` if a replacement occurred, `NO` otherwise.
+	 *     
+	 */
+	private _setReplacementItem(item?: BMMenuItem | null | undefined): boolean;
+
+
+	/**
+	 * Contains the replacement menu items and their modifiers.
+	 *     
+	 */
+	private _overrideMenuItems: Dictionary< {item: BMMenuItem, priority: number}>;
+
+	/**
+	 * Registers a menu item that will replace this menu item in an open menu when the
+	 * specified keyboard modifiers are held.
+	 * @param item                                  The replacement menu item to add.
+	 * @param forModifiers       An array of modifiers that must be held for the
+	 *                                                          replacement item to be selected.
+	 *     
+	 */
+	addOverrideMenuItem(item: BMMenuItem, {forModifiers}: {forModifiers: BMKeyboardShortcutModifier[]}): void;
+
+
+	/**
+	 * Unregisters the replacement menu item when the specified keyboard modifiers are held.
+	 * Has no effect if a replacement menu item was not set for the specified modifiers.
+	 * @param modifiers           The keyboard modifiers.
+	 *     
+	 */
+	removeOverrideMenuItemForModifiers(modifiers: BMKeyboardShortcutModifier[]): void;
+
+
+	/**
+	 * Designated initializer.
 	 * Constructs and returns a menu item with the given name.
 	 * Optionally, the menu item may have an icon associated with it as well as an
 	 * action that is invoked when the item is selected.
@@ -10041,6 +10123,28 @@ export class BMMenu {
 	initWithItems(items: BMMenuItem[]): BMMenu;
 
 
+	/**
+	 * The current modifier bitmap.
+	 *     
+	 */
+	_modifierBitmap: number;
+
+	/**
+	 * Invoked to handle the specified keyboard event.
+	 * @param event      The event that triggered this action.
+	 *     
+	 */
+	handleEvent(event: KeyboardEvent): void;
+
+
+	/**
+	 * Updates the modifier bitmap based on the specified event.
+	 * @param event      The event describing the currently pressed modifier keys.
+	 *     
+	 */
+	private _updateModifierBitmapWithEvent(event: Event): void;
+
+
 	/**
 	 * Invoked by CoreUI to build the menu node.
 	 *     
@@ -10100,6 +10204,12 @@ export class BMMenu {
 	openFromNode(node: DOMNode, {animated, kind}?: {animated?: boolean | null | undefined, kind?: BMMenuKind | null | undefined}): Promise<void>;
 
 
+	/**
+	 * The rect around which this menu is positioned.
+	 *     
+	 */
+	private _rect?: BMRect | null | undefined;
+
 	/**
 	 * Animatable. Shows this menu at the specified point. The coordinates of this point are relative to the viewport.
 	 * @param point                    The point at which to show this menu.
@@ -10113,6 +10223,14 @@ export class BMMenu {
 	openAtPoint(point: BMPoint, {animated, kind}?: {animated?: boolean | null | undefined, kind?: BMMenuKind | null | undefined}): void;
 
 
+	/**
+	 * Updates this menu's position around the specified rect.
+	 * @param rect          The rect around which to position this menu.
+	 *     
+	 */
+	private _setAnchorRect(rect: BMRect): void;
+
+
 	/**
 	 * Shows this menu at an appropriate position around the given rect. The coordinates of this rect
 	 * are relative to the viewport.

package/build/BMCollectionView/BMCollectionView.js

@@ -4783,11 +4783,6 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	cellWasClicked: function (cell, options) {
 		if (options && options.withEvent) options.withEvent._BMOriginalTarget = cell.node;
 
-        // Acquire focus if not already owned
-        if (document.activeElement != this.node && this._supportsKeyboardNavigation) {
-            this.node.focus();
-        }
-
 		// Forward this event to the delegate, giving it a chance to handle the event
 		var eventHandled = NO;
 		if (this.delegate && this.delegate.collectionViewCellWasClicked) {
@@ -4797,6 +4792,11 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		// If the delegate did handle this event, do not invoke the default behavior
 		if (eventHandled) return;
 
+        // Acquire focus if not already owned
+        if (document.activeElement != this.node && this._supportsKeyboardNavigation) {
+            this.node.focus();
+        }
+
         // The default behaviour when clicking cells is to highlight them
         if (this._highlightedIndexPath && !this._highlightedIndexPath.isLooselyEqualToIndexPath(cell.indexPath, {usingComparator: this.identityComparator})) {
             let canHighlight = YES;
@@ -4848,16 +4848,16 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	cellWasDoubleClicked: function (cell, options) {
 		if (options && options.withEvent) options.withEvent._BMOriginalTarget = cell.node;
 
-        // Acquire focus if not already owned
-        if (document.activeElement != this.node && this._supportsKeyboardNavigation) {
-            this.node.focus();
-        }
-
 		// Forward this event to the delegate, giving it a chance to handle the event
 		var eventHandled = NO;
 		if (this.delegate && this.delegate.collectionViewCellWasDoubleClicked) {
 			eventHandled = this.delegate.collectionViewCellWasDoubleClicked(this, cell, {withEvent: options.withEvent});
 		}
+
+        // Acquire focus if not already owned
+        if (!eventHandled && document.activeElement != this.node && this._supportsKeyboardNavigation) {
+            this.node.focus();
+        }
 	},
 	
 	/**
@@ -4869,11 +4869,6 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	 */
 	cellWasLongClicked: function (cell, options) {
 		if (options && options.withEvent) options.withEvent._BMOriginalTarget = cell.node;
-
-        // Acquire focus if not already owned
-        if (document.activeElement != this.node && this._supportsKeyboardNavigation) {
-            this.node.focus();
-        }
 		
 		// Forward this event to the delegate, giving it a chance to handle the event
 		var eventHandled = NO;
@@ -4881,6 +4876,11 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			eventHandled = this.delegate.collectionViewCellWasLongClicked(this, cell, {withEvent: options.withEvent});
 		}
 
+        // Acquire focus if not already owned
+        if (!eventHandled && document.activeElement != this.node && this._supportsKeyboardNavigation) {
+            this.node.focus();
+        }
+
 		return eventHandled;
 	},
 	

package/build/BMCoreUI.css

@@ -30,7 +30,7 @@
 	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
 	font-size: 18px !important;
 	font-weight: bold !important;
-	
+
 	text-align: center !important;
 
 	padding-left: 16px;
@@ -178,7 +178,7 @@
 .BMDragSessionIndicatorMessage.BMDragSessionIndicatorMessageMeasurement {
 	transition: none;
 	visibility: hidden;
-	
+
 	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
 	font-size: 16px !important;
 
@@ -254,15 +254,15 @@
 
 .BMWindowBlocker {
 	position: fixed;
-	
+
 	width: 100vw;
 	height: 100vh;
-	
+
 	left: 0px;
 	top: 0px;
-	
+
 	background: rgba(0, 0, 0, .4);
-	
+
 	z-index: 2008;
 }
 
@@ -273,13 +273,13 @@
 
 .BMWindow {
 	position: fixed;
-	
+
 	border-radius: 8px;
 	overflow: hidden;
-	
+
 	box-shadow: rgba(0, 0, 0, .15) 0px 0px 1px 1px, rgba(0, 0, 0, .33) 0px 12px 64px;
 	outline: none;
-	
+
 	z-index: 2008;
 }
 
@@ -507,14 +507,14 @@
 .BMFullScreenWindow {
 	left: 0px !important;
 	top: 0px !important;
-	
+
 	width: 100vw !important;
 	height: 100vh !important;
 }
 
 .BMWindowContent {
 	position: absolute;
-	
+
 	width: 100%;
 	height: 100%;
 	top: 0px;
@@ -609,7 +609,7 @@
 	.BMWindowLabel, .BMLabel {
 		color: rgba(255, 255, 255, .9);
 	}
-	
+
 	.BMWindowSublabel, .BMSubLabel {
 		color: rgba(255, 255, 255, .5);
 	}
@@ -626,7 +626,7 @@
 	font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', sans-serif !important;
 	font-size: 24px !important;
 	font-weight: bold !important;
-	
+
 	text-align: left !important;
 
 	color: rgba(0, 0, 0, .8);
@@ -634,7 +634,7 @@
 
 .BMWindowTitle {
 	min-height: 64px !important;
-	
+
 	margin-left: 24px !important;
 	margin-right: 8px !important;
 
@@ -654,9 +654,9 @@
 	-webkit-appearance: none !important;
 	border: none !important;
 	box-sizing: border-box !important;
-	
+
 	border-radius: 4px !important;
-	
+
 	transition: box-shadow .2s ease, background-color .2s ease !important;
 	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0), 0px 0px 20px 20px rgba(0, 160, 255, 0) !important;
 
@@ -666,7 +666,7 @@
 
 .BMWindowInput {
 	margin: 8px !important;
-	
+
 	height: calc(100% - 16px) !important;
 	min-width: 44px !important;
 }
@@ -729,7 +729,7 @@
 	.BMWindowInputInvalid:hover:not(:focus), .BMInputInvalid:hover:not(:focus) {
 		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .05) inset, 0px 0px 1px 1px rgba(0, 0, 0, .33), 0px 0px 20px 20px rgba(255, 80, 0, 0) !important;
 	}
-	
+
 	.BMWindowInputInvalid:focus, .BMInputInvalid:focus {
 		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .05) inset, 0px 0px 1px 1px rgba(0, 0, 0, .5), 0px 0px 15px rgba(255, 80, 0, 1) !important;
 	}
@@ -794,7 +794,7 @@
 .BMWindowToolbarLabel {
 	border: none !important;
 	box-sizing: border-box !important;
-	
+
 	border-radius: 4px !important;
 	margin: 8px !important;
 
@@ -830,17 +830,17 @@
 	display: flex;
 	align-content: center;
 	justify-content: center;
-	
+
 	border-radius: 4px;
 	box-shadow: 0px 2px 4px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
-	
+
 	background: rgba(0, 128, 255, 1);
-	
+
 	color: white;
 	font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica', 'Segoe UI', sans-serif;
 	font-size: 14px;
 	font-weight: bold;
-	
+
 	padding: 8px 16px;
 
 	align-self: center;
@@ -851,7 +851,7 @@
 
 .BMWindowButton {
 	min-height: 32px;
-	
+
 	margin: 8px;
 	border: none;
 }
@@ -903,7 +903,7 @@
 	width: 44px;
 	height: 44px;
 	top: 10px;
-	
+
 	border-radius: 50%;
 
 	margin-left: 8px;
@@ -951,18 +951,18 @@
 
 .BMLayoutEditorCloseButton {
 	position: absolute !important;
-	
+
 	left: 8px !important;
 	opacity: 0;
-	
+
 	pointer-events: none;
-	
+
 	transition: opacity .3s ease;
 }
 
 .BMLayoutEditorCloseButton.BMLayoutEditorFullScreen {
 	opacity: 1;
-	
+
 	pointer-events: inherit;
 }
 
@@ -982,22 +982,22 @@
 	width: 128px;
 	padding-top: 8px;
 	padding-bottom: 8px;
-	
+
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	
+
 	color: rgba(0, 0, 0, .25);
-	
+
 	padding-left: 8px;
 	padding-right: 8px;
-	
+
 	box-sizing: border-box !important; /* Important needed for Thingworx new composer */
 	font-size: 10px !important;
-	
+
 	margin-left: 32px;
 	margin-right: 32px;
-	
+
 	cursor: pointer;
 }
 
@@ -1012,16 +1012,16 @@
 
 .BMWindowSwitchGutter {
 	border-radius: 5px;
-	
+
 	border: 1px solid rgba(0, 0, 0, .1);
 	background-color: rgba(0, 0, 0, .1);
-	
+
 	margin-left: 8px;
 	margin-right: 8px;
-	
+
 	flex-grow: 1;
 	height: 20px;
-	
+
 	box-sizing: border-box !important; /* Important needed for Thingworx new composer */
 	overflow: hidden;
 }
@@ -1030,12 +1030,12 @@
 	width: 50%;
 	height: 100%;
 	background-color: #FFF;
-	
+
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, .3), 0px -4px 8px rgba(0, 0, 0, .05) inset;
 	border-radius: 5px;
 
 	transform: translateX(100%);
-	
+
 	transition: transform .2s ease, width .2s ease, opacity .2s ease;
 }
 
@@ -1199,7 +1199,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		transform: translateZ(0);
 		-webkit-transform: translateZ(0);
 	}
-	
+
 }
 
 .BMWindowToolbarDark .BMLayoutEditorSizeClassPopupOption:active > .BMLayoutEditorSizeClassImage {
@@ -1346,12 +1346,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	z-index: 9999999;
 }
 
-/* A class that is temporarily added to the menu container to allow the user
-   to move over menu items without triggering them while moving torwards the submenu */
-.BMMenuContainer.BMMenuContainerSubmenuActive > * {
-	pointer-events: none !important;
-}
-
 .BMMenuContainerFullScreen {
 	background-color: rgba(0, 0, 0, .33);
 }
@@ -1364,7 +1358,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopup, 
+.BMLayoutEditorConstraintPopup,
 .BMMenu {
 	position: absolute;
 
@@ -1540,7 +1534,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 /* The menu's text element should expand to fill all available space */
 .BMMenuItem > span {
 	flex-grow: 1;
-	
+
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1561,7 +1555,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 .BMMenuItemDisclosure {
 	width: 24px;
 	height: 24px;
-	
+
 	font-weight: 600;
 
 	font-size: 18px;
@@ -1733,15 +1727,15 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		from {
 			color: rgba(255, 255, 255, .9);
 		}
-	
+
 		49% {
 			color: rgba(255, 255, 255, .9);
 		}
-	
+
 		50% {
 			color: white;
 		}
-	
+
 		to {
 			color: white;
 		}
@@ -1802,7 +1796,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 .BMLayoutEditorDetailsBackButton {
-	pointer-events: all;	
+	pointer-events: all;
 	padding-left: 8px !important; /* TWX-Important */
 	padding-right: 8px !important; /* TWX-Important */
 
@@ -1941,7 +1935,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		transform: translateZ(0);
 		-webkit-transform: translateZ(0);
 	}
-	
+
 	.BMLayoutEditorDetailsItemBadge {
 		border-color: rgba(255, 255, 255, .1);
 		color: rgba(255, 255, 255, .33) !important;
@@ -2108,7 +2102,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	.BMLayoutEditorDetailsItemReadonlyValueClickable:hover {
 		background-color: rgba(255, 255, 255, .1);
 	}
-	
+
 	.BMLayoutEditorDetailsItemReadonlyValueClickable:active {
 		background-color: rgba(255, 255, 255, .2);
 	}
@@ -2177,11 +2171,11 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	.BMLayoutEditorDetailsConstraintItem:hover {
 		background-color: rgba(255, 255, 255, .1);
 	}
-	
+
 	.BMLayoutEditorDetailsConstraintItem:active {
 		background-color: rgba(255, 255, 255, .2);
 	}
-	
+
 	.BMLayoutEditorDetailsConstraintItemReadonly {
 		border-color: rgba(255, 255, 255, .1);
 	}
@@ -2357,8 +2351,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		border-left: 1px dashed rgba(255, 255, 255, .33);
 		border-top: 1px dashed rgba(255, 255, 255, .33);
 	}
-	
-	
+
+
 	.BMLayoutEditorDetailsInsetBottomRightIndicator {
 		border-right: 1px dashed rgba(255, 255, 255, .33);
 		border-bottom: 1px dashed rgba(255, 255, 255, .33);
@@ -2524,7 +2518,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	left: 0px;
 	width: 100%;
 	height: 100%;
-	background: 
+	background:
   /* On "top" */
   repeating-linear-gradient(
     45deg,
@@ -2822,13 +2816,13 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 .BMPopoverOverlay {
 	position: absolute;
-	
+
 	width: 100%;
 	height: 100%;
-	
+
 	left: 0px;
 	top: 0px;
-	
+
 	z-index: 9999999; /* :( */
 
 	backdrop-filter: none !important;
@@ -2877,7 +2871,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 .BMPopoverContainerLayer {
 	position: absolute;
-	
+
 	z-index: 9999999; /* :( */
 	pointer-events: none;
 }
@@ -2886,9 +2880,9 @@ The drop shadow layer contains the drop shadow effect only.
 */
 .BMPopoverDropShadowContainer {
 
-	/* 
-	Filter drop-shadow is extremely expensive, but in practice, 
-	no page should have more than one popover open at any time, which should mitigate this 
+	/*
+	Filter drop-shadow is extremely expensive, but in practice,
+	no page should have more than one popover open at any time, which should mitigate this
 	*/
 	filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, .25)) drop-shadow(0px 12px 64px rgba(0, 0, 0, .33));
 	mix-blend-mode: multiply;
@@ -2918,9 +2912,9 @@ The background layer contains the background.
 */
 .BMPopoverBackground {
 	position: absolute;
-	
+
 	z-index: 9999999; /* TWX-Z-Index */
-	
+
 	background: rgba(245, 245, 245, .8);
 	-webkit-backdrop-filter: blur(25px);
 	backdrop-filter: blur(25px);
@@ -3294,4 +3288,4 @@ The background layer contains the background.
 
 .BMLayoutEditorImageDesktopMini {
 	background-image: url(images/DesktopMini.png);
-}
+}

package/build/BMView/BMDragSession.js

@@ -899,6 +899,11 @@ BMDragSession.prototype = {
         this._itemPreviewsUpdateIdentifier = setTimeout(() => {
             this._itemPreviewsUpdateIdentifier = undefined;
 
+            // If the session finished in the meantime, don't perform any further transition
+            if (this._finished) {
+                return;
+            }
+
             const newPreviews = new Map();
             if (this._dropTarget && this._dropTarget != this._sourceView) {
                 // If there is a valid drop target, request item previews and apply them