@infineon/infineon-design-system-stencil 20.46.1 → 20.46.2

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.
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-ca0e0765.js');
6
6
 
7
- const switchCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:40px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(20px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";
7
+ const switchCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default;border-color:#BFBBBB}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";
8
8
 
9
9
  const Switch = class {
10
10
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"ifx-switch.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,mzCAAmzC;;MCOxzC,MAAM;;;;iBACQ,KAAK;gBACP,EAAE;oBACG,KAAK;yBACC,KAAK;;EAIvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,MAAM;IACJ,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACzC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;;IAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;GACF;EAGD,MAAM;IACJ,QACEA,iBACE,KAAK,EAAE,aAAa,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,gBACvC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAE/CA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,mBAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAI,EACpCA,iBAAK,KAAK,EAAE,UAAU,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAC9F,EACNA,iBAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnEA,mBAAO,OAAO,EAAC,QAAQ,IACrBA,qBAAQ,CACF,CACJ,CACD,EACR;GAEF;;;;;;;;;","names":["h"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n width: tokens.$ifxSpace500;\n // gap: tokens.$ifxSpace200;\n height: 20px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(20px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"version":3}
1
+ {"file":"ifx-switch.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,o2CAAo2C;;MCOz2C,MAAM;;;;iBACQ,KAAK;gBACP,EAAE;oBACG,KAAK;yBACC,KAAK;;EAIvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,MAAM;IACJ,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACzC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;;IAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;GACF;EAGD,MAAM;IACJ,QACEA,iBACE,KAAK,EAAE,aAAa,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,gBACvC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAE/CA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,mBAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAI,EACpCA,iBAAK,KAAK,EAAE,UAAU,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAC9F,EACNA,iBAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnEA,mBAAO,OAAO,EAAC,QAAQ,IACrBA,qBAAQ,CACF,CACJ,CACD,EACR;GAEF;;;;;;;;;","names":["h"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // gap: tokens.$ifxSpace200;4\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"version":3}
@@ -14,8 +14,8 @@
14
14
  display: flex;
15
15
  align-items: center;
16
16
  position: relative;
17
- width: 40px;
18
- height: 20px;
17
+ width: 32px;
18
+ height: 16px;
19
19
  background-color: #FFFFFF;
20
20
  border: 1px solid #575352;
21
21
  border-radius: 20px;
@@ -36,6 +36,7 @@
36
36
  }
37
37
  .container.disabled {
38
38
  cursor: default;
39
+ border-color: #BFBBBB;
39
40
  }
40
41
 
41
42
  .switch_label-wrapper {
@@ -53,7 +54,7 @@
53
54
  height: 16px;
54
55
  background-color: #575352;
55
56
  border-radius: 50%;
56
- transition: transform 0.3s ease;
57
+ transition: transform 0.3s ease, background-color 0.3s ease;
57
58
  }
58
59
  .switch_checkbox-wrapper .switch.disabled {
59
60
  background-color: #BFBBBB;
@@ -61,7 +62,7 @@
61
62
  cursor: default;
62
63
  }
63
64
  .switch_checkbox-wrapper .switch.checked {
64
- transform: translateX(20px);
65
+ transform: translateX(16px);
65
66
  background-color: #FFFFFF;
66
67
  }
67
68
  .switch_checkbox-wrapper .switch.checked.disabled {
@@ -1,6 +1,6 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-38bfff87.js';
2
2
 
3
- const switchCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:40px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(20px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";
3
+ const switchCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default;border-color:#BFBBBB}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}";
4
4
 
5
5
  const Switch = class {
6
6
  constructor(hostRef) {
@@ -1 +1 @@
1
- {"file":"ifx-switch.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mzCAAmzC;;MCOxzC,MAAM;;;;iBACQ,KAAK;gBACP,EAAE;oBACG,KAAK;yBACC,KAAK;;EAIvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,MAAM;IACJ,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACzC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;;IAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;GACF;EAGD,MAAM;IACJ,QACE,WACE,KAAK,EAAE,aAAa,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,gBACvC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAE/C,WAAK,KAAK,EAAC,yBAAyB,IAClC,aAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAI,EACpC,WAAK,KAAK,EAAE,UAAU,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAC9F,EACN,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnE,aAAO,OAAO,EAAC,QAAQ,IACrB,eAAQ,CACF,CACJ,CACD,EACR;GAEF;;;;;;;;;","names":[],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n width: tokens.$ifxSpace500;\n // gap: tokens.$ifxSpace200;\n height: 20px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(20px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"version":3}
1
+ {"file":"ifx-switch.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,o2CAAo2C;;MCOz2C,MAAM;;;;iBACQ,KAAK;gBACP,EAAE;oBACG,KAAK;yBACC,KAAK;;EAIvC,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;GACF;EAID,MAAM;IACJ,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC1B,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GACzC;EAED,aAAa,CAAC,KAAoB;IAChC,IAAI,IAAI,CAAC,QAAQ;MAAE,OAAO;;IAE1B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;MAC9C,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;GACF;EAGD,MAAM;IACJ,QACE,WACE,KAAK,EAAE,aAAa,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAC5F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAC,GAAG,kBACE,IAAI,CAAC,aAAa,GAAG,MAAM,GAAG,OAAO,gBACvC,IAAI,CAAC,IAAI,EACrB,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,EAAE,EAC5B,SAAS,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAE/C,WAAK,KAAK,EAAC,yBAAyB,IAClC,aAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAAI,EACpC,WAAK,KAAK,EAAE,UAAU,IAAI,CAAC,aAAa,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,GAAI,CAC9F,EACN,WAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnE,aAAO,OAAO,EAAC,QAAQ,IACrB,eAAQ,CACF,CACJ,CACD,EACR;GAEF;;;;;;;;;","names":[],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // gap: tokens.$ifxSpace200;4\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"version":3}
@@ -1,2 +1,2 @@
1
- import{p as e,H as i,b as t}from"./p-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const a=()=>{{n(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t(JSON.parse('[["p-1c0c5582",[[1,"ifx-faq"]]],["p-123d4a3a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-5b4e3d51",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-efa61556",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-a5ff6fe7",[[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"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-00fe439d",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-e535fbe2",[[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],"internalActiveState":[32],"setActiveClasses":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-38699f7a",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-07fb6c30",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-b7dd5c86",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-a54437a6",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-b0a8503b",[[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-a9f1c526",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-62df057b",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-75c534f9",[[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,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-94b1554c",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-fbb504f5",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-c59e5f0a",[[1,"ifx-tag",{"icon":[1]}]]],["p-5418d5ad",[[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-e8b3afc4",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-b37bc53f",[[1,"ifx-badge"]]],["p-18af6ba6",[[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-09d642ff",[[1,"ifx-breadcrumb"]]],["p-2948735e",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-feb92f33",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-38dfaa49",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-d241f837",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-0d6acb23",[[1,"ifx-card-links"]]],["p-2e193a2c",[[1,"ifx-card-overline"]]],["p-70eac687",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-4f84a524",[[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-9c71d552",[[1,"ifx-dropdown-header"]]],["p-d2b59a7b",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9d7082e8",[[1,"ifx-dropdown-separator"]]],["p-4a4ef34b",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-7764940c",[[1,"ifx-footer-column"]]],["p-e632c8f1",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-d524e4be",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-e66d7199",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-8f666298",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-fa338e85",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a196e6e6",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-b30b75b5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"showFooter":[4,"show-footer"],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-c0c027ef",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-9e559e5e",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-3848724e",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4791428f",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-5dd00060",[[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-8cb5e5e4",[[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-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-98cc12fa",[[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-ed126660",[[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-602ec7ef",[[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-ef939fac",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-0b243c58",[[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-38471fd1",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-33a6033b",[[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-24813bed",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)));
1
+ import{p as e,H as i,b as t}from"./p-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const a=()=>{{n(i.prototype)}const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};const n=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const a=this.childNodes;if(e){for(let e=0;e<a.length;e++){if(a[e].nodeType!==2){t.appendChild(a[e].cloneNode(true))}}}return t}};a().then((e=>t(JSON.parse('[["p-1c0c5582",[[1,"ifx-faq"]]],["p-123d4a3a",[[1,"ifx-modal",{"opened":[1540],"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"showModal":[32]},null,{"opened":["openedChanged"]}]]],["p-5b4e3d51",[[1,"ifx-pagination",{"currentPage":[2,"current-page"],"total":[2],"internalPage":[32],"itemsPerPage":[32],"numberOfPages":[32]},[[0,"ifxSelect","setItemsPerPage"]]]]],["p-efa61556",[[1,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-a5ff6fe7",[[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"],"internalError":[32],"persistentSelectedOptions":[32],"listOfOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"zIndex":[32],"isLoading":[32],"loadedOptions":[32],"filteredOptions":[32]},null,{"error":["updateInternalError"],"loadedOptions":["loadedOptionsChanged"]}]]],["p-00fe439d",[[1,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"internalState":[32]},null,{"isOpen":["handlePropChange"]}]]],["p-e535fbe2",[[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],"internalActiveState":[32],"setActiveClasses":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"]}]]],["p-38699f7a",[[1,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4]}]]],["p-07fb6c30",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["p-b7dd5c86",[[1,"ifx-chip",{"placeholder":[1],"selectedValue":[32]},[[5,"mousedown","handleOutsideClick"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-a54437a6",[[1,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-b0a8503b",[[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-a9f1c526",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["p-62df057b",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["p-75c534f9",[[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,"ifxSearchBarIsOpen","handleSearchBarToggle"],[5,"mousedown","handleOutsideClick"]]]]],["p-94b1554c",[[1,"ifx-navbar-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1],"href":[1],"target":[1],"hideComponent":[4,"hide-component"]}]]],["p-fbb504f5",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-c59e5f0a",[[1,"ifx-tag",{"icon":[1]}]]],["p-5418d5ad",[[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-e8b3afc4",[[1,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-b37bc53f",[[1,"ifx-badge"]]],["p-18af6ba6",[[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-09d642ff",[[1,"ifx-breadcrumb"]]],["p-2948735e",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-feb92f33",[[1,"ifx-card",{"direction":[1],"href":[1],"target":[1],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-38dfaa49",[[1,"ifx-card-headline",{"isHovered":[4,"is-hovered"],"direction":[32],"hasDesc":[32]}]]],["p-d241f837",[[1,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-0d6acb23",[[1,"ifx-card-links"]]],["p-2e193a2c",[[1,"ifx-card-overline"]]],["p-70eac687",[[1,"ifx-card-text",{"hasBtn":[32]}]]],["p-4f84a524",[[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-9c71d552",[[1,"ifx-dropdown-header"]]],["p-d2b59a7b",[[1,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-9d7082e8",[[1,"ifx-dropdown-separator"]]],["p-4a4ef34b",[[1,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-7764940c",[[1,"ifx-footer-column"]]],["p-e632c8f1",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["p-d524e4be",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["p-e66d7199",[[1,"ifx-navbar-menu",{"menu":[32]}]]],["p-8f666298",[[1,"ifx-navbar-menu-item",{"href":[1],"target":[1],"hide":[4]}]]],["p-fa338e85",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-a196e6e6",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]},null,{"value":["valueChanged"]}]]],["p-b30b75b5",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"showFooter":[4,"show-footer"],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"activeItem":[32]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]]]]],["p-c0c027ef",[[1,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4]}]]],["p-9e559e5e",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-d4c756a5",[[1,"ifx-switch",{"value":[4],"name":[1],"disabled":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-4791428f",[[4,"ifx-tab",{"header":[1],"disabled":[4]}]]],["p-5dd00060",[[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-8cb5e5e4",[[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-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-98cc12fa",[[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-ed126660",[[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-602ec7ef",[[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-ef939fac",[[1,"ifx-link",{"href":[1025],"target":[1025],"size":[1],"variant":[1025]}]]],["p-0b243c58",[[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-38471fd1",[[1,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["p-33a6033b",[[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-24813bed",[[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 i,h as s}from"./p-5308bbce.js";const o=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:32px;height:16px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default;border-color:#BFBBBB}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease, background-color 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(16px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const r=class{constructor(s){e(this,s);this.ifxChange=i(this,"ifxChange",7);this.value=false;this.name="";this.disabled=false;this.internalValue=false}componentWillLoad(){this.internalValue=this.value}valueChanged(e,i){if(e!==i){this.internalValue=e}}toggle(){if(this.disabled)return;this.internalValue=!this.internalValue;this.ifxChange.emit(this.internalValue)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggle()}}render(){return s("div",{class:`container ${this.internalValue?"checked":""} ${this.disabled?"disabled":""}`,role:"switch",tabindex:"0","aria-checked":this.internalValue?"true":"false","aria-label":this.name,onClick:()=>this.toggle(),onKeyDown:e=>this.handleKeyDown(e)},s("div",{class:"switch_checkbox-wrapper"},s("input",{type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,value:`${this.internalValue}`}),s("div",{class:`switch ${this.internalValue?"checked":""} ${this.disabled?"disabled":""}`})),s("div",{class:`switch_label-wrapper ${this.disabled?"disabled":""}`},s("label",{htmlFor:"switch"},s("slot",null))))}static get watchers(){return{value:["valueChanged"]}}};r.style=o;export{r as ifx_switch};
2
+ //# sourceMappingURL=p-d4c756a5.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["switchCss","Switch","componentWillLoad","this","internalValue","value","valueChanged","newValue","oldValue","toggle","disabled","ifxChange","emit","handleKeyDown","event","key","render","h","class","role","tabindex","name","onClick","onKeyDown","type","hidden","htmlFor"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n // gap: tokens.$ifxSpace200;4\n // Subtracting padding size from both height and width\n width: (tokens.$ifxSpace500)-8px;\n height: 16px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n border-color: tokens.$ifxColorEngineering300;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease, background-color 0.3s ease;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(16px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: tokens.$ifxColorEngineering300;\n border-color: tokens.$ifxColorEngineering300;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,m2C,MCOLC,EAAM,M,yEACQ,M,UACF,G,cACK,M,mBACM,K,CAIlC,iBAAAC,GACEC,KAAKC,cAAgBD,KAAKE,K,CAI5B,YAAAC,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBL,KAAKC,cAAgBG,C,EAMzB,MAAAE,GACE,GAAIN,KAAKO,SAAU,OACnBP,KAAKC,eAAiBD,KAAKC,cAC3BD,KAAKQ,UAAUC,KAAKT,KAAKC,c,CAG3B,aAAAS,CAAcC,GACZ,GAAIX,KAAKO,SAAU,OAEnB,GAAII,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CZ,KAAKM,Q,EAKT,MAAAO,GACE,OACEC,EAAA,OACEC,MAAO,aAAaf,KAAKC,cAAgB,UAAY,MAAMD,KAAKO,SAAW,WAAa,KACxFS,KAAK,SACLC,SAAS,IAAG,eACEjB,KAAKC,cAAgB,OAAS,QAAO,aACvCD,KAAKkB,KACjBC,QAAS,IAAMnB,KAAKM,SACpBc,UAAYT,GAAUX,KAAKU,cAAcC,IAEzCG,EAAA,OAAKC,MAAM,2BACTD,EAAA,SAAOO,KAAK,WAAWC,OAAM,KAC3BJ,KAAMlB,KAAKkB,KACXX,SAAUP,KAAKO,SACfL,MAAO,GAAGF,KAAKC,kBACjBa,EAAA,OAAKC,MAAO,UAAUf,KAAKC,cAAgB,UAAY,MAAMD,KAAKO,SAAW,WAAa,QAE5FO,EAAA,OAAKC,MAAO,wBAAwBf,KAAKO,SAAW,WAAa,MAC/DO,EAAA,SAAOS,QAAQ,UACbT,EAAA,e"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "20.46.1",
3
+ "version": "20.46.2",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://infineon.github.io/infineon-design-system-stencil",
@@ -1,2 +0,0 @@
1
- import{r as e,c as i,h as s}from"./p-5308bbce.js";const t=':root{--ifx-font-family:"Source Sans 3";font-family:var(--ifx-font-family, sans-serif)}:host{display:inline-block;user-select:none}.container{padding:4px;display:flex;align-items:center;position:relative;width:40px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:20px;cursor:pointer;transition:background-color 0.3s ease;outline:none}.container:focus{outline:4px solid #0A8276;outline-offset:2px}.container:focus:not(:focus-visible){outline:none}.container:focus-visible{outline:2px solid #0A8276;outline-offset:2px}.container.disabled{cursor:default}.switch_label-wrapper{margin-left:46px}.switch_label-wrapper label:hover{cursor:pointer}.switch_label-wrapper.disabled{color:#BFBBBB}.switch_checkbox-wrapper .switch{width:16px;height:16px;background-color:#575352;border-radius:50%;transition:transform 0.3s ease}.switch_checkbox-wrapper .switch.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}.switch_checkbox-wrapper .switch.checked{transform:translateX(20px);background-color:#FFFFFF}.switch_checkbox-wrapper .switch.checked.disabled{cursor:default}.container:hover .toggle-switch{box-shadow:0 0 5px rgba(0, 0, 0, 0.2)}.container.checked{background-color:#0A8276;border-color:#0A8276}.container.checked.disabled{background-color:#BFBBBB;border-color:#BFBBBB;cursor:default}';const r=class{constructor(s){e(this,s);this.ifxChange=i(this,"ifxChange",7);this.value=false;this.name="";this.disabled=false;this.internalValue=false}componentWillLoad(){this.internalValue=this.value}valueChanged(e,i){if(e!==i){this.internalValue=e}}toggle(){if(this.disabled)return;this.internalValue=!this.internalValue;this.ifxChange.emit(this.internalValue)}handleKeyDown(e){if(this.disabled)return;if(e.key==="Enter"||e.key===" "){this.toggle()}}render(){return s("div",{class:`container ${this.internalValue?"checked":""} ${this.disabled?"disabled":""}`,role:"switch",tabindex:"0","aria-checked":this.internalValue?"true":"false","aria-label":this.name,onClick:()=>this.toggle(),onKeyDown:e=>this.handleKeyDown(e)},s("div",{class:"switch_checkbox-wrapper"},s("input",{type:"checkbox",hidden:true,name:this.name,disabled:this.disabled,value:`${this.internalValue}`}),s("div",{class:`switch ${this.internalValue?"checked":""} ${this.disabled?"disabled":""}`})),s("div",{class:`switch_label-wrapper ${this.disabled?"disabled":""}`},s("label",{htmlFor:"switch"},s("slot",null))))}static get watchers(){return{value:["valueChanged"]}}};r.style=t;export{r as ifx_switch};
2
- //# sourceMappingURL=p-3848724e.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["switchCss","Switch","componentWillLoad","this","internalValue","value","valueChanged","newValue","oldValue","toggle","disabled","ifxChange","emit","handleKeyDown","event","key","render","h","class","role","tabindex","name","onClick","onKeyDown","type","hidden","htmlFor"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n display: inline-block;\n user-select: none;\n}\n\n.container {\n padding: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n position: relative;\n width: tokens.$ifxSpace500;\n // gap: tokens.$ifxSpace200;\n height: 20px;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid tokens.$ifxColorEngineering500;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n outline: none;\n\n &:focus {\n outline: 4px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:focus:not(:focus-visible) {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &.disabled {\n cursor: default;\n }\n\n\n}\n\n\n.switch_label-wrapper {\n margin-left: 46px; //(container witdth - switch width) + label gap (label starts where switch class ends)\n \n & label { \n &:hover { \n cursor: pointer;\n }\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering300;\n }\n}\n\n\n.switch_checkbox-wrapper {\n\n .switch {\n // position: absolute;\n width: tokens.$ifxSpace200;\n height: tokens.$ifxSpace200;\n background-color: tokens.$ifxColorEngineering500;\n border-radius: 50%;\n transition: transform 0.3s ease;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n }\n\n .switch.checked {\n transform: translateX(20px);\n background-color: tokens.$ifxColorBaseWhite;\n\n &.disabled {\n cursor: default;\n }\n\n }\n\n}\n\n.container:hover .toggle-switch {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.container.checked {\n background-color: tokens.$ifxColorOcean500;\n border-color: tokens.$ifxColorOcean500;\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n cursor: default;\n }\n}","import { Component, Prop, State, Watch, h, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n})\nexport class Switch {\n @Prop() value: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @State() internalValue: boolean = false;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n }\n }\n\n\n\n toggle() {\n if (this.disabled) return;\n this.internalValue = !this.internalValue;\n this.ifxChange.emit(this.internalValue);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' || event.key === ' ') {\n this.toggle();\n }\n }\n\n\n render() {\n return (\n <div\n class={`container ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n role=\"switch\"\n tabindex=\"0\"\n aria-checked={this.internalValue ? 'true' : 'false'}\n aria-label={this.name}\n onClick={() => this.toggle()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n <div class=\"switch_checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n value={`${this.internalValue}`} />\n <div class={`switch ${this.internalValue ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n <div class={`switch_label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot />\n </label>\n </div>\n </div >\n )\n\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAY,kzC,MCOLC,EAAM,M,yEACQ,M,UACF,G,cACK,M,mBACM,K,CAIlC,iBAAAC,GACEC,KAAKC,cAAgBD,KAAKE,K,CAI5B,YAAAC,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBL,KAAKC,cAAgBG,C,EAMzB,MAAAE,GACE,GAAIN,KAAKO,SAAU,OACnBP,KAAKC,eAAiBD,KAAKC,cAC3BD,KAAKQ,UAAUC,KAAKT,KAAKC,c,CAG3B,aAAAS,CAAcC,GACZ,GAAIX,KAAKO,SAAU,OAEnB,GAAII,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CZ,KAAKM,Q,EAKT,MAAAO,GACE,OACEC,EAAA,OACEC,MAAO,aAAaf,KAAKC,cAAgB,UAAY,MAAMD,KAAKO,SAAW,WAAa,KACxFS,KAAK,SACLC,SAAS,IAAG,eACEjB,KAAKC,cAAgB,OAAS,QAAO,aACvCD,KAAKkB,KACjBC,QAAS,IAAMnB,KAAKM,SACpBc,UAAYT,GAAUX,KAAKU,cAAcC,IAEzCG,EAAA,OAAKC,MAAM,2BACTD,EAAA,SAAOO,KAAK,WAAWC,OAAM,KAC3BJ,KAAMlB,KAAKkB,KACXX,SAAUP,KAAKO,SACfL,MAAO,GAAGF,KAAKC,kBACjBa,EAAA,OAAKC,MAAO,UAAUf,KAAKC,cAAgB,UAAY,MAAMD,KAAKO,SAAW,WAAa,QAE5FO,EAAA,OAAKC,MAAO,wBAAwBf,KAAKO,SAAW,WAAa,MAC/DO,EAAA,SAAOS,QAAQ,UACbT,EAAA,e"}