@metadev/lux 0.17.0 → 0.18.0

package/bundles/metadev-lux.umd.js

@@ -35,6 +35,22 @@
         var re = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;
         return re.test(String(value).toLowerCase().trim());
     };
+    var isValidUrl = function (value) {
+        var re = /^([a-z]+?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i;
+        return re.test(String(value).toLowerCase().trim());
+    };
+    var isValidColor = function (value) {
+        value = String(value).toLowerCase();
+        // valid values for CSS color property, yet not valid colors by themselves
+        if (value === 'currentcolor' ||
+            value === 'inherit' ||
+            value === 'initial' ||
+            value === 'revert' ||
+            value === 'unset') {
+            return false;
+        }
+        return CSS.supports('color', value);
+    };
     // date functions
     var isValidDate = function (date) { return exists(date) ? !isNaN(date.getTime()) : false; };
     var normalizeDate = function (value) {
@@ -1490,13 +1506,17 @@
                     required: 'Required field.',
                     min: 'Minimum value is $min.',
                     max: 'Maximum value is $max.',
-                    email: 'Format should match example@example.com.'
+                    email: 'Format should match example@example.com.',
+                    url: 'Format should match https://example.com.',
+                    color: 'Format should match #XXXXXX.'
                 },
                 es: {
                     required: 'El campo es obligatorio.',
                     min: 'El valor mínimo es $min.',
                     max: 'El valor máximo es $max.',
-                    email: 'El campo debe tener un formato como ejemplo@ejemplo.com.'
+                    email: 'El campo debe tener un formato como ejemplo@ejemplo.com.',
+                    url: 'El campo debe tener un formato como https://ejemplo.com.',
+                    color: 'El campo debe tener un formato como #XXXXXX.'
                 }
             };
             this.lang = languageDetector();
@@ -1514,6 +1534,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(InputComponent.prototype, "color", {
+            get: function () {
+                return this.checkColor();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(InputComponent.prototype, "disabled", {
             get: function () {
                 return this._disabled;
@@ -1669,6 +1696,14 @@
                 result = result || {};
                 result.email = { value: value, reason: 'Invalid email.' };
             }
+            if (this.type === 'url' && hasValue(value) && !isValidUrl(value)) {
+                result = result || {};
+                result.url = { value: value, reason: 'Invalid URL.' };
+            }
+            if (this.type === 'color' && hasValue(value) && !isValidColor(value)) {
+                result = result || {};
+                result.color = { value: value, reason: 'Invalid color.' };
+            }
             if (this.type === 'number' && hasValue(value) && !isValidNumber(value)) {
                 result = result || {};
                 result.numeric = { value: value, reason: 'Invalid number.' };
@@ -1735,11 +1770,24 @@
         };
         InputComponent.prototype.onChangeValue = function (newValue) {
             this.value = newValue;
+            if (this.isColor()) {
+                this.colorpicker.nativeElement.value = undefined;
+            }
             this.markAsTouched();
         };
         InputComponent.prototype.onKeyPress = function (event) {
             this.keyPress.emit(event);
         };
+        InputComponent.prototype.onColorPicked = function (newValue) {
+            this.onChangeValue(newValue);
+            this.setValueInControl(newValue);
+        };
+        InputComponent.prototype.isUrl = function () {
+            return this.type === 'url';
+        };
+        InputComponent.prototype.isColor = function () {
+            return this.type === 'color';
+        };
         InputComponent.prototype.isNumber = function () {
             return this.type === 'number';
         };
@@ -1753,7 +1801,11 @@
             return this.currency === 'USD';
         };
         InputComponent.prototype.hasPostfix = function () {
-            return (this.currency === 'EUR' || this.isPercentage() || this.isPermillage());
+            return (this.currency === 'EUR' ||
+                this.isPercentage() ||
+                this.isPermillage() ||
+                (this.isUrl() && !!this.value) ||
+                this.isColor());
         };
         InputComponent.prototype.checkClassName = function () {
             return this.disabled
@@ -1764,11 +1816,22 @@
                     ? 'readonly'
                     : '';
         };
+        InputComponent.prototype.checkColor = function () {
+            return this.type === 'color' && isValidColor(this.value)
+                ? this.value
+                : 'initial';
+        };
         InputComponent.prototype.checkType = function (type) {
             switch (type) {
                 case 'email':
                     this.setEmailPatterns();
                     break;
+                case 'url':
+                    this.setUrlPatterns();
+                    break;
+                case 'color':
+                    this.setColorPatterns();
+                    break;
                 case 'date':
                     this.setDatePatterns();
                     break;
@@ -1795,6 +1858,10 @@
             }
         };
         InputComponent.prototype.setEmailPatterns = function () { };
+        InputComponent.prototype.setUrlPatterns = function () { };
+        InputComponent.prototype.setColorPatterns = function () {
+            this.domain = 'text';
+        };
         InputComponent.prototype.setDatePatterns = function () {
             this.min = this.min || '1900-01-01';
             this.max = this.max || '2100-01-01';
@@ -1832,7 +1899,7 @@
     InputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'lux-input',
-                    template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
+                    template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n<div *ngIf=\"isUrl() && !!value\" class=\"postfix rounded-right symbol clickable\" [ngClass]=\"className\">\n  <a href=\"{{ value }}\" target=\"_blank\">\n    <span class=\"icon-external\"></span>\n  </a>\n</div>\n<div *ngIf=\"isColor()\" class=\"postfix rounded-right bordered transparency\" [ngClass]=\"className\">\n  <div class=\"rounded-right full-space\" [ngStyle]=\"{'background-color': color}\">\n    <input\n      #colorpicker\n      class=\"minimal-space clickable invisible rounded-right full-space\"\n      [id]=\"inputId + '$colorpicker'\"\n      type=\"color\"\n      [attr.value]=\"value\"\n      [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n      [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n      (change)=\"onColorPicked(colorpicker.value)\"\n      (keypress)=\"onKeyPress($event)\"\n      (blur)=\"onLostFocus()\"\n    />\n  </div>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.url\">{{ userErrors[this.lang].url }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
                     providers: [
                         {
                             provide: forms.NG_VALUE_ACCESSOR,
@@ -1845,7 +1912,7 @@
                             useExisting: i0.forwardRef(function () { return InputComponent; })
                         }
                     ],
-                    styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}\n"]
+                    styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch;min-height:1.5rem}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.clickable{cursor:pointer}.full-space{width:100%;height:100%;margin:0;padding:0}.minimal-space,.icon,.icon-external{min-width:1rem;min-height:1rem}.icon,.icon-external{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.icon-external{background:url(/assets/img/external.svg) no-repeat center;background:var(--lux-input-icon-external, url(/assets/img/external.svg) no-repeat center);background-size:1rem;background-position-y:.1rem;height:100%}.invisible{opacity:0}.transparency{background-image:conic-gradient(white 0deg 90deg,lightgray 90deg 180deg,white 180deg 270deg,lightgray 270deg 360deg)}\n"]
                 },] }
     ];
     InputComponent.ctorParameters = function () { return [
@@ -1854,6 +1921,7 @@
     InputComponent.propDecorators = {
         input: [{ type: i0.ViewChild, args: ['input', { static: false },] }],
         textarea: [{ type: i0.ViewChild, args: ['textarea', { static: false },] }],
+        colorpicker: [{ type: i0.ViewChild, args: ['colorpicker', { static: false },] }],
         rows: [{ type: i0.Input }],
         cols: [{ type: i0.Input }],
         step: [{ type: i0.Input }],