@operato/input 2.0.0-beta.16 → 2.0.0-beta.18

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.0-beta.18](https://github.com/hatiolab/operato/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-06-11)
+
+
+### :rocket: New Features
+
+* ox-input-table-column-config ([39be540](https://github.com/hatiolab/operato/commit/39be54054e210f6ce5d55499dffe78f4426d0d76))
+
+
+
+## [2.0.0-beta.17](https://github.com/hatiolab/operato/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-06-11)
+
+
+### :rocket: New Features
+
+* ox-input-table-column-config ([0b84541](https://github.com/hatiolab/operato/commit/0b84541ec63fc71538292abd9e81d8c38baee44c))
+
+
+
 ## [2.0.0-beta.16](https://github.com/hatiolab/operato/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-06-10)
 
 **Note:** Version bump only for package @operato/input

package/dist/src/index.d.ts

@@ -28,3 +28,4 @@ export * from './ox-input-quantifier.js';
 export * from './ox-input-select-buttons.js';
 export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
+export * from './ox-input-table-column-config.js';

package/dist/src/index.js

@@ -28,4 +28,5 @@ export * from './ox-input-quantifier.js';
 export * from './ox-input-select-buttons.js';
 export * from './ox-input-textarea.js';
 export * from './ox-input-direction.js';
+export * from './ox-input-table-column-config.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,0BAA0B,CAAA;AACxC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mCAAmC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nexport * from './ox-form-field.js'\nexport * from './ox-buttons-radio.js'\nexport * from './ox-checkbox.js'\nexport * from './ox-select.js'\nexport * from './ox-input-angle.js'\nexport * from './ox-input-3dish.js'\nexport * from './ox-input-3axis.js'\nexport * from './ox-input-stack.js'\nexport * from './ox-input-barcode.js'\nexport * from './ox-input-code.js'\nexport * from './ox-input-color.js'\nexport * from './ox-input-multiple-colors.js'\nexport * from './ox-input-color-stops.js'\nexport * from './ox-input-color-gradient.js'\nexport * from './ox-input-file.js'\nexport * from './ox-input-image.js'\nexport * from './ox-input-value-ranges.js'\nexport * from './ox-input-value-map.js'\nexport * from './ox-input-table.js'\nexport * from './ox-input-scene-component-id.js'\nexport * from './ox-input-crontab.js'\nexport * from './ox-input-partition-keys.js'\nexport * from './ox-input-duration.js'\nexport * from './ox-input-quantifier.js'\nexport * from './ox-input-select-buttons.js'\nexport * from './ox-input-textarea.js'\nexport * from './ox-input-direction.js'\nexport * from './ox-input-table-column-config.js'\n"]}

package/dist/src/ox-input-table-column-config.d.ts

@@ -0,0 +1,21 @@
+import { OxFormField } from './ox-form-field';
+import '@material/web/icon/icon.js';
+export interface ColumnConfig {
+    name: string;
+    label: string;
+    visible: boolean;
+    width: string;
+    order: number;
+}
+export declare class OxInputTableColumnConfig extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    value: ColumnConfig[];
+    render(): import("lit-html").TemplateResult<1>;
+    private _updateVisibility;
+    private _updateLabel;
+    private _updateWidth;
+    private _moveUp;
+    private _moveDown;
+    private _updateOrder;
+    private _notifyChange;
+}

package/dist/src/ox-input-table-column-config.js

@@ -0,0 +1,193 @@
+import { __decorate } from "tslib";
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-form-field';
+import '@material/web/icon/icon.js';
+let OxInputTableColumnConfig = class OxInputTableColumnConfig extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this.value = [];
+    }
+    static { this.styles = [
+        css `
+      :host {
+        display: block;
+        padding: 4px;
+        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
+        background-color: var(--ox-input-table-column-config-background-color, white);
+      }
+
+      table {
+        width: auto;
+        border-collapse: collapse;
+        font-size: 12px;
+        border: 0;
+      }
+
+      tr {
+        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));
+      }
+
+      th,
+      td {
+        padding: 0 var(--spacing-small, 2px);
+        text-align: left;
+      }
+
+      th {
+        text-transform: capitalize;
+        text-align: center;
+        background-color: var(
+          --ox-input-table-column-config-header-background-color,
+          var(--md-sys-color-secondary-container)
+        );
+        white-space: nowrap;
+      }
+
+      th *,
+      td * {
+        vertical-align: middle;
+      }
+
+      td[width] {
+        width: 60px;
+        text-align: right;
+      }
+
+      input {
+        font-size: 12px;
+        padding: 0;
+        margin: 0;
+        border: none;
+        width: 100%;
+        box-sizing: border-box;
+        outline: none;
+      }
+
+      input[type='number'] {
+        text-align: right;
+      }
+
+      md-icon {
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: none;
+
+        --md-icon-size: 16px;
+      }
+
+      md-icon[disabled] {
+        cursor: not-allowed;
+        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));
+      }
+    `
+    ]; }
+    render() {
+        return html `
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>name</th>
+            <th>label</th>
+            <th>width</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          ${this.value.map((col, index) => html `
+              <tr name=${col.name}>
+                <td>
+                  <input
+                    type="checkbox"
+                    .checked=${col.visible}
+                    @change=${(e) => this._updateVisibility(e, index)}
+                  />
+                </td>
+                <td name>${col.name}</td>
+                <td>
+                  <input type="text" .value=${col.label} @input=${(e) => this._updateLabel(e, index)} />
+                </td>
+                <td width>
+                  <input type="number" .value=${col.width} @input=${(e) => this._updateWidth(e, index)} />
+                </td>
+                <td buttons>
+                  <md-icon class="icon-button" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>
+                    arrow_upward
+                  </md-icon>
+                  <md-icon
+                    class="icon-button"
+                    @click=${() => this._moveDown(index)}
+                    ?disabled=${index === this.value.length - 1}
+                  >
+                    arrow_downward
+                  </md-icon>
+                </td>
+              </tr>
+            `)}
+        </tbody>
+      </table>
+    `;
+    }
+    _updateVisibility(event, index) {
+        const target = event.target;
+        this.value[index].visible = target.checked;
+        this.requestUpdate();
+        this._notifyChange();
+    }
+    _updateLabel(event, index) {
+        const target = event.target;
+        this.value[index].label = target.value;
+        this.requestUpdate();
+        this._notifyChange();
+    }
+    _updateWidth(event, index) {
+        const target = event.target;
+        this.value[index].width = target.value;
+        this.requestUpdate();
+        this._notifyChange();
+    }
+    _moveUp(index) {
+        if (index === 0)
+            return;
+        const temp = this.value[index];
+        this.value[index] = this.value[index - 1];
+        this.value[index - 1] = temp;
+        this._updateOrder();
+        this.requestUpdate();
+        this._notifyChange();
+    }
+    _moveDown(index) {
+        if (index === this.value.length - 1)
+            return;
+        const temp = this.value[index];
+        this.value[index] = this.value[index + 1];
+        this.value[index + 1] = temp;
+        this._updateOrder();
+        this.requestUpdate();
+        this._notifyChange();
+    }
+    _updateOrder() {
+        this.value = this.value.map((col, index) => ({
+            ...col,
+            order: index + 1
+        }));
+    }
+    _notifyChange() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.value,
+            bubbles: true,
+            composed: true
+        }));
+    }
+};
+__decorate([
+    property({ type: Array })
+], OxInputTableColumnConfig.prototype, "value", void 0);
+OxInputTableColumnConfig = __decorate([
+    customElement('ox-input-table-column-config')
+], OxInputTableColumnConfig);
+export { OxInputTableColumnConfig };
+//# sourceMappingURL=ox-input-table-column-config.js.map

package/dist/src/ox-input-table-column-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-table-column-config.js","sourceRoot":"","sources":["../../src/ox-input-table-column-config.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field'\nimport '@material/web/icon/icon.js'\n\nexport interface ColumnConfig {\n  name: string\n  label: string\n  visible: boolean\n  width: string\n  order: number\n}\n\n@customElement('ox-input-table-column-config')\nexport class OxInputTableColumnConfig extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        padding: 4px;\n        border: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n        background-color: var(--ox-input-table-column-config-background-color, white);\n      }\n\n      table {\n        width: auto;\n        border-collapse: collapse;\n        font-size: 12px;\n        border: 0;\n      }\n\n      tr {\n        border-bottom: 1px solid var(--ox-input-table-column-config-border-color, var(--md-sys-color-on-surface));\n      }\n\n      th,\n      td {\n        padding: 0 var(--spacing-small, 2px);\n        text-align: left;\n      }\n\n      th {\n        text-transform: capitalize;\n        text-align: center;\n        background-color: var(\n          --ox-input-table-column-config-header-background-color,\n          var(--md-sys-color-secondary-container)\n        );\n        white-space: nowrap;\n      }\n\n      th *,\n      td * {\n        vertical-align: middle;\n      }\n\n      td[width] {\n        width: 60px;\n        text-align: right;\n      }\n\n      input {\n        font-size: 12px;\n        padding: 0;\n        margin: 0;\n        border: none;\n        width: 100%;\n        box-sizing: border-box;\n        outline: none;\n      }\n\n      input[type='number'] {\n        text-align: right;\n      }\n\n      md-icon {\n        cursor: pointer;\n        padding: 0;\n        margin: 0;\n        border: none;\n        background: none;\n\n        --md-icon-size: 16px;\n      }\n\n      md-icon[disabled] {\n        cursor: not-allowed;\n        color: var(--ox-input-table-column-config-disabled-color, var(--md-sys-color-surface-variant, #ccc));\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: ColumnConfig[] = []\n\n  render() {\n    return html`\n      <table>\n        <thead>\n          <tr>\n            <th></th>\n            <th>name</th>\n            <th>label</th>\n            <th>width</th>\n            <th></th>\n          </tr>\n        </thead>\n        <tbody>\n          ${this.value.map(\n            (col, index) => html`\n              <tr name=${col.name}>\n                <td>\n                  <input\n                    type=\"checkbox\"\n                    .checked=${col.visible}\n                    @change=${(e: Event) => this._updateVisibility(e, index)}\n                  />\n                </td>\n                <td name>${col.name}</td>\n                <td>\n                  <input type=\"text\" .value=${col.label} @input=${(e: Event) => this._updateLabel(e, index)} />\n                </td>\n                <td width>\n                  <input type=\"number\" .value=${col.width} @input=${(e: Event) => this._updateWidth(e, index)} />\n                </td>\n                <td buttons>\n                  <md-icon class=\"icon-button\" @click=${() => this._moveUp(index)} ?disabled=${index === 0}>\n                    arrow_upward\n                  </md-icon>\n                  <md-icon\n                    class=\"icon-button\"\n                    @click=${() => this._moveDown(index)}\n                    ?disabled=${index === this.value.length - 1}\n                  >\n                    arrow_downward\n                  </md-icon>\n                </td>\n              </tr>\n            `\n          )}\n        </tbody>\n      </table>\n    `\n  }\n\n  private _updateVisibility(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].visible = target.checked\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateLabel(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].label = target.value\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateWidth(event: Event, index: number) {\n    const target = event.target as HTMLInputElement\n    this.value[index].width = target.value\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveUp(index: number) {\n    if (index === 0) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index - 1]\n    this.value[index - 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _moveDown(index: number) {\n    if (index === this.value.length - 1) return\n    const temp = this.value[index]\n    this.value[index] = this.value[index + 1]\n    this.value[index + 1] = temp\n    this._updateOrder()\n    this.requestUpdate()\n    this._notifyChange()\n  }\n\n  private _updateOrder() {\n    this.value = this.value.map((col, index) => ({\n      ...col,\n      order: index + 1\n    }))\n  }\n\n  private _notifyChange() {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist/stories/ox-input-table-column-config.stories.d.ts

@@ -0,0 +1,34 @@
+import '../src/ox-input-table-column-config.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+        };
+        value: {
+            control: string;
+        };
+        disabled: {
+            control: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: object;
+    disabled?: boolean;
+    theme?: string;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-table-column-config.stories.js

@@ -0,0 +1,99 @@
+import '../src/ox-input-table-column-config.js';
+import { html } from 'lit';
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles';
+export default {
+    title: 'ox-input-table-column-config',
+    component: 'ox-input-table-column-config',
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'object' },
+        disabled: { control: 'boolean' },
+        theme: { control: 'select', options: ['light', 'dark'] }
+    }
+};
+const Template = ({ name = 'table-column-config', value = {}, disabled, theme = 'light' }) => html `
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
+
+  <link href="/themes/light.css" rel="stylesheet" />
+  <link href="/themes/dark.css" rel="stylesheet" />
+  <link href="/themes/spacing.css" rel="stylesheet" />
+
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
+    rel="stylesheet"
+  />
+
+  <style>
+    ${MDTypeScaleStyles.cssText}
+  </style>
+
+  <style>
+    .container {
+      height: 500px;
+      text-align: center;
+      padding: 20px;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <script>
+    document.body.classList.add('${theme}')
+  </script>
+
+  <div class="container md-typescale-body-large-prominent">
+    <ox-input-table-column-config
+      @change=${(e) => {
+    console.log(e.target.value);
+}}
+      name=${name}
+      .value=${value}
+      ?disabled=${disabled}
+    >
+    </ox-input-table-column-config>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'table-column-config',
+    value: [
+        {
+            name: 'section',
+            label: 'Section',
+            visible: true,
+            width: 100,
+            order: 1
+        },
+        {
+            name: 'title',
+            label: 'Title',
+            visible: true,
+            width: 110,
+            order: 2
+        },
+        {
+            name: 'startDate',
+            label: 'Start Date',
+            visible: true,
+            width: 150,
+            order: 3
+        },
+        {
+            name: 'endDate',
+            label: 'End Date',
+            visible: true,
+            width: 200,
+            order: 4
+        }
+    ]
+};
+//# sourceMappingURL=ox-input-table-column-config.stories.js.map

package/dist/stories/ox-input-table-column-config.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-table-column-config.stories.js","sourceRoot":"","sources":["../../stories/ox-input-table-column-config.stories.ts"],"names":[],"mappings":"AAAA,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,MAAM,IAAI,iBAAiB,EAAE,MAAM,8CAA8C,CAAA;AAE1F,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,8BAA8B;IACzC,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC5B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAChC,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE;KACzD;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EACjC,IAAI,GAAG,qBAAqB,EAC5B,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,KAAK,GAAG,OAAO,EACN,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;MAqBd,iBAAiB,CAAC,OAAO;;;;;;;;;;;;;;;mCAeI,KAAK;;;;;gBAKxB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;aACM,IAAI;eACF,KAAK;kBACF,QAAQ;;;;CAIzB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE;QACL;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,YAAY;YACnB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;QACD;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,UAAU;YACjB,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,CAAC;SACT;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-input-table-column-config.js'\n\nimport { html, TemplateResult } from 'lit'\nimport { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'\n\nexport default {\n  title: 'ox-input-table-column-config',\n  component: 'ox-input-table-column-config',\n  argTypes: {\n    name: { control: 'text' },\n    value: { control: 'object' },\n    disabled: { control: 'boolean' },\n    theme: { control: 'select', options: ['light', 'dark'] }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: object\n  disabled?: boolean\n  theme?: string\n}\n\nconst Template: Story<ArgTypes> = ({\n  name = 'table-column-config',\n  value = {},\n  disabled,\n  theme = 'light'\n}: ArgTypes) => html`\n  <link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\" />\n\n  <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n  <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\n  <style>\n    ${MDTypeScaleStyles.cssText}\n  </style>\n\n  <style>\n    .container {\n      height: 500px;\n      text-align: center;\n      padding: 20px;\n\n      background-color: var(--md-sys-color-primary-container);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  </style>\n\n  <script>\n    document.body.classList.add('${theme}')\n  </script>\n\n  <div class=\"container md-typescale-body-large-prominent\">\n    <ox-input-table-column-config\n      @change=${(e: Event) => {\n        console.log((e.target as HTMLInputElement).value)\n      }}\n      name=${name}\n      .value=${value}\n      ?disabled=${disabled}\n    >\n    </ox-input-table-column-config>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'table-column-config',\n  value: [\n    {\n      name: 'section',\n      label: 'Section',\n      visible: true,\n      width: 100,\n      order: 1\n    },\n    {\n      name: 'title',\n      label: 'Title',\n      visible: true,\n      width: 110,\n      order: 2\n    },\n    {\n      name: 'startDate',\n      label: 'Start Date',\n      visible: true,\n      width: 150,\n      order: 3\n    },\n    {\n      name: 'endDate',\n      label: 'End Date',\n      visible: true,\n      width: 200,\n      order: 4\n    }\n  ]\n}\n"]}