npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.73 → 2.0.0-next.75 - Mend

@oicl/openbridge-webcomponents 2.0.0-next.73 → 2.0.0-next.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js CHANGED Viewed

@@ -20,6 +20,7 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
     this.value = "";
     this.type = ObcToggleButtonVerticalOptionType.regular;
     this.hugWidth = false;
+    this.allowEmptySelection = false;
     this.disabled = false;
     this._originalDisabledStates = /* @__PURE__ */ new Map();
   }
@@ -56,8 +57,12 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
         this.updateDividers();
         return;
       }
-      const fallback = this.getFirstSelectableOption();
-      newValue = fallback?.value || "";
+      if (this.allowEmptySelection) {
+        newValue = "";
+      } else {
+        const fallback = this.getFirstSelectableOption();
+        newValue = fallback?.value || "";
+      }
     }
     this.value = newValue;
     this.options.forEach((option) => {
@@ -100,9 +105,13 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
       }
     });
     if (!this.value || !this.getOptionByValue(this.value)) {
-      const firstSelectable = this.getFirstSelectableOption();
-      if (firstSelectable) {
-        this.updateSelection(firstSelectable.value, false);
+      if (this.allowEmptySelection) {
+        this.updateSelection("", false);
+      } else {
+        const firstSelectable = this.getFirstSelectableOption();
+        if (firstSelectable) {
+          this.updateSelection(firstSelectable.value, false);
+        }
       }
     } else {
       this.updateSelection(this.value, false);
@@ -111,6 +120,10 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
   handleOptionDisabledChange() {
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection("");
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -143,6 +156,10 @@ let ObcToggleButtonVerticalGroup = class extends LitElement {
     super.updated(changedProperties);
     const currentOption = this.getOptionByValue(this.value);
     if (currentOption?.disabled && this.hasAnyEnabledOption()) {
+      if (this.allowEmptySelection) {
+        this.updateSelection("");
+        return;
+      }
       const firstSelectable = this.getFirstSelectableOption();
       if (firstSelectable) {
         this.updateSelection(firstSelectable.value);
@@ -185,6 +202,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcToggleButtonVerticalGroup.prototype, "hugWidth", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcToggleButtonVerticalGroup.prototype, "allowEmptySelection", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ObcToggleButtonVerticalGroup.prototype, "disabled", 2);

package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-button-vertical-group.js","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n ObcToggleButtonVerticalOption,\n ObcToggleButtonVerticalOptionType,\n} from '../toggle-button-vertical-option/toggle-button-vertical-option.js';\n\nimport style from './toggle-button-vertical-group.css?inline';\n\nexport type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\n/*\n `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n \n Provides a vertical stack of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-vertical-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 vertical column of buttons with clear selection indicators. Commonly used for sidebar\n * navigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\n * space is available and horizontal space is limited, such as side panels or navigation drawers.\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 vertical 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 * - Layout behavior:\n * - By default, the group stretches to fill available container width, with options stacked vertically.\n * - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\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 last option for a clean, unified appearance.\n * - Property propagation: The group automatically synchronizes the `type` property to all child\n * `<obc-toggle-button-vertical-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-vertical-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\n * integrated alternative to radio buttons for vertical navigation or control panels.\n \n Ideal use cases:\n * - Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n * - Vertical filter controls (e.g., all/active/archived items)\n * - Mode selectors in vertical panels (e.g., edit/preview/code modes)\n * - View toggles in constrained horizontal spaces (e.g., mobile side panels)\n * - Control panels with vertical layout preference\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 horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\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, 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 `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. \|\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-vertical-group value=\"list\" type=\"regular\">\n * <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * </obc-toggle-button-vertical-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-vertical-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-vertical-group')\nexport class ObcToggleButtonVerticalGroup extends LitElement {\n /\n The value of the currently selected option.\n \n Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option.\n /\n @property({type: String}) value = '';\n\n /\n Visual style for all options in the group.\n \n One of: \"flat\", \"regular\", \"normal\".\n /\n @property({type: String}) type = ObcToggleButtonVerticalOptionType.regular;\n\n /\n If true, the group shrinks to fit its content width instead of stretching to fill its container.\n \n Defaults to false.\n /\n @property({type: Boolean}) hugWidth = false;\n\n /\n Disables the entire group and all contained options.\n \n When set to true, all options become non-interactive, regardless of their individual disabled state.\n \n Defaults to false.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-vertical-option'})\n private options!: NodeListOf<ObcToggleButtonVerticalOption>;\n\n private _originalDisabledStates = new Map<\n ObcToggleButtonVerticalOption,\n boolean\n >();\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(\n value: string\n ): ObcToggleButtonVerticalOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonVerticalOption \| 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.updateDividers();\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.updateDividers();\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.updateDividers();\n\n if (emitEvent && oldValue !== newValue) {\n /\n Fired when the selected option changes.\n \n The event detail contains the new value and the previous value:\n * `{ value: string, previousValue: string }`\n \n @event value\n */\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n }\n\n protected override firstUpdated(changed: PropertyValues) {\n super.firstUpdated(changed);\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 vertical group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((opt) => {\n this._originalDisabledStates.set(opt, opt.disabled);\n\n opt.addEventListener('selected', (e) => this.onOptionSelected(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !opt.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(opt, opt.disabled);\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(opt, {attributes: true, attributeFilter: ['disabled']});\n\n opt.type = this.type;\n\n if (this.disabled) {\n opt.setAttribute('data-group-disabled', 'true');\n opt.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\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 override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changed.has('type')) {\n this.options.forEach((opt) => {\n opt.type = this.type;\n });\n }\n\n if (changed.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 private updateDividers(): void {\n const last = this.options.length - 1;\n this.options.forEach((opt, idx) => {\n opt.showDivider = idx !== last;\n });\n }\n\n private onOptionSelected(e: Event): void {\n const {value} = (e as CustomEvent).detail;\n this.updateSelection(value);\n }\n\n override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.type === ObcToggleButtonVerticalOptionType.flat,\n regular: this.type === ObcToggleButtonVerticalOptionType.regular,\n normal: this.type === ObcToggleButtonVerticalOptionType.normal,\n 'hug-width': this.hugWidth,\n disabled: this.disabled,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\"><slot></slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(style);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-vertical-group': ObcToggleButtonVerticalGroup;\n }\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"toggle-button-vertical-group.js","sources":["../../../src/components/toggle-button-vertical-group/toggle-button-vertical-group.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {\n ObcToggleButtonVerticalOption,\n ObcToggleButtonVerticalOptionType,\n} from '../toggle-button-vertical-option/toggle-button-vertical-option.js';\n\nimport style from './toggle-button-vertical-group.css?inline';\n\nexport type ObcToggleButtonVerticalGroupValueChangeEvent = CustomEvent<{\n value: string;\n previousValue: string;\n}>;\n\n/*\n `<obc-toggle-button-vertical-group>` – A vertically oriented segmented control for selecting a single option from a set.\n \n Provides a vertical stack of connected toggle buttons where only one option can be selected at a time.\n * Each option is represented by an `<obc-toggle-button-vertical-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 vertical column of buttons with clear selection indicators. Commonly used for sidebar\n * navigation, vertical filter controls, or mode selection in vertical layouts. Ideal for scenarios where vertical\n * space is available and horizontal space is limited, such as side panels or navigation drawers.\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 vertical 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 * - Layout behavior:\n * - By default, the group stretches to fill available container width, with options stacked vertically.\n * - When `hugWidth` is true, the group shrinks to fit its content width instead of expanding.\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 last option for a clean, unified appearance.\n * - Property propagation: The group automatically synchronizes the `type` property to all child\n * `<obc-toggle-button-vertical-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-vertical-group>` when you need users to choose exactly one option from a small set of\n * mutually exclusive choices (typically 2-5 options) in a vertical layout. It provides a more compact and visually\n * integrated alternative to radio buttons for vertical navigation or control panels.\n \n Ideal use cases:\n * - Sidebar navigation toggles (e.g., dashboard/reports/settings views)\n * - Vertical filter controls (e.g., all/active/archived items)\n * - Mode selectors in vertical panels (e.g., edit/preview/code modes)\n * - View toggles in constrained horizontal spaces (e.g., mobile side panels)\n * - Control panels with vertical layout preference\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 horizontal layouts with adequate space, use `<obc-toggle-button-group>` instead.\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, 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 `type=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n * - Ensure adequate vertical space for the number of options to avoid excessive scrolling or cramped layouts.\n \n ### Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|-----------\|-----------------\|---------\|\n * \| (default) \| Always \| Place one or more `<obc-toggle-button-vertical-option>` elements here to define the selectable options in the group. Each option can include an icon via its own `icon` slot. \|\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-vertical-group value=\"list\" type=\"regular\">\n * <obc-toggle-button-vertical-option value=\"list\" label=\"List\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"grid\" label=\"Grid\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * <obc-toggle-button-vertical-option value=\"table\" label=\"Table\" hasIcon>\n * <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-toggle-button-vertical-option>\n * </obc-toggle-button-vertical-group>\n * ```\n \n @slot - Place one or more `<obc-toggle-button-vertical-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-vertical-group')\nexport class ObcToggleButtonVerticalGroup extends LitElement {\n /\n The value of the currently selected option.\n \n Setting this property programmatically updates the selection. If the value does not match any enabled option, the group selects the first available enabled option.\n /\n @property({type: String}) value = '';\n\n /\n Visual style for all options in the group.\n \n One of: \"flat\", \"regular\", \"normal\".\n /\n @property({type: String}) type = ObcToggleButtonVerticalOptionType.regular;\n\n /\n If true, the group shrinks to fit its content width instead of stretching to fill its container.\n \n Defaults to false.\n /\n @property({type: Boolean}) hugWidth = 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 group and all contained options.\n \n When set to true, all options become non-interactive, regardless of their individual disabled state.\n \n Defaults to false.\n /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n @queryAssignedElements({selector: 'obc-toggle-button-vertical-option'})\n private options!: NodeListOf<ObcToggleButtonVerticalOption>;\n\n private _originalDisabledStates = new Map<\n ObcToggleButtonVerticalOption,\n boolean\n >();\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(\n value: string\n ): ObcToggleButtonVerticalOption \| null {\n return Array.from(this.options).find((opt) => opt.value === value) \|\| null;\n }\n\n private getFirstSelectableOption(): ObcToggleButtonVerticalOption \| 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.updateDividers();\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.updateDividers();\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.updateDividers();\n\n if (emitEvent && oldValue !== newValue) {\n /\n Fired when the selected option changes.\n \n The event detail contains the new value and the previous value:\n * `{ value: string, previousValue: string }`\n \n @event value\n */\n this.dispatchEvent(\n new CustomEvent('value', {\n detail: {value: newValue, previousValue: oldValue},\n })\n );\n }\n }\n\n protected override firstUpdated(changed: PropertyValues) {\n super.firstUpdated(changed);\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 vertical group has duplicate values. This may cause unexpected behavior.'\n );\n }\n\n this.options.forEach((opt) => {\n this._originalDisabledStates.set(opt, opt.disabled);\n\n opt.addEventListener('selected', (e) => this.onOptionSelected(e));\n\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.attributeName === 'disabled' &&\n !opt.hasAttribute('data-group-disabled')\n ) {\n this._originalDisabledStates.set(opt, opt.disabled);\n this.handleOptionDisabledChange();\n }\n });\n });\n observer.observe(opt, {attributes: true, attributeFilter: ['disabled']});\n\n opt.type = this.type;\n\n if (this.disabled) {\n opt.setAttribute('data-group-disabled', 'true');\n opt.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\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 override willUpdate(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.updateSelection(this.value);\n }\n\n if (changed.has('type')) {\n this.options.forEach((opt) => {\n opt.type = this.type;\n });\n }\n\n if (changed.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 private updateDividers(): void {\n const last = this.options.length - 1;\n this.options.forEach((opt, idx) => {\n opt.showDivider = idx !== last;\n });\n }\n\n private onOptionSelected(e: Event): void {\n const {value} = (e as CustomEvent).detail;\n this.updateSelection(value);\n }\n\n override render() {\n const classes = {\n 'outer-wrapper': true,\n flat: this.type === ObcToggleButtonVerticalOptionType.flat,\n regular: this.type === ObcToggleButtonVerticalOptionType.regular,\n normal: this.type === ObcToggleButtonVerticalOptionType.normal,\n 'hug-width': this.hugWidth,\n disabled: this.disabled,\n };\n\n return html`\n <div class=${classMap(classes)}>\n <div class=\"wrapper\"><slot></slot></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(style);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-toggle-button-vertical-group': ObcToggleButtonVerticalGroup;\n }\n}\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
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;AAGD,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,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;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,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,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;IAef,OAAO,CAAC,cAAc;IAab,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"}
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;AAGD,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,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;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,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,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;IAUb,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,cAAc;IAab,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 CHANGED Viewed

@@ -124,13 +124,10 @@ let ObcIndicatorGraph = class extends LitElement {
     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 }
-    });
+    const series = this.uplot.series[1];
+    series.stroke = () => this._getStrokeColor();
+    series.width = this._getStrokeWidth();
+    this.uplot.redraw();
   }
   updateY() {
     if (!this.uplot) {

package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number; showZeroLine?: boolean};\n}\n\n/*\n @element obc-indicator-graph\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-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('.chart-container')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number \| undefined = undefined;\n\n @state()\n private zeroLineY: number \| undefined = undefined;\n\n private uplot: uPlot \| null = null;\n private resizeObserver: ResizeObserver \| 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: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\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 this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range 0.1;\n if (minY === undefined && this.layout.y?.showZeroLine !== false) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const stroke = this._getStrokeColor();\n this.uplot.setSeries(1, {\n // @ts-expect-error - stroke is not a property of the Series interface\n stroke: stroke,\n width: this._getStrokeWidth(),\n points: {show: false},\n });\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 if (yRatio < 0 \|\| yRatio > 1) {\n this.y = undefined;\n } else {\n this.y = yRatio * this.chart.clientHeight;\n }\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n if (yRatio < 0 \|\| yRatio > 1) {\n this.zeroLineY = undefined;\n return;\n }\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') \|\| changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-(this.y ?? 0)}px);\n display: ${this.y !== undefined ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":"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"}
1	+ {"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n small = 'small',\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n regular = 'regular',\n enhanced = 'enhanced',\n}\n\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n size?: ObcIndicatorGraphSize;\n priority?: ObcIndicatorGraphPriority;\n y?: {min?: number; max?: number; showZeroLine?: boolean};\n}\n\n/*\n @element obc-indicator-graph\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-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n @property({type: Array})\n data: [number[], number[]] = [[], []];\n\n @property({type: Object})\n layout: ObcIndicatorGraphLayout = {};\n\n @query('.chart-container')\n private chart!: HTMLDivElement;\n\n @state()\n private y: number \| undefined = undefined;\n\n @state()\n private zeroLineY: number \| undefined = undefined;\n\n private uplot: uPlot \| null = null;\n private resizeObserver: ResizeObserver \| 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: this.chart.clientWidth,\n height: this.chart.clientHeight,\n scales: {\n x: {time: false, show: false},\n y: {\n auto: true,\n show: false,\n range: this._range.bind(this),\n },\n },\n series: [\n {},\n {\n stroke: this._getStrokeColor(),\n width: this._getStrokeWidth(),\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 this.resizeObserver = new ResizeObserver(() => this.updateSize());\n this.resizeObserver.observe(this.chart);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n this.resizeObserver = null;\n this.uplot?.destroy();\n this.uplot = null;\n }\n\n private updateSize() {\n if (!this.uplot) {\n return;\n }\n this.uplot.setSize({\n width: this.chart.clientWidth,\n height: this.chart.clientHeight,\n });\n this.updateY();\n }\n\n private _range(\n _self: uPlot,\n initMin: number,\n initMax: number,\n _scaleKey: string\n ): [number, number] {\n const {min: minY, max: maxY} = this.layout.y ?? {};\n const range = maxY ?? initMax - (minY ?? initMin);\n let min = minY ?? initMin - range 0.1;\n if (minY === undefined && this.layout.y?.showZeroLine !== false) {\n min = Math.min(0, min);\n }\n return [min, maxY ?? initMax + range * 0.1] as [number, number];\n }\n\n private get _effectiveSize() {\n return this.layout.size ?? ObcIndicatorGraphSize.medium;\n }\n\n private get _effectivePriority() {\n return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n }\n\n private _getStrokeWidth() {\n switch (this._effectiveSize) {\n case ObcIndicatorGraphSize.small:\n return 1;\n case ObcIndicatorGraphSize.medium:\n return 1.5;\n case ObcIndicatorGraphSize.large:\n return 2;\n }\n }\n\n private _getStrokeColor() {\n switch (this._effectivePriority) {\n case ObcIndicatorGraphPriority.regular:\n return this.getCssColor('--element-neutral-color');\n case ObcIndicatorGraphPriority.enhanced:\n return this.getCssColor('--element-neutral-enhanced-color');\n }\n }\n\n updatePalette() {\n if (!this.uplot) {\n return;\n }\n const series = this.uplot.series[1];\n series.stroke = () => this._getStrokeColor();\n series.width = this._getStrokeWidth();\n this.uplot.redraw();\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 if (yRatio < 0 \|\| yRatio > 1) {\n this.y = undefined;\n } else {\n this.y = yRatio * this.chart.clientHeight;\n }\n this.updateZeroLine();\n }\n\n private updateZeroLine() {\n if (!this.uplot) {\n return;\n }\n // @ts-expect-error - valToPct is not a property of the Scale interface\n const yRatio = this.uplot.scales.y.valToPct(0);\n if (yRatio < 0 \|\| yRatio > 1) {\n this.zeroLineY = undefined;\n return;\n }\n this.zeroLineY = yRatio * this.chart.clientHeight;\n }\n\n override updated(changedProperties: PropertyValues) {\n if (changedProperties.has('data') \|\| changedProperties.has('layout')) {\n this.updatePalette();\n this.uplot?.setData(this.data);\n requestAnimationFrame(() => this.updateY());\n }\n }\n\n override render() {\n return html`\n <div\n class=\"chart-container ${this._effectivePriority} ${this\n ._effectiveSize}\"\n >\n <div\n id=\"zero-line\"\n style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n \"\n ></div>\n <div\n id=\"dot\"\n style=\"transform: translateY(${-(this.y ?? 0)}px);\n display: ${this.y !== undefined ? 'block' : 'none'};\n \"\n ></div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-indicator-graph': ObcIndicatorGraph;\n }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":"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"}

package/package.json CHANGED Viewed

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