@operato/form 1.0.0-alpha.1

package/dist/src/components/ox-search-form.js

@@ -0,0 +1,284 @@
+import { __decorate } from "tslib";
+import '@material/mwc-icon';
+import './ox-custom-input.js';
+import './ox-custom-select.js';
+import { LitElement, css, html } from 'lit';
+import { buildArgs, client } from '@operato/graphql';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
+import { SearchFormStyles } from '../styles/search-form-styles.js';
+import gql from 'graphql-tag';
+let SearchForm = class SearchForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hideSearchButton = false;
+    }
+    /* @deprecated */
+    getFields() {
+        return Array.from(this.form.querySelectorAll('input, select') || []);
+    }
+    render() {
+        return html `
+      <form
+        class="search-form"
+        @keypress=${(e) => {
+            if (e.keyCode === 13) {
+                e.preventDefault();
+                this.submit();
+            }
+        }}
+      >
+        ${(this.fields || []).map(field => html `
+            ${field.type === 'select'
+            ? html `
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <select .value=${field.value} .name=${field.name} ?hidden=${field.hidden}>
+                    ${(field.options || []).map((option) => html `
+                        <option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>
+                      `)}
+                  </select>
+                `
+            : field.type === 'checkbox'
+                ? html `
+                  <input
+                    id="ckbx_${field.name}"
+                    type="checkbox"
+                    ?checked="${field.value}"
+                    .name=${field.name}
+                    ?hidden=${field.hidden}
+                    @click=${(e) => {
+                    const checkbox = e.currentTarget;
+                    if (checkbox.hasAttribute('indeterminate')) {
+                        const values = [undefined, 'on', 'off'];
+                        const currentValue = checkbox._value;
+                        const newValue = values.indexOf(currentValue) + 1 > values.length - 1
+                            ? values[0]
+                            : values[values.indexOf(currentValue) + 1];
+                        if (newValue === 'on') {
+                            checkbox.checked = true;
+                        }
+                        else if (newValue === 'off') {
+                            checkbox.checked = false;
+                        }
+                        else {
+                            checkbox.indeterminate = true;
+                        }
+                        checkbox._value = newValue;
+                    }
+                }}
+                  />
+                  <label for="ckbx_${field.name}" ?hidden=${field.hidden}
+                    >${field.label || field.name || field.id}</label
+                  >
+                `
+                : field.type === 'object'
+                    ? html `
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <input
+                    .type=${field.type}
+                    .value=${field.value || ''}
+                    .name=${field.name}
+                    .field=${field.field}
+                    .queryName=${field.queryName}
+                    ?hidden=${field.hidden}
+                  />
+                `
+                    : html `
+                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>
+                  <input
+                    .type=${field.type}
+                    .value=${field.value || ''}
+                    .name=${field.name}
+                    ?hidden=${field.hidden}
+                    .placeholder=${field.placeholder || ''}
+                  />
+                `}
+          `)}
+        ${this.hideSearchButton || false
+            ? ``
+            : html `<mwc-icon @click=${(e) => this.submit()} search>search</mwc-icon>`}
+      </form>
+    `;
+    }
+    async updated(changes) {
+        if (changes.has('fields')) {
+            this._checkInputValidity();
+            var formFields = this.formFields;
+            this.fields &&
+                this.fields.forEach(field => {
+                    var formField = formFields.find(f => f.name == field.name);
+                    if (field.props instanceof Object && !Array.isArray(field.props)) {
+                        for (let prop in field.props) {
+                            if (field.props[prop]) {
+                                formField.setAttribute(prop, field.props[prop]);
+                            }
+                        }
+                    }
+                    if (field.attrs && Array.isArray(field.attrs)) {
+                        field.attrs.forEach(attr => {
+                            if (attr === 'indeterminate') {
+                                ;
+                                formField.indeterminate = true;
+                            }
+                            else {
+                                formField.setAttribute(attr, '');
+                            }
+                        });
+                    }
+                    if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {
+                        for (let eventName in field.handlers) {
+                            formField.addEventListener(eventName, field.handlers[eventName]);
+                        }
+                    }
+                });
+        }
+    }
+    _checkInputValidity() {
+        var _a;
+        const names = ((_a = this.fields) === null || _a === void 0 ? void 0 : _a.map(i => i.name)) || [];
+        const result = names.every(name => {
+            return names.indexOf(name) === names.lastIndexOf(name);
+        });
+        if (!result) {
+            throw new Error('Field name is duplicated.');
+        }
+    }
+    get searchParams() {
+        let searchParam = new URLSearchParams();
+        const fields = this.formFields;
+        fields.forEach(field => searchParam.append(field.name, field.value));
+        return decodeURI(searchParam.toString());
+    }
+    get queryFilters() {
+        return this.formFields
+            .filter(field => (field.type !== 'checkbox' && field.value && field.value !== '') ||
+            (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
+            (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value))
+            .map(field => {
+            const operator = field.getAttribute('searchOper') || '';
+            let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value;
+            return {
+                name: field.name,
+                value: field.type === 'text'
+                    ? value
+                    : field.type === 'checkbox'
+                        ? field.hasAttribute('indeterminate')
+                            ? field._value === 'on'
+                                ? true
+                                : false
+                            : field.checked
+                        : field.type === 'number'
+                            ? parseFloat(value)
+                            : value,
+                operator
+            };
+        });
+    }
+    async getQueryFilters() {
+        return await Promise.all(this.formFields
+            .filter(field => (field.type !== 'checkbox' && field.value && field.value !== '') ||
+            (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||
+            (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value))
+            .map(async (field) => {
+            const name = field.name;
+            const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || '';
+            const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value;
+            const filter = {
+                name,
+                operator,
+                value: field.type === 'text' && field.getAttribute('type') === 'object'
+                    ? await this._getResourceIds(field)
+                    : field.type === 'text'
+                        ? value
+                        : field.type === 'checkbox'
+                            ? field.hasAttribute('indeterminate')
+                                ? field._value === 'on'
+                                    ? true
+                                    : false
+                                : field.checked
+                            : field.type === 'number'
+                                ? parseFloat(value)
+                                : value,
+                relation: field.type === 'text' && field.getAttribute('type') === 'object'
+            };
+            return filter;
+        }));
+    }
+    async _getResourceIds(inputField) {
+        const { field = 'name', value, queryName } = inputField;
+        const response = await client.query({
+            query: gql `
+        query {
+          fetch: ${queryName}(${buildArgs({
+                filters: [
+                    {
+                        name: field,
+                        operator: 'i_like',
+                        value: `%${value}%`
+                    }
+                ]
+            })}) {
+            items {
+              id
+            }
+          }
+        }
+      `
+        });
+        if (!response.errors) {
+            const items = response.data.fetch.items;
+            return (items && items.map(item => item.id)) || [];
+        }
+    }
+    serialize() {
+        let data = {};
+        this.formFields.forEach(field => {
+            const name = field.name;
+            if (field.type === 'number') {
+                data[name] = parseFloat(field.value);
+            }
+            else if (field.type === 'checkbox') {
+                data[name] = field.checked;
+            }
+            else {
+                data[name] = field.value;
+            }
+        });
+        return data;
+    }
+    submit() {
+        this.dispatchEvent(new CustomEvent('submit'));
+    }
+};
+SearchForm.styles = [
+    SearchFormStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+
+        position: relative;
+      }
+
+      ::placeholder {
+        text-transform: capitalize;
+        color: var(--theme-white-color);
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], SearchForm.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], SearchForm.prototype, "hideSearchButton", void 0);
+__decorate([
+    query('form')
+], SearchForm.prototype, "form", void 0);
+__decorate([
+    queryAll('input, select')
+], SearchForm.prototype, "formFields", void 0);
+SearchForm = __decorate([
+    customElement('ox-search-form')
+], SearchForm);
+export { SearchForm };
+//# sourceMappingURL=ox-search-form.js.map

package/dist/src/components/ox-search-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-search-form.js","sourceRoot":"","sources":["../../../src/components/ox-search-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './ox-custom-input.js'\nimport './ox-custom-select.js'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { buildArgs, client } from '@operato/graphql'\nimport { customElement, property, query, queryAll } from 'lit/decorators.js'\n\nimport { SearchFormStyles } from '../styles/search-form-styles.js'\nimport gql from 'graphql-tag'\n\n@customElement('ox-search-form')\nexport class SearchForm extends LitElement {\n  static styles = [\n    SearchFormStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        position: relative;\n      }\n\n      ::placeholder {\n        text-transform: capitalize;\n        color: var(--theme-white-color);\n      }\n    `\n  ]\n\n  @property({ type: Array }) fields?: {\n    type: string\n    hidden: boolean\n    name: string\n    id: string\n    label: string\n    placeholder: string\n    value: any\n    field: string\n    queryName: string\n    props: { [prop: string]: string }\n    attrs: string[]\n    options: { name: string; value: string }[]\n    handlers: { [event: string]: EventListener }\n  }[]\n  @property({ type: Boolean }) hideSearchButton: boolean = false\n\n  @query('form') form!: HTMLFormElement\n  @queryAll('input, select') formFields!: ((HTMLInputElement | HTMLSelectElement) & { field: string; _value: any })[]\n\n  /* @deprecated */\n  getFields() {\n    return Array.from(this.form.querySelectorAll('input, select') || [])\n  }\n\n  render() {\n    return html`\n      <form\n        class=\"search-form\"\n        @keypress=${(e: KeyboardEvent) => {\n          if (e.keyCode === 13) {\n            e.preventDefault()\n            this.submit()\n          }\n        }}\n      >\n        ${(this.fields || []).map(\n          field => html`\n            ${field.type === 'select'\n              ? html`\n                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n                  <select .value=${field.value} .name=${field.name} ?hidden=${field.hidden}>\n                    ${(field.options || []).map(\n                      (option: { name: string; value: string }) => html`\n                        <option ?selected=${option.value == field.value} value=${option.value}>${option.name}</option>\n                      `\n                    )}\n                  </select>\n                `\n              : field.type === 'checkbox'\n              ? html`\n                  <input\n                    id=\"ckbx_${field.name}\"\n                    type=\"checkbox\"\n                    ?checked=\"${field.value}\"\n                    .name=${field.name}\n                    ?hidden=${field.hidden}\n                    @click=${(e: MouseEvent) => {\n                      const checkbox = e.currentTarget as HTMLInputElement & { _value: any }\n                      if (checkbox.hasAttribute('indeterminate')) {\n                        const values = [undefined, 'on', 'off']\n                        const currentValue = checkbox._value\n                        const newValue =\n                          values.indexOf(currentValue) + 1 > values.length - 1\n                            ? values[0]\n                            : values[values.indexOf(currentValue) + 1]\n\n                        if (newValue === 'on') {\n                          checkbox.checked = true\n                        } else if (newValue === 'off') {\n                          checkbox.checked = false\n                        } else {\n                          checkbox.indeterminate = true\n                        }\n                        checkbox._value = newValue\n                      }\n                    }}\n                  />\n                  <label for=\"ckbx_${field.name}\" ?hidden=${field.hidden}\n                    >${field.label || field.name || field.id}</label\n                  >\n                `\n              : field.type === 'object'\n              ? html`\n                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n                  <input\n                    .type=${field.type}\n                    .value=${field.value || ''}\n                    .name=${field.name}\n                    .field=${field.field}\n                    .queryName=${field.queryName}\n                    ?hidden=${field.hidden}\n                  />\n                `\n              : html`\n                  <label ?hidden=${field.hidden}>${field.label || field.name || field.id}</label>\n                  <input\n                    .type=${field.type}\n                    .value=${field.value || ''}\n                    .name=${field.name}\n                    ?hidden=${field.hidden}\n                    .placeholder=${field.placeholder || ''}\n                  />\n                `}\n          `\n        )}\n        ${this.hideSearchButton || false\n          ? ``\n          : html`<mwc-icon @click=${(e: MouseEvent) => this.submit()} search>search</mwc-icon>`}\n      </form>\n    `\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('fields')) {\n      this._checkInputValidity()\n\n      var formFields = this.formFields\n      this.fields &&\n        this.fields.forEach(field => {\n          var formField = formFields.find(f => f.name == field.name)\n          if (field.props instanceof Object && !Array.isArray(field.props)) {\n            for (let prop in field.props) {\n              if (field.props[prop]) {\n                formField!.setAttribute(prop, field.props[prop])\n              }\n            }\n          }\n\n          if (field.attrs && Array.isArray(field.attrs)) {\n            field.attrs.forEach(attr => {\n              if (attr === 'indeterminate') {\n                ;(formField as HTMLInputElement).indeterminate = true\n              } else {\n                formField!.setAttribute(attr, '')\n              }\n            })\n          }\n\n          if (field.handlers instanceof Object && !Array.isArray(field.handlers)) {\n            for (let eventName in field.handlers) {\n              formField!.addEventListener(eventName, field.handlers[eventName])\n            }\n          }\n        })\n    }\n  }\n\n  _checkInputValidity() {\n    const names = this.fields?.map(i => i.name) || []\n    const result = names.every(name => {\n      return names.indexOf(name) === names.lastIndexOf(name)\n    })\n    if (!result) {\n      throw new Error('Field name is duplicated.')\n    }\n  }\n\n  get searchParams() {\n    let searchParam = new URLSearchParams()\n    const fields = this.formFields\n    fields.forEach(field => searchParam.append(field.name, field.value))\n\n    return decodeURI(searchParam.toString())\n  }\n\n  get queryFilters() {\n    return this.formFields\n      .filter(\n        field =>\n          (field.type !== 'checkbox' && field.value && field.value !== '') ||\n          (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n          (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n      )\n      .map(field => {\n        const operator = field.getAttribute('searchOper') || ''\n        let value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n        return {\n          name: field.name,\n          value:\n            field.type === 'text'\n              ? value\n              : field.type === 'checkbox'\n              ? field.hasAttribute('indeterminate')\n                ? field._value === 'on'\n                  ? true\n                  : false\n                : (field as HTMLInputElement).checked\n              : field.type === 'number'\n              ? parseFloat(value)\n              : value,\n          operator\n        }\n      })\n  }\n\n  public async getQueryFilters() {\n    return await Promise.all(\n      this.formFields\n        .filter(\n          field =>\n            (field.type !== 'checkbox' && field.value && field.value !== '') ||\n            (field.type === 'checkbox' && !field.hasAttribute('indeterminate')) ||\n            (field.type === 'checkbox' && field.hasAttribute('indeterminate') && field._value)\n        )\n        .map(async field => {\n          const name = field.name\n          const operator = (field.type === 'text' && field.field ? 'in' : field.getAttribute('searchOper')) || ''\n          const value = operator.indexOf('like') >= 0 ? `%${field.value}%` : field.value\n          const filter = {\n            name,\n            operator,\n            value:\n              field.type === 'text' && field.getAttribute('type') === 'object'\n                ? await this._getResourceIds(field)\n                : field.type === 'text'\n                ? value\n                : field.type === 'checkbox'\n                ? field.hasAttribute('indeterminate')\n                  ? field._value === 'on'\n                    ? true\n                    : false\n                  : (field as HTMLInputElement).checked\n                : field.type === 'number'\n                ? parseFloat(value)\n                : value,\n            relation: field.type === 'text' && field.getAttribute('type') === 'object'\n          }\n          return filter\n        })\n    )\n  }\n\n  private async _getResourceIds(inputField: HTMLInputElement | HTMLSelectElement) {\n    const {\n      field = 'name',\n      value,\n      queryName\n    } = inputField as (HTMLInputElement | HTMLSelectElement) & { field: string; queryName: string }\n\n    const response = await client.query({\n      query: gql`\n        query {\n          fetch: ${queryName}(${buildArgs({\n        filters: [\n          {\n            name: field,\n            operator: 'i_like',\n            value: `%${value}%`\n          }\n        ]\n      })}) {\n            items {\n              id\n            }\n          }\n        }\n      `\n    })\n\n    if (!response.errors) {\n      const items = response.data.fetch.items as { id: string }[]\n      return (items && items.map(item => item.id)) || []\n    }\n  }\n\n  serialize() {\n    let data: { [name: string]: any } = {}\n\n    this.formFields.forEach(field => {\n      const name = field.name\n      if (field.type === 'number') {\n        data[name] = parseFloat(field.value)\n      } else if (field.type === 'checkbox') {\n        data[name] = (field as HTMLInputElement).checked\n      } else {\n        data[name] = field.value\n      }\n    })\n\n    return data\n  }\n\n  submit() {\n    this.dispatchEvent(new CustomEvent('submit'))\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './styles';
+export * from './components/ox-search-form';
+export * from './components/ox-file-uploader';

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export * from './styles';
+export * from './components/ox-search-form';
+export * from './components/ox-file-uploader';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,6BAA6B,CAAA;AAC3C,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './styles'\nexport * from './components/ox-search-form'\nexport * from './components/ox-file-uploader'\n"]}

package/dist/src/styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './single-column-form-styles';
+export * from './multi-column-form-styles';
+export * from './search-form-styles';

package/dist/src/styles/index.js

@@ -0,0 +1,4 @@
+export * from './single-column-form-styles';
+export * from './multi-column-form-styles';
+export * from './search-form-styles';
+//# sourceMappingURL=index.js.map

package/dist/src/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAA;AAC3C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './single-column-form-styles'\nexport * from './multi-column-form-styles'\nexport * from './search-form-styles'\n"]}

package/dist/src/styles/multi-column-form-styles.d.ts

@@ -0,0 +1 @@
+export declare const MultiColumnFormStyles: import("lit").CSSResult;

package/dist/src/styles/multi-column-form-styles.js

@@ -0,0 +1,192 @@
+import { css } from 'lit';
+export const MultiColumnFormStyles = css `
+  :host {
+    overflow: auto;
+    padding: var(--form-container-padding);
+  }
+
+  .multi-column-form {
+    display: grid;
+    grid-template-columns: repeat(24, 1fr);
+    grid-gap: var(--form-grid-gap);
+    grid-auto-rows: minmax(24px, auto);
+    max-width: var(--form-multi-column-max-width);
+    margin: var(--form-margin);
+  }
+  .multi-column-form fieldset {
+    display: contents;
+  }
+  .multi-column-form legend {
+    grid-column: span 24;
+    text-transform: capitalize;
+
+    padding: var(--legend-padding);
+    font: var(--legend-font);
+    color: var(--legend-text-color);
+    border-bottom: var(--legend-border-bottom);
+  }
+
+  .multi-column-form label {
+    grid-column: span 3;
+    text-align: right;
+    text-transform: capitalize;
+    align-self: center;
+
+    color: var(--label-color);
+    font: var(--label-font);
+  }
+
+  .multi-column-form input,
+  .multi-column-form table,
+  .multi-column-form select,
+  .multi-column-form textarea,
+  .multi-column-form [custom-input] {
+    grid-column: span 9;
+
+    border: var(--input-field-border);
+    border-radius: var(--input-field-border-radius);
+    padding: var(--input-field-padding);
+    font: var(--input-field-font);
+    max-width: 85%;
+  }
+  .multi-column-form select {
+    min-height: 25px;
+    max-width: calc(85% + 18px);
+  }
+
+  .multi-column-form input[type='checkbox'],
+  .multi-column-form input[type='radio'] {
+    justify-self: end;
+    align-self: center;
+    grid-column: span 3 / auto;
+    position: relative;
+    left: 17px;
+  }
+
+  .multi-column-form input[type='checkbox'] + label,
+  .multi-column-form input[type='radio'] + label {
+    padding-left: 17px;
+    text-align: left;
+    align-self: center;
+    grid-column: span 9 / auto;
+
+    font: var(--form-sublabel-font);
+    color: var(--form-sublabel-color);
+  }
+  .multi-column-form [options-wrap] {
+    grid-column: span 21 / auto;
+  }
+
+  input:focus {
+    outline: none;
+    border: 1px solid var(--focus-background-color);
+  }
+  input[type='checkbox'] {
+    margin: 0;
+  }
+
+  @media screen and (max-width: 480px) {
+    .multi-column-form {
+      max-width: 100%;
+      grid-template-columns: repeat(12, 1fr);
+      grid-gap: 5px;
+    }
+    .multi-column-form legend {
+      grid-column: span 12;
+    }
+    .multi-column-form label {
+      grid-column: span 4 / auto;
+      text-align: left;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      grid-column: span 8 / auto;
+      max-width: initial;
+      padding: var(--padding-default);
+      font: normal 15px var(--theme-font);
+    }
+    .multi-column-form input[type='checkbox'],
+    .multi-column-form input[type='radio'] {
+      justify-self: left;
+      align-self: center;
+      grid-column: span 1 / auto;
+      left: 0;
+      zoom: 1.4;
+    }
+
+    .multi-column-form input[type='checkbox'] + label,
+    .multi-column-form input[type='radio'] + label {
+      grid-column: span 11 / auto;
+      align-self: center;
+      position: relative;
+      left: -25px;
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 12 / auto;
+      display: grid;
+      grid-gap: var(--padding-default) var(--padding-narrow);
+      grid-template-columns: repeat(12, 1fr);
+    }
+    .multi-column-form [options-wrap] input[type='checkbox'] + label,
+    .multi-column-form [options-wrap] input[type='radio'] + label {
+      grid-column: span 5 / auto;
+      align-self: left;
+      left: -4%;
+      margin-right: 0;
+    }
+  }
+  @media (min-width: 481px) and (max-width: 1024px) {
+    .multi-column-form select {
+      max-width: calc(85% + 10px);
+    }
+  }
+  @media screen and (min-width: 1201px) and (max-width: 2000px) {
+    .multi-column-form {
+      grid-template-columns: repeat(36, 1fr);
+    }
+    .multi-column-form legend {
+      grid-column: span 36;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      max-width: 90%;
+    }
+    .multi-column-form select {
+      max-width: calc(90% + 18px);
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 33 / auto;
+    }
+  }
+  @media screen and (min-width: 2001px) {
+    .multi-column-form {
+      grid-template-columns: repeat(48, 1fr);
+    }
+    .multi-column-form legend {
+      grid-column: span 48;
+    }
+    .multi-column-form input,
+    .multi-column-form table,
+    .multi-column-form select,
+    .multi-column-form textarea,
+    .multi-column-form [custom-input] {
+      max-width: 90%;
+    }
+    .multi-column-form select {
+      max-width: calc(90% + 18px);
+    }
+    .multi-column-form [options-wrap] {
+      grid-column: span 45 / auto;
+    }
+  }
+`;
+//# sourceMappingURL=multi-column-form-styles.js.map

package/dist/src/styles/multi-column-form-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-column-form-styles.js","sourceRoot":"","sources":["../../../src/styles/multi-column-form-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LvC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MultiColumnFormStyles = css`\n  :host {\n    overflow: auto;\n    padding: var(--form-container-padding);\n  }\n\n  .multi-column-form {\n    display: grid;\n    grid-template-columns: repeat(24, 1fr);\n    grid-gap: var(--form-grid-gap);\n    grid-auto-rows: minmax(24px, auto);\n    max-width: var(--form-multi-column-max-width);\n    margin: var(--form-margin);\n  }\n  .multi-column-form fieldset {\n    display: contents;\n  }\n  .multi-column-form legend {\n    grid-column: span 24;\n    text-transform: capitalize;\n\n    padding: var(--legend-padding);\n    font: var(--legend-font);\n    color: var(--legend-text-color);\n    border-bottom: var(--legend-border-bottom);\n  }\n\n  .multi-column-form label {\n    grid-column: span 3;\n    text-align: right;\n    text-transform: capitalize;\n    align-self: center;\n\n    color: var(--label-color);\n    font: var(--label-font);\n  }\n\n  .multi-column-form input,\n  .multi-column-form table,\n  .multi-column-form select,\n  .multi-column-form textarea,\n  .multi-column-form [custom-input] {\n    grid-column: span 9;\n\n    border: var(--input-field-border);\n    border-radius: var(--input-field-border-radius);\n    padding: var(--input-field-padding);\n    font: var(--input-field-font);\n    max-width: 85%;\n  }\n  .multi-column-form select {\n    min-height: 25px;\n    max-width: calc(85% + 18px);\n  }\n\n  .multi-column-form input[type='checkbox'],\n  .multi-column-form input[type='radio'] {\n    justify-self: end;\n    align-self: center;\n    grid-column: span 3 / auto;\n    position: relative;\n    left: 17px;\n  }\n\n  .multi-column-form input[type='checkbox'] + label,\n  .multi-column-form input[type='radio'] + label {\n    padding-left: 17px;\n    text-align: left;\n    align-self: center;\n    grid-column: span 9 / auto;\n\n    font: var(--form-sublabel-font);\n    color: var(--form-sublabel-color);\n  }\n  .multi-column-form [options-wrap] {\n    grid-column: span 21 / auto;\n  }\n\n  input:focus {\n    outline: none;\n    border: 1px solid var(--focus-background-color);\n  }\n  input[type='checkbox'] {\n    margin: 0;\n  }\n\n  @media screen and (max-width: 480px) {\n    .multi-column-form {\n      max-width: 100%;\n      grid-template-columns: repeat(12, 1fr);\n      grid-gap: 5px;\n    }\n    .multi-column-form legend {\n      grid-column: span 12;\n    }\n    .multi-column-form label {\n      grid-column: span 4 / auto;\n      text-align: left;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      grid-column: span 8 / auto;\n      max-width: initial;\n      padding: var(--padding-default);\n      font: normal 15px var(--theme-font);\n    }\n    .multi-column-form input[type='checkbox'],\n    .multi-column-form input[type='radio'] {\n      justify-self: left;\n      align-self: center;\n      grid-column: span 1 / auto;\n      left: 0;\n      zoom: 1.4;\n    }\n\n    .multi-column-form input[type='checkbox'] + label,\n    .multi-column-form input[type='radio'] + label {\n      grid-column: span 11 / auto;\n      align-self: center;\n      position: relative;\n      left: -25px;\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 12 / auto;\n      display: grid;\n      grid-gap: var(--padding-default) var(--padding-narrow);\n      grid-template-columns: repeat(12, 1fr);\n    }\n    .multi-column-form [options-wrap] input[type='checkbox'] + label,\n    .multi-column-form [options-wrap] input[type='radio'] + label {\n      grid-column: span 5 / auto;\n      align-self: left;\n      left: -4%;\n      margin-right: 0;\n    }\n  }\n  @media (min-width: 481px) and (max-width: 1024px) {\n    .multi-column-form select {\n      max-width: calc(85% + 10px);\n    }\n  }\n  @media screen and (min-width: 1201px) and (max-width: 2000px) {\n    .multi-column-form {\n      grid-template-columns: repeat(36, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 36;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 33 / auto;\n    }\n  }\n  @media screen and (min-width: 2001px) {\n    .multi-column-form {\n      grid-template-columns: repeat(48, 1fr);\n    }\n    .multi-column-form legend {\n      grid-column: span 48;\n    }\n    .multi-column-form input,\n    .multi-column-form table,\n    .multi-column-form select,\n    .multi-column-form textarea,\n    .multi-column-form [custom-input] {\n      max-width: 90%;\n    }\n    .multi-column-form select {\n      max-width: calc(90% + 18px);\n    }\n    .multi-column-form [options-wrap] {\n      grid-column: span 45 / auto;\n    }\n  }\n`\n"]}

package/dist/src/styles/search-form-styles.d.ts

@@ -0,0 +1 @@
+export declare const SearchFormStyles: import("lit").CSSResult;