@infineon/infineon-design-system-stencil 29.1.0--canary.1633.ea5c93b9e7bbbf8f153c5409b74d7bf8e327df1b.0 → 29.1.0--canary.1627.016bd9a0ff94096ae626ba72de1e48c3099e6b1e.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_2.cjs.entry.js +175 -0
- package/dist/cjs/ifx-date-picker_2.cjs.entry.js.map +1 -0
- package/dist/cjs/index-f6c58643.js +4 -8
- package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/date-picker/date-picker.css +7 -0
- package/dist/collection/components/date-picker/date-picker.js +3 -1
- package/dist/collection/components/date-picker/date-picker.js.map +1 -1
- package/dist/components/ifx-date-picker.js +4 -2
- package/dist/components/ifx-date-picker.js.map +1 -1
- package/dist/esm/ifx-date-picker_2.entry.js +170 -0
- package/dist/esm/ifx-date-picker_2.entry.js.map +1 -0
- package/dist/esm/index-fc6a5751.js +4 -8
- package/dist/esm/infineon-design-system-stencil.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/p-56f097c9.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-56f097c9.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/cjs/ifx-date-picker.cjs.entry.js +0 -102
- package/dist/cjs/ifx-date-picker.cjs.entry.js.map +0 -1
- package/dist/cjs/ifx-icon.cjs.entry.js +0 -79
- package/dist/cjs/ifx-icon.cjs.entry.js.map +0 -1
- package/dist/esm/ifx-date-picker.entry.js +0 -98
- package/dist/esm/ifx-date-picker.entry.js.map +0 -1
- package/dist/esm/ifx-icon.entry.js +0 -75
- package/dist/esm/ifx-icon.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-5992e272.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-5992e272.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-9518ef02.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-9518ef02.entry.js.map +0 -1
@@ -1,98 +0,0 @@
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fc6a5751.js';
|
2
|
-
|
3
|
-
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.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.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:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.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:#575352;background-color:#EEEDED}.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}::-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:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}";
|
4
|
-
const IfxDatePickerStyle0 = datePickerCss;
|
5
|
-
|
6
|
-
const DatePicker = class {
|
7
|
-
constructor(hostRef) {
|
8
|
-
registerInstance(this, hostRef);
|
9
|
-
this.ifxDate = createEvent(this, "ifxDate", 7);
|
10
|
-
if (hostRef.$hostElement$["s-ei"]) {
|
11
|
-
this.internals = hostRef.$hostElement$["s-ei"];
|
12
|
-
}
|
13
|
-
else {
|
14
|
-
this.internals = hostRef.$hostElement$.attachInternals();
|
15
|
-
hostRef.$hostElement$["s-ei"] = this.internals;
|
16
|
-
}
|
17
|
-
this.inputId = `ifx-date-picker-${++datePickerId}`;
|
18
|
-
this.size = 's';
|
19
|
-
this.error = false;
|
20
|
-
this.success = false;
|
21
|
-
this.disabled = false;
|
22
|
-
this.AriaLabel = undefined;
|
23
|
-
this.value = undefined;
|
24
|
-
this.max = undefined;
|
25
|
-
this.min = undefined;
|
26
|
-
this.required = false;
|
27
|
-
this.label = undefined;
|
28
|
-
this.caption = undefined;
|
29
|
-
}
|
30
|
-
getDate(e) {
|
31
|
-
const inputValue = e.target.value;
|
32
|
-
const selectedDate = new Date(inputValue);
|
33
|
-
const day = selectedDate.getDate();
|
34
|
-
const month = selectedDate.getMonth() + 1;
|
35
|
-
const year = selectedDate.getFullYear();
|
36
|
-
if (!inputValue) {
|
37
|
-
this.internals.setFormValue(null);
|
38
|
-
this.ifxDate.emit({ day, month, year });
|
39
|
-
return;
|
40
|
-
}
|
41
|
-
this.internals.setFormValue(selectedDate.toISOString().substring(0, 10));
|
42
|
-
this.ifxDate.emit({ day, month, year });
|
43
|
-
}
|
44
|
-
handleInputFocusOnIconClick() {
|
45
|
-
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
46
|
-
if (input) {
|
47
|
-
input.focus();
|
48
|
-
}
|
49
|
-
}
|
50
|
-
getBrowser() {
|
51
|
-
if (navigator.userAgent.indexOf("Chrome") != -1) {
|
52
|
-
return "Chrome";
|
53
|
-
}
|
54
|
-
else if (navigator.userAgent.indexOf("Opera") != -1) {
|
55
|
-
return "Opera";
|
56
|
-
}
|
57
|
-
else if (navigator.userAgent.indexOf("MSIE") != -1) {
|
58
|
-
return "IE";
|
59
|
-
}
|
60
|
-
else if (navigator.userAgent.indexOf("Firefox") != -1) {
|
61
|
-
return "Firefox";
|
62
|
-
}
|
63
|
-
else {
|
64
|
-
return "unknown";
|
65
|
-
}
|
66
|
-
}
|
67
|
-
setFireFoxClasses() {
|
68
|
-
const browser = this.getBrowser();
|
69
|
-
const input = this.el.shadowRoot.querySelector('.date__picker-input');
|
70
|
-
if (browser === 'Firefox') {
|
71
|
-
input.classList.add('firefox__classes');
|
72
|
-
}
|
73
|
-
else if (input.classList.contains('firefox__classes')) {
|
74
|
-
input.classList.remove('firefox__classes');
|
75
|
-
}
|
76
|
-
}
|
77
|
-
componentDidLoad() {
|
78
|
-
this.setFireFoxClasses();
|
79
|
-
if (this.value) {
|
80
|
-
this.getDate({ target: { value: this.value } });
|
81
|
-
}
|
82
|
-
}
|
83
|
-
formResetCallback() {
|
84
|
-
this.internals.setFormValue(null);
|
85
|
-
}
|
86
|
-
render() {
|
87
|
-
var _a, _b;
|
88
|
-
return (h("div", { key: 'ce5028886c311b912f9e14b4b7b4f4237d3de6da', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '82375ce0dcbdb370519d7cfdf285c9df8ae01670', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: '04be58e77cc2b675e235e04dfd23d27a68b98f73', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : undefined}` }, h("input", { key: 'dbab92a47af9afad0e46afcb580f0f6e3f09c046', type: "date", class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error, "aria-label": this.AriaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '8b3a1cc4548f8b8fda7f7e6f970a81cc696f0f5a', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '1ba3389b857cb71964d25e345fcf219f0c98e709', icon: 'calendar16' }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'd1fa13cadee62e4b30c4e45196353f56d7c73c6a', class: 'caption__wrapper' }, this.caption.trim()))));
|
89
|
-
}
|
90
|
-
static get formAssociated() { return true; }
|
91
|
-
get el() { return getElement(this); }
|
92
|
-
};
|
93
|
-
let datePickerId = 0;
|
94
|
-
DatePicker.style = IfxDatePickerStyle0;
|
95
|
-
|
96
|
-
export { DatePicker as ifx_date_picker };
|
97
|
-
|
98
|
-
//# sourceMappingURL=ifx-date-picker.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"ifx-date-picker.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,opEAAopE,CAAC;AAC3qE,4BAAe,aAAa;;MCUf,UAAU;;;;;;;;;;;QACb,YAAO,GAAW,mBAAmB,EAAE,YAAY,EAAE,CAAC;oBAGvC,GAAG;qBACD,KAAK;uBACH,KAAK;wBACJ,KAAK;;;;;wBAKL,KAAK;;;;IAQjC,OAAO,CAAC,CAAC;QACP,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAClC,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1C,MAAM,GAAG,GAAG,YAAY,CAAC,OAAO,EAAE,CAAC;QACnC,MAAM,KAAK,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;QAC1C,MAAM,IAAI,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;QAExC,IAAI,CAAC,UAAU,EAAE;YACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC;YACtC,OAAO;SACR;QAED,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,CAAC,EAAC,EAAE,CAAC,CAAC,CAAA;QACvE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAA;KACtC;IAED,2BAA2B;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAqB,CAAC;QAC1F,IAAG,KAAK,EAAE;YACR,KAAK,CAAC,KAAK,EAAE,CAAA;SACd;KACF;IAEF,UAAU;QACP,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAG;YAChD,OAAO,QAAQ,CAAC;SACjB;aAAM,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAG;YACtD,OAAO,OAAO,CAAC;SAChB;aAAM,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAG;YACrD,OAAO,IAAI,CAAC;SACb;aAAM,IAAI,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EAAG;YACxD,OAAO,SAAS,CAAC;SAClB;aAAM;YACL,OAAO,SAAS,CAAC;SAClB;KACF;IAED,iBAAiB;QACf,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;QAEtE,IAAG,OAAO,KAAK,SAAS,EAAE;YACxB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;SACxC;aAAM,IAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE;YACtD,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAA;SAC3C;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,iBAAiB,EAAE,CAAA;QACxB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;SACjD;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;KACnC;IAED,MAAM;;QACJ,QACE,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAE,EAAE,EAAE,IAEjG,8DAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAG,IAAI,CAAC,OAAO,IAClD,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CACZ,EAER,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,SAAS,EAAE,IAC7G,8DACA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EACzF,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,SAAS,kBAC5B,IAAI,CAAC,KAAK,gBACZ,IAAI,CAAC,SAAS,EAC1B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAI,EACpC,4DAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,2BAA2B,EAAE,IACxF,iEAAU,IAAI,EAAC,YAAY,GAAY,CACnC,CACF,EAEJ,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,IAAI,EAAE,MAClB,4DAAK,KAAK,EAAC,kBAAkB,IACzB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CACjB,CACP,CACC,EACP;KACF;;;;AAGH,IAAI,YAAY,GAAG,CAAC,CAAC;;;;;","names":[],"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\n &.disabled { \n .label__wrapper { \n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error { \n .caption__wrapper { \n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled { \n .caption__wrapper { \n color: tokens.$ifxColorEngineering500;\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\n &.firefox__classes { \n padding: 8px 16px;\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\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.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\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\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.$ifxColorEngineering200;\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 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 }\n\n }","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \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;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\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 this.ifxDate.emit({day, month, year});\n return;\n }\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n this.ifxDate.emit({day, month, year})\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\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\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n componentDidLoad() { \n this.setFireFoxClasses()\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 </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : undefined}`}>\n <input\n type=\"date\"\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error}\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\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></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,75 +0,0 @@
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, a as Host } from './index-fc6a5751.js';
|
2
|
-
import { g as getIcon } from './icons-4575d84a.js';
|
3
|
-
|
4
|
-
const infineonIconStencilCss = "ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";
|
5
|
-
const IfxIconStyle0 = infineonIconStencilCss;
|
6
|
-
|
7
|
-
const InfineonIconStencil = class {
|
8
|
-
constructor(hostRef) {
|
9
|
-
registerInstance(this, hostRef);
|
10
|
-
this.consoleError = createEvent(this, "consoleError", 7);
|
11
|
-
this.icon = "";
|
12
|
-
this.ifxIcon = undefined;
|
13
|
-
}
|
14
|
-
convertStringToHtml(htmlString) {
|
15
|
-
const div = document.createElement('div');
|
16
|
-
div.innerHTML = htmlString;
|
17
|
-
return div.firstChild;
|
18
|
-
}
|
19
|
-
convertHtmlToObject(htmlElement) {
|
20
|
-
let pathToObject = Array
|
21
|
-
.from(htmlElement.attributes, ({ name, value }) => ({ name, value }))
|
22
|
-
.reduce((acc, current) => {
|
23
|
-
acc[current.name] = current.value;
|
24
|
-
return acc;
|
25
|
-
}, {});
|
26
|
-
return pathToObject;
|
27
|
-
}
|
28
|
-
convertPathsToVnode(htmlPath) {
|
29
|
-
let svgPaths = [];
|
30
|
-
const parentPath = this.convertHtmlToObject(htmlPath);
|
31
|
-
const parentPathToVnode = h("path", parentPath);
|
32
|
-
svgPaths.push(parentPathToVnode);
|
33
|
-
if (htmlPath.firstChild) {
|
34
|
-
const paths = htmlPath.querySelectorAll('path');
|
35
|
-
const pathLength = htmlPath.querySelectorAll('path').length;
|
36
|
-
for (let i = 0; i < pathLength; i++) {
|
37
|
-
let pathToObject = this.convertHtmlToObject(paths[i]);
|
38
|
-
let objToVnode = h("path", pathToObject);
|
39
|
-
svgPaths.push(objToVnode);
|
40
|
-
}
|
41
|
-
}
|
42
|
-
return svgPaths;
|
43
|
-
}
|
44
|
-
getSVG(svgPath) {
|
45
|
-
return h("svg", { class: "inline-svg", width: this.ifxIcon.width, height: this.ifxIcon.height, xmlns: "http://www.w3.org/2000/svg", fill: this.ifxIcon.fill, viewBox: this.ifxIcon.viewBox }, ...svgPath);
|
46
|
-
}
|
47
|
-
constructIcon() {
|
48
|
-
if (this.ifxIcon) {
|
49
|
-
const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent);
|
50
|
-
const svgPath = this.convertPathsToVnode(htmlPath);
|
51
|
-
const SVG = this.getSVG(svgPath);
|
52
|
-
return SVG;
|
53
|
-
}
|
54
|
-
else if (this.icon !== "") {
|
55
|
-
console.error('Icon not found!');
|
56
|
-
this.consoleError.emit(true);
|
57
|
-
return;
|
58
|
-
}
|
59
|
-
else {
|
60
|
-
return;
|
61
|
-
}
|
62
|
-
}
|
63
|
-
componentWillLoad() {
|
64
|
-
const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);
|
65
|
-
this.ifxIcon = getIcon(removeHyphen(this.icon));
|
66
|
-
}
|
67
|
-
render() {
|
68
|
-
return (h(Host, { key: '91ccb22f1cc67f3d4b91fb69c37cda13c941e109' }, this.constructIcon()));
|
69
|
-
}
|
70
|
-
};
|
71
|
-
InfineonIconStencil.style = IfxIconStyle0;
|
72
|
-
|
73
|
-
export { InfineonIconStencil as ifx_icon };
|
74
|
-
|
75
|
-
//# sourceMappingURL=ifx-icon.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"file":"ifx-icon.entry.js","mappings":"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","names":[],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n display: inline-flex;\n justify-content: center;\n\n &:empty {\n display: none;\n }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @Event() consoleError: EventEmitter<boolean>;\n \n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n return <svg class=\"inline-svg\" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns=\"http://www.w3.org/2000/svg\" fill={this.ifxIcon.fill} viewBox={this.ifxIcon.viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n console.error('Icon not found!')\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\n componentWillLoad() {\n const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n this.ifxIcon = getIcon(removeHyphen(this.icon));\n }\n\n\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"],"version":3}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as t,c as s,h as n,a as e}from"./p-80bb0959.js";import{g as o}from"./p-38c8a9b0.js";const i="ifx-icon{display:inline-flex;justify-content:center}ifx-icon:empty{display:none}";const c=i;const r=class{constructor(n){t(this,n);this.consoleError=s(this,"consoleError",7);this.icon="";this.ifxIcon=undefined}convertStringToHtml(t){const s=document.createElement("div");s.innerHTML=t;return s.firstChild}convertHtmlToObject(t){let s=Array.from(t.attributes,(({name:t,value:s})=>({name:t,value:s}))).reduce(((t,s)=>{t[s.name]=s.value;return t}),{});return s}convertPathsToVnode(t){let s=[];const e=this.convertHtmlToObject(t);const o=n("path",e);s.push(o);if(t.firstChild){const e=t.querySelectorAll("path");const o=t.querySelectorAll("path").length;for(let t=0;t<o;t++){let o=this.convertHtmlToObject(e[t]);let i=n("path",o);s.push(i)}}return s}getSVG(t){return n("svg",{class:"inline-svg",width:this.ifxIcon.width,height:this.ifxIcon.height,xmlns:"http://www.w3.org/2000/svg",fill:this.ifxIcon.fill,viewBox:this.ifxIcon.viewBox},...t)}constructIcon(){if(this.ifxIcon){const t=this.convertStringToHtml(this.ifxIcon.svgContent);const s=this.convertPathsToVnode(t);const n=this.getSVG(s);return n}else if(this.icon!==""){console.error("Icon not found!");this.consoleError.emit(true);return}else{return}}componentWillLoad(){const t=t=>t.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,((t,s)=>s));this.ifxIcon=o(t(this.icon))}render(){return n(e,{key:"91ccb22f1cc67f3d4b91fb69c37cda13c941e109"},this.constructIcon())}};r.style=c;export{r as ifx_icon};
|
2
|
-
//# sourceMappingURL=p-5992e272.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["infineonIconStencilCss","IfxIconStyle0","InfineonIconStencil","convertStringToHtml","htmlString","div","document","createElement","innerHTML","firstChild","convertHtmlToObject","htmlElement","pathToObject","Array","from","attributes","name","value","reduce","acc","current","convertPathsToVnode","htmlPath","svgPaths","parentPath","this","parentPathToVnode","h","push","paths","querySelectorAll","pathLength","length","i","objToVnode","getSVG","svgPath","class","width","ifxIcon","height","xmlns","fill","viewBox","constructIcon","svgContent","SVG","icon","console","error","consoleError","emit","componentWillLoad","removeHyphen","str","toLowerCase","replace","_m","chr","getIcon","render","Host","key"],"sources":["src/components/icon/infineonIconStencil.scss?tag=ifx-icon","src/components/icon/infineonIconStencil.tsx"],"sourcesContent":["ifx-icon {\n display: inline-flex;\n justify-content: center;\n\n &:empty {\n display: none;\n }\n}","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\nimport { getIcon } from '@infineon/infineon-icons'\n \n\n\n@Component({\n tag: 'ifx-icon',\n styleUrl: './infineonIconStencil.scss'\n})\n\nexport class InfineonIconStencil {\n @Prop({ mutable: true }) icon: string = \"\"\n @Prop({ mutable: true }) ifxIcon: any;\n @Event() consoleError: EventEmitter<boolean>;\n \n convertStringToHtml(htmlString) { \n const div = document.createElement('div')\n div.innerHTML = htmlString\n return div.firstChild\n }\n\n convertHtmlToObject(htmlElement) { \n let pathToObject = Array\n .from(htmlElement.attributes, ({ name, value }) => ({ name, value }))\n .reduce((acc, current) => {\n acc[current.name] = current.value\n return acc\n }, {})\n\n return pathToObject\n }\n\n convertPathsToVnode(htmlPath) { \n let svgPaths = []\n const parentPath = this.convertHtmlToObject(htmlPath);\n const parentPathToVnode = h(\"path\", parentPath);\n svgPaths.push(parentPathToVnode)\n if(htmlPath.firstChild) { \n const paths = htmlPath.querySelectorAll('path');\n const pathLength = htmlPath.querySelectorAll('path').length;\n for(let i = 0; i < pathLength; i++) { \n let pathToObject = this.convertHtmlToObject(paths[i])\n let objToVnode = h(\"path\", pathToObject)\n svgPaths.push(objToVnode)\n } \n }\n return svgPaths\n }\n\n getSVG(svgPath) {\n return <svg class=\"inline-svg\" width={this.ifxIcon.width} height={this.ifxIcon.height} xmlns=\"http://www.w3.org/2000/svg\" fill={this.ifxIcon.fill} viewBox={this.ifxIcon.viewBox}>{...svgPath}</svg>\n }\n\n constructIcon() {\n if(this.ifxIcon) {\n const htmlPath = this.convertStringToHtml(this.ifxIcon.svgContent)\n const svgPath = this.convertPathsToVnode(htmlPath)\n const SVG = this.getSVG(svgPath)\n return SVG;\n } else if(this.icon !== \"\") {\n console.error('Icon not found!')\n this.consoleError.emit(true)\n return;\n } else { \n return;\n }\n }\n\n componentWillLoad() {\n const removeHyphen = (str) => str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr);\n this.ifxIcon = getIcon(removeHyphen(this.icon));\n }\n\n\n\n render() {\n return (\n <Host>\n {this.constructIcon()}\n </Host>\n );\n }\n}"],"mappings":"6FAAA,MAAMA,EAAyB,mFAC/B,MAAAC,EAAeD,E,MCSFE,EAAmB,M,8EACU,G,uBAIxC,mBAAAC,CAAoBC,GAClB,MAAMC,EAAMC,SAASC,cAAc,OACnCF,EAAIG,UAAYJ,EAChB,OAAOC,EAAII,U,CAGb,mBAAAC,CAAoBC,GAClB,IAAIC,EAAeC,MAChBC,KAAKH,EAAYI,YAAY,EAAGC,OAAMC,YAAO,CAAQD,OAAMC,YAC3DC,QAAO,CAACC,EAAKC,KACZD,EAAIC,EAAQJ,MAAQI,EAAQH,MAC5B,OAAOE,CAAG,GACT,IAEL,OAAOP,C,CAGT,mBAAAS,CAAoBC,GAClB,IAAIC,EAAW,GACf,MAAMC,EAAaC,KAAKf,oBAAoBY,GAC5C,MAAMI,EAAoBC,EAAE,OAAQH,GACpCD,EAASK,KAAKF,GACd,GAAGJ,EAASb,WAAY,CACtB,MAAMoB,EAAQP,EAASQ,iBAAiB,QACxC,MAAMC,EAAaT,EAASQ,iBAAiB,QAAQE,OACrD,IAAI,IAAIC,EAAI,EAAGA,EAAIF,EAAYE,IAAK,CAClC,IAAIrB,EAAea,KAAKf,oBAAoBmB,EAAMI,IAClD,IAAIC,EAAaP,EAAE,OAAQf,GAC3BW,EAASK,KAAKM,E,EAGlB,OAAOX,C,CAGT,MAAAY,CAAOC,GACL,OAAOT,EAAA,OAAKU,MAAM,aAAaC,MAAOb,KAAKc,QAAQD,MAAOE,OAAQf,KAAKc,QAAQC,OAAQC,MAAM,6BAA6BC,KAAMjB,KAAKc,QAAQG,KAAMC,QAASlB,KAAKc,QAAQI,YAAaP,E,CAGxL,aAAAQ,GACE,GAAGnB,KAAKc,QAAS,CACf,MAAMjB,EAAWG,KAAKtB,oBAAoBsB,KAAKc,QAAQM,YACvD,MAAMT,EAAUX,KAAKJ,oBAAoBC,GACzC,MAAMwB,EAAMrB,KAAKU,OAAOC,GACxB,OAAOU,C,MACF,GAAGrB,KAAKsB,OAAS,GAAI,CAC1BC,QAAQC,MAAM,mBACdxB,KAAKyB,aAAaC,KAAK,MACvB,M,KACM,CACN,M,EAIJ,iBAAAC,GACE,MAAMC,EAAgBC,GAAQA,EAAIC,cAAcC,QAAQ,qBAAqB,CAACC,EAAIC,IAAQA,IAC1FjC,KAAKc,QAAUoB,EAAQN,EAAa5B,KAAKsB,M,CAK3C,MAAAa,GACE,OACEjC,EAACkC,EAAI,CAAAC,IAAA,4CACJrC,KAAKmB,gB","ignoreList":[]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as i,h as t,g as r}from"./p-80bb0959.js";const a='.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.disabled .label__wrapper{color:#575352}.date__picker-container.error .caption__wrapper{color:#CD002F}.date__picker-container.disabled .caption__wrapper{color:#575352}.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:8px 16px;color:#8D8786;font-size:16px;text-transform:uppercase;font-style:normal;font-weight:400;line-height:24px;cursor:pointer}.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:#575352;background-color:#EEEDED}.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}::-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:#EEEDED}.icon__wrapper{position:absolute;right:17px;padding:2px;display:flex;justify-content:flex-end;pointer-events:none;z-index:100;background-color:#FFFFFF;line-height:16px}.icon__wrapper ifx-icon{vertical-align:middle}';const n=a;const o=class{constructor(t){e(this,t);this.ifxDate=i(this,"ifxDate",7);if(t.$hostElement$["s-ei"]){this.internals=t.$hostElement$["s-ei"]}else{this.internals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.internals}this.inputId=`ifx-date-picker-${++s}`;this.size="s";this.error=false;this.success=false;this.disabled=false;this.AriaLabel=undefined;this.value=undefined;this.max=undefined;this.min=undefined;this.required=false;this.label=undefined;this.caption=undefined}getDate(e){const i=e.target.value;const t=new Date(i);const r=t.getDate();const a=t.getMonth()+1;const n=t.getFullYear();if(!i){this.internals.setFormValue(null);this.ifxDate.emit({day:r,month:a,year:n});return}this.internals.setFormValue(t.toISOString().substring(0,10));this.ifxDate.emit({day:r,month:a,year:n})}handleInputFocusOnIconClick(){const e=this.el.shadowRoot.querySelector(".date__picker-input");if(e){e.focus()}}getBrowser(){if(navigator.userAgent.indexOf("Chrome")!=-1){return"Chrome"}else if(navigator.userAgent.indexOf("Opera")!=-1){return"Opera"}else if(navigator.userAgent.indexOf("MSIE")!=-1){return"IE"}else if(navigator.userAgent.indexOf("Firefox")!=-1){return"Firefox"}else{return"unknown"}}setFireFoxClasses(){const e=this.getBrowser();const i=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){i.classList.add("firefox__classes")}else if(i.classList.contains("firefox__classes")){i.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses();if(this.value){this.getDate({target:{value:this.value}})}}formResetCallback(){this.internals.setFormValue(null)}render(){var e,i;return t("div",{key:"ce5028886c311b912f9e14b4b7b4f4237d3de6da",class:`date__picker-container ${this.error?"error":""} ${this.disabled?"disabled":""}`},t("label",{key:"82375ce0dcbdb370519d7cfdf285c9df8ae01670",class:"label__wrapper",htmlFor:this.inputId},(e=this.label)===null||e===void 0?void 0:e.trim()),t("div",{key:"04be58e77cc2b675e235e04dfd23d27a68b98f73",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":undefined}`},t("input",{key:"dbab92a47af9afad0e46afcb580f0f6e3f09c046",type:"date",class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,disabled:this.disabled?true:undefined,"aria-invalid":this.error,"aria-label":this.AriaLabel,max:this.max,min:this.min,value:this.value,required:this.required,onChange:e=>this.getDate(e)}),t("div",{key:"8b3a1cc4548f8b8fda7f7e6f970a81cc696f0f5a",class:"icon__wrapper",role:"button",onClick:()=>this.handleInputFocusOnIconClick()},t("ifx-icon",{key:"1ba3389b857cb71964d25e345fcf219f0c98e709",icon:"calendar16"}))),((i=this.caption)===null||i===void 0?void 0:i.trim())&&t("div",{key:"d1fa13cadee62e4b30c4e45196353f56d7c73c6a",class:"caption__wrapper"},this.caption.trim()))}static get formAssociated(){return true}get el(){return r(this)}};let s=0;o.style=n;export{o as ifx_date_picker};
|
2
|
-
//# sourceMappingURL=p-9518ef02.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","this","inputId","datePickerId","getDate","e","inputValue","target","value","selectedDate","Date","day","month","getMonth","year","getFullYear","internals","setFormValue","ifxDate","emit","toISOString","substring","handleInputFocusOnIconClick","input","el","shadowRoot","querySelector","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","classList","add","contains","remove","componentDidLoad","formResetCallback","render","h","key","class","error","disabled","htmlFor","_a","label","trim","size","undefined","type","success","AriaLabel","max","min","required","onChange","role","onClick","icon","_b","caption"],"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\n &.disabled { \n .label__wrapper { \n color: tokens.$ifxColorEngineering500;\n }\n }\n\n &.error { \n .caption__wrapper { \n color: tokens.$ifxColorRed500;\n }\n }\n\n &.disabled { \n .caption__wrapper { \n color: tokens.$ifxColorEngineering500;\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\n &.firefox__classes { \n padding: 8px 16px;\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\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.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\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\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.$ifxColorEngineering200;\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 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 }\n\n }","import { AttachInternals } from '@stencil/core';\nimport { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n \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;\n @Prop() value: string;\n @Prop() max: string;\n @Prop() min: string;\n @Prop() required: boolean = false;\n @Prop() label: string;\n @Prop() caption: string;\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 this.ifxDate.emit({day, month, year});\n return;\n }\n\n this.internals.setFormValue(selectedDate.toISOString().substring(0,10))\n this.ifxDate.emit({day, month, year})\n }\n\n handleInputFocusOnIconClick() { \n const input = this.el.shadowRoot.querySelector('.date__picker-input') as HTMLInputElement;\n if(input) { \n input.focus()\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\n if(browser === 'Firefox') { \n input.classList.add('firefox__classes')\n } else if(input.classList.contains('firefox__classes')) { \n input.classList.remove('firefox__classes')\n }\n }\n\n componentDidLoad() { \n this.setFireFoxClasses()\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 </label>\n\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : undefined}`}>\n <input\n type=\"date\"\n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`}\n disabled={this.disabled ? true : undefined}\n aria-invalid={this.error}\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\" role=\"button\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></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;"],"mappings":"yDAAA,MAAMA,EAAgB,+oEACtB,MAAAC,EAAeD,E,MCUFE,EAAU,M,0NACbC,KAAAC,QAAkB,qBAAqBC,I,UAGxB,I,WACE,M,aACE,M,cACC,M,kGAKA,M,4CAQ5B,OAAAC,CAAQC,GACN,MAAMC,EAAaD,EAAEE,OAAOC,MAC5B,MAAMC,EAAe,IAAIC,KAAKJ,GAC9B,MAAMK,EAAMF,EAAaL,UACzB,MAAMQ,EAAQH,EAAaI,WAAa,EACxC,MAAMC,EAAOL,EAAaM,cAE1B,IAAKT,EAAY,CACfL,KAAKe,UAAUC,aAAa,MAC5BhB,KAAKiB,QAAQC,KAAK,CAACR,MAAKC,QAAOE,SAC/B,M,CAGFb,KAAKe,UAAUC,aAAaR,EAAaW,cAAcC,UAAU,EAAE,KACnEpB,KAAKiB,QAAQC,KAAK,CAACR,MAAKC,QAAOE,Q,CAGjC,2BAAAQ,GACE,MAAMC,EAAQtB,KAAKuB,GAAGC,WAAWC,cAAc,uBAC/C,GAAGH,EAAO,CACRA,EAAMI,O,EAIX,UAAAC,GACG,GAAIC,UAAUC,UAAUC,QAAQ,YAAc,EAAI,CAChD,MAAO,Q,MACF,GAAIF,UAAUC,UAAUC,QAAQ,WAAa,EAAI,CACtD,MAAO,O,MACF,GAAIF,UAAUC,UAAUC,QAAQ,UAAY,EAAI,CACrD,MAAO,I,MACF,GAAIF,UAAUC,UAAUC,QAAQ,aAAe,EAAI,CACxD,MAAO,S,KACF,CACL,MAAO,S,EAIX,iBAAAC,GACE,MAAMC,EAAUhC,KAAK2B,aACrB,MAAML,EAAQtB,KAAKuB,GAAGC,WAAWC,cAAc,uBAE/C,GAAGO,IAAY,UAAW,CACxBV,EAAMW,UAAUC,IAAI,mB,MACf,GAAGZ,EAAMW,UAAUE,SAAS,oBAAqB,CACtDb,EAAMW,UAAUG,OAAO,mB,EAI3B,gBAAAC,GACErC,KAAK+B,oBACL,GAAI/B,KAAKO,MAAO,CACdP,KAAKG,QAAQ,CAAEG,OAAQ,CAAEC,MAAOP,KAAKO,Q,EAIzC,iBAAA+B,GACEtC,KAAKe,UAAUC,aAAa,K,CAG9B,MAAAuB,G,QACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,0BAA0B1C,KAAK2C,MAAQ,QAAU,MAAM3C,KAAK4C,SAAW,WAAY,MAE7FJ,EAAA,SAAAC,IAAA,2CAAOC,MAAM,iBAAiBG,QAAU7C,KAAKC,UAC3C6C,EAAA9C,KAAK+C,SAAK,MAAAD,SAAA,SAAAA,EAAEE,QAGdR,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkB1C,KAAKiD,OAAS,IAAM,QAAU,WAAWjD,KAAK4C,SAAW,WAAaM,aAClGV,EAAA,SAAAC,IAAA,2CACAU,KAAK,OACLT,MAAO,sBAAsB1C,KAAK2C,MAAQ,QAAU,MAAM3C,KAAKoD,QAAU,UAAY,KACrFR,SAAU5C,KAAK4C,SAAW,KAAOM,UAAS,eAC5BlD,KAAK2C,MAAK,aACZ3C,KAAKqD,UACjBC,IAAKtD,KAAKsD,IACVC,IAAKvD,KAAKuD,IACVhD,MAAOP,KAAKO,MACZiD,SAAUxD,KAAKwD,SACfC,SAAWrD,GAAMJ,KAAKG,QAAQC,KAC9BoC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBgB,KAAK,SAASC,QAAS,IAAM3D,KAAKqB,+BAC3DmB,EAAA,YAAAC,IAAA,2CAAUmB,KAAK,mBAIjBC,EAAA7D,KAAK8D,WAAO,MAAAD,SAAA,SAAAA,EAAEb,SACZR,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBACP1C,KAAK8D,QAAQd,Q,mEAQ7B,IAAI9C,EAAe,E","ignoreList":[]}
|