npm - @oicl/openbridge-webcomponents - Versions diffs - 2.0.0-next.64 → 2.0.0-next.66 - Mend

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

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 (24) hide show

package/dist/components/tree-navigation-item/tree-navigation-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-navigation-item.js","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-alert-header-aggregated-iec.js';\nimport '../../icons/icon-alert-header-group-iec.js';\nimport '../badge/badge.js';\nimport {BadgeType} from '../badge/badge.js';\n\n/*\n Guide line drawn for one indentation column. Normally computed by\n * `obc-tree-navigation`; rarely set by hand.\n \n - `straight`: vertical pass-through (`│`)\n * - `intersection`: vertical + stub for a non-last child (`├`)\n * - `corner`: half vertical + stub for the last child (`└`)\n * - `blank`: empty spacer\n /\nexport enum TreeBranchType {\n straight = 'straight',\n intersection = 'intersection',\n corner = 'corner',\n blank = 'blank',\n}\n\n/\n Terminal type for a tree item, controlling the alert-header marker shown in\n * the terminal (top-right, by the chevron).\n \n - `regular`: No marker — a plain expand/collapse terminal.\n * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the\n * node aggregates alerts from its descendants.\n * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set\n * of alerts beneath the node.\n /\nexport enum TreeTerminalType {\n regular = 'regular',\n aggregatedHeader = 'aggregated-header',\n groupHeader = 'group-header',\n}\n\n/\n `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\n * navigation list, with indentation guide lines, an optional expand/collapse\n * chevron, a leading icon, a label, and an optional alert badge.\n \n Each row represents one node in a hierarchy. Depth is expressed through the\n * `branches` array: one entry per ancestor level, each describing the guide line\n * to draw for that level. The expand chevron lets a node disclose its children,\n * emitting `expand-toggle` so a parent can manage the open/closed state.\n \n ## Features\n * - Indentation guides: Render one 32px guide column per `branches` entry —\n * pass-through vertical lines for ancestors that continue, and an elbow\n * (`intersection`) connecting the row to its parent.\n * - Expand/collapse: Set `expandable` to show a chevron that rotates when\n * `expanded`. The chevron is a visual indicator only — activating the row\n * fires `expand-toggle` with the next state; manage `expanded` in response.\n * When `expanded`, a vertical guide descends from the chevron to connect to\n * the revealed child rows below.\n * - Terminal type: `terminalType` adds an alert-header marker in the terminal\n * (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n * aggregated or grouped alerts.\n * - Leading icon: Provide an icon via the `icon` slot (shown when\n * `hasLeadingIcon`).\n * - Alert badge: A trailing counter badge (e.g. an alarm count), toggled with\n * `hasAlertBadge` and configured via `alertCount` and `alertType`.\n * - Checked state: `checked` highlights the current selection using the\n * amplified elevation style. A checked row is the current item and is not\n * re-selectable — it shows no hover/pressed feedback and fires no `click` or\n * navigation. An expandable checked row still toggles (fires `expand-toggle`),\n * so a group that is the current selection can be opened and closed. It stays\n * keyboard-focusable.\n * - Link or button: Set `href` to render the row as a link; otherwise it acts\n * as a button.\n \n ## Usage Guidelines\n * - Use for hierarchical navigation such as file trees, layer panels, or nested\n * menus. For flat navigation lists, use `obc-navigation-item` instead.\n * - Build `branches` from the row's ancestry: `intersection` for the level that\n * owns this row, `straight` for ancestors with siblings still to come, and\n * `blank` for ancestors whose subtrees have ended. When placed inside\n * `obc-tree-navigation`, the container computes `branches` automatically.\n * - Keep one row `checked` at a time within a tree to mark the current location.\n * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|----------------\|---------------------------------\|-------------------------------------------------------------------------\|\n * \| icon \| `hasLeadingIcon` is true \| Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`. \|\n \n @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).\n * @fires expand-toggle {CustomEvent<boolean>} Fired when an expandable row is activated; detail is the next `expanded` value.\n * @fires click {CustomEvent<void>} Fired when the row is activated.\n /\n@customElement('obc-tree-navigation-item')\nexport class ObcTreeNavigationItem extends LitElement {\n /* The text label displayed for the row. /\n @property({type: String}) label = 'List item';\n\n /\n Guide line for each ancestor level, outermost first; one 32px column per\n * entry. Computed by `obc-tree-navigation` — rarely set by hand.\n /\n @property({type: Array}) branches: TreeBranchType[] = [];\n\n /* Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. /\n @property({type: Boolean}) expandable = false;\n\n /* Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. /\n @property({type: Boolean, reflect: true}) expanded = false;\n\n /\n Whether the row is the current selection. Applies the amplified style and\n * makes the row inert to re-selection (no hover/pressed feedback, no `click`\n * or navigation); it remains keyboard-focusable. An expandable checked row\n * still fires `expand-toggle` so a selected group can open and close.\n /\n @property({type: Boolean, reflect: true}) checked = false;\n\n /* Disables the row, removing it from the tab order and dimming its appearance. /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n Whether the row is in the tab order. A tree container manages this as a\n * roving tabindex (one row focusable at a time); standalone rows stay tabbable.\n /\n @property({type: Boolean, attribute: false}) focusable = true;\n\n /\n Whether the row shows a leading icon (provided via the `icon` slot).\n /\n @property({type: Boolean, attribute: false}) hasLeadingIcon = true;\n\n /\n Terminal type, controlling the alert-header marker shown in the terminal.\n * One of `regular` (default), `aggregated-header`, or `group-header`.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /* Whether a trailing alert counter badge is shown. /\n @property({type: Boolean}) hasAlertBadge = false;\n\n /* The number shown in the alert badge when `hasAlertBadge` is true. /\n @property({type: Number}) alertCount = 0;\n\n /* The severity/type of the alert badge. One of the `obc-badge` types (default `alarm`). /\n @property({type: String}) alertType: string = BadgeType.alarm;\n\n /\n The URL to navigate to when the row is activated. If set, the row renders as\n * a link; otherwise it acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n @query('.wrapper') private wrapperElement?: HTMLElement;\n\n /* Focuses the row's interactive wrapper (the host itself is not focusable). /\n public override focus(options?: FocusOptions): void {\n this.wrapperElement?.focus(options);\n }\n\n /* A root-level row has no ancestor columns, so it draws no connector lines. /\n private get isRoot(): boolean {\n return this.branches.length === 0;\n }\n\n /\n All ancestor columns are blank spacers — the row is indented but draws no\n * guide lines, so the terminal connector and dropdown are suppressed too.\n */\n private get isBlankAncestry(): boolean {\n return (\n this.branches.length > 0 &&\n this.branches.every((b) => b === TreeBranchType.blank)\n );\n }\n\n private activate() {\n if (this.disabled) return;\n // An expandable row always toggles, even when checked — a group that is the\n // current selection must still open and close. A checked leaf, however, is\n // the current selection and is inert (no re-selection click or navigation).\n if (this.expandable) {\n this.dispatchEvent(\n new CustomEvent<boolean>('expand-toggle', {detail: !this.expanded})\n );\n }\n if (this.checked) return;\n this.dispatchEvent(new CustomEvent('click'));\n if (this.href !== undefined) {\n window.location.href = this.href;\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n this.activate();\n }\n\n private renderBranch(type: TreeBranchType) {\n const hasVertical =\n type === TreeBranchType.straight \|\|\n type === TreeBranchType.intersection \|\|\n type === TreeBranchType.corner;\n const hasHorizontal =\n type === TreeBranchType.intersection \|\| type === TreeBranchType.corner;\n return html`<div\n class=${classMap({branch: true, ['branch-' + type]: true})}\n >\n ${hasVertical ? html`<div class=\"branch-vertical\"></div>` : nothing}\n ${hasHorizontal ? html`<div class=\"branch-horizontal\"></div>` : nothing}\n ${type === TreeBranchType.corner\n ? html`<div class=\"branch-elbow\"></div>`\n : nothing}\n </div>`;\n }\n\n private renderTerminalHeader() {\n if (this.terminalType === TreeTerminalType.aggregatedHeader) {\n return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>\n </div>`;\n }\n if (this.terminalType === TreeTerminalType.groupHeader) {\n return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n <obi-alert-header-group-iec></obi-alert-header-group-iec>\n </div>`;\n }\n return nothing;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n checked: this.checked,\n disabled: this.disabled,\n 'has-icon': this.hasLeadingIcon,\n })}\n role=\"treeitem\"\n aria-expanded=${ifDefined(this.expandable ? this.expanded : undefined)}\n aria-current=${ifDefined(this.checked ? 'page' : undefined)}\n aria-selected=${ifDefined(this.checked ? 'true' : undefined)}\n aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}\n tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}\n @click=${this.activate}\n @keydown=${this.handleKeydown}\n >\n <div class=\"visible-wrapper\">\n <div class=\"tree-node-row\">\n ${this.branches.map((branch) => this.renderBranch(branch))}\n <div class=\"terminal\">\n ${this.isRoot \|\| this.isBlankAncestry\n ? nothing\n : html`<div class=\"terminal-connector\"></div>`}\n ${!this.isRoot &&\n !this.isBlankAncestry &&\n this.expandable &&\n this.expanded\n ? html`<div class=\"terminal-dropdown\"></div>`\n : nothing}\n ${this.expandable\n ? html`<div class=\"chevron\" aria-hidden=\"true\">\n <obi-chevron-right-google></obi-chevron-right-google>\n </div>`\n : nothing}\n ${this.renderTerminalHeader()}\n </div>\n </div>\n <div class=\"label-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"icon\"></slot>\n </div>`\n : nothing}\n <span part=\"label\" class=\"label\">${this.label}</span>\n </div>\n ${this.hasAlertBadge\n ? html`<obc-badge\n class=\"alert-badge\"\n .type=${this.alertType}\n .number=${this.alertCount}\n ></obc-badge>`\n : nothing}\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-tree-navigation-item': ObcTreeNavigationItem;\n }\n}\n"],"names":["TreeBranchType","TreeTerminalType"],"mappings":"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"}
1	+ {"version":3,"file":"tree-navigation-item.js","sources":["../../../src/components/tree-navigation-item/tree-navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-alert-header-aggregated-iec.js';\nimport '../../icons/icon-alert-header-group-iec.js';\nimport '../badge/badge.js';\nimport {AlertType, ALERT_SEVERITY_PRIORITY} from '../../types.js';\n\n/*\n Guide line drawn for one indentation column. Normally computed by\n * `obc-tree-navigation`; rarely set by hand.\n \n - `straight`: vertical pass-through (`│`)\n * - `intersection`: vertical + stub for a non-last child (`├`)\n * - `corner`: half vertical + stub for the last child (`└`)\n * - `blank`: empty spacer\n /\nexport enum TreeBranchType {\n straight = 'straight',\n intersection = 'intersection',\n corner = 'corner',\n blank = 'blank',\n}\n\n/\n Terminal type for a tree item, controlling the alert-header marker shown in\n * the terminal (top-right, by the chevron).\n \n - `regular`: No marker — a plain expand/collapse terminal.\n * - `aggregatedHeader`: Shows the aggregated alert-header marker, indicating the\n * node aggregates alerts from its descendants.\n * - `groupHeader`: Shows the group alert-header marker, indicating a grouped set\n * of alerts beneath the node.\n /\nexport enum TreeTerminalType {\n regular = 'regular',\n aggregatedHeader = 'aggregated-header',\n groupHeader = 'group-header',\n}\n\n/\n Per-severity alert counts for a tree row's trailing badge(s). Each `count`\n is the number of active alerts of that severity at or beneath the row — the\n * level severities `level-critical`, `level-high`, `level-medium`, `level-low`,\n * and `level-diagnostic`, plus the IEC severities `alarm`, `warning`, and\n * `caution`. Badges are ordered and aggregated by the shared\n * `ALERT_SEVERITY_PRIORITY` ranking, most to least severe.\n \n Set `aggregate` to collapse the counts into a single badge showing the total,\n * styled as the highest category present; otherwise one badge is rendered per\n * non-zero count.\n /\nexport interface TreeNavigationItemAlerts {\n /* Collapse all counts into one badge: total count, highest-severity style. /\n aggregate?: boolean;\n /* Number of level-critical alerts. /\n countLevelCritical?: number;\n /* Number of alarm alerts. /\n countAlarm?: number;\n /* Number of level-high alerts. /\n countLevelHigh?: number;\n /* Number of warning alerts. /\n countWarning?: number;\n /* Number of level-medium alerts. /\n countLevelMedium?: number;\n /* Number of caution alerts. /\n countCaution?: number;\n /* Number of level-low alerts. /\n countLevelLow?: number;\n /* Number of level-diagnostic alerts. /\n countLevelDiagnostic?: number;\n}\n\n/\n `<obc-tree-navigation-item>` – A single row in a tree- or file-explorer-style\n * navigation list, with indentation guide lines, an optional expand/collapse\n * chevron, a leading icon, a label, and an optional alert badge.\n \n Each row represents one node in a hierarchy. Depth is expressed through the\n * `branches` array: one entry per ancestor level, each describing the guide line\n * to draw for that level. The expand chevron lets a node disclose its children,\n * emitting `expand-toggle` so a parent can manage the open/closed state.\n \n ## Features\n * - Indentation guides: Render one 32px guide column per `branches` entry —\n * pass-through vertical lines for ancestors that continue, and an elbow\n * (`intersection`) connecting the row to its parent.\n * - Expand/collapse: Set `expandable` to show a chevron that rotates when\n * `expanded`. The chevron is a visual indicator only — activating the row\n * fires `expand-toggle` with the next state; manage `expanded` in response.\n * When `expanded`, a vertical guide descends from the chevron to connect to\n * the revealed child rows below.\n * - Terminal type: `terminalType` adds an alert-header marker in the terminal\n * (`aggregatedHeader` or `groupHeader`), indicating the node heads a set of\n * aggregated or grouped alerts.\n * - Leading icon: Provide an icon via the `icon` slot (shown when\n * `hasLeadingIcon`).\n * - Alert badges: Trailing counter badges driven by the `alerts` object — a\n * per-severity count map with one field per level severity (critical, high,\n * medium, low, diagnostic). By default each non-zero count renders its own\n * badge, ordered most to least severe by `ALERT_SEVERITY_PRIORITY`; set\n * `alerts.aggregate` to instead show a single badge with the combined total,\n * styled as the highest category present.\n * - Checked state: `checked` highlights the current selection using the\n * amplified elevation style. A checked row is the current item and is not\n * re-selectable — it shows no hover/pressed feedback and fires no `click` or\n * navigation. An expandable checked row still toggles (fires `expand-toggle`),\n * so a group that is the current selection can be opened and closed. It stays\n * keyboard-focusable.\n * - Link or button: Set `href` to render the row as a link; otherwise it acts\n * as a button.\n \n ## Usage Guidelines\n * - Use for hierarchical navigation such as file trees, layer panels, or nested\n * menus. For flat navigation lists, use `obc-navigation-item` instead.\n * - Build `branches` from the row's ancestry: `intersection` for the level that\n * owns this row, `straight` for ancestors with siblings still to come, and\n * `blank` for ancestors whose subtrees have ended. When placed inside\n * `obc-tree-navigation`, the container computes `branches` automatically.\n * - Keep one row `checked` at a time within a tree to mark the current location.\n * - Leaf nodes should leave `expandable` as `false` so no chevron is shown.\n \n ## Slots\n \n \| Slot Name \| Renders When... \| Purpose \|\n * \|----------------\|---------------------------------\|-------------------------------------------------------------------------\|\n * \| icon \| `hasLeadingIcon` is true \| Leading icon for the row, e.g. `<obi-placeholder slot=\"icon\">`. \|\n \n @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true).\n * @fires expand-toggle {CustomEvent<boolean>} Fired when an expandable row is activated; detail is the next `expanded` value.\n * @fires click {CustomEvent<void>} Fired when the row is activated.\n /\n@customElement('obc-tree-navigation-item')\nexport class ObcTreeNavigationItem extends LitElement {\n /* The text label displayed for the row. /\n @property({type: String}) label = 'List item';\n\n /\n Guide line for each ancestor level, outermost first; one 32px column per\n * entry. Computed by `obc-tree-navigation` — rarely set by hand.\n /\n @property({type: Array}) branches: TreeBranchType[] = [];\n\n /* Whether the row shows an expand/collapse chevron. Leave false for leaf nodes. /\n @property({type: Boolean}) expandable = false;\n\n /* Whether the node is expanded. Rotates the chevron and sets `aria-expanded`. /\n @property({type: Boolean, reflect: true}) expanded = false;\n\n /\n Whether the row is the current selection. Applies the amplified style and\n * makes the row inert to re-selection (no hover/pressed feedback, no `click`\n * or navigation); it remains keyboard-focusable. An expandable checked row\n * still fires `expand-toggle` so a selected group can open and close.\n /\n @property({type: Boolean, reflect: true}) checked = false;\n\n /* Disables the row, removing it from the tab order and dimming its appearance. /\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /\n Whether the row is in the tab order. A tree container manages this as a\n * roving tabindex (one row focusable at a time); standalone rows stay tabbable.\n /\n @property({type: Boolean, attribute: false}) focusable = true;\n\n /\n Whether the row shows a leading icon (provided via the `icon` slot).\n /\n @property({type: Boolean, attribute: false}) hasLeadingIcon = true;\n\n /\n Terminal type, controlling the alert-header marker shown in the terminal.\n * One of `regular` (default), `aggregated-header`, or `group-header`.\n /\n @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n /\n Per-severity alert counts for the row's trailing badge(s). Omit (or leave\n * every count at 0) for a row with no alerts. See {@link TreeNavigationItemAlerts}.\n \n - When `aggregate` is true, a single badge is shown: its number is the sum\n * of all counts and its severity is the highest category present\n * (critical → alarm → warning → caution).\n * - Otherwise one badge is shown per count greater than 0, ordered most to\n * least severe and spaced by the alert-counter spacing token.\n /\n @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n /\n The URL to navigate to when the row is activated. If set, the row renders as\n * a link; otherwise it acts as a button.\n /\n @property({type: String}) href: string \| undefined;\n\n @query('.wrapper') private wrapperElement?: HTMLElement;\n\n /* Focuses the row's interactive wrapper (the host itself is not focusable). /\n public override focus(options?: FocusOptions): void {\n this.wrapperElement?.focus(options);\n }\n\n /\n The badge(s) to render from `alerts`, as `{type, count}` pairs already in\n * severity order, ranked by `ALERT_SEVERITY_PRIORITY`.\n \n - No `alerts`, or every count 0 → no badges.\n * - `aggregate` → a single pair: the summed count typed as the highest\n * category that has any alerts.\n * - Otherwise → one pair per count greater than 0.\n /\n private get alertBadges(): {type: AlertType; count: number}[] {\n const alerts = this.alerts;\n if (!alerts) return [];\n const countByType: Partial<Record<AlertType, number>> = {\n [AlertType.LevelCritical]: alerts.countLevelCritical ?? 0,\n [AlertType.Alarm]: alerts.countAlarm ?? 0,\n [AlertType.LevelHigh]: alerts.countLevelHigh ?? 0,\n [AlertType.Warning]: alerts.countWarning ?? 0,\n [AlertType.LevelMedium]: alerts.countLevelMedium ?? 0,\n [AlertType.Caution]: alerts.countCaution ?? 0,\n [AlertType.LevelLow]: alerts.countLevelLow ?? 0,\n [AlertType.LevelDiagnostic]: alerts.countLevelDiagnostic ?? 0,\n };\n // Order (and, when aggregating, rank) by the shared severity priority,\n // keeping only the severities this component exposes.\n const ranked = ALERT_SEVERITY_PRIORITY.filter(\n (type) => type in countByType\n ).map((type) => ({type, count: countByType[type] ?? 0}));\n if (alerts.aggregate) {\n const total = ranked.reduce((sum, b) => sum + b.count, 0);\n const highest = ranked.find((b) => b.count > 0);\n if (!highest) return [];\n return [{type: highest.type, count: total}];\n }\n return ranked.filter((b) => b.count > 0);\n }\n\n /* A root-level row has no ancestor columns, so it draws no connector lines. /\n private get isRoot(): boolean {\n return this.branches.length === 0;\n }\n\n /\n All ancestor columns are blank spacers — the row is indented but draws no\n * guide lines, so the terminal connector and dropdown are suppressed too.\n */\n private get isBlankAncestry(): boolean {\n return (\n this.branches.length > 0 &&\n this.branches.every((b) => b === TreeBranchType.blank)\n );\n }\n\n private activate() {\n if (this.disabled) return;\n // An expandable row always toggles, even when checked — a group that is the\n // current selection must still open and close. A checked leaf, however, is\n // the current selection and is inert (no re-selection click or navigation).\n if (this.expandable) {\n this.dispatchEvent(\n new CustomEvent<boolean>('expand-toggle', {detail: !this.expanded})\n );\n }\n if (this.checked) return;\n this.dispatchEvent(new CustomEvent('click'));\n if (this.href !== undefined) {\n window.location.href = this.href;\n }\n }\n\n private handleKeydown(event: KeyboardEvent) {\n if (this.disabled) return;\n if (event.key !== 'Enter' && event.key !== ' ') return;\n event.preventDefault();\n this.activate();\n }\n\n private renderBranch(type: TreeBranchType) {\n const hasVertical =\n type === TreeBranchType.straight \|\|\n type === TreeBranchType.intersection \|\|\n type === TreeBranchType.corner;\n const hasHorizontal =\n type === TreeBranchType.intersection \|\| type === TreeBranchType.corner;\n return html`<div\n class=${classMap({branch: true, ['branch-' + type]: true})}\n >\n ${hasVertical ? html`<div class=\"branch-vertical\"></div>` : nothing}\n ${hasHorizontal ? html`<div class=\"branch-horizontal\"></div>` : nothing}\n ${type === TreeBranchType.corner\n ? html`<div class=\"branch-elbow\"></div>`\n : nothing}\n </div>`;\n }\n\n private renderTerminalHeader() {\n if (this.terminalType === TreeTerminalType.aggregatedHeader) {\n return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n <obi-alert-header-aggregated-iec></obi-alert-header-aggregated-iec>\n </div>`;\n }\n if (this.terminalType === TreeTerminalType.groupHeader) {\n return html`<div class=\"terminal-header\" aria-hidden=\"true\">\n <obi-alert-header-group-iec></obi-alert-header-group-iec>\n </div>`;\n }\n return nothing;\n }\n\n override render() {\n return html`\n <div\n class=${classMap({\n wrapper: true,\n checked: this.checked,\n disabled: this.disabled,\n 'has-icon': this.hasLeadingIcon,\n })}\n role=\"treeitem\"\n aria-expanded=${ifDefined(this.expandable ? this.expanded : undefined)}\n aria-current=${ifDefined(this.checked ? 'page' : undefined)}\n aria-selected=${ifDefined(this.checked ? 'true' : undefined)}\n aria-disabled=${ifDefined(this.disabled ? 'true' : undefined)}\n tabindex=${this.disabled ? -1 : this.focusable ? 0 : -1}\n @click=${this.activate}\n @keydown=${this.handleKeydown}\n >\n <div class=\"visible-wrapper\">\n <div class=\"tree-node-row\">\n ${this.branches.map((branch) => this.renderBranch(branch))}\n <div class=\"terminal\">\n ${this.isRoot \|\| this.isBlankAncestry\n ? nothing\n : html`<div class=\"terminal-connector\"></div>`}\n ${!this.isRoot &&\n !this.isBlankAncestry &&\n this.expandable &&\n this.expanded\n ? html`<div class=\"terminal-dropdown\"></div>`\n : nothing}\n ${this.expandable\n ? html`<div class=\"chevron\" aria-hidden=\"true\">\n <obi-chevron-right-google></obi-chevron-right-google>\n </div>`\n : nothing}\n ${this.renderTerminalHeader()}\n </div>\n </div>\n <div class=\"label-container\">\n ${this.hasLeadingIcon\n ? html`<div class=\"leading-icon\">\n <slot name=\"icon\"></slot>\n </div>`\n : nothing}\n <span part=\"label\" class=\"label\">${this.label}</span>\n </div>\n ${this.alertBadges.length > 0\n ? html`<div class=\"alert-badges\">\n ${this.alertBadges.map(\n (badge) =>\n html`<obc-badge\n class=\"alert-badge\"\n .type=${badge.type}\n .number=${badge.count}\n ></obc-badge>`\n )}\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n\n static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationItemExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-tree-navigation-item': ObcTreeNavigationItem;\n }\n}\n"],"names":["TreeBranchType","TreeTerminalType"],"mappings":"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"}

package/package.json CHANGED Viewed

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