@oicl/openbridge-webcomponents 2.0.0-next.118 → 2.0.0-next.119

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.
@@ -32302,7 +32302,7 @@
32302
32302
  "declarations": [
32303
32303
  {
32304
32304
  "kind": "class",
32305
- "description": "",
32305
+ "description": "Vertical line component\n\nThe vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.",
32306
32306
  "name": "ObcVerticalLine",
32307
32307
  "members": [
32308
32308
  {
@@ -32359,6 +32359,7 @@
32359
32359
  "name": "LitElement",
32360
32360
  "package": "lit"
32361
32361
  },
32362
+ "deprecated": "true",
32362
32363
  "tagName": "obc-vertical-line",
32363
32364
  "customElement": true
32364
32365
  }
@@ -1,5 +1,11 @@
1
1
  import { LitElement } from 'lit';
2
2
  import { LineMedium, LineType } from '../index.js';
3
+ /**
4
+ * Vertical line component
5
+ *
6
+ * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.
7
+ * @deprecated
8
+ */
3
9
  export declare class ObcVerticalLine extends LitElement {
4
10
  medium: LineMedium;
5
11
  lineType: LineType;
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,aAAa,CAAC;AAQvE,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1
+ {"version":3,"file":"vertical-line.d.ts","sourceRoot":"","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAa,QAAQ,EAAY,MAAM,aAAa,CAAC;AAGvE;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACnB,MAAM,EAAE,UAAU,CAAqB;IACvC,QAAQ,EAAE,QAAQ,CAAkB;IACpC,MAAM,EAAE,MAAM,CAAK;IAEpC,MAAM;IAgEf,OAAgB,MAAM,0BAWpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index.js';\nimport {customElement} from '../../decorator.js';\n\n/* Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n * @deprecated\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.normal;\n @property({type: String}) lineType: LineType = LineType.fluid;\n @property({type: Number}) length: number = 1;\n\n override render() {\n if (this.lineType === LineType.connector) {\n const length = this.length * 24;\n return html`<svg\n width=\"24\"\n height=\"${length}\"\n viewBox=\"0 0 24 ${length}\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n y1=\"0\"\n x1=\"12\"\n y2=\"${length}\"\n x2=\"12\"\n stroke-width=\"1\"\n stroke=\"var(--element-neutral-color)\"\n stroke-dasharray=\"4,2\"\n stroke-dashoffset=\"2\"\n />\n </svg> `;\n }\n\n const length = this.length * 24 + 1;\n const color = lineColor(this.medium);\n const width = lineWidth(this.lineType);\n return html`\n <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -.5 24 ${length}\"\n width=\"24\"\n height=${length}\n >\n <line\n y1=\"-.5\"\n x1=\"12\"\n y2=\"${length - 0.5}\"\n x2=\"12\"\n stroke-width=${width}\n stroke=\"var(${color.inner})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 - 0.5 - width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 - 0.5 - width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 + 0.5 + width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 + 0.5 + width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n :host {\n display: block;\n line-height: 0;\n }\n\n svg {\n position: relative;\n top: -0.5px;\n left: -12px;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-vertical-line': ObcVerticalLine;\n }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAWO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAC9B,SAAA,SAAiB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,QAAI,KAAK,aAAa,SAAS,WAAW;AACxC,YAAMA,UAAS,KAAK,SAAS;AAC7B,aAAO;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEA,UAAM,SAAS,KAAK,SAAS,KAAK;AAClC,UAAM,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ;AACrC,WAAO;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAcF;AAjFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
1
+ {"version":3,"file":"vertical-line.js","sources":["../../../src/automation/vertical-line/vertical-line.ts"],"sourcesContent":["import {LitElement, html, css} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {LineMedium, lineColor, LineType, lineWidth} from '../index.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * Vertical line component\n *\n * The vertical line is 24px * length + 1px. +1 px to make sure that connecting lines are overlapping, to hide the gap between them.\n * @deprecated\n */\n@customElement('obc-vertical-line')\nexport class ObcVerticalLine extends LitElement {\n @property({type: String}) medium: LineMedium = LineMedium.normal;\n @property({type: String}) lineType: LineType = LineType.fluid;\n @property({type: Number}) length: number = 1;\n\n override render() {\n if (this.lineType === LineType.connector) {\n const length = this.length * 24;\n return html`<svg\n width=\"24\"\n height=\"${length}\"\n viewBox=\"0 0 24 ${length}\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <line\n y1=\"0\"\n x1=\"12\"\n y2=\"${length}\"\n x2=\"12\"\n stroke-width=\"1\"\n stroke=\"var(--element-neutral-color)\"\n stroke-dasharray=\"4,2\"\n stroke-dashoffset=\"2\"\n />\n </svg> `;\n }\n\n const length = this.length * 24 + 1;\n const color = lineColor(this.medium);\n const width = lineWidth(this.lineType);\n return html`\n <div class=\"wrapper\" style=\"width: 24px; height: ${this.length * 24}px;\">\n <svg\n class=\"line\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 -.5 24 ${length}\"\n width=\"24\"\n height=${length}\n >\n <line\n y1=\"-.5\"\n x1=\"12\"\n y2=\"${length - 0.5}\"\n x2=\"12\"\n stroke-width=${width}\n stroke=\"var(${color.inner})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 - 0.5 - width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 - 0.5 - width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n <line\n y1=\"-.5\"\n x1=${12 + 0.5 + width / 2}\n y2=\"${length - 0.5}\"\n x2=${12 + 0.5 + width / 2}\n stroke-width=\"1\"\n stroke=\"var(${color.outer})\"\n />\n </svg>\n </div>\n `;\n }\n\n static override styles = css`\n :host {\n display: block;\n line-height: 0;\n }\n\n svg {\n position: relative;\n top: -0.5px;\n left: -12px;\n }\n `;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-vertical-line': ObcVerticalLine;\n }\n}\n"],"names":["length"],"mappings":";;;;;;;;;;;;;;AAYO,IAAM,kBAAN,cAA8B,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,SAAqB,WAAW;AAChC,SAAA,WAAqB,SAAS;AAC9B,SAAA,SAAiB;AAAA,EAAA;AAAA,EAElC,SAAS;AAChB,QAAI,KAAK,aAAa,SAAS,WAAW;AACxC,YAAMA,UAAS,KAAK,SAAS;AAC7B,aAAO;AAAA;AAAA,kBAEKA,OAAM;AAAA,0BACEA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhBA,OAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQlB;AAEA,UAAM,SAAS,KAAK,SAAS,KAAK;AAClC,UAAM,QAAQ,UAAU,KAAK,MAAM;AACnC,UAAM,QAAQ,UAAU,KAAK,QAAQ;AACrC,WAAO;AAAA,yDAC8C,KAAK,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,+BAI1C,MAAM;AAAA;AAAA,mBAElB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKP,SAAS,GAAG;AAAA;AAAA,2BAEH,KAAK;AAAA,0BACN,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA,iBAIpB,KAAK,MAAM,QAAQ,CAAC;AAAA,kBACnB,SAAS,GAAG;AAAA,iBACb,KAAK,MAAM,QAAQ,CAAC;AAAA;AAAA,0BAEX,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnC;AAcF;AAjFa,gBAqEK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApEC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,gBACe,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,gBAEe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAHb,gBAGe,WAAA,UAAA,CAAA;AAHf,kBAAN,gBAAA;AAAA,EADN,cAAc,mBAAmB;AAAA,GACrB,eAAA;"}
@@ -46,6 +46,7 @@ import { ObcPivotItemDirection } from '../pivot-item/pivot-item.js';
46
46
  *
47
47
  * @slot - Default slot for one or more `<obc-pivot-item>` elements.
48
48
  * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.
49
+ * @stable
49
50
  */
50
51
  export declare class ObcPivotItemGroup extends LitElement {
51
52
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
1
+ {"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n * <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n * <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n * <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n /**\n * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n * Changing this updates the direction of all child pivot items.\n *\n * @default ObcPivotItemDirection.horizontal\n */\n @property({type: String}) direction: ObcPivotItemDirection =\n ObcPivotItemDirection.horizontal;\n\n /**\n * The value of the currently selected pivot item.\n * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n * Defaults to empty string (no selection).\n */\n @property({type: String}) selectedValue = '';\n\n /**\n * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n * If false (default), one item is always selected unless `selectedValue` is empty.\n *\n * @availableWhen selectedValue!=''\n */\n @property({type: Boolean}) allowDeselect = false;\n\n private handleItemSelected(event: CustomEvent) {\n event.stopPropagation();\n const {value} = event.detail;\n\n if (this.allowDeselect && this.selectedValue === value) {\n this.selectedValue = '';\n } else {\n this.selectedValue = value;\n }\n\n this.updateChildItems();\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {selectedValue: this.selectedValue},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private updateChildItems() {\n const items = this.querySelectorAll(\n 'obc-pivot-item'\n ) as NodeListOf<ObcPivotItem>;\n\n items.forEach((item) => {\n item.selected = item.value === this.selectedValue;\n item.direction = this.direction;\n });\n }\n\n override firstUpdated() {\n this.updateComplete.then(() => {\n this.updateChildItems();\n });\n }\n\n override updated(changedProperties: PropertyValues) {\n if (\n changedProperties.has('selectedValue') ||\n changedProperties.has('direction')\n ) {\n this.updateChildItems();\n }\n }\n\n override render() {\n const classes = classMap({\n 'pivot-group': true,\n 'direction-horizontal':\n this.direction === ObcPivotItemDirection.horizontal,\n 'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n });\n\n return html`\n <div class=${classes} @selected=${this.handleItemSelected}>\n <slot></slot>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-pivot-item-group': ObcPivotItemGroup;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}
1
+ {"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n * <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n * <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n * <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n * @stable\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n /**\n * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n * Changing this updates the direction of all child pivot items.\n *\n * @default ObcPivotItemDirection.horizontal\n */\n @property({type: String}) direction: ObcPivotItemDirection =\n ObcPivotItemDirection.horizontal;\n\n /**\n * The value of the currently selected pivot item.\n * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n * Defaults to empty string (no selection).\n */\n @property({type: String}) selectedValue = '';\n\n /**\n * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n * If false (default), one item is always selected unless `selectedValue` is empty.\n *\n * @availableWhen selectedValue!=''\n */\n @property({type: Boolean}) allowDeselect = false;\n\n private handleItemSelected(event: CustomEvent) {\n event.stopPropagation();\n const {value} = event.detail;\n\n if (this.allowDeselect && this.selectedValue === value) {\n this.selectedValue = '';\n } else {\n this.selectedValue = value;\n }\n\n this.updateChildItems();\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: {selectedValue: this.selectedValue},\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private updateChildItems() {\n const items = this.querySelectorAll(\n 'obc-pivot-item'\n ) as NodeListOf<ObcPivotItem>;\n\n items.forEach((item) => {\n item.selected = item.value === this.selectedValue;\n item.direction = this.direction;\n });\n }\n\n override firstUpdated() {\n this.updateComplete.then(() => {\n this.updateChildItems();\n });\n }\n\n override updated(changedProperties: PropertyValues) {\n if (\n changedProperties.has('selectedValue') ||\n changedProperties.has('direction')\n ) {\n this.updateChildItems();\n }\n }\n\n override render() {\n const classes = classMap({\n 'pivot-group': true,\n 'direction-horizontal':\n this.direction === ObcPivotItemDirection.horizontal,\n 'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n });\n\n return html`\n <div class=${classes} @selected=${this.handleItemSelected}>\n <slot></slot>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-pivot-item-group': ObcPivotItemGroup;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "2.0.0-next.118",
3
+ "version": "2.0.0-next.119",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -41,6 +41,8 @@
41
41
  "lint:icons": "tsx ./script/check-icon-hex-leaks.ts",
42
42
  "lint:eslint": "eslint 'src/**/*.ts'",
43
43
  "lint:lit-analyzer": "lit-analyzer --strict --maxWarnings 0",
44
+ "lint:fix:stories": "eslint 'src/**/*.stories.ts' --fix",
45
+ "test:rules": "vitest run --project rules",
44
46
  "fix-imports": "node fix-imports.mjs",
45
47
  "fix-imports:check": "node fix-imports.mjs --dry-run",
46
48
  "test:browser": "vitest --config=vitest.browser.config.ts",