@digital-realty/ix-time 1.1.4 → 1.1.6

package/dist/IxTime.d.ts

@@ -83,5 +83,5 @@ export declare class IxTime extends LitElement {
     handleChange: (e: InputEvent) => void;
     validateDate: () => void;
     focusOut: () => void;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }

package/dist/ix-time-styles.js

@@ -3,6 +3,21 @@ export const IxTimeStyles = css `
   :host {
     display: block;
   }
+  ::part(input-field) {
+    background: transparent;
+    padding: 0;
+    height: 26px;
+  }
+
+  #search-input-vaadin-time-picker-3 {
+    padding: 0 !important;
+    --_hover-highlight: transparent;
+  }
+
+  vaadin-time-picker::before {
+    display: none;
+  }
+
   ix-field {
     display: block;
   }

package/dist/ix-time-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-time-styles.js","sourceRoot":"","sources":["../src/ix-time-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTimeStyles = css`\n  :host {\n    display: block;\n  }\n  ix-field {\n    display: block;\n  }\n  .flex-fill {\n    flex: 1;\n    align-items: center;\n  }\n  input {\n    border: none;\n    background: transparent;\n    outline: none;\n    min-width: 3rem;\n  }\n  .time {\n    position: relative;\n  }\n`;\n"]}
+{"version":3,"file":"ix-time-styles.js","sourceRoot":"","sources":["../src/ix-time-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTimeStyles = css`\n  :host {\n    display: block;\n  }\n  ::part(input-field) {\n    background: transparent;\n    padding: 0;\n    height: 26px;\n  }\n\n  #search-input-vaadin-time-picker-3 {\n    padding: 0 !important;\n    --_hover-highlight: transparent;\n  }\n\n  vaadin-time-picker::before {\n    display: none;\n  }\n\n  ix-field {\n    display: block;\n  }\n  .flex-fill {\n    flex: 1;\n    align-items: center;\n  }\n  input {\n    border: none;\n    background: transparent;\n    outline: none;\n    min-width: 3rem;\n  }\n  .time {\n    position: relative;\n  }\n`;\n"]}

package/dist/ix-time.min.js

@@ -1 +1 @@
-import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property,query,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-field/ix-field.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";let IxTimeStyles=css`:host{display:block}ix-field{display:block}.flex-fill{flex:1;align-items:center}input{border:none;background:0 0;outline:0;min-width:3rem}.time{position:relative}`;class IxTime extends LitElement{constructor(){super(...arguments),this.label="",this.value="",this.min="",this.max="",this.internals=this.attachInternals(),this.disabled=!1,this.internalErrorText="",this.errorText="",this.required=!1,this.hideError=!1,this.onChanged=()=>{},this.focused=!1,this.focusin=()=>{this.focused=!0},this.clear=()=>{this.value=""},this.handleChange=t=>{t=t.target.value;this.value=t,this.validateDate(),this.onChanged(t)},this.validateDate=()=>{this.value&&this.timeInput.validity.valid?this.internalErrorText="":this.timeInput.validity.rangeUnderflow||this.timeInput.validity.rangeOverflow?this.internalErrorText=`The value must be between ${this.min} and ${this.max}.`:this.required&&!this.timeInput.validity.valid&&(this.internalErrorText="Time is not valid.")},this.focusOut=()=>{this.focused=!1}}static get styles(){return[IxTimeStyles]}get error(){return this.internalErrorText||this.errorText||""}get hasError(){return!!this.error}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}formResetCallback(){this.reset()}reset(){var t;this.clear(),this.value=null!=(t=this.getAttribute("value"))?t:""}updated(){this.internals.setValidity({badInput:this.hasError},this.error,this.timeInput),this.internals.setFormValue(this.value)}focus(){this.timeInput.focus()}firstUpdated(){this.validateDate()}render(){var t={disabled:this.disabled,error:!this.disabled&&this.hasError};return html`<ix-field class="${classMap(t)}" ?focused="${this.focused}" ?populated="${this.value}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.hasError&&!this.hideError}" error-text="${this.error}" label="${this.label}" @focusin="${this.focusin}" @focusout="${this.focusOut}"><input id="time-input" @change="${this.handleChange}" .value="${this.value}" class="flex-fill" type="time" min="${this.min}" max="${this.max}"></ix-field>`}}requestUpdateOnAriaChange(IxTime),IxTime.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxTime.formAssociated=!0,__decorate([property({type:String})],IxTime.prototype,"label",void 0),__decorate([property({type:String})],IxTime.prototype,"value",void 0),__decorate([property({type:String})],IxTime.prototype,"min",void 0),__decorate([property({type:String})],IxTime.prototype,"max",void 0),__decorate([query("#time-input")],IxTime.prototype,"timeInput",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"disabled",void 0),__decorate([state()],IxTime.prototype,"internalErrorText",void 0),__decorate([property({type:String})],IxTime.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"hideError",void 0),__decorate([property({type:Function})],IxTime.prototype,"onChanged",void 0),__decorate([state()],IxTime.prototype,"focused",void 0),window.customElements.define("ix-time",IxTime);
+import{__decorate}from"tslib";import{css,LitElement,html}from"lit";import{property,query,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import"@digital-realty/ix-field/ix-field.js";import{requestUpdateOnAriaChange}from"@material/web/internal/aria/delegate.js";let IxTimeStyles=css`:host{display:block}::part(input-field){background:0 0;padding:0;height:26px}#search-input-vaadin-time-picker-3{padding:0!important;--_hover-highlight:transparent}vaadin-time-picker::before{display:none}ix-field{display:block}.flex-fill{flex:1;align-items:center}input{border:none;background:0 0;outline:0;min-width:3rem}.time{position:relative}`;class IxTime extends LitElement{constructor(){super(...arguments),this.label="",this.value="",this.min="",this.max="",this.internals=this.attachInternals(),this.disabled=!1,this.internalErrorText="",this.errorText="",this.required=!1,this.hideError=!1,this.onChanged=()=>{},this.focused=!1,this.focusin=()=>{this.focused=!0},this.clear=()=>{this.value=""},this.handleChange=t=>{t=t.target.value;this.value=t,this.validateDate(),this.onChanged(t)},this.validateDate=()=>{this.value&&this.timeInput.validity.valid?this.internalErrorText="":this.timeInput.validity.rangeUnderflow||this.timeInput.validity.rangeOverflow?this.internalErrorText=`The value must be between ${this.min} and ${this.max}.`:this.required&&!this.timeInput.validity.valid&&(this.internalErrorText="Time is not valid.")},this.focusOut=()=>{this.focused=!1}}static get styles(){return[IxTimeStyles]}get error(){return this.internalErrorText||this.errorText||""}get hasError(){return!!this.error}get form(){return this.internals.form}get labels(){return this.internals.labels}get name(){var t;return null!=(t=this.getAttribute("name"))?t:""}set name(t){this.setAttribute("name",t)}get validationMessage(){return this.internals.validationMessage}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.internals.reportValidity()}formResetCallback(){this.reset()}reset(){var t;this.clear(),this.value=null!=(t=this.getAttribute("value"))?t:""}updated(){this.internals.setValidity({badInput:this.hasError},this.error,this.timeInput),this.internals.setFormValue(this.value)}focus(){this.timeInput.focus()}firstUpdated(){this.validateDate()}render(){var t={disabled:this.disabled,error:!this.disabled&&this.hasError};return html`<ix-field class="${classMap(t)}" ?focused="${this.focused}" ?populated="${this.value}" ?disabled="${this.disabled}" ?required="${this.required}" ?error="${this.hasError&&!this.hideError}" error-text="${this.error}" label="${this.label}" @focusin="${this.focusin}" @focusout="${this.focusOut}"><input id="time-input" @change="${this.handleChange}" .value="${this.value}" class="flex-fill" type="time" min="${this.min}" max="${this.max}"></ix-field>`}}requestUpdateOnAriaChange(IxTime),IxTime.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0},IxTime.formAssociated=!0,__decorate([property({type:String})],IxTime.prototype,"label",void 0),__decorate([property({type:String})],IxTime.prototype,"value",void 0),__decorate([property({type:String})],IxTime.prototype,"min",void 0),__decorate([property({type:String})],IxTime.prototype,"max",void 0),__decorate([query("#time-input")],IxTime.prototype,"timeInput",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"disabled",void 0),__decorate([state()],IxTime.prototype,"internalErrorText",void 0),__decorate([property({type:String})],IxTime.prototype,"errorText",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"required",void 0),__decorate([property({type:Boolean,reflect:!0})],IxTime.prototype,"hideError",void 0),__decorate([property({type:Function})],IxTime.prototype,"onChanged",void 0),__decorate([state()],IxTime.prototype,"focused",void 0),window.customElements.define("ix-time",IxTime);

package/dist/state/date-format-state.d.ts

@@ -0,0 +1,11 @@
+declare class DateFormatState {
+    constructor();
+    preferredDateFormat: string;
+    preferredTimeFormat: string;
+    get isHydrated(): boolean;
+    hydrateStore(): Promise<void>;
+    clearStoredDate(): Promise<void>;
+    getStoredData(): Promise<this | null>;
+}
+export declare const dateFormatState: DateFormatState;
+export {};

package/dist/state/date-format-state.js

@@ -0,0 +1,28 @@
+import { makeAutoObservable } from 'mobx';
+import { makePersistable, isHydrated, hydrateStore, clearPersistedStore, getPersistedStore, } from 'mobx-persist-store';
+class DateFormatState {
+    constructor() {
+        this.preferredDateFormat = 'dd/MM/yyyy';
+        this.preferredTimeFormat = 'hh:mm';
+        makeAutoObservable(this);
+        makePersistable(this, {
+            name: 'date-format',
+            properties: ['preferredDateFormat', 'preferredTimeFormat'],
+            storage: window.localStorage,
+        });
+    }
+    get isHydrated() {
+        return isHydrated(this);
+    }
+    async hydrateStore() {
+        await hydrateStore(this);
+    }
+    async clearStoredDate() {
+        await clearPersistedStore(this);
+    }
+    async getStoredData() {
+        return getPersistedStore(this);
+    }
+}
+export const dateFormatState = new DateFormatState();
+//# sourceMappingURL=date-format-state.js.map

package/dist/state/date-format-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-format-state.js","sourceRoot":"","sources":["../../src/state/date-format-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,MAAM,CAAC;AAC1C,OAAO,EACL,eAAe,EACf,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,eAAe;IACnB;QASO,wBAAmB,GAAW,YAAY,CAAC;QAE3C,wBAAmB,GAAW,OAAO,CAAC;QAV3C,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,eAAe,CAAC,IAAI,EAAE;YACpB,IAAI,EAAE,aAAa;YACnB,UAAU,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;YAC1D,OAAO,EAAE,MAAM,CAAC,YAAY;SAC7B,CAAC,CAAC;IACL,CAAC;IAMD,IAAI,UAAU;QACZ,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,MAAM,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC","sourcesContent":["import { makeAutoObservable } from 'mobx';\nimport {\n  makePersistable,\n  isHydrated,\n  hydrateStore,\n  clearPersistedStore,\n  getPersistedStore,\n} from 'mobx-persist-store';\n\nclass DateFormatState {\n  constructor() {\n    makeAutoObservable(this);\n    makePersistable(this, {\n      name: 'date-format',\n      properties: ['preferredDateFormat', 'preferredTimeFormat'],\n      storage: window.localStorage,\n    });\n  }\n\n  public preferredDateFormat: string = 'dd/MM/yyyy';\n\n  public preferredTimeFormat: string = 'hh:mm';\n\n  get isHydrated() {\n    return isHydrated(this);\n  }\n\n  async hydrateStore() {\n    await hydrateStore(this);\n  }\n\n  async clearStoredDate() {\n    await clearPersistedStore(this);\n  }\n\n  async getStoredData() {\n    return getPersistedStore(this);\n  }\n}\n\nexport const dateFormatState = new DateFormatState();\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-time following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,11 +26,15 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@digital-realty/ix-field": "^1.1.4",
-    "@digital-realty/theme": "^1.0.30",
+    "@adobe/lit-mobx": "^2.2.2",
+    "@digital-realty/ix-field": "^1.1.6",
     "@material/web": "1.2.0",
+    "@vaadin/time-picker": "^24.6.1",
     "@web/test-runner-commands": "^0.9.0",
-    "lit": "^2.8.0 || ^3.0.0"
+    "date-fns": "^4.1.0",
+    "lit": "^3.2.1",
+    "mobx": "^6.13.5",
+    "mobx-persist-store": "^1.1.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.4.17",
@@ -39,6 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
     "@web/dev-server": "^0.1.34",
+    "@web/dev-server-import-maps": "^0.2.1",
     "@web/test-runner": "^0.14.0",
     "concurrently": "^9.1.0",
     "eslint": "^8.31.0",
@@ -46,6 +51,7 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
     "prettier": "^2.4.1",
+    "rollup": "^4.29.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
     "rollup-plugin-summary": "^2.0.0",
     "rollup-plugin-uglify": "^6.0.4",
@@ -99,5 +105,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "cb4798e2a22a7e6b2eed58b8fc2d9fdddc875911"
+  "gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
 }