@operato/attribute 10.29.36 → 10.29.37

package/dist/src/ox-attribute-form.js

@@ -57,6 +57,7 @@ let OxAttributeForm = class OxAttributeForm extends LitElement {
             multiple="true"
             hide-filelist
           ></ox-input-file>`;
+                    break;
                 case 'secret':
                     var element = html `<div secret-container>
             <input type="password" name=${tag} value=${value} placeholder="보안 정보 입력" autocomplete="off" />

package/dist/src/ox-attribute-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-attribute-form.js","sourceRoot":"","sources":["../../src/ox-attribute-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-form')\nexport class OxAttributeForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--spacing-medium);\n    }\n\n    label:nth-child(odd) {\n      background-color: var(--md-sys-color-background);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-align: right;\n    }\n\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n\n    div[description] * {\n      vertical-align: middle;\n    }\n\n    div[description] md-icon {\n      font-size: 0.9rem;\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    div[elements] * {\n      flex: 1;\n    }\n\n    div[elements] input,\n    div[elements] select {\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    }\n\n    div[secret-container] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n    }\n\n    div[secret-container] input {\n      flex: 1;\n    }\n\n    div[secret-container] md-icon {\n      flex: unset;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n      transition: color 0.2s ease;\n      --md-icon-size: 16px;\n    }\n\n    div[secret-container] md-icon:hover {\n      color: var(--md-sys-color-primary);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html` <form @change=${(e: Event) => this.onChange(e)}>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildInputs()}\n    </form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag}>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} />`\n          break\n\n        case 'date':\n          var element = html` <input\n            type=\"date\"\n            name=${tag}\n            value=${value}\n            @click=${(e: Event) => (e.currentTarget as HTMLInputElement).showPicker()}\n          />`\n          break\n\n        case 'datetime':\n          var element = html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n          ></ox-input-file>`\n\n        case 'secret':\n          var element = html`<div secret-container>\n            <input type=\"password\" name=${tag} value=${value} placeholder=\"보안 정보 입력\" autocomplete=\"off\" />\n            <md-icon @click=${() => this.togglePasswordVisibility(tag)} title=\"보기/숨기기\"> visibility_off </md-icon>\n          </div>`\n          break\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description>\n          <md-icon>info</md-icon> ${description} ${type === 'secret' ? html`<md-icon>lock</md-icon>` : ''}\n        </div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const items = this.attributeSet!.items\n\n    return (items || []).reduce(\n      (sum, item) => {\n        const { tag, type } = item\n\n        const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n        sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n        return sum\n      },\n      {} as { [tag: string]: any }\n    )\n  }\n\n  private togglePasswordVisibility(tag: string) {\n    const input = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n    if (!input) return\n\n    const container = input.parentElement\n    if (!container) return\n\n    const icon = container.querySelector('md-icon') as HTMLElement\n    if (!icon) return\n\n    if (input.type === 'password') {\n      input.type = 'text'\n      icon.textContent = 'visibility'\n      icon.title = '숨기기'\n    } else {\n      input.type = 'password'\n      icon.textContent = 'visibility_off'\n      icon.title = '보기'\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-attribute-form.js","sourceRoot":"","sources":["../../src/ox-attribute-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-form')\nexport class OxAttributeForm extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: row;\n      --item-description-font: normal 0.8rem/1rem var(--theme-font);\n      --item-description-color: var(--page-description-color);\n    }\n\n    h2 {\n      margin: var(--title-margin);\n      font: var(--title-font);\n      color: var(--title-text-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    h3 {\n      margin: var(--page-description-margin);\n      font: var(--page-description-font);\n      color: var(--page-description-color);\n      text-transform: capitalize;\n      text-align: center;\n    }\n\n    form {\n      flex: 1;\n\n      display: flex;\n      flex-direction: column;\n    }\n\n    label {\n      display: grid;\n\n      grid-template-rows: auto 1fr;\n      grid-template-columns: 1fr 5fr;\n      grid-template-areas: 'name description' 'empty inputs';\n\n      grid-gap: 9px;\n      align-items: center;\n      margin-bottom: var(--spacing-medium);\n    }\n\n    label:nth-child(odd) {\n      background-color: var(--md-sys-color-background);\n      padding: var(--padding-default) 0;\n    }\n\n    div[name] {\n      grid-area: name;\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-align: right;\n    }\n\n    div[description] {\n      grid-area: description;\n      opacity: 0.7;\n      font: var(--item-description-font);\n      color: var(--item-description-color);\n      text-align: left;\n    }\n\n    div[description] * {\n      vertical-align: middle;\n    }\n\n    div[description] md-icon {\n      font-size: 0.9rem;\n    }\n\n    div[elements] {\n      grid-area: inputs;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n      gap: 10px;\n      padding-right: var(--padding-default);\n    }\n\n    div[elements] * {\n      flex: 1;\n    }\n\n    div[elements] input,\n    div[elements] select {\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    }\n\n    div[secret-container] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex: 1;\n    }\n\n    div[secret-container] input {\n      flex: 1;\n    }\n\n    div[secret-container] md-icon {\n      flex: unset;\n      cursor: pointer;\n      color: var(--md-sys-color-on-surface-variant);\n      transition: color 0.2s ease;\n      --md-icon-size: 16px;\n    }\n\n    div[secret-container] md-icon:hover {\n      color: var(--md-sys-color-primary);\n    }\n\n    @media only screen and (max-width: 460px) {\n      label {\n        display: grid;\n\n        grid-template-rows: auto auto 1fr;\n        grid-template-columns: 1fr;\n        grid-template-areas: 'name' 'description' 'inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      div[name] {\n        text-align: left;\n      }\n    }\n  `\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html` <form @change=${(e: Event) => this.onChange(e)}>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildInputs()}\n    </form>`\n  }\n\n  private onChange(e: Event) {\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  private buildInputs() {\n    const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag}>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} />`\n          break\n\n        case 'date':\n          var element = html` <input\n            type=\"date\"\n            name=${tag}\n            value=${value}\n            @click=${(e: Event) => (e.currentTarget as HTMLInputElement).showPicker()}\n          />`\n          break\n\n        case 'datetime':\n          var element = html` <input type=\"datetime-local\" name=${tag} value=${value} />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n          ></ox-input-file>`\n          break\n\n        case 'secret':\n          var element = html`<div secret-container>\n            <input type=\"password\" name=${tag} value=${value} placeholder=\"보안 정보 입력\" autocomplete=\"off\" />\n            <md-icon @click=${() => this.togglePasswordVisibility(tag)} title=\"보기/숨기기\"> visibility_off </md-icon>\n          </div>`\n          break\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description>\n          <md-icon>info</md-icon> ${description} ${type === 'secret' ? html`<md-icon>lock</md-icon>` : ''}\n        </div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n\n  private buildValue() {\n    const items = this.attributeSet!.items\n\n    return (items || []).reduce(\n      (sum, item) => {\n        const { tag, type } = item\n\n        const editor = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n\n        sum[tag] = type === 'boolean' ? editor.checked : editor.value\n\n        return sum\n      },\n      {} as { [tag: string]: any }\n    )\n  }\n\n  private togglePasswordVisibility(tag: string) {\n    const input = this.renderRoot.querySelector(`[name=${tag}]`) as HTMLInputElement\n    if (!input) return\n\n    const container = input.parentElement\n    if (!container) return\n\n    const icon = container.querySelector('md-icon') as HTMLElement\n    if (!icon) return\n\n    if (input.type === 'password') {\n      input.type = 'text'\n      icon.textContent = 'visibility'\n      icon.title = '숨기기'\n    } else {\n      input.type = 'password'\n      icon.textContent = 'visibility_off'\n      icon.title = '보기'\n    }\n  }\n}\n"]}

package/dist/src/ox-attribute-view.js

@@ -40,6 +40,7 @@ let OxAttributeView = class OxAttributeView extends LitElement {
             hide-filelist
             disabled
           ></ox-input-file>`;
+                    break;
                 case 'secret':
                     var element = html `<span>********</span>`;
                     break;

package/dist/src/ox-attribute-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-attribute-view.js","sourceRoot":"","sources":["../../src/ox-attribute-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n\n        --item-description-font: normal 0.8rem/1rem var(--theme-font);\n        --item-description-color: var(--page-description-color);\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n        text-transform: capitalize;\n        text-align: center;\n      }\n\n      h3 {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n        text-transform: capitalize;\n        text-align: center;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow-y: auto;\n        padding: var(--padding-default);\n      }\n\n      label {\n        display: grid;\n\n        grid-template-rows: auto 1fr;\n        grid-template-columns: 1fr 5fr;\n        grid-template-areas: 'name description' 'empty inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      label:nth-child(odd) {\n        background-color: var(--md-sys-color-background);\n        padding: var(--padding-default) 0;\n      }\n\n      div[name] {\n        grid-area: name;\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-align: right;\n      }\n\n      div[description] {\n        grid-area: description;\n        opacity: 0.7;\n        font: var(--item-description-font);\n        color: var(--item-description-color);\n        text-align: left;\n      }\n\n      div[description] * {\n        vertical-align: middle;\n      }\n\n      div[description] md-icon {\n        font-size: 0.9rem;\n      }\n\n      div[elements] {\n        grid-area: inputs;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 10px;\n        padding-right: var(--padding-default);\n      }\n\n      div[elements] * {\n        flex: 1;\n      }\n\n      div[elements] input,\n      div[elements] select {\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      }\n\n      @media only screen and (max-width: 460px) {\n        label {\n          display: grid;\n\n          grid-template-rows: auto auto 1fr;\n          grid-template-columns: 1fr;\n          grid-template-areas: 'name' 'description' 'inputs';\n\n          grid-gap: 9px;\n          align-items: center;\n          margin-bottom: var(--spacing-medium);\n        }\n\n        div[name] {\n          text-align: left;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildEntryViews()}\n    </form> `\n  }\n\n  private buildEntryViews() {\n    const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag} disabled>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} disabled />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} disabled />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            disabled\n          ></ox-input-file>`\n\n        case 'secret':\n          var element = html`<span>********</span>`\n          break\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} disabled />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description>\n          <md-icon>info</md-icon> ${description} ${type === 'secret' ? html`<md-icon>lock</md-icon>` : ''}\n        </div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-attribute-view.js","sourceRoot":"","sources":["../../src/ox-attribute-view.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/input/ox-input-file.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { AttributeSet } from './types.js'\n\n@customElement('ox-attribute-view')\nexport class OxAttributeView extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: row;\n\n        --item-description-font: normal 0.8rem/1rem var(--theme-font);\n        --item-description-color: var(--page-description-color);\n      }\n\n      h2 {\n        margin: var(--title-margin);\n        font: var(--title-font);\n        color: var(--title-text-color);\n        text-transform: capitalize;\n        text-align: center;\n      }\n\n      h3 {\n        margin: var(--page-description-margin);\n        font: var(--page-description-font);\n        color: var(--page-description-color);\n        text-transform: capitalize;\n        text-align: center;\n      }\n\n      form {\n        flex: 1;\n\n        display: flex;\n        flex-direction: column;\n\n        overflow-y: auto;\n        padding: var(--padding-default);\n      }\n\n      label {\n        display: grid;\n\n        grid-template-rows: auto 1fr;\n        grid-template-columns: 1fr 5fr;\n        grid-template-areas: 'name description' 'empty inputs';\n\n        grid-gap: 9px;\n        align-items: center;\n        margin-bottom: var(--spacing-medium);\n      }\n\n      label:nth-child(odd) {\n        background-color: var(--md-sys-color-background);\n        padding: var(--padding-default) 0;\n      }\n\n      div[name] {\n        grid-area: name;\n        font: var(--label-font);\n        color: var(--label-color, var(--md-sys-color-on-surface));\n        text-align: right;\n      }\n\n      div[description] {\n        grid-area: description;\n        opacity: 0.7;\n        font: var(--item-description-font);\n        color: var(--item-description-color);\n        text-align: left;\n      }\n\n      div[description] * {\n        vertical-align: middle;\n      }\n\n      div[description] md-icon {\n        font-size: 0.9rem;\n      }\n\n      div[elements] {\n        grid-area: inputs;\n        display: flex;\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 10px;\n        padding-right: var(--padding-default);\n      }\n\n      div[elements] * {\n        flex: 1;\n      }\n\n      div[elements] input,\n      div[elements] select {\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      }\n\n      @media only screen and (max-width: 460px) {\n        label {\n          display: grid;\n\n          grid-template-rows: auto auto 1fr;\n          grid-template-columns: 1fr;\n          grid-template-areas: 'name' 'description' 'inputs';\n\n          grid-gap: 9px;\n          align-items: center;\n          margin-bottom: var(--spacing-medium);\n        }\n\n        div[name] {\n          text-align: left;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) attributeSet?: AttributeSet\n  @property({ type: Object }) value?: { [tag: string]: any }\n\n  render() {\n    return html`<form>\n      <h2>${this.attributeSet?.entity || ''}</h2>\n      <h3>${this.attributeSet?.description || ''}</h3>\n      ${this.buildEntryViews()}\n    </form> `\n  }\n\n  private buildEntryViews() {\n    const items = (this.attributeSet?.items || []).filter(item => item.active)\n\n    return (items || []).map(item => {\n      const { name, description, tag, type, options = {} } = item\n\n      const value = this.value && this.value[tag]\n\n      switch (type) {\n        case 'select':\n          var element = html` <select .name=${tag} disabled>\n            <option value=\"\"></option>\n            ${(options.options || []).map(\n              option => html`<option value=${option.value} ?selected=${option.value === value}>${option.text}</option>`\n            )}\n          </select>`\n          break\n\n        case 'boolean':\n          var element = html` <input type=\"checkbox\" name=${tag} .checked=${value} disabled />`\n          break\n\n        case 'number':\n          var element = html` <input type=\"number\" name=${tag} value=${value} disabled />`\n          break\n\n        case 'file':\n          var element = html`<ox-input-file\n            name=${tag}\n            label=\"Attach Files\"\n            accept=\"*/*\"\n            multiple=\"true\"\n            hide-filelist\n            disabled\n          ></ox-input-file>`\n          break\n\n        case 'secret':\n          var element = html`<span>********</span>`\n          break\n\n        case 'string':\n        default:\n          var element = html` <input type=\"text\" name=${tag} value=${value} disabled />`\n      }\n\n      return html` <label .title=${description}>\n        <div name>${name}</div>\n        <div description>\n          <md-icon>info</md-icon> ${description} ${type === 'secret' ? html`<md-icon>lock</md-icon>` : ''}\n        </div>\n        <div elements>${element}</div>\n      </label>`\n    })\n  }\n}\n"]}

package/dist/test/attribute-file.test.d.ts

@@ -0,0 +1,2 @@
+import '../src/ox-attribute-form.js';
+import '../src/ox-attribute-view.js';

package/dist/test/attribute-file.test.js

@@ -0,0 +1,30 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/ox-attribute-form.js';
+import '../src/ox-attribute-view.js';
+/**
+ * A file attribute.
+ *
+ * ## Why this is tested
+ *
+ * The `file` case fell through to `secret` in both the form and the view: a file attribute drew a
+ * password box (form) or "********" (view), and no file could be attached. What must hold: a file
+ * attribute is drawn with the file picker, and only with it.
+ */
+describe('file attribute', () => {
+    const attributeSet = {
+        entity: 'paper',
+        description: '',
+        items: [{ name: 'scan', description: '', tag: 'scan', type: 'file', active: true, options: {} }]
+    };
+    for (const tag of ['ox-attribute-form', 'ox-attribute-view']) {
+        it(`${tag} draws the file picker`, async () => {
+            const el = await fixture(tag === 'ox-attribute-form'
+                ? html `<ox-attribute-form .attributeSet=${attributeSet}></ox-attribute-form>`
+                : html `<ox-attribute-view .attributeSet=${attributeSet}></ox-attribute-view>`);
+            expect(el.renderRoot.querySelector('ox-input-file[name="scan"]'), 'no file picker').to.exist;
+            expect(el.renderRoot.querySelector('input[type="password"], [secret-container]'), 'a password box instead').to.not.exist;
+        });
+    }
+});
+//# sourceMappingURL=attribute-file.test.js.map

package/dist/test/attribute-file.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-file.test.js","sourceRoot":"","sources":["../../test/attribute-file.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,6BAA6B,CAAA;AACpC,OAAO,6BAA6B,CAAA;AAEpC;;;;;;;;GAQG;AACH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,MAAM,YAAY,GAAG;QACnB,MAAM,EAAE,OAAO;QACf,WAAW,EAAE,EAAE;QACf,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;KACjG,CAAA;IAED,KAAK,MAAM,GAAG,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,CAAC,EAAE,CAAC;QAC7D,EAAE,CAAC,GAAG,GAAG,wBAAwB,EAAE,KAAK,IAAI,EAAE;YAC5C,MAAM,EAAE,GAAQ,MAAM,OAAO,CAC3B,GAAG,KAAK,mBAAmB;gBACzB,CAAC,CAAC,IAAI,CAAA,oCAAoC,YAAY,uBAAuB;gBAC7E,CAAC,CAAC,IAAI,CAAA,oCAAoC,YAAY,uBAAuB,CAChF,CAAA;YAED,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,4BAA4B,CAAC,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAA;YAC5F,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,4CAA4C,CAAC,EAAE,wBAAwB,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAA;QAC1H,CAAC,CAAC,CAAA;IACJ,CAAC;AACH,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/ox-attribute-form.js'\nimport '../src/ox-attribute-view.js'\n\n/**\n * A file attribute.\n *\n * ## Why this is tested\n *\n * The `file` case fell through to `secret` in both the form and the view: a file attribute drew a\n * password box (form) or \"********\" (view), and no file could be attached. What must hold: a file\n * attribute is drawn with the file picker, and only with it.\n */\ndescribe('file attribute', () => {\n  const attributeSet = {\n    entity: 'paper',\n    description: '',\n    items: [{ name: 'scan', description: '', tag: 'scan', type: 'file', active: true, options: {} }]\n  }\n\n  for (const tag of ['ox-attribute-form', 'ox-attribute-view']) {\n    it(`${tag} draws the file picker`, async () => {\n      const el: any = await fixture(\n        tag === 'ox-attribute-form'\n          ? html`<ox-attribute-form .attributeSet=${attributeSet}></ox-attribute-form>`\n          : html`<ox-attribute-view .attributeSet=${attributeSet}></ox-attribute-view>`\n      )\n\n      expect(el.renderRoot.querySelector('ox-input-file[name=\"scan\"]'), 'no file picker').to.exist\n      expect(el.renderRoot.querySelector('input[type=\"password\"], [secret-container]'), 'a password box instead').to.not.exist\n    })\n  }\n})\n"]}