@getflip/swirl-components 0.397.0 → 0.397.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/components.json +1 -1
  2. package/dist/cjs/swirl-time-input.cjs.entry.js +36 -7
  3. package/dist/collection/components/swirl-time-input/swirl-time-input.js +36 -7
  4. package/dist/collection/components/swirl-time-input/swirl-time-input.stories.js +1 -1
  5. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +28 -0
  6. package/dist/components/swirl-time-input.js +37 -8
  7. package/dist/esm/swirl-time-input.entry.js +37 -8
  8. package/dist/swirl-components/p-5e182310.entry.js +1 -0
  9. package/dist/swirl-components/swirl-components.esm.js +1 -1
  10. package/dist/types/components/swirl-time-input/swirl-time-input.d.ts +1 -0
  11. package/package.json +1 -1
  12. package/dist/swirl-components/p-7992a861.entry.js +0 -1
package/dist/components/swirl-time-input.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { c as classNames } from './index2.js';
3
- import { I as IMask, p as parse, i as isValid, f as format } from './index3.js';
3
+ import { p as parse, i as isValid, f as format, I as IMask } from './index3.js';
4
4
  import { D as DesktopMediaQuery } from './media-query.service.js';
5
5
 
6
6
  const swirlTimeInputCss = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";
@@ -54,12 +54,35 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
54
54
  watchValue(newValue, oldValue) {
55
55
  if (newValue !== oldValue) {
56
56
  this.valueChange.emit(newValue);
57
- this.mask.value = newValue;
57
+ // Parse and format the value properly for the mask
58
+ if (this.mask && newValue) {
59
+ const pattern = this.getPattern();
60
+ // Try to parse with internal format first, then display format
61
+ let dateValue = parse(newValue, internalTimeFormat, new Date());
62
+ if (!isValid(dateValue)) {
63
+ dateValue = parse(newValue, pattern, new Date());
64
+ }
65
+ if (isValid(dateValue)) {
66
+ const formattedValue = format(dateValue, pattern);
67
+ this.mask.value = formattedValue;
68
+ }
69
+ }
70
+ else if (this.mask && !newValue) {
71
+ this.mask.value = "";
72
+ }
58
73
  }
59
74
  }
60
75
  updateIconSize(smallIcon) {
61
76
  this.iconSize = smallIcon ? 20 : 24;
62
77
  }
78
+ getPattern() {
79
+ return this.format
80
+ .replace(/(?<!H)H(?!H)/g, "HH")
81
+ .replace(/(?<!h)h(?!h)/g, "hh")
82
+ .replace(/(?<!m)m(?!m)/g, "mm")
83
+ .replace(/(?<!s)s(?!s)/g, "ss")
84
+ .replace(/(?<!a)a(?!a)/g, "aa");
85
+ }
63
86
  handleAutoSelect(event) {
64
87
  if (!this.autoSelect) {
65
88
  setTimeout(() => {
@@ -78,11 +101,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
78
101
  setupMask() {
79
102
  this.mask?.destroy();
80
103
  // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
81
- const pattern = this.format
82
- .replace(/(?<!H)H(?!H)/g, "HH")
83
- .replace(/(?<!h)h(?!h)/g, "hh")
84
- .replace(/(?<!m)m(?!m)/g, "mm")
85
- .replace(/(?<!s)s(?!s)/g, "ss");
104
+ const pattern = this.getPattern();
86
105
  this.mask = IMask(this.inputEl, {
87
106
  mask: Date,
88
107
  pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
@@ -115,6 +134,16 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
115
134
  to: 59,
116
135
  maxLength: 2,
117
136
  },
137
+ aa: {
138
+ mask: IMask.MaskedEnum,
139
+ enum: ["AM", "PM", "A", "P"],
140
+ maxLength: 2,
141
+ },
142
+ aaa: {
143
+ mask: IMask.MaskedEnum,
144
+ enum: ["am", "pm", "a", "p"],
145
+ maxLength: 3,
146
+ },
118
147
  },
119
148
  format: (date) => {
120
149
  if (!isValid(date)) {
@@ -143,7 +172,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
143
172
  const className = classNames("time-input", {
144
173
  "time-input--inline": this.inline,
145
174
  });
146
- return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
175
+ return (h(Host, { key: '3bc12a43b29dc70664c128917e1caede1d861277' }, h("div", { key: '5e47b258cc474122cf10e546d60263f8a994280b', class: className }, h("input", { key: 'f128b5900ce823029d38ea238fddf805f102bc16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'af82605413e6ab52d7509e6b876703123f7cec2a', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e3fa30e4be5418ed8c3e7c0ce167f7de502130e3', size: this.iconSize })))));
147
176
  }
148
177
  get el() { return this; }
149
178
  static get watchers() { return {
package/dist/esm/swirl-time-input.entry.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-g4wOnHIT.js';
2
2
  import { c as classnames } from './index-orsBiyT_.js';
3
- import { I as IMask, p as parse, i as isValid, f as format } from './index-D3UoejeY.js';
3
+ import { p as parse, i as isValid, f as format, I as IMask } from './index-D3UoejeY.js';
4
4
  import { D as DesktopMediaQuery } from './media-query.service-BZg4zbFx.js';
5
5
  import './utils-wi_3Z3FQ.js';
6
6
 
@@ -54,12 +54,35 @@ const SwirlTimeInput = class {
54
54
  watchValue(newValue, oldValue) {
55
55
  if (newValue !== oldValue) {
56
56
  this.valueChange.emit(newValue);
57
- this.mask.value = newValue;
57
+ // Parse and format the value properly for the mask
58
+ if (this.mask && newValue) {
59
+ const pattern = this.getPattern();
60
+ // Try to parse with internal format first, then display format
61
+ let dateValue = parse(newValue, internalTimeFormat, new Date());
62
+ if (!isValid(dateValue)) {
63
+ dateValue = parse(newValue, pattern, new Date());
64
+ }
65
+ if (isValid(dateValue)) {
66
+ const formattedValue = format(dateValue, pattern);
67
+ this.mask.value = formattedValue;
68
+ }
69
+ }
70
+ else if (this.mask && !newValue) {
71
+ this.mask.value = "";
72
+ }
58
73
  }
59
74
  }
60
75
  updateIconSize(smallIcon) {
61
76
  this.iconSize = smallIcon ? 20 : 24;
62
77
  }
78
+ getPattern() {
79
+ return this.format
80
+ .replace(/(?<!H)H(?!H)/g, "HH")
81
+ .replace(/(?<!h)h(?!h)/g, "hh")
82
+ .replace(/(?<!m)m(?!m)/g, "mm")
83
+ .replace(/(?<!s)s(?!s)/g, "ss")
84
+ .replace(/(?<!a)a(?!a)/g, "aa");
85
+ }
63
86
  handleAutoSelect(event) {
64
87
  if (!this.autoSelect) {
65
88
  setTimeout(() => {
@@ -78,11 +101,7 @@ const SwirlTimeInput = class {
78
101
  setupMask() {
79
102
  this.mask?.destroy();
80
103
  // Due to automatic padding with 0s, we need to replace single characters with full length blocks.
81
- const pattern = this.format
82
- .replace(/(?<!H)H(?!H)/g, "HH")
83
- .replace(/(?<!h)h(?!h)/g, "hh")
84
- .replace(/(?<!m)m(?!m)/g, "mm")
85
- .replace(/(?<!s)s(?!s)/g, "ss");
104
+ const pattern = this.getPattern();
86
105
  this.mask = IMask(this.inputEl, {
87
106
  mask: Date,
88
107
  pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
@@ -115,6 +134,16 @@ const SwirlTimeInput = class {
115
134
  to: 59,
116
135
  maxLength: 2,
117
136
  },
137
+ aa: {
138
+ mask: IMask.MaskedEnum,
139
+ enum: ["AM", "PM", "A", "P"],
140
+ maxLength: 2,
141
+ },
142
+ aaa: {
143
+ mask: IMask.MaskedEnum,
144
+ enum: ["am", "pm", "a", "p"],
145
+ maxLength: 3,
146
+ },
118
147
  },
119
148
  format: (date) => {
120
149
  if (!isValid(date)) {
@@ -143,7 +172,7 @@ const SwirlTimeInput = class {
143
172
  const className = classnames("time-input", {
144
173
  "time-input--inline": this.inline,
145
174
  });
146
- return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
175
+ return (h(Host, { key: '3bc12a43b29dc70664c128917e1caede1d861277' }, h("div", { key: '5e47b258cc474122cf10e546d60263f8a994280b', class: className }, h("input", { key: 'f128b5900ce823029d38ea238fddf805f102bc16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'af82605413e6ab52d7509e6b876703123f7cec2a', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e3fa30e4be5418ed8c3e7c0ce167f7de502130e3', size: this.iconSize })))));
147
176
  }
148
177
  get el() { return getElement(this); }
149
178
  static get watchers() { return {
package/dist/swirl-components/p-5e182310.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as i,c as t,h as e,H as s,d as n}from"./p-g4wOnHIT.js";import{c as a}from"./p-orsBiyT_.js";import{p as r,i as h,f as o,I as m}from"./p-D3UoejeY.js";import{D as p}from"./p-BKpD2IO9.js";import"./p-wi_3Z3FQ.js";const c="HH:mm:ss",l=class{constructor(e){i(this,e),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.valueChange=t(this,"valueChange",7),this.format="HH:mm",this.placeholder="hh:mm",this.iconSize=24,this.mediaQueryUnsubscribe=()=>{},this.onBlur=i=>{this.inputBlur.emit(i)},this.onClick=i=>{i.preventDefault()},this.onFocus=i=>{this.inputFocus.emit(i),this.handleAutoSelect(i)}}componentWillLoad(){const i=Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);this.id=`swirl-time-input-${i}`}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=p.subscribe((i=>{this.updateIconSize(i)})),this.autoFocus&&setTimeout((()=>{this.inputEl.focus()}))}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(i,t){if(i!==t)if(this.valueChange.emit(i),this.mask&&i){const t=this.getPattern();let e=r(i,c,new Date);if(h(e)||(e=r(i,t,new Date)),h(e)){const i=o(e,t);this.mask.value=i}}else this.mask&&!i&&(this.mask.value="")}updateIconSize(i){this.iconSize=i?20:24}getPattern(){return this.format.replace(/(?<!H)H(?!H)/g,"HH").replace(/(?<!h)h(?!h)/g,"hh").replace(/(?<!m)m(?!m)/g,"mm").replace(/(?<!s)s(?!s)/g,"ss").replace(/(?<!a)a(?!a)/g,"aa")}handleAutoSelect(i){this.autoSelect?i.target&&i.target instanceof HTMLInputElement&&i.target.select():setTimeout((()=>{i.target&&i.target instanceof HTMLInputElement&&i.target.setSelectionRange&&i.target.setSelectionRange(0,0)}))}setupMask(){this.mask?.destroy();const i=this.getPattern();if(this.mask=m(this.inputEl,{mask:Date,pattern:i.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{HH:{mask:m.MaskedRange,from:0,to:23,maxLength:2},hh:{mask:m.MaskedRange,from:1,to:12,maxLength:2},mm:{mask:m.MaskedRange,from:0,to:59,maxLength:2},ss:{mask:m.MaskedRange,from:0,to:59,maxLength:2},aa:{mask:m.MaskedEnum,enum:["AM","PM","A","P"],maxLength:2},aaa:{mask:m.MaskedEnum,enum:["am","pm","a","p"],maxLength:3}},format:t=>h(t)?(this.value=o(t,c),o(t,i)):"",parse:t=>r(t,i,new Date)}),this.value){const t=r(this.value,c,new Date);if(h(t)){const e=o(t,i);this.mask.value=e}}}render(){const i=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,t=a("time-input",{"time-input--inline":this.inline});return e(s,{key:"3bc12a43b29dc70664c128917e1caede1d861277"},e("div",{key:"5e47b258cc474122cf10e546d60263f8a994280b",class:t},e("input",{key:"f128b5900ce823029d38ea238fddf805f102bc16","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":i,autoFocus:this.autoFocus,class:"time-input__input",disabled:this.disabled,id:this.id,inputmode:"numeric",onBlur:this.onBlur,onClick:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder,ref:i=>this.inputEl=i,required:this.required,type:"text",readonly:this.readonly}),e("span",{key:"af82605413e6ab52d7509e6b876703123f7cec2a",class:"time-input__icon"},e("swirl-icon-time-outlined",{key:"e3fa30e4be5418ed8c3e7c0ce167f7de502130e3",size:this.iconSize}))))}get el(){return n(this)}static get watchers(){return{format:["watchFormat"],value:["watchValue"]}}};l.style=".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";export{l as swirl_time_input}