@infineon/infineon-design-system-stencil 21.10.0 → 21.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-date-picker.cjs.entry.js +1 -1
- package/dist/cjs/ifx-date-picker.cjs.entry.js.map +1 -1
- package/dist/collection/components/date-picker/date-picker.css +4 -3
- package/dist/collection/components/date-picker/date-picker.stories.js +1 -1
- package/dist/collection/components/date-picker/date-picker.stories.js.map +1 -1
- package/dist/esm/ifx-date-picker.entry.js +1 -1
- package/dist/esm/ifx-date-picker.entry.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-5cb684e1.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-5cb684e1.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-fdc5dafa.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-fdc5dafa.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4e6795cb.js');
|
|
6
6
|
|
|
7
|
-
const datePickerCss = ":host{display:
|
|
7
|
+
const datePickerCss = ":host{display:block}.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{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}.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:14px;padding:2px;width:25px;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}";
|
|
8
8
|
const IfxDatePickerStyle0 = datePickerCss;
|
|
9
9
|
|
|
10
10
|
const DatePicker = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-date-picker.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"ifx-date-picker.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,knDAAknD,CAAC;AACzoD,4BAAe,aAAa;;MCOf,UAAU;;;;oBAEE,GAAG;qBACD,KAAK;uBACH,KAAK;wBACJ,KAAK;oBACV,EAAE;;IAGzB,OAAO,CAAC,CAAC;QACP,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9C,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,IAAG,GAAG,IAAI,KAAK,IAAI,IAAI,EAAE;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAA;SACtC;KACF;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;KACzB;IAED,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACtGA,oEACA,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EACtG,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAI,EACpCA,kEAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,2BAA2B,EAAE,IAC1EA,uEAAU,IAAI,EAAC,YAAY,GAAY,CACnC,CACF,EACP;KACF;;;;;;;","names":["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 :host { \n display: block;\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 {\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 }\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: 14px;\n padding: 2px;\n width: 25px;\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 }","import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\n\nexport class DatePicker {\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() name: string = '';\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const selectedDate = new Date(e.target.value);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n if(day && month && year) { \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) { \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 }\n\n render() {\n return (\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : \"\"}`} >\n <input \n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`} type=\"date\" \n name={this.name}\n disabled={this.disabled}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></ifx-icon>\n </div>\n </div>\n )\n }\n}\n"],"version":3}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
:host {
|
|
2
|
-
display:
|
|
2
|
+
display: block;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.date__picker-input {
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
cursor: pointer;
|
|
10
10
|
border-radius: 1px;
|
|
11
11
|
border: 1px solid #8D8786;
|
|
12
|
+
height: 100%;
|
|
12
13
|
}
|
|
13
14
|
.date__picker-input.firefox__classes {
|
|
14
15
|
padding: 8px 16px;
|
|
@@ -79,10 +80,10 @@
|
|
|
79
80
|
position: relative;
|
|
80
81
|
}
|
|
81
82
|
.input__wrapper.large {
|
|
82
|
-
|
|
83
|
+
height: 40px;
|
|
83
84
|
}
|
|
84
85
|
.input__wrapper.small {
|
|
85
|
-
|
|
86
|
+
height: 36px;
|
|
86
87
|
}
|
|
87
88
|
.input__wrapper.disabled .icon__wrapper {
|
|
88
89
|
background-color: #EEEDED;
|
|
@@ -10,7 +10,7 @@ export default {
|
|
|
10
10
|
},
|
|
11
11
|
argTypes: {
|
|
12
12
|
size: {
|
|
13
|
-
description: 'Size options: small
|
|
13
|
+
description: 'Size options: Height small (36px) and Height large (40px) - default: small',
|
|
14
14
|
options: ['s', 'l'],
|
|
15
15
|
control: { type: 'radio' },
|
|
16
16
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;KACb;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../src/components/date-picker/date-picker.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;KACb;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,6EAA6E;YAC1F,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,qKAAqK;iBACxK;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IAC7D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IACvD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Date Picker',\n tags: ['autodocs'],\n\n args: {\n disabled: false,\n size: 's',\n success: false,\n error: false,\n },\n argTypes: {\n size: {\n description: 'Size options: Height small (36px) and Height large (40px) - default: small',\n options: ['s', 'l'],\n control: { type: 'radio' },\n },\n ifxDate: {\n action: 'ifxDate',\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxDate={handleInput}\\nVue:@ifxDate=\"handleInput\"\\nAngular:(ifxDate)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxDate\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size }) => {\n const element = document.createElement('ifx-date-picker');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('success', success);\n element.addEventListener('ifxDate', action('ifxDate'));\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-77e9cc30.js';
|
|
2
2
|
|
|
3
|
-
const datePickerCss = ":host{display:
|
|
3
|
+
const datePickerCss = ":host{display:block}.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{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}.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:14px;padding:2px;width:25px;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
4
|
const IfxDatePickerStyle0 = datePickerCss;
|
|
5
5
|
|
|
6
6
|
const DatePicker = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-date-picker.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"ifx-date-picker.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,knDAAknD,CAAC;AACzoD,4BAAe,aAAa;;MCOf,UAAU;;;;oBAEE,GAAG;qBACD,KAAK;uBACH,KAAK;wBACJ,KAAK;oBACV,EAAE;;IAGzB,OAAO,CAAC,CAAC;QACP,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9C,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,IAAG,GAAG,IAAI,KAAK,IAAI,IAAI,EAAE;YACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAA;SACtC;KACF;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;KACzB;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,OAAO,GAAG,OAAO,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACtG,8DACA,KAAK,EAAE,sBAAsB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,EAAE,IAAI,EAAC,MAAM,EACtG,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAI,EACpC,4DAAK,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,2BAA2B,EAAE,IAC1E,iEAAU,IAAI,EAAC,YAAY,GAAY,CACnC,CACF,EACP;KACF;;;;;;;","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 :host { \n display: block;\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 {\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 }\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: 14px;\n padding: 2px;\n width: 25px;\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 }","import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\n\nexport class DatePicker {\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() name: string = '';\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const selectedDate = new Date(e.target.value);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n if(day && month && year) { \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) { \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 }\n\n render() {\n return (\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : \"\"}`} >\n <input \n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`} type=\"date\" \n name={this.name}\n disabled={this.disabled}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></ifx-icon>\n </div>\n </div>\n )\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as a}from"./p-0a568ace.js";export{s as setNonce}from"./p-0a568ace.js";import{g as t}from"./p-e1255160.js";const n=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};n().then((async e=>{await t();return a(JSON.parse('[["p-6d6eadb8",[[1,"ifx-faq"]]],["p-6c54cb92",[[1,"ifx-overview-table"]]],["p-c2054ff7",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-f14f8965",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-03e30f2e",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-7eabd619",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-d6fb2084",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-0793434a",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-96ce1fa1",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-ca2257f9",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-d4eebcf2",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32],"active":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-fdc5dafa",[[1,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"name":[1]}]]],["p-22dabcea",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-40ac64c0",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-3a14b63b",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-9b7db933",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-39019f04",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-ac74dbff",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-36cc8464",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-7d7cbbd8",[[1,"ifx-step",{"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[8,"stepper-state"],"error":[4]}]]],["p-aa6c2429",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-4b98b285",[[1,"ifx-tag",{"icon":[1]}]]],["p-0d118f88",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-0b09e7f1",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-75c3ac69",[[1,"ifx-badge"]]],["p-a6d19eb2",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-403270a1",[[1,"ifx-breadcrumb"]]],["p-1ee65393",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d85429ff",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-b1885625",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-5b21c249",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-8f9a5a4e",[[1,"ifx-card-links"]]],["p-05e26da7",[[1,"ifx-card-overline"]]],["p-eb0ff186",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-646a8105",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c42e2ed1",[[1,"ifx-dropdown-header"]]],["p-e5440924",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-91d89a46",[[1,"ifx-dropdown-separator"]]],["p-7be87521",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-a7ea333a",[[1,"ifx-footer-column"]]],["p-4e4e2681",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-8b6e2a2f",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-6236fd64",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-e9d9e7b4",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-eeb8c133",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-586b1df5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-9a35d078",[[1,"ifx-sidebar-title"]]],["p-cd7991a7",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-b1a6a7dd",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-055513d2",[[1,"ifx-stepper",{"showNumber":[4,"show-number"],"activeStep":[2,"active-step"],"variant":[1],"internalActiveStep":[32]},null,{"activeStep":["activeStepHandler"]}]]],["p-e040f96b",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4712a064",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-2f6da28d",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-cfcd47d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-bb3fe9bd",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ec50ca9d",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-1638dc59",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-34cf5fef",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-886ac778",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-ee9e4c3d",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-d5149197",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-2f5e386b",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as i,b as a}from"./p-0a568ace.js";export{s as setNonce}from"./p-0a568ace.js";import{g as t}from"./p-e1255160.js";const n=()=>{{o(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const o=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const a=i.call(this,false);const t=this.childNodes;if(e){for(let e=0;e<t.length;e++){if(t[e].nodeType!==2){a.appendChild(t[e].cloneNode(true))}}}return a}};n().then((async e=>{await t();return a(JSON.parse('[["p-6d6eadb8",[[1,"ifx-faq"]]],["p-6c54cb92",[[1,"ifx-overview-table"]]],["p-c2054ff7",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-f14f8965",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-03e30f2e",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-7eabd619",[[1,"ifx-multiselect",{"options":[1],"batchSize":[2,"batch-size"],"size":[1],"disabled":[4],"error":[4],"errorMessage":[1,"error-message"],"label":[1],"placeholder":[1],"maxItemCount":[2,"max-item-count"],"searchEnabled":[4,"search-enabled"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-d6fb2084",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-0793434a",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"value":[1],"handleItemClick":[16],"hasIcon":[32],"hasIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-96ce1fa1",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-ca2257f9",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-d4eebcf2",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32],"active":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-5cb684e1",[[1,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"name":[1]}]]],["p-22dabcea",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-40ac64c0",[[1,"ifx-footer",{"variant":[1],"termsUrl":[1,"terms-url"],"termsTarget":[1,"terms-target"],"imprintUrl":[1,"imprint-url"],"imprintTarget":[1,"imprint-target"],"privacyPolicyUrl":[1,"privacy-policy-url"],"privacyPolicyTarget":[1,"privacy-policy-target"],"glossaryUrl":[1,"glossary-url"],"glossaryTarget":[1,"glossary-target"],"copyrightText":[1,"copyright-text"],"large":[32],"medium":[32],"currentYear":[32]}]]],["p-3a14b63b",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-9b7db933",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-39019f04",[[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxSearchBarIsOpen","handleSearchBarToggle"]]]]],["p-ac74dbff",[[1,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-36cc8464",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-7d7cbbd8",[[1,"ifx-step",{"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[8,"stepper-state"],"error":[4]}]]],["p-aa6c2429",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"internalOrientation":[32],"internalActiveTabIndex":[32],"internalFocusedTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"disabledTabs":[32],"tabObjects":[32]},[[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-4b98b285",[[1,"ifx-tag",{"icon":[1]}]]],["p-0d118f88",[[1,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"optional":[4],"success":[4],"disabled":[4],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-0b09e7f1",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-75c3ac69",[[1,"ifx-badge"]]],["p-a6d19eb2",[[0,"ifx-basic-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"gridOptions":[32]}]]],["p-403270a1",[[1,"ifx-breadcrumb"]]],["p-1ee65393",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-d85429ff",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-b1885625",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-5b21c249",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-8f9a5a4e",[[1,"ifx-card-links"]]],["p-05e26da7",[[1,"ifx-card-overline"]]],["p-eb0ff186",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-646a8105",[[1,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c42e2ed1",[[1,"ifx-dropdown-header"]]],["p-e5440924",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-91d89a46",[[1,"ifx-dropdown-separator"]]],["p-7be87521",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-a7ea333a",[[1,"ifx-footer-column"]]],["p-4e4e2681",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-8b6e2a2f",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-6236fd64",[[1,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-e9d9e7b4",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-eeb8c133",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-586b1df5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-9a35d078",[[1,"ifx-sidebar-title"]]],["p-cd7991a7",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-b1a6a7dd",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-055513d2",[[1,"ifx-stepper",{"showNumber":[4,"show-number"],"activeStep":[2,"active-step"],"variant":[1],"internalActiveStep":[32]},null,{"activeStep":["activeStepHandler"]}]]],["p-e040f96b",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4712a064",[[4,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-2f6da28d",[[0,"ifx-table",{"cols":[1],"rows":[1],"columnDefs":[16],"rowData":[16],"rowHeight":[1,"row-height"],"uniqueKey":[1,"unique-key"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationPageSize":[2,"pagination-page-size"],"gridOptions":[32]}]]],["p-cfcd47d0",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-bb3fe9bd",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32],"internalIndeterminate":[32]},null,{"value":["valueChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ec50ca9d",[[1,"ifx-search-field",{"value":[1025],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"insideDropdown":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"]],{"value":["valueWatcher"]}]]],["p-1638dc59",[[0,"ifx-select",{"type":[1],"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"searchEnabled":[4,"search-enabled"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"placeholderValue":[1,"placeholder-value"],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16],"fuseOptions":[16],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16],"callbackOnCreateTemplates":[16],"valueComparer":[16],"ifxError":[4,"ifx-error"],"ifxErrorMessage":[1,"ifx-error-message"],"ifxLabel":[1,"ifx-label"],"ifxDisabled":[4,"ifx-disabled"],"ifxPlaceholderValue":[1,"ifx-placeholder-value"],"ifxOptions":[1,"ifx-options"],"ifxSize":[1,"ifx-size"],"ifxSelectedOption":[32],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"enable":[64],"disable":[64],"ajax":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-34cf5fef",[[1,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-886ac778",[[1,"ifx-accordion-item",{"caption":[1],"open":[1028],"initialCollapse":[4,"initial-collapse"],"internalOpen":[32]},null,{"open":["openChanged"]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-ee9e4c3d",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-d5149197",[[1,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-2f5e386b",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,c as t,h as i,g as r}from"./p-0a568ace.js";const o=':host{display:block}.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{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}.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:14px;padding:2px;width:25px;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 s=o;const n=class{constructor(i){e(this,i);this.ifxDate=t(this,"ifxDate",7);this.size="s";this.error=false;this.success=false;this.disabled=false;this.name=""}getDate(e){const t=new Date(e.target.value);const i=t.getDate();const r=t.getMonth()+1;const o=t.getFullYear();if(i&&r&&o){this.ifxDate.emit({day:i,month:r,year:o})}}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 t=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){t.classList.add("firefox__classes")}else if(t.classList.contains("firefox__classes")){t.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses()}render(){return i("div",{key:"b5e7c4198d7b8c165a6b86e5b90c6c19eff266a7",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":""}`},i("input",{key:"df95360aabf52c52fdaaa4b45bf1d287f995e54e",class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,type:"date",name:this.name,disabled:this.disabled,onChange:e=>this.getDate(e)}),i("div",{key:"468d2e5b2d2d7e0fd3d632d3091b75d02aea0d3b",class:"icon__wrapper",onClick:()=>this.handleInputFocusOnIconClick()},i("ifx-icon",{key:"f8e38812f671b4d9956d4c16c13e7c0300302402",icon:"calendar16"})))}get el(){return r(this)}};n.style=s;export{n as ifx_date_picker};
|
|
2
|
+
//# sourceMappingURL=p-5cb684e1.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","getDate","e","selectedDate","Date","target","value","day","month","getMonth","year","getFullYear","this","ifxDate","emit","handleInputFocusOnIconClick","input","el","shadowRoot","querySelector","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","classList","add","contains","remove","componentDidLoad","render","h","key","class","size","disabled","error","success","type","name","onChange","onClick","icon"],"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 :host { \n display: block;\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 {\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 }\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: 14px;\n padding: 2px;\n width: 25px;\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 }","import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\n\nexport class DatePicker {\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() name: string = '';\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const selectedDate = new Date(e.target.value);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n if(day && month && year) { \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) { \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 }\n\n render() {\n return (\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : \"\"}`} >\n <input \n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`} type=\"date\" \n name={this.name}\n disabled={this.disabled}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></ifx-icon>\n </div>\n </div>\n )\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,inDACtB,MAAAC,EAAeD,E,MCOFE,EAAU,M,oEAEE,I,WACE,M,aACE,M,cACC,M,UACL,E,CAGvB,OAAAC,CAAQC,GACN,MAAMC,EAAe,IAAIC,KAAKF,EAAEG,OAAOC,OACvC,MAAMC,EAAMJ,EAAaF,UACzB,MAAMO,EAAQL,EAAaM,WAAa,EACxC,MAAMC,EAAOP,EAAaQ,cAE1B,GAAGJ,GAAOC,GAASE,EAAM,CACvBE,KAAKC,QAAQC,KAAK,CAACP,MAAKC,QAAOE,Q,EAInC,2BAAAK,GACE,MAAMC,EAAQJ,KAAKK,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,EAAUd,KAAKS,aACrB,MAAML,EAAQJ,KAAKK,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,GACEnB,KAAKa,mB,CAGP,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBvB,KAAKwB,OAAS,IAAM,QAAU,WAAWxB,KAAKyB,SAAW,WAAa,MAClGJ,EAAA,SAAAC,IAAA,2CACAC,MAAO,sBAAsBvB,KAAK0B,MAAQ,QAAU,MAAM1B,KAAK2B,QAAU,UAAY,KAAMC,KAAK,OAChGC,KAAM7B,KAAK6B,KACXJ,SAAUzB,KAAKyB,SACfK,SAAWxC,GAAMU,KAAKX,QAAQC,KAC9B+B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBQ,QAAS,IAAM/B,KAAKG,+BAC7CkB,EAAA,YAAAC,IAAA,2CAAUU,KAAK,gB"}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as t,h as i,g as r}from"./p-0a568ace.js";const o=':host{display:inline-block}.date__picker-input{font-family:"Source Sans 3";outline:none;width:100%;cursor:pointer;border-radius:1px;border:1px solid #8D8786}.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{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}.input__wrapper{display:flex;justify-content:space-between;align-items:center;align-self:stretch;background:#FFFFFF;position:relative}.input__wrapper.large{width:400px}.input__wrapper.small{width:173px}.input__wrapper.disabled .icon__wrapper{background-color:#EEEDED}.icon__wrapper{position:absolute;right:14px;padding:2px;width:25px;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 s=o;const n=class{constructor(i){e(this,i);this.ifxDate=t(this,"ifxDate",7);this.size="s";this.error=false;this.success=false;this.disabled=false;this.name=""}getDate(e){const t=new Date(e.target.value);const i=t.getDate();const r=t.getMonth()+1;const o=t.getFullYear();if(i&&r&&o){this.ifxDate.emit({day:i,month:r,year:o})}}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 t=this.el.shadowRoot.querySelector(".date__picker-input");if(e==="Firefox"){t.classList.add("firefox__classes")}else if(t.classList.contains("firefox__classes")){t.classList.remove("firefox__classes")}}componentDidLoad(){this.setFireFoxClasses()}render(){return i("div",{key:"b5e7c4198d7b8c165a6b86e5b90c6c19eff266a7",class:`input__wrapper ${this.size==="l"?"large":"small"} ${this.disabled?"disabled":""}`},i("input",{key:"df95360aabf52c52fdaaa4b45bf1d287f995e54e",class:`date__picker-input ${this.error?"error":""} ${this.success?"success":""}`,type:"date",name:this.name,disabled:this.disabled,onChange:e=>this.getDate(e)}),i("div",{key:"468d2e5b2d2d7e0fd3d632d3091b75d02aea0d3b",class:"icon__wrapper",onClick:()=>this.handleInputFocusOnIconClick()},i("ifx-icon",{key:"f8e38812f671b4d9956d4c16c13e7c0300302402",icon:"calendar16"})))}get el(){return r(this)}};n.style=s;export{n as ifx_date_picker};
|
|
2
|
-
//# sourceMappingURL=p-fdc5dafa.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["datePickerCss","IfxDatePickerStyle0","DatePicker","getDate","e","selectedDate","Date","target","value","day","month","getMonth","year","getFullYear","this","ifxDate","emit","handleInputFocusOnIconClick","input","el","shadowRoot","querySelector","focus","getBrowser","navigator","userAgent","indexOf","setFireFoxClasses","browser","classList","add","contains","remove","componentDidLoad","render","h","key","class","size","disabled","error","success","type","name","onChange","onClick","icon"],"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 :host { \n display: inline-block;\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\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 {\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 }\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\n &.large { \n width: 400px;\n }\n\n &.small { \n width: 173px;\n }\n\n &.disabled { \n & .icon__wrapper { \n background-color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n .icon__wrapper { \n position: absolute;\n right: 14px;\n padding: 2px;\n width: 25px;\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 }","import { Component, Prop, h, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-date-picker',\n styleUrl: 'date-picker.scss',\n shadow: true,\n})\n\nexport class DatePicker {\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() name: string = '';\n @Event() ifxDate: EventEmitter;\n\n getDate(e) { \n const selectedDate = new Date(e.target.value);\n const day = selectedDate.getDate();\n const month = selectedDate.getMonth() + 1; \n const year = selectedDate.getFullYear();\n\n if(day && month && year) { \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) { \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 }\n\n render() {\n return (\n <div class={`input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : \"\"}`} >\n <input \n class={`date__picker-input ${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`} type=\"date\" \n name={this.name}\n disabled={this.disabled}\n onChange={(e) => this.getDate(e)} />\n <div class=\"icon__wrapper\" onClick={() => this.handleInputFocusOnIconClick()}>\n <ifx-icon icon='calendar16'></ifx-icon>\n </div>\n </div>\n )\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,4mDACtB,MAAAC,EAAeD,E,MCOFE,EAAU,M,oEAEE,I,WACE,M,aACE,M,cACC,M,UACL,E,CAGvB,OAAAC,CAAQC,GACN,MAAMC,EAAe,IAAIC,KAAKF,EAAEG,OAAOC,OACvC,MAAMC,EAAMJ,EAAaF,UACzB,MAAMO,EAAQL,EAAaM,WAAa,EACxC,MAAMC,EAAOP,EAAaQ,cAE1B,GAAGJ,GAAOC,GAASE,EAAM,CACvBE,KAAKC,QAAQC,KAAK,CAACP,MAAKC,QAAOE,Q,EAInC,2BAAAK,GACE,MAAMC,EAAQJ,KAAKK,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,EAAUd,KAAKS,aACrB,MAAML,EAAQJ,KAAKK,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,GACEnB,KAAKa,mB,CAGP,MAAAO,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAO,kBAAkBvB,KAAKwB,OAAS,IAAM,QAAU,WAAWxB,KAAKyB,SAAW,WAAa,MAClGJ,EAAA,SAAAC,IAAA,2CACAC,MAAO,sBAAsBvB,KAAK0B,MAAQ,QAAU,MAAM1B,KAAK2B,QAAU,UAAY,KAAMC,KAAK,OAChGC,KAAM7B,KAAK6B,KACXJ,SAAUzB,KAAKyB,SACfK,SAAWxC,GAAMU,KAAKX,QAAQC,KAC9B+B,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBAAgBQ,QAAS,IAAM/B,KAAKG,+BAC7CkB,EAAA,YAAAC,IAAA,2CAAUU,KAAK,gB"}
|