@operato/app 1.0.0-beta.38 → 1.0.0-beta.39

package/package.json

@@ -3,7 +3,7 @@
   "description": "WebApplication production supporting components following open-wc recommendations",
   "license": "MIT",
   "author": "heartyoh",
-  "version": "1.0.0-beta.38",
+  "version": "1.0.0-beta.39",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -59,19 +59,19 @@
     "@material/mwc-button": "^0.25.3",
     "@material/mwc-icon": "^0.25.3",
     "@material/mwc-icon-button": "^0.25.3",
-    "@operato/attachment": "^1.0.0-beta.38",
-    "@operato/data-grist": "^1.0.0-beta.38",
-    "@operato/font": "^1.0.0-beta.38",
-    "@operato/form": "^1.0.0-beta.38",
-    "@operato/graphql": "^1.0.0-beta.38",
-    "@operato/i18n": "^1.0.0-beta.38",
-    "@operato/input": "^1.0.0-beta.38",
-    "@operato/layout": "^1.0.0-beta.38",
-    "@operato/property-editor": "^1.0.0-beta.38",
-    "@operato/shell": "^1.0.0-beta.38",
-    "@operato/styles": "^1.0.0-beta.38",
-    "@operato/utils": "^1.0.0-beta.38",
-    "codemirror": "^5.59.1",
+    "@operato/attachment": "^1.0.0-beta.39",
+    "@operato/data-grist": "^1.0.0-beta.39",
+    "@operato/font": "^1.0.0-beta.39",
+    "@operato/form": "^1.0.0-beta.39",
+    "@operato/graphql": "^1.0.0-beta.39",
+    "@operato/i18n": "^1.0.0-beta.39",
+    "@operato/input": "^1.0.0-beta.39",
+    "@operato/layout": "^1.0.0-beta.39",
+    "@operato/property-editor": "^1.0.0-beta.39",
+    "@operato/shell": "^1.0.0-beta.39",
+    "@operato/styles": "^1.0.0-beta.39",
+    "@operato/utils": "^1.0.0-beta.39",
+    "codemirror": "^5.64.0",
     "codemirror-graphql": "^0.15.2",
     "cronstrue": "^2.2.0",
     "cross-fetch": "^3.1.5",
@@ -111,5 +111,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "e5ca8bb81a52298eaf03c1d8f2829989379422c3"
+  "gitHead": "4862f9f433eefda3a54029686df497a4596e9c30"
 }

package/src/input/ox-input-background-pattern.ts

@@ -3,6 +3,7 @@
  */
 
 import '@operato/i18n/ox-i18n.js'
+import '@operato/input/ox-input-color.js'
 import '@operato/attachment/ox-attachment-selector.js'
 
 import { css, html } from 'lit'
@@ -12,12 +13,14 @@ import { OxFormField } from '@operato/input'
 
 export type BackgroundPatternOption = {
   image?: HTMLImageElement | string
+  color?: string
   align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
   offsetX?: number
   offsetY?: number
   width?: number
   height?: number
   fitPattern?: boolean
+  noRepeat?: boolean
 }
 
 /**
@@ -89,6 +92,23 @@ export class OxInputBackgroundPattern extends OxFormField {
       grid-column: span 2;
       text-align: right;
     }
+
+    .grid-10 > .icon-only-label {
+      grid-column: span 2;
+
+      background: var(--url-icon-properties-label) no-repeat;
+      float: left;
+      margin: 0;
+      align-self: stretch;
+    }
+
+    .icon-only-label.color {
+      background-position: 100% -500px;
+    }
+
+    .grid-10 > ox-input-color {
+      grid-column: span 8;
+    }
   `
 
   @property({ type: Object }) value?: BackgroundPatternOption
@@ -112,13 +132,13 @@ export class OxInputBackgroundPattern extends OxFormField {
 
       <select value-key="align" class="select-content" .value=${value.align}>
         <option value="left-top">Left Top</option>
-        <option value="top">Top</option>
+        <option value="top">Center Top</option>
         <option value="right-top">Right Top</option>
-        <option value="left">Left</option>
-        <option value="center">Center</option>
-        <option value="right">Right</option>
+        <option value="left">Left Center</option>
+        <option value="center">Center Center</option>
+        <option value="right">Right Center</option>
         <option value="left-bottom">Left Bottom</option>
-        <option value="bottom">Bottom</option>
+        <option value="bottom">Center Bottom</option>
         <option value="right-bottom">Right Bottom</option>
       </select>
 
@@ -136,9 +156,19 @@ export class OxInputBackgroundPattern extends OxFormField {
         <input type="number" value-key="height" .value=${value.height} />
       </div>
 
+      <div class="grid-10">
+        <label class="icon-only-label color"></label>
+        <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
+      </div>
+
       <div class="grid-10">
         <input value-key="fitPattern" type="checkbox" .checked=${value.fitPattern} required />
-        <label> <ox-i18n msgid="label.fit" auto="">Fit</ox-i18n> </label>
+        <label> <ox-i18n msgid="label.fit" auto="">fit</ox-i18n> </label>
+      </div>
+
+      <div class="grid-10">
+        <input value-key="noRepeat" type="checkbox" .checked=${value.noRepeat} required />
+        <label> <ox-i18n msgid="label.no-repeat" auto="">no repeat</ox-i18n> </label>
       </div>
     `
   }
@@ -152,7 +182,7 @@ export class OxInputBackgroundPattern extends OxFormField {
     var key = element.getAttribute('value-key')
     var value: any = element.value
 
-    if (key == 'fitPattern') {
+    if (key === 'fitPattern' || key === 'noRepeat') {
       value = element.checked
     }
 

package/src/input/ox-input-fill-style.ts

@@ -8,10 +8,12 @@ import '@operato/input/ox-input-color-stops.js'
 import '@operato/input/ox-input-color-gradient.js'
 import './ox-input-background-pattern.js'
 
-import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
+import { css, html, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
 import { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'
-import { PropertyValues, css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
+
+import { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'
 
 export type FillStyle =
   | {
@@ -27,6 +29,8 @@ export type FillStyle =
       height?: number
       align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'
       fitPattern?: boolean
+      noRepeat?: boolean
+      color?: string
     }
   | 'no'
   | string
@@ -66,13 +70,13 @@ export class OxInputColorStyle extends OxFormField {
     .grid-10 > .icon-only-label {
       grid-column: span 1;
 
-      background: url(/assets/images/icon-properties-label.png) no-repeat;
+      background: var(--url-icon-properties-label) no-repeat;
       float: left;
       margin: 0;
     }
 
     .icon-only-label.color {
-      background-position: 70% -498px;
+      background-position: 100% -500px;
     }
 
     [editors] > :not([active]) {
@@ -206,7 +210,9 @@ export class OxInputColorStyle extends OxFormField {
             width: Number(value.width),
             height: Number(value.height),
             align: value.align,
-            fitPattern: value.fitPattern
+            fitPattern: value.fitPattern,
+            noRepeat: value.noRepeat,
+            color: value.color
           }
 
           if (!this._block_reset) {
@@ -275,7 +281,9 @@ export class OxInputColorStyle extends OxFormField {
           width: Number(this.pattern.width),
           height: Number(this.pattern.height),
           align: this.pattern.align,
-          fitPattern: this.pattern.fitPattern
+          fitPattern: this.pattern.fitPattern,
+          noRepeat: this.pattern.noRepeat,
+          color: this.pattern.color
         }
         break
 
@@ -350,7 +358,9 @@ export class OxInputColorStyle extends OxFormField {
       width: Number(this.pattern?.width),
       height: Number(this.pattern?.height),
       align: this.pattern?.align,
-      fitPattern: this.pattern?.fitPattern
+      fitPattern: this.pattern?.fitPattern,
+      noRepeat: this.pattern?.noRepeat,
+      color: this.pattern?.color
     }
 
     this._block_reset = true