@verdocs/web-sdk 1.16.5 → 2.0.0

package/dist/components/verdocs-status-indicator2.js

@@ -96,10 +96,10 @@ function proportionalSize(element, width, height, box) {
     height: height
   };
 }
-/**
- * This function adds support for string origins.
- * It searches for an origin in o.origin o.ox and o.originX.
- * This way, origin: {x: 'center', y: 50} can be passed as well as ox: 'center', oy: 50
+/**
+ * This function adds support for string origins.
+ * It searches for an origin in o.origin o.ox and o.originX.
+ * This way, origin: {x: 'center', y: 50} can be passed as well as ox: 'center', oy: 50
 **/
 
 function getOrigin(o, element) {
@@ -186,7 +186,7 @@ function makeInstance(element, isHTML = false) {
   wrapper.innerHTML = element; // We can use firstChild here because we know,
   // that the first char is < and thus an element
 
-  element = adopter(wrapper.firstChild); // make sure, that element doesnt have its wrapper attached
+  element = adopter(wrapper.firstChild); // make sure, that element doesn't have its wrapper attached
 
   wrapper.removeChild(wrapper.firstChild);
   return element;
@@ -657,8 +657,8 @@ class Color {
   static isRgb(color) {
     return color && typeof color.r === 'number' && typeof color.g === 'number' && typeof color.b === 'number';
   }
-  /*
-  Generating random colors
+  /*
+  Generating random colors
   */
 
 
@@ -900,8 +900,8 @@ class Color {
     const color = new Color(l, c, h, 'lch');
     return color;
   }
-  /*
-  Conversion Methods
+  /*
+  Conversion Methods
   */
 
 
@@ -1061,8 +1061,8 @@ class Color {
     const color = new Color(x, y, z, 'xyz');
     return color;
   }
-  /*
-  Input and Output methods
+  /*
+  Input and Output methods
   */
 
 
@@ -1082,8 +1082,8 @@ class Color {
 
     return [_a, _b, _c].map(format);
   }
-  /*
-  Constructing colors
+  /*
+  Constructing colors
   */
 
 
@@ -1148,7 +1148,7 @@ class Point {
 
 }
 function point(x, y) {
-  return new Point(x, y).transform(this.screenCTM().inverse());
+  return new Point(x, y).transformO(this.screenCTM().inverseO());
 }
 
 function closeEnough(a, b, threshold) {
@@ -1173,7 +1173,7 @@ class Matrix {
     const theta = o.rotate || o.theta || 0;
     const origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY);
     const ox = origin.x;
-    const oy = origin.y; // We need Point to be invalid if nothing was passed because we cannot default to 0 here. Thats why NaN
+    const oy = origin.y; // We need Point to be invalid if nothing was passed because we cannot default to 0 here. That is why NaN
 
     const position = new Point(o.position || o.px || o.positionX || NaN, o.py || o.positionY || NaN);
     const px = position.x;
@@ -1538,7 +1538,7 @@ class Matrix {
 
     if (isFinite(t.px) || isFinite(t.py)) {
       const origin = new Point(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px)
-      // Doesnt work because t.px is also 0 if it wasnt passed
+      // Doesn't work because t.px is also 0 if it wasn't passed
 
       const dx = isFinite(t.px) ? t.px - origin.x : 0;
       const dy = isFinite(t.py) ? t.py - origin.y : 0;
@@ -1577,9 +1577,9 @@ function ctm() {
   return new Matrix(this.node.getCTM());
 }
 function screenCTM() {
-  /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537
-     This is needed because FF does not return the transformation matrix
-     for the inner coordinate system when getScreenCTM() is called on nested svgs.
+  /* https://bugzilla.mozilla.org/show_bug.cgi?id=1344537
+     This is needed because FF does not return the transformation matrix
+     for the inner coordinate system when getScreenCTM() is called on nested svgs.
      However all other Browsers do that */
   if (typeof this.isRoot === 'function' && !this.isRoot()) {
     const rect = this.rect(1, 1);
@@ -1779,7 +1779,7 @@ registerMethods({
       //                        that means, their clientRect is always as big as the content.
       //                        Furthermore this size is incorrect if the element is further transformed by its parents
       // computedStyle: Only returns meaningful values if css was used with px. We dont go this route here!
-      // getBBox: returns the bounding box of its content - that doesnt help!
+      // getBBox: returns the bounding box of its content - that doesn't help!
       let {
         width,
         height
@@ -2344,11 +2344,18 @@ class Dom extends EventTarget {
   } // Clone element
 
 
-  clone(deep = true) {
+  clone(deep = true, assignNewIds = true) {
     // write dom data to the dom so the clone can pickup the data
-    this.writeDataToDom(); // clone element and assign new id
+    this.writeDataToDom(); // clone element
 
-    return new this.constructor(assignNewId(this.node.cloneNode(deep)));
+    let nodeClone = this.node.cloneNode(deep);
+
+    if (assignNewIds) {
+      // assign new id
+      nodeClone = assignNewId(nodeClone);
+    }
+
+    return new this.constructor(nodeClone);
   } // Iterates over all children and invokes a given block
 
 
@@ -2433,7 +2440,7 @@ class Dom extends EventTarget {
     if (!parent.node.parentNode) return null; // get parent element
 
     parent = adopt(parent.node.parentNode);
-    if (!type) return parent; // loop trough ancestors if type is given
+    if (!type) return parent; // loop through ancestors if type is given
 
     do {
       if (typeof type === 'string' ? parent.matches(type) : parent instanceof type) return parent;
@@ -3157,7 +3164,7 @@ class Gradient extends Container {
   }
 
   targets() {
-    return baseFind('svg [fill*="' + this.id() + '"]');
+    return baseFind('svg [fill*=' + this.id() + ']');
   } // Alias string conversion to fill
 
 
@@ -3179,7 +3186,7 @@ class Gradient extends Container {
 
 
   url() {
-    return 'url("#' + this.id() + '")';
+    return 'url(#' + this.id() + ')';
   }
 
 }
@@ -3218,7 +3225,7 @@ class Pattern extends Container {
   }
 
   targets() {
-    return baseFind('svg [fill*="' + this.id() + '"]');
+    return baseFind('svg [fill*=' + this.id() + ']');
   } // Alias string conversion to fill
 
 
@@ -3240,7 +3247,7 @@ class Pattern extends Container {
 
 
   url() {
-    return 'url("#' + this.id() + '")';
+    return 'url(#' + this.id() + ')';
   }
 
 }
@@ -3595,10 +3602,10 @@ registerMethods({
 });
 register(Marker, 'Marker');
 
-/***
-Base Class
-==========
-The base stepper class that will be
+/***
+Base Class
+==========
+The base stepper class that will be
 ***/
 
 function makeSetterGetter(k, f) {
@@ -3691,9 +3698,9 @@ class Stepper {
   }
 
 }
-/***
-Easing Functions
-================
+/***
+Easing Functions
+================
 ***/
 
 class Ease extends Stepper {
@@ -3711,9 +3718,9 @@ class Ease extends Stepper {
   }
 
 }
-/***
-Controller Types
-================
+/***
+Controller Types
+================
 ***/
 
 class Controller extends Stepper {
@@ -5034,15 +5041,15 @@ class Timeline extends EventTarget {
 
     this._lastStepTime = this._time;
     this.fire('time', this._time); // This is for the case that the timeline was seeked so that the time
-    // is now before the startTime of the runner. Thats why we need to set
+    // is now before the startTime of the runner. That is why we need to set
     // the runner to position 0
     // FIXME:
-    // However, reseting in insertion order leads to bugs. Considering the case,
+    // However, resetting in insertion order leads to bugs. Considering the case,
     // where 2 runners change the same attribute but in different times,
-    // reseting both of them will lead to the case where the later defined
+    // resetting both of them will lead to the case where the later defined
     // runner always wins the reset even if the other runner started earlier
     // and therefore should win the attribute battle
-    // this can be solved by reseting them backwards
+    // this can be solved by resetting them backwards
 
     for (let k = this._runners.length; k--;) {
       // Get and run the current runner and ignore it if its inactive
@@ -5148,7 +5155,7 @@ class Runner extends EventTarget {
 
     this.enabled = true;
     this._time = 0;
-    this._lastTime = 0; // At creation, the runner is in reseted state
+    this._lastTime = 0; // At creation, the runner is in reset state
 
     this._reseted = true; // Save transforms applied to this runner
 
@@ -5161,7 +5168,7 @@ class Runner extends EventTarget {
     this._swing = false;
     this._wait = 0;
     this._times = 1;
-    this._frameId = null; // Stores how long a runner is stored after beeing done
+    this._frameId = null; // Stores how long a runner is stored after being done
 
     this._persist = this._isDeclarative ? true : null;
   }
@@ -5199,10 +5206,10 @@ class Runner extends EventTarget {
     this.enabled = enabled;
     return this;
   }
-  /*
-  Private Methods
-  ===============
-  Methods that shouldn't be used externally
+  /*
+  Private Methods
+  ===============
+  Methods that shouldn't be used externally
   */
 
 
@@ -5253,11 +5260,11 @@ class Runner extends EventTarget {
     this._stepper = new Ease(fn);
     return this;
   }
-  /*
-  Runner Definitions
-  ==================
-  These methods help us define the runtime behaviour of the Runner or they
-  help us make new runners from the current runner
+  /*
+  Runner Definitions
+  ==================
+  These methods help us define the runtime behaviour of the Runner or they
+  help us make new runners from the current runner
   */
 
 
@@ -5327,11 +5334,11 @@ class Runner extends EventTarget {
     let position;
 
     if (p == null) {
-      /*
-      This function converts a time to a position in the range [0, 1]
-      The full explanation can be found in this desmos demonstration
-        https://www.desmos.com/calculator/u4fbavgche
-      The logic is slightly simplified here because we can use booleans
+      /*
+      This function converts a time to a position in the range [0, 1]
+      The full explanation can be found in this desmos demonstration
+        https://www.desmos.com/calculator/u4fbavgche
+      The logic is slightly simplified here because we can use booleans
       */
       // Figure out the value without thinking about the start or end time
       const f = function (x) {
@@ -5363,10 +5370,10 @@ class Runner extends EventTarget {
 
     return this.time(p * this.duration());
   }
-  /*
-  Basic Functionality
-  ===================
-  These methods allow us to attach basic functions to the runner directly
+  /*
+  Basic Functionality
+  ===================
+  These methods allow us to attach basic functions to the runner directly
   */
 
 
@@ -5439,7 +5446,7 @@ class Runner extends EventTarget {
 
 
     const declarative = this._isDeclarative;
-    this.done = !declarative && !justFinished && this._time >= duration; // Runner is running. So its not in reseted state anymore
+    this.done = !declarative && !justFinished && this._time >= duration; // Runner is running. So its not in reset state anymore
 
     this._reseted = false;
     let converged = false; // Call initialise and the run function
@@ -5452,7 +5459,7 @@ class Runner extends EventTarget {
       converged = this._run(declarative ? dt : position);
       this.fire('step', this);
     } // correct the done flag here
-    // declaritive animations itself know when they converged
+    // declarative animations itself know when they converged
 
 
     this.done = this.done || converged && declarative;
@@ -5463,10 +5470,10 @@ class Runner extends EventTarget {
 
     return this;
   }
-  /*
-  Runner animation methods
-  ========================
-  Control how the animation plays
+  /*
+  Runner animation methods
+  ========================
+  Control how the animation plays
   */
 
 
@@ -5553,7 +5560,7 @@ class Runner extends EventTarget {
 
   _tryRetarget(method, target, extra) {
     if (this._history[method]) {
-      // if the last method wasnt even initialised, throw it away
+      // if the last method wasn't even initialised, throw it away
       if (!this._history[method].caller.initialised) {
         const index = this._queue.indexOf(this._history[method].caller);
 
@@ -5697,7 +5704,7 @@ registerMethods({
 
     // this function searches for all runners on the element and deletes the ones
     // which run before the current one. This is because absolute transformations
-    // overwfrite anything anyway so there is no need to waste time computing
+    // overwrite anything anyway so there is no need to waste time computing
     // other runners
     _clearTransformRunnersBefore(currentRunner) {
       this._transformationRunners.clearBefore(currentRunner.id);
@@ -5712,7 +5719,7 @@ registerMethods({
 
     _addRunner(runner) {
       this._transformationRunners.add(runner); // Make sure that the runner merge is executed at the very end of
-      // all Animator functions. Thats why we use immediate here to execute
+      // all Animator functions. That is why we use immediate here to execute
       // the merge right after all frames are run
 
 
@@ -5806,8 +5813,8 @@ extend(Runner, {
     return this;
   },
 
-  /**
-   ** absolute transformations
+  /**
+   ** absolute transformations
    **/
   //
   // M v -----|-----(D M v = F v)------|----->  T v
@@ -5831,7 +5838,7 @@ extend(Runner, {
 
 
     const isMatrix = Matrix.isMatrixLike(transforms);
-    affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morepher and set its type
+    affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morpher and set its type
 
     const morpher = new Morphable(this._stepper).type(affine ? TransformBag : Matrix);
     let origin;
@@ -5945,7 +5952,7 @@ extend(Runner, {
   },
 
   _queueNumberDelta(method, to) {
-    to = new SVGNumber(to); // Try to change the target if we have this method already registerd
+    to = new SVGNumber(to); // Try to change the target if we have this method already registered
 
     if (this._tryRetarget(method, to)) return this; // Make a morpher and queue the animation
 
@@ -5968,7 +5975,7 @@ extend(Runner, {
   },
 
   _queueObject(method, to) {
-    // Try to change the target if we have this method already registerd
+    // Try to change the target if we have this method already registered
     if (this._tryRetarget(method, to)) return this; // Make a morpher and queue the animation
 
     const morpher = new Morphable(this._stepper).to(to);
@@ -6501,7 +6508,7 @@ class ClipPath extends Container {
   }
 
   targets() {
-    return baseFind('svg [clip-path*="' + this.id() + '"]');
+    return baseFind('svg [clip-path*=' + this.id() + ']');
   }
 
 }
@@ -6522,7 +6529,7 @@ registerMethods({
       // use given clip or create a new one
       const clipper = element instanceof ClipPath ? element : this.parent().clip().add(element); // apply mask
 
-      return this.attr('clip-path', 'url("#' + clipper.id() + '")');
+      return this.attr('clip-path', 'url(#' + clipper.id() + ')');
     },
 
     // Unclip element
@@ -6730,7 +6737,7 @@ class Mask extends Container {
   }
 
   targets() {
-    return baseFind('svg [mask*="' + this.id() + '"]');
+    return baseFind('svg [mask*=' + this.id() + ']');
   }
 
 }
@@ -6750,7 +6757,7 @@ registerMethods({
       // use given mask or create a new one
       const masker = element instanceof Mask ? element : this.parent().mask().add(element); // apply mask
 
-      return this.attr('mask', 'url("#' + masker.id() + '")');
+      return this.attr('mask', 'url(#' + masker.id() + ')');
     },
 
     // Unmask element
@@ -6931,7 +6938,7 @@ registerMethods({
       return baseFind('svg textPath').filter(node => {
         return (node.attr('href') || '').includes(this.id());
       }); // Does not work in IE11. Use when IE support is dropped
-      // return baseFind('svg textPath[*|href*="' + this.id() + '"]')
+      // return baseFind('svg textPath[*|href*=' + this.id() + ']')
     }
 
   }

package/dist/components/verdocs-text-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './verdocs-help-icon2.js';
 
-const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input [data-lastpass-icon-root]{display:none !important}";
+const verdocsTextInputCss = "verdocs-text-input{font-family:\"Inter\", \"Barlow\", sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px 0;display:block}verdocs-text-input .input-element{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #707ae5;border-radius:4px;background:#ffffff;color:#000;width:100%;font-size:16px;height:28px;padding:4px 12px;outline:none}verdocs-text-input .input-element:disabled{border:1px solid #aeb4bf;background:#f5f5fa}verdocs-text-input .input-element::-webkit-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-moz-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::-ms-input-placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element::placeholder{color:#aaaaaa;opacity:1}verdocs-text-input .input-element:focus{outline:1px solid #7d88ff}verdocs-text-input .input-label{display:block;color:#555570;font-weight:700;font-size:14px;margin:0 0 4px 0}verdocs-text-input .required{color:red;margin-left:2px;display:inline-block}verdocs-text-input [data-lastpass-icon-root]{display:none !important}";
 
 const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -14,9 +14,10 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.helpText = '';
     this.type = 'text';
     this.disabled = false;
+    this.required = false;
   }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label && h("div", { class: "input-label" }, this.label + ':'), h("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
+    return (h(Host, { class: "input-field" }, h("label", null, this.label && (h("div", { class: "input-label" }, this.label + ':', this.required && h("span", { class: "required" }, "*"))), h("input", { type: this.type, value: this.value, required: this.required, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }), this.helpText && h("verdocs-help-icon", { text: this.helpText }))));
   }
   static get style() { return verdocsTextInputCss; }
 }, [0, "verdocs-text-input", {
@@ -26,7 +27,8 @@ const VerdocsTextInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "autocomplete": [1],
     "helpText": [1, "help-text"],
     "type": [1],
-    "disabled": [4]
+    "disabled": [4],
+    "required": [4]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {