@oicl/openbridge-webcomponents 2.1.0 → 2.2.0-next.2

package/bundle/openbridge-webcomponents.bundle.js

@@ -7674,6 +7674,10 @@ var ObcIconButton = class ObcIconButton extends i$4 {
 		this.focusable = true;
 		this.ariaLabel = null;
 	}
+	/** Focus lands on the button inside, not on the host. */
+	focus(options) {
+		this.shadowRoot?.querySelector("button")?.focus(options);
+	}
 	get progressSpinner() {
 		if (this.progress === void 0) return A;
 		if (this.progress === 100) return b`<div class="progress-spinner">
@@ -107950,6 +107954,11 @@ var split_button_default = i$7`* {
     top: unset;
   }
 
+.wrapper.open-left .positioned-menu {
+    right: anchor(right);
+    left: unset;
+  }
+
 .dropdown-button::part(visible-wrapper) {
   box-sizing: border-box;
 }
@@ -107970,7 +107979,10 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
 		this.dropdownLabel = "More options";
 		this.fullWidth = false;
 		this.disabled = false;
+		this.primaryDisabled = false;
+		this.dropdownDisabled = false;
 		this.openTop = false;
+		this.openLeft = false;
 		this.columnGroups = [];
 		this.isDropdownOpen = false;
 		this.restoreFocusOnClose = false;
@@ -107989,7 +108001,7 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
 			} else window.removeEventListener("pointerdown", this.closeOnOutside);
 		};
 		this.handleDropdownKeydown = (event) => {
-			if (this.disabled) return;
+			if (this.isDropdownDisabled) return;
 			switch (event.key) {
 				case "ArrowDown":
 					event.preventDefault();
@@ -108051,8 +108063,15 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
 			});
 		};
 	}
+	get isPrimaryDisabled() {
+		return this.disabled || this.primaryDisabled;
+	}
+	get isDropdownDisabled() {
+		return this.disabled || this.dropdownDisabled;
+	}
 	async focusMenuAfterOpen() {
 		await this.updateComplete;
+		await this.menu?.updateComplete;
 		if (!this.isDropdownOpen) return;
 		if (this.menuFocusStrategy === "last") this.menu?.focusLastItem();
 		else if (this.menuFocusStrategy === "first") this.menu?.focusFirstItem();
@@ -108084,7 +108103,8 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
 			wrapper: true,
 			"full-width": this.fullWidth,
 			"is-open": this.isDropdownOpen,
-			"open-top": this.openTop
+			"open-top": this.openTop,
+			"open-left": this.openLeft
 		})}
       >
         <obc-button
@@ -108092,7 +108112,7 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
           .variant=${"normal"}
           .segmentPosition=${segmentPosition.start}
           .showLeadingIcon=${this.hasIcon}
-          .disabled=${this.disabled}
+          .disabled=${this.isPrimaryDisabled}
           @click=${this.handlePrimaryClick}
           .fullWidth=${this.fullWidth}
         >
@@ -108104,7 +108124,7 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
           class="dropdown-button"
           .variant=${"normal"}
           .cornerRight=${true}
-          .disabled=${this.disabled}
+          .disabled=${this.isDropdownDisabled}
           .activated=${this.isDropdownOpen}
           aria-label=${this.dropdownLabel}
           @click=${this.handleDropdownClick}
@@ -108112,7 +108132,11 @@ var ObcSplitButton = class ObcSplitButton extends i$4 {
           aria-expanded=${this.isDropdownOpen}
           aria-haspopup="menu"
         >
-          <obi-arrow-flyout-google></obi-arrow-flyout-google>
+          <slot name="dropdown-icon">
+            <obi-arrow-flyout-google
+              aria-hidden="true"
+            ></obi-arrow-flyout-google>
+          </slot>
         </obc-icon-button>
 
         <!-- Context Menu -->
@@ -108153,7 +108177,10 @@ __decorate([n$4({ type: String })], ObcSplitButton.prototype, "menuTitle", void
 __decorate([n$4({ type: String })], ObcSplitButton.prototype, "dropdownLabel", void 0);
 __decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "fullWidth", void 0);
 __decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "disabled", void 0);
+__decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "primaryDisabled", void 0);
+__decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "dropdownDisabled", void 0);
 __decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "openTop", void 0);
+__decorate([n$4({ type: Boolean })], ObcSplitButton.prototype, "openLeft", void 0);
 __decorate([n$4({ type: Array })], ObcSplitButton.prototype, "columnGroups", void 0);
 __decorate([r$3()], ObcSplitButton.prototype, "isDropdownOpen", void 0);
 __decorate([e$4("obc-context-menu-input")], ObcSplitButton.prototype, "menu", void 0);
@@ -113930,7 +113957,7 @@ var top_bar_default = i$7`* {
 /* Controls never shrink: a squeeze reaches the texts, then overflows the end */
 .menu-button,
 .app-icon,
-.left-more-button,
+.more-button,
 .dimming-button,
 .user-button,
 .apps-button,
@@ -113986,7 +114013,7 @@ var top_bar_default = i$7`* {
     "ss04" on;
 }
 
-.left-more-button {
+.more-button {
   display: none;
 }
 
@@ -114159,7 +114186,7 @@ var ObcTopBar = class ObcTopBar extends i$4 {
 		this.menuButtonActivated = false;
 		this.dimmingButtonActivated = false;
 		this.appsButtonActivated = false;
-		this.leftMoreButtonActivated = false;
+		this.moreButtonActivated = false;
 		this.userButtonActivated = false;
 		this.userButtonDisabled = false;
 		this.tall = false;
@@ -114197,9 +114224,24 @@ var ObcTopBar = class ObcTopBar extends i$4 {
 		*/
 		this.dispatchEvent(new CustomEvent("apps-button-clicked"));
 	}
-	leftMoreButtonClicked() {
+	/**
+	* Copies the deprecated `leftMoreButtonActivated` into
+	* `moreButtonActivated`. A plain field rather than a getter/setter alias:
+	* the Vue wrapper writes every prop back on its second render, and a getter
+	* would then write `false` over the new property.
+	*/
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has("leftMoreButtonActivated") && this.leftMoreButtonActivated !== void 0) this.moreButtonActivated = this.leftMoreButtonActivated;
+	}
+	moreButtonClicked() {
+		/**
+		* Fired when the more button is clicked.
+		* @event more-button-clicked
+		*/
+		this.dispatchEvent(new CustomEvent("more-button-clicked"));
 		/**
-		* Fired when the left more button is clicked.
+		* Deprecated alias of `more-button-clicked`; removed in 4.0.0.
 		* @event left-more-button-clicked
 		*/
 		this.dispatchEvent(new CustomEvent("left-more-button-clicked"));
@@ -114315,8 +114357,8 @@ var ObcTopBar = class ObcTopBar extends i$4 {
 		}
 		return b`
       <style>
-        @media (max-width: ${Math.max(this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx)}px) {
-          .left-more-button {
+        @media (max-width: ${Math.max(this.appButtonBreakpointPx, this.dimmingButtonBreakpointPx, this.userButtonBreakpointPx, this.appIconBreakpointPx)}px) {
+          .more-button {
             display: revert !important;
           }
 
@@ -114402,12 +114444,12 @@ var ObcTopBar = class ObcTopBar extends i$4 {
                 </obc-icon-button>` : null}
           ${this.showClock ? b`<slot name="clock"></slot>` : null}
           ${!this.inactive ? b`<obc-icon-button
-                  class="left-more-button"
-                  part="left-more-button"
+                  class="more-button"
+                  part="more-button left-more-button"
                   variant="flat"
                   aria-label=${msg("More")}
-                  @click=${this.leftMoreButtonClicked}
-                  ?activated=${this.leftMoreButtonActivated}
+                  @click=${this.moreButtonClicked}
+                  ?activated=${this.moreButtonActivated}
                 >
                   <obi-more-vertical-google></obi-more-vertical-google>
                 </obc-icon-button>` : null}
@@ -114425,6 +114467,7 @@ __decorate([n$4({ type: String })], ObcTopBar.prototype, "menuButtonIcon", void
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "menuButtonActivated", void 0);
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "dimmingButtonActivated", void 0);
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "appsButtonActivated", void 0);
+__decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "moreButtonActivated", void 0);
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "leftMoreButtonActivated", void 0);
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "userButtonActivated", void 0);
 __decorate([n$4({ type: Boolean })], ObcTopBar.prototype, "userButtonDisabled", void 0);