@oicl/openbridge-webcomponents 0.0.4

package/dist/components/slider/slider.css.js

@@ -0,0 +1,135 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+
+  color: var(--element-neutral-color, #1a1a1a);
+}
+
+:host([hug-container]) {
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+.wrapper {
+  flex: 1;
+  height: 48px;
+  position: relative;
+}
+
+.slider {
+  position: absolute;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  padding: 0;
+  background: none;
+}
+
+.slider::-webkit-slider-container {
+  position: absolute;
+  margin: auto 0;
+  inset: 0;
+  width: 100%;
+  height: 4px;
+  border-radius: 6px;
+  background: none;
+}
+
+.track {
+  position: absolute;
+  -webkit-appearance: none;
+  appearance: none;
+  margin: auto 0;
+  padding: 0;
+  inset: 0;
+  width: 100%;
+  height: 4px;
+  border-radius: 6px;
+  background: var(--border-outline-color);
+}
+
+.interactive-track {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  height: 4px;
+  border-radius: 6px;
+  width: calc(var(--ratio) * 100% + (1 - 2 * var(--ratio)) * 12px);
+  margin-top: auto;
+  margin-bottom: auto;
+  border: 1px solid var(--indent-enabled-border-color);
+  background: var(--selected-enabled-background-color);
+}
+
+.wrapper:hover .interactive-track {
+  background: var(--selected-hover-background-color);
+}
+
+.wrapper:active .interactive-track {
+  background: var(--selected-pressed-background-color);
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 100%;
+  background: var(--selected-enabled-background-color);
+  cursor: pointer;
+}
+
+.slider {
+  cursor: pointer;
+}
+
+.slider:focus {
+    outline: none;
+  }
+
+.slider::-webkit-slider-thumb {
+    border-color: var(--selected-enabled-border-color);
+    background-color: var(--selected-enabled-background-color);
+    border-width: 1px;
+    border-style: solid;
+    cursor: pointer;
+  }
+
+.slider:focus-visible::-webkit-slider-thumb{
+    outline-color: hsla(211, 100%, 44%, 0.3);
+    outline-width: 4px;
+    outline-style: solid;
+  }
+
+.slider:hover::-webkit-slider-thumb, .slider:hover + .interactive-track{
+    border-color: var(--selected-hover-border-color);
+    background-color: var(--selected-hover-background-color);
+  }
+
+.slider:active::-webkit-slider-thumb {
+    border-color: var(--selected-pressed-border-color);
+    background-color: var(--selected-pressed-background-color);
+  }
+
+.slider:disabled::-webkit-slider-thumb {
+    border-color: var(--selected-disabled-border-color);
+    background-color: var(--selected-disabled-background-color);
+    cursor: not-allowed;
+    color: var(--on-selected-disabled-color);
+  }`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=slider.css.js.map

package/dist/components/slider/slider.css.js.map

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

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+import '../icon-button/icon-button';
+/**
+ * @element obc-slider
+ *
+ * @prop {number} value - The value of the slider
+ * @prop {number} min - The minimum value of the slider
+ * @prop {number} max - The maximum value of the slider
+ * @prop {number} step - The step value of the slider
+ * @prop {number} stepClick - The step value when clicking the increase or decrease buttons
+ * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container
+ *
+ * @slot icon-left - Slot for the left icon
+ * @slot icon-right - Slot for the right icon
+ *
+ * @fires value - Fires when the value is changed
+ */
+export declare class ObcSlider extends LitElement {
+    value: number;
+    min: number;
+    max: number;
+    step: number | undefined;
+    stepClick: number;
+    onInput(value: number): void;
+    onReduceClick(): void;
+    onIncreaseClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-slider': ObcSlider;
+    }
+}
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,4BAA4B,CAAC;AAEpC;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,UAAU;IACb,KAAK,SAAM;IACX,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACA,SAAS,SAAM;IAElE,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB,aAAa;IAIb,eAAe;IAIN,MAAM;IA+Bf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/slider/slider.js

@@ -0,0 +1,89 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import componentStyle from "./slider.css.js";
+import "../icon-button/icon-button.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 ObcSlider = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.value = 50;
+    this.min = 0;
+    this.max = 100;
+    this.stepClick = 10;
+  }
+  onInput(value) {
+    this.value = value;
+    this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
+  }
+  onReduceClick() {
+    this.onInput(Math.max(this.value - this.stepClick, this.min));
+  }
+  onIncreaseClick() {
+    this.onInput(Math.min(this.value + this.stepClick, this.max));
+  }
+  render() {
+    const ratio = (this.value - this.min) / (this.max - this.min);
+    return html`
+      <obc-icon-button @click=${this.onReduceClick} variant="flat">
+        <slot name="icon-left"></slot>
+      </obc-icon-button>
+      <div class="wrapper">
+        <div class="track"></div>
+        <div
+          class="interactive-track"
+          style=${styleMap({ "--ratio": ratio })}
+        ></div>
+        <input
+          type="range"
+          min=${this.min}
+          max=${this.max}
+          step=${ifDefined(this.step)}
+          .value=${this.value.toString()}
+          class="slider"
+          @input=${(event) => {
+      this.value = Number(event.target.value);
+      this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
+    }}
+        />
+      </div>
+      <obc-icon-button @click=${this.onIncreaseClick} variant="flat">
+        <slot name="icon-right"></slot>
+      </obc-icon-button>
+    `;
+  }
+};
+ObcSlider.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Number })
+], ObcSlider.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcSlider.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcSlider.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcSlider.prototype, "step", 2);
+__decorateClass([
+  property({ type: Number, attribute: "step-click" })
+], ObcSlider.prototype, "stepClick", 2);
+ObcSlider = __decorateClass([
+  customElement("obc-slider")
+], ObcSlider);
+export {
+  ObcSlider
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {customElement, property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport componentStyle from './slider.css?inline';\nimport '../icon-button/icon-button';\n\n/**\n * @element obc-slider\n *\n * @prop {number} value - The value of the slider\n * @prop {number} min - The minimum value of the slider\n * @prop {number} max - The maximum value of the slider\n * @prop {number} step - The step value of the slider\n * @prop {number} stepClick - The step value when clicking the increase or decrease buttons\n * @attr hug-container - If set, the slider will not have any spacing between the slider icons and the container\n *\n * @slot icon-left - Slot for the left icon\n * @slot icon-right - Slot for the right icon\n *\n * @fires value - Fires when the value is changed\n */\n@customElement('obc-slider')\nexport class ObcSlider extends LitElement {\n  @property({type: Number}) value = 50;\n  @property({type: Number}) min = 0;\n  @property({type: Number}) max = 100;\n  @property({type: Number}) step: number | undefined;\n  @property({type: Number, attribute: 'step-click'}) stepClick = 10;\n\n  onInput(value: number) {\n    this.value = value;\n    this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n  }\n\n  onReduceClick() {\n    this.onInput(Math.max(this.value - this.stepClick, this.min));\n  }\n\n  onIncreaseClick() {\n    this.onInput(Math.min(this.value + this.stepClick, this.max));\n  }\n\n  override render() {\n    const ratio = (this.value - this.min) / (this.max - this.min);\n    return html`\n      <obc-icon-button @click=${this.onReduceClick} variant=\"flat\">\n        <slot name=\"icon-left\"></slot>\n      </obc-icon-button>\n      <div class=\"wrapper\">\n        <div class=\"track\"></div>\n        <div\n          class=\"interactive-track\"\n          style=${styleMap({'--ratio': ratio})}\n        ></div>\n        <input\n          type=\"range\"\n          min=${this.min}\n          max=${this.max}\n          step=${ifDefined(this.step)}\n          .value=${this.value.toString()}\n          class=\"slider\"\n          @input=${(event: Event) => {\n            this.value = Number((event.target as HTMLInputElement).value);\n            this.dispatchEvent(new CustomEvent('value', {detail: this.value}));\n          }}\n        />\n      </div>\n      <obc-icon-button @click=${this.onIncreaseClick} variant=\"flat\">\n        <slot name=\"icon-right\"></slot>\n      </obc-icon-button>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-slider': ObcSlider;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBa,IAAA,YAAN,cAAwB,WAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA;AAC6B,SAAA,QAAA;AACF,SAAA,MAAA;AACA,SAAA,MAAA;AAE+B,SAAA,YAAA;AAAA,EAAA;AAAA,EAE/D,QAAQ,OAAe;AACrB,SAAK,QAAQ;AACR,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,EACnE;AAAA,EAEA,gBAAgB;AACT,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAEA,kBAAkB;AACX,SAAA,QAAQ,KAAK,IAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,GAAG,CAAC;AAAA,EAC9D;AAAA,EAES,SAAS;AAChB,UAAM,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK;AAClD,WAAA;AAAA,gCACqB,KAAK,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOhC,SAAS,EAAC,WAAW,MAAM,CAAA,CAAC;AAAA;AAAA;AAAA;AAAA,gBAI9B,KAAK,GAAG;AAAA,gBACR,KAAK,GAAG;AAAA,iBACP,UAAU,KAAK,IAAI,CAAC;AAAA,mBAClB,KAAK,MAAM,UAAU;AAAA;AAAA,mBAErB,CAAC,UAAiB;AACzB,WAAK,QAAQ,OAAQ,MAAM,OAA4B,KAAK;AACvD,WAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,KAAK,MAAM,CAAA,CAAC;AAAA,IAAA,CAClE;AAAA;AAAA;AAAA,gCAGqB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,EAIlD;AAGF;AApDa,UAmDK,SAAS,UAAU,cAAc;AAlDvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GADb,UACe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,UAEe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAHb,UAGe,WAAA,OAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAJb,UAIe,WAAA,QAAA,CAAA;AACyB,gBAAA;AAAA,EAAlD,SAAS,EAAC,MAAM,QAAQ,WAAW,cAAa;AAAA,GALtC,UAKwC,WAAA,aAAA,CAAA;AALxC,YAAN,gBAAA;AAAA,EADN,cAAc,YAAY;AAAA,GACd,SAAA;"}

package/dist/components/table/table.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export declare class ObcTableCell extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export declare class ObcTableHeadCell extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export declare class ObcTableRow extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export declare class ObcTableHeader extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export declare class ObcTableBody extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export declare class ObcTable extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-table': ObcTable;
+        'obc-table-row': ObcTableRow;
+        'obc-table-header': ObcTableHeader;
+    }
+}
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAKrD,qBACa,YAAa,SAAQ,UAAU;IACjC,MAAM;IAIf,OAAgB,MAAM,0BAuBpB;CACH;AAED,qBACa,gBAAiB,SAAQ,UAAU;IACrC,MAAM;IAIf,OAAgB,MAAM,0BA8BpB;CACH;AAED,qBACa,WAAY,SAAQ,UAAU;IAChC,MAAM;IAIf,OAAgB,MAAM,0BAMpB;CACH;AAED,qBACa,cAAe,SAAQ,UAAU;IACnC,MAAM;IAIf,OAAgB,MAAM,4BASpB;CACH;AAED,qBACa,YAAa,SAAQ,UAAU;IACjC,MAAM;IAIf,OAAgB,MAAM,0BAAyB;CAChD;AAED,qBACa,QAAS,SAAQ,UAAU;IAC7B,MAAM;IAIf,OAAgB,MAAM,0BAMpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,eAAe,EAAE,WAAW,CAAC;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/table/table.js

@@ -0,0 +1,152 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import tbodystyle from "./tbody.css.js";
+import theadstyle from "./thead.css.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 ObcTableCell = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTableCell.styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: table-cell;
+      padding-right: 16px;
+      padding-left: 16px;
+      white-space: nowrap;
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--border-divider-color);
+      vertical-align: middle;
+      height: 48px;
+    }
+
+    :host(:first-child) {
+      padding-left: 24px;
+    }
+
+    :host(:last-child) {
+      padding-right: 24px;
+    }
+  `;
+ObcTableCell = __decorateClass([
+  customElement("obc-table-cell")
+], ObcTableCell);
+let ObcTableHeadCell = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTableHeadCell.styles = css`
+    :host {
+      box-sizing: border-box;
+      position: relative;
+      display: table-cell;
+      padding-right: 16px;
+      padding-left: 16px;
+      border-bottom: 1px solid var(--border-divider-color);
+      vertical-align: middle;
+    }
+
+    :host(:first-child) {
+      padding-left: 24px;
+    }
+
+    :host(:last-child) {
+      padding-right: 24px;
+    }
+
+    :host(:not(:last-child))::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 4px;
+      bottom: 4px;
+      right: -0.5px;
+      width: 1px;
+      background-color: var(--border-divider-color);
+      border-radius: 1px;
+    }
+  `;
+ObcTableHeadCell = __decorateClass([
+  customElement("obc-table-head-cell")
+], ObcTableHeadCell);
+let ObcTableRow = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTableRow.styles = css`
+    :host {
+      display: table-row;
+      vertical-align: middle;
+      border-bottom: 1px solid var(--border-divider-color);
+    }
+  `;
+ObcTableRow = __decorateClass([
+  customElement("obc-table-row")
+], ObcTableRow);
+let ObcTableHeader = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTableHeader.styles = [
+  unsafeCSS(theadstyle),
+  css`
+      :host {
+        display: table-header-group;
+        position: sticky;
+        top: 0;
+      }
+    `
+];
+ObcTableHeader = __decorateClass([
+  customElement("obc-table-header")
+], ObcTableHeader);
+let ObcTableBody = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTableBody.styles = unsafeCSS(tbodystyle);
+ObcTableBody = __decorateClass([
+  customElement("obc-table-body")
+], ObcTableBody);
+let ObcTable = class extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+};
+ObcTable.styles = css`
+    :host {
+      display: table;
+      width: 100%;
+      overflow-y: auto;
+    }
+  `;
+ObcTable = __decorateClass([
+  customElement("obc-table")
+], ObcTable);
+export {
+  ObcTable,
+  ObcTableBody,
+  ObcTableCell,
+  ObcTableHeadCell,
+  ObcTableHeader,
+  ObcTableRow
+};
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.ts"],"sourcesContent":["import {LitElement, html, css, unsafeCSS} from 'lit';\nimport {customElement} from 'lit/decorators.js';\nimport tbodystyle from './tbody.css?inline';\nimport theadstyle from './thead.css?inline';\n\n@customElement('obc-table-cell')\nexport class ObcTableCell extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = css`\n    * {\n      box-sizing: border-box;\n    }\n\n    :host {\n      display: table-cell;\n      padding-right: 16px;\n      padding-left: 16px;\n      white-space: nowrap;\n      box-sizing: border-box;\n      border-bottom: 1px solid var(--border-divider-color);\n      vertical-align: middle;\n      height: 48px;\n    }\n\n    :host(:first-child) {\n      padding-left: 24px;\n    }\n\n    :host(:last-child) {\n      padding-right: 24px;\n    }\n  `;\n}\n\n@customElement('obc-table-head-cell')\nexport class ObcTableHeadCell extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = css`\n    :host {\n      box-sizing: border-box;\n      position: relative;\n      display: table-cell;\n      padding-right: 16px;\n      padding-left: 16px;\n      border-bottom: 1px solid var(--border-divider-color);\n      vertical-align: middle;\n    }\n\n    :host(:first-child) {\n      padding-left: 24px;\n    }\n\n    :host(:last-child) {\n      padding-right: 24px;\n    }\n\n    :host(:not(:last-child))::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 4px;\n      bottom: 4px;\n      right: -0.5px;\n      width: 1px;\n      background-color: var(--border-divider-color);\n      border-radius: 1px;\n    }\n  `;\n}\n\n@customElement('obc-table-row')\nexport class ObcTableRow extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = css`\n    :host {\n      display: table-row;\n      vertical-align: middle;\n      border-bottom: 1px solid var(--border-divider-color);\n    }\n  `;\n}\n\n@customElement('obc-table-header')\nexport class ObcTableHeader extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = [\n    unsafeCSS(theadstyle),\n    css`\n      :host {\n        display: table-header-group;\n        position: sticky;\n        top: 0;\n      }\n    `,\n  ];\n}\n\n@customElement('obc-table-body')\nexport class ObcTableBody extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = unsafeCSS(tbodystyle);\n}\n\n@customElement('obc-table')\nexport class ObcTable extends LitElement {\n  override render() {\n    return html` <slot></slot> `;\n  }\n\n  static override styles = css`\n    :host {\n      display: table;\n      width: 100%;\n      overflow-y: auto;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-table': ObcTable;\n    'obc-table-row': ObcTableRow;\n    'obc-table-header': ObcTableHeader;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAMa,IAAA,eAAN,cAA2B,WAAW;AAAA,EAClC,SAAS;AACT,WAAA;AAAA,EACT;AA0BF;AA7Ba,aAKK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AALd,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;AAgCA,IAAA,mBAAN,cAA+B,WAAW;AAAA,EACtC,SAAS;AACT,WAAA;AAAA,EACT;AAiCF;AApCa,iBAKK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AALd,mBAAN,gBAAA;AAAA,EADN,cAAc,qBAAqB;AAAA,GACvB,gBAAA;AAuCA,IAAA,cAAN,cAA0B,WAAW;AAAA,EACjC,SAAS;AACT,WAAA;AAAA,EACT;AASF;AAZa,YAKK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AALd,cAAN,gBAAA;AAAA,EADN,cAAc,eAAe;AAAA,GACjB,WAAA;AAeA,IAAA,iBAAN,cAA6B,WAAW;AAAA,EACpC,SAAS;AACT,WAAA;AAAA,EACT;AAYF;AAfa,eAKK,SAAS;AAAA,EACvB,UAAU,UAAU;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOF;AAdW,iBAAN,gBAAA;AAAA,EADN,cAAc,kBAAkB;AAAA,GACpB,cAAA;AAkBA,IAAA,eAAN,cAA2B,WAAW;AAAA,EAClC,SAAS;AACT,WAAA;AAAA,EACT;AAGF;AANa,aAKK,SAAS,UAAU,UAAU;AALlC,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;AASA,IAAA,WAAN,cAAuB,WAAW;AAAA,EAC9B,SAAS;AACT,WAAA;AAAA,EACT;AASF;AAZa,SAKK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AALd,WAAN,gBAAA;AAAA,EADN,cAAc,WAAW;AAAA,GACb,QAAA;"}

package/dist/components/table/tbody.css.js

@@ -0,0 +1,11 @@
+import { css } from "lit";
+const tbodystyle = css`:host {
+    display: table-row-group;
+    background: var(--container-background-color);
+    vertical-align: middle;
+}
+`;
+export {
+  tbodystyle as default
+};
+//# sourceMappingURL=tbody.css.js.map

package/dist/components/table/tbody.css.js.map

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

package/dist/components/table/thead.css.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+const theadstyle = css`:host {
+    text-align: left;
+    color: var(--element-neutral-color);
+    /* UI/Overline */
+    font-family: 'Noto Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+    /* 200% */
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--border-divider-color);
+    background: var(--container-section-color);
+    height: 24px;
+    display: table-header-group;
+}
+
+`;
+export {
+  theadstyle as default
+};
+//# sourceMappingURL=thead.css.js.map

package/dist/components/table/thead.css.js.map

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

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

@@ -0,0 +1,46 @@
+import { css } from "lit";
+const componentStyle = css`:host {
+  box-sizing: border-box;
+  display: block;
+  padding: 8px 0;
+  height: 48px;
+}
+
+:host([has-labels]) {
+  padding-top: 4px;
+  height: 64px;
+}
+
+.wrapper {
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--indent-enabled-border-color, rgba(0, 0, 0, 0.05));
+  background: var(--indent-enabled-background-color, rgba(0, 0, 0, 0.05));
+  gap: 1px;
+}
+
+::slotted(*:not(:first-child))::before {
+  box-sizing: border-box;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  margin-left: -2px;
+  display: block;
+  height: 16px;
+  width: 1px;
+  border-radius: 1px;
+  background: var(--border-divider-color, rgba(0, 0, 0, 0.08));
+}
+
+::slotted(*:last-child) {
+  margin-right: -2px;
+}`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=toggle-button-group.css.js.map

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

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

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, PropertyValueMap } from 'lit';
+import { ObcToggleButtonOption } from '../toggle-button-option/toggle-button-option';
+export declare class ObcToggleButtonGroup extends LitElement {
+    hasLabels: boolean;
+    value: string;
+    options: NodeListOf<ObcToggleButtonOption>;
+    protected firstUpdated(_changedProperties: PropertyValueMap<unknown> | Map<PropertyKey, unknown>): void;
+    handleOptionClick(event: Event): void;
+    requestUpdate(name?: PropertyKey, oldValue?: unknown): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-toggle-button-group': ObcToggleButtonGroup;
+    }
+}
+//# sourceMappingURL=toggle-button-group.d.ts.map

package/dist/components/toggle-button-group/toggle-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAkB,MAAM,KAAK,CAAC;AAMlE,OAAO,EAAC,qBAAqB,EAAC,MAAM,8CAA8C,CAAC;AAGnF,qBACa,oBAAqB,SAAQ,UAAU;IACE,SAAS,UAAS;IAC5C,KAAK,SAAM;IAGrC,OAAO,EAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;cAEzB,YAAY,CAC7B,kBAAkB,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACxE,IAAI;IAQP,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAQrB,aAAa,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,OAAO;IASpD,MAAM;IAQf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAC;KACjD;CACF"}

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

@@ -0,0 +1,67 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, queryAssignedElements, customElement } from "lit/decorators.js";
+import componentStyle from "./toggle-button-group.css.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 ObcToggleButtonGroup = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.hasLabels = false;
+    this.value = "";
+  }
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    this.options.forEach((slot) => {
+      slot.addEventListener("selected", (e) => this.handleOptionClick(e));
+      slot.selected = slot.value === this.value;
+    });
+  }
+  handleOptionClick(event) {
+    const value = event.detail.value;
+    this.dispatchEvent(new CustomEvent("value", { detail: { value } }));
+    this.options.forEach((option) => {
+      option.selected = option.value === value;
+    });
+  }
+  requestUpdate(name, oldValue) {
+    if (name && name == "value" && this.value !== oldValue) {
+      this.options.forEach((option) => {
+        option.selected = option.value === this.value;
+      });
+    }
+    return super.requestUpdate(name, oldValue);
+  }
+  render() {
+    return html`
+      <div class="wrapper ${this.hasLabels ? "has-labels" : ""}">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+ObcToggleButtonGroup.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean, attribute: "has-labels" })
+], ObcToggleButtonGroup.prototype, "hasLabels", 2);
+__decorateClass([
+  property({ type: String })
+], ObcToggleButtonGroup.prototype, "value", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "obc-toggle-button-option" })
+], ObcToggleButtonGroup.prototype, "options", 2);
+ObcToggleButtonGroup = __decorateClass([
+  customElement("obc-toggle-button-group")
+], ObcToggleButtonGroup);
+export {
+  ObcToggleButtonGroup
+};
+//# sourceMappingURL=toggle-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.js","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"sourcesContent":["import {LitElement, PropertyValueMap, html, unsafeCSS} from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport {ObcToggleButtonOption} from '../toggle-button-option/toggle-button-option';\nimport componentStyle from './toggle-button-group.css?inline';\n\n@customElement('obc-toggle-button-group')\nexport class ObcToggleButtonGroup extends LitElement {\n  @property({type: Boolean, attribute: 'has-labels'}) hasLabels = false;\n  @property({type: String}) value = '';\n\n  @queryAssignedElements({selector: 'obc-toggle-button-option'})\n  options!: NodeListOf<ObcToggleButtonOption>;\n\n  protected override firstUpdated(\n    _changedProperties: PropertyValueMap<unknown> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    this.options.forEach((slot) => {\n      slot.addEventListener('selected', (e) => this.handleOptionClick(e));\n      slot.selected = slot.value === this.value;\n    });\n  }\n\n  handleOptionClick(event: Event) {\n    const value = (event as CustomEvent).detail.value;\n    this.dispatchEvent(new CustomEvent('value', {detail: {value}}));\n    this.options.forEach((option) => {\n      option.selected = option.value === value;\n    });\n  }\n\n  override requestUpdate(name?: PropertyKey, oldValue?: unknown) {\n    if (name && name == 'value' && this.value !== oldValue) {\n      this.options.forEach((option) => {\n        option.selected = option.value === this.value;\n      });\n    }\n    return super.requestUpdate(name, oldValue);\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrapper ${this.hasLabels ? 'has-labels' : ''}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-toggle-button-group': ObcToggleButtonGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAUa,IAAA,uBAAN,cAAmC,WAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA;AAC2D,SAAA,YAAA;AAC9B,SAAA,QAAA;AAAA,EAAA;AAAA,EAKf,aACjB,oBACM;AACN,UAAM,aAAa,kBAAkB;AAChC,SAAA,QAAQ,QAAQ,CAAC,SAAS;AAC7B,WAAK,iBAAiB,YAAY,CAAC,MAAM,KAAK,kBAAkB,CAAC,CAAC;AAC7D,WAAA,WAAW,KAAK,UAAU,KAAK;AAAA,IAAA,CACrC;AAAA,EACH;AAAA,EAEA,kBAAkB,OAAc;AACxB,UAAA,QAAS,MAAsB,OAAO;AACvC,SAAA,cAAc,IAAI,YAAY,SAAS,EAAC,QAAQ,EAAC,QAAO,CAAA,CAAC;AACzD,SAAA,QAAQ,QAAQ,CAAC,WAAW;AACxB,aAAA,WAAW,OAAO,UAAU;AAAA,IAAA,CACpC;AAAA,EACH;AAAA,EAES,cAAc,MAAoB,UAAoB;AAC7D,QAAI,QAAQ,QAAQ,WAAW,KAAK,UAAU,UAAU;AACjD,WAAA,QAAQ,QAAQ,CAAC,WAAW;AACxB,eAAA,WAAW,OAAO,UAAU,KAAK;AAAA,MAAA,CACzC;AAAA,IACH;AACO,WAAA,MAAM,cAAc,MAAM,QAAQ;AAAA,EAC3C;AAAA,EAES,SAAS;AACT,WAAA;AAAA,4BACiB,KAAK,YAAY,eAAe,EAAE;AAAA;AAAA;AAAA;AAAA,EAI5D;AAGF;AA3Ca,qBA0CK,SAAS,UAAU,cAAc;AAzCG,gBAAA;AAAA,EAAnD,SAAS,EAAC,MAAM,SAAS,WAAW,cAAa;AAAA,GADvC,qBACyC,WAAA,aAAA,CAAA;AAC1B,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,QAAO;AAAA,GAFb,qBAEe,WAAA,SAAA,CAAA;AAG1B,gBAAA;AAAA,EADC,sBAAsB,EAAC,UAAU,4BAA2B;AAAA,GAJlD,qBAKX,WAAA,WAAA,CAAA;AALW,uBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,oBAAA;"}