@operato/property-panel 9.0.0-beta.70 → 9.0.0-beta.73

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/property-panel",
   "description": "Webcomponent property-panel following open-wc recommendations",
   "author": "heartyoh",
-  "version": "9.0.0-beta.70",
+  "version": "9.0.0-beta.73",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -103,5 +103,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "62f53c7de111ff64eb422d7a04bab05d1cc3cb69"
+  "gitHead": "e9e8d672bc2782f3514d99fd79e67e9d57f34d3d"
 }

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

@@ -26,6 +26,7 @@ export class PropertyShapes extends AbstractProperty {
   @property({ type: Array }) selected: Component[] = []
 
   @state() private _3dExpanded: boolean = false
+  @state() private _positionExpanded: boolean = false
 
   firstUpdated() {
     this.renderRoot.addEventListener('change', this.onValueChange.bind(this))
@@ -82,19 +83,15 @@ export class PropertyShapes extends AbstractProperty {
         ? keyed(
             this.selected,
             html`
-              <fieldset class="icon-label unit ratio">
+              <fieldset class="icon-label">
                 <legend>
                   <ox-title-with-help topic="board-modeller/shapes/size" msgid="label.size">size</ox-title-with-help>
                 </legend>
 
                 <div class="property-grid">
-                  <label class="width">
-                    <md-icon>arrow_range</md-icon><ox-i18n msgid="label.width">width</ox-i18n>
-                  </label>
+                  <label> <md-icon>arrow_range</md-icon><ox-i18n msgid="label.width">width</ox-i18n> </label>
                   <input type="number" value-key="bounds.width" .value=${String(width)} />
-                  <label class="height">
-                    <md-icon>height</md-icon><ox-i18n msgid="label.height">height</ox-i18n>
-                  </label>
+                  <label> <md-icon>height</md-icon><ox-i18n msgid="label.height">height</ox-i18n> </label>
                   <input type="number" value-key="bounds.height" .value=${String(height)} />
 
                   ${this.selected.length && this.selected[0].isRootModel()
@@ -110,9 +107,63 @@ export class PropertyShapes extends AbstractProperty {
             `
           )
         : html``}
+      ${!this._isLine(this.selected)
+        ? keyed(
+            this.selected,
+            html`
+              <fieldset class="icon-label" collapsable ?collapsed=${!this._positionExpanded}>
+                <legend
+                  @click=${(e: Event) => {
+                    this._positionExpanded = !this._positionExpanded
+                  }}
+                >
+                  <ox-title-with-help topic="board-modeller/shapes/position" msgid="label.position"
+                    >position</ox-title-with-help
+                  >
+                  <md-icon>${this._positionExpanded ? 'expand_less' : 'expand_more'}</md-icon>
+                </legend>
+
+                <div class="property-grid">
+                  <label>Position</label>
+                  <select value-key="position" .value=${value.position}>
+                    <option value="">&nbsp;</option>
+                    <option value="static">static</option>
+                    <option value="relative">relative</option>
+                    <option value="absolute">absolute</option>
+                    <option value="fixed">fixed</option>
+                    <option value="sticky">sticky</option>
+                  </select>
+
+                  <label>Align</label>
+                  <select value-key="align" .value=${value.align}>
+                    <option value="">&nbsp;</option>
+                    <option value="left-top">left-top</option>
+                    <option value="center-top">center-top</option>
+                    <option value="right-top">right-top</option>
+                    <option value="left-middle">left-middle</option>
+                    <option value="center-middle">center-middle</option>
+                    <option value="right-middle">right-middle</option>
+                    <option value="left-bottom">left-bottom</option>
+                    <option value="center-bottom">center-bottom</option>
+                    <option value="right-bottom">right-bottom</option>
+                  </select>
+
+                  <label> <ox-i18n msgid="label.left">left</ox-i18n> </label>
+                  <input type="number" value-key="bounds.left" .value=${String(value.left ?? '')} />
+                  <label> <ox-i18n msgid="label.top">top</ox-i18n> </label>
+                  <input type="number" value-key="bounds.top" .value=${String(value.top ?? '')} />
+                  <label> <ox-i18n msgid="label.right">right</ox-i18n> </label>
+                  <input type="number" value-key="bounds.right" .value=${String(value.right ?? '')} />
+                  <label> <ox-i18n msgid="label.bottom">bottom</ox-i18n> </label>
+                  <input type="number" value-key="bounds.bottom" .value=${String(value.bottom ?? '')} />
+                </div>
+              </fieldset>
+            `
+          )
+        : html``}
       ${this._is3dish(this.selected)
         ? html`
-            <fieldset class="icon-label unit ratio" collapsable ?collapsed=${!this._3dExpanded}>
+            <fieldset class="icon-label" collapsable ?collapsed=${!this._3dExpanded}>
               <legend
                 @click=${(e: Event) => {
                   this._3dExpanded = !this._3dExpanded

package/translations/en.json

@@ -725,5 +725,9 @@
   "title.update-preferences": "Update Preferences",
   "title.update-user": "Update User",
   "title.update-variable": "Update Variable",
-  "title.warn": "Warning"
+  "title.warn": "Warning",
+  "label.top": "top",
+  "label.bottom": "bottom",
+  "label.left": "left",
+  "label.right": "right"
 }

package/translations/ja.json

@@ -729,5 +729,9 @@
   "title.update-preferences": "設定修正",
   "title.update-user": "ユーザー修正",
   "title.update-variable": "変数修正",
-  "title.warn": "警告"
+  "title.warn": "警告",
+  "label.top": "上",
+  "label.left": "左",
+  "label.right": "右",
+  "label.bottom": "下"
 }

package/translations/ko.json

@@ -729,5 +729,9 @@
   "title.update-preferences": "설정 수정",
   "title.update-user": "사용자 수정",
   "title.update-variable": "변수 수정",
-  "title.warn": "경고"
+  "title.warn": "경고",
+  "label.top": "상단",
+  "label.left": "왼쪽",
+  "label.right": "오른쪽",
+  "label.bottom": "하단"
 }

package/translations/zh.json

@@ -728,5 +728,9 @@
   "title.update-preferences": "保存配置",
   "title.update-user": "更新用户",
   "title.update-variable": "更新变量",
-  "title.warn": "警告"
+  "title.warn": "警告",
+  "label.top": "顶部",
+  "label.bottom": "底部",
+  "label.left": "左侧",
+  "label.right": "右侧"
 }