@infineon/infineon-design-system-stencil 39.5.9--canary.2093.895d91efd1b5f6e402ebf8881dbdd9a5ccc9854c.0 → 39.5.9--canary.2093.8eff86be1239664ebc03c7c9e59ab0afc596d55f.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/dist/cjs/ifx-date-picker.cjs.entry.js +20 -40
- package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-date-picker.entry.cjs.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.css +8 -0
- package/dist/collection/components/date-picker/date-picker.js +19 -39
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/ifx-date-picker.js +20 -40
- package/dist/components/ifx-date-picker.js.map +1 -1
- package/dist/esm/ifx-date-picker.entry.js +20 -40
- package/dist/esm/ifx-date-picker.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-date-picker.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-1d32590c.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-1d32590c.entry.js.map +1 -0
- package/dist/types/components/date-picker/date-picker.d.ts +2 -3
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-c6d2fcd5.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c6d2fcd5.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ var index = require('./index-n_pDKBY2.js');
|
|
|
4
4
|
var frameworkDetection = require('./framework-detection-C_6nNXcS.js');
|
|
5
5
|
var domUtils = require('./dom-utils-dykhxr-_.js');
|
|
6
6
|
|
|
7
|
-
const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:0px 14px;box-sizing:border-box;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle;z-index:1}.icon__wrapper.firefox__classes:focus-visible::after{content:\"\";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid #0A8276;border-radius:15%}.icon__wrapper.firefox__classes::before{content:\"\";position:absolute;inset:-4px;background-color:#FFFFFF}";
|
|
7
|
+
const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{box-sizing:border-box;font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:0px 14px;box-sizing:border-box;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background:none;color:#FFFFFF}.input__wrapper.disabled .icon__wrapper.firefox__classes{display:none}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle;z-index:1}.icon__wrapper.firefox__classes:focus-visible::after{content:\"\";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid #0A8276;border-radius:15%}.icon__wrapper.firefox__classes::before{content:\"\";position:absolute;inset:-4px;background-color:#FFFFFF}";
|
|
8
8
|
|
|
9
9
|
const DatePicker = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -26,6 +26,10 @@ const DatePicker = class {
|
|
|
26
26
|
this.required = false;
|
|
27
27
|
this.autocomplete = 'on';
|
|
28
28
|
}
|
|
29
|
+
getInput() {
|
|
30
|
+
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
31
|
+
return input;
|
|
32
|
+
}
|
|
29
33
|
getDate(e) {
|
|
30
34
|
const inputValue = e.target.value;
|
|
31
35
|
const selectedDate = new Date(inputValue);
|
|
@@ -44,7 +48,7 @@ const DatePicker = class {
|
|
|
44
48
|
}
|
|
45
49
|
return;
|
|
46
50
|
}
|
|
47
|
-
const input = this.
|
|
51
|
+
const input = this.getInput();
|
|
48
52
|
input.classList.add('has-value');
|
|
49
53
|
//this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
|
|
50
54
|
if (this.type === 'datetime-local') {
|
|
@@ -56,48 +60,27 @@ const DatePicker = class {
|
|
|
56
60
|
this.ifxDate.emit({ day, month, year });
|
|
57
61
|
}
|
|
58
62
|
}
|
|
59
|
-
handleInputFocusOnIconClick() {
|
|
60
|
-
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
61
|
-
if (!input)
|
|
62
|
-
return;
|
|
63
|
-
input.focus();
|
|
64
|
-
if (typeof input.showPicker === 'function') {
|
|
65
|
-
input.showPicker();
|
|
66
|
-
}
|
|
67
|
-
else {
|
|
68
|
-
input.click();
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
63
|
handleIconKeyDown(e) {
|
|
72
64
|
if (this.disabled)
|
|
73
65
|
return;
|
|
74
|
-
|
|
66
|
+
const browserIsFirefox = this.isFirefox();
|
|
67
|
+
const input = this.getInput();
|
|
68
|
+
if (e.key === 'Enter' && browserIsFirefox) {
|
|
75
69
|
e.preventDefault();
|
|
76
|
-
|
|
70
|
+
if (input.showPicker) {
|
|
71
|
+
input.showPicker();
|
|
72
|
+
}
|
|
77
73
|
}
|
|
78
74
|
}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
}
|
|
83
|
-
else if (navigator.userAgent.indexOf("Opera") != -1) {
|
|
84
|
-
return "Opera";
|
|
85
|
-
}
|
|
86
|
-
else if (navigator.userAgent.indexOf("MSIE") != -1) {
|
|
87
|
-
return "IE";
|
|
88
|
-
}
|
|
89
|
-
else if (navigator.userAgent.indexOf("Firefox") != -1) {
|
|
90
|
-
return "Firefox";
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
return "unknown";
|
|
94
|
-
}
|
|
75
|
+
isFirefox() {
|
|
76
|
+
const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
|
|
77
|
+
return isFirefox;
|
|
95
78
|
}
|
|
96
79
|
setFireFoxClasses() {
|
|
97
|
-
const
|
|
98
|
-
const input = this.
|
|
80
|
+
const browserIsFirefox = this.isFirefox();
|
|
81
|
+
const input = this.getInput();
|
|
99
82
|
const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');
|
|
100
|
-
if (
|
|
83
|
+
if (browserIsFirefox) {
|
|
101
84
|
input.classList.add('firefox__classes');
|
|
102
85
|
iconWrapper.classList.add('firefox__classes');
|
|
103
86
|
}
|
|
@@ -106,9 +89,6 @@ const DatePicker = class {
|
|
|
106
89
|
iconWrapper.classList.remove('firefox__classes');
|
|
107
90
|
}
|
|
108
91
|
}
|
|
109
|
-
getTabIndex() {
|
|
110
|
-
return this.getBrowser() === 'Firefox' ? 0 : undefined;
|
|
111
|
-
}
|
|
112
92
|
async componentDidLoad() {
|
|
113
93
|
if (!domUtils.isNestedInIfxComponent(this.el)) {
|
|
114
94
|
const framework = frameworkDetection.detectFramework();
|
|
@@ -126,8 +106,8 @@ const DatePicker = class {
|
|
|
126
106
|
// }
|
|
127
107
|
render() {
|
|
128
108
|
var _a, _b;
|
|
129
|
-
return (index.h("div", { key: '
|
|
130
|
-
_a.trim(), index.h("span", { key: '
|
|
109
|
+
return (index.h("div", { key: 'c5a9cbf6cf78e68f29e469c47d225b7fa43395ce', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: '58768f5801a2af813731546261fa2f4b1071c3ea', class: "label__wrapper", htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
|
|
110
|
+
_a.trim(), index.h("span", { key: '3549aefb36c31c78bcf40b0d4b7eccacd4254fea', class: `asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}` }, "*")), index.h("div", { key: '56d78df19a3cd59f0c7d2d23c50e204e77c9db98', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, index.h("input", { key: '0df030854c2d0cbbd13d0d06a5af7503f91cbf7c', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: e => this.getDate(e) }), index.h("div", { key: '70cbc9028903d19b1a07991f8c5ca89a39a244b5', class: "icon__wrapper", tabIndex: this.isFirefox() ? 0 : undefined, onKeyDown: e => this.handleIconKeyDown(e) }, index.h("ifx-icon", { key: '8c6cecb12e9f388a0db594236753922db6a44fb8', icon: "calendar16", "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && index.h("div", { key: 'e730e0de7be1c2c79cf03f8dafccf341b0b59990', class: "caption__wrapper" }, this.caption.trim())));
|
|
131
111
|
}
|
|
132
112
|
get el() { return index.getElement(this); }
|
|
133
113
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-date-picker.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 0px 14px;\n box-sizing: border-box;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n\n &:disabled {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &:disabled::-webkit-datetime-edit,\n &:disabled::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseWhite;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n z-index: 1;\n }\n\n &.firefox__classes {\n\n &:focus-visible::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 15%;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px;\n background-color: tokens.$ifxColorBaseWhite;\n }\n }\n}","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if (!input) return;\n\n input.focus();\n\n if(typeof input.showPicker === 'function') {\n input.showPicker();\n } else {\n input.click();\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n if (e.key === 'Enter' && this.getBrowser() === 'Firefox') {\n e.preventDefault();\n this.handleInputFocusOnIconClick();\n }\n } \n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n iconWrapper.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n iconWrapper.classList.remove('firefox__classes')\n }\n }\n\n getTabIndex(): number | undefined {\n return this.getBrowser() === 'Firefox' ? 0 : undefined;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" tabIndex={this.getTabIndex()} onClick={() => this.handleInputFocusOnIconClick()} onKeyDown={(e) => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"version":3}
|
|
1
|
+
{"file":"ifx-date-picker.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n box-sizing: border-box;\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 0px 14px;\n box-sizing: border-box;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n\n &:disabled {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &:disabled::-webkit-datetime-edit,\n &:disabled::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseWhite;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background: none;\n color: tokens.$ifxColorBaseWhite;\n &.firefox__classes { \n display: none;\n }\n }\n & .icon__wrapper { \n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n z-index: 1;\n }\n\n &.firefox__classes {\n &:focus-visible::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 15%;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px;\n background-color: tokens.$ifxColorBaseWhite;\n }\n }\n}","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date';\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getInput() {\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n return input;\n }\n\n getDate(e) {\n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1;\n const year = selectedDate.getFullYear();\n\n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n return;\n }\n\n const input = this.getInput();\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n if (e.key === 'Enter' && browserIsFirefox) {\n e.preventDefault();\n if (input.showPicker) {\n input.showPicker();\n }\n }\n }\n\n isFirefox() {\n const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;\n return isFirefox;\n }\n\n setFireFoxClasses() {\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if (browserIsFirefox) {\n input.classList.add('firefox__classes');\n iconWrapper.classList.add('firefox__classes');\n } else if (input.classList.contains('firefox__classes')) {\n input.classList.remove('firefox__classes');\n iconWrapper.classList.remove('firefox__classes');\n }\n }\n\n async componentDidLoad() {\n if (!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework);\n }\n this.setFireFoxClasses();\n }\n\n componentWillUpdate() {\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}`}>\n <label class=\"label__wrapper\" htmlFor={this.inputId}>\n {this.label?.trim()}\n <span class={`asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={e => this.getDate(e)}\n />\n <div class=\"icon__wrapper\" tabIndex={this.isFirefox() ? 0 : undefined} onKeyDown={e => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon=\"calendar16\" aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n {this.caption?.trim() && <div class=\"caption__wrapper\">{this.caption.trim()}</div>}\n </div>\n );\n }\n}\n\nlet datePickerId = 0;\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-date-picker.entry.cjs.js","sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 0px 14px;\n box-sizing: border-box;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n\n &:disabled {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &:disabled::-webkit-datetime-edit,\n &:disabled::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseWhite;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n z-index: 1;\n }\n\n &.firefox__classes {\n\n &:focus-visible::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 15%;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px;\n background-color: tokens.$ifxColorBaseWhite;\n }\n }\n}","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if (!input) return;\n\n input.focus();\n\n if(typeof input.showPicker === 'function') {\n input.showPicker();\n } else {\n input.click();\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n if (e.key === 'Enter' && this.getBrowser() === 'Firefox') {\n e.preventDefault();\n this.handleInputFocusOnIconClick();\n }\n } \n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n iconWrapper.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n iconWrapper.classList.remove('firefox__classes')\n }\n }\n\n getTabIndex(): number | undefined {\n return this.getBrowser() === 'Firefox' ? 0 : undefined;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" tabIndex={this.getTabIndex()} onClick={() => this.handleInputFocusOnIconClick()} onKeyDown={(e) => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-date-picker.entry.cjs.js","sources":["src/components/date-picker/date-picker.scss?tag=ifx-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx"],"sourcesContent":["@use '~@infineon/design-system-tokens/dist/tokens';\n\n.date__picker-container {\n display: flex;\n flex-direction: column;\n\n & .label__wrapper {\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody03;\n\n & .asterisk { \n display: none;\n &.required {\n display: inline;\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n\n }\n\n &.disabled {\n .label__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n &.error {\n .caption__wrapper {\n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled {\n .caption__wrapper {\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n & .caption__wrapper {\n margin-top: tokens.$ifxSpace50;\n color: tokens.$ifxColorBaseBlack;\n font: tokens.$ifxBodyBody05;\n }\n}\n\n.date__picker-input {\n box-sizing: border-box;\n font-family: 'Source Sans 3';\n outline: none;\n width: 100%;\n cursor: pointer;\n border-radius: 1px;\n border: 1px solid tokens.$ifxColorEngineering400;\n height: 100%;\n\n &.firefox__classes {\n padding: 0px 14px;\n box-sizing: border-box;\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n cursor: pointer;\n\n &:disabled {\n color: tokens.$ifxColorBaseWhite;\n }\n }\n\n &:focus:not(.error, .success) {\n border-color: tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border-color: tokens.$ifxColorEngineering500;\n }\n\n &:disabled {\n border-color: tokens.$ifxColorEngineering300;\n background-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n\n &.error {\n border-color: tokens.$ifxColorRed500;\n }\n\n &.success:not(.error) {\n border-color: tokens.$ifxColorGreen500;\n }\n\n &::-webkit-datetime-edit-text {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n }\n\n &:disabled::-webkit-datetime-edit,\n &:disabled::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseWhite;\n }\n\n &.has-value::-webkit-datetime-edit-text {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.has-value::-webkit-datetime-edit {\n color: tokens.$ifxColorBaseBlack;\n }\n}\n\n::-webkit-datetime-edit {\n color: tokens.$ifxColorEngineering400;\n font-size: 16px;\n text-transform: uppercase;\n font-style: normal;\n font-weight: 400;\n line-height: 24px;\n}\n\n::-webkit-datetime-edit-fields-wrapper {\n padding: 8px 16px;\n padding-bottom: 9px;\n transform: translateY(1px);\n}\n\n::-webkit-inner-spin-button {\n display: none;\n}\n\n::-webkit-calendar-picker-indicator {\n position: absolute;\n right: 15px;\n font-size: 19px;\n cursor: pointer;\n border-radius: 1px;\n &:focus-within {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n}\n\n.input__wrapper {\n display: flex;\n justify-content: space-between;\n align-items: center;\n align-self: stretch;\n background: tokens.$ifxColorBaseWhite;\n position: relative;\n &.large {\n height: 40px;\n }\n\n &.small {\n height: 36px;\n }\n\n &.disabled {\n & .icon__wrapper {\n background: none;\n color: tokens.$ifxColorBaseWhite;\n &.firefox__classes { \n display: none;\n }\n }\n & .icon__wrapper { \n background-color: tokens.$ifxColorEngineering300;\n color: tokens.$ifxColorBaseWhite;\n }\n }\n}\n\n.icon__wrapper {\n position: absolute;\n right: 17px;\n padding: 2px;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n pointer-events: none;\n z-index: 100;\n background-color: tokens.$ifxColorBaseWhite;\n line-height: 16px;\n\n & ifx-icon {\n vertical-align: middle;\n z-index: 1;\n }\n\n &.firefox__classes {\n &:focus-visible::after {\n content: '';\n position: absolute;\n top: -4px;\n left: -4px;\n right: -4px;\n bottom: -4px;\n border: 2px solid tokens.$ifxColorOcean500;\n border-radius: 15%;\n }\n\n &::before {\n content: '';\n position: absolute;\n inset: -4px;\n background-color: tokens.$ifxColorBaseWhite;\n }\n }\n}","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date';\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getInput() {\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n return input;\n }\n\n getDate(e) {\n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1;\n const year = selectedDate.getFullYear();\n\n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n return;\n }\n\n const input = this.getInput();\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n if (e.key === 'Enter' && browserIsFirefox) {\n e.preventDefault();\n if (input.showPicker) {\n input.showPicker();\n }\n }\n }\n\n isFirefox() {\n const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;\n return isFirefox;\n }\n\n setFireFoxClasses() {\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if (browserIsFirefox) {\n input.classList.add('firefox__classes');\n iconWrapper.classList.add('firefox__classes');\n } else if (input.classList.contains('firefox__classes')) {\n input.classList.remove('firefox__classes');\n iconWrapper.classList.remove('firefox__classes');\n }\n }\n\n async componentDidLoad() {\n if (!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework);\n }\n this.setFireFoxClasses();\n }\n\n componentWillUpdate() {\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}`}>\n <label class=\"label__wrapper\" htmlFor={this.inputId}>\n {this.label?.trim()}\n <span class={`asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={e => this.getDate(e)}\n />\n <div class=\"icon__wrapper\" tabIndex={this.isFirefox() ? 0 : undefined} onKeyDown={e => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon=\"calendar16\" aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n {this.caption?.trim() && <div class=\"caption__wrapper\">{this.caption.trim()}</div>}\n </div>\n );\n }\n}\n\nlet datePickerId = 0;\n"],"names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.date__picker-input {
|
|
35
|
+
box-sizing: border-box;
|
|
35
36
|
font-family: "Source Sans 3";
|
|
36
37
|
outline: none;
|
|
37
38
|
width: 100%;
|
|
@@ -133,6 +134,13 @@
|
|
|
133
134
|
.input__wrapper.small {
|
|
134
135
|
height: 36px;
|
|
135
136
|
}
|
|
137
|
+
.input__wrapper.disabled .icon__wrapper {
|
|
138
|
+
background: none;
|
|
139
|
+
color: #FFFFFF;
|
|
140
|
+
}
|
|
141
|
+
.input__wrapper.disabled .icon__wrapper.firefox__classes {
|
|
142
|
+
display: none;
|
|
143
|
+
}
|
|
136
144
|
.input__wrapper.disabled .icon__wrapper {
|
|
137
145
|
background-color: #BFBBBB;
|
|
138
146
|
color: #FFFFFF;
|
|
@@ -13,6 +13,10 @@ export class DatePicker {
|
|
|
13
13
|
this.required = false;
|
|
14
14
|
this.autocomplete = 'on';
|
|
15
15
|
}
|
|
16
|
+
getInput() {
|
|
17
|
+
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
18
|
+
return input;
|
|
19
|
+
}
|
|
16
20
|
getDate(e) {
|
|
17
21
|
const inputValue = e.target.value;
|
|
18
22
|
const selectedDate = new Date(inputValue);
|
|
@@ -31,7 +35,7 @@ export class DatePicker {
|
|
|
31
35
|
}
|
|
32
36
|
return;
|
|
33
37
|
}
|
|
34
|
-
const input = this.
|
|
38
|
+
const input = this.getInput();
|
|
35
39
|
input.classList.add('has-value');
|
|
36
40
|
//this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
|
|
37
41
|
if (this.type === 'datetime-local') {
|
|
@@ -43,48 +47,27 @@ export class DatePicker {
|
|
|
43
47
|
this.ifxDate.emit({ day, month, year });
|
|
44
48
|
}
|
|
45
49
|
}
|
|
46
|
-
handleInputFocusOnIconClick() {
|
|
47
|
-
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
48
|
-
if (!input)
|
|
49
|
-
return;
|
|
50
|
-
input.focus();
|
|
51
|
-
if (typeof input.showPicker === 'function') {
|
|
52
|
-
input.showPicker();
|
|
53
|
-
}
|
|
54
|
-
else {
|
|
55
|
-
input.click();
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
50
|
handleIconKeyDown(e) {
|
|
59
51
|
if (this.disabled)
|
|
60
52
|
return;
|
|
61
|
-
|
|
53
|
+
const browserIsFirefox = this.isFirefox();
|
|
54
|
+
const input = this.getInput();
|
|
55
|
+
if (e.key === 'Enter' && browserIsFirefox) {
|
|
62
56
|
e.preventDefault();
|
|
63
|
-
|
|
57
|
+
if (input.showPicker) {
|
|
58
|
+
input.showPicker();
|
|
59
|
+
}
|
|
64
60
|
}
|
|
65
61
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
else if (navigator.userAgent.indexOf("Opera") != -1) {
|
|
71
|
-
return "Opera";
|
|
72
|
-
}
|
|
73
|
-
else if (navigator.userAgent.indexOf("MSIE") != -1) {
|
|
74
|
-
return "IE";
|
|
75
|
-
}
|
|
76
|
-
else if (navigator.userAgent.indexOf("Firefox") != -1) {
|
|
77
|
-
return "Firefox";
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
return "unknown";
|
|
81
|
-
}
|
|
62
|
+
isFirefox() {
|
|
63
|
+
const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
|
|
64
|
+
return isFirefox;
|
|
82
65
|
}
|
|
83
66
|
setFireFoxClasses() {
|
|
84
|
-
const
|
|
85
|
-
const input = this.
|
|
67
|
+
const browserIsFirefox = this.isFirefox();
|
|
68
|
+
const input = this.getInput();
|
|
86
69
|
const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');
|
|
87
|
-
if (
|
|
70
|
+
if (browserIsFirefox) {
|
|
88
71
|
input.classList.add('firefox__classes');
|
|
89
72
|
iconWrapper.classList.add('firefox__classes');
|
|
90
73
|
}
|
|
@@ -93,9 +76,6 @@ export class DatePicker {
|
|
|
93
76
|
iconWrapper.classList.remove('firefox__classes');
|
|
94
77
|
}
|
|
95
78
|
}
|
|
96
|
-
getTabIndex() {
|
|
97
|
-
return this.getBrowser() === 'Firefox' ? 0 : undefined;
|
|
98
|
-
}
|
|
99
79
|
async componentDidLoad() {
|
|
100
80
|
if (!isNestedInIfxComponent(this.el)) {
|
|
101
81
|
const framework = detectFramework();
|
|
@@ -113,8 +93,8 @@ export class DatePicker {
|
|
|
113
93
|
// }
|
|
114
94
|
render() {
|
|
115
95
|
var _a, _b;
|
|
116
|
-
return (h("div", { key: '
|
|
117
|
-
_a.trim(), h("span", { key: '
|
|
96
|
+
return (h("div", { key: 'c5a9cbf6cf78e68f29e469c47d225b7fa43395ce', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '58768f5801a2af813731546261fa2f4b1071c3ea', class: "label__wrapper", htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
|
|
97
|
+
_a.trim(), h("span", { key: '3549aefb36c31c78bcf40b0d4b7eccacd4254fea', class: `asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '56d78df19a3cd59f0c7d2d23c50e204e77c9db98', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '0df030854c2d0cbbd13d0d06a5af7503f91cbf7c', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: e => this.getDate(e) }), h("div", { key: '70cbc9028903d19b1a07991f8c5ca89a39a244b5', class: "icon__wrapper", tabIndex: this.isFirefox() ? 0 : undefined, onKeyDown: e => this.handleIconKeyDown(e) }, h("ifx-icon", { key: '8c6cecb12e9f388a0db594236753922db6a44fb8', icon: "calendar16", "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && h("div", { key: 'e730e0de7be1c2c79cf03f8dafccf341b0b59990', class: "caption__wrapper" }, this.caption.trim())));
|
|
118
98
|
}
|
|
119
99
|
static get is() { return "ifx-date-picker"; }
|
|
120
100
|
static get encapsulation() { return "shadow"; }
|
|
@@ -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 { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n \n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\n\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date'\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n \n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year});\n }\n return;\n }\n\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if(this.type === 'datetime-local') { \n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({day, month, year, hours, minutes});\n } else { \n this.ifxDate.emit({day, month, year})\n }\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if (!input) return;\n\n input.focus();\n\n if(typeof input.showPicker === 'function') {\n input.showPicker();\n } else {\n input.click();\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n if (e.key === 'Enter' && this.getBrowser() === 'Firefox') {\n e.preventDefault();\n this.handleInputFocusOnIconClick();\n }\n } \n\n getBrowser() {\n if( navigator.userAgent.indexOf(\"Chrome\") != -1 ) {\n return \"Chrome\";\n } else if( navigator.userAgent.indexOf(\"Opera\") != -1 ) {\n return \"Opera\";\n } else if( navigator.userAgent.indexOf(\"MSIE\") != -1 ) {\n return \"IE\";\n } else if( navigator.userAgent.indexOf(\"Firefox\") != -1 ) {\n return \"Firefox\";\n } else {\n return \"unknown\";\n }\n }\n\n setFireFoxClasses() { \n const browser = this.getBrowser()\n const input = this.el.shadowRoot.querySelector('.date__picker-input');\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n iconWrapper.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n iconWrapper.classList.remove('firefox__classes')\n }\n }\n\n getTabIndex(): number | undefined {\n return this.getBrowser() === 'Firefox' ? 0 : undefined;\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework)\n }\n this.setFireFoxClasses()\n }\n\n componentWillUpdate() { \n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled': ''}`}>\n\n <label class='label__wrapper' htmlFor={ this.inputId }>\n { this.label?.trim() }\n <span class={`asterisk ${this.required ? 'required' : \"\"} ${this.error ? 'error' : \"\"}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" tabIndex={this.getTabIndex()} onClick={() => this.handleInputFocusOnIconClick()} onKeyDown={(e) => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon='calendar16' aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n { this.caption?.trim() && (\n <div class='caption__wrapper'>\n { this.caption.trim() }\n </div> \n )}\n </div>\n )\n }\n}\n\nlet datePickerId = 0;"]}
|
|
1
|
+
{"version":3,"file":"date-picker.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n // formAssociated: true,\n})\nexport class DatePicker {\n private inputId: string = `ifx-date-picker-${++datePickerId}`;\n\n @Element() el: HTMLElement;\n @Prop() size: string = 's';\n @Prop() error: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() ariaLabel: string | null;\n @Prop() value: string;\n @Prop() type: string = 'date';\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\n @Prop() autocomplete: string = 'on';\n\n @AttachInternals() internals: ElementInternals;\n\n @Event() ifxDate: EventEmitter;\n\n getInput() {\n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n return input;\n }\n\n getDate(e) {\n const inputValue = e.target.value;\n const selectedDate = new Date(inputValue);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1;\n const year = selectedDate.getFullYear();\n\n if (!inputValue) {\n //this.internals.setFormValue(null);\n\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n return;\n }\n\n const input = this.getInput();\n input.classList.add('has-value');\n\n //this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n if (this.type === 'datetime-local') {\n const hours = selectedDate.getHours();\n const minutes = selectedDate.getMinutes();\n this.ifxDate.emit({ day, month, year, hours, minutes });\n } else {\n this.ifxDate.emit({ day, month, year });\n }\n }\n\n handleIconKeyDown(e: KeyboardEvent) {\n if (this.disabled) return;\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n if (e.key === 'Enter' && browserIsFirefox) {\n e.preventDefault();\n if (input.showPicker) {\n input.showPicker();\n }\n }\n }\n\n isFirefox() {\n const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;\n return isFirefox;\n }\n\n setFireFoxClasses() {\n const browserIsFirefox = this.isFirefox();\n const input = this.getInput();\n const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');\n\n if (browserIsFirefox) {\n input.classList.add('firefox__classes');\n iconWrapper.classList.add('firefox__classes');\n } else if (input.classList.contains('firefox__classes')) {\n input.classList.remove('firefox__classes');\n iconWrapper.classList.remove('firefox__classes');\n }\n }\n\n async componentDidLoad() {\n if (!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-date-picker', await framework);\n }\n this.setFireFoxClasses();\n }\n\n componentWillUpdate() {\n if (this.value) {\n this.getDate({ target: { value: this.value } });\n }\n }\n\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div class={`date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}`}>\n <label class=\"label__wrapper\" htmlFor={this.inputId}>\n {this.label?.trim()}\n <span class={`asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}`}>*</span>\n </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}`}>\n <input\n type={this.type}\n autocomplete={this.autocomplete}\n class={`date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error ? true : undefined}\n aria-label={this.ariaLabel}\n max={this.max}\n min={this.min}\n value={this.value}\n required={this.required}\n onChange={e => this.getDate(e)}\n />\n <div class=\"icon__wrapper\" tabIndex={this.isFirefox() ? 0 : undefined} onKeyDown={e => this.handleIconKeyDown(e as KeyboardEvent)}>\n <ifx-icon icon=\"calendar16\" aria-hidden=\"true\"></ifx-icon>\n </div>\n </div>\n\n {this.caption?.trim() && <div class=\"caption__wrapper\">{this.caption.trim()}</div>}\n </div>\n );\n }\n}\n\nlet datePickerId = 0;\n"]}
|
|
@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
|
|
|
2
2
|
import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
|
|
3
3
|
import { d as defineCustomElement$2 } from './p-Bm-eGlq5.js';
|
|
4
4
|
|
|
5
|
-
const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:0px 14px;box-sizing:border-box;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle;z-index:1}.icon__wrapper.firefox__classes:focus-visible::after{content:\"\";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid #0A8276;border-radius:15%}.icon__wrapper.firefox__classes::before{content:\"\";position:absolute;inset:-4px;background-color:#FFFFFF}";
|
|
5
|
+
const datePickerCss = ".date__picker-container{display:flex;flex-direction:column}.date__picker-container .label__wrapper{color:#1D1D1D;font:400 1rem/1.5rem \"Source Sans 3\"}.date__picker-container .label__wrapper .asterisk{display:none}.date__picker-container .label__wrapper .asterisk.required{display:inline;margin-left:4px}.date__picker-container .label__wrapper .asterisk.required.error{color:#CD002F}.date__picker-container.disabled .label__wrapper{color:#BFBBBB}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#BFBBBB}.date__picker-container .caption__wrapper{margin-top:4px;color:#1D1D1D;font:400 0.75rem/1rem \"Source Sans 3\"}.date__picker-input{box-sizing:border-box;font-family:\"Source Sans 3\";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786;height:100%}.date__picker-input.firefox__classes{padding:0px 14px;box-sizing:border-box;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.date__picker-input.firefox__classes:disabled{color:#FFFFFF}.date__picker-input:focus:not(.error,.success){border-color:#0A8276}.date__picker-input:hover:not(:disabled,:focus,.error,.success){border-color:#575352}.date__picker-input:disabled{border-color:#BFBBBB;background-color:#BFBBBB;cursor:default}.date__picker-input.error{border-color:#CD002F}.date__picker-input.success:not(.error){border-color:#4CA460}.date__picker-input::-webkit-datetime-edit-text{color:#8D8786;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.date__picker-input:disabled::-webkit-datetime-edit,.date__picker-input:disabled::-webkit-datetime-edit-text{color:#FFFFFF}.date__picker-input.has-value::-webkit-datetime-edit-text{color:#1D1D1D}.date__picker-input.has-value::-webkit-datetime-edit{color:#1D1D1D}::-webkit-datetime-edit{color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px}::-webkit-datetime-edit-fields-wrapper{padding:8px 16px;padding-bottom:9px;transform:translateY(1px)}::-webkit-inner-spin-button{display:none}::-webkit-calendar-picker-indicator{position:absolute;right:15px;font-size:19px;cursor:pointer;border-radius:1px}::-webkit-calendar-picker-indicator:focus-within{outline:2px solid #0A8276;outline-offset:2px}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{height:40px}.input__wrapper.small{height:36px}.input__wrapper.disabled .icon__wrapper{background:none;color:#FFFFFF}.input__wrapper.disabled .icon__wrapper.firefox__classes{display:none}.input__wrapper.disabled .icon__wrapper{background-color:#BFBBBB;color:#FFFFFF}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle;z-index:1}.icon__wrapper.firefox__classes:focus-visible::after{content:\"\";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid #0A8276;border-radius:15%}.icon__wrapper.firefox__classes::before{content:\"\";position:absolute;inset:-4px;background-color:#FFFFFF}";
|
|
6
6
|
|
|
7
7
|
const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
8
8
|
constructor() {
|
|
@@ -20,6 +20,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
|
20
20
|
this.required = false;
|
|
21
21
|
this.autocomplete = 'on';
|
|
22
22
|
}
|
|
23
|
+
getInput() {
|
|
24
|
+
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
25
|
+
return input;
|
|
26
|
+
}
|
|
23
27
|
getDate(e) {
|
|
24
28
|
const inputValue = e.target.value;
|
|
25
29
|
const selectedDate = new Date(inputValue);
|
|
@@ -38,7 +42,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
|
38
42
|
}
|
|
39
43
|
return;
|
|
40
44
|
}
|
|
41
|
-
const input = this.
|
|
45
|
+
const input = this.getInput();
|
|
42
46
|
input.classList.add('has-value');
|
|
43
47
|
//this.internals.setFormValue(selectedDate.toISOString().substring(0,10))
|
|
44
48
|
if (this.type === 'datetime-local') {
|
|
@@ -50,48 +54,27 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
|
50
54
|
this.ifxDate.emit({ day, month, year });
|
|
51
55
|
}
|
|
52
56
|
}
|
|
53
|
-
handleInputFocusOnIconClick() {
|
|
54
|
-
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
|
55
|
-
if (!input)
|
|
56
|
-
return;
|
|
57
|
-
input.focus();
|
|
58
|
-
if (typeof input.showPicker === 'function') {
|
|
59
|
-
input.showPicker();
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
input.click();
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
57
|
handleIconKeyDown(e) {
|
|
66
58
|
if (this.disabled)
|
|
67
59
|
return;
|
|
68
|
-
|
|
60
|
+
const browserIsFirefox = this.isFirefox();
|
|
61
|
+
const input = this.getInput();
|
|
62
|
+
if (e.key === 'Enter' && browserIsFirefox) {
|
|
69
63
|
e.preventDefault();
|
|
70
|
-
|
|
64
|
+
if (input.showPicker) {
|
|
65
|
+
input.showPicker();
|
|
66
|
+
}
|
|
71
67
|
}
|
|
72
68
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
}
|
|
77
|
-
else if (navigator.userAgent.indexOf("Opera") != -1) {
|
|
78
|
-
return "Opera";
|
|
79
|
-
}
|
|
80
|
-
else if (navigator.userAgent.indexOf("MSIE") != -1) {
|
|
81
|
-
return "IE";
|
|
82
|
-
}
|
|
83
|
-
else if (navigator.userAgent.indexOf("Firefox") != -1) {
|
|
84
|
-
return "Firefox";
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
return "unknown";
|
|
88
|
-
}
|
|
69
|
+
isFirefox() {
|
|
70
|
+
const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
|
|
71
|
+
return isFirefox;
|
|
89
72
|
}
|
|
90
73
|
setFireFoxClasses() {
|
|
91
|
-
const
|
|
92
|
-
const input = this.
|
|
74
|
+
const browserIsFirefox = this.isFirefox();
|
|
75
|
+
const input = this.getInput();
|
|
93
76
|
const iconWrapper = this.el.shadowRoot.querySelector('.icon__wrapper');
|
|
94
|
-
if (
|
|
77
|
+
if (browserIsFirefox) {
|
|
95
78
|
input.classList.add('firefox__classes');
|
|
96
79
|
iconWrapper.classList.add('firefox__classes');
|
|
97
80
|
}
|
|
@@ -100,9 +83,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
|
100
83
|
iconWrapper.classList.remove('firefox__classes');
|
|
101
84
|
}
|
|
102
85
|
}
|
|
103
|
-
getTabIndex() {
|
|
104
|
-
return this.getBrowser() === 'Firefox' ? 0 : undefined;
|
|
105
|
-
}
|
|
106
86
|
async componentDidLoad() {
|
|
107
87
|
if (!isNestedInIfxComponent(this.el)) {
|
|
108
88
|
const framework = detectFramework();
|
|
@@ -120,8 +100,8 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends H {
|
|
|
120
100
|
// }
|
|
121
101
|
render() {
|
|
122
102
|
var _a, _b;
|
|
123
|
-
return (h("div", { key: '
|
|
124
|
-
_a.trim(), h("span", { key: '
|
|
103
|
+
return (h("div", { key: 'c5a9cbf6cf78e68f29e469c47d225b7fa43395ce', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '58768f5801a2af813731546261fa2f4b1071c3ea', class: "label__wrapper", htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
|
|
104
|
+
_a.trim(), h("span", { key: '3549aefb36c31c78bcf40b0d4b7eccacd4254fea', class: `asterisk ${this.required ? 'required' : ''} ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '56d78df19a3cd59f0c7d2d23c50e204e77c9db98', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '0df030854c2d0cbbd13d0d06a5af7503f91cbf7c', type: this.type, autocomplete: this.autocomplete, class: `date__picker-input ${this.error ? 'error' : ''} ${this.success ? 'success' : ''}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.ariaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: e => this.getDate(e) }), h("div", { key: '70cbc9028903d19b1a07991f8c5ca89a39a244b5', class: "icon__wrapper", tabIndex: this.isFirefox() ? 0 : undefined, onKeyDown: e => this.handleIconKeyDown(e) }, h("ifx-icon", { key: '8c6cecb12e9f388a0db594236753922db6a44fb8', icon: "calendar16", "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && h("div", { key: 'e730e0de7be1c2c79cf03f8dafccf341b0b59990', class: "caption__wrapper" }, this.caption.trim())));
|
|
125
105
|
}
|
|
126
106
|
get el() { return this; }
|
|
127
107
|
static get style() { return datePickerCss; }
|