@sula-tech/webcomponents 0.7.6 → 0.9.0

package/dist/components/sula-textarea.js

@@ -138,32 +138,32 @@ const SulaTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextarea exten
     }
     render() {
         const containerHeight = this.rows * 24 + 48;
-        return (h(Host, { key: '0586b5e31d5bda244cc4c1f993f883eb785f39b3', ref: node => (this.node = node) }, h("div", { key: '28d230964948161540ba96b948a4d7a63ecd8748' }, h("div", { key: '478bf00ea0f45407ecc36708bcfe4fb95fe49619', id: "textarea-container", class: {
+        return (h(Host, { key: '2fcc7b99d23820764799bcf3eed0a7605c9d2f72', ref: node => (this.node = node) }, h("div", { key: '5b6fecfaef896755b1862cf8468fb31297169885' }, h("div", { key: 'ed641bb610135c66bd663bfa284f0d81e7e1738d', id: "textarea-container", class: {
                 'relative border rounded-sm px-16 py-12 outline-none caret-brand-primary': true,
                 'textarea-focus': this.textareaIsFocused && !this.disabled && this.status === SulaTextareaStatus.Default,
                 'textarea-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-text': !this.disabled,
-            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: 'c0450390c2d40f2a3e0e4b486fc9580c369bf912', class: {
+            }, style: { height: `${containerHeight}px` }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleTextareaClick }, h("label", { key: '69ad1cd86d7395ecdeb7a6aeac02273370a10fef', class: {
                 'text-base top-16 left-12 absolute transition-all duration-200 ease-in-out pointer-events-none z-10 w-[85%]': true,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '2d73abbc98c3cb70d0234f9629b392cb1cd8f83e', class: {
+            }, ref: node => (this.labelElement = node) }, this.label), h("label", { key: '0352260db567f497becd5f8f347cf206aecb595b', class: {
                 'absolute font-bold transition-all duration-200 ease-in-out pointer-events-none z-10 active-label hidden from-down': true,
                 'text-sm top-12 left-16': this.isActive,
                 'text-text-primary': !this.disabled && (this.isActive || this.status === SulaTextareaStatus.Default),
                 'text-text-disabled': this.disabled,
                 'bg-surface-body': !this.disabled && this.isActive,
-            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'ce8af45adb97d797dbc07a557235c47378a10bb2', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
+            }, ref: node => (this.activeLabelElement = node) }, this.label), h("textarea", { key: 'edeacd0e14078081c1d5986e60852b8ed5b6a6a6', ref: node => (this.textareaElement = node), placeholder: this.isActive ? this.placeholder : '', rows: this.rows, maxLength: this.maxLength, disabled: this.disabled, class: {
                 'w-full h-full outline-none text-base bg-transparent border-none resize-none': true,
                 'text-text-primary': !this.disabled,
                 'text-text-disabled cursor-not-allowed overflow-hidden': this.disabled,
-            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: '676e2be41409e297c350dd95a715014f0589594c', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '69a22552f623c03a458137f3bfa4f92a2fb0a62d', id: "textarea-help-text", class: {
+            }, style: { paddingTop: this.isActive ? `${this.labelPadding}px` : '0' }, onInput: this.handleTextareaChanges, onFocus: this.handleTextareaFocus, onBlur: this.handleBlur, value: this.textValue })), (this.helpText || this.maxLength) && (h("div", { key: 'f1036cde3cf5bbd60fba5938fc2054d12d110624', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'db55a3ae78e63964a9d26a8cd44a71874a500004', id: "textarea-help-text", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,
-            } }, this.helpText)), this.maxLength && (h("div", { key: '29ab1273eef5520bb5436aaa0baa767cd24644c4', id: "max-length-container", class: {
+            } }, this.helpText)), this.maxLength && (h("div", { key: '4e73a6934d1b959c86fa2c9f4cfb5dadaf20e943', id: "max-length-container", class: {
                 'text-text-primary': this.status === SulaTextareaStatus.Default && !this.disabled,
                 'text-feedback-error': this.status === SulaTextareaStatus.Error && !this.disabled,
                 'text-text-disabled': this.disabled,

package/dist/components/sula-textfield.js

@@ -1,5 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { g as getDefaultExportFromCjs } from './p-B85MJLTf.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTextfieldType;
 (function (SulaTextfieldType) {
@@ -12,6 +13,241 @@ var SulaTextfieldStatus;
     SulaTextfieldStatus["Error"] = "error";
 })(SulaTextfieldStatus || (SulaTextfieldStatus = {}));
 
+var vanillaMasker$1 = {exports: {}};
+
+var vanillaMasker = vanillaMasker$1.exports;
+
+var hasRequiredVanillaMasker;
+
+function requireVanillaMasker () {
+	if (hasRequiredVanillaMasker) return vanillaMasker$1.exports;
+	hasRequiredVanillaMasker = 1;
+	(function (module, exports) {
+		(function(root, factory) {
+		  {
+		    module.exports = factory();
+		  }
+		}(vanillaMasker, function() {
+		  var DIGIT = "9",
+		      ALPHA = "A",
+		      ALPHANUM = "S",
+		      BY_PASS_KEYS = [9, 16, 17, 18, 36, 37, 38, 39, 40, 91, 92, 93],
+		      isAllowedKeyCode = function(keyCode) {
+		        for (var i = 0, len = BY_PASS_KEYS.length; i < len; i++) {
+		          if (keyCode == BY_PASS_KEYS[i]) {
+		            return false;
+		          }
+		        }
+		        return true;
+		      },
+		      mergeMoneyOptions = function(opts) {
+		        opts = opts || {};
+		        opts = {
+		          delimiter: opts.delimiter || ".",
+		          lastOutput: opts.lastOutput,
+		          precision: opts.hasOwnProperty("precision") ? opts.precision : 2,
+		          separator: opts.separator || ",",
+		          showSignal: opts.showSignal,
+		          suffixUnit: opts.suffixUnit && (" " + opts.suffixUnit.replace(/[\s]/g,'')) || "",
+		          unit: opts.unit && (opts.unit.replace(/[\s]/g,'') + " ") || "",
+		          zeroCents: opts.zeroCents
+		        };
+		        opts.moneyPrecision = opts.zeroCents ? 0 : opts.precision;
+		        return opts;
+		      },
+		      // Fill wildcards past index in output with placeholder
+		      addPlaceholdersToOutput = function(output, index, placeholder) {
+		        for (; index < output.length; index++) {
+		          if(output[index] === DIGIT || output[index] === ALPHA || output[index] === ALPHANUM) {
+		            output[index] = placeholder;
+		          }
+		        }
+		        return output;
+		      }
+		  ;
+
+		  var VanillaMasker = function(elements) {
+		    this.elements = elements;
+		  };
+
+		  VanillaMasker.prototype.unbindElementToMask = function() {
+		    for (var i = 0, len = this.elements.length; i < len; i++) {
+		      this.elements[i].lastOutput = "";
+		      this.elements[i].onkeyup = false;
+		      this.elements[i].onkeydown = false;
+
+		      if (this.elements[i].value.length) {
+		        this.elements[i].value = this.elements[i].value.replace(/\D/g, '');
+		      }
+		    }
+		  };
+
+		  VanillaMasker.prototype.bindElementToMask = function(maskFunction) {
+		    var that = this,
+		        onType = function(e) {
+		          e = e || window.event;
+		          var source = e.target || e.srcElement;
+
+		          if (isAllowedKeyCode(e.keyCode)) {
+		            setTimeout(function() {
+		              that.opts.lastOutput = source.lastOutput;
+		              source.value = VMasker[maskFunction](source.value, that.opts);
+		              source.lastOutput = source.value;
+		              if (source.setSelectionRange && that.opts.suffixUnit) {
+		                source.setSelectionRange(source.value.length, (source.value.length - that.opts.suffixUnit.length));
+		              }
+		            }, 0);
+		          }
+		        }
+		    ;
+		    for (var i = 0, len = this.elements.length; i < len; i++) {
+		      this.elements[i].lastOutput = "";
+		      this.elements[i].onkeyup = onType;
+		      if (this.elements[i].value.length) {
+		        this.elements[i].value = VMasker[maskFunction](this.elements[i].value, this.opts);
+		      }
+		    }
+		  };
+
+		  VanillaMasker.prototype.maskMoney = function(opts) {
+		    this.opts = mergeMoneyOptions(opts);
+		    this.bindElementToMask("toMoney");
+		  };
+
+		  VanillaMasker.prototype.maskNumber = function() {
+		    this.opts = {};
+		    this.bindElementToMask("toNumber");
+		  };
+		  
+		  VanillaMasker.prototype.maskAlphaNum = function() {
+		    this.opts = {};
+		    this.bindElementToMask("toAlphaNumeric");
+		  };
+
+		  VanillaMasker.prototype.maskPattern = function(pattern) {
+		    this.opts = {pattern: pattern};
+		    this.bindElementToMask("toPattern");
+		  };
+
+		  VanillaMasker.prototype.unMask = function() {
+		    this.unbindElementToMask();
+		  };
+
+		  var VMasker = function(el) {
+		    if (!el) {
+		      throw new Error("VanillaMasker: There is no element to bind.");
+		    }
+		    var elements = ("length" in el) ? (el.length ? el : []) : [el];
+		    return new VanillaMasker(elements);
+		  };
+
+		  VMasker.toMoney = function(value, opts) {
+		    opts = mergeMoneyOptions(opts);
+		    if (opts.zeroCents) {
+		      opts.lastOutput = opts.lastOutput || "";
+		      var zeroMatcher = ("("+ opts.separator +"[0]{0,"+ opts.precision +"})"),
+		          zeroRegExp = new RegExp(zeroMatcher, "g"),
+		          digitsLength = value.toString().replace(/[\D]/g, "").length || 0,
+		          lastDigitLength = opts.lastOutput.toString().replace(/[\D]/g, "").length || 0
+		      ;
+		      value = value.toString().replace(zeroRegExp, "");
+		      if (digitsLength < lastDigitLength) {
+		        value = value.slice(0, value.length - 1);
+		      }
+		    }
+		    var number = value.toString().replace(/[\D]/g, ""),
+		        clearDelimiter = new RegExp("^(0|\\"+ opts.delimiter +")"),
+		        clearSeparator = new RegExp("(\\"+ opts.separator +")$"),
+		        money = number.substr(0, number.length - opts.moneyPrecision),
+		        masked = money.substr(0, money.length % 3),
+		        cents = new Array(opts.precision + 1).join("0")
+		    ;
+		    money = money.substr(money.length % 3, money.length);
+		    for (var i = 0, len = money.length; i < len; i++) {
+		      if (i % 3 === 0) {
+		        masked += opts.delimiter;
+		      }
+		      masked += money[i];
+		    }
+		    masked = masked.replace(clearDelimiter, "");
+		    masked = masked.length ? masked : "0";
+		    var signal = "";
+		    if(opts.showSignal === true) {
+		      signal = value < 0 || (value.startsWith && value.startsWith('-')) ? "-" :  "";
+		    }
+		    if (!opts.zeroCents) {
+		      var beginCents = number.length - opts.precision,
+		          centsValue = number.substr(beginCents, opts.precision),
+		          centsLength = centsValue.length,
+		          centsSliced = (opts.precision > centsLength) ? opts.precision : centsLength
+		      ;
+		      cents = (cents + centsValue).slice(-centsSliced);
+		    }
+		    var output = opts.unit + signal + masked + opts.separator + cents;
+		    return output.replace(clearSeparator, "") + opts.suffixUnit;
+		  };
+
+		  VMasker.toPattern = function(value, opts) {
+		    var pattern = (typeof opts === 'object' ? opts.pattern : opts),
+		        patternChars = pattern.replace(/\W/g, ''),
+		        output = pattern.split(""),
+		        values = value.toString().replace(/\W/g, ""),
+		        charsValues = values.replace(/\W/g, ''),
+		        index = 0,
+		        i,
+		        outputLength = output.length,
+		        placeholder = (typeof opts === 'object' ? opts.placeholder : undefined)
+		    ;
+		    
+		    for (i = 0; i < outputLength; i++) {
+		      // Reached the end of input
+		      if (index >= values.length) {
+		        if (patternChars.length == charsValues.length) {
+		          return output.join("");
+		        }
+		        else if ((placeholder !== undefined) && (patternChars.length > charsValues.length)) {
+		          return addPlaceholdersToOutput(output, i, placeholder).join("");
+		        }
+		        else {
+		          break;
+		        }
+		      }
+		      // Remaining chars in input
+		      else {
+		        if ((output[i] === DIGIT && values[index].match(/[0-9]/)) ||
+		            (output[i] === ALPHA && values[index].match(/[a-zA-Z]/)) ||
+		            (output[i] === ALPHANUM && values[index].match(/[0-9a-zA-Z]/))) {
+		          output[i] = values[index++];
+		        } else if (output[i] === DIGIT || output[i] === ALPHA || output[i] === ALPHANUM) {
+		          if(placeholder !== undefined){
+		            return addPlaceholdersToOutput(output, i, placeholder).join("");
+		          }
+		          else {
+		            return output.slice(0, i).join("");
+		          }
+		        }
+		      }
+		    }
+		    return output.join("").substr(0, i);
+		  };
+
+		  VMasker.toNumber = function(value) {
+		    return value.toString().replace(/(?!^-)[^0-9]/g, "");
+		  };
+		  
+		  VMasker.toAlphaNumeric = function(value) {
+		    return value.toString().replace(/[^a-z0-9 ]+/i, "");
+		  };
+
+		  return VMasker;
+		})); 
+	} (vanillaMasker$1));
+	return vanillaMasker$1.exports;
+}
+
+var vanillaMaskerExports = requireVanillaMasker();
+var VMasker = /*@__PURE__*/getDefaultExportFromCjs(vanillaMaskerExports);
+
 const sulaTextfieldCss = "*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.outline{outline-style:solid}:host{display:block}.button-focus{outline:2px solid var(--color-feedback-informational)!important;outline-offset:2px!important}.button-error{outline:2px solid var(--color-feedback-error)!important;outline-offset:2px!important}.from-down{animation:from-down .2s ease-in-out}.from-up{animation:from-up .2s ease-in-out}@keyframes from-down{0%{opacity:0;transform:translateY(75%)}to{opacity:1;transform:translateY(0)}}@keyframes from-up{0%{opacity:0;transform:translateY(-75%)}to{opacity:1;transform:translateY(0)}}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#02361a;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#500202;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#683f08;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#691e07;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#6a3b01;--color-gray-50:#fff;--color-gray-100:#f4f4f4;--color-gray-200:#e6e6e6;--color-gray-300:#c3c3c3;--color-gray-400:#b9b9b9;--color-gray-500:#949494;--color-gray-600:#737373;--color-gray-700:#5c5c5c;--color-gray-800:#323232;--color-gray-900:#292929;--color-gray-950:#141414;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#0a2e61;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:#14141405;--color-black-opacity-100:#1414141a;--color-black-opacity-200:#14141426;--color-black-opacity-300:#14141445;--color-black-opacity-400:#1414145c;--color-black-opacity-500:#14141480;--color-black-opacity-600:#1414148c;--color-black-opacity-700:#141414a3;--color-black-opacity-800:#141414ba;--color-black-opacity-900:#141414cc;--color-black-opacity-950:#141414e8;--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f4f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#323232;--color-text-secondary:#5c5c5c;--color-text-disabled:#949494;--color-text-link:#1355b4;--color-states-empty-bg-hover:#1414141a;--color-states-empty-bg-pressed:#14141426;--color-states-bg-disabled:#14141405;--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e6e6e6;--color-states-negative-pressed:#c3c3c3;--color-icon-primary:#5c5c5c;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#b9b9b9;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f4f4f4;--color-neutral-neutral-3:#b9b9b9;--color-neutral-neutral-4:#949494;--color-neutral-neutral-5:#737373;--color-neutral-neutral-6:#5c5c5c;--color-neutral-neutral-7:#323232;--color-neutral-neutral-8:#292929;--color-negative-negative-1:#fff;--color-negative-negative-2:#323232;--color-opacity-body:#fffc;--color-opacity-on-body:#14141405;--color-opacity-overlay:#1414148c;--color-opacity-on-overlay:#ffffff1a;--color-line-input:#949494;--color-line-general-strong:#c3c3c3;--color-line-general:#e6e6e6}.static{position:static}.mt-4{margin-top:.25rem}.flex{display:flex}.hidden{display:none}.h-\\[72px\\]{height:72px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:.75rem}.border{border-width:1px}.border-line-general{border-color:var(--color-line-general)}.border-line-input{border-color:var(--color-line-input)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-surface-body{background-color:var(--color-surface-body)}.bg-transparent{background-color:transparent}.px-16{padding-left:1rem;padding-right:1rem}.pr-12{padding-right:.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-feedback-error{color:var(--color-feedback-error)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.caret-brand-primary{caret-color:var(--color-brand-primary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}";
 
 const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield extends H {
@@ -38,6 +274,9 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
             this.toggleOptions(true);
         };
         this.handleInputChanges = (event) => {
+            if (this.maskPattern && this.inputElement) {
+                this.handleInputMask();
+            }
             const newValue = event.target.value;
             this.textValue = newValue;
             this.value = newValue;
@@ -104,6 +343,9 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
         if (this.textValue && this.textValue.trim().length > 0) {
             this.changeElementsStyle();
         }
+        if (this.maskPattern && this.inputElement) {
+            this.handleInputMask();
+        }
     }
     toggleOptions(inputIsOpen) {
         if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled)
@@ -121,6 +363,9 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
             this.labelElement.classList.add('from-up');
         }
     }
+    handleInputMask() {
+        VMasker(this.inputElement).maskPattern(this.maskPattern);
+    }
     handlePasswordIconClicked() {
         const cursorPosition = this.inputElement.selectionStart;
         const inputValue = this.inputElement.value;
@@ -139,14 +384,14 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
         return this.icon;
     }
     render() {
-        return (h(Host, { key: 'db19982329c8a6aa8989b3a68ef61a7453ee4a99', ref: node => (this.node = node) }, h("div", { key: 'daf060b490b07b535cb414b11c3c75f307f127aa' }, h("div", { key: '1d84aec41f352537a124311c076eceec3271832a', id: "button-container", class: {
+        return (h(Host, { key: '7f3d6752bea3a556fa77a52513eabe0655d9234d', ref: node => (this.node = node) }, h("div", { key: 'cd9cbc06a0244161c06e770d87834ddd7311ada3' }, h("div", { key: 'b66f4f6f2a5cfdcbc212264d500d219b4deb335e', id: "button-container", class: {
                 'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,
                 'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,
                 'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,
                 'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,
                 'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,
                 'bg-surface-body border-line-input cursor-pointer': !this.disabled,
-            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '6ec4a250e1bcd8f053b2dba7e6e6fe6842c1b9bf', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: '001ef2edc750497dc82a65341f98289fd8d28c6d', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: '96c0725c63ed92ddbc164f8efcdc003707eb0115', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: 'f65cd97f9ddcadcc07789d8d3dc9421e82e31d78', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: '27596e159d5bcdd52f587350fa7ed619d5a6346e', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: '2fb87a5df61f3ed9f50f404ca8ff2988c71d10a7', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: 'd54b53d64879e9a454a72c7e6726c8b0f5905baa', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: '7ded73f462e82f41b8766e4654cd47fabf3b3a40', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: 'c62b62d8b8c99a775a31092479f1e4d8f581908c', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
+            }, tabIndex: 0, onFocus: this.handleFocus, onClick: this.handleInputClick }, !this.disabled && (h("div", { key: '79eabd37134b96bbb5a315ca73d81d0c8be01ce4', class: { 'hidden flex-col w-full': true, 'pr-12': !!this.icon }, ref: node => (this.inputContainer = node) }, h("label", { key: 'd24af603a0e365d1482daea31b75fa8e86fd5e8a', class: "font-bold text-sm text-text-primary from-down" }, this.label), h("input", { key: 'aea523483b4a39f31b0d2c9506001d69c397da70', type: this.type, ref: node => (this.inputElement = node), placeholder: this.placeholder, class: "outline-none text-base text-text-primary bg-transparent", onInput: this.handleInputChanges, onFocus: this.handleInputFocus, value: this.textValue }))), h("div", { key: '2e3d9fbe37ba1dc5aceea8e8ce7e6152f740a955', id: "textfield-label", class: { 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }, ref: node => (this.labelElement = node) }, this.label), (!!this.icon || this.type === SulaTextfieldType.Password) && (h("div", { key: 'd6f5aacd486e093d64307117d8c6b0bfea460f49', class: "flex items-center justify-center", onClick: this.handleIconClick }, h("sula-icon", { key: 'cfc400df76f2c487a09b641c101543a3e2895bd1', icon: this.getInputIcon(), customClass: `text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}` })))), (this.helpText || this.maxLength) && !this.disabled && (h("div", { key: '8d450abc836ba702aeda16f4f6c1d379373ee698', class: "flex justify-between items-center px-16 mt-4 text-sm" }, this.helpText && (h("div", { key: 'e0d25ac6878865510a0afc793d81b07d8a016bb5', id: "textfield-help-text", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.helpText)), this.maxLength && (h("div", { key: '6384a6d5468b03bef0ddf2e0345438efe1b5fd32', id: "max-length-container", class: { 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error } }, this.textValue ? this.textValue.length : 0, "/", this.maxLength)))))));
     }
     static get watchers() { return {
         "value": ["watchValueHandler"]
@@ -162,6 +407,7 @@ const SulaTextfield$1 = /*@__PURE__*/ proxyCustomElement(class SulaTextfield ext
         "helpText": [1, "help-text"],
         "maxLength": [2, "max-length"],
         "icon": [1],
+        "maskPattern": [1, "mask-pattern"],
         "inputIsOpen": [32],
         "textValue": [32],
         "showPassword": [32],

package/dist/components/sula-textfield.js.map

@@ -1 +1 @@
-{"file":"sula-textfield.js","mappings":"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","names":["SulaTextfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textfield/model/sula-textfield.model.ts","src/components/sula-textfield/sula-textfield.scss?tag=sula-textfield&encapsulation=shadow","src/components/sula-textfield/sula-textfield.tsx"],"sourcesContent":["export enum SulaTextfieldType {\n  Text = 'text',\n  Password = 'password',\n}\n\nexport enum SulaTextfieldStatus {\n  Default = 'default',\n  Error = 'error',\n}\n",":host {\n  display: block;\n}\n\n.button-focus {\n  outline: 2px solid var(--color-feedback-informational) !important;\n  outline-offset: 2px !important;\n}\n\n.button-error {\n  outline: 2px solid var(--color-feedback-error) !important;\n  outline-offset: 2px !important;\n}\n\n.from-down {\n  animation: from-down 0.2s ease-in-out;\n}\n\n.from-up {\n  animation: from-up 0.2s ease-in-out;\n}\n\n@keyframes from-down {\n  from {\n    transform: translateY(75%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes from-up {\n  from {\n    transform: translateY(-75%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\n@Component({\n  tag: 'sula-textfield',\n  styleUrl: 'sula-textfield.scss',\n  shadow: true,\n})\nexport class SulaTextfield {\n  /**\n   * Value for the input.\n   */\n  @Prop({ mutable: true })\n  value?: string;\n\n  /**\n   * The textfield type\n   */\n  @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n  /**\n   * The textfield status\n   */\n  @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n  /**\n   * The textfield label\n   */\n  @Prop() label: string;\n\n  /**\n   * The textfield placeholder\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The textfield is disabled\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n\n  /**\n   * The help text for textfield\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * The textfield max length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The textfield icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Event emitted when input value changes.\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when input is focused.\n   */\n  @Event()\n  focusedOn: EventEmitter<void>;\n\n  /**\n   * Event emitted when input is focused out.\n   */\n  @Event()\n  focusedOut: EventEmitter<void>;\n\n  @State()\n  inputIsOpen = false;\n\n  @State()\n  textValue: string = '';\n\n  @State()\n  showPassword = false;\n\n  @State()\n  inputIsFocused = false;\n\n  @Watch('value')\n  watchValueHandler(newValue: string) {\n    this.textValue = newValue;\n\n    if (this.inputElement && this.inputElement.value !== newValue) {\n      const cursorPosition = this.inputElement.selectionStart;\n      this.inputElement.value = newValue || '';\n\n      if (this.inputIsFocused && cursorPosition !== null) {\n        const newPosition = Math.min(cursorPosition, (newValue || '').length);\n        this.inputElement.setSelectionRange(newPosition, newPosition);\n      }\n    }\n\n    if (newValue && newValue.trim().length > 0) {\n      this.inputIsOpen = true;\n      this.changeElementsStyle();\n    } else if (!this.inputIsFocused) {\n      this.inputIsOpen = false;\n      this.changeElementsStyle();\n    }\n  }\n\n  inputContainer: HTMLDivElement;\n  inputElement: HTMLInputElement;\n  labelElement: HTMLDivElement;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleClick(event: Event) {\n    if (!this.node || !this.inputIsFocused) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.toggleOptions(false);\n      this.focusedOut.emit();\n      this.inputIsFocused = false;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.trim().length > 0) {\n      this.textValue = this.value;\n      this.inputIsOpen = true;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.textValue && this.textValue.trim().length > 0) {\n      this.changeElementsStyle();\n    }\n  }\n\n  handleInputClick = () => {\n    this.toggleOptions(true);\n  };\n\n  toggleOptions(inputIsOpen: boolean) {\n    if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n    this.inputIsOpen = inputIsOpen;\n    this.changeElementsStyle();\n    this.inputElement.focus();\n  }\n\n  changeElementsStyle() {\n    if (!this.inputContainer || !this.labelElement) return;\n\n    this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n    this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n    if (!this.inputIsOpen) {\n      this.labelElement.classList.add('from-up');\n    }\n  }\n\n  handleInputChanges = (event: InputEvent) => {\n    const newValue = (event.target as HTMLInputElement).value;\n    this.textValue = newValue;\n    this.value = newValue;\n\n    this.valueChanged.emit(newValue);\n  };\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.toggleOptions(true);\n    this.inputElement.focus();\n  };\n\n  handleBlur = () => {\n    this.toggleOptions(false);\n\n    this.focusedOut.emit();\n    this.inputIsFocused = false;\n  };\n\n  handleInputFocus = () => {\n    this.focusedOn.emit();\n    this.inputIsFocused = true;\n  };\n\n  handleIconClick = (event: MouseEvent) => {\n    if (this.type === SulaTextfieldType.Password) {\n      event.stopPropagation();\n      this.handlePasswordIconClicked();\n    }\n  };\n\n  handlePasswordIconClicked() {\n    const cursorPosition = this.inputElement.selectionStart;\n    const inputValue = this.inputElement.value;\n    const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n    this.inputElement.setAttribute('type', inputType);\n    this.showPassword = !this.showPassword;\n\n    setTimeout(() => {\n      this.inputElement.value = inputValue;\n\n      this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n    }, 0);\n  }\n\n  getInputIcon() {\n    if (this.type === SulaTextfieldType.Password) {\n      return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n    }\n\n    return this.icon;\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div>\n          <div\n            id=\"button-container\"\n            class={{\n              'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n              'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n              'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n              'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n              'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n              'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n            }}\n            tabIndex={0}\n            onFocus={this.handleFocus}\n            onClick={this.handleInputClick}\n          >\n            {!this.disabled && (\n              <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n                <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n                <input\n                  type={this.type}\n                  ref={node => (this.inputElement = node)}\n                  placeholder={this.placeholder}\n                  class=\"outline-none text-base text-text-primary bg-transparent\"\n                  onInput={this.handleInputChanges}\n                  onFocus={this.handleInputFocus}\n                  value={this.textValue}\n                />\n              </div>\n            )}\n\n            <div\n              id=\"textfield-label\"\n              class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n              ref={node => (this.labelElement = node)}\n            >\n              {this.label}\n            </div>\n\n            {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n              <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n                <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n              </div>\n            )}\n          </div>\n\n          {(this.helpText || this.maxLength) && !this.disabled && (\n            <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n              {this.helpText && (\n                <div\n                  id=\"textfield-help-text\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.helpText}\n                </div>\n              )}\n              {this.maxLength && (\n                <div\n                  id=\"max-length-container\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"sula-textfield.js","mappings":";;;;AAAA,IAAY,iBAGX;AAHD,CAAA,UAAY,iBAAiB,EAAA;AAC3B,IAAA,iBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACvB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,GAG5B,EAAA,CAAA,CAAA;AAED,IAAY,mBAGX;AAHD,CAAA,UAAY,mBAAmB,EAAA;AAC7B,IAAA,mBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,mBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,GAG9B,EAAA,CAAA,CAAA;;;;;;;;;;;;ACRD,EAAA,CAAC,SAAS,IAAI,EAAE,OAAO,EAAE;IAGiB;MACtC,MAAA,CAAA,OAAA,GAAiB,OAAO,EAAE;AAC9B;GAGC,CAACA,aAAI,EAAE,WAAW;IACjB,IAAI,KAAK,GAAG,GAAG;QACX,KAAK,GAAG,GAAG;QACX,QAAQ,GAAG,GAAG;QACd,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACpE,QAAM,gBAAgB,GAAG,SAAS,OAAO,EAAE;AAC3C,UAAQ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;AACjE,YAAU,IAAI,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,EAAE;AAC1C,cAAY,OAAO,KAAK;AACxB;AACA;AACA,UAAQ,OAAO,IAAI;SACZ;AACP,QAAM,iBAAiB,GAAG,SAAS,IAAI,EAAE;AACzC,UAAQ,IAAI,GAAG,IAAI,IAAI,EAAE;AACzB,UAAQ,IAAI,GAAG;AACf,YAAU,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,GAAG;AAC1C,YAAU,UAAU,EAAE,IAAI,CAAC,UAAU;AACrC,YAAU,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC;AAC1E,YAAU,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,GAAG;AAC1C,YAAU,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,UAAU,EAAE,IAAI,CAAC,UAAU,KAAK,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE;YAChF,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,IAAI,EAAE;YAC9D,SAAS,EAAE,IAAI,CAAC;WACjB;AACT,UAAQ,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS;AACjE,UAAQ,OAAO,IAAI;SACZ;AACP;QACM,uBAAuB,GAAG,SAAS,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE;UAC7D,OAAO,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACrC,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,QAAQ,EAAE;AAC/F,cAAY,MAAM,CAAC,KAAK,CAAC,GAAG,WAAW;AACvC;AACA;AACA,UAAQ,OAAO,MAAM;AACrB;AACA;;AAEA,IAAE,IAAI,aAAa,GAAG,SAAS,QAAQ,EAAE;AACzC,MAAI,IAAI,CAAC,QAAQ,GAAG,QAAQ;KACzB;;AAEH,IAAE,aAAa,CAAC,SAAS,CAAC,mBAAmB,GAAG,WAAW;MACvD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;QACxD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,EAAE;QAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,KAAK;QAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,KAAK;;QAElC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;UACjC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AAC1E;AACA;KACG;;IAED,aAAa,CAAC,SAAS,CAAC,iBAAiB,GAAG,SAAS,YAAY,EAAE;MACjE,IAAI,IAAI,GAAG,IAAI;AACnB,UAAQ,MAAM,GAAG,SAAS,CAAC,EAAE;AAC7B,YAAU,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,KAAK;YACrB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,UAAU;;AAE/C,YAAU,IAAI,gBAAgB,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE;cAC/B,UAAU,CAAC,WAAW;gBACpB,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU;AACtD,gBAAc,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;AAC3E,gBAAc,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK;gBAChC,IAAI,MAAM,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;kBACpD,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE;AAClH;eACa,EAAE,CAAC,CAAC;AACjB;AACA;AACA;MACI,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;QACxD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,EAAE;QAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,MAAM;QACjC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE;UACjC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC;AACzF;AACA;KACG;;IAED,aAAa,CAAC,SAAS,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AACrD,MAAI,IAAI,CAAC,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AACvC,MAAI,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC;KAClC;;AAEH,IAAE,aAAa,CAAC,SAAS,CAAC,UAAU,GAAG,WAAW;AAClD,MAAI,IAAI,CAAC,IAAI,GAAG,EAAE;AAClB,MAAI,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;KACnC;AACH;AACA,IAAE,aAAa,CAAC,SAAS,CAAC,YAAY,GAAG,WAAW;AACpD,MAAI,IAAI,CAAC,IAAI,GAAG,EAAE;AAClB,MAAI,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;KACzC;;IAED,aAAa,CAAC,SAAS,CAAC,WAAW,GAAG,SAAS,OAAO,EAAE;MACtD,IAAI,CAAC,IAAI,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC;AAClC,MAAI,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;KACpC;;AAEH,IAAE,aAAa,CAAC,SAAS,CAAC,MAAM,GAAG,WAAW;MAC1C,IAAI,CAAC,mBAAmB,EAAE;KAC3B;;AAEH,IAAE,IAAI,OAAO,GAAG,SAAS,EAAE,EAAE;MACzB,IAAI,CAAC,EAAE,EAAE;AACb,QAAM,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC;AACpE;AACA,MAAI,IAAI,QAAQ,GAAG,CAAC,QAAQ,IAAI,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC;AAClE,MAAI,OAAO,IAAI,aAAa,CAAC,QAAQ,CAAC;KACnC;;IAED,OAAO,CAAC,OAAO,GAAG,SAAS,KAAK,EAAE,IAAI,EAAE;AAC1C,MAAI,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;AAClC,MAAI,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,EAAE;AAC7C,QAAM,IAAI,WAAW,IAAI,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;YACnE,UAAU,GAAG,IAAI,MAAM,CAAC,WAAW,EAAE,GAAG,CAAC;AACnD,YAAU,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC;AAC1E,YAAU,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,MAAM,IAAI;AACtF;AACA,QAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC;AACtD,QAAM,IAAI,YAAY,GAAG,eAAe,EAAE;AAC1C,UAAQ,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAChD;AACA;AACA,MAAI,IAAI,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;AACtD,UAAQ,cAAc,GAAG,IAAI,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC;AAClE,UAAQ,cAAc,GAAG,IAAI,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC;AAChE,UAAQ,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC;AACrE,UAAQ,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAClD,UAAQ,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG;AACtD;AACA,MAAI,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC;AACxD,MAAI,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;AACtD,QAAM,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AACvB,UAAQ,MAAM,IAAI,IAAI,CAAC,SAAS;AAChC;AACA,QAAM,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC;AACxB;MACI,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;MAC3C,MAAM,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG;MACrC,IAAI,MAAM,GAAG,EAAE;AACnB,MAAI,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE;QAC3B,MAAM,GAAG,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,EAAE;AACnF;AACA,MAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,IAAI,UAAU,GAAG,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS;YAC3C,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC;AAChE,YAAU,WAAW,GAAG,UAAU,CAAC,MAAM;AACzC,YAAU,WAAW,GAAG,CAAC,IAAI,CAAC,SAAS,GAAG,WAAW,IAAI,IAAI,CAAC,SAAS,GAAG;AAC1E;QACM,KAAK,GAAG,CAAC,KAAK,GAAG,UAAU,EAAE,KAAK,CAAC,CAAC,WAAW,CAAC;AACtD;AACA,MAAI,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,KAAK;AACrE,MAAI,OAAO,MAAM,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU;KAC5D;;IAED,OAAO,CAAC,SAAS,GAAG,SAAS,KAAK,EAAE,IAAI,EAAE;AAC5C,MAAI,IAAI,OAAO,IAAI,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;UAC1D,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;AACjD,UAAQ,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;AAClC,UAAQ,MAAM,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;UAC5C,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;UACvC,KAAK,GAAG,CAAC;AACjB,UAAQ,CAAC;AACT,UAAQ,YAAY,GAAG,MAAM,CAAC,MAAM;UAC5B,WAAW,IAAI,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS;AAC9E;AACA;MACI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,EAAE,CAAC,EAAE,EAAE;AACvC;AACA,QAAM,IAAI,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE;UAC1B,IAAI,YAAY,CAAC,MAAM,IAAI,WAAW,CAAC,MAAM,EAAE;AACvD,YAAU,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;AAChC;AACA,eAAa,IAAI,CAAC,WAAW,KAAK,SAAS,MAAM,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,EAAE;AAC5F,YAAU,OAAO,uBAAuB,CAAC,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AACzE;eACa;YACH;AACV;AACA;AACA;aACU;AACV,UAAQ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;AAChE,eAAa,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;AACpE,eAAa,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,EAAE;YAClE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;WAC5B,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,EAAE;AACzF,YAAU,GAAG,WAAW,KAAK,SAAS,CAAC;AACvC,cAAY,OAAO,uBAAuB,CAAC,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E;iBACc;AACd,cAAY,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC9C;AACA;AACA;AACA;AACA,MAAI,OAAO,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;KACpC;;AAEH,IAAE,OAAO,CAAC,QAAQ,GAAG,SAAS,KAAK,EAAE;MACjC,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC;KACrD;AACH;AACA,IAAE,OAAO,CAAC,cAAc,GAAG,SAAS,KAAK,EAAE;MACvC,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC;KACpD;;AAEH,IAAE,OAAO,OAAO;AAChB,GAAC,CAAC,EAAA;;;;;;;;AC7NF,MAAM,gBAAgB,GAAG,40UAA40U;;MCSx1UC,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;;;;AAYE;;AAEG;AACK,QAAA,IAAA,CAAA,IAAI,GAAsB,iBAAiB,CAAC,IAAI;AAExD;;AAEG;AACsB,QAAA,IAAA,CAAA,MAAM,GAAwB,mBAAmB,CAAC,OAAO;AA2DlF,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAGnB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AAGtB,QAAA,IAAY,CAAA,YAAA,GAAG,KAAK;AAGpB,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AA6DtB,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AAC1B,SAAC;AAoBD,QAAA,IAAA,CAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;YACzC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EAAE;gBACzC,IAAI,CAAC,eAAe,EAAE;;AAExB,YAAA,MAAM,QAAQ,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK;AACzD,YAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AAErB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;AAClC,SAAC;AAED,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;YACjB,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;AACxB,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3B,SAAC;AAED,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AAChB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AAEzB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;AAC7B,SAAC;AAED,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AACtB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAC5B,SAAC;AAED,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YACtC,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,QAAQ,EAAE;gBAC5C,KAAK,CAAC,eAAe,EAAE;gBACvB,IAAI,CAAC,yBAAyB,EAAE;;AAEpC,SAAC;AAqGF;AAvNC,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AAChC,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AAEzB,QAAA,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,KAAK,QAAQ,EAAE;AAC7D,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc;YACvD,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,IAAI,EAAE;YAExC,IAAI,IAAI,CAAC,cAAc,IAAI,cAAc,KAAK,IAAI,EAAE;AAClD,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,QAAQ,IAAI,EAAE,EAAE,MAAM,CAAC;gBACrE,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,WAAW,EAAE,WAAW,CAAC;;;QAIjE,IAAI,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1C,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;YACvB,IAAI,CAAC,mBAAmB,EAAE;;AACrB,aAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;AAC/B,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;YACxB,IAAI,CAAC,mBAAmB,EAAE;;;AAW9B,IAAA,WAAW,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE;AAExC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;QAE5D,IAAI,CAAC,WAAW,EAAE;AAChB,YAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AACzB,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACtB,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;;IAI/B,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;AAC3B,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;;;IAI3B,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACtD,IAAI,CAAC,mBAAmB,EAAE;;QAG5B,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,EAAE;YACzC,IAAI,CAAC,eAAe,EAAE;;;AAQ1B,IAAA,aAAa,CAAC,WAAoB,EAAA;QAChC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAAK,IAAI,CAAC,QAAQ;YAAE;AAExF,QAAA,IAAI,CAAC,WAAW,GAAG,WAAW;QAC9B,IAAI,CAAC,mBAAmB,EAAE;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;;IAG3B,mBAAmB,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;AAEhD,QAAA,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,MAAM;AACtE,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,OAAO;AACrE,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC;;;IAwC9C,eAAe,GAAA;AACb,QAAA,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;;IAG1D,yBAAyB,GAAA;AACvB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc;AACvD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK;AAC1C,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,GAAG,iBAAiB,CAAC,QAAQ,GAAG,iBAAiB,CAAC,IAAI;QAEzF,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC;AACjD,QAAA,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY;QAEtC,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,UAAU;YAEpC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAAC;SACpE,EAAE,CAAC,CAAC;;IAGP,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,QAAQ,EAAE;YAC5C,OAAO,IAAI,CAAC,YAAY,GAAG,WAAW,GAAG,iBAAiB;;QAG5D,OAAO,IAAI,CAAC,IAAI;;IAGlB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAA,EACnC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAE;AACL,gBAAA,qFAAqF,EAAE,IAAI;AAC3F,gBAAA,0BAA0B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,QAAQ;AACnF,gBAAA,cAAc,EAAE,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,OAAO;AACpG,gBAAA,cAAc,EAAE,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAC3E,8DAA8D,EAAE,IAAI,CAAC,QAAQ;AAC7E,gBAAA,kDAAkD,EAAE,CAAC,IAAI,CAAC,QAAQ;aACnE,EACD,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAE7B,CAAC,IAAI,CAAC,QAAQ,KACb,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,EAAA,EAC7G,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,+CAA+C,IAAE,IAAI,CAAC,KAAK,CAAS,EACjF,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EACvC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAC,yDAAyD,EAC/D,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,CAAA,CACE,CACP,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAE,EAAE,6BAA6B,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,oBAAoB,EAAE,IAAI,CAAC,QAAQ,EAAE,EACxH,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAEtC,IAAI,CAAC,KAAK,CACP,EAEL,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,iBAAiB,CAAC,QAAQ,MACvD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,kCAAkC,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAA,EACzE,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,WAAW,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,mBAAmB,CAAE,CAAA,EAAA,CAAI,CAC3H,CACP,CACG,EAEL,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,CAAC,IAAI,CAAC,QAAQ,KAClD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sDAAsD,EAAA,EAC9D,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAC,qBAAqB,EACxB,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,KAAK,EAAE,EAAA,EAE5I,IAAI,CAAC,QAAQ,CACV,CACP,EACA,IAAI,CAAC,SAAS,KACb,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,sBAAsB,EACzB,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,OAAO,EAAE,qBAAqB,EAAE,IAAI,CAAC,MAAM,KAAK,mBAAmB,CAAC,KAAK,EAAE,EAAA,EAE5I,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,OAAG,IAAI,CAAC,SAAS,CACxD,CACP,CACG,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["this","SulaTextfield","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/sula-textfield/model/sula-textfield.model.ts","node_modules/.pnpm/vanilla-masker@1.2.0/node_modules/vanilla-masker/lib/vanilla-masker.js","src/components/sula-textfield/sula-textfield.scss?tag=sula-textfield&encapsulation=shadow","src/components/sula-textfield/sula-textfield.tsx"],"sourcesContent":["export enum SulaTextfieldType {\n  Text = 'text',\n  Password = 'password',\n}\n\nexport enum SulaTextfieldStatus {\n  Default = 'default',\n  Error = 'error',\n}\n","(function(root, factory) {\n  if (typeof define === 'function' && define.amd) {\n    define(factory);\n  } else if (typeof exports === 'object') {\n    module.exports = factory();\n  } else {\n    root.VMasker = factory();\n  }\n}(this, function() {\n  var DIGIT = \"9\",\n      ALPHA = \"A\",\n      ALPHANUM = \"S\",\n      BY_PASS_KEYS = [9, 16, 17, 18, 36, 37, 38, 39, 40, 91, 92, 93],\n      isAllowedKeyCode = function(keyCode) {\n        for (var i = 0, len = BY_PASS_KEYS.length; i < len; i++) {\n          if (keyCode == BY_PASS_KEYS[i]) {\n            return false;\n          }\n        }\n        return true;\n      },\n      mergeMoneyOptions = function(opts) {\n        opts = opts || {};\n        opts = {\n          delimiter: opts.delimiter || \".\",\n          lastOutput: opts.lastOutput,\n          precision: opts.hasOwnProperty(\"precision\") ? opts.precision : 2,\n          separator: opts.separator || \",\",\n          showSignal: opts.showSignal,\n          suffixUnit: opts.suffixUnit && (\" \" + opts.suffixUnit.replace(/[\\s]/g,'')) || \"\",\n          unit: opts.unit && (opts.unit.replace(/[\\s]/g,'') + \" \") || \"\",\n          zeroCents: opts.zeroCents\n        };\n        opts.moneyPrecision = opts.zeroCents ? 0 : opts.precision;\n        return opts;\n      },\n      // Fill wildcards past index in output with placeholder\n      addPlaceholdersToOutput = function(output, index, placeholder) {\n        for (; index < output.length; index++) {\n          if(output[index] === DIGIT || output[index] === ALPHA || output[index] === ALPHANUM) {\n            output[index] = placeholder;\n          }\n        }\n        return output;\n      }\n  ;\n\n  var VanillaMasker = function(elements) {\n    this.elements = elements;\n  };\n\n  VanillaMasker.prototype.unbindElementToMask = function() {\n    for (var i = 0, len = this.elements.length; i < len; i++) {\n      this.elements[i].lastOutput = \"\";\n      this.elements[i].onkeyup = false;\n      this.elements[i].onkeydown = false;\n\n      if (this.elements[i].value.length) {\n        this.elements[i].value = this.elements[i].value.replace(/\\D/g, '');\n      }\n    }\n  };\n\n  VanillaMasker.prototype.bindElementToMask = function(maskFunction) {\n    var that = this,\n        onType = function(e) {\n          e = e || window.event;\n          var source = e.target || e.srcElement;\n\n          if (isAllowedKeyCode(e.keyCode)) {\n            setTimeout(function() {\n              that.opts.lastOutput = source.lastOutput;\n              source.value = VMasker[maskFunction](source.value, that.opts);\n              source.lastOutput = source.value;\n              if (source.setSelectionRange && that.opts.suffixUnit) {\n                source.setSelectionRange(source.value.length, (source.value.length - that.opts.suffixUnit.length));\n              }\n            }, 0);\n          }\n        }\n    ;\n    for (var i = 0, len = this.elements.length; i < len; i++) {\n      this.elements[i].lastOutput = \"\";\n      this.elements[i].onkeyup = onType;\n      if (this.elements[i].value.length) {\n        this.elements[i].value = VMasker[maskFunction](this.elements[i].value, this.opts);\n      }\n    }\n  };\n\n  VanillaMasker.prototype.maskMoney = function(opts) {\n    this.opts = mergeMoneyOptions(opts);\n    this.bindElementToMask(\"toMoney\");\n  };\n\n  VanillaMasker.prototype.maskNumber = function() {\n    this.opts = {};\n    this.bindElementToMask(\"toNumber\");\n  };\n  \n  VanillaMasker.prototype.maskAlphaNum = function() {\n    this.opts = {};\n    this.bindElementToMask(\"toAlphaNumeric\");\n  };\n\n  VanillaMasker.prototype.maskPattern = function(pattern) {\n    this.opts = {pattern: pattern};\n    this.bindElementToMask(\"toPattern\");\n  };\n\n  VanillaMasker.prototype.unMask = function() {\n    this.unbindElementToMask();\n  };\n\n  var VMasker = function(el) {\n    if (!el) {\n      throw new Error(\"VanillaMasker: There is no element to bind.\");\n    }\n    var elements = (\"length\" in el) ? (el.length ? el : []) : [el];\n    return new VanillaMasker(elements);\n  };\n\n  VMasker.toMoney = function(value, opts) {\n    opts = mergeMoneyOptions(opts);\n    if (opts.zeroCents) {\n      opts.lastOutput = opts.lastOutput || \"\";\n      var zeroMatcher = (\"(\"+ opts.separator +\"[0]{0,\"+ opts.precision +\"})\"),\n          zeroRegExp = new RegExp(zeroMatcher, \"g\"),\n          digitsLength = value.toString().replace(/[\\D]/g, \"\").length || 0,\n          lastDigitLength = opts.lastOutput.toString().replace(/[\\D]/g, \"\").length || 0\n      ;\n      value = value.toString().replace(zeroRegExp, \"\");\n      if (digitsLength < lastDigitLength) {\n        value = value.slice(0, value.length - 1);\n      }\n    }\n    var number = value.toString().replace(/[\\D]/g, \"\"),\n        clearDelimiter = new RegExp(\"^(0|\\\\\"+ opts.delimiter +\")\"),\n        clearSeparator = new RegExp(\"(\\\\\"+ opts.separator +\")$\"),\n        money = number.substr(0, number.length - opts.moneyPrecision),\n        masked = money.substr(0, money.length % 3),\n        cents = new Array(opts.precision + 1).join(\"0\")\n    ;\n    money = money.substr(money.length % 3, money.length);\n    for (var i = 0, len = money.length; i < len; i++) {\n      if (i % 3 === 0) {\n        masked += opts.delimiter;\n      }\n      masked += money[i];\n    }\n    masked = masked.replace(clearDelimiter, \"\");\n    masked = masked.length ? masked : \"0\";\n    var signal = \"\";\n    if(opts.showSignal === true) {\n      signal = value < 0 || (value.startsWith && value.startsWith('-')) ? \"-\" :  \"\";\n    }\n    if (!opts.zeroCents) {\n      var beginCents = number.length - opts.precision,\n          centsValue = number.substr(beginCents, opts.precision),\n          centsLength = centsValue.length,\n          centsSliced = (opts.precision > centsLength) ? opts.precision : centsLength\n      ;\n      cents = (cents + centsValue).slice(-centsSliced);\n    }\n    var output = opts.unit + signal + masked + opts.separator + cents;\n    return output.replace(clearSeparator, \"\") + opts.suffixUnit;\n  };\n\n  VMasker.toPattern = function(value, opts) {\n    var pattern = (typeof opts === 'object' ? opts.pattern : opts),\n        patternChars = pattern.replace(/\\W/g, ''),\n        output = pattern.split(\"\"),\n        values = value.toString().replace(/\\W/g, \"\"),\n        charsValues = values.replace(/\\W/g, ''),\n        index = 0,\n        i,\n        outputLength = output.length,\n        placeholder = (typeof opts === 'object' ? opts.placeholder : undefined)\n    ;\n    \n    for (i = 0; i < outputLength; i++) {\n      // Reached the end of input\n      if (index >= values.length) {\n        if (patternChars.length == charsValues.length) {\n          return output.join(\"\");\n        }\n        else if ((placeholder !== undefined) && (patternChars.length > charsValues.length)) {\n          return addPlaceholdersToOutput(output, i, placeholder).join(\"\");\n        }\n        else {\n          break;\n        }\n      }\n      // Remaining chars in input\n      else{\n        if ((output[i] === DIGIT && values[index].match(/[0-9]/)) ||\n            (output[i] === ALPHA && values[index].match(/[a-zA-Z]/)) ||\n            (output[i] === ALPHANUM && values[index].match(/[0-9a-zA-Z]/))) {\n          output[i] = values[index++];\n        } else if (output[i] === DIGIT || output[i] === ALPHA || output[i] === ALPHANUM) {\n          if(placeholder !== undefined){\n            return addPlaceholdersToOutput(output, i, placeholder).join(\"\");\n          }\n          else{\n            return output.slice(0, i).join(\"\");\n          }\n        }\n      }\n    }\n    return output.join(\"\").substr(0, i);\n  };\n\n  VMasker.toNumber = function(value) {\n    return value.toString().replace(/(?!^-)[^0-9]/g, \"\");\n  };\n  \n  VMasker.toAlphaNumeric = function(value) {\n    return value.toString().replace(/[^a-z0-9 ]+/i, \"\");\n  };\n\n  return VMasker;\n}));\n",":host {\n  display: block;\n}\n\n.button-focus {\n  outline: 2px solid var(--color-feedback-informational) !important;\n  outline-offset: 2px !important;\n}\n\n.button-error {\n  outline: 2px solid var(--color-feedback-error) !important;\n  outline-offset: 2px !important;\n}\n\n.from-down {\n  animation: from-down 0.2s ease-in-out;\n}\n\n.from-up {\n  animation: from-up 0.2s ease-in-out;\n}\n\n@keyframes from-down {\n  from {\n    transform: translateY(75%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n@keyframes from-up {\n  from {\n    transform: translateY(-75%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n","import { Component, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\nimport VMasker from 'vanilla-masker';\n\n@Component({\n  tag: 'sula-textfield',\n  styleUrl: 'sula-textfield.scss',\n  shadow: true,\n})\nexport class SulaTextfield {\n  /**\n   * Value for the input.\n   */\n  @Prop({ mutable: true })\n  value?: string;\n\n  /**\n   * The textfield type\n   */\n  @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n  /**\n   * The textfield status\n   */\n  @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n  /**\n   * The textfield label\n   */\n  @Prop() label: string;\n\n  /**\n   * The textfield placeholder\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The textfield is disabled\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n\n  /**\n   * The help text for textfield\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * The textfield max length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The textfield icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Event emitted when input value changes.\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * The textfield mask pattern\n   * The mask pattern should follow the VMasker pattern format\n   * More info: https://github.com/vanilla-masker/vanilla-masker?tab=readme-ov-file#custom-pattern\n   */\n  @Prop()\n  maskPattern?: string;\n\n  /**\n   * Event emitted when input is focused.\n   */\n  @Event()\n  focusedOn: EventEmitter<void>;\n\n  /**\n   * Event emitted when input is focused out.\n   */\n  @Event()\n  focusedOut: EventEmitter<void>;\n\n  @State()\n  inputIsOpen = false;\n\n  @State()\n  textValue: string = '';\n\n  @State()\n  showPassword = false;\n\n  @State()\n  inputIsFocused = false;\n\n  @Watch('value')\n  watchValueHandler(newValue: string) {\n    this.textValue = newValue;\n\n    if (this.inputElement && this.inputElement.value !== newValue) {\n      const cursorPosition = this.inputElement.selectionStart;\n      this.inputElement.value = newValue || '';\n\n      if (this.inputIsFocused && cursorPosition !== null) {\n        const newPosition = Math.min(cursorPosition, (newValue || '').length);\n        this.inputElement.setSelectionRange(newPosition, newPosition);\n      }\n    }\n\n    if (newValue && newValue.trim().length > 0) {\n      this.inputIsOpen = true;\n      this.changeElementsStyle();\n    } else if (!this.inputIsFocused) {\n      this.inputIsOpen = false;\n      this.changeElementsStyle();\n    }\n  }\n\n  inputContainer: HTMLDivElement;\n  inputElement: HTMLInputElement;\n  labelElement: HTMLDivElement;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleClick(event: Event) {\n    if (!this.node || !this.inputIsFocused) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.toggleOptions(false);\n      this.focusedOut.emit();\n      this.inputIsFocused = false;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.trim().length > 0) {\n      this.textValue = this.value;\n      this.inputIsOpen = true;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.textValue && this.textValue.trim().length > 0) {\n      this.changeElementsStyle();\n    }\n\n    if (this.maskPattern && this.inputElement) {\n      this.handleInputMask();\n    }\n  }\n\n  handleInputClick = () => {\n    this.toggleOptions(true);\n  };\n\n  toggleOptions(inputIsOpen: boolean) {\n    if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n    this.inputIsOpen = inputIsOpen;\n    this.changeElementsStyle();\n    this.inputElement.focus();\n  }\n\n  changeElementsStyle() {\n    if (!this.inputContainer || !this.labelElement) return;\n\n    this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n    this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n    if (!this.inputIsOpen) {\n      this.labelElement.classList.add('from-up');\n    }\n  }\n\n  handleInputChanges = (event: InputEvent) => {\n    if (this.maskPattern && this.inputElement) {\n      this.handleInputMask();\n    }\n    const newValue = (event.target as HTMLInputElement).value;\n    this.textValue = newValue;\n    this.value = newValue;\n\n    this.valueChanged.emit(newValue);\n  };\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.toggleOptions(true);\n    this.inputElement.focus();\n  };\n\n  handleBlur = () => {\n    this.toggleOptions(false);\n\n    this.focusedOut.emit();\n    this.inputIsFocused = false;\n  };\n\n  handleInputFocus = () => {\n    this.focusedOn.emit();\n    this.inputIsFocused = true;\n  };\n\n  handleIconClick = (event: MouseEvent) => {\n    if (this.type === SulaTextfieldType.Password) {\n      event.stopPropagation();\n      this.handlePasswordIconClicked();\n    }\n  };\n\n  handleInputMask() {\n    VMasker(this.inputElement).maskPattern(this.maskPattern);\n  }\n\n  handlePasswordIconClicked() {\n    const cursorPosition = this.inputElement.selectionStart;\n    const inputValue = this.inputElement.value;\n    const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n    this.inputElement.setAttribute('type', inputType);\n    this.showPassword = !this.showPassword;\n\n    setTimeout(() => {\n      this.inputElement.value = inputValue;\n\n      this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n    }, 0);\n  }\n\n  getInputIcon() {\n    if (this.type === SulaTextfieldType.Password) {\n      return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n    }\n\n    return this.icon;\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div>\n          <div\n            id=\"button-container\"\n            class={{\n              'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n              'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n              'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n              'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n              'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n              'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n            }}\n            tabIndex={0}\n            onFocus={this.handleFocus}\n            onClick={this.handleInputClick}\n          >\n            {!this.disabled && (\n              <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n                <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n                <input\n                  type={this.type}\n                  ref={node => (this.inputElement = node)}\n                  placeholder={this.placeholder}\n                  class=\"outline-none text-base text-text-primary bg-transparent\"\n                  onInput={this.handleInputChanges}\n                  onFocus={this.handleInputFocus}\n                  value={this.textValue}\n                />\n              </div>\n            )}\n\n            <div\n              id=\"textfield-label\"\n              class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n              ref={node => (this.labelElement = node)}\n            >\n              {this.label}\n            </div>\n\n            {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n              <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n                <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n              </div>\n            )}\n          </div>\n\n          {(this.helpText || this.maxLength) && !this.disabled && (\n            <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n              {this.helpText && (\n                <div\n                  id=\"textfield-help-text\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.helpText}\n                </div>\n              )}\n              {this.maxLength && (\n                <div\n                  id=\"max-length-container\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/sula-tiles.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTilesType;
 (function (SulaTilesType) {
@@ -139,7 +139,7 @@ const SulaTiles$1 = /*@__PURE__*/ proxyCustomElement(class SulaTiles extends H {
         return (h("div", { class: this.getTextContainerClasses() }, h("span", { class: this.getTextClasses(true), title: this.ellipsis ? this.text : undefined }, this.text), this.hasSubText && (h("span", { class: this.getTextClasses(false), title: this.ellipsis ? this.subText : undefined }, this.subText))));
     }
     render() {
-        return (h(Host, { key: 'bd93893ff89e978258ceb3621a260b305de320f5' }, h("div", { key: '661f7050d9a816aa3437e2d1c0de179cfb9d605d', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
+        return (h(Host, { key: '32ee3b19743f75052428014a010545e4a6c9098b' }, h("div", { key: '09384829c191d1ec6518e0ccbc3ac4c290e1e798', class: this.getContainerClasses(), tabIndex: this.getTabIndex(this.isSquare), onClick: this.handleClick }, this.renderIcon(), this.renderText())));
     }
     static get style() { return sulaTilesCss; }
 }, [1, "sula-tiles", {

package/dist/components/sula-timeline-list.js

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-BrY8WoEl.js';
+import { d as defineCustomElement$2 } from './p-ff6chV3i.js';
 
 var SulaTimelineListItemIconStatus;
 (function (SulaTimelineListItemIconStatus) {
@@ -51,7 +51,7 @@ const SulaTimelineList$1 = /*@__PURE__*/ proxyCustomElement(class SulaTimelineLi
         return iconByStatus[status];
     }
     render() {
-        return (h(Host, { key: 'be18bb7bcb5cff8b45b1dc33fe9f4a14b6e21d5e' }, h("div", { key: '1a2bd5e50d78223c0ef3824beef028b0d6b8fa27', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
+        return (h(Host, { key: '61a3d229e04aa2935ef1d03fca3aa519aa21d13b' }, h("div", { key: 'cd8c1483e94ea8f8cf2e0c51e400528f83fcf9f5', class: "flex flex-col bg-surface-on-body px-24 py-32 w-fit rounded-md" }, this.sulaTimelineList.map((item, index) => {
             const isLastItem = index === this.sulaTimelineList.length - 1;
             return (h("div", { class: {
                     'relative timeline-item': true,

package/dist/esm/{index-or7qTZgT.js → index-CrFclBiX.js}

@@ -784,10 +784,17 @@ var insertBefore = (parent, newNode, reference) => {
 };
 var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const hostElm = hostRef.$hostElement$;
+  const cmpMeta = hostRef.$cmpMeta$;
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const isHostElement = isHost(renderFnResults);
   const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1143,8 +1150,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1334,6 +1345,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }
@@ -1469,6 +1483,6 @@ var hostListenerOpts = (flags) => supportsListenerOptions ? {
 var setNonce = (nonce) => plt.$nonce$ = nonce;
 
 export { Host as H, getElement as a, bootstrapLazy as b, createEvent as c, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-or7qTZgT.js.map
+//# sourceMappingURL=index-CrFclBiX.js.map
 
-//# sourceMappingURL=index-or7qTZgT.js.map
+//# sourceMappingURL=index-CrFclBiX.js.map