@oicl/openbridge-webcomponents 2.0.0-next.136 → 2.0.0-next.137

package/dist/automation/shuffle-button/shuffle-button-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-button-base.js","sources":["../../../src/automation/shuffle-button/shuffle-button-base.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport type {PropertyValues, TemplateResult} from 'lit';\nimport {property, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './shuffle-button.css?inline';\nimport {\n  clampPosition,\n  shuffleSlotCount,\n  shuffleWindowOffset,\n} from './shuffle-layout.js';\n\n/**\n * Detail payload for the `position-selected` event dispatched by\n * shuffle-button components. `position` is the zero-based position the user\n * requested.\n */\nexport interface PositionSelectedDetail {\n  position: number;\n}\n\n/**\n * The `position-selected` event dispatched by shuffle-button components.\n */\nexport type PositionSelectedEvent = CustomEvent<PositionSelectedDetail>;\n\n/**\n * Base class for shuffle-button selectors: a control whose selected thumb\n * always occupies the fixed center slot of a (2·n−1)-slot row (or column when\n * `vertical`). Option thumbs keep their logical order and redistribute to\n * either side of the selected thumb; empty spacer slots absorb the remaining\n * length so the total size never changes.\n *\n * ## Controlled selection\n * Clicking an option or pressing an arrow key only fires `position-selected`.\n * The host application sets `selectedPosition` once the device confirms the\n * change, so the control never shows a position the device has not reached.\n *\n * ## Keyboard\n * Follows the WAI-ARIA radio group pattern\n * (https://www.w3.org/WAI/ARIA/apg/patterns/radio/): `role=\"radiogroup\"` with\n * one `role=\"radio\"` thumb per position, a single tab stop on the selected\n * thumb, and Left/Up and Right/Down moving to the previous/next position with\n * wrap-around. Departures: arrow keys request the position rather than moving\n * the checked state (controlled selection above), and focus follows the thumb\n * only once the host confirms it. Space/Enter on a focused thumb request it\n * through the native button click. Home/End are out of scope.\n *\n * Subclasses define `positionCount` and `renderPositionIcon()` and carry the\n * `@fires position-selected` tag: the manifest and the framework wrappers read\n * events from the registered element, not from this base.\n *\n * Not declared `abstract`: the wrapper generators wrap every `LitElement`\n * subclass and pass its constructor as a concrete `Constructor<T>`, so the\n * default implementations below stand in for abstract members (same as\n * `ObcAbstractAutomationButton`).\n *\n * @property selectedPosition - Zero-based index of the currently selected position. Out-of-range values are clamped.\n * @property vertical - Lays the control out vertically: positions stack top to bottom and the position symbols rotate 90° counter-clockwise to match a vertical flow path.\n * @property ariaLabel - Accessible name for the radio group (the control is icon-only). Concrete components override the default with a device-specific name.\n */\nexport class ObcShuffleButtonBase extends LitElement {\n  @property({type: Number}) selectedPosition = 1;\n\n  @property({type: Boolean}) vertical = false;\n\n  @property({type: String}) override ariaLabel = 'Position selector';\n\n  @state() private suppressHover = false;\n\n  protected get positionCount(): number {\n    return 1;\n  }\n\n  protected renderPositionIcon(_position: number): TemplateResult {\n    return html``;\n  }\n\n  override render() {\n    const count = this.positionCount;\n    const selected = clampPosition(count, this.selectedPosition);\n    return html`\n      <div\n        class=${classMap({shuffle: true, vertical: this.vertical})}\n        role=\"radiogroup\"\n        aria-label=${this.ariaLabel}\n        aria-orientation=${this.vertical ? 'vertical' : 'horizontal'}\n        style=\"--_shuffle-slot-count: ${shuffleSlotCount(\n          count\n        )}; --_shuffle-window-offset: ${shuffleWindowOffset(\n          count,\n          selected\n        )};${this.suppressHover ? ' --obc-can-hover: 0;' : ''}\"\n        @keydown=${this.handleKeydown}\n        @pointermove=${this.restoreHover}\n      >\n        <div class=\"window\">\n          <div class=\"track\"></div>\n          ${Array.from({length: count}, (_, position) =>\n            this.renderThumb(position, selected)\n          )}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderThumb(position: number, selected: number) {\n    const isSelected = position === selected;\n    return html`\n      <button\n        class=${classMap({thumb: true, selected: isSelected})}\n        type=\"button\"\n        role=\"radio\"\n        aria-checked=${isSelected}\n        tabindex=${isSelected ? 0 : -1}\n        @click=${() => this.requestPosition(position)}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"icon-container\">${this.renderPositionIcon(position)}</div>\n        </div>\n      </button>\n    `;\n  }\n\n  private requestPosition(position: number) {\n    if (position === clampPosition(this.positionCount, this.selectedPosition)) {\n      return;\n    }\n    // Browsers keep :hover on the thumb that shuffles away from under a\n    // stationary pointer; mute hover feedback until the pointer really moves.\n    this.suppressHover = true;\n    const event: PositionSelectedEvent = new CustomEvent('position-selected', {\n      detail: {position},\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  private restoreHover() {\n    this.suppressHover = false;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    let delta: number;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n      delta = 1;\n    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n      delta = -1;\n    } else {\n      return;\n    }\n    event.preventDefault();\n    const count = this.positionCount;\n    const selected = clampPosition(count, this.selectedPosition);\n    this.requestPosition((selected + delta + count) % count);\n  }\n\n  protected override updated(changed: PropertyValues) {\n    if (\n      changed.has('selectedPosition') &&\n      this.shadowRoot?.activeElement instanceof HTMLElement\n    ) {\n      this.shadowRoot\n        .querySelector<HTMLButtonElement>('button.thumb.selected')\n        ?.focus();\n    }\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n"],"names":[],"mappings":"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"}

package/dist/automation/shuffle-button/shuffle-button.css.js

@@ -0,0 +1,219 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:host {
+  display: inline-block;
+}
+
+/* ---- Slot grid ----
+ * The box is (2n-1) touch-target slots; the selected thumb always sits in the
+ * center slot, so the box never changes size with the selection. */
+
+.shuffle {
+  --shuffle-slot-size: var(--global-size-spacing-touch-target-min);
+  --_shuffle-slot-count: 1;
+  --_shuffle-window-offset: 0;
+  position: relative; /* containing block for the sliding .window */
+  width: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+  height: var(--shuffle-slot-size);
+}
+
+.shuffle.vertical {
+  width: var(--shuffle-slot-size);
+  height: calc(var(--_shuffle-slot-count) * var(--shuffle-slot-size));
+}
+
+/* The window holds the n thumbs in logical order and slides by whole slots so
+ * the selected one lands in the center; the box above stays put. */
+
+.window {
+  position: absolute; /* slides inside the fixed-size .shuffle box */
+  top: 0;
+  left: 0;
+  display: flex;
+  transform: translateX(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+  transition: transform 100ms ease-out; /* TODO(designer): Figma is WIP and specifies no motion */
+}
+
+.shuffle.vertical .window {
+  flex-direction: column;
+  transform: translateY(
+    calc(var(--_shuffle-window-offset) * var(--shuffle-slot-size))
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .window {
+    transition: none;
+  }
+}
+
+/* The track is inset to the visual target height so it aligns with the thumbs'
+ * visible wrappers, not with the touch slots. */
+
+.track {
+  border-color: var(--indent-enabled-border-color);
+  background-color: var(--indent-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  --base-border-color: var(--indent-enabled-border-color);
+  --base-background-color: var(--indent-enabled-background-color);
+  position: absolute;
+  inset: calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    )
+    0;
+  border-radius: var(--global-border-radius-border-radius-base);
+  box-sizing: border-box; /* the mixin border must not grow the track past the slots */
+}
+
+.shuffle.vertical .track {
+  inset: 0
+    calc(
+      (
+          var(--shuffle-slot-size) -
+            var(--global-size-spacing-visual-target-min)
+        ) /
+        2
+    );
+}
+
+/* ---- Thumbs ----
+ * Two-layer pattern: the button is the touch target and focus-ring layer, the
+ * .visible-wrapper is the visual target. */
+
+.thumb {
+  position: relative;
+  width: var(--shuffle-slot-size);
+  height: var(--shuffle-slot-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0; /* a slot never shrinks below the touch target */
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+
+button.thumb {
+  cursor: pointer;
+}
+
+button.thumb:focus {
+  outline: none;
+}
+
+button.thumb .visible-wrapper {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
+}
+
+button.thumb.activated .visible-wrapper {
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+button.thumb:hover .visible-wrapper {
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+button.thumb:active .visible-wrapper {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+button.thumb:focus-visible .visible-wrapper {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
+}
+
+button.thumb:disabled .visible-wrapper {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+button.thumb.disabled .visible-wrapper {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+button.thumb:disabled {
+  cursor: not-allowed;
+}
+
+button.thumb.disabled {
+  cursor: not-allowed;
+}
+
+.visible-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--global-size-spacing-visual-target-min);
+  box-sizing: border-box;
+  border-radius: var(--global-border-radius-border-radius-base);
+  color: var(--automation-device-secondary-color);
+}
+
+.thumb.selected {
+  cursor: default; /* clicking the selected position is a no-op */
+}
+
+.thumb.selected .visible-wrapper {
+  background-color: var(--automation-pipe-primary-color);
+  border: 1px solid var(--automation-pipe-tertiary-color);
+  color: var(--automation-device-tertiary-color);
+}
+
+.shuffle.vertical .visible-wrapper {
+  width: var(--global-size-spacing-visual-target-min);
+  height: 100%;
+}
+
+.icon-container {
+  width: var(--global-size-spacing-icon-icon-size-regular);
+  height: var(--global-size-spacing-icon-icon-size-regular);
+}
+
+.shuffle.vertical .icon-container {
+  transform: rotate(-90deg); /* symbols are drawn for horizontal flow */
+}
+
+.icon-container > * {
+  width: 100%;
+  height: 100%;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=shuffle-button.css.js.map

package/dist/automation/shuffle-button/shuffle-button.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/automation/shuffle-button/shuffle-layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pure layout math for the shuffle-button mechanism: a selector whose selected
+ * thumb always occupies the fixed center slot of a (2n-1)-slot row while the
+ * remaining option thumbs keep their logical order on either side.
+ */
+export declare function clampPosition(positionCount: number, position: number): number;
+export declare function shuffleSlotCount(positionCount: number): number;
+export declare function shuffleWindowOffset(positionCount: number, selectedPosition: number): number;
+//# sourceMappingURL=shuffle-layout.d.ts.map

package/dist/automation/shuffle-button/shuffle-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-layout.d.ts","sourceRoot":"","sources":["../../../src/automation/shuffle-button/shuffle-layout.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG7E;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAE9D;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,gBAAgB,EAAE,MAAM,GACvB,MAAM,CAER"}

package/dist/automation/shuffle-button/shuffle-layout.js

@@ -0,0 +1,16 @@
+function clampPosition(positionCount, position) {
+  const rounded = Number.isNaN(position) ? 0 : Math.round(position);
+  return Math.min(Math.max(rounded, 0), positionCount - 1);
+}
+function shuffleSlotCount(positionCount) {
+  return 2 * positionCount - 1;
+}
+function shuffleWindowOffset(positionCount, selectedPosition) {
+  return positionCount - 1 - clampPosition(positionCount, selectedPosition);
+}
+export {
+  clampPosition,
+  shuffleSlotCount,
+  shuffleWindowOffset
+};
+//# sourceMappingURL=shuffle-layout.js.map

package/dist/automation/shuffle-button/shuffle-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shuffle-layout.js","sources":["../../../src/automation/shuffle-button/shuffle-layout.ts"],"sourcesContent":["/**\n * Pure layout math for the shuffle-button mechanism: a selector whose selected\n * thumb always occupies the fixed center slot of a (2n-1)-slot row while the\n * remaining option thumbs keep their logical order on either side.\n */\n\nexport function clampPosition(positionCount: number, position: number): number {\n  const rounded = Number.isNaN(position) ? 0 : Math.round(position);\n  return Math.min(Math.max(rounded, 0), positionCount - 1);\n}\n\nexport function shuffleSlotCount(positionCount: number): number {\n  return 2 * positionCount - 1;\n}\n\nexport function shuffleWindowOffset(\n  positionCount: number,\n  selectedPosition: number\n): number {\n  return positionCount - 1 - clampPosition(positionCount, selectedPosition);\n}\n"],"names":[],"mappings":"AAMO,SAAS,cAAc,eAAuB,UAA0B;AAC7E,QAAM,UAAU,OAAO,MAAM,QAAQ,IAAI,IAAI,KAAK,MAAM,QAAQ;AAChE,SAAO,KAAK,IAAI,KAAK,IAAI,SAAS,CAAC,GAAG,gBAAgB,CAAC;AACzD;AAEO,SAAS,iBAAiB,eAA+B;AAC9D,SAAO,IAAI,gBAAgB;AAC7B;AAEO,SAAS,oBACd,eACA,kBACQ;AACR,SAAO,gBAAgB,IAAI,cAAc,eAAe,gBAAgB;AAC1E;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.136",
+  "version": "2.0.0-next.137",
   "type": "module",
   "repository": {
     "type": "git",