@maggioli-design-system/mds-input 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3aa055da.js');
+
+/*
+ Stencil Client Patch Esm v2.12.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["mds-input.cjs",[[1,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/mds-input.cjs.entry.js

@@ -0,0 +1,162 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3aa055da.js');
+
+function toVal(mix) {
+	var k, y, str='';
+
+	if (typeof mix === 'string' || typeof mix === 'number') {
+		str += mix;
+	} else if (typeof mix === 'object') {
+		if (Array.isArray(mix)) {
+			for (k=0; k < mix.length; k++) {
+				if (mix[k]) {
+					if (y = toVal(mix[k])) {
+						str && (str += ' ');
+						str += y;
+					}
+				}
+			}
+		} else {
+			for (k in mix) {
+				if (mix[k]) {
+					str && (str += ' ');
+					str += k;
+				}
+			}
+		}
+	}
+
+	return str;
+}
+
+function clsx () {
+	var i=0, tmp, x, str='';
+	while (i < arguments.length) {
+		if (tmp = arguments[i++]) {
+			if (x = toVal(tmp)) {
+				str && (str += ' ');
+				str += x;
+			}
+		}
+	}
+	return str;
+}
+
+const mdsInputCss = "*,::before,::after{--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:rgb(59 130 246 / 0.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;}@tailwind utilities; :host{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;display:-ms-flexbox;display:flex}.input{font-family:Karla, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Helvetica Neue', sans-serif;font-size:1rem;line-height:1.5rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0px;-webkit-box-sizing:border-box;box-sizing:border-box;min-height:3rem;width:100%;overflow:hidden;text-overflow:ellipsis;border-radius:0.5rem;border-style:none;border-color:transparent;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;--tw-text-opacity:1;color:rgba(var(--adjust-tone-02), var(--tw-text-opacity));--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-color:rgba(var(--adjust-tone-02), var(--tw-ring-opacity));--tw-ring-opacity:0.1;-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);background-color:var(--background, rgb(var(--adjust-tone)))}textarea.input:active{-webkit-transition-property:none;transition-property:none}textarea.input{max-height:16rem;min-height:6rem;border-bottom-right-radius:0px}.input:focus{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow-color:rgba(var(--brand-maggioli-04), 0.5);--tw-shadow:var(--tw-shadow-colored);outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--brand-maggioli-04), var(--tw-ring-opacity));-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}.input:disabled{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-10), var(--tw-bg-opacity))}.input:disabled::-moz-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled:-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled::-webkit-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled::-ms-input-placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input:disabled,.input:disabled::placeholder{--tw-text-opacity:1;color:rgba(var(--adjust-tone-05), var(--tw-text-opacity))}.input.has-icon{padding-left:2.75rem}.tip,.tip-variant{pointer-events:none;position:absolute;right:0.25rem;height:0.75rem;-ms-flex-pack:center;justify-content:center;border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;text-align:center;--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity));-webkit-transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-duration:300ms;transition-duration:300ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);line-height:0.75rem}.read-only{--tw-bg-opacity:1;background-color:rgba(var(--status-info-05), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--status-info-09), var(--tw-text-opacity))}.required{width:0.75rem;--tw-bg-opacity:1;background-color:rgba(var(--status-error-05), var(--tw-bg-opacity));padding:0px;color:rgba(var(--adjust-tone), var(--tw-text-opacity));--tw-text-opacity:0}.disabled{--tw-bg-opacity:1;background-color:rgba(var(--adjust-tone-05), var(--tw-bg-opacity))}.input:focus+.required{width:6rem;--tw-text-opacity:1}.icon{position:absolute;left:0.75rem;top:0.75rem;--tw-text-opacity:1;color:rgba(var(--brand-maggioli-04), var(--tw-text-opacity))}.top-1{top:0.25rem}.bottom-1{bottom:0.25rem}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([variant=info]) .input:focus{--tw-shadow-color:rgba(var(--status-info-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-info-06), var(--tw-ring-opacity))}:host([variant=info]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-info-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=info]) .icon{--tw-text-opacity:1;color:rgba(var(--status-info-06), var(--tw-text-opacity))}:host([variant=success]) .input:focus{--tw-shadow-color:rgba(var(--status-success-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-success-06), var(--tw-ring-opacity))}:host([variant=success]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-success-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=success]) .icon{--tw-text-opacity:1;color:rgba(var(--status-success-06), var(--tw-text-opacity))}:host([variant=warning]) .input:focus{--tw-shadow-color:rgba(var(--status-warning-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-warning-06), var(--tw-ring-opacity))}:host([variant=warning]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-warning-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=warning]) .icon{--tw-text-opacity:1;color:rgba(var(--status-warning-06), var(--tw-text-opacity))}:host([variant=error]) .input:focus{--tw-shadow-color:rgba(var(--status-error-06), 0.5);--tw-shadow:var(--tw-shadow-colored);--tw-ring-opacity:1;--tw-ring-color:rgba(var(--status-error-06), var(--tw-ring-opacity))}:host([variant=error]) .tip-variant{--tw-bg-opacity:1;background-color:rgba(var(--status-error-06), var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(var(--adjust-tone), var(--tw-text-opacity))}:host([variant=error]) .icon{--tw-text-opacity:1;color:rgba(var(--status-error-06), var(--tw-text-opacity))}";
+
+let MdsInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.changeEvent = index.createEvent(this, "changeEvent", 7);
+    this.keyDownEvent = index.createEvent(this, "keyDownEvent", 7);
+    this.blurEvent = index.createEvent(this, "blurEvent", 7);
+    this.focusEvent = index.createEvent(this, "focusEvent", 7);
+    this.hasFocus = false;
+    /**
+     * Specifies whether the element should have autocomplete enabled
+     */
+    this.autocomplete = 'off';
+    /**
+     * Specifies that the element should automatically get focus when the page loads
+     */
+    this.autofocus = false;
+    /**
+     * If true, the element is displayed as disabled
+     */
+    this.disabled = false;
+    /**
+     * Specifies that the element is read-only
+     */
+    this.readonly = false;
+    /**
+     * Specifies that the element must be filled out before submitting the form
+     */
+    this.required = false;
+    /**
+     * Specifies the type of input element
+     */
+    this.type = 'text';
+    /**
+     * Specifies the value of the input element
+     */
+    this.value = '';
+    this.onInput = (ev) => {
+      const input = ev.target;
+      if (input) {
+        this.value = input.value || '';
+      }
+      this.keyDownEvent.emit(ev);
+    };
+    this.onBlur = () => {
+      this.hasFocus = false;
+      this.blurEvent.emit();
+    };
+    this.onFocus = (ev) => {
+      const input = ev.target;
+      this.hasFocus = true;
+      this.focusEvent.emit();
+      if (this.readonly) {
+        // setTimeout to avoid Safari 14.1.2
+        // to unselect text when mouse is clicked slowly
+        setTimeout(() => {
+          input.select();
+        }, 10);
+      }
+    };
+  }
+  componentWillLoad() {
+    // If the mds-input has a tabindex attribute we get the value
+    // and pass it down to the native input, then remove it from the
+    // mds-input to avoid causing tabbing twice on the same element
+    if (this.el.hasAttribute('tabindex')) {
+      const tabindex = this.el.getAttribute('tabindex');
+      this.tabindex = tabindex !== null ? parseInt(tabindex) : undefined;
+      this.el.removeAttribute('tabindex');
+    }
+  }
+  /**
+   * Emits the change event when the component value changes
+   */
+  valueChanged() {
+    this.changeEvent.emit({ value: this.value === null ? this.value : this.value.toString() });
+  }
+  /**
+   * Sets focus on the specified `my-input`.
+   * Use this method instead
+   * of the global `input.focus()`.
+   */
+  async setFocus() {
+    if (this.nativeInput !== null) {
+      this.nativeInput.focus();
+    }
+  }
+  /**
+   * Returns the native `<input>` element used under the hood.
+   */
+  getInputElement() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return Promise.resolve(this.nativeInput);
+  }
+  getValue() {
+    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
+  }
+  render() {
+    const value = this.getValue();
+    return (index.h(index.Host, null, this.type === 'textarea'
+      ? index.h("textarea", { class: clsx('input', this.icon && 'has-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: value })
+      : index.h("input", { class: clsx('input', this.icon && 'has-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalist && 'datalist', placeholder: this.placeholder || '', readOnly: this.readonly, ref: input => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type, value: value }), this.required && index.h("mds-text", { typography: "option", class: "tip top-1 required" }, "Obbligatorio"), this.disabled && index.h("mds-text", { typography: "option", class: "tip top-1 disabled" }, "Disabilitato"), this.readonly && index.h("mds-text", { typography: "option", class: "tip top-1 read-only" }, "Sola lettura"), this.variant && this.variantTip && index.h("mds-text", { typography: "option", class: "tip-variant bottom-1" }, this.variantTip), this.datalist &&
+      index.h("datalist", { id: "datalist", class: "datalist" }, this.datalist.forEach(element => {
+        index.h("option", { value: element });
+      })), this.icon && index.h("mds-icon", { class: clsx('icon', this.variant), name: this.icon })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+MdsInput.style = mdsInputCss;
+
+exports.mds_input = MdsInput;

package/dist/cjs/mds-input.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-3aa055da.js');
+
+/*
+ Stencil Client Patch Browser v2.12.1 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-input.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["mds-input.cjs",[[1,"mds-input",{"autocomplete":[1],"autofocus":[4],"datalist":[16],"disabled":[4],"icon":[1],"max":[2],"maxlength":[2],"min":[1],"minlength":[2],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"variant":[513],"variantTip":[1,"variant-tip"],"step":[1],"type":[1],"value":[8],"hasFocus":[32],"setFocus":[64],"getInputElement":[64]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/mds-input/mds-input.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.12.1",
+    "typescriptVersion": "4.3.5"
+  },
+  "collections": [],
+  "bundles": []
+}