@operato/property-editor 0.2.5 → 0.2.34

package/dist/src/ox-input-stack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-stack')\nexport default class OxStack extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            ?active=${length - index - 1 == this.activeIndex}\n            @click=${(e: Event) => this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n  }\n\n  _onClickToActive(e: Event) {\n    const div = e.target as HTMLElement\n    if (div.tagName != 'DIV') {\n      return\n    }\n\n    this.activeIndex = Number(div.getAttribute('idx'))\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const div = (e.target as HTMLElement).parentElement\n\n    if (div?.tagName != 'DIV') {\n      return\n    }\n\n    const idx = Number(div.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    if (this.activeIndex == idx) {\n      this.activeIndex = 0\n    } else if (this.activeIndex >= idx) {\n      this.activeIndex--\n    } else if (this.activeIndex >= this.stack.length) {\n      this.activeIndex = 0\n    }\n\n    this.requestUpdate()\n  }\n}\n"]}

package/dist/test/property-angle.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/test/property-angle.test.js

@@ -1,23 +0,0 @@
-import { html } from 'lit';
-import { expect, fixture } from '@open-wc/testing';
-describe('OxInputAngle', () => {
-    it('has a default title "Hey there" and angle 5', async () => {
-        const el = await fixture(html `<ox-input-angle></ox-input-angle>`);
-        expect(el.title).to.equal('Hey there');
-        expect(el.radian).to.equal(5);
-    });
-    it('increases the angle on button click', async () => {
-        const el = await fixture(html `<ox-input-angle></ox-input-angle>`);
-        el.shadowRoot.querySelector('button').click();
-        expect(el.radian).to.equal(6);
-    });
-    it('can override the title via attribute', async () => {
-        const el = await fixture(html `<ox-input-angle title="attribute title"></ox-input-angle>`);
-        expect(el.title).to.equal('attribute title');
-    });
-    it('passes the a11y audit', async () => {
-        const el = await fixture(html `<ox-input-angle></ox-input-angle>`);
-        await expect(el).shadowDom.to.be.accessible();
-    });
-});
-//# sourceMappingURL=property-angle.test.js.map

package/dist/test/property-angle.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"property-angle.test.js","sourceRoot":"","sources":["../../test/property-angle.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAIlD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAC/E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,2DAA2D,CAAC,CAAA;QAEvG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OxInputAngle } from '../src/ox-input-angle'\n\ndescribe('OxInputAngle', () => {\n  it('has a default title \"Hey there\" and angle 5', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    expect(el.title).to.equal('Hey there')\n    expect(el.radian).to.equal(5)\n  })\n\n  it('increases the angle on button click', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    expect(el.radian).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle title=\"attribute title\"></ox-input-angle>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}

package/src/ox-buttons-radio.ts

@@ -1,87 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </ox-buttons-radio>
-*/
-@customElement('ox-buttons-radio')
-export class PropertyButtonsRadio extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-      }
-    `
-  ]
-
-  /**
-   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-   */
-  @property({ type: Object }) value: Object | null = null
-  @property({ type: Boolean }) mandatory!: boolean
-
-  render() {
-    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `
-  }
-
-  updated(changes: PropertyValues<this>) {
-    changes.has('value') && this._onValueChanged(this.value)
-  }
-
-  get buttons() {
-    return Array.from(this.querySelectorAll('*'))
-  }
-
-  _onValueChanged(value: Object | null) {
-    this.buttons.forEach(button => {
-      if (value === button.getAttribute('data-value')) {
-        button.setAttribute('active', '')
-      } else {
-        button.removeAttribute('active')
-      }
-    })
-  }
-
-  _onTapButton(e: Event) {
-    var target = e.target as HTMLElement
-
-    while (!target.hasAttribute('data-value') && target !== this) {
-      target = target.parentElement!
-    }
-
-    if (target === this) {
-      return
-    }
-
-    var old = this.value
-
-    if (!this.mandatory) {
-      if (!target.getAttribute('active')) {
-        this.value = target.getAttribute('data-value')
-        target.setAttribute('active', '')
-      } else {
-        this.value = null
-        target.removeAttribute('active')
-      }
-    } else {
-      this.value = target.getAttribute('data-value')
-      target.setAttribute('active', '')
-    }
-
-    if (old !== this.value) {
-      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-    }
-  }
-}

package/src/ox-checkbox.ts

@@ -1,141 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-/*
-  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
-*/
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-
-@customElement('ox-checkbox')
-export class OxCheckbox extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      div {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      [disabled] {
-        opacity: var(--ox-checkbox-disabled-opacity, 0.5);
-        cursor: auto;
-      }
-
-      [checkbox] {
-        display: flex;
-        border-radius: var(--ox-checkbox-border-radius, 4px);
-        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
-        background-color: var(--ox-checkbox-background-color, #fff);
-        width: var(--ox-checkbox-size, 18px);
-        height: var(--ox-checkbox-size, 18px);
-        align-items: center;
-        justify-content: center;
-      }
-
-      a {
-        background-color: var(--ox-checkbox-unchecked-background-color, #fff);
-        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
-      }
-
-      a[checked] {
-        background-color: var(--ox-checkbox-checked-background-color, #fff);
-        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
-      }
-
-      path {
-        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
-      }
-
-      [checked] path {
-        fill: var(--ox-checkbox-checked-color, #38a25b);
-      }
-
-      svg {
-        width: var(--ox-checkbox-size, 18px);
-        height: var(--ox-checkbox-size, 18px);
-      }
-
-      [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
-        color: var(--ox-checkbox-label-color, #3a5877);
-      }
-
-      [checked] + [label] {
-        font-weight: var(--ox-checkbox-checked-font-weight, bold);
-      }
-    `
-  ]
-
-  @property({ type: Boolean }) checked: boolean = false
-  @property({ type: Boolean }) disabled: boolean = false
-  @property({ type: String }) name: string = ''
-
-  @state() _hasInner: boolean = !!this.innerHTML.trim().length
-
-  render() {
-    return html`
-      <div @click=${this.onClick} ?disabled=${this.disabled}>
-        <a
-          href="#"
-          @click=${(e: Event) => e.preventDefault()}
-          @keydown=${this.onKeyDown}
-          ?checked=${this.checked}
-          checkbox
-        >
-          ${this.checked ? this.checkedIcon : this.uncheckedIcon}
-        </a>
-        ${this._hasInner
-          ? html` <span label>
-              <slot></slot>
-            </span>`
-          : ''}
-      </div>
-    `
-  }
-
-  onClick() {
-    if (this.disabled) {
-      return
-    }
-
-    this.checked = !this.checked
-
-    this.dispatchEvent(
-      new CustomEvent('change', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          checked: this.checked,
-          name: this.name
-        }
-      })
-    )
-  }
-
-  get checkedIcon() {
-    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`
-  }
-
-  get uncheckedIcon() {
-    return html`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`
-  }
-
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault()
-
-    if (e.keyCode == 32 || e.code == 'Space') {
-      this.onClick()
-    }
-  }
-}

package/src/ox-input-3dish.ts

@@ -1,150 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { OxInputAngle } from './ox-input-angle'
-
-@customElement('ox-input-3dish')
-export class OxInput3Dish extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
-      }
-
-      label {
-        text-align: right;
-      }
-
-      span {
-        text-align: center;
-      }
-    `
-  ]
-
-  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }
-  /*
-   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.
-   */
-  @property({ type: Object }) translatex?: { x: number; y: number; z: number }
-  @property({ type: Object }) rotate?: { x: number; y: number; z: number }
-  @property({ type: Object }) scale?: { x: number; y: number; z: number }
-
-  firstUpdated() {
-    this.renderRoot.addEventListener('change', this._onChange.bind(this))
-  }
-
-  _onChange(e: Event) {
-    var element = e.target as HTMLElement
-    var id = element.id
-    var prop = id.substr(1)
-    var value = Number((element as HTMLInputElement).value)
-
-    switch (element.tagName) {
-      case 'PROPERTY-ANGLE':
-        value = Number((element as OxInputAngle).radian || 0)
-        break
-    }
-
-    switch (id) {
-      case 'tx':
-      case 'ty':
-      case 'tz':
-        this.dispatchEvent(
-          new CustomEvent('translate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.translatex,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      case 'rx':
-      case 'ry':
-      case 'rz':
-        this.dispatchEvent(
-          new CustomEvent('rotate-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.rotate,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      case 'sx':
-      case 'sy':
-      case 'sz':
-        this.dispatchEvent(
-          new CustomEvent('scale-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.scale,
-                [prop]: value
-              }
-            }
-          })
-        )
-        break
-
-      default:
-        // dimension
-        this.dispatchEvent(
-          new CustomEvent('dimension-changed', {
-            bubbles: true,
-            composed: true,
-            detail: {
-              value: {
-                ...this.dimension,
-                [prop]: value
-              }
-            }
-          })
-        )
-    }
-  }
-
-  render() {
-    return html`
-      <span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.z-axes">z-axes</i18n-msg></span>
-
-      <label><i18n-msg msgid="label.dimension">dimension</i18n-msg></label>
-      <input type="number" id="dwidth" .value=${this.dimension?.width} />
-      <input type="number" id="dheight" .value=${this.dimension?.height} />
-      <input type="number" id="ddepth" .value=${this.dimension?.depth} />
-
-      <label><i18n-msg msgid="label.translate">translate</i18n-msg></label>
-      <input type="number" id="tx" .value=${this.translatex?.x} />
-      <input type="number" id="ty" .value=${this.translatex?.y} />
-      <input type="number" id="tz" .value=${this.translatex?.z} />
-
-      <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <ox-input-angle id="rx" .radian=${this.rotate?.x}></ox-input-angle>
-      <ox-input-angle id="ry" .radian=${this.rotate?.y}></ox-input-angle>
-      <ox-input-angle id="rz" .radian=${this.rotate?.z}></ox-input-angle>
-    `
-  }
-}

package/src/ox-input-angle.ts

@@ -1,56 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-
-@customElement('ox-input-angle')
-export class OxInputAngle extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-  ]
-
-  @property({ type: Number }) radian?: string | number
-  @query('input') input!: HTMLInputElement
-
-  render() {
-    return html`
-      <input
-        type="number"
-        .value=${this._toDegree(this.radian)}
-        @change=${(e: Event) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
-      />
-    `
-  }
-
-  get placeholder() {
-    return this.getAttribute('placeholder') || '0°'
-  }
-
-  _onChangeValue(e: Event) {
-    this.radian = this._toRadian(this.input.value)
-
-    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
-  }
-
-  _toDegree(radian: string | number | undefined) {
-    return Math.round(((Number(radian) || 0) * 180) / Math.PI)
-  }
-
-  _toRadian(degree: string | number | undefined) {
-    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)
-  }
-}

package/src/ox-input-stack.ts

@@ -1,109 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-@customElement('ox-stack')
-export default class OxStack extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-  ]
-
-  /**
-   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-   */
-  @property({ type: Array }) stack: { name: string }[] = []
-
-  /**
-   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-   */
-  @property({ type: Number }) activeIndex: number = 0
-
-  render() {
-    const stack = [...this.stack].reverse()
-    const length = stack.length
-
-    return html`
-      <button id="add-floor" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>
-
-      ${stack.map(
-        (item, index) => html`
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e: Event) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>
-          </div>
-        `
-      )}
-    `
-  }
-
-  _onClickAddFloor(e: Event) {
-    this.stack.push({ name: String(this.stack.length + 1) })
-    this.requestUpdate()
-  }
-
-  _onClickToActive(e: Event) {
-    const div = e.target as HTMLElement
-    if (div.tagName != 'DIV') {
-      return
-    }
-
-    this.activeIndex = Number(div.getAttribute('idx'))
-  }
-
-  _onClickRemoveFloor(e: Event) {
-    const div = (e.target as HTMLElement).parentElement
-
-    if (div?.tagName != 'DIV') {
-      return
-    }
-
-    const idx = Number(div.getAttribute('idx'))
-
-    this.stack.splice(idx, 1)
-
-    if (this.activeIndex == idx) {
-      this.activeIndex = 0
-    } else if (this.activeIndex >= idx) {
-      this.activeIndex--
-    } else if (this.activeIndex >= this.stack.length) {
-      this.activeIndex = 0
-    }
-
-    this.requestUpdate()
-  }
-}

package/test/property-angle.test.ts

@@ -1,33 +0,0 @@
-import { html } from 'lit'
-
-import { expect, fixture } from '@open-wc/testing'
-
-import { OxInputAngle } from '../src/ox-input-angle'
-
-describe('OxInputAngle', () => {
-  it('has a default title "Hey there" and angle 5', async () => {
-    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
-
-    expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
-  })
-
-  it('increases the angle on button click', async () => {
-    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
-    el.shadowRoot!.querySelector('button')!.click()
-
-    expect(el.radian).to.equal(6)
-  })
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture<OxInputAngle>(html`<ox-input-angle title="attribute title"></ox-input-angle>`)
-
-    expect(el.title).to.equal('attribute title')
-  })
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-})