@codaline-io/ionic-datepicker - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/cjs/ionic-datepicker-popover.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-2db1b6c7.js');
+const index = require('./index-7355b986.js');
 const utils = require('./utils-2172fc46.js');
@@ -8,0 +8,0 @@

dist/cjs/ionic-datepicker.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-2db1b6c7.js');
+const index = require('./index-7355b986.js');
 const utils = require('./utils-2172fc46.js');
@@ -11,3 +11,3 @@
 
-const ionicDatepickerCss = variablesCss + ":host{position:relative}span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0}";
+const ionicDatepickerCss = variablesCss + ":host{position:relative}span,button.hidden-button{padding-right:var(--base-spacing-small)}span.placeholder{color:var(--placeholder-color)}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0;outline:none}span.disabled,button.hidden-button.disabled{cursor:not-allowed;background:transparent;opacity:.3}";
 
@@ -118,7 +118,11 @@ const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
         this.isDesktop = isDesktop();
-        this.spanRef = null;
+        this.buttonRef = null;
         this.ionDatetimeRef = null;
         this.handleDateClick = this.handleDateClick.bind(this);
         this.handleInput = this.handleInput.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
         this.changes = index.createEvent(this, "changes", 7);
+        this.focused = index.createEvent(this, "focused", 7);
+        this.blurred = index.createEvent(this, "blurred", 7);
     }
@@ -129,7 +133,7 @@ /**
     async open() {
-        if (this.spanRef) {
+        if (this.buttonRef) {
             if (this.popover) {
                 return;
             }
-            return this.spanRef.click();
+            return this.buttonRef.click();
         }
@@ -150,2 +154,8 @@ else if (this.ionDatetimeRef) {
     }
+    handleFocus() {
+        this.focused.emit();
+    }
+    handleBlur() {
+        this.blurred.emit();
+    }
     formatDate(date) {
@@ -166,5 +176,7 @@ return utils.renderDatetime(this.displayFormat, date, {
     async handleDateClick(event) {
+        // Only when popover is not already open and not disabled
         if (this.disabled || this.popover) {
             return;
         }
+        // Open datepicker popover
         this.popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
@@ -180,4 +192,4 @@ selectedDate: this.date || null,
         await this.popover.present();
+        // Update data
         const { data } = await this.popover.onWillDismiss();
-        this.popover = null;
         if (data && data.date) {
@@ -187,2 +199,9 @@ this.date = data.date;
         }
+        // Set focus again
+        await this.popover.onDidDismiss();
+        if (this.buttonRef) {
+            this.buttonRef.focus();
+        }
+        // remove popover reference
+        this.popover = null;
     }
@@ -193,4 +212,7 @@ render() {
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return index.h(index.Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [index.h("span", { ref: (ref) => this.spanRef = ref, onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder), index.h("button", { class: 'hidden-button', onClick: this.handleDateClick, style: { position: 'absolute', width: '100$', left: '0', top: '0' }, type: 'button' })], !this.isDesktop && this.ionDateTimeOnMobile &&
-            index.h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
+        return index.h(index.Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [
+            index.h("span", { class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder),
+            index.h("button", { ref: (ref) => this.buttonRef = ref, class: `hidden-button ${disabledClassName}`, onClick: this.handleDateClick, type: 'button', onFocus: this.handleFocus, onBlur: this.handleBlur })
+        ], !this.isDesktop && this.ionDateTimeOnMobile &&
+            index.h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode, onIonFocus: this.handleFocus, onIonBlur: this.handleBlur }));
     }
@@ -197,0 +219,0 @@ };

dist/cjs/ionic-datepicker.cjs.js

 'use strict';
 
-const index = require('./index-2db1b6c7.js');
+const index = require('./index-7355b986.js');
 
@@ -5,0 +5,0 @@ index.patchBrowser().then(options => {

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-2db1b6c7.js');
+const index = require('./index-7355b986.js');
 
@@ -8,0 +8,0 @@ const defineCustomElements = (win, options) => index.patchEsm().then(() => {

dist/collection/components/ionic-datepicker/ionic-datepicker.js

@@ -106,6 +106,8 @@ import { Component, Prop, h, Host, Event, State, Method } from '@stencil/core';
         this.isDesktop = isDesktop();
-        this.spanRef = null;
+        this.buttonRef = null;
         this.ionDatetimeRef = null;
         this.handleDateClick = this.handleDateClick.bind(this);
         this.handleInput = this.handleInput.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
     }
@@ -116,7 +118,7 @@ /**
     async open() {
-        if (this.spanRef) {
+        if (this.buttonRef) {
             if (this.popover) {
                 return;
             }
-            return this.spanRef.click();
+            return this.buttonRef.click();
         }
@@ -137,2 +139,8 @@ else if (this.ionDatetimeRef) {
     }
+    handleFocus() {
+        this.focused.emit();
+    }
+    handleBlur() {
+        this.blurred.emit();
+    }
     formatDate(date) {
@@ -153,5 +161,7 @@ return renderDatetime(this.displayFormat, date, {
     async handleDateClick(event) {
+        // Only when popover is not already open and not disabled
         if (this.disabled || this.popover) {
             return;
         }
+        // Open datepicker popover
         this.popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
@@ -167,4 +177,4 @@ selectedDate: this.date || null,
         await this.popover.present();
+        // Update data
         const { data } = await this.popover.onWillDismiss();
-        this.popover = null;
         if (data && data.date) {
@@ -174,2 +184,9 @@ this.date = data.date;
         }
+        // Set focus again
+        await this.popover.onDidDismiss();
+        if (this.buttonRef) {
+            this.buttonRef.focus();
+        }
+        // remove popover reference
+        this.popover = null;
     }
@@ -181,5 +198,8 @@ render() {
         return h(Host, null,
-            (this.isDesktop || !this.ionDateTimeOnMobile) && [h("span", { ref: (ref) => this.spanRef = ref, onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder), h("button", { class: 'hidden-button', onClick: this.handleDateClick, style: { position: 'absolute', width: '100$', left: '0', top: '0' }, type: 'button' })],
+            (this.isDesktop || !this.ionDateTimeOnMobile) && [
+                h("span", { class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder),
+                h("button", { ref: (ref) => this.buttonRef = ref, class: `hidden-button ${disabledClassName}`, onClick: this.handleDateClick, type: 'button', onFocus: this.handleFocus, onBlur: this.handleBlur })
+            ],
             !this.isDesktop && this.ionDateTimeOnMobile &&
-                h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
+                h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode, onIonFocus: this.handleFocus, onIonBlur: this.handleBlur }));
     }
@@ -591,2 +611,32 @@ static get is() { return "ionic-datepicker"; }
             }
+        }, {
+            "method": "focused",
+            "name": "focused",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": "Event that emits when the component gets the focus"
+            },
+            "complexType": {
+                "original": "void",
+                "resolved": "void",
+                "references": {}
+            }
+        }, {
+            "method": "blurred",
+            "name": "blurred",
+            "bubbles": true,
+            "cancelable": true,
+            "composed": true,
+            "docs": {
+                "tags": [],
+                "text": "Event that emits when the component loses the focus and gets blurred"
+            },
+            "complexType": {
+                "original": "void",
+                "resolved": "void",
+                "references": {}
+            }
         }]; }
@@ -593,0 +643,0 @@ static get methods() { return {

dist/esm-es5/ionic-datepicker-popover.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './index-ab6b0017.js';
+import { r as registerInstance, h } from './index-726bd51a.js';
 import { D as DEFAULT_MAX, a as DEFAULT_MIN, d as DAY_SHORT_NAMES, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, t as toISODate, e as DEFAULT_OKAY_LABEL, g as DEFAULT_YEAR_LABEL } from './utils-f44cc100.js';
@@ -3,0 +3,0 @@

dist/esm-es5/ionic-datepicker.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-ab6b0017.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-726bd51a.js';
 import { D as DEFAULT_MAX, a as DEFAULT_MIN, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, c as DAY_NAMES, d as DAY_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, f as DEFAULT_CANCEL_LABEL, g as DEFAULT_YEAR_LABEL, r as renderDatetime } from './utils-f44cc100.js';
@@ -6,3 +6,3 @@
 
-const ionicDatepickerCss = variablesCss + ":host{position:relative}span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0}";
+const ionicDatepickerCss = variablesCss + ":host{position:relative}span,button.hidden-button{padding-right:var(--base-spacing-small)}span.placeholder{color:var(--placeholder-color)}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0;outline:none}span.disabled,button.hidden-button.disabled{cursor:not-allowed;background:transparent;opacity:.3}";
 
@@ -113,7 +113,11 @@ const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
         this.isDesktop = isDesktop();
-        this.spanRef = null;
+        this.buttonRef = null;
         this.ionDatetimeRef = null;
         this.handleDateClick = this.handleDateClick.bind(this);
         this.handleInput = this.handleInput.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
         this.changes = createEvent(this, "changes", 7);
+        this.focused = createEvent(this, "focused", 7);
+        this.blurred = createEvent(this, "blurred", 7);
     }
@@ -124,7 +128,7 @@ /**
     async open() {
-        if (this.spanRef) {
+        if (this.buttonRef) {
             if (this.popover) {
                 return;
             }
-            return this.spanRef.click();
+            return this.buttonRef.click();
         }
@@ -145,2 +149,8 @@ else if (this.ionDatetimeRef) {
     }
+    handleFocus() {
+        this.focused.emit();
+    }
+    handleBlur() {
+        this.blurred.emit();
+    }
     formatDate(date) {
@@ -161,5 +171,7 @@ return renderDatetime(this.displayFormat, date, {
     async handleDateClick(event) {
+        // Only when popover is not already open and not disabled
         if (this.disabled || this.popover) {
             return;
         }
+        // Open datepicker popover
         this.popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
@@ -175,4 +187,4 @@ selectedDate: this.date || null,
         await this.popover.present();
+        // Update data
         const { data } = await this.popover.onWillDismiss();
-        this.popover = null;
         if (data && data.date) {
@@ -182,2 +194,9 @@ this.date = data.date;
         }
+        // Set focus again
+        await this.popover.onDidDismiss();
+        if (this.buttonRef) {
+            this.buttonRef.focus();
+        }
+        // remove popover reference
+        this.popover = null;
     }
@@ -188,4 +207,7 @@ render() {
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [h("span", { ref: (ref) => this.spanRef = ref, onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder), h("button", { class: 'hidden-button', onClick: this.handleDateClick, style: { position: 'absolute', width: '100$', left: '0', top: '0' }, type: 'button' })], !this.isDesktop && this.ionDateTimeOnMobile &&
-            h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
+        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [
+            h("span", { class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder),
+            h("button", { ref: (ref) => this.buttonRef = ref, class: `hidden-button ${disabledClassName}`, onClick: this.handleDateClick, type: 'button', onFocus: this.handleFocus, onBlur: this.handleBlur })
+        ], !this.isDesktop && this.ionDateTimeOnMobile &&
+            h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode, onIonFocus: this.handleFocus, onIonBlur: this.handleBlur }));
     }
@@ -192,0 +214,0 @@ };

dist/esm/ionic-datepicker-popover.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, h } from './index-ab6b0017.js';
+import { r as registerInstance, h } from './index-726bd51a.js';
 import { D as DEFAULT_MAX, a as DEFAULT_MIN, d as DAY_SHORT_NAMES, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, t as toISODate, e as DEFAULT_OKAY_LABEL, g as DEFAULT_YEAR_LABEL } from './utils-f44cc100.js';
@@ -3,0 +3,0 @@

dist/esm/ionic-datepicker.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-ab6b0017.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-726bd51a.js';
 import { D as DEFAULT_MAX, a as DEFAULT_MIN, M as MONTH_NAMES, b as MONTH_SHORT_NAMES, c as DAY_NAMES, d as DAY_SHORT_NAMES, e as DEFAULT_OKAY_LABEL, f as DEFAULT_CANCEL_LABEL, g as DEFAULT_YEAR_LABEL, r as renderDatetime } from './utils-f44cc100.js';
@@ -6,3 +6,3 @@
 
-const ionicDatepickerCss = variablesCss + ":host{position:relative}span{cursor:pointer;padding-right:var(--base-spacing-small)}input{border:0}span.placeholder{color:var(--placeholder-color)}span.disabled,input[disabled],:host.disabled{cursor:not-allowed;background:transparent;pointer-events:none;opacity:.3}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:-1;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0}";
+const ionicDatepickerCss = variablesCss + ":host{position:relative}span,button.hidden-button{padding-right:var(--base-spacing-small)}span.placeholder{color:var(--placeholder-color)}span.ionic-datepicker-error{color:var(--error-color)}button.hidden-button{position:absolute;cursor:pointer;left:0;top:0;width:100%;height:100%;background:transparent;border:0;outline:none}button.hidden-button:active,button.hidden-button:focus,button.hidden-button::-moz-focus-inner{border:0;outline:none}span.disabled,button.hidden-button.disabled{cursor:not-allowed;background:transparent;opacity:.3}";
 
@@ -113,7 +113,11 @@ const isDesktop = () => !(window.matchMedia('(any-pointer:coarse)').matches);
         this.isDesktop = isDesktop();
-        this.spanRef = null;
+        this.buttonRef = null;
         this.ionDatetimeRef = null;
         this.handleDateClick = this.handleDateClick.bind(this);
         this.handleInput = this.handleInput.bind(this);
+        this.handleFocus = this.handleFocus.bind(this);
+        this.handleBlur = this.handleBlur.bind(this);
         this.changes = createEvent(this, "changes", 7);
+        this.focused = createEvent(this, "focused", 7);
+        this.blurred = createEvent(this, "blurred", 7);
     }
@@ -124,7 +128,7 @@ /**
     async open() {
-        if (this.spanRef) {
+        if (this.buttonRef) {
             if (this.popover) {
                 return;
             }
-            return this.spanRef.click();
+            return this.buttonRef.click();
         }
@@ -145,2 +149,8 @@ else if (this.ionDatetimeRef) {
     }
+    handleFocus() {
+        this.focused.emit();
+    }
+    handleBlur() {
+        this.blurred.emit();
+    }
     formatDate(date) {
@@ -161,5 +171,7 @@ return renderDatetime(this.displayFormat, date, {
     async handleDateClick(event) {
+        // Only when popover is not already open and not disabled
         if (this.disabled || this.popover) {
             return;
         }
+        // Open datepicker popover
         this.popover = Object.assign(document.createElement('ion-popover'), Object.assign(Object.assign({}, this.ionPopoverOptions), { component: 'ionic-datepicker-popover', componentProps: {
@@ -175,4 +187,4 @@ selectedDate: this.date || null,
         await this.popover.present();
+        // Update data
         const { data } = await this.popover.onWillDismiss();
-        this.popover = null;
         if (data && data.date) {
@@ -182,2 +194,9 @@ this.date = data.date;
         }
+        // Set focus again
+        await this.popover.onDidDismiss();
+        if (this.buttonRef) {
+            this.buttonRef.focus();
+        }
+        // remove popover reference
+        this.popover = null;
     }
@@ -188,4 +207,7 @@ render() {
         const errorClassName = this.error && !!this.errorClass ? this.errorClass : '';
-        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [h("span", { ref: (ref) => this.spanRef = ref, onClick: this.handleDateClick, class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder), h("button", { class: 'hidden-button', onClick: this.handleDateClick, style: { position: 'absolute', width: '100$', left: '0', top: '0' }, type: 'button' })], !this.isDesktop && this.ionDateTimeOnMobile &&
-            h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode }));
+        return h(Host, null, (this.isDesktop || !this.ionDateTimeOnMobile) && [
+            h("span", { class: `${disabledClassName} ${errorClassName} ${placeholderClassName}` }, this.date ? this.formatDate(this.date) : this.placeholder),
+            h("button", { ref: (ref) => this.buttonRef = ref, class: `hidden-button ${disabledClassName}`, onClick: this.handleDateClick, type: 'button', onFocus: this.handleFocus, onBlur: this.handleBlur })
+        ], !this.isDesktop && this.ionDateTimeOnMobile &&
+            h("ion-datetime", { ref: (ref) => this.ionDatetimeRef = ref, value: this.defaultDate, displayFormat: this.displayFormat, pickerFormat: this.pickerFormat, class: `${disabledClassName} ${errorClassName}`, placeholder: this.placeholder, monthNames: this.monthNames, monthShortNames: this.monthShortNames, dayNames: this.dayNames, dayShortNames: this.dayShortNames, cancelText: this.cancelLabel, doneText: this.okayLabel, min: this.min, max: this.max, disabled: this.disabled, onIonChange: this.handleInput.bind(this), mode: this.mode, onIonFocus: this.handleFocus, onIonBlur: this.handleBlur }));
     }
@@ -192,0 +214,0 @@ };

dist/ionic-datepicker/ionic-datepicker.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as a}from"./p-a91f0b70.js";e().then(e=>a([["p-3fcbe4c1",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],pickerFormat:[1,"picker-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],ionDateTimeOnMobile:[4,"ion-date-time-on-mobile"],max:[1],min:[1],required:[4],error:[4],ionPopoverOptions:[16],mode:[1],errorClass:[1,"error-class"],monthNames:[16],monthShortNames:[16],dayNames:[16],dayShortNames:[16],okayLabel:[1,"okay-label"],cancelLabel:[1,"cancel-label"],yearLabel:[1,"year-label"],date:[32],open:[64]}]]],["p-173b802d",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[1,"selected-date"],max:[1],min:[1]}]]]],e));
+import{p as e,b as a}from"./p-93a81d80.js";e().then(e=>a([["p-8da7203c",[[1,"ionic-datepicker",{displayFormat:[1,"display-format"],pickerFormat:[1,"picker-format"],disabled:[4],pickerOptions:[16],defaultDate:[1,"default-date"],placeholder:[1],ionDateTimeOnMobile:[4,"ion-date-time-on-mobile"],max:[1],min:[1],required:[4],error:[4],ionPopoverOptions:[16],mode:[1],errorClass:[1,"error-class"],monthNames:[16],monthShortNames:[16],dayNames:[16],dayShortNames:[16],okayLabel:[1,"okay-label"],cancelLabel:[1,"cancel-label"],yearLabel:[1,"year-label"],date:[32],open:[64]}]]],["p-55161599",[[0,"ionic-datepicker-popover",{disabled:[4],pickerOptions:[16],selectedDate:[1,"selected-date"],max:[1],min:[1]}]]]],e));

dist/types/components.d.ts

@@ -208,2 +208,6 @@ /* eslint-disable */
         /**
+          * Event that emits when the component loses the focus and gets blurred
+         */
+        "onBlurred"?: (event: CustomEvent<void>) => void;
+        /**
           * Event that emits the iso date string everytime the date changes
@@ -213,2 +217,6 @@ */
         /**
+          * Event that emits when the component gets the focus
+         */
+        "onFocused"?: (event: CustomEvent<void>) => void;
+        /**
           * How the date should be formatted for ion-datetime  for display purposes (https://ionicframework.com/docs/api/datetime/#display-and-picker-formats) Default: "DD. MMMM YYYY"
@@ -215,0 +223,0 @@ */

dist/types/components/ionic-datepicker/ionic-datepicker.d.ts

@@ -114,2 +114,10 @@ import { PopoverOptions, Mode } from '@ionic/core';
     /**
+     * Event that emits when the component gets the focus
+     */
+    focused: EventEmitter<void>;
+    /**
+     * Event that emits when the component loses the focus and gets blurred
+     */
+    blurred: EventEmitter<void>;
+    /**
      * Stores the current selected date as iso string
@@ -120,3 +128,3 @@ */
     private popover?;
-    private spanRef;
+    private buttonRef;
     private ionDatetimeRef;
@@ -129,2 +137,4 @@ /**
     componentWillLoad(): void;
+    handleFocus(): void;
+    handleBlur(): void;
     private formatDate;
@@ -131,0 +141,0 @@ handleInput(ev: CustomEvent<{

package.json

 {
   "name": "@codaline-io/ionic-datepicker",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A datepicker component for ionic",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

840715

increased by0.19%

Lines of code

11386

increased by0.48%

Number of medium supply chain risk alerts

10

decreased by-9.09%

No dependency changes