@limetech/lime-elements 38.46.2 → 38.46.3

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 (13) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/limel-date-picker.cjs.entry.js +12 -3
  3. package/dist/cjs/limel-date-picker.cjs.entry.js.map +1 -1
  4. package/dist/collection/components/date-picker/date-picker.js +12 -3
  5. package/dist/collection/components/date-picker/date-picker.js.map +1 -1
  6. package/dist/esm/limel-date-picker.entry.js +12 -3
  7. package/dist/esm/limel-date-picker.entry.js.map +1 -1
  8. package/dist/lime-elements/lime-elements.esm.js +1 -1
  9. package/dist/lime-elements/p-131c257a.entry.js +2 -0
  10. package/dist/lime-elements/p-131c257a.entry.js.map +1 -0
  11. package/package.json +1 -1
  12. package/dist/lime-elements/p-1a351a7f.entry.js +0 -2
  13. package/dist/lime-elements/p-1a351a7f.entry.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [38.46.3](https://github.com/Lundalogik/lime-elements/compare/v38.46.2...v38.46.3) (2026-02-07)
2
+
3
+ ### Bug Fixes
4
+
5
+
6
+ * **date-picker:** prevent value changes when disabled or readonly ([e4d2e41](https://github.com/Lundalogik/lime-elements/commit/e4d2e4184cdef5e747f391bd5ba6a8225109eee6)), closes [#3815](https://github.com/Lundalogik/lime-elements/issues/3815)
7
+
1
8
  ## [38.46.2](https://github.com/Lundalogik/lime-elements/compare/v38.46.1...v38.46.2) (2026-02-07)
2
9
 
3
10
  ### Bug Fixes
package/dist/cjs/limel-date-picker.cjs.entry.js CHANGED
@@ -126,16 +126,17 @@ const DatePicker = class {
126
126
  const inputProps = {
127
127
  onAction: this.clearValue,
128
128
  };
129
- if (this.value && !this.readonly) {
129
+ if (this.value && !this.readonly && !this.disabled) {
130
130
  inputProps.trailingIcon = 'clear_symbol';
131
131
  }
132
+ const helperText = this.disabled || this.readonly ? undefined : this.helperText;
132
133
  if (this.useNative) {
133
- return (index.h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
134
+ return (index.h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
134
135
  }
135
136
  const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
136
137
  const formatter = this.formatter || this.formatValue;
137
138
  return [
138
- index.h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
139
+ index.h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
139
140
  index.h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, index.h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
140
141
  ];
141
142
  }
@@ -158,6 +159,10 @@ const DatePicker = class {
158
159
  this.change.emit(date);
159
160
  }
160
161
  showCalendar(event) {
162
+ if (this.disabled || this.readonly) {
163
+ event.stopPropagation();
164
+ return;
165
+ }
161
166
  this.showPortal = true;
162
167
  const inputElement = this.textField.shadowRoot.querySelector('input');
163
168
  setTimeout(() => {
@@ -216,6 +221,10 @@ const DatePicker = class {
216
221
  this.showCalendar(event);
217
222
  }
218
223
  handleInputElementChange(event) {
224
+ if (this.disabled || this.readonly) {
225
+ event.stopPropagation();
226
+ return;
227
+ }
219
228
  if (event.detail === '') {
220
229
  this.clearValue();
221
230
  }
package/dist/cjs/limel-date-picker.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-date-picker.entry.cjs.js","mappings":";;;;;;;;;;;;;;;MAUa,aAAa;EAGtB,YAAmB,WAAmB,IAAI;IACtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;GAC5B;EAEM,UAAU,CAAC,IAAU,EAAE,UAAkB;IAC5C,IAAI,IAAI,EAAE;MACN,OAAOA,aAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;KACrE;IAED,OAAO,EAAE,CAAC;GACb;EAEM,SAAS,CAAC,IAAY,EAAE,UAAkB;IAC7C,IAAI,IAAI,EAAE;MACN,OAAOA,aAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC,MAAM,EAAE,CAAC;KAC5C;IAED,OAAO,IAAI,CAAC;GACf;EAEM,WAAW;IACd,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE;MACxB,OAAO,IAAI,CAAC;KACf;IAED,OAAO,IAAI,CAAC,QAAQ,CAAC;GACxB;EAEM,aAAa,CAAC,IAAc;IAC/B,QACI;MACI,IAAI,EAAE,GAAG;MACT,IAAI,EAAE,IAAI;MACV,IAAI,EAAE,YAAY;MAClB,KAAK,EAAE,SAAS;MAChB,OAAO,EAAE,WAAW;MACpB,IAAI,EAAE,MAAM;MACZ,QAAQ,EAAE,QAAQ;KACrB,CAAC,IAAI,CAAC,IAAI,QAAQ,EACrB;GACL;;;ACrDL,MAAM,aAAa,GAAG,yHAAyH;;ACgB/I;AACA,MAAM,yBAAyB,GAAiC;EAC5D,IAAI,EAAE,MAAM;EACZ,IAAI,EAAE,MAAM;;;;EAIZ,IAAI,EAAEC,kBAAW,EAAE,GAAG,MAAM,GAAG,MAAM;EACrC,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,MAAM;EACf,IAAI,EAAE,MAAM;EACZ,QAAQ,EAAE,gBAAgB;EAC1B,OAAO,EAAE,gBAAgB;CAC5B,CAAC;AACF,MAAM,mBAAmB,GAAG;EACxB,IAAI,EAAE,SAAS;EACf,IAAI,EAAE,OAAO;EACb,IAAI,EAAE,YAAY;EAClB,KAAK,EAAE,MAAM;EACb,gBAAgB,EAAE,iBAAiB;CACtC,CAAC;MAqBW,UAAU;EA0GnB;;;IAHQ,aAAQ,GAAG,wBAAwBC,+BAAkB,EAAE,EAAE,CAAC;IAiL1D,0BAAqB,GAAG,CAAC,KAAiB;MAC9C,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAC/C,OAAO;OACV;MAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;MAC5D,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;QACzC,IAAI,CAAC,YAAY,EAAE,CAAC;OACvB;KACJ,CAAC;IAwCM,gBAAW,GAAG,CAAC,KAAW,KAC9B,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;oBAlU5C,KAAK;oBAQL,KAAK;mBAON,KAAK;;;;oBAwBJ,KAAK;;gBAYC,UAAU;;oBAaL,IAAI;;;sBAwBZ,KAAK;IAWtB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjE,IAAI,CAAC,wBAAwB;MACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,gCAAgC;MACjC,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxD;EAEM,iBAAiB;IACpB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,KAAKD,kBAAW,EAAE,IAAIE,sBAAe,EAAE,CAAC,CAAC;IAExE,IAAI,CAAC,2BAA2B,EAAE,CAAC;GACtC;EAEM,mBAAmB;IACtB,IAAI,CAAC,2BAA2B,EAAE,CAAC;GACtC;EAEM,oBAAoB;IACvB,IAAI,CAAC,YAAY,EAAE,CAAC;GACvB;EAEM,MAAM;IACT,MAAM,UAAU,GAAQ;MACpB,QAAQ,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAC9B,UAAU,CAAC,YAAY,GAAG,cAAc,CAAC;KAC5C;IAED,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,QACIC,+BACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GACpC,EACJ;KACL;IAED,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC;IAErD,OAAO;MACHA,6CACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,EAC9C,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,wBAAwB,EACvC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,IAC9B,UAAU,EAChB;MACFA,0BACI,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,cAAc,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,IAE7CA,qCACI,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,GACrC,CACS;KAClB,CAAC;GACL;EAEO,2BAA2B;IAC/B,IAAI,CAAC,UAAU,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;IACpE,IAAI,CAAC,YAAY,GAAG,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEzD,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3C;SAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;KACrC;SAAM;MACH,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrE;GACJ;EAEO,mBAAmB,CAAC,KAA0B;IAClD,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACrC,KAAK,CAAC,MAAM,EACZ,IAAI,CAAC,cAAc,CACtB,CAAC;IACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1B;EAEO,YAAY,CAAC,KAAK;IACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtE,UAAU,CAAC;MACP,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG,YAAY,CAAC;KACvD,CAAC,CAAC;IACH,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAE;MAC/D,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,CACrB,MAAM,EACN,IAAI,CAAC,gCAAgC,EACrC;MACI,OAAO,EAAE,IAAI;KAChB,CACJ,CAAC;GACL;EAEO,gCAAgC,CAAC,KAAK;;;;;;IAM1C,IAAI,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,kBAAkB,EAAE;MACjD,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;GACJ;EAEO,YAAY;IAChB,UAAU,CAAC;MACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KAC3B,CAAC,CAAC;IACH,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CACxB,MAAM,EACN,IAAI,CAAC,gCAAgC,CACxC,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;GACJ;EAEO,oBAAoB;;;IAGxB,MAAM,YAAY,GAAG,IAAIC,sBAAY,CACjC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAC7D,CAAC;IACF,YAAY,CAAC,oBAAoB,EAAE,CAAC,eAAe,EAAE,CAAC;IACtD,YAAY,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GACtC;EAaO,oBAAoB,CAAC,KAAK;IAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;MAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1B;EAEO,YAAY,CAAC,KAAK;IACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,OAAO;KACV;IAED,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GAC5B;EAEO,wBAAwB,CAAC,KAAK;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;GAC3B;EAEO,mBAAmB;IACvB,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;GAC3D;EAEO,UAAU;IACd,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1B;;;;;;;","names":["moment","isIOSDevice","createRandomString","isAndroidDevice","h","MDCTextField"],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}
1
+ {"file":"limel-date-picker.entry.cjs.js","mappings":"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","names":["moment","isIOSDevice","createRandomString","isAndroidDevice","h","MDCTextField"],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly && !this.disabled) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n const helperText =\n this.disabled || this.readonly ? undefined : this.helperText;\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n\n return;\n }\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n return;\n }\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}
package/dist/collection/components/date-picker/date-picker.js CHANGED
@@ -91,16 +91,17 @@ export class DatePicker {
91
91
  const inputProps = {
92
92
  onAction: this.clearValue,
93
93
  };
94
- if (this.value && !this.readonly) {
94
+ if (this.value && !this.readonly && !this.disabled) {
95
95
  inputProps.trailingIcon = 'clear_symbol';
96
96
  }
97
+ const helperText = this.disabled || this.readonly ? undefined : this.helperText;
97
98
  if (this.useNative) {
98
- return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
99
+ return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
99
100
  }
100
101
  const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
101
102
  const formatter = this.formatter || this.formatValue;
102
103
  return [
103
- h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
104
+ h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
104
105
  h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
105
106
  ];
106
107
  }
@@ -123,6 +124,10 @@ export class DatePicker {
123
124
  this.change.emit(date);
124
125
  }
125
126
  showCalendar(event) {
127
+ if (this.disabled || this.readonly) {
128
+ event.stopPropagation();
129
+ return;
130
+ }
126
131
  this.showPortal = true;
127
132
  const inputElement = this.textField.shadowRoot.querySelector('input');
128
133
  setTimeout(() => {
@@ -181,6 +186,10 @@ export class DatePicker {
181
186
  this.showCalendar(event);
182
187
  }
183
188
  handleInputElementChange(event) {
189
+ if (this.disabled || this.readonly) {
190
+ event.stopPropagation();
191
+ return;
192
+ }
184
193
  if (event.detail === '') {
185
194
  this.clearValue();
186
195
  }
package/dist/collection/components/date-picker/date-picker.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"]}
1
+ {"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,CAAC,EACD,IAAI,EACJ,KAAK,EACL,OAAO,EAEP,KAAK,GACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGjE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,qCAAqC;AACrC,MAAM,yBAAyB,GAAiC;EAC5D,IAAI,EAAE,MAAM;EACZ,IAAI,EAAE,MAAM;EACZ,iEAAiE;EACjE,+CAA+C;EAC/C,wDAAwD;EACxD,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;EACrC,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,MAAM;EACf,IAAI,EAAE,MAAM;EACZ,QAAQ,EAAE,gBAAgB;EAC1B,OAAO,EAAE,gBAAgB;CAC5B,CAAC;AACF,MAAM,mBAAmB,GAAG;EACxB,IAAI,EAAE,SAAS;EACf,IAAI,EAAE,OAAO;EACb,IAAI,EAAE,YAAY;EAClB,KAAK,EAAE,MAAM;EACb,gBAAgB,EAAE,iBAAiB;CACtC,CAAC;AACF,oCAAoC;AAEpC;;;;;;;;;;;;GAYG;AAMH,MAAM,OAAO,UAAU;EA0GnB;IAHQ,aAAQ,GAAG,wBAAwB,kBAAkB,EAAE,EAAE,CAAC;IAyL1D,0BAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAClD,IAAI,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAC/C,OAAO;OACV;MAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;MAC5D,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;QACzC,IAAI,CAAC,YAAY,EAAE,CAAC;OACvB;IACL,CAAC,CAAC;IA4CM,gBAAW,GAAG,CAAC,KAAW,EAAU,EAAE,CAC1C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;oBA9U5C,KAAK;oBAQL,KAAK;mBAON,KAAK;;;;oBAwBJ,KAAK;;gBAYC,UAAU;;oBAaL,IAAI;;;sBAwBZ,KAAK;IAWtB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjE,IAAI,CAAC,wBAAwB;MACzB,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,GAAG,IAAI,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/D,IAAI,CAAC,gCAAgC;MACjC,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACxD;EAEM,iBAAiB;IACpB,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,eAAe,EAAE,CAAC,CAAC;IAExE,IAAI,CAAC,2BAA2B,EAAE,CAAC;EACvC,CAAC;EAEM,mBAAmB;IACtB,IAAI,CAAC,2BAA2B,EAAE,CAAC;EACvC,CAAC;EAEM,oBAAoB;IACvB,IAAI,CAAC,YAAY,EAAE,CAAC;EACxB,CAAC;EAEM,MAAM;IACT,MAAM,UAAU,GAAQ;MACpB,QAAQ,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC;IAEF,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAChD,UAAU,CAAC,YAAY,GAAG,cAAc,CAAC;KAC5C;IAED,MAAM,UAAU,GACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC;IAEjE,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,OAAO,CACH,yBACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,QAAQ,EAAE,IAAI,CAAC,mBAAmB,GACpC,CACL,CAAC;KACL;IAED,MAAM,cAAc,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAC/D,oBAAoB,CACvB,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC;IAErD,OAAO;MACH,uCACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,EAC9C,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,wBAAwB,EACvC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,IAC9B,UAAU,EAChB;MACF,oBACI,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,cAAc,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE;QAE7C,+BACI,MAAM,EAAE,IAAI,CAAC,cAAc,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,GACrC,CACS;KAClB,CAAC;EACN,CAAC;EAEO,2BAA2B;IAC/B,IAAI,CAAC,UAAU,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC;IACpE,IAAI,CAAC,YAAY,GAAG,mBAAmB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAEzD,IAAI,IAAI,CAAC,SAAS,EAAE;MAChB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3C;SAAM,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MACtC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;KACrC;SAAM;MACH,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACrE;EACL,CAAC;EAEO,mBAAmB,CAAC,KAA0B;IAClD,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,CACrC,KAAK,CAAC,MAAM,EACZ,IAAI,CAAC,cAAc,CACtB,CAAC;IACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,CAAC;EAEO,YAAY,CAAC,KAAK;IACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,OAAO;KACV;IACD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;IACvB,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtE,UAAU,CAAC,GAAG,EAAE;MACZ,IAAI,CAAC,kBAAkB,CAAC,YAAY,GAAG,YAAY,CAAC;IACxD,CAAC,CAAC,CAAC;IACH,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAE;MAC/D,OAAO,EAAE,IAAI;KAChB,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,CACrB,MAAM,EACN,IAAI,CAAC,gCAAgC,EACrC;MACI,OAAO,EAAE,IAAI;KAChB,CACJ,CAAC;EACN,CAAC;EAEO,gCAAgC,CAAC,KAAK;IAC1C,6DAA6D;IAC7D,oCAAoC;IACpC,sDAAsD;IACtD,yDAAyD;IACzD,yBAAyB;IACzB,IAAI,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,kBAAkB,EAAE;MACjD,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;EACL,CAAC;EAEO,YAAY;IAChB,UAAU,CAAC,GAAG,EAAE;MACZ,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC5B,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtE,QAAQ,CAAC,mBAAmB,CACxB,MAAM,EACN,IAAI,CAAC,gCAAgC,CACxC,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC/B;EACL,CAAC;EAEO,oBAAoB;IACxB,mDAAmD;IACnD,wCAAwC;IACxC,MAAM,YAAY,GAAG,IAAI,YAAY,CACjC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAC7D,CAAC;IACF,YAAY,CAAC,oBAAoB,EAAE,CAAC,eAAe,EAAE,CAAC;IACtD,YAAY,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;EACvC,CAAC;EAaO,oBAAoB,CAAC,KAAK;IAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC;IAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;MAC5B,IAAI,CAAC,YAAY,EAAE,CAAC;KACvB;IAED,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,CAAC;EAEO,YAAY,CAAC,KAAK;IACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,OAAO;KACV;IAED,IAAI,IAAI,CAAC,UAAU,EAAE;MACjB,OAAO;KACV;IAED,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;EAC7B,CAAC;EAEO,wBAAwB,CAAC,KAAK;IAClC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;MAChC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,OAAO;KACV;IACD,IAAI,KAAK,CAAC,MAAM,KAAK,EAAE,EAAE;MACrB,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;EAC5B,CAAC;EAEO,mBAAmB;IACvB,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;EAC5D,CAAC;EAEO,UAAU;IACd,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIJ","sourcesContent":["import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly && !this.disabled) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n const helperText =\n this.disabled || this.readonly ? undefined : this.helperText;\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n\n return;\n }\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n return;\n }\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"]}
package/dist/esm/limel-date-picker.entry.js CHANGED
@@ -122,16 +122,17 @@ const DatePicker = class {
122
122
  const inputProps = {
123
123
  onAction: this.clearValue,
124
124
  };
125
- if (this.value && !this.readonly) {
125
+ if (this.value && !this.readonly && !this.disabled) {
126
126
  inputProps.trailingIcon = 'clear_symbol';
127
127
  }
128
+ const helperText = this.disabled || this.readonly ? undefined : this.helperText;
128
129
  if (this.useNative) {
129
- return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: this.helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
130
+ return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
130
131
  }
131
132
  const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
132
133
  const formatter = this.formatter || this.formatValue;
133
134
  return [
134
- h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
135
+ h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
135
136
  h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
136
137
  ];
137
138
  }
@@ -154,6 +155,10 @@ const DatePicker = class {
154
155
  this.change.emit(date);
155
156
  }
156
157
  showCalendar(event) {
158
+ if (this.disabled || this.readonly) {
159
+ event.stopPropagation();
160
+ return;
161
+ }
157
162
  this.showPortal = true;
158
163
  const inputElement = this.textField.shadowRoot.querySelector('input');
159
164
  setTimeout(() => {
@@ -212,6 +217,10 @@ const DatePicker = class {
212
217
  this.showCalendar(event);
213
218
  }
214
219
  handleInputElementChange(event) {
220
+ if (this.disabled || this.readonly) {
221
+ event.stopPropagation();
222
+ return;
223
+ }
215
224
  if (event.detail === '') {
216
225
  this.clearValue();
217
226
  }
package/dist/esm/limel-date-picker.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"limel-date-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}
1
+ {"file":"limel-date-picker.entry.js","mappings":"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","names":[],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly && !this.disabled) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n const helperText =\n this.disabled || this.readonly ? undefined : this.helperText;\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n\n return;\n }\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n return;\n }\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"version":3}
package/dist/lime-elements/lime-elements.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,b as l}from"./p-bdfa539c.js";export{s as setNonce}from"./p-bdfa539c.js";const a=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};a().then((e=>l(JSON.parse('[["p-ce0e6d28",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-4709aaa8",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513],"canScrollUp":[32],"canScrollDown":[32]}]]],["p-d759e826",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-36ae8adf",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-f023a03b",[[17,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-c445aed7",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-a92369cb",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-1dbdf69d",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-975008cd",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-1a351a7f",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cb81be35",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-312d104a",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-341b6814",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-263bac63",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-08c6b70d",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"accessibleValuesLabel":[513,"accessible-values-label"],"displayAxisLabels":[516,"display-axis-labels"],"displayItemText":[516,"display-item-text"],"displayItemValue":[516,"display-item-value"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-4f2b9345",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-c3f85d29",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-291cd743",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-054daef5",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-75926c24",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513],"paginationLocation":[513,"pagination-location"]}]]],["p-b3f1f121",[[0,"limel-drag-handle",{"dragDirection":[513,"drag-direction"],"tooltipOpenDirection":[513,"tooltip-open-direction"],"language":[513]}]]],["p-e4fd6591",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-6f3a34f1",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2f654a76",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-8a7b61e7",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-99e24e57",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[516],"disabled":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"lineNumbers":[516,"line-numbers"],"lineWrapping":[516,"line-wrapping"],"fold":[516],"lint":[516],"colorScheme":[513,"color-scheme"],"translationLanguage":[513,"translation-language"],"showCopyButton":[516,"show-copy-button"],"random":[32],"wasCopied":[32]}]]],["p-f202ffb4",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-ae25ca92",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-758a9a1c",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"displaysPercentageColors":[516,"displays-percentage-colors"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-6ef87216",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-574bd8ec",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-08f75835",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-b89cb5a3",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-de7818a6",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-718d5311",[[1,"limel-config",{"config":[16]}]]],["p-3fcd15bd",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-7b681f7c",[[1,"limel-grid"]]],["p-f3180d48",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-e8370ee5",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-a7465590",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-ced4d1db",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-81de7836",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-0c203c29",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-d3d4fe88",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-666aeb03",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-6ddb0265",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-317f00ea",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-1af74f5c",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ec03874d",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-e1df39fc",[[1,"limel-3d-hover-effect-glow"]]],["p-cecdb592",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-f1c9089e",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-5ef0a1fe",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-72a79ebe",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-6c5eea77",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-280cbd66",[[1,"limel-badge",{"label":[520]}]]],["p-8f8e81a9",[[17,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-60a43c1d",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-9697010e",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-404af152",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[516,"lazy-load-images"],"removeEmptyParagraphs":[516,"remove-empty-paragraphs"]}]]],["p-6ef23925",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9c9876f9",[[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-b5e8a4af",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"searchPlaceholder":[1,"search-placeholder"],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[17,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]]]'),e)));
1
+ import{p as e,b as l}from"./p-bdfa539c.js";export{s as setNonce}from"./p-bdfa539c.js";const a=()=>{const l=import.meta.url;const a={};if(l!==""){a.resourcesUrl=new URL(".",l).href}return e(a)};a().then((e=>l(JSON.parse('[["p-ce0e6d28",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-4709aaa8",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513],"canScrollUp":[32],"canScrollDown":[32]}]]],["p-d759e826",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-36ae8adf",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-f023a03b",[[17,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-c445aed7",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-a92369cb",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-1dbdf69d",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-975008cd",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-131c257a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cb81be35",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-312d104a",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-341b6814",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-263bac63",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-08c6b70d",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"accessibleValuesLabel":[513,"accessible-values-label"],"displayAxisLabels":[516,"display-axis-labels"],"displayItemText":[516,"display-item-text"],"displayItemValue":[516,"display-item-value"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-4f2b9345",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-c3f85d29",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-291cd743",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-054daef5",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-75926c24",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513],"paginationLocation":[513,"pagination-location"]}]]],["p-b3f1f121",[[0,"limel-drag-handle",{"dragDirection":[513,"drag-direction"],"tooltipOpenDirection":[513,"tooltip-open-direction"],"language":[513]}]]],["p-e4fd6591",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-6f3a34f1",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2f654a76",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-8a7b61e7",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-99e24e57",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[516],"disabled":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"lineNumbers":[516,"line-numbers"],"lineWrapping":[516,"line-wrapping"],"fold":[516],"lint":[516],"colorScheme":[513,"color-scheme"],"translationLanguage":[513,"translation-language"],"showCopyButton":[516,"show-copy-button"],"random":[32],"wasCopied":[32]}]]],["p-f202ffb4",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-ae25ca92",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-758a9a1c",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"displaysPercentageColors":[516,"displays-percentage-colors"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-6ef87216",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-574bd8ec",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-08f75835",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-b89cb5a3",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-de7818a6",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-718d5311",[[1,"limel-config",{"config":[16]}]]],["p-3fcd15bd",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-7b681f7c",[[1,"limel-grid"]]],["p-f3180d48",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-e8370ee5",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-a7465590",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-ced4d1db",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-81de7836",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-0c203c29",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-d3d4fe88",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-666aeb03",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-6ddb0265",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-317f00ea",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-1af74f5c",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ec03874d",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-e1df39fc",[[1,"limel-3d-hover-effect-glow"]]],["p-cecdb592",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-f1c9089e",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-5ef0a1fe",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-72a79ebe",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-6c5eea77",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-280cbd66",[[1,"limel-badge",{"label":[520]}]]],["p-8f8e81a9",[[17,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-60a43c1d",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-9697010e",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-404af152",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[516,"lazy-load-images"],"removeEmptyParagraphs":[516,"remove-empty-paragraphs"]}]]],["p-6ef23925",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["p-9c9876f9",[[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}],[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-b5e8a4af",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"searchPlaceholder":[1,"search-placeholder"],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[17,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]]]'),e)));
2
2
  //# sourceMappingURL=lime-elements.esm.js.map
package/dist/lime-elements/p-131c257a.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,c as i,h as e,g as s}from"./p-bdfa539c.js";import{c as h}from"./p-ad52787a.js";import{i as n,a}from"./p-04fd1563.js";import"./p-cd51aca3.js";import{m as r}from"./p-be00f5bb.js";import{M as l}from"./p-85a982f9.js";import"./p-4e9b4087.js";import"./p-9f722992.js";import"./p-5a478c15.js";import"./p-e7281e6a.js";class o{constructor(t="en"){this.language=t}formatDate(t,i){if(t){return r(t).locale(this.getLanguage()).format(i)}return""}parseDate(t,i){if(t){return r(t,i).toDate()}return null}getLanguage(){if(this.language==="no"){return"nb"}return this.language}getDateFormat(t){return{date:"L",time:"LT",week:"[w] W GGGG",month:"MM/YYYY",quarter:"[Q]Q YYYY",year:"YYYY",datetime:"L - LT"}[t]||"L - LT"}}const d=":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";const u={date:"date",time:"time",week:n()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"};const m={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this.portalId=`date-picker-calendar-${h()}`;this.documentClickListener=t=>{if(t.composedPath().includes(this.textField)){return}const i=document.querySelector(`#${this.portalId}`);if(!i.contains(t.target)){this.hideCalendar()}};this.formatValue=t=>this.dateFormatter.formatDate(t,this.internalFormat);this.disabled=false;this.readonly=false;this.invalid=false;this.label=undefined;this.placeholder=undefined;this.helperText=undefined;this.required=false;this.value=undefined;this.type="datetime";this.format=undefined;this.language="en";this.formatter=undefined;this.internalFormat=undefined;this.showPortal=false;this.handleCalendarChange=this.handleCalendarChange.bind(this);this.handleInputElementChange=this.handleInputElementChange.bind(this);this.showCalendar=this.showCalendar.bind(this);this.dateFormatter=new o(this.language);this.clearValue=this.clearValue.bind(this);this.hideCalendar=this.hideCalendar.bind(this);this.onInputClick=this.onInputClick.bind(this);this.nativeChangeHandler=this.nativeChangeHandler.bind(this);this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(n()||a());this.updateInternalFormatAndType()}componentWillUpdate(){this.updateInternalFormatAndType()}disconnectedCallback(){this.hideCalendar()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly&&!this.disabled){t.trailingIcon="clear_symbol"}const i=this.disabled||this.readonly?undefined:this.helperText;if(this.useNative){return e("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:i,required:this.required,value:this.formatValue(this.value),type:this.nativeType,onChange:this.nativeChangeHandler})}const s=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");const h=this.formatter||this.formatValue;return[e("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,placeholder:this.placeholder,helperText:i,required:this.required,value:this.value?h(this.value):"",onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),e("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":s}},e("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,formatter:h,onChange:this.handleCalendarChange}))]}updateInternalFormatAndType(){this.nativeType=u[this.type||"default"];this.nativeFormat=m[this.nativeType];if(this.useNative){this.internalFormat=this.nativeFormat}else if(this.formatter||this.format){this.internalFormat=this.format}else{this.internalFormat=this.dateFormatter.getDateFormat(this.type)}}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.change.emit(i)}showCalendar(t){if(this.disabled||this.readonly){t.stopPropagation();return}this.showPortal=true;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i}));t.stopPropagation();document.addEventListener("mousedown",this.documentClickListener,{passive:true});document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:true})}preventBlurFromCalendarContainer(t){if(t.relatedTarget===this.datePickerCalendar){t.stopPropagation()}}hideCalendar(){setTimeout((()=>{this.showPortal=false}));document.removeEventListener("mousedown",this.documentClickListener);document.removeEventListener("blur",this.preventBlurFromCalendarContainer);if(!this.pickerIsAutoClosing()){this.fixFlatpickrFocusBug()}}fixFlatpickrFocusBug(){const t=new l(this.textField.shadowRoot.querySelector(".mdc-text-field"));t.getDefaultFoundation().deactivateFocus();t.valid=!this.invalid}handleCalendarChange(t){const i=t.detail;t.stopPropagation();if(this.pickerIsAutoClosing()){this.hideCalendar()}this.change.emit(i)}onInputClick(t){if(this.disabled||this.readonly){return}if(this.showPortal){return}this.showCalendar(t)}handleInputElementChange(t){if(this.disabled||this.readonly){t.stopPropagation();return}if(t.detail===""){this.clearValue()}t.stopPropagation()}pickerIsAutoClosing(){return this.type!=="datetime"&&this.type!=="time"}clearValue(){this.change.emit(null)}get host(){return s(this)}};c.style=d;export{c as limel_date_picker};
2
+ //# sourceMappingURL=p-131c257a.entry.js.map
package/dist/lime-elements/p-131c257a.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["DateFormatter","constructor","language","this","formatDate","date","dateFormat","moment","locale","getLanguage","format","parseDate","toDate","getDateFormat","type","time","week","month","quarter","year","datetime","datePickerCss","nativeTypeForConsumerType","isIOSDevice","default","nativeFormatForType","DatePicker","hostRef","portalId","createRandomString","documentClickListener","event","composedPath","includes","textField","element","document","querySelector","contains","target","hideCalendar","formatValue","value","dateFormatter","internalFormat","handleCalendarChange","bind","handleInputElementChange","showCalendar","clearValue","onInputClick","nativeChangeHandler","preventBlurFromCalendarContainer","componentWillLoad","useNative","readonly","isAndroidDevice","updateInternalFormatAndType","componentWillUpdate","disconnectedCallback","render","inputProps","onAction","disabled","trailingIcon","helperText","undefined","h","invalid","label","required","nativeType","onChange","dropdownZIndex","getComputedStyle","host","getPropertyValue","formatter","Object","assign","placeholder","onFocus","onBlur","onClick","ref","el","containerId","visible","showPortal","containerStyle","datePickerCalendar","isOpen","nativeFormat","stopPropagation","detail","change","emit","inputElement","shadowRoot","setTimeout","addEventListener","passive","capture","relatedTarget","removeEventListener","pickerIsAutoClosing","fixFlatpickrFocusBug","mdcTextField","MDCTextField","getDefaultFoundation","deactivateFocus","valid"],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly && !this.disabled) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n const helperText =\n this.disabled || this.readonly ? undefined : this.helperText;\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n\n return;\n }\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (this.disabled || this.readonly) {\n event.stopPropagation();\n return;\n }\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "38.46.2",
3
+ "version": "38.46.3",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
package/dist/lime-elements/p-1a351a7f.entry.js DELETED
@@ -1,2 +0,0 @@
1
- import{r as t,c as i,h as e,g as s}from"./p-bdfa539c.js";import{c as h}from"./p-ad52787a.js";import{i as n,a}from"./p-04fd1563.js";import"./p-cd51aca3.js";import{m as r}from"./p-be00f5bb.js";import{M as l}from"./p-85a982f9.js";import"./p-4e9b4087.js";import"./p-9f722992.js";import"./p-5a478c15.js";import"./p-e7281e6a.js";class o{constructor(t="en"){this.language=t}formatDate(t,i){if(t){return r(t).locale(this.getLanguage()).format(i)}return""}parseDate(t,i){if(t){return r(t,i).toDate()}return null}getLanguage(){if(this.language==="no"){return"nb"}return this.language}getDateFormat(t){return{date:"L",time:"LT",week:"[w] W GGGG",month:"MM/YYYY",quarter:"[Q]Q YYYY",year:"YYYY",datetime:"L - LT"}[t]||"L - LT"}}const d=":host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}";const u={date:"date",time:"time",week:n()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"};const m={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"};const c=class{constructor(e){t(this,e);this.change=i(this,"change",7);this.portalId=`date-picker-calendar-${h()}`;this.documentClickListener=t=>{if(t.composedPath().includes(this.textField)){return}const i=document.querySelector(`#${this.portalId}`);if(!i.contains(t.target)){this.hideCalendar()}};this.formatValue=t=>this.dateFormatter.formatDate(t,this.internalFormat);this.disabled=false;this.readonly=false;this.invalid=false;this.label=undefined;this.placeholder=undefined;this.helperText=undefined;this.required=false;this.value=undefined;this.type="datetime";this.format=undefined;this.language="en";this.formatter=undefined;this.internalFormat=undefined;this.showPortal=false;this.handleCalendarChange=this.handleCalendarChange.bind(this);this.handleInputElementChange=this.handleInputElementChange.bind(this);this.showCalendar=this.showCalendar.bind(this);this.dateFormatter=new o(this.language);this.clearValue=this.clearValue.bind(this);this.hideCalendar=this.hideCalendar.bind(this);this.onInputClick=this.onInputClick.bind(this);this.nativeChangeHandler=this.nativeChangeHandler.bind(this);this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(n()||a());this.updateInternalFormatAndType()}componentWillUpdate(){this.updateInternalFormatAndType()}disconnectedCallback(){this.hideCalendar()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly){t.trailingIcon="clear_symbol"}if(this.useNative){return e("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formatValue(this.value),type:this.nativeType,onChange:this.nativeChangeHandler})}const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");const s=this.formatter||this.formatValue;return[e("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,placeholder:this.placeholder,helperText:this.helperText,required:this.required,value:this.value?s(this.value):"",onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),e("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":i}},e("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,formatter:s,onChange:this.handleCalendarChange}))]}updateInternalFormatAndType(){this.nativeType=u[this.type||"default"];this.nativeFormat=m[this.nativeType];if(this.useNative){this.internalFormat=this.nativeFormat}else if(this.formatter||this.format){this.internalFormat=this.format}else{this.internalFormat=this.dateFormatter.getDateFormat(this.type)}}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.change.emit(i)}showCalendar(t){this.showPortal=true;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i}));t.stopPropagation();document.addEventListener("mousedown",this.documentClickListener,{passive:true});document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:true})}preventBlurFromCalendarContainer(t){if(t.relatedTarget===this.datePickerCalendar){t.stopPropagation()}}hideCalendar(){setTimeout((()=>{this.showPortal=false}));document.removeEventListener("mousedown",this.documentClickListener);document.removeEventListener("blur",this.preventBlurFromCalendarContainer);if(!this.pickerIsAutoClosing()){this.fixFlatpickrFocusBug()}}fixFlatpickrFocusBug(){const t=new l(this.textField.shadowRoot.querySelector(".mdc-text-field"));t.getDefaultFoundation().deactivateFocus();t.valid=!this.invalid}handleCalendarChange(t){const i=t.detail;t.stopPropagation();if(this.pickerIsAutoClosing()){this.hideCalendar()}this.change.emit(i)}onInputClick(t){if(this.disabled||this.readonly){return}if(this.showPortal){return}this.showCalendar(t)}handleInputElementChange(t){if(t.detail===""){this.clearValue()}t.stopPropagation()}pickerIsAutoClosing(){return this.type!=="datetime"&&this.type!=="time"}clearValue(){this.change.emit(null)}get host(){return s(this)}};c.style=d;export{c as limel_date_picker};
2
- //# sourceMappingURL=p-1a351a7f.entry.js.map
package/dist/lime-elements/p-1a351a7f.entry.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"names":["DateFormatter","constructor","language","this","formatDate","date","dateFormat","moment","locale","getLanguage","format","parseDate","toDate","getDateFormat","type","time","week","month","quarter","year","datetime","datePickerCss","nativeTypeForConsumerType","isIOSDevice","default","nativeFormatForType","DatePicker","hostRef","portalId","createRandomString","documentClickListener","event","composedPath","includes","textField","element","document","querySelector","contains","target","hideCalendar","formatValue","value","dateFormatter","internalFormat","handleCalendarChange","bind","handleInputElementChange","showCalendar","clearValue","onInputClick","nativeChangeHandler","preventBlurFromCalendarContainer","componentWillLoad","useNative","readonly","isAndroidDevice","updateInternalFormatAndType","componentWillUpdate","disconnectedCallback","render","inputProps","onAction","trailingIcon","h","disabled","invalid","label","helperText","required","nativeType","onChange","dropdownZIndex","getComputedStyle","host","getPropertyValue","formatter","Object","assign","placeholder","onFocus","onBlur","onClick","ref","el","containerId","visible","showPortal","containerStyle","datePickerCalendar","isOpen","nativeFormat","stopPropagation","detail","change","emit","inputElement","shadowRoot","setTimeout","addEventListener","passive","capture","relatedTarget","removeEventListener","pickerIsAutoClosing","fixFlatpickrFocusBug","mdcTextField","MDCTextField","getDefaultFoundation","deactivateFocus","valid"],"sources":["./src/components/date-picker/date-formatter.ts","./src/components/date-picker/date-picker.scss?tag=limel-date-picker&encapsulation=shadow","./src/components/date-picker/date-picker.tsx"],"sourcesContent":["import 'moment/locale/da';\nimport 'moment/locale/de';\nimport 'moment/locale/fi';\nimport 'moment/locale/fr';\nimport 'moment/locale/nb';\nimport 'moment/locale/nl';\nimport 'moment/locale/sv';\nimport moment from 'moment/moment';\nimport { DateType } from './date.types';\n\nexport class DateFormatter {\n private language: string;\n\n public constructor(language: string = 'en') {\n this.language = language;\n }\n\n public formatDate(date: Date, dateFormat: string) {\n if (date) {\n return moment(date).locale(this.getLanguage()).format(dateFormat);\n }\n\n return '';\n }\n\n public parseDate(date: string, dateFormat: string) {\n if (date) {\n return moment(date, dateFormat).toDate();\n }\n\n return null;\n }\n\n public getLanguage() {\n if (this.language === 'no') {\n return 'nb';\n }\n\n return this.language;\n }\n\n public getDateFormat(type: DateType) {\n return (\n {\n date: 'L',\n time: 'LT',\n week: '[w] W GGGG',\n month: 'MM/YYYY',\n quarter: '[Q]Q YYYY',\n year: 'YYYY',\n datetime: 'L - LT',\n }[type] || 'L - LT'\n );\n }\n}\n","// Note! The `--dropdown-z-index` property is used from `date-picker.tsx`.\n/**\n * @prop --dropdown-z-index: z-index of the dropdown menu.\n */\n\n:host(limel-date-picker) {\n position: relative;\n}\n\nlimel-input-field[disabled],\nlimel-input-field[readonly] {\n pointer-events: none;\n}\n","import {\n Component,\n h,\n Prop,\n State,\n Element,\n EventEmitter,\n Event,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { isAndroidDevice, isIOSDevice } from '../../util/device';\nimport { DateType, Languages } from '../date-picker/date.types';\nimport { InputType } from '../input-field/input-field.types';\nimport { DateFormatter } from './date-formatter';\nimport { MDCTextField } from '@material/textfield';\n\n// tslint:disable:no-duplicate-string\nconst nativeTypeForConsumerType: { [key: string]: InputType } = {\n date: 'date',\n time: 'time',\n // Mobile Safari feature detects as capable of input type `week`,\n // but it just displays a non-interactive input\n // TODO(ads): remove this when support is decent on iOS!\n week: isIOSDevice() ? 'date' : 'week',\n month: 'month',\n quarter: 'date',\n year: 'date',\n datetime: 'datetime-local',\n default: 'datetime-local',\n};\nconst nativeFormatForType = {\n date: 'Y-MM-DD',\n time: 'HH:mm',\n week: 'GGGG-[W]WW',\n month: 'Y-MM',\n 'datetime-local': 'Y-MM-DD[T]HH:mm',\n};\n// tslint:enable:no-duplicate-string\n\n/**\n * @exampleComponent limel-example-date-picker-datetime\n * @exampleComponent limel-example-date-picker-date\n * @exampleComponent limel-example-date-picker-time\n * @exampleComponent limel-example-date-picker-week\n * @exampleComponent limel-example-date-picker-month\n * @exampleComponent limel-example-date-picker-quarter\n * @exampleComponent limel-example-date-picker-year\n * @exampleComponent limel-example-date-picker-formatted\n * @exampleComponent limel-example-date-picker-programmatic-change\n * @exampleComponent limel-example-date-picker-composite\n * @exampleComponent limel-example-date-picker-custom-formatter\n */\n@Component({\n tag: 'limel-date-picker',\n shadow: true,\n styleUrl: 'date-picker.scss',\n})\nexport class DatePicker {\n /**\n * Set to `true` to disable the field.\n * Use `disabled` to indicate that the field can normally be interacted\n * with, but is currently disabled. This tells the user that if certain\n * requirements are met, the field may become enabled again.\n */\n @Prop({ reflect: true })\n public disabled = false;\n\n /**\n * Set to `true` to make the field read-only.\n * Use `readonly` when the field is only there to present the data it holds,\n * and will not become possible for the current user to edit.\n */\n @Prop({ reflect: true })\n public readonly = false;\n\n /**\n * Set to `true` to indicate that the current value of the date picker is\n * invalid.\n */\n @Prop({ reflect: true })\n public invalid = false;\n\n /**\n * Text to display next to the date picker\n */\n @Prop({ reflect: true })\n public label: string;\n\n /**\n * The placeholder text shown inside the input field, when the field is focused and empty\n */\n @Prop({ reflect: true })\n public placeholder: string;\n\n /**\n * Optional helper text to display below the input field when it has focus\n */\n @Prop({ reflect: true })\n public helperText: string;\n\n /**\n * Set to `true` to indicate that the field is required.\n */\n @Prop({ reflect: true })\n public required = false;\n\n /**\n * The value of the field.\n */\n @Prop()\n public value: Date;\n\n /**\n * Type of date picker.\n */\n @Prop({ reflect: true })\n public type: DateType = 'datetime';\n\n /**\n * Format to display the selected date in.\n */\n @Prop({ reflect: true })\n public format: string;\n\n /**\n * Defines the localisation for translations and date formatting.\n * Property `format` customizes the localized date format.\n */\n @Prop({ reflect: true })\n public language: Languages = 'en';\n\n /**\n * Custom formatting function. Will be used for date formatting.\n *\n * :::note\n * overrides `format` and `language`\n * :::\n */\n @Prop()\n public formatter?: (date: Date) => string;\n\n /**\n * Emitted when the date picker value is changed.\n */\n @Event()\n private change: EventEmitter<Date>;\n\n @Element()\n private host: HTMLLimelDatePickerElement;\n\n @State()\n private internalFormat: string;\n @State()\n private showPortal = false;\n\n private useNative: boolean;\n private nativeType: InputType;\n private nativeFormat: string;\n private textField: HTMLElement;\n private datePickerCalendar: HTMLLimelFlatpickrAdapterElement;\n private portalId = `date-picker-calendar-${createRandomString()}`;\n private dateFormatter: DateFormatter;\n\n constructor() {\n this.handleCalendarChange = this.handleCalendarChange.bind(this);\n this.handleInputElementChange =\n this.handleInputElementChange.bind(this);\n this.showCalendar = this.showCalendar.bind(this);\n this.dateFormatter = new DateFormatter(this.language);\n this.clearValue = this.clearValue.bind(this);\n this.hideCalendar = this.hideCalendar.bind(this);\n this.onInputClick = this.onInputClick.bind(this);\n this.nativeChangeHandler = this.nativeChangeHandler.bind(this);\n this.preventBlurFromCalendarContainer =\n this.preventBlurFromCalendarContainer.bind(this);\n }\n\n public componentWillLoad() {\n this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());\n\n this.updateInternalFormatAndType();\n }\n\n public componentWillUpdate() {\n this.updateInternalFormatAndType();\n }\n\n public disconnectedCallback() {\n this.hideCalendar();\n }\n\n public render() {\n const inputProps: any = {\n onAction: this.clearValue,\n };\n\n if (this.value && !this.readonly) {\n inputProps.trailingIcon = 'clear_symbol';\n }\n\n if (this.useNative) {\n return (\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n value={this.formatValue(this.value)}\n type={this.nativeType}\n onChange={this.nativeChangeHandler}\n />\n );\n }\n\n const dropdownZIndex = getComputedStyle(this.host).getPropertyValue(\n '--dropdown-z-index'\n );\n\n const formatter = this.formatter || this.formatValue;\n\n return [\n <limel-input-field\n disabled={this.disabled}\n readonly={this.readonly}\n invalid={this.invalid}\n label={this.label}\n placeholder={this.placeholder}\n helperText={this.helperText}\n required={this.required}\n value={this.value ? formatter(this.value) : ''}\n onFocus={this.showCalendar}\n onBlur={this.hideCalendar}\n onClick={this.onInputClick}\n onChange={this.handleInputElementChange}\n ref={(el) => (this.textField = el)}\n {...inputProps}\n />,\n <limel-portal\n containerId={this.portalId}\n visible={this.showPortal}\n containerStyle={{ 'z-index': dropdownZIndex }}\n >\n <limel-flatpickr-adapter\n format={this.internalFormat}\n language={this.language}\n type={this.type}\n value={this.value}\n ref={(el) => (this.datePickerCalendar = el)}\n isOpen={this.showPortal}\n formatter={formatter}\n onChange={this.handleCalendarChange}\n />\n </limel-portal>,\n ];\n }\n\n private updateInternalFormatAndType() {\n this.nativeType = nativeTypeForConsumerType[this.type || 'default'];\n this.nativeFormat = nativeFormatForType[this.nativeType];\n\n if (this.useNative) {\n this.internalFormat = this.nativeFormat;\n } else if (this.formatter || this.format) {\n this.internalFormat = this.format;\n } else {\n this.internalFormat = this.dateFormatter.getDateFormat(this.type);\n }\n }\n\n private nativeChangeHandler(event: CustomEvent<string>) {\n event.stopPropagation();\n const date = this.dateFormatter.parseDate(\n event.detail,\n this.internalFormat\n );\n this.change.emit(date);\n }\n\n private showCalendar(event) {\n this.showPortal = true;\n const inputElement = this.textField.shadowRoot.querySelector('input');\n setTimeout(() => {\n this.datePickerCalendar.inputElement = inputElement;\n });\n event.stopPropagation();\n\n document.addEventListener('mousedown', this.documentClickListener, {\n passive: true,\n });\n\n document.addEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer,\n {\n capture: true,\n }\n );\n }\n\n private preventBlurFromCalendarContainer(event) {\n // We don't want the input element to lose focus when we pick\n // a date in the calendar container.\n // This is also required in order to not close the non\n // automatically closing pickers (type datetime and time)\n // when you pick a value.\n if (event.relatedTarget === this.datePickerCalendar) {\n event.stopPropagation();\n }\n }\n\n private hideCalendar() {\n setTimeout(() => {\n this.showPortal = false;\n });\n document.removeEventListener('mousedown', this.documentClickListener);\n document.removeEventListener(\n 'blur',\n this.preventBlurFromCalendarContainer\n );\n\n if (!this.pickerIsAutoClosing()) {\n this.fixFlatpickrFocusBug();\n }\n }\n\n private fixFlatpickrFocusBug() {\n // Flatpickr removes the focus from the input field\n // but the 'visual focus' is still there\n const mdcTextField = new MDCTextField(\n this.textField.shadowRoot.querySelector('.mdc-text-field')\n );\n mdcTextField.getDefaultFoundation().deactivateFocus();\n mdcTextField.valid = !this.invalid;\n }\n\n private documentClickListener = (event: MouseEvent) => {\n if (event.composedPath().includes(this.textField)) {\n return;\n }\n\n const element = document.querySelector(`#${this.portalId}`);\n if (!element.contains(event.target as Node)) {\n this.hideCalendar();\n }\n };\n\n private handleCalendarChange(event) {\n const date = event.detail;\n event.stopPropagation();\n if (this.pickerIsAutoClosing()) {\n this.hideCalendar();\n }\n\n this.change.emit(date);\n }\n\n private onInputClick(event) {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.showPortal) {\n return;\n }\n\n this.showCalendar(event);\n }\n\n private handleInputElementChange(event) {\n if (event.detail === '') {\n this.clearValue();\n }\n\n event.stopPropagation();\n }\n\n private pickerIsAutoClosing() {\n return this.type !== 'datetime' && this.type !== 'time';\n }\n\n private clearValue() {\n this.change.emit(null);\n }\n\n private formatValue = (value: Date): string =>\n this.dateFormatter.formatDate(value, this.internalFormat);\n}\n"],"mappings":"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"}