@oicl/openbridge-webcomponents 2.0.0-next.66 → 2.0.0-next.68

package/dist/components/toggle-button-group/toggle-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {\n  ObcToggleButtonOption,\n  ObcToggleButtonOptionVariant,\n  ObcToggleButtonOptionType,\n} from '../toggle-button-option/toggle-button-option.js';\nimport componentStyle from './toggle-button-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{\n  value: string;\n  previousValue: string;\n}>;\n\n/**\n * `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n *\n * Provides a horizontal group of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-option>` child element. The group manages selection\n * state automatically, deselecting the previous option when a new one is chosen.\n *\n * Appears as a visually unified set of buttons with clear selection indicators. Commonly used for switching\n * between views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\n * filtering options, or layout toggles (e.g., list vs. grid view).\n *\n * ### Features\n *\n * - **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n *   deselects the previous one. Similar to radio button behavior but with a button-like appearance.\n * - **Visual variants:**\n *   - `regular` (default): Standard appearance with full background and border styling.\n *   - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n *   - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n * - **Content type options:**\n *   - `text` (default): Options display text labels only.\n *   - `icon`: Options display only an icon (compact, suitable for limited space).\n *   - `iconText`: Options display an icon and text side-by-side.\n *   - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n * - **Size control:**\n *   - Standard size (default): Regular button dimensions.\n *   - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n * - **Layout behavior:**\n *   - By default, the group stretches to fill available container width, distributing space equally among options.\n *   - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n * - **External control mode:** When `externalControl` is true, the group emits selection events but does not\n *   update its own `value` property, allowing parent components to manage state (useful for form libraries or\n *   custom state management).\n * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n *   options can also be disabled independently while the group remains enabled.\n * - **Divider management:** Automatically shows visual dividers between options and hides the divider after\n *   the selected option for a seamless, unified appearance.\n * - **Property propagation:** The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n *   properties to all child `<obc-toggle-button-option>` elements for consistent styling.\n * - **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n *   group automatically selects the first enabled option to ensure a valid state.\n *\n * ### Usage Guidelines\n *\n * Use `<obc-toggle-button-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\n * alternative to radio buttons.\n *\n * **Ideal use cases:**\n * - View mode toggles (e.g., list vs. grid, map vs. chart)\n * - Filter options (e.g., all/active/completed tasks)\n * - Alignment or layout controls (e.g., left/center/right alignment)\n * - Time range selectors (e.g., day/week/month)\n * - Toolbar mode switches (e.g., edit/preview modes)\n *\n * **When not to use:**\n * - For binary on/off choices, use a switch or checkbox instead.\n * - For multiple selections from a set, use checkboxes or chips.\n * - For many options (6+), consider a dropdown/select or radio button list for better scannability.\n * - For navigation between pages or sections, use tabs or a navigation menu.\n *\n * **Best Practices:**\n * - Each option must have a unique `value` property to prevent selection conflicts.\n * - Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n * - For icon-only buttons (`type=\"icon\"`), ensure icons are universally recognizable or provide tooltips.\n * - Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n * - Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n * - Use `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Use `large` size for touch interfaces or when the control is a primary interaction element.\n *\n * **TODO(designer):** Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. |\n *\n * ### Events\n *\n * - `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n *   Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n *\n * ### Example\n *\n * ```html\n * <obc-toggle-button-group value=\"list\" type=\"iconText\">\n *   <obc-toggle-button-option value=\"list\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     List\n *   </obc-toggle-button-option>\n *   <obc-toggle-button-option value=\"grid\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     Grid\n *   </obc-toggle-button-option>\n *   <obc-toggle-button-option value=\"table\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     Table\n *   </obc-toggle-button-option>\n * </obc-toggle-button-group>\n * ```\n *\n * @slot - Place one or more `<obc-toggle-button-option>` elements here to define the selectable options.\n * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.\n */\n@customElement('obc-toggle-button-group')\nexport class ObcToggleButtonGroup extends LitElement {\n  /**\n   * The currently selected option's value.\n   *\n   * Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.\n   *\n   * If set to a value that does not match any enabled option, the first enabled option is selected by default.\n   */\n  @property({type: String}) value = '';\n\n  /**\n   * The value of the option that is activated.\n   *\n   * When the group is controlled by an external source, this property is used to set the value of the option that is activated.\n   * This is a visual indication that the option is clicked but not yet stored.\n   */\n  @property({type: String}) activated: string | undefined;\n\n  /**\n   * The visual type of the toggle button options.\n   *\n   * - `text` (default): Options display text only.\n   * - `icon`: Options display only an icon.\n   * - `iconText`: Options display an icon and text side-by-side.\n   * - `iconTextUnder`: Options display an icon above the text.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: String}) type = ObcToggleButtonOptionType.text;\n\n  /**\n   * The visual variant of the toggle button group.\n   *\n   * - `regular` (default): Standard appearance with background and border.\n   * - `flat`: Minimal style with no background or border.\n   * - `normal`: Alternative style variant.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: String}) variant = ObcToggleButtonOptionVariant.regular;\n\n  /**\n   * If true, the group shrinks to fit its content (\"hug\" the text) instead of stretching to fill the container.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: Boolean}) hugText = false;\n\n  /**\n   * If true, the group is controlled by an external source.\n   *\n   * When true, the group will not update its selection when the `value` property changes.\n   *\n   * Defaults to false.\n   */\n  @property({type: Boolean}) externalControl = false;\n\n  /**\n   * Disables the entire toggle button group and all contained options when true.\n   *\n   * When disabled, no option can be selected or interacted with.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * If true, the group and all contained options use a larger size.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: Boolean, reflect: true}) large = false;\n\n  @queryAssignedElements({selector: 'obc-toggle-button-option'})\n  options!: NodeListOf<ObcToggleButtonOption>;\n\n  private hasAnyEnabledOption(): boolean {\n    if (this.disabled) return false;\n    return Array.from(this.options).some((opt) => !opt.disabled);\n  }\n\n  private canSelectOption(value: string): boolean {\n    if (this.disabled) return false;\n    const option = this.getOptionByValue(value);\n    return option !== null && !option.disabled;\n  }\n\n  private getOptionByValue(value: string): ObcToggleButtonOption | null {\n    return Array.from(this.options).find((opt) => opt.value === value) || null;\n  }\n\n  private getFirstSelectableOption(): ObcToggleButtonOption | null {\n    if (this.disabled) return null;\n    return Array.from(this.options).find((opt) => !opt.disabled) || null;\n  }\n\n  private updateSelection(newValue: string, emitEvent: boolean = true) {\n    const oldValue = this.value;\n\n    if (!this.hasAnyEnabledOption()) {\n      this.options.forEach((option) => {\n        option.selected = option.value === this.value;\n      });\n      this.setNoDivider();\n      return;\n    }\n\n    if (!this.canSelectOption(newValue)) {\n      if (this.value && this.getOptionByValue(this.value)) {\n        this.options.forEach((option) => {\n          option.selected = option.value === this.value;\n        });\n        this.setNoDivider();\n        return;\n      }\n      const fallback = this.getFirstSelectableOption();\n      newValue = fallback?.value || '';\n    }\n\n    this.value = newValue;\n\n    this.options.forEach((option) => {\n      option.selected = option.value === newValue;\n    });\n\n    this.setNoDivider();\n\n    if (emitEvent && oldValue !== newValue) {\n      this.dispatchEvent(\n        new CustomEvent('value', {\n          detail: {value: newValue, previousValue: oldValue},\n        })\n      );\n    }\n  }\n\n  private updateActivated(newValue: string | undefined) {\n    if (newValue) {\n      this.options.forEach((option) => {\n        option.activated = option.value === newValue;\n      });\n    } else {\n      this.options.forEach((option) => {\n        option.activated = false;\n      });\n    }\n  }\n\n  private setNoDivider() {\n    const selectedOptionIndex = Array.from(this.options).findIndex(\n      (option) => option.selected\n    );\n    this.options.forEach((option) => {\n      option.showDivider = true;\n    });\n    if (selectedOptionIndex === -1) {\n      return;\n    }\n    const nextOption = this.options[selectedOptionIndex + 1];\n    if (nextOption) {\n      nextOption.showDivider = false;\n    }\n  }\n\n  private _originalDisabledStates = new Map<ObcToggleButtonOption, boolean>();\n\n  protected override firstUpdated(\n    _changedProperties: PropertyValues<unknown> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    const values = Array.from(this.options).map((opt) => opt.value);\n    const uniqueValues = new Set(values);\n    if (values.length !== uniqueValues.size) {\n      console.warn(\n        'Toggle button group has duplicate values. This may cause unexpected behavior.'\n      );\n    }\n\n    this.options.forEach((option) => {\n      this._originalDisabledStates.set(option, option.hasAttribute('disabled'));\n\n      option.addEventListener('selected', (e) => this.handleOptionClick(e));\n\n      const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (\n            mutation.attributeName === 'disabled' &&\n            !option.hasAttribute('data-group-disabled')\n          ) {\n            this._originalDisabledStates.set(\n              option,\n              option.hasAttribute('disabled')\n            );\n            this.handleOptionDisabledChange();\n          }\n        });\n      });\n      observer.observe(option, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n\n      option.type = this.type;\n      option.variant = this.variant;\n      option.hugText = this.hugText;\n      option.large = this.large;\n\n      if (this.disabled) {\n        option.setAttribute('data-group-disabled', 'true');\n        option.disabled = true;\n      }\n    });\n\n    if (!this.value || !this.getOptionByValue(this.value)) {\n      const firstSelectable = this.getFirstSelectableOption();\n      if (firstSelectable) {\n        this.updateSelection(firstSelectable.value, false);\n      }\n    } else {\n      this.updateSelection(this.value, false);\n    }\n\n    if (this.activated) {\n      this.updateActivated(this.activated);\n    }\n  }\n\n  private handleOptionDisabledChange() {\n    const currentOption = this.getOptionByValue(this.value);\n    if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n      const firstSelectable = this.getFirstSelectableOption();\n      if (firstSelectable) {\n        this.updateSelection(firstSelectable.value);\n      }\n    }\n  }\n\n  handleOptionClick(event: Event) {\n    const {value} = (event as CustomEvent).detail;\n    if (this.externalControl) {\n      this.dispatchEvent(\n        new CustomEvent('value', {\n          detail: {value, previousValue: this.value},\n        })\n      );\n    } else {\n      this.updateSelection(value);\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this.updateSelection(this.value);\n    }\n\n    if (changedProperties.has('activated')) {\n      this.updateActivated(this.activated);\n    }\n\n    if (\n      changedProperties.has('type') ||\n      changedProperties.has('variant') ||\n      changedProperties.has('hugText') ||\n      changedProperties.has('large')\n    ) {\n      this.options.forEach((option) => {\n        option.type = this.type;\n        option.variant = this.variant;\n        option.hugText = this.hugText;\n        option.large = this.large;\n      });\n    }\n\n    if (changedProperties.has('disabled')) {\n      this.options.forEach((option) => {\n        if (this.disabled) {\n          option.setAttribute('data-group-disabled', 'true');\n          option.disabled = true;\n        } else {\n          option.removeAttribute('data-group-disabled');\n          const originalState =\n            this._originalDisabledStates.get(option) || false;\n          option.disabled = originalState;\n        }\n      });\n    }\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    const currentOption = this.getOptionByValue(this.value);\n    if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n      const firstSelectable = this.getFirstSelectableOption();\n      if (firstSelectable) {\n        this.updateSelection(firstSelectable.value);\n      }\n    }\n  }\n\n  override render() {\n    const classes = {\n      'outer-wrapper': true,\n      flat: this.variant === ObcToggleButtonOptionVariant.flat,\n      regular: this.variant === ObcToggleButtonOptionVariant.regular,\n      'hug-text': this.hugText,\n      'icon-text-under': this.type === ObcToggleButtonOptionType.iconTextUnder,\n      disabled: this.disabled,\n      large: this.large,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"wrapper\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-button-group': ObcToggleButtonGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0HO,IAAM,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQqB,SAAA,QAAQ;AAoBR,SAAA,OAAO,0BAA0B;AAWjC,SAAA,UAAU,6BAA6B;AAOtC,SAAA,UAAU;AASV,SAAA,kBAAkB;AAOH,SAAA,WAAW;AAOX,SAAA,QAAQ;AA6FlD,SAAQ,8CAA8B,IAAA;AAAA,EAAoC;AAAA,EAxFlE,sBAA+B;AACrC,QAAI,KAAK,SAAU,QAAO;AAC1B,WAAO,MAAM,KAAK,KAAK,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ;AAAA,EAC7D;AAAA,EAEQ,gBAAgB,OAAwB;AAC9C,QAAI,KAAK,SAAU,QAAO;AAC1B,UAAM,SAAS,KAAK,iBAAiB,KAAK;AAC1C,WAAO,WAAW,QAAQ,CAAC,OAAO;AAAA,EACpC;AAAA,EAEQ,iBAAiB,OAA6C;AACpE,WAAO,MAAM,KAAK,KAAK,OAAO,EAAE,KAAK,CAAC,QAAQ,IAAI,UAAU,KAAK,KAAK;AAAA,EACxE;AAAA,EAEQ,2BAAyD;AAC/D,QAAI,KAAK,SAAU,QAAO;AAC1B,WAAO,MAAM,KAAK,KAAK,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK;AAAA,EAClE;AAAA,EAEQ,gBAAgB,UAAkB,YAAqB,MAAM;AACnE,UAAM,WAAW,KAAK;AAEtB,QAAI,CAAC,KAAK,uBAAuB;AAC/B,WAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,eAAO,WAAW,OAAO,UAAU,KAAK;AAAA,MAC1C,CAAC;AACD,WAAK,aAAA;AACL;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,gBAAgB,QAAQ,GAAG;AACnC,UAAI,KAAK,SAAS,KAAK,iBAAiB,KAAK,KAAK,GAAG;AACnD,aAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,iBAAO,WAAW,OAAO,UAAU,KAAK;AAAA,QAC1C,CAAC;AACD,aAAK,aAAA;AACL;AAAA,MACF;AACA,YAAM,WAAW,KAAK,yBAAA;AACtB,iBAAW,UAAU,SAAS;AAAA,IAChC;AAEA,SAAK,QAAQ;AAEb,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,aAAO,WAAW,OAAO,UAAU;AAAA,IACrC,CAAC;AAED,SAAK,aAAA;AAEL,QAAI,aAAa,aAAa,UAAU;AACtC,WAAK;AAAA,QACH,IAAI,YAAY,SAAS;AAAA,UACvB,QAAQ,EAAC,OAAO,UAAU,eAAe,SAAA;AAAA,QAAQ,CAClD;AAAA,MAAA;AAAA,IAEL;AAAA,EACF;AAAA,EAEQ,gBAAgB,UAA8B;AACpD,QAAI,UAAU;AACZ,WAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,eAAO,YAAY,OAAO,UAAU;AAAA,MACtC,CAAC;AAAA,IACH,OAAO;AACL,WAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,eAAO,YAAY;AAAA,MACrB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,UAAM,sBAAsB,MAAM,KAAK,KAAK,OAAO,EAAE;AAAA,MACnD,CAAC,WAAW,OAAO;AAAA,IAAA;AAErB,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,aAAO,cAAc;AAAA,IACvB,CAAC;AACD,QAAI,wBAAwB,IAAI;AAC9B;AAAA,IACF;AACA,UAAM,aAAa,KAAK,QAAQ,sBAAsB,CAAC;AACvD,QAAI,YAAY;AACd,iBAAW,cAAc;AAAA,IAC3B;AAAA,EACF;AAAA,EAImB,aACjB,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,UAAM,SAAS,MAAM,KAAK,KAAK,OAAO,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;AAC9D,UAAM,eAAe,IAAI,IAAI,MAAM;AACnC,QAAI,OAAO,WAAW,aAAa,MAAM;AACvC,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AAEA,SAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,WAAK,wBAAwB,IAAI,QAAQ,OAAO,aAAa,UAAU,CAAC;AAExE,aAAO,iBAAiB,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,CAAC;AAEpE,YAAM,WAAW,IAAI,iBAAiB,CAAC,cAAc;AACnD,kBAAU,QAAQ,CAAC,aAAa;AAC9B,cACE,SAAS,kBAAkB,cAC3B,CAAC,OAAO,aAAa,qBAAqB,GAC1C;AACA,iBAAK,wBAAwB;AAAA,cAC3B;AAAA,cACA,OAAO,aAAa,UAAU;AAAA,YAAA;AAEhC,iBAAK,2BAAA;AAAA,UACP;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AACD,eAAS,QAAQ,QAAQ;AAAA,QACvB,YAAY;AAAA,QACZ,iBAAiB,CAAC,UAAU;AAAA,MAAA,CAC7B;AAED,aAAO,OAAO,KAAK;AACnB,aAAO,UAAU,KAAK;AACtB,aAAO,UAAU,KAAK;AACtB,aAAO,QAAQ,KAAK;AAEpB,UAAI,KAAK,UAAU;AACjB,eAAO,aAAa,uBAAuB,MAAM;AACjD,eAAO,WAAW;AAAA,MACpB;AAAA,IACF,CAAC;AAED,QAAI,CAAC,KAAK,SAAS,CAAC,KAAK,iBAAiB,KAAK,KAAK,GAAG;AACrD,YAAM,kBAAkB,KAAK,yBAAA;AAC7B,UAAI,iBAAiB;AACnB,aAAK,gBAAgB,gBAAgB,OAAO,KAAK;AAAA,MACnD;AAAA,IACF,OAAO;AACL,WAAK,gBAAgB,KAAK,OAAO,KAAK;AAAA,IACxC;AAEA,QAAI,KAAK,WAAW;AAClB,WAAK,gBAAgB,KAAK,SAAS;AAAA,IACrC;AAAA,EACF;AAAA,EAEQ,6BAA6B;AACnC,UAAM,gBAAgB,KAAK,iBAAiB,KAAK,KAAK;AACtD,QAAI,eAAe,YAAY,KAAK,oBAAA,GAAuB;AACzD,YAAM,kBAAkB,KAAK,yBAAA;AAC7B,UAAI,iBAAiB;AACnB,aAAK,gBAAgB,gBAAgB,KAAK;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EAEA,kBAAkB,OAAc;AAC9B,UAAM,EAAC,UAAU,MAAsB;AACvC,QAAI,KAAK,iBAAiB;AACxB,WAAK;AAAA,QACH,IAAI,YAAY,SAAS;AAAA,UACvB,QAAQ,EAAC,OAAO,eAAe,KAAK,MAAA;AAAA,QAAK,CAC1C;AAAA,MAAA;AAAA,IAEL,OAAO;AACL,WAAK,gBAAgB,KAAK;AAAA,IAC5B;AAAA,EACF;AAAA,EAES,WAAW,mBAAmC;AACrD,QAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,WAAK,gBAAgB,KAAK,KAAK;AAAA,IACjC;AAEA,QAAI,kBAAkB,IAAI,WAAW,GAAG;AACtC,WAAK,gBAAgB,KAAK,SAAS;AAAA,IACrC;AAEA,QACE,kBAAkB,IAAI,MAAM,KAC5B,kBAAkB,IAAI,SAAS,KAC/B,kBAAkB,IAAI,SAAS,KAC/B,kBAAkB,IAAI,OAAO,GAC7B;AACA,WAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,eAAO,OAAO,KAAK;AACnB,eAAO,UAAU,KAAK;AACtB,eAAO,UAAU,KAAK;AACtB,eAAO,QAAQ,KAAK;AAAA,MACtB,CAAC;AAAA,IACH;AAEA,QAAI,kBAAkB,IAAI,UAAU,GAAG;AACrC,WAAK,QAAQ,QAAQ,CAAC,WAAW;AAC/B,YAAI,KAAK,UAAU;AACjB,iBAAO,aAAa,uBAAuB,MAAM;AACjD,iBAAO,WAAW;AAAA,QACpB,OAAO;AACL,iBAAO,gBAAgB,qBAAqB;AAC5C,gBAAM,gBACJ,KAAK,wBAAwB,IAAI,MAAM,KAAK;AAC9C,iBAAO,WAAW;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,QAAQ,mBAAmC;AAClD,UAAM,QAAQ,iBAAiB;AAE/B,UAAM,gBAAgB,KAAK,iBAAiB,KAAK,KAAK;AACtD,QAAI,eAAe,YAAY,KAAK,oBAAA,GAAuB;AACzD,YAAM,kBAAkB,KAAK,yBAAA;AAC7B,UAAI,iBAAiB;AACnB,aAAK,gBAAgB,gBAAgB,KAAK;AAAA,MAC5C;AAAA,IACF;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU;AAAA,MACd,iBAAiB;AAAA,MACjB,MAAM,KAAK,YAAY,6BAA6B;AAAA,MACpD,SAAS,KAAK,YAAY,6BAA6B;AAAA,MACvD,YAAY,KAAK;AAAA,MACjB,mBAAmB,KAAK,SAAS,0BAA0B;AAAA,MAC3D,UAAU,KAAK;AAAA,MACf,OAAO,KAAK;AAAA,IAAA;AAGd,WAAO;AAAA,mBACQ,SAAS,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMlC;AAGF;AAhUa,qBA+TK,SAAS,UAAU,cAAc;AAvTvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,qBAQe,WAAA,SAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhBb,qBAgBe,WAAA,aAAA,CAAA;AAYA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA5Bb,qBA4Be,WAAA,QAAA,CAAA;AAWA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvCb,qBAuCe,WAAA,WAAA,CAAA;AAOC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA9Cd,qBA8CgB,WAAA,WAAA,CAAA;AASA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvDd,qBAuDgB,WAAA,mBAAA,CAAA;AAOe,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GA9D7B,qBA8D+B,WAAA,YAAA,CAAA;AAOA,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GArE7B,qBAqE+B,WAAA,SAAA,CAAA;AAG1C,gBAAA;AAAA,EADC,sBAAsB,EAAC,UAAU,2BAAA,CAA2B;AAAA,GAvElD,qBAwEX,WAAA,WAAA,CAAA;AAxEW,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}
+{"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {\n  ObcToggleButtonOption,\n  ObcToggleButtonOptionVariant,\n  ObcToggleButtonOptionType,\n} from '../toggle-button-option/toggle-button-option.js';\nimport componentStyle from './toggle-button-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nexport type ObcToggleButtonGroupValueChangeEvent = CustomEvent<{\n  value: string;\n  previousValue: string;\n}>;\n\n/**\n * `<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n *\n * Provides a horizontal group of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-option>` child element. The group manages selection\n * state automatically, deselecting the previous option when a new one is chosen.\n *\n * Appears as a visually unified set of buttons with clear selection indicators. Commonly used for switching\n * between views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\n * filtering options, or layout toggles (e.g., list vs. grid view).\n *\n * ### Features\n *\n * - **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n *   deselects the previous one. Similar to radio button behavior but with a button-like appearance.\n * - **Visual variants:**\n *   - `regular` (default): Standard appearance with full background and border styling.\n *   - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n *   - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n * - **Content type options:**\n *   - `text` (default): Options display text labels only.\n *   - `icon`: Options display only an icon (compact, suitable for limited space).\n *   - `iconText`: Options display an icon and text side-by-side.\n *   - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n * - **Size control:**\n *   - Standard size (default): Regular button dimensions.\n *   - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n * - **Layout behavior:**\n *   - By default, the group stretches to fill available container width, distributing space equally among options.\n *   - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n * - **External control mode:** When `externalControl` is true, the group emits selection events but does not\n *   update its own `value` property, allowing parent components to manage state (useful for form libraries or\n *   custom state management).\n * - **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled\n *   option leaves the group with no option selected, instead of defaulting to the first enabled option. Use\n *   this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not\n *   imply a choice the user has not made.\n * - **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n *   options can also be disabled independently while the group remains enabled.\n * - **Divider management:** Automatically shows visual dividers between options and hides the divider after\n *   the selected option for a seamless, unified appearance.\n * - **Property propagation:** The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n *   properties to all child `<obc-toggle-button-option>` elements for consistent styling.\n * - **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n *   group automatically selects the first enabled option to ensure a valid state.\n *\n * ### Usage Guidelines\n *\n * Use `<obc-toggle-button-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\n * alternative to radio buttons.\n *\n * **Ideal use cases:**\n * - View mode toggles (e.g., list vs. grid, map vs. chart)\n * - Filter options (e.g., all/active/completed tasks)\n * - Alignment or layout controls (e.g., left/center/right alignment)\n * - Time range selectors (e.g., day/week/month)\n * - Toolbar mode switches (e.g., edit/preview modes)\n *\n * **When not to use:**\n * - For binary on/off choices, use a switch or checkbox instead.\n * - For multiple selections from a set, use checkboxes or chips.\n * - For many options (6+), consider a dropdown/select or radio button list for better scannability.\n * - For navigation between pages or sections, use tabs or a navigation menu.\n *\n * **Best Practices:**\n * - Each option must have a unique `value` property to prevent selection conflicts.\n * - Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n * - For icon-only buttons (`type=\"icon\"`), ensure icons are universally recognizable or provide tooltips.\n * - Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n * - Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n * - Use `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Use `large` size for touch interfaces or when the control is a primary interaction element.\n *\n * **TODO(designer):** Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n *\n * ### Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. |\n *\n * ### Events\n *\n * - `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n *   Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n *\n * ### Example\n *\n * ```html\n * <obc-toggle-button-group value=\"list\" type=\"iconText\">\n *   <obc-toggle-button-option value=\"list\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     List\n *   </obc-toggle-button-option>\n *   <obc-toggle-button-option value=\"grid\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     Grid\n *   </obc-toggle-button-option>\n *   <obc-toggle-button-option value=\"table\">\n *     <obi-placeholder slot=\"icon\"></obi-placeholder>\n *     Table\n *   </obc-toggle-button-option>\n * </obc-toggle-button-group>\n * ```\n *\n * @slot - Place one or more `<obc-toggle-button-option>` elements here to define the selectable options.\n * @fires value {CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes.\n */\n@customElement('obc-toggle-button-group')\nexport class ObcToggleButtonGroup extends LitElement {\n  /**\n   * The currently selected option's value.\n   *\n   * Set this property to programmatically select an option. When the user selects a different option, this property updates and a `value` event is fired.\n   *\n   * If set to a value that does not match any enabled option, the first enabled option is selected by default.\n   */\n  @property({type: String}) value = '';\n\n  /**\n   * The value of the option that is activated.\n   *\n   * When the group is controlled by an external source, this property is used to set the value of the option that is activated.\n   * This is a visual indication that the option is clicked but not yet stored.\n   */\n  @property({type: String}) activated: string | undefined;\n\n  /**\n   * The visual type of the toggle button options.\n   *\n   * - `text` (default): Options display text only.\n   * - `icon`: Options display only an icon.\n   * - `iconText`: Options display an icon and text side-by-side.\n   * - `iconTextUnder`: Options display an icon above the text.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: String}) type = ObcToggleButtonOptionType.text;\n\n  /**\n   * The visual variant of the toggle button group.\n   *\n   * - `regular` (default): Standard appearance with background and border.\n   * - `flat`: Minimal style with no background or border.\n   * - `normal`: Alternative style variant.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: String}) variant = ObcToggleButtonOptionVariant.regular;\n\n  /**\n   * If true, the group shrinks to fit its content (\"hug\" the text) instead of stretching to fill the container.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: Boolean}) hugText = false;\n\n  /**\n   * If true, the group is controlled by an external source.\n   *\n   * When true, the group will not update its selection when the `value` property changes.\n   *\n   * Defaults to false.\n   */\n  @property({type: Boolean}) externalControl = false;\n\n  /**\n   * If true, a `value` that does not match any enabled option leaves the group with no option selected\n   * instead of defaulting to the first enabled option.\n   *\n   * This also applies when the currently selected option becomes disabled: the group clears its selection\n   * rather than falling back to another option.\n   *\n   * Defaults to false (the first enabled option is selected when the value does not match).\n   */\n  @property({type: Boolean}) allowEmptySelection = false;\n\n  /**\n   * Disables the entire toggle button group and all contained options when true.\n   *\n   * When disabled, no option can be selected or interacted with.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * If true, the group and all contained options use a larger size.\n   *\n   * This setting is propagated to all child `<obc-toggle-button-option>` elements.\n   */\n  @property({type: Boolean, reflect: true}) large = false;\n\n  @queryAssignedElements({selector: 'obc-toggle-button-option'})\n  options!: NodeListOf<ObcToggleButtonOption>;\n\n  private hasAnyEnabledOption(): boolean {\n    if (this.disabled) return false;\n    return Array.from(this.options).some((opt) => !opt.disabled);\n  }\n\n  private canSelectOption(value: string): boolean {\n    if (this.disabled) return false;\n    const option = this.getOptionByValue(value);\n    return option !== null && !option.disabled;\n  }\n\n  private getOptionByValue(value: string): ObcToggleButtonOption | null {\n    return Array.from(this.options).find((opt) => opt.value === value) || null;\n  }\n\n  private getFirstSelectableOption(): ObcToggleButtonOption | null {\n    if (this.disabled) return null;\n    return Array.from(this.options).find((opt) => !opt.disabled) || null;\n  }\n\n  private updateSelection(newValue: string, emitEvent: boolean = true) {\n    const oldValue = this.value;\n\n    if (!this.hasAnyEnabledOption()) {\n      this.options.forEach((option) => {\n        option.selected = option.value === this.value;\n      });\n      this.setNoDivider();\n      return;\n    }\n\n    if (!this.canSelectOption(newValue)) {\n      if (this.value && this.getOptionByValue(this.value)) {\n        this.options.forEach((option) => {\n          option.selected = option.value === this.value;\n        });\n        this.setNoDivider();\n        return;\n      }\n      if (this.allowEmptySelection) {\n        newValue = '';\n      } else {\n        const fallback = this.getFirstSelectableOption();\n        newValue = fallback?.value || '';\n      }\n    }\n\n    this.value = newValue;\n\n    this.options.forEach((option) => {\n      option.selected = option.value === newValue;\n    });\n\n    this.setNoDivider();\n\n    if (emitEvent && oldValue !== newValue) {\n      this.dispatchEvent(\n        new CustomEvent('value', {\n          detail: {value: newValue, previousValue: oldValue},\n        })\n      );\n    }\n  }\n\n  private updateActivated(newValue: string | undefined) {\n    if (newValue) {\n      this.options.forEach((option) => {\n        option.activated = option.value === newValue;\n      });\n    } else {\n      this.options.forEach((option) => {\n        option.activated = false;\n      });\n    }\n  }\n\n  private setNoDivider() {\n    const selectedOptionIndex = Array.from(this.options).findIndex(\n      (option) => option.selected\n    );\n    this.options.forEach((option) => {\n      option.showDivider = true;\n    });\n    if (selectedOptionIndex === -1) {\n      return;\n    }\n    const nextOption = this.options[selectedOptionIndex + 1];\n    if (nextOption) {\n      nextOption.showDivider = false;\n    }\n  }\n\n  private _originalDisabledStates = new Map<ObcToggleButtonOption, boolean>();\n\n  protected override firstUpdated(\n    _changedProperties: PropertyValues<unknown> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n\n    const values = Array.from(this.options).map((opt) => opt.value);\n    const uniqueValues = new Set(values);\n    if (values.length !== uniqueValues.size) {\n      console.warn(\n        'Toggle button group has duplicate values. This may cause unexpected behavior.'\n      );\n    }\n\n    this.options.forEach((option) => {\n      this._originalDisabledStates.set(option, option.hasAttribute('disabled'));\n\n      option.addEventListener('selected', (e) => this.handleOptionClick(e));\n\n      const observer = new MutationObserver((mutations) => {\n        mutations.forEach((mutation) => {\n          if (\n            mutation.attributeName === 'disabled' &&\n            !option.hasAttribute('data-group-disabled')\n          ) {\n            this._originalDisabledStates.set(\n              option,\n              option.hasAttribute('disabled')\n            );\n            this.handleOptionDisabledChange();\n          }\n        });\n      });\n      observer.observe(option, {\n        attributes: true,\n        attributeFilter: ['disabled'],\n      });\n\n      option.type = this.type;\n      option.variant = this.variant;\n      option.hugText = this.hugText;\n      option.large = this.large;\n\n      if (this.disabled) {\n        option.setAttribute('data-group-disabled', 'true');\n        option.disabled = true;\n      }\n    });\n\n    if (!this.value || !this.getOptionByValue(this.value)) {\n      if (this.allowEmptySelection) {\n        this.updateSelection('', false);\n      } else {\n        const firstSelectable = this.getFirstSelectableOption();\n        if (firstSelectable) {\n          this.updateSelection(firstSelectable.value, false);\n        }\n      }\n    } else {\n      this.updateSelection(this.value, false);\n    }\n\n    if (this.activated) {\n      this.updateActivated(this.activated);\n    }\n  }\n\n  private handleOptionDisabledChange() {\n    const currentOption = this.getOptionByValue(this.value);\n    if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n      if (this.allowEmptySelection) {\n        this.updateSelection('');\n        return;\n      }\n      const firstSelectable = this.getFirstSelectableOption();\n      if (firstSelectable) {\n        this.updateSelection(firstSelectable.value);\n      }\n    }\n  }\n\n  handleOptionClick(event: Event) {\n    const {value} = (event as CustomEvent).detail;\n    if (this.externalControl) {\n      this.dispatchEvent(\n        new CustomEvent('value', {\n          detail: {value, previousValue: this.value},\n        })\n      );\n    } else {\n      this.updateSelection(value);\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this.updateSelection(this.value);\n    }\n\n    if (changedProperties.has('activated')) {\n      this.updateActivated(this.activated);\n    }\n\n    if (\n      changedProperties.has('type') ||\n      changedProperties.has('variant') ||\n      changedProperties.has('hugText') ||\n      changedProperties.has('large')\n    ) {\n      this.options.forEach((option) => {\n        option.type = this.type;\n        option.variant = this.variant;\n        option.hugText = this.hugText;\n        option.large = this.large;\n      });\n    }\n\n    if (changedProperties.has('disabled')) {\n      this.options.forEach((option) => {\n        if (this.disabled) {\n          option.setAttribute('data-group-disabled', 'true');\n          option.disabled = true;\n        } else {\n          option.removeAttribute('data-group-disabled');\n          const originalState =\n            this._originalDisabledStates.get(option) || false;\n          option.disabled = originalState;\n        }\n      });\n    }\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    const currentOption = this.getOptionByValue(this.value);\n    if (currentOption?.disabled && this.hasAnyEnabledOption()) {\n      if (this.allowEmptySelection) {\n        this.updateSelection('');\n        return;\n      }\n      const firstSelectable = this.getFirstSelectableOption();\n      if (firstSelectable) {\n        this.updateSelection(firstSelectable.value);\n      }\n    }\n  }\n\n  override render() {\n    const classes = {\n      'outer-wrapper': true,\n      flat: this.variant === ObcToggleButtonOptionVariant.flat,\n      regular: this.variant === ObcToggleButtonOptionVariant.regular,\n      'hug-text': this.hugText,\n      'icon-text-under': this.type === ObcToggleButtonOptionType.iconTextUnder,\n      disabled: this.disabled,\n      large: this.large,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"wrapper\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-button-group': ObcToggleButtonGroup;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js

@@ -287,6 +287,10 @@ const compentStyle = css`
       align-self: stretch;
     }
 
+:is(:is(.wrapper .content) .alerts):not(.show-alerts) {
+        display: none;
+      }
+
 :is(:is(.wrapper .content) .alerts) .alert-icon {
         width: 24px;
         height: 24px;

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js.map

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

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts

@@ -16,6 +16,7 @@ export declare class ObcIntegrationFleetButton extends LitElement {
         warning: number;
         caution: number;
     };
+    showAlerts: boolean;
     render(): import('lit-html').TemplateResult<1>;
     renderAlertCount(): import('lit-html').TemplateResult<1>[];
     static styles: import('lit').CSSResult;

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-fleet-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,iCAAiC,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,MAAM,CAAM;IACvB,MAAM,EAAE,MAAM,CAAM;IAE9C,QAAQ,EAAE,6BAA6B,EAAE,CAAM;IACrB,UAAU,EAAE,MAAM,CAAM;IACN,MAAM,EAAE;QAClD,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAsC;IAE9B,MAAM;IAoCf,gBAAgB;IAiChB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}
+{"version":3,"file":"integration-fleet-button.d.ts","sourceRoot":"","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,iCAAiC,CAAC;AAEzC,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,QAAQ,EAAE,OAAO,CAAS;IAC3B,SAAS,EAAE,MAAM,CAAM;IACvB,MAAM,EAAE,MAAM,CAAM;IAE9C,QAAQ,EAAE,6BAA6B,EAAE,CAAM;IACrB,UAAU,EAAE,MAAM,CAAM;IACN,MAAM,EAAE;QAClD,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB,CAAsC;IACZ,UAAU,EAAE,OAAO,CAAS;IAE9C,MAAM;IA2Cf,gBAAgB;IAiChB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html } from "lit";
 import { customElement } from "../../decorator.js";
 import compentStyle from "./integration-fleet-button.css.js";
 import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
 import "../../components/badge/badge.js";
 var __defProp = Object.defineProperty;
@@ -23,6 +24,7 @@ let ObcIntegrationFleetButton = class extends LitElement {
     this.readouts = [];
     this.alertTopic = "";
     this.alerts = { alarm: 0, warning: 0, caution: 0 };
+    this.showAlerts = false;
   }
   render() {
     const hasAlert = this.alerts.alarm > 0 || this.alerts.warning > 0 || this.alerts.caution > 0;
@@ -42,7 +44,14 @@ let ObcIntegrationFleetButton = class extends LitElement {
                 </div>`
     )}
           </div>
-          <div class="alerts ${hasAlert ? "has-alert" : "no-alert"}">
+          <div
+            class=${classMap({
+      alerts: true,
+      "has-alert": hasAlert,
+      "no-alert": !hasAlert,
+      "show-alerts": this.showAlerts
+    })}
+          >
             <div class="alert-icon ">
               <slot name="alert-topic-icon"></slot>
             </div>
@@ -107,6 +116,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Object, attribute: false })
 ], ObcIntegrationFleetButton.prototype, "alerts", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcIntegrationFleetButton.prototype, "showAlerts", 2);
 ObcIntegrationFleetButton = __decorateClass([
   customElement("obc-integration-fleet-button")
 ], ObcIntegrationFleetButton);

package/dist/integration-systems/integration-fleet-button/integration-fleet-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-fleet-button.js","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-fleet-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {msg} from '@lit/localize';\nimport '../../components/badge/badge.js';\n\nexport interface IntegrationFleetButtonReadout {\n  label: string;\n  value: string;\n  unit: string;\n}\n\n@customElement('obc-integration-fleet-button')\nexport class ObcIntegrationFleetButton extends LitElement {\n  @property({type: Boolean}) selected: boolean = false;\n  @property({type: String}) fleetName: string = '';\n  @property({type: String}) status: string = '';\n  @property({type: Array, attribute: false})\n  readouts: IntegrationFleetButtonReadout[] = [];\n  @property({type: String}) alertTopic: string = '';\n  @property({type: Object, attribute: false}) alerts: {\n    alarm: number;\n    warning: number;\n    caution: number;\n  } = {alarm: 0, warning: 0, caution: 0};\n\n  override render() {\n    const hasAlert =\n      this.alerts.alarm > 0 ||\n      this.alerts.warning > 0 ||\n      this.alerts.caution > 0;\n    return html`\n      <button class=\"wrapper ${this.selected ? 'selected' : ''}\">\n        <div class=\"header\">\n          <div class=\"fleet-name\">${this.fleetName}</div>\n          <div class=\"status\">${this.status}</div>\n        </div>\n        <div class=\"content\">\n          <div class=\"readouts\">\n            ${this.readouts.map(\n              (readout) =>\n                html`<div class=\"readout\">\n                  <div class=\"readout-label\">${readout.label}</div>\n                  <div class=\"readout-value\">${readout.value}</div>\n                  <div class=\"readout-unit\">${readout.unit}</div>\n                </div>`\n            )}\n          </div>\n          <div class=\"alerts ${hasAlert ? 'has-alert' : 'no-alert'}\">\n            <div class=\"alert-icon \">\n              <slot name=\"alert-topic-icon\"></slot>\n            </div>\n            <div class=\"alert-topic\">${this.alertTopic}</div>\n            <div class=\"alert-counts\">\n              ${hasAlert ? this.renderAlertCount() : msg('No alerts')}\n            </div>\n          </div>\n        </div>\n      </button>\n    `;\n  }\n\n  renderAlertCount() {\n    const {alarm, warning, caution} = this.alerts;\n    const divs = [];\n    if (alarm > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"alarm\"\n          .number=\"${alarm}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    if (warning > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"warning\"\n          .number=\"${warning}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    if (caution > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"caution\"\n          .number=\"${caution}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    return divs;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-fleet-button': ObcIntegrationFleetButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAcO,IAAM,4BAAN,cAAwC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,WAAoB;AACrB,SAAA,YAAoB;AACpB,SAAA,SAAiB;AAE3C,SAAA,WAA4C,CAAA;AAClB,SAAA,aAAqB;AACH,SAAA,SAIxC,EAAC,OAAO,GAAG,SAAS,GAAG,SAAS,EAAA;AAAA,EAAC;AAAA,EAE5B,SAAS;AAChB,UAAM,WACJ,KAAK,OAAO,QAAQ,KACpB,KAAK,OAAO,UAAU,KACtB,KAAK,OAAO,UAAU;AACxB,WAAO;AAAA,+BACoB,KAAK,WAAW,aAAa,EAAE;AAAA;AAAA,oCAE1B,KAAK,SAAS;AAAA,gCAClB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,KAAK,SAAS;AAAA,MACd,CAAC,YACC;AAAA,+CAC+B,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA,IAAA,CAE7C;AAAA;AAAA,+BAEkB,WAAW,cAAc,UAAU;AAAA;AAAA;AAAA;AAAA,uCAI3B,KAAK,UAAU;AAAA;AAAA,gBAEtC,WAAW,KAAK,iBAAA,IAAqB,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnE;AAAA,EAEA,mBAAmB;AACjB,UAAM,EAAC,OAAO,SAAS,QAAA,IAAW,KAAK;AACvC,UAAM,OAAO,CAAA;AACb,QAAI,QAAQ,GAAG;AACb,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,KAAK;AAAA;AAAA;AAAA,MAAA;AAAA,IAItB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,WAAO;AAAA,EACT;AAGF;AAnFa,0BAkFK,SAAS,UAAU,YAAY;AAjFpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,0BACgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,0BAEe,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,0BAGe,WAAA,UAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,0BAKX,WAAA,YAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,0BAMe,WAAA,cAAA,CAAA;AACkB,gBAAA;AAAA,EAA3C,SAAS,EAAC,MAAM,QAAQ,WAAW,OAAM;AAAA,GAP/B,0BAOiC,WAAA,UAAA,CAAA;AAPjC,4BAAN,gBAAA;AAAA,EADN,cAAc,8BAA8B;AAAA,GAChC,yBAAA;"}
+{"version":3,"file":"integration-fleet-button.js","sources":["../../../src/integration-systems/integration-fleet-button/integration-fleet-button.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport compentStyle from './integration-fleet-button.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport '../../components/badge/badge.js';\n\nexport interface IntegrationFleetButtonReadout {\n  label: string;\n  value: string;\n  unit: string;\n}\n\n@customElement('obc-integration-fleet-button')\nexport class ObcIntegrationFleetButton extends LitElement {\n  @property({type: Boolean}) selected: boolean = false;\n  @property({type: String}) fleetName: string = '';\n  @property({type: String}) status: string = '';\n  @property({type: Array, attribute: false})\n  readouts: IntegrationFleetButtonReadout[] = [];\n  @property({type: String}) alertTopic: string = '';\n  @property({type: Object, attribute: false}) alerts: {\n    alarm: number;\n    warning: number;\n    caution: number;\n  } = {alarm: 0, warning: 0, caution: 0};\n  @property({type: Boolean}) showAlerts: boolean = false;\n\n  override render() {\n    const hasAlert =\n      this.alerts.alarm > 0 ||\n      this.alerts.warning > 0 ||\n      this.alerts.caution > 0;\n    return html`\n      <button class=\"wrapper ${this.selected ? 'selected' : ''}\">\n        <div class=\"header\">\n          <div class=\"fleet-name\">${this.fleetName}</div>\n          <div class=\"status\">${this.status}</div>\n        </div>\n        <div class=\"content\">\n          <div class=\"readouts\">\n            ${this.readouts.map(\n              (readout) =>\n                html`<div class=\"readout\">\n                  <div class=\"readout-label\">${readout.label}</div>\n                  <div class=\"readout-value\">${readout.value}</div>\n                  <div class=\"readout-unit\">${readout.unit}</div>\n                </div>`\n            )}\n          </div>\n          <div\n            class=${classMap({\n              alerts: true,\n              'has-alert': hasAlert,\n              'no-alert': !hasAlert,\n              'show-alerts': this.showAlerts,\n            })}\n          >\n            <div class=\"alert-icon \">\n              <slot name=\"alert-topic-icon\"></slot>\n            </div>\n            <div class=\"alert-topic\">${this.alertTopic}</div>\n            <div class=\"alert-counts\">\n              ${hasAlert ? this.renderAlertCount() : msg('No alerts')}\n            </div>\n          </div>\n        </div>\n      </button>\n    `;\n  }\n\n  renderAlertCount() {\n    const {alarm, warning, caution} = this.alerts;\n    const divs = [];\n    if (alarm > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"alarm\"\n          .number=\"${alarm}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    if (warning > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"warning\"\n          .number=\"${warning}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    if (caution > 0) {\n      divs.push(\n        html`<obc-badge\n          type=\"caution\"\n          .number=\"${caution}\"\n          size=\"large\"\n        ></obc-badge>`\n      );\n    }\n    return divs;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-integration-fleet-button': ObcIntegrationFleetButton;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAeO,IAAM,4BAAN,cAAwC,WAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA;AACsB,SAAA,WAAoB;AACrB,SAAA,YAAoB;AACpB,SAAA,SAAiB;AAE3C,SAAA,WAA4C,CAAA;AAClB,SAAA,aAAqB;AACH,SAAA,SAIxC,EAAC,OAAO,GAAG,SAAS,GAAG,SAAS,EAAA;AACT,SAAA,aAAsB;AAAA,EAAA;AAAA,EAExC,SAAS;AAChB,UAAM,WACJ,KAAK,OAAO,QAAQ,KACpB,KAAK,OAAO,UAAU,KACtB,KAAK,OAAO,UAAU;AACxB,WAAO;AAAA,+BACoB,KAAK,WAAW,aAAa,EAAE;AAAA;AAAA,oCAE1B,KAAK,SAAS;AAAA,gCAClB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,cAI7B,KAAK,SAAS;AAAA,MACd,CAAC,YACC;AAAA,+CAC+B,QAAQ,KAAK;AAAA,+CACb,QAAQ,KAAK;AAAA,8CACd,QAAQ,IAAI;AAAA;AAAA,IAAA,CAE7C;AAAA;AAAA;AAAA,oBAGO,SAAS;AAAA,MACf,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,YAAY,CAAC;AAAA,MACb,eAAe,KAAK;AAAA,IAAA,CACrB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,uCAKyB,KAAK,UAAU;AAAA;AAAA,gBAEtC,WAAW,KAAK,iBAAA,IAAqB,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnE;AAAA,EAEA,mBAAmB;AACjB,UAAM,EAAC,OAAO,SAAS,QAAA,IAAW,KAAK;AACvC,UAAM,OAAO,CAAA;AACb,QAAI,QAAQ,GAAG;AACb,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,KAAK;AAAA;AAAA;AAAA,MAAA;AAAA,IAItB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,QAAI,UAAU,GAAG;AACf,WAAK;AAAA,QACH;AAAA;AAAA,qBAEa,OAAO;AAAA;AAAA;AAAA,MAAA;AAAA,IAIxB;AACA,WAAO;AAAA,EACT;AAGF;AA3Fa,0BA0FK,SAAS,UAAU,YAAY;AAzFpB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GADd,0BACgB,WAAA,YAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,0BAEe,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,0BAGe,WAAA,UAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAJ9B,0BAKX,WAAA,YAAA,CAAA;AAC0B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,0BAMe,WAAA,cAAA,CAAA;AACkB,gBAAA;AAAA,EAA3C,SAAS,EAAC,MAAM,QAAQ,WAAW,OAAM;AAAA,GAP/B,0BAOiC,WAAA,UAAA,CAAA;AAKjB,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAZd,0BAYgB,WAAA,cAAA,CAAA;AAZhB,4BAAN,gBAAA;AAAA,EADN,cAAc,8BAA8B;AAAA,GAChC,yBAAA;"}

package/dist/navigation-instruments/graph-mini/graph-mini.css.js

@@ -33,7 +33,8 @@ const compentStyle = css`
   position: absolute;
   width: 4px;
   height: 4px;
-  right: -3px;
+  right: -3.5px;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);

package/dist/navigation-instruments/graph-mini/graph-mini.css.js.map

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

package/dist/navigation-instruments/graph-mini/graph-mini.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,KAAK,EAAG,cAAc,CAAC;IAGvB,OAAO,CAAC,CAAC,CAAc;IAEvB,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,WAAW;IAKV,YAAY;IA2CrB,aAAa;IASb,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAQf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,KAAK,EAAG,cAAc,CAAC;IAGvB,OAAO,CAAC,CAAC,CAAc;IAEvB,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,WAAW;IAKV,YAAY;IA2CrB,aAAa;IASb,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAUf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/graph-mini/graph-mini.js

@@ -26,8 +26,8 @@ let ObcGraphMini = class extends LitElement {
   }
   firstUpdated() {
     const opts = {
-      width: 48,
-      height: 48,
+      width: 32,
+      height: 32,
       scales: {
         x: { time: false, show: false },
         y: {
@@ -46,7 +46,7 @@ let ObcGraphMini = class extends LitElement {
         {},
         {
           stroke: this.getCssColor("--element-neutral-color"),
-          width: 2,
+          width: 1,
           points: { show: false }
         }
       ],
@@ -65,7 +65,7 @@ let ObcGraphMini = class extends LitElement {
       return;
     }
     const stroke = this.getCssColor("--element-neutral-color");
-    this.uplot.setSeries(1, { stroke, width: 2, points: { show: false } });
+    this.uplot.setSeries(1, { stroke, width: 1, points: { show: false } });
   }
   updateY() {
     if (!this.uplot) {
@@ -85,7 +85,9 @@ let ObcGraphMini = class extends LitElement {
   render() {
     return html`
       <div class="chart-container">
-        <div id="chart"><div id="dot" style="bottom: ${this.y}px; "></div></div>
+        <div id="chart">
+          <div id="dot" style="transform: translateY(${-this.y}px);"></div>
+        </div>
       </div>
     `;
   }

package/dist/navigation-instruments/graph-mini/graph-mini.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\n * @description A mini graph component\n *\n * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n */\n@customElement('obc-graph-mini')\nexport class ObcGraphMini extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Number})\n  minY: number | undefined;\n\n  @property({type: Number})\n  maxY: number | undefined;\n\n  @query('#chart')\n  chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  private uplot: uPlot | null = null;\n\n  private getCssColor(name: string) {\n    const color = getComputedStyle(this).getPropertyValue(name).trim();\n    return color;\n  }\n\n  override firstUpdated() {\n    const opts = {\n      width: 48,\n      height: 48,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: (\n            _self: uPlot,\n            initMin: number,\n            initMax: number,\n            _scaleKey: string\n          ) => {\n            const range = this.maxY ?? initMax - (this.minY ?? initMin);\n            return [\n              this.minY ?? initMin - range * 0.1,\n              this.maxY ?? initMax + range * 0.1,\n            ] as [number, number];\n          },\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this.getCssColor('--element-neutral-color'),\n          width: 2,\n          points: {show: false},\n        },\n      ],\n      axes: [\n        {show: false},\n        {ticks: {show: false}, show: false, grid: {show: false}},\n      ],\n      legend: {show: false},\n      cursor: {show: false},\n    };\n\n    this.uplot = new uPlot(opts, this.data, this.chart);\n    requestAnimationFrame(() => this.updateY());\n  }\n\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this.getCssColor('--element-neutral-color');\n    // @ts-expect-error - stroke is not a property of the Series interface\n    this.uplot.setSeries(1, {stroke: stroke, width: 2, points: {show: false}});\n  }\n\n  private updateY() {\n    if (!this.uplot) {\n      return;\n    }\n    const lastY = this.data[1][this.data[1].length - 1];\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(lastY);\n    this.y = yRatio * 32 - 3;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"chart-container\">\n        <div id=\"chart\"><div id=\"dot\" style=\"bottom: ${this.y}px; \"></div></div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-graph-mini': ObcGraphMini;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\n * @description A mini graph component\n *\n * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n */\n@customElement('obc-graph-mini')\nexport class ObcGraphMini extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Number})\n  minY: number | undefined;\n\n  @property({type: Number})\n  maxY: number | undefined;\n\n  @query('#chart')\n  chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  private uplot: uPlot | null = null;\n\n  private getCssColor(name: string) {\n    const color = getComputedStyle(this).getPropertyValue(name).trim();\n    return color;\n  }\n\n  override firstUpdated() {\n    const opts = {\n      width: 32,\n      height: 32,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: (\n            _self: uPlot,\n            initMin: number,\n            initMax: number,\n            _scaleKey: string\n          ) => {\n            const range = this.maxY ?? initMax - (this.minY ?? initMin);\n            return [\n              this.minY ?? initMin - range * 0.1,\n              this.maxY ?? initMax + range * 0.1,\n            ] as [number, number];\n          },\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this.getCssColor('--element-neutral-color'),\n          width: 1,\n          points: {show: false},\n        },\n      ],\n      axes: [\n        {show: false},\n        {ticks: {show: false}, show: false, grid: {show: false}},\n      ],\n      legend: {show: false},\n      cursor: {show: false},\n    };\n\n    this.uplot = new uPlot(opts, this.data, this.chart);\n    requestAnimationFrame(() => this.updateY());\n  }\n\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this.getCssColor('--element-neutral-color');\n    // @ts-expect-error - stroke is not a property of the Series interface\n    this.uplot.setSeries(1, {stroke: stroke, width: 1, points: {show: false}});\n  }\n\n  private updateY() {\n    if (!this.uplot) {\n      return;\n    }\n    const lastY = this.data[1][this.data[1].length - 1];\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(lastY);\n    this.y = yRatio * 32 - 3;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"chart-container\">\n        <div id=\"chart\">\n          <div id=\"dot\" style=\"transform: translateY(${-this.y}px);\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-graph-mini': ObcGraphMini;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+const compentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+#dot {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  right: -3px;
+  bottom: -3px;
+  border-radius: 50%;
+  background: var(--element-neutral-color);
+  border: 1px solid var(--border-silhouette-color);
+  z-index: 1;
+}
+
+.enhanced #dot {
+  background: var(--element-neutral-enhanced-color);
+}
+
+.medium #dot {
+  width: 6px;
+  height: 6px;
+  right: -4px;
+  bottom: -4px;
+}
+
+.large #dot {
+  width: 8px;
+  height: 8px;
+  right: -5px;
+  bottom: -5px;
+}
+
+#zero-line {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: -0.5px;
+  background: var(--element-disabled-color);
+  border-radius: 2px;
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=indicator-graph.css.js.map

package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js.map

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

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare enum ObcIndicatorGraphSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export declare enum ObcIndicatorGraphPriority {
+    regular = "regular",
+    enhanced = "enhanced"
+}
+export interface ObcIndicatorGraphLayout {
+    size?: ObcIndicatorGraphSize;
+    priority?: ObcIndicatorGraphPriority;
+    y?: {
+        min?: number;
+        max?: number;
+    };
+}
+/**
+ * @element obc-indicator-graph
+ * @description A mini graph component
+ *
+ * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
+ */
+export declare class ObcIndicatorGraph extends LitElement {
+    data: [number[], number[]];
+    layout: ObcIndicatorGraphLayout;
+    private chart;
+    private y;
+    private zeroLineY;
+    private uplot;
+    private resizeObserver;
+    private getCssColor;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private updateSize;
+    private _range;
+    private get _effectiveSize();
+    private get _effectivePriority();
+    private _getStrokeWidth;
+    private _getStrokeColor;
+    updatePalette(): void;
+    private updateY;
+    private updateZeroLine;
+    updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-indicator-graph': ObcIndicatorGraph;
+    }
+}
+//# sourceMappingURL=indicator-graph.d.ts.map

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CAClC;AAED;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,MAAM,EAAE,uBAAuB,CAAM;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,CAAC,CAAc;IAGvB,OAAO,CAAC,SAAS,CAAa;IAE9B,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,WAAW;IAKV,YAAY;IAmCZ,oBAAoB;IAQ7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IASvB,aAAa;IAab,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IASb,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAsBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/navigation-instruments/indicator-graph/indicator-graph.js

@@ -0,0 +1,203 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import compentStyle from "./indicator-graph.css.js";
+import uPlot from "uplot";
+import { customElement } from "../../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcIndicatorGraphSize = /* @__PURE__ */ ((ObcIndicatorGraphSize2) => {
+  ObcIndicatorGraphSize2["small"] = "small";
+  ObcIndicatorGraphSize2["medium"] = "medium";
+  ObcIndicatorGraphSize2["large"] = "large";
+  return ObcIndicatorGraphSize2;
+})(ObcIndicatorGraphSize || {});
+var ObcIndicatorGraphPriority = /* @__PURE__ */ ((ObcIndicatorGraphPriority2) => {
+  ObcIndicatorGraphPriority2["regular"] = "regular";
+  ObcIndicatorGraphPriority2["enhanced"] = "enhanced";
+  return ObcIndicatorGraphPriority2;
+})(ObcIndicatorGraphPriority || {});
+let ObcIndicatorGraph = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [[], []];
+    this.layout = {};
+    this.y = 24;
+    this.zeroLineY = 0;
+    this.uplot = null;
+    this.resizeObserver = null;
+  }
+  getCssColor(name) {
+    const color = getComputedStyle(this).getPropertyValue(name).trim();
+    return color;
+  }
+  firstUpdated() {
+    const opts = {
+      width: this.chart.clientWidth,
+      height: this.chart.clientHeight,
+      scales: {
+        x: { time: false, show: false },
+        y: {
+          auto: true,
+          show: false,
+          range: this._range.bind(this)
+        }
+      },
+      series: [
+        {},
+        {
+          stroke: this._getStrokeColor(),
+          width: this._getStrokeWidth(),
+          points: { show: false }
+        }
+      ],
+      axes: [
+        { show: false },
+        { ticks: { show: false }, show: false, grid: { show: false } }
+      ],
+      legend: { show: false },
+      cursor: { show: false }
+    };
+    this.uplot = new uPlot(opts, this.data, this.chart);
+    requestAnimationFrame(() => this.updateY());
+    this.resizeObserver = new ResizeObserver(() => this.updateSize());
+    this.resizeObserver.observe(this.chart);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.uplot?.destroy();
+    this.uplot = null;
+  }
+  updateSize() {
+    if (!this.uplot) {
+      return;
+    }
+    this.uplot.setSize({
+      width: this.chart.clientWidth,
+      height: this.chart.clientHeight
+    });
+    this.updateY();
+  }
+  _range(_self, initMin, initMax, _scaleKey) {
+    const { min: minY, max: maxY } = this.layout.y ?? {};
+    const range = maxY ?? initMax - (minY ?? initMin);
+    let min = minY ?? initMin - range * 0.1;
+    if (minY === void 0) {
+      min = Math.min(0, min);
+    }
+    return [min, maxY ?? initMax + range * 0.1];
+  }
+  get _effectiveSize() {
+    return this.layout.size ?? "medium";
+  }
+  get _effectivePriority() {
+    return this.layout.priority ?? "regular";
+  }
+  _getStrokeWidth() {
+    switch (this._effectiveSize) {
+      case "small":
+        return 1;
+      case "medium":
+        return 1.5;
+      case "large":
+        return 2;
+    }
+  }
+  _getStrokeColor() {
+    switch (this._effectivePriority) {
+      case "regular":
+        return this.getCssColor("--element-neutral-color");
+      case "enhanced":
+        return this.getCssColor("--element-neutral-enhanced-color");
+    }
+  }
+  updatePalette() {
+    if (!this.uplot) {
+      return;
+    }
+    const stroke = this._getStrokeColor();
+    this.uplot.setSeries(1, {
+      // @ts-expect-error - stroke is not a property of the Series interface
+      stroke,
+      width: this._getStrokeWidth(),
+      points: { show: false }
+    });
+  }
+  updateY() {
+    if (!this.uplot) {
+      return;
+    }
+    const lastY = this.data[1][this.data[1].length - 1];
+    const yRatio = this.uplot.scales.y.valToPct(lastY);
+    this.y = yRatio * this.chart.clientHeight;
+    this.updateZeroLine();
+  }
+  updateZeroLine() {
+    if (!this.uplot) {
+      return;
+    }
+    const yRatio = this.uplot.scales.y.valToPct(0);
+    this.zeroLineY = yRatio * this.chart.clientHeight;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("data") || changedProperties.has("layout")) {
+      this.updatePalette();
+      this.uplot?.setData(this.data);
+      requestAnimationFrame(() => this.updateY());
+    }
+  }
+  render() {
+    return html`
+      <div
+        class="chart-container ${this._effectivePriority} ${this._effectiveSize}"
+      >
+        <div
+          id="zero-line"
+          style="transform: translateY(${-this.zeroLineY}px);
+          display: ${this.zeroLineY > -0.5 ? "block" : "none"};
+          "
+        ></div>
+        <div
+          id="dot"
+          style="transform: translateY(${-this.y}px);
+        display: ${this.y > -0.5 ? "block" : "none"};
+        "
+        ></div>
+      </div>
+    `;
+  }
+};
+ObcIndicatorGraph.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Array })
+], ObcIndicatorGraph.prototype, "data", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcIndicatorGraph.prototype, "layout", 2);
+__decorateClass([
+  query(".chart-container")
+], ObcIndicatorGraph.prototype, "chart", 2);
+__decorateClass([
+  state()
+], ObcIndicatorGraph.prototype, "y", 2);
+__decorateClass([
+  state()
+], ObcIndicatorGraph.prototype, "zeroLineY", 2);
+ObcIndicatorGraph = __decorateClass([
+  customElement("obc-indicator-graph")
+], ObcIndicatorGraph);
+export {
+  ObcIndicatorGraph,
+  ObcIndicatorGraphPriority,
+  ObcIndicatorGraphSize
+};
+//# sourceMappingURL=indicator-graph.js.map