@limetech/lime-elements 38.46.2 → 38.47.0
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.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js +46 -0
- package/dist/cjs/limel-breadcrumbs_7.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-date-picker.cjs.entry.js +12 -3
- package/dist/cjs/limel-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/date-picker/date-picker.js +12 -3
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/collection/components/input-field/input-field.js +99 -0
- package/dist/collection/components/input-field/input-field.js.map +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-breadcrumbs_7.entry.js +46 -0
- package/dist/esm/limel-breadcrumbs_7.entry.js.map +1 -1
- package/dist/esm/limel-date-picker.entry.js +12 -3
- package/dist/esm/limel-date-picker.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js.map +1 -1
- package/dist/lime-elements/p-131c257a.entry.js +2 -0
- package/dist/lime-elements/p-131c257a.entry.js.map +1 -0
- package/dist/lime-elements/{p-b5e8a4af.entry.js → p-d973e943.entry.js} +2 -2
- package/dist/lime-elements/p-d973e943.entry.js.map +1 -0
- package/dist/types/components/input-field/input-field.d.ts +20 -0
- package/dist/types/components.d.ts +16 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-1a351a7f.entry.js +0 -2
- package/dist/lime-elements/p-1a351a7f.entry.js.map +0 -1
- package/dist/lime-elements/p-b5e8a4af.entry.js.map +0 -1
|
@@ -16,6 +16,7 @@ import { InputType } from '../input-field/input-field.types';
|
|
|
16
16
|
* @exampleComponent limel-example-input-field-search
|
|
17
17
|
* @exampleComponent limel-example-input-field-pattern
|
|
18
18
|
* @exampleComponent limel-example-input-field-focus
|
|
19
|
+
* @exampleComponent limel-example-input-field-selection
|
|
19
20
|
*/
|
|
20
21
|
export declare class InputField {
|
|
21
22
|
/**
|
|
@@ -164,6 +165,25 @@ export declare class InputField {
|
|
|
164
165
|
componentDidLoad(): void;
|
|
165
166
|
disconnectedCallback(): void;
|
|
166
167
|
componentDidUpdate(): void;
|
|
168
|
+
/**
|
|
169
|
+
* Returns the start position of the current text selection.
|
|
170
|
+
* Returns `null` if the input element is not available or if
|
|
171
|
+
* the input type does not support selection (e.g., `number`).
|
|
172
|
+
*/
|
|
173
|
+
getSelectionStart(): Promise<number | null>;
|
|
174
|
+
/**
|
|
175
|
+
* Returns the end position of the current text selection.
|
|
176
|
+
* Returns `null` if the input element is not available or if
|
|
177
|
+
* the input type does not support selection (e.g., `number`).
|
|
178
|
+
*/
|
|
179
|
+
getSelectionEnd(): Promise<number | null>;
|
|
180
|
+
/**
|
|
181
|
+
* Returns the direction of the current text selection.
|
|
182
|
+
* Can be `'forward'`, `'backward'`, or `'none'`.
|
|
183
|
+
* Returns `null` if the input element is not available or if
|
|
184
|
+
* the input type does not support selection (e.g., `number`).
|
|
185
|
+
*/
|
|
186
|
+
getSelectionDirection(): Promise<'forward' | 'backward' | 'none' | null>;
|
|
167
187
|
render(): any;
|
|
168
188
|
protected valueWatcher(newValue: string): void;
|
|
169
189
|
protected completionsWatcher(): void;
|
|
@@ -1894,6 +1894,7 @@ export namespace Components {
|
|
|
1894
1894
|
* @exampleComponent limel-example-input-field-search
|
|
1895
1895
|
* @exampleComponent limel-example-input-field-pattern
|
|
1896
1896
|
* @exampleComponent limel-example-input-field-focus
|
|
1897
|
+
* @exampleComponent limel-example-input-field-selection
|
|
1897
1898
|
*/
|
|
1898
1899
|
interface LimelInputField {
|
|
1899
1900
|
/**
|
|
@@ -1908,6 +1909,18 @@ export namespace Components {
|
|
|
1908
1909
|
* Set to `true` to format the current value of the input field only if the field is of type number. The number format is determined by the current language of the browser.
|
|
1909
1910
|
*/
|
|
1910
1911
|
"formatNumber": boolean;
|
|
1912
|
+
/**
|
|
1913
|
+
* Returns the direction of the current text selection. Can be `'forward'`, `'backward'`, or `'none'`. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
|
|
1914
|
+
*/
|
|
1915
|
+
"getSelectionDirection": () => Promise<'forward' | 'backward' | 'none' | null>;
|
|
1916
|
+
/**
|
|
1917
|
+
* Returns the end position of the current text selection. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
|
|
1918
|
+
*/
|
|
1919
|
+
"getSelectionEnd": () => Promise<number | null>;
|
|
1920
|
+
/**
|
|
1921
|
+
* Returns the start position of the current text selection. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
|
|
1922
|
+
*/
|
|
1923
|
+
"getSelectionStart": () => Promise<number | null>;
|
|
1911
1924
|
/**
|
|
1912
1925
|
* Optional helper text to display below the input field when it has focus
|
|
1913
1926
|
*/
|
|
@@ -4556,6 +4569,7 @@ declare global {
|
|
|
4556
4569
|
* @exampleComponent limel-example-input-field-search
|
|
4557
4570
|
* @exampleComponent limel-example-input-field-pattern
|
|
4558
4571
|
* @exampleComponent limel-example-input-field-focus
|
|
4572
|
+
* @exampleComponent limel-example-input-field-selection
|
|
4559
4573
|
*/
|
|
4560
4574
|
interface HTMLLimelInputFieldElement extends Components.LimelInputField, HTMLStencilElement {
|
|
4561
4575
|
}
|
|
@@ -7271,6 +7285,7 @@ declare namespace LocalJSX {
|
|
|
7271
7285
|
* @exampleComponent limel-example-input-field-search
|
|
7272
7286
|
* @exampleComponent limel-example-input-field-pattern
|
|
7273
7287
|
* @exampleComponent limel-example-input-field-focus
|
|
7288
|
+
* @exampleComponent limel-example-input-field-selection
|
|
7274
7289
|
*/
|
|
7275
7290
|
interface LimelInputField {
|
|
7276
7291
|
/**
|
|
@@ -9818,6 +9833,7 @@ declare module "@stencil/core" {
|
|
|
9818
9833
|
* @exampleComponent limel-example-input-field-search
|
|
9819
9834
|
* @exampleComponent limel-example-input-field-pattern
|
|
9820
9835
|
* @exampleComponent limel-example-input-field-focus
|
|
9836
|
+
* @exampleComponent limel-example-input-field-selection
|
|
9821
9837
|
*/
|
|
9822
9838
|
"limel-input-field": LocalJSX.LimelInputField & JSXBase.HTMLAttributes<HTMLLimelInputFieldElement>;
|
|
9823
9839
|
/**
|
package/package.json
CHANGED
|
@@ -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
|
|
@@ -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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"}
|