@mmlogic/components 0.3.5 → 0.3.6

package/dist/mosterdcomponents/mrd-time-field.entry.js

@@ -0,0 +1,46 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-B_tPFIvS.js';
+import { t } from './i18n-hoGGKbKU.js';
+import { v as validateRequired } from './validation-ixb43cqU.js';
+import './index-I5SuYv7a.js';
+import './client-layout-D88nn5zf.js';
+
+const mrdTimeFieldScss = () => `.sc-mrd-time-field-h{display:block}.mrd-time-field.sc-mrd-time-field{display:flex;flex-direction:column;gap:var(--mrd-space-1);width:100%}.mrd-time-field__label.sc-mrd-time-field{display:block;font-family:var(--mrd-font-family);font-size:var(--mrd-label-font-size);font-weight:var(--mrd-label-font-weight);color:var(--mrd-label-color)}.mrd-time-field__label--required.sc-mrd-time-field::after{content:' *';color:var(--mrd-color-danger)}.mrd-time-field__input.sc-mrd-time-field{display:block;width:100%;height:var(--mrd-input-height);padding:var(--mrd-input-padding-y) var(--mrd-input-padding-x);font-family:var(--mrd-font-family);font-size:var(--mrd-font-size-base);color:var(--mrd-input-color);background-color:var(--mrd-input-bg);border:var(--mrd-border-width) solid var(--mrd-border-color);border-radius:var(--mrd-border-radius);transition:border-color var(--mrd-transition), box-shadow var(--mrd-transition);outline:none;appearance:none;box-sizing:border-box;cursor:pointer}.mrd-time-field__input.sc-mrd-time-field:focus{border-color:var(--mrd-border-color-focus);box-shadow:var(--mrd-shadow-focus)}.mrd-time-field__input.sc-mrd-time-field:disabled{background-color:var(--mrd-input-bg-disabled);cursor:not-allowed;opacity:0.7}.mrd-time-field__input--error.sc-mrd-time-field{border-color:var(--mrd-border-color-error)}.mrd-time-field__input--error.sc-mrd-time-field:focus{box-shadow:var(--mrd-shadow-focus-error)}.mrd-time-field__error.sc-mrd-time-field{font-family:var(--mrd-font-family);font-size:var(--mrd-error-font-size);color:var(--mrd-error-color)}`;
+
+const MrdTimeField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.mrdChange = createEvent(this, "mrdChange", 7);
+        this.mrdBlur = createEvent(this, "mrdBlur", 7);
+        this.name = '';
+        this.label = '';
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.locale = navigator.language;
+        this.error = '';
+        this.handleChange = (e) => {
+            const val = e.target.value;
+            if (this.required && !validateRequired(val)) {
+                this.error = t('required', this.locale);
+            }
+            else {
+                this.error = '';
+            }
+            this.mrdChange.emit({ name: this.name, value: val });
+        };
+        this.handleBlur = (e) => {
+            const val = e.target.value;
+            this.mrdBlur.emit({ name: this.name, value: val });
+        };
+    }
+    render() {
+        const hasError = !!this.error;
+        return (h(Host, { key: 'c507996709437d8982f9175b286e25598997002d' }, h("div", { key: 'd5f1b7f14d26cae8298cd40491898b39044158f8', class: "mrd-time-field" }, this.label && (h("label", { key: '10976e18df09240e00b045314c4ddd3845d4bfdc', class: `mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}` }, this.label)), h("input", { key: 'bc557333f107a371a7005f9b56dd0395190e63d7', class: `mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`, type: "time", name: this.name, value: this.value, required: this.required, disabled: this.disabled, onChange: this.handleChange, onBlur: this.handleBlur }), hasError && h("span", { key: 'b5a09c2aa063fa9e2fc3aba411e86b57d879c408', class: "mrd-time-field__error" }, this.error))));
+    }
+};
+MrdTimeField.style = mrdTimeFieldScss();
+
+export { MrdTimeField as mrd_time_field };
+//# sourceMappingURL=mrd-time-field.entry.esm.js.map
+
+//# sourceMappingURL=mrd-time-field.entry.js.map

package/dist/mosterdcomponents/mrd-time-field.entry.js.map

@@ -0,0 +1 @@
+{"file":"mrd-time-field.entry.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,shDAAshD,CAAC;;MCS1iD,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAMU,QAAA,IAAA,CAAA,IAAI,GAAW,EAAE;AACjB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAClB,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAClB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,QAAQ,GAAY,KAAK;AACzB,QAAA,IAAA,CAAA,MAAM,GAAW,SAAS,CAAC,QAAQ;AAElC,QAAA,IAAA,CAAA,KAAK,GAAW,EAAE;AAKnB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAQ,KAAI;AAClC,YAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;YAChD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE;gBAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC;;iBAClC;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AAEjB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACtD,SAAC;AAEO,QAAA,IAAA,CAAA,UAAU,GAAG,CAAC,CAAQ,KAAI;AAChC,YAAA,MAAM,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAChD,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;AACpD,SAAC;AA2BF;IAzBC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACxB,IAAI,CAAC,KAAK,KACT,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAE,CAAA,qBAAA,EAAwB,IAAI,CAAC,QAAQ,GAAG,kCAAkC,GAAG,EAAE,CAAA,CAAE,EAAA,EAC5F,IAAI,CAAC,KAAK,CACL,CACT,EACD,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAAA,qBAAA,EAAwB,QAAQ,GAAG,+BAA+B,GAAG,EAAE,CAAA,CAAE,EAChF,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,CACvB,EACD,QAAQ,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,uBAAuB,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAChE,CACD;;;;;;;","names":[],"sources":["src/components/mrd-time-field/mrd-time-field.scss?tag=mrd-time-field&encapsulation=scoped","src/components/mrd-time-field/mrd-time-field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.mrd-time-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--mrd-space-1);\n  width: 100%;\n}\n\n.mrd-time-field__label {\n  display: block;\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-label-font-size);\n  font-weight: var(--mrd-label-font-weight);\n  color: var(--mrd-label-color);\n}\n\n.mrd-time-field__label--required::after {\n  content: ' *';\n  color: var(--mrd-color-danger);\n}\n\n.mrd-time-field__input {\n  display: block;\n  width: 100%;\n  height: var(--mrd-input-height);\n  padding: var(--mrd-input-padding-y) var(--mrd-input-padding-x);\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-font-size-base);\n  color: var(--mrd-input-color);\n  background-color: var(--mrd-input-bg);\n  border: var(--mrd-border-width) solid var(--mrd-border-color);\n  border-radius: var(--mrd-border-radius);\n  transition: border-color var(--mrd-transition), box-shadow var(--mrd-transition);\n  outline: none;\n  appearance: none;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n\n.mrd-time-field__input:focus {\n  border-color: var(--mrd-border-color-focus);\n  box-shadow: var(--mrd-shadow-focus);\n}\n\n.mrd-time-field__input:disabled {\n  background-color: var(--mrd-input-bg-disabled);\n  cursor: not-allowed;\n  opacity: 0.7;\n}\n\n.mrd-time-field__input--error {\n  border-color: var(--mrd-border-color-error);\n}\n\n.mrd-time-field__input--error:focus {\n  box-shadow: var(--mrd-shadow-focus-error);\n}\n\n.mrd-time-field__error {\n  font-family: var(--mrd-font-family);\n  font-size: var(--mrd-error-font-size);\n  color: var(--mrd-error-color);\n}\n","import { Component, Host, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { t } from '../../utils/i18n';\nimport { validateRequired } from '../../utils/validation';\n\n@Component({\n  tag: 'mrd-time-field',\n  styleUrl: 'mrd-time-field.scss',\n  scoped: true,\n})\nexport class MrdTimeField {\n  @Prop() name: string = '';\n  @Prop() label: string = '';\n  @Prop() value: string = '';\n  @Prop() required: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() locale: string = navigator.language;\n\n  @State() error: string = '';\n\n  @Event() mrdChange!: EventEmitter<{ name: string; value: string }>;\n  @Event() mrdBlur!: EventEmitter<{ name: string; value: string }>;\n\n  private handleChange = (e: Event) => {\n    const val = (e.target as HTMLInputElement).value;\n    if (this.required && !validateRequired(val)) {\n      this.error = t('required', this.locale);\n    } else {\n      this.error = '';\n    }\n    this.mrdChange.emit({ name: this.name, value: val });\n  };\n\n  private handleBlur = (e: Event) => {\n    const val = (e.target as HTMLInputElement).value;\n    this.mrdBlur.emit({ name: this.name, value: val });\n  };\n\n  render() {\n    const hasError = !!this.error;\n    return (\n      <Host>\n        <div class=\"mrd-time-field\">\n          {this.label && (\n            <label class={`mrd-time-field__label${this.required ? ' mrd-time-field__label--required' : ''}`}>\n              {this.label}\n            </label>\n          )}\n          <input\n            class={`mrd-time-field__input${hasError ? ' mrd-time-field__input--error' : ''}`}\n            type=\"time\"\n            name={this.name}\n            value={this.value}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleChange}\n            onBlur={this.handleBlur}\n          />\n          {hasError && <span class=\"mrd-time-field__error\">{this.error}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}