@oicl/openbridge-webcomponents 2.0.0-next.59 → 2.0.0-next.60

package/dist/components/tree-navigation-group/tree-navigation-group.js

@@ -0,0 +1,116 @@
+import { unsafeCSS, LitElement, nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import componentStyle from "./tree-navigation-group.css.js";
+import { customElement } from "../../decorator.js";
+import { TreeTerminalType } from "../tree-navigation-item/tree-navigation-item.js";
+import { BadgeType } from "../badge/badge.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ObcTreeNavigationGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "Group";
+    this.branches = [];
+    this.expanded = false;
+    this.checked = false;
+    this.disabled = false;
+    this.hasIcon = true;
+    this.terminalType = TreeTerminalType.regular;
+    this.hasAlertBadge = false;
+    this.alertCount = 0;
+    this.alertType = BadgeType.alarm;
+  }
+  onHeaderToggle(event) {
+    this.expanded = event.detail;
+    this.dispatchEvent(
+      new CustomEvent("expand-toggle", { detail: this.expanded })
+    );
+  }
+  /** Closes the group (and, recursively, any nested groups inside it). */
+  close() {
+    this.expanded = false;
+    this.querySelectorAll("obc-tree-navigation-group").forEach(
+      (group) => group.close()
+    );
+  }
+  focus(options) {
+    this.headerItem?.focus(options);
+  }
+  render() {
+    return html`
+      <obc-tree-navigation-item
+        part="header"
+        .label=${this.label}
+        .branches=${this.branches}
+        expandable
+        ?expanded=${this.expanded}
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        .hasLeadingIcon=${this.hasIcon}
+        .terminalType=${this.terminalType}
+        ?hasAlertBadge=${this.hasAlertBadge}
+        .alertCount=${this.alertCount}
+        .alertType=${this.alertType}
+        .href=${this.href}
+        @expand-toggle=${this.onHeaderToggle}
+      >
+        ${this.hasIcon ? html`<slot name="icon" slot="icon"></slot>` : nothing}
+      </obc-tree-navigation-item>
+      <div part="children" role="group" ?hidden=${!this.expanded}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+ObcTreeNavigationGroup.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Array })
+], ObcTreeNavigationGroup.prototype, "branches", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationGroup.prototype, "expanded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationGroup.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcTreeNavigationGroup.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcTreeNavigationGroup.prototype, "hasIcon", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationGroup.prototype, "terminalType", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcTreeNavigationGroup.prototype, "hasAlertBadge", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcTreeNavigationGroup.prototype, "alertCount", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationGroup.prototype, "alertType", 2);
+__decorateClass([
+  property({ type: String })
+], ObcTreeNavigationGroup.prototype, "href", 2);
+__decorateClass([
+  query("obc-tree-navigation-item")
+], ObcTreeNavigationGroup.prototype, "headerItem", 2);
+ObcTreeNavigationGroup = __decorateClass([
+  customElement("obc-tree-navigation-group")
+], ObcTreeNavigationGroup);
+export {
+  ObcTreeNavigationGroup
+};
+//# sourceMappingURL=tree-navigation-group.js.map

package/dist/components/tree-navigation-group/tree-navigation-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-navigation-group.js","sources":["../../../src/components/tree-navigation-group/tree-navigation-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport componentStyle from './tree-navigation-group.css?inline';\nimport {customElement} from '../../decorator.js';\nimport {\n  ObcTreeNavigationItem,\n  TreeBranchType,\n  TreeTerminalType,\n} from '../tree-navigation-item/tree-navigation-item.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {BadgeType} from '../badge/badge.js';\n\n/**\n * `<obc-tree-navigation-group>` – An expandable parent row in a tree-navigation\n * structure: a header row with an expand/collapse chevron, plus a slot for the\n * child rows it discloses.\n *\n * A group renders an `<obc-tree-navigation-item>` header (carrying its own label,\n * icon, terminal type, and alert badge) followed by its slotted children. When\n * placed inside `<obc-tree-navigation>`, the container computes and assigns the\n * `branches` guide lines for every row automatically from each row's position —\n * a group does not need its depth configured by hand.\n *\n * The group manages only its own open/closed state and forwards header presentation\n * to its internal header item. It does not draw guide lines itself; that is the\n * container's responsibility (see `<obc-tree-navigation>`).\n *\n * ## Features\n * - **Disclosure:** A chevron in the header toggles the slotted children. The open\n *   state is held in `expanded` and reflected so the container and CSS can react.\n * - **Header presentation:** `label`, the `icon` slot, `terminalType`, and the\n *   alert badge (`hasAlertBadge`, `alertCount`, `alertType`) are forwarded to the\n *   header row.\n * - **Selection:** `checked` marks the group's header as the current item.\n * - **Automatic guides:** Inside `<obc-tree-navigation>`, the header's `branches`\n *   are assigned by the container; nested groups continue the guide columns down.\n *\n * ## Usage Guidelines\n * - Nest `<obc-tree-navigation-item>` (leaves) and further `<obc-tree-navigation-group>`\n *   elements as children to build the hierarchy.\n * - Always place groups and items inside an `<obc-tree-navigation>` container so the\n *   guide lines are computed; using a group standalone draws a header with no guides.\n * - Provide a header icon via the `icon` slot (forwarded to the header row).\n *\n * ## Slots\n *\n * | Slot Name | Renders When...          | Purpose                                                      |\n * |-----------|--------------------------|--------------------------------------------------------------|\n * | icon      | `hasIcon` is true        | Leading icon for the group header row.                       |\n * | (default) | Always                   | Child rows (`obc-tree-navigation-item` / `-group`).          |\n *\n * @slot icon - Leading icon for the group header (shown when `hasIcon` is true).\n * @slot - Child rows disclosed when the group is expanded.\n * @fires expand-toggle {CustomEvent<boolean>} Fired when the header is activated; detail is the next `expanded` value.\n */\n@customElement('obc-tree-navigation-group')\nexport class ObcTreeNavigationGroup extends LitElement {\n  /** The text label displayed for the group header row. */\n  @property({type: String}) label = 'Group';\n\n  /**\n   * Guide line to draw for each ancestor level of the header row. Normally set by\n   * the parent `<obc-tree-navigation>` container from the group's position; only\n   * set it manually when using a group outside the container.\n   */\n  @property({type: Array}) branches: TreeBranchType[] = [];\n\n  /** Whether the group is expanded, disclosing its children. Rotates the chevron. */\n  @property({type: Boolean, reflect: true}) expanded = false;\n\n  /** Whether the group header is the current selection. */\n  @property({type: Boolean, reflect: true}) checked = false;\n\n  /** Disables the group header, removing it from the tab order and dimming it. */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /** Whether the group header shows a leading icon (provided via the `icon` slot). */\n  @property({type: Boolean, attribute: false}) hasIcon = true;\n\n  /**\n   * Terminal type for the header row, controlling the alert-header marker shown in\n   * the terminal. 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 on the header row. */\n  @property({type: Boolean}) hasAlertBadge = false;\n\n  /** The number shown in the header's alert badge when `hasAlertBadge` is true. */\n  @property({type: Number}) alertCount = 0;\n\n  /** The severity/type of the header's 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 header is activated. If set, the header row\n   * renders as a link; otherwise it acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  @query('obc-tree-navigation-item') private headerItem?: ObcTreeNavigationItem;\n\n  private onHeaderToggle(event: CustomEvent<boolean>) {\n    this.expanded = event.detail;\n    this.dispatchEvent(\n      new CustomEvent<boolean>('expand-toggle', {detail: this.expanded})\n    );\n  }\n\n  /** Closes the group (and, recursively, any nested groups inside it). */\n  close() {\n    this.expanded = false;\n    this.querySelectorAll('obc-tree-navigation-group').forEach((group) =>\n      group.close()\n    );\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.headerItem?.focus(options);\n  }\n\n  override render() {\n    return html`\n      <obc-tree-navigation-item\n        part=\"header\"\n        .label=${this.label}\n        .branches=${this.branches}\n        expandable\n        ?expanded=${this.expanded}\n        ?checked=${this.checked}\n        ?disabled=${this.disabled}\n        .hasLeadingIcon=${this.hasIcon}\n        .terminalType=${this.terminalType}\n        ?hasAlertBadge=${this.hasAlertBadge}\n        .alertCount=${this.alertCount}\n        .alertType=${this.alertType}\n        .href=${this.href}\n        @expand-toggle=${this.onHeaderToggle}\n      >\n        ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n      </obc-tree-navigation-item>\n      <div part=\"children\" role=\"group\" ?hidden=${!this.expanded}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\nexport type ObcTreeNavigationGroupExpandToggleEvent = CustomEvent<boolean>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-tree-navigation-group': ObcTreeNavigationGroup;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/tree-navigation-item/tree-navigation-item.css.js

@@ -0,0 +1,429 @@
+import { css } from "lit";
+const componentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--menu-navigation-components-tree-navigation-item-touch-target);
+  user-select: none;
+}
+
+.wrapper:focus-visible {
+    outline-offset: -2px;
+  }
+
+.wrapper {
+            cursor: pointer;
+}
+
+.wrapper:focus {
+            outline: none;
+}
+
+.wrapper .visible-wrapper {
+            border-color: var(--flat-enabled-border-color);
+            background-color: var(--flat-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            cursor: pointer;
+            --base-border-color: var(--flat-enabled-border-color);
+            --base-background-color: var(--flat-enabled-background-color);
+}
+
+.wrapper.activated .visible-wrapper {
+            border-color: var(--flat-activated-border-color);
+            background-color: var(--flat-activated-background-color);
+            --base-border-color: var(--flat-activated-border-color);
+            --base-background-color: var(--flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.wrapper:hover .visible-wrapper {
+                        border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+            }
+}
+
+.wrapper:active .visible-wrapper {
+            border-color: var(--flat-pressed-border-color);
+            background-color: var(--flat-pressed-background-color);
+}
+
+.wrapper:focus-visible .visible-wrapper {
+            outline-color: var(--border-focus-color);
+            outline-width: var(--global-size-spacing-border-weight-focusframe);
+            outline-style: solid;
+            border-color: var(--container-global-color);
+            z-index: 1;
+}
+
+.wrapper:disabled .visible-wrapper {
+            border-color: var(--flat-disabled-border-color);
+            background-color: var(--flat-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--on-flat-disabled-color) !important;
+}
+
+.wrapper.disabled .visible-wrapper {
+            border-color: var(--flat-disabled-border-color);
+            background-color: var(--flat-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--on-flat-disabled-color) !important;
+}
+
+.wrapper:disabled {
+            cursor: not-allowed;
+}
+
+.wrapper.disabled {
+            cursor: not-allowed;
+}
+
+.wrapper {
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-font-weight);
+  font-size: var(--global-typography-ui-body-font-size);
+  line-height: var(--global-typography-ui-body-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--on-flat-active-color);
+}
+
+.wrapper .visible-wrapper {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--global-border-radius-border-radius-base);
+    padding: 0
+      var(--menu-navigation-components-tree-navigation-item-padding-horizontal);
+  }
+
+/*
+   * A checked row is not re-selectable, so it stays on the amplified enabled
+   * style with no hover/pressed feedback.
+   */
+
+.wrapper.checked {
+            cursor: pointer;
+}
+
+.wrapper.checked:focus {
+            outline: none;
+}
+
+.wrapper.checked .visible-wrapper {
+            border-color: var(--amplified-enabled-border-color);
+            background-color: var(--amplified-enabled-background-color);
+            border-width: 1px;
+            border-style: solid;
+            cursor: pointer;
+            --base-border-color: var(--amplified-enabled-border-color);
+            --base-background-color: var(--amplified-enabled-background-color);
+}
+
+.wrapper.checked.activated .visible-wrapper {
+            border-color: var(--amplified-activated-border-color);
+            background-color: var(--amplified-activated-background-color);
+            --base-border-color: var(--amplified-activated-border-color);
+            --base-background-color: var(--amplified-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.wrapper.checked:hover .visible-wrapper {
+                        border-color: color-mix(in srgb, var(--amplified-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+                        background-color: color-mix(in srgb, var(--amplified-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+            }
+}
+
+.wrapper.checked:active .visible-wrapper {
+            border-color: var(--amplified-pressed-border-color);
+            background-color: var(--amplified-pressed-background-color);
+}
+
+.wrapper.checked:focus-visible .visible-wrapper {
+            outline-color: var(--border-focus-color);
+            outline-width: var(--global-size-spacing-border-weight-focusframe);
+            outline-style: solid;
+            border-color: var(--container-global-color);
+            z-index: 1;
+}
+
+.wrapper.checked:disabled .visible-wrapper {
+            border-color: var(--amplified-disabled-border-color);
+            background-color: var(--amplified-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--on-amplified-disabled-color) !important;
+}
+
+.wrapper.checked.disabled .visible-wrapper {
+            border-color: var(--amplified-disabled-border-color);
+            background-color: var(--amplified-disabled-background-color);
+            cursor: not-allowed;
+            color: var(--on-amplified-disabled-color) !important;
+}
+
+.wrapper.checked:disabled {
+            cursor: not-allowed;
+}
+
+.wrapper.checked.disabled {
+            cursor: not-allowed;
+}
+
+.wrapper.checked {
+    cursor: default;
+}
+
+.wrapper.checked .visible-wrapper,.wrapper.checked:hover .visible-wrapper,.wrapper.checked:active .visible-wrapper {
+      background-color: var(--amplified-enabled-background-color);
+      border-color: var(--amplified-enabled-border-color);
+    }
+
+.wrapper.checked .label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
+      font-size: var(--global-typography-ui-body-active-font-size);
+      line-height: var(--global-typography-ui-body-active-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+      color: var(--on-flat-active-color);
+    }
+
+.wrapper.checked .leading-icon {
+      color: var(--on-amplified-active-color);
+    }
+
+/* Guide lines are tree structure, not row state, so they do not dim here. */
+
+.wrapper.disabled {
+    color: var(--on-flat-disabled-color);
+  }
+
+.wrapper.disabled .leading-icon {
+      color: var(--on-flat-disabled-color);
+    }
+
+.tree-node-row {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  flex-shrink: 0;
+}
+
+.branch {
+  position: relative;
+  height: 100%;
+  width: var(--menu-navigation-components-branch-width);
+  flex-shrink: 0;
+}
+
+/*
+ * Guide lines all run on a rail at 75% of each 32px column and share the faint
+ * outline color. Verticals and the dropdown bleed 1px past the row edges so they
+ * cross the visible-wrapper's 1px transparent flat border and meet the adjacent
+ * row's line with no seam gap.
+ */
+
+.branch-vertical {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: 75%;
+  width: 1px;
+  transform: translateX(-0.5px);
+  background: var(--border-outline-color);
+}
+
+.branch-horizontal {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-0.5px);
+  left: 75%;
+  right: 0;
+  height: 1px;
+  background: var(--border-outline-color);
+}
+
+/*
+ * Corner (└, last child): a single bordered box replaces the straight rects so
+ * the bend can be rounded. The box bleeds 1px past the column's right edge so its
+ * bottom border overlaps the terminal connector with no break, and translateY
+ * drops it 0.5px so that border lands on the connector's pixel row (else the join
+ * reads as a \`---___\` step). The radius stays tight — the stub is only 8px, so a
+ * larger fillet would consume the whole flat run.
+ */
+
+.branch-corner .branch-vertical,
+.branch-corner .branch-horizontal {
+  display: none;
+}
+
+.branch-corner .branch-elbow {
+  position: absolute;
+  top: -1px;
+  bottom: 50%;
+  left: 75%;
+  right: -1px;
+  transform: translate(-0.5px, 0.5px);
+  border-left: 1px solid var(--border-outline-color);
+  border-bottom: 1px solid var(--border-outline-color);
+  border-bottom-left-radius: var(
+    --menu-navigation-components-branch-corner-radius,
+    2px
+  );
+}
+
+.terminal {
+  position: relative;
+  height: 100%;
+  width: var(--global-size-spacing-touch-target-min);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Stub entering the terminal, continuing the guide line up to the chevron gap. */
+
+.terminal-connector {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-0.5px);
+  left: 0;
+  width: 25%;
+  height: 1px;
+  background: var(--border-outline-color);
+}
+
+/* On a leaf (no chevron) the stub runs further, stopping ~13px before the icon. */
+
+.terminal:not(:has(.chevron)) .terminal-connector {
+  width: calc(100% - 13px);
+}
+
+/* Descends from below the chevron to connect an expanded node to its children. */
+
+.terminal-dropdown {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-0.5px);
+  top: 75%;
+  bottom: -1px;
+  width: 1px;
+  background: var(--border-outline-color);
+}
+
+/* Visual expand/collapse indicator only — not a separate control. */
+
+.chevron {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  height: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  color: var(--element-neutral-color);
+  transition: transform 100ms ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron {
+    transition: none;
+  }
+}
+
+.wrapper.disabled .chevron {
+  color: var(--on-flat-disabled-color);
+}
+
+:host([expanded]) .chevron {
+  transform: rotate(90deg);
+}
+
+/* Alert-header marker for non-regular terminal types, at the terminal's top-right. */
+
+.terminal-header {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: var(--menu-navigation-components-terminal-padding-aggregated-icon);
+  color: var(--element-neutral-color);
+  pointer-events: none;
+}
+
+.terminal-header > * {
+  width: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  height: var(--menu-navigation-components-tree-navigation-item-icon-size);
+}
+
+.wrapper.disabled .terminal-header {
+  color: var(--on-flat-disabled-color);
+}
+
+.label-container {
+  display: flex;
+  flex: 1;
+  gap: var(
+    --menu-navigation-components-tree-navigation-item-padding-horizontal
+  );
+  align-items: center;
+  min-width: 0;
+  padding-right: var(
+    --menu-navigation-components-tree-navigation-item-padding-horizontal
+  );
+}
+
+.leading-icon {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  height: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  color: var(--on-flat-neutral-color);
+}
+
+::slotted([slot="icon"]) {
+  display: block;
+  width: var(--menu-navigation-components-tree-navigation-item-icon-size);
+  height: var(--menu-navigation-components-tree-navigation-item-icon-size);
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.alert-badge {
+  flex-shrink: 0;
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=tree-navigation-item.css.js.map

package/dist/components/tree-navigation-item/tree-navigation-item.css.js.map

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