@operato/property-panel 9.0.0-beta.14

package/src/property-panel/styles/styles.ts

@@ -0,0 +1,287 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+
+import '@operato/help/ox-title-with-help.js'
+import '@operato/popup/ox-popup-list.js'
+import '@operato/input/ox-input-range.js'
+import '@operato/input/ox-input-color.js'
+import '@operato/input/ox-select.js'
+import '@operato/font/ox-font-selector.js'
+import '@operato/i18n/ox-i18n.js'
+import '../../input/ox-input-fill-style.js'
+
+import { css, html, nothing } from 'lit'
+import { property } from 'lit/decorators.js'
+
+import { Component } from '@hatiolab/things-scene'
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'
+import { LineStyles } from '@operato/styles/line-styles.js'
+
+import { AbstractProperty } from '../abstract-property.js'
+
+export class PropertyStyles extends AbstractProperty {
+  static styles = [
+    PropertyGridStyles,
+    LineStyles,
+    css`
+      ox-input-range {
+        width: 100%;
+      }
+
+      .btn-group {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+      }
+
+      .btn-group * {
+        width: 30px;
+        height: 24px;
+        min-width: initial;
+        border-radius: 0;
+        border-bottom: 2px solid #fff;
+      }
+
+      .btn-group [active] {
+        border-bottom: 2px solid #f2471c;
+      }
+    `
+  ]
+
+  @property({ type: Object }) value: any = {}
+  @property({ type: Array }) selected: Component[] = []
+  @property({ type: Array }) fonts: any[] = []
+  @property({ type: Boolean }) isLine: boolean = false
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
+  }
+
+  onButtonGroupClick(e: Event) {
+    const target = e.target as HTMLElement
+
+    if (target.hasAttribute('value-key')) {
+      target.toggleAttribute('active')
+
+      target.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+  }
+
+  render() {
+    var {
+      alpha = 1,
+      fontFamily,
+      fontSize,
+      lineHeight,
+      fontColor,
+      letterSpacing,
+      bold,
+      italic,
+      fillStyle,
+      lineWidth,
+      strokeStyle,
+      lineDash = 'solid',
+      lineCap,
+      lineJoin,
+      begin = 'none',
+      beginSize = 'size1',
+      end = 'none',
+      endSize = 'size1'
+    } = this.value || {}
+
+    return html`
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/opacity" msgid="label.opacity">opacity</ox-title-with-help>
+        </legend>
+        <ox-input-range min="0" max="1" step="0.1" value-key="alpha" .value=${alpha} editable> </ox-input-range>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/text-style" msgid="label.text-style"
+            >text style</ox-title-with-help
+          >
+        </legend>
+
+        <div class="property-grid">
+          <label>
+            <ox-i18n msgid="label.font-family">Font Family</ox-i18n>
+          </label>
+
+          <ox-font-selector class="custom-editor" value-key="fontFamily" .value=${fontFamily}></ox-font-selector>
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_size</md-icon></label>
+          <input type="number" value-key="fontSize" .value=${fontSize} class="property-onethird-input" />
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_line_spacing</md-icon></label>
+          <input type="number" value-key="lineHeight" .value=${lineHeight} class="property-onethird-input" />
+
+          <label class="property-onethird-label icon-only-label"><md-icon>format_letter_spacing</md-icon></label>
+          <input type="number" value-key="letterSpacing" .value=${letterSpacing} class="property-onethird-input" />
+
+          <label class="property-half-label icon-only-label"><md-icon>format_color_text</md-icon></label>
+          <ox-input-color value-key="fontColor" .value=${fontColor} class="property-half-input"> </ox-input-color>
+
+          <label class="property-half-label"><md-icon>format_shapes</md-icon></label>
+          <div class="property-half-input btn-group" @click=${this.onButtonGroupClick}>
+            <md-icon value-key="bold" ?active=${bold}>format_bold</md-icon>
+            <md-icon value-key="italic" ?active=${italic}>format_italic</md-icon>
+          </div>
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help topic="board-modeller/styles/fill-style" msgid="label.fill-style"
+            >fill style</ox-title-with-help
+          >
+        </legend>
+
+        <ox-input-fill-style value-key="fillStyle" .value=${fillStyle}> </ox-input-fill-style>
+      </fieldset>
+
+      <fieldset>
+        <legend>
+          <ox-title-with-help msgid="label.line-style" topic="board-modeller/styles/line-style"></ox-title-with-help>
+        </legend>
+
+        <div class="property-grid">
+          <label class="property-half-label icon-only-label"><md-icon>line_weight</md-icon></label>
+          <input type="number" value-key="lineWidth" .value=${lineWidth} class="property-half-input" />
+
+          <label class="property-half-label icon-only-label"><md-icon>border_color</md-icon></label>
+          <ox-input-color value-key="strokeStyle" .value=${strokeStyle} class="property-half-input"> </ox-input-color>
+
+          <label>
+            <ox-i18n msgid="label.line-type">line type</ox-i18n>
+          </label>
+          <ox-select value-key="lineDash" .value=${lineDash} class="custom-editor">
+            <div class="line-type ${lineDash}" slot="label"></div>
+            <ox-popup-list align-left nowrap>
+              <style>
+                ${LineStyles.cssText}
+              </style>
+              <div class="line-type solid" value="solid" option></div>
+              <div class="line-type round-dot" value="round-dot" option></div>
+              <div class="line-type square-dot" value="square-dot" option></div>
+              <div class="line-type dash" value="dash" option></div>
+              <div class="line-type dash-dot" value="dash-dot" option></div>
+              <div class="line-type long-dash" value="long-dash" option></div>
+              <div class="line-type long-dash-dot" value="long-dash-dot" option></div>
+              <div class="line-type long-dash-dot-dot" value="long-dash-dot-dot" option></div>
+            </ox-popup-list>
+          </ox-select>
+
+          <label>
+            <ox-i18n msgid="label.cap-type">cap type</ox-i18n>
+          </label>
+          <select value-key="lineCap" .value=${lineCap}>
+            <option value="butt"><ox-i18n msgid="label.square">square</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
+          </select>
+
+          <label>
+            <ox-i18n msgid="label.join-type">join type</ox-i18n>
+          </label>
+          <select value-key="lineJoin" .value=${lineJoin}>
+            <option value="miter"><ox-i18n msgid="label.miter">miter</ox-i18n></option>
+            <option value="round"><ox-i18n msgid="label.round">round</ox-i18n></option>
+            <option value="bevel"><ox-i18n msgid="label.bevel">bevel</ox-i18n></option>
+          </select>
+
+          ${this.isLine
+            ? html`
+                <label>
+                  <ox-i18n msgid="label.begin-type">begin type</ox-i18n>
+                </label>
+                <ox-select value-key="begin" .value=${begin} class="custom-editor">
+                  <div class="arrow-type ${begin ? `begin-${begin}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-none" value="none" option></div>
+                    <div class="arrow-type begin-arrow" value="arrow" option></div>
+                    <div class="arrow-type begin-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type begin-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type begin-diamond" value="diamond" option></div>
+                    <div class="arrow-type begin-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.begin-size">begin size</ox-i18n>
+                </label>
+                <ox-select value-key="beginSize" .value=${beginSize} class="custom-editor">
+                  <div class="arrow-type ${beginSize ? `begin-${beginSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type begin-size1" value="size1" option></div>
+                    <div class="arrow-type begin-size2" value="size2" option></div>
+                    <div class="arrow-type begin-size3" value="size3" option></div>
+                    <div class="arrow-type begin-size4" value="size4" option></div>
+                    <div class="arrow-type begin-size5" value="size5" option></div>
+                    <div class="arrow-type begin-size6" value="size6" option></div>
+                    <div class="arrow-type begin-size7" value="size7" option></div>
+                    <div class="arrow-type begin-size8" value="size8" option></div>
+                    <div class="arrow-type begin-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.end-type">end type</ox-i18n>
+                </label>
+                <ox-select value-key="end" .value=${end} class="custom-editor">
+                  <div class="arrow-type ${end ? `end-${end}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-none" value="none" option></div>
+                    <div class="arrow-type end-arrow" value="arrow" option></div>
+                    <div class="arrow-type end-open-arrow" value="open-arrow" option></div>
+                    <div class="arrow-type end-sharp-arrow" value="sharp-arrow" option></div>
+                    <div class="arrow-type end-diamond" value="diamond" option></div>
+                    <div class="arrow-type end-oval" value="oval" option></div>
+                  </ox-popup-list>
+                </ox-select>
+
+                <label>
+                  <ox-i18n msgid="label.end-size">end size</ox-i18n>
+                </label>
+                <ox-select value-key="endSize" .value=${endSize} class="custom-editor">
+                  <div class="arrow-type ${endSize ? `end-${endSize}` : nothing}" slot="label"></div>
+                  <ox-popup-list align-left nowrap>
+                    <style>
+                      ${LineStyles.cssText}
+                    </style>
+                    <div class="arrow-type end-size1" value="size1" option></div>
+                    <div class="arrow-type end-size2" value="size2" option></div>
+                    <div class="arrow-type end-size3" value="size3" option></div>
+                    <div class="arrow-type end-size4" value="size4" option></div>
+                    <div class="arrow-type end-size5" value="size5" option></div>
+                    <div class="arrow-type end-size6" value="size6" option></div>
+                    <div class="arrow-type end-size7" value="size7" option></div>
+                    <div class="arrow-type end-size8" value="size8" option></div>
+                    <div class="arrow-type end-size9" value="size9" option></div>
+                  </ox-popup-list>
+                </ox-select>
+              `
+            : html``}
+        </div>
+      </fieldset>
+    `
+  }
+}

package/src/types.ts

@@ -0,0 +1,63 @@
+import { Model } from '@hatiolab/things-scene'
+
+export interface PalletItem {
+  type: string
+  description: string
+  icon: HTMLImageElement
+  group: string | string[]
+  model: Model
+}
+
+export interface Pallet {
+  name: string
+  templates: PalletItem[]
+}
+
+export type ComponentTemplate = {
+  type: string
+  description: string
+  group:
+    | 'line'
+    | 'shape'
+    | 'textAndMedia'
+    | 'chartAndGauge'
+    | 'table'
+    | 'container'
+    | 'dataSource'
+    | 'IoT'
+    | '3D'
+    | 'warehouse'
+    | 'form'
+    | 'etc'
+    | string
+  icon: any
+  model: Model
+}
+
+export type ComponentGroup = {
+  name: string
+  description: string
+  icon: string
+  templates: ComponentTemplate[]
+}
+
+export type Board = {
+  id?: string
+  name?: string
+  description?: string
+  model?: any
+  groupId?: string
+  thumbnail?: string
+}
+
+export type BoardGroup = {
+  id?: string
+  name?: string
+  description?: string
+}
+
+export type PlayGroup = {
+  id?: string
+  name?: string
+  description?: string
+}

package/stories/index.stories.ts

@@ -0,0 +1,134 @@
+import { html, TemplateResult } from 'lit'
+import '../src/ox-property-panel.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'
+
+export default {
+  title: 'OxPropertyPanel',
+  component: 'ox-property-panel',
+  argTypes: {
+    model: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  model?: any
+}
+
+const Template: Story<ArgTypes> = ({ model }: ArgTypes) => 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="/themes/help-theme.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>
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <ox-property-panel .model=${model}> </ox-property-panel>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  model: {
+    type: 'progress-circle',
+    cy: 100,
+    cx: 100,
+    rx: 100,
+    ry: 100,
+    value: '#{data}',
+    startAngle: 0,
+    endAngle: 360,
+    fontSize: 70,
+    strokeStyle: 'rgb(82, 199, 255)',
+    blankStrokeStyle: 'rgba(0,0,0,.2)',
+    fontFamily: 'digital',
+    fontColor: '#fff',
+    text: '#{data}',
+    alpha: 1,
+    hidden: false,
+    lineWidth: 20,
+    lineDash: 'solid',
+    lineCap: 'butt',
+    rotation: 0,
+    paddingTop: 50,
+    shadow: {
+      left: 4,
+      top: 4,
+      blurSize: 4,
+      color: 'rgba(0,0,0,.3)'
+    },
+    paddingRight: 15,
+    textAlign: 'center',
+    textFormat: '#,##0.0',
+    data: 99,
+    mappings: [],
+    locked: false,
+    fillStyle: 'rgba(76, 187, 250, 0.2)',
+    paddingLeft: 0,
+    textBaseline: null,
+    packmanStyle: true,
+    animFromBase: true,
+    bold: true,
+    refid: 45
+  }
+}
+
+export const Custom = Template.bind({})
+Custom.args = {
+  model: {
+    type: 'rect',
+    left: 95.56740614334475,
+    top: 30.973680756104017,
+    width: 239.5904436860068,
+    height: 47.098976109215045,
+    fillStyle: 'red',
+    strokeStyle: '#000',
+    alpha: 1,
+    hidden: false,
+    lineWidth: 1,
+    lineDash: 'solid',
+    lineCap: 'butt',
+    refid: 8,
+    rotation: 0,
+    id: 'a',
+    mappings: [
+      {
+        rule: 'value',
+        target: '(self)',
+        property: 'text'
+      }
+    ]
+  }
+}

package/stories/input-table-property.stories.ts

@@ -0,0 +1,96 @@
+import { html, TemplateResult } from 'lit'
+import '../src/input/ox-input-table.js'
+import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles.js'
+
+export default {
+  title: 'OxInputTableProperty',
+  component: 'ox-input-table',
+  argTypes: {
+    value: { control: 'object' }
+  }
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {
+  value?: any
+}
+
+const Template: Story<ArgTypes> = ({ value }: ArgTypes) => 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="/themes/help-theme.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>
+    #place {
+      width: 100%;
+      height: 500px;
+      text-align: center;
+
+      background-color: var(--md-sys-color-primary-container);
+      color: var(--md-sys-color-on-primary-container);
+    }
+  </style>
+
+  <ox-input-table .value=${value}> </ox-input-table>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {
+  value: {
+    type: 'table-cell',
+    left: 290.42944785276075,
+    top: 0,
+    width: 96.80981595092024,
+    height: 62.02453987730057,
+    textWrap: true,
+    border: {
+      top: {
+        strokeStyle: '#999',
+        lineDash: 'solid',
+        lineWidth: 1
+      },
+      left: {
+        strokeStyle: '#999',
+        lineDash: 'solid',
+        lineWidth: 1
+      },
+      bottom: {
+        strokeStyle: '#999',
+        lineDash: 'solid',
+        lineWidth: 1
+      },
+      right: {
+        strokeStyle: '#999',
+        lineDash: 'solid',
+        lineWidth: 1
+      }
+    },
+    refid: 12,
+    dataIndex: 0
+  }
+}

package/test/ox-property-panel.test.ts

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