@infineon/infineon-design-system-stencil 20.43.6 → 20.43.7
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-checkbox.cjs.entry.js +0 -2
- package/dist/cjs/ifx-checkbox.cjs.entry.js.map +1 -1
- package/dist/collection/components/checkbox/checkbox.js +0 -2
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/ifx-checkbox.entry.js +0 -2
- package/dist/esm/ifx-checkbox.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-a2e98d09.entry.js → p-f65d726c.entry.js} +2 -2
- package/dist/infineon-design-system-stencil/{p-a2e98d09.entry.js.map → p-f65d726c.entry.js.map} +1 -1
- package/package.json +1 -1
|
@@ -22,12 +22,10 @@ const Checkbox = class {
|
|
|
22
22
|
if (!this.disabled) {
|
|
23
23
|
if (this.inputElement.indeterminate) {
|
|
24
24
|
this.internalValue = true;
|
|
25
|
-
this.value = this.internalValue;
|
|
26
25
|
this.indeterminate = false;
|
|
27
26
|
}
|
|
28
27
|
else {
|
|
29
28
|
this.internalValue = !this.internalValue;
|
|
30
|
-
this.value = this.internalValue;
|
|
31
29
|
}
|
|
32
30
|
this.ifxChange.emit(this.internalValue);
|
|
33
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,ypEAAypE;;MCQhqE,QAAQ;;;;oBAIS,KAAK;iBACR,KAAK;iBACL,KAAK;gBACP,EAAE;gBACF,GAAG;;yBAEO,KAAK;;EAGtC,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,
|
|
1
|
+
{"file":"ifx-checkbox.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family);\n\n & .checkbox__wrapper {\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: boolean = false;\n @Prop() error: boolean = false;\n @Prop() name: string = '';\n @Prop() size: string = 'm';\n @State() internalValue: boolean;\n @Prop() indeterminate: boolean = false;\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalValue = true;\n this.indeterminate = false;\n } else {\n this.internalValue = !this.internalValue;\n }\n this.ifxChange.emit(this.internalValue);\n }\n }\n\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n }\n }\n\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.indeterminate;\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalValue) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalValue) {\n return \"checked\";\n } else return \"\"\n }\n\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n name={this.name}\n checked={this.internalValue}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.internalValue}`}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\" // role attribute\n aria-value={this.internalValue}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -13,12 +13,10 @@ export class Checkbox {
|
|
|
13
13
|
if (!this.disabled) {
|
|
14
14
|
if (this.inputElement.indeterminate) {
|
|
15
15
|
this.internalValue = true;
|
|
16
|
-
this.value = this.internalValue;
|
|
17
16
|
this.indeterminate = false;
|
|
18
17
|
}
|
|
19
18
|
else {
|
|
20
19
|
this.internalValue = !this.internalValue;
|
|
21
|
-
this.value = this.internalValue;
|
|
22
20
|
}
|
|
23
21
|
this.ifxChange.emit(this.internalValue);
|
|
24
22
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;oBAIS,KAAK;iBACR,KAAK;iBACL,KAAK;gBACP,EAAE;gBACF,GAAG;;yBAEO,KAAK;;EAGtC,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: boolean = false;\n @Prop() error: boolean = false;\n @Prop() name: string = '';\n @Prop() size: string = 'm';\n @State() internalValue: boolean;\n @Prop() indeterminate: boolean = false;\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalValue = true;\n this.indeterminate = false;\n } else {\n this.internalValue = !this.internalValue;\n }\n this.ifxChange.emit(this.internalValue);\n }\n }\n\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n }\n }\n\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.indeterminate;\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalValue) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalValue) {\n return \"checked\";\n } else return \"\"\n }\n\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n name={this.name}\n checked={this.internalValue}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.internalValue}`}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\" // role attribute\n aria-value={this.internalValue}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}\n"]}
|
|
@@ -18,12 +18,10 @@ const Checkbox = class {
|
|
|
18
18
|
if (!this.disabled) {
|
|
19
19
|
if (this.inputElement.indeterminate) {
|
|
20
20
|
this.internalValue = true;
|
|
21
|
-
this.value = this.internalValue;
|
|
22
21
|
this.indeterminate = false;
|
|
23
22
|
}
|
|
24
23
|
else {
|
|
25
24
|
this.internalValue = !this.internalValue;
|
|
26
|
-
this.value = this.internalValue;
|
|
27
25
|
}
|
|
28
26
|
this.ifxChange.emit(this.internalValue);
|
|
29
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-checkbox.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ypEAAypE;;MCQhqE,QAAQ;;;;oBAIS,KAAK;iBACR,KAAK;iBACL,KAAK;gBACP,EAAE;gBACF,GAAG;;yBAEO,KAAK;;EAGtC,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,
|
|
1
|
+
{"file":"ifx-checkbox.entry.js","mappings":";;AAAA,MAAM,WAAW,GAAG,ypEAAypE;;MCQhqE,QAAQ;;;;oBAIS,KAAK;iBACR,KAAK;iBACL,KAAK;gBACP,EAAE;gBACF,GAAG;;yBAEO,KAAK;;EAGtC,cAAc;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;QACnC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;OAC5B;WAAM;QACL,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;OAC1C;MACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACzC;GACF;EAID,YAAY,CAAC,QAAiB,EAAE,QAAiB;IAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;MAC9B,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC;KAChD;GACF;EAGD,aAAa,CAAC,KAAK;;IAEjB,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,IAAI,KAAK,CAAC,OAAO,KAAK,EAAE,EAAE;MAChD,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,KAAK,CAAC,cAAc,EAAE,CAAC;KACxB;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,kBAAkB;IAChB,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;GACtD;EAED,mBAAmB;IACjB,IAAI,IAAI,CAAC,KAAK,EAAE;MACd,IAAI,IAAI,CAAC,aAAa,EAAE;QACtB,OAAO,eAAe,CAAA;OACvB;WAAM;QACL,OAAO,OAAO,CAAA;OACf;KACF;SAAM,IAAI,IAAI,CAAC,aAAa,EAAE;MAC7B,OAAO,SAAS,CAAC;KAClB;;MAAM,OAAO,EAAE,CAAA;GACjB;EAGD,MAAM;IACJ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC;IAC/B,IAAI,OAAO,GAAG,KAAK,CAAC;IAEpB,IAAI,IAAI,EAAE;MACR,OAAO,GAAG,IAAI,CAAC;KAChB;IAED,QACE,WAAK,KAAK,EAAC,qBAAqB,IAC9B,aACE,IAAI,EAAC,UAAU,EACf,MAAM,QACN,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,EAAE,EAAC,UAAU,EACb,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,GAC9B,EAEF,WACE,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,IAAI,EAAC,UAAU;;oBACH,IAAI,CAAC,aAAa,mBACf,IAAI,CAAC,QAAQ,qBACZ,OAAO,EACvB,KAAK,EAAE;YACL,IAAI,CAAC,mBAAmB,EAAE;UAC5B,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,YAAY,GAAG,EAAE;UACrC,IAAI,CAAC,aAAa,GAAG,eAAe,GAAG,EAAE;UACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IAEhC,IAAI,CAAC,aAAa,IAAI,gBAAU,IAAI,EAAC,UAAU,GAAY,CACxD,EACL,OAAO;MACN,WAAK,EAAE,EAAC,OAAO,EAAC,KAAK,EAAE,SAAS,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE,IAAI,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAC/I,eAAQ,CACJ,CACJ,EACN;GACH;;;;;;;;;;","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family);\n\n & .checkbox__wrapper {\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: boolean = false;\n @Prop() error: boolean = false;\n @Prop() name: string = '';\n @Prop() size: string = 'm';\n @State() internalValue: boolean;\n @Prop() indeterminate: boolean = false;\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalValue = true;\n this.indeterminate = false;\n } else {\n this.internalValue = !this.internalValue;\n }\n this.ifxChange.emit(this.internalValue);\n }\n }\n\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n }\n }\n\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.indeterminate;\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalValue) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalValue) {\n return \"checked\";\n } else return \"\"\n }\n\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n name={this.name}\n checked={this.internalValue}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.internalValue}`}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\" // role attribute\n aria-value={this.internalValue}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\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-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const t=()=>{{n(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const n=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}};t().then((e=>a(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-2bdcb6cd",[[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-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-899b2b0d",[[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-1f780f9c",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-71e26e6e",[[1,"ifx-footer-column"]]],["p-ef939fac",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["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-33a2f4a0",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"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-fb6abac5",[[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"]]]]],["p-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-a2e98d09",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["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-be54b78c",[[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-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-5dad72b3",[[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"]],{"href":["setInternalHref"]}]]],["p-24813bed",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)));
|
|
1
|
+
import{p as e,H as i,b as a}from"./p-5308bbce.js";export{s as setNonce}from"./p-5308bbce.js";const t=()=>{{n(i.prototype)}const a=import.meta.url;const t={};if(a!==""){t.resourcesUrl=new URL(".",a).href}return e(t)};const n=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}};t().then((e=>a(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-2bdcb6cd",[[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-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-899b2b0d",[[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-1f780f9c",[[1,"ifx-footer",{"variant":[1],"large":[32],"medium":[32]}]]],["p-71e26e6e",[[1,"ifx-footer-column"]]],["p-ef939fac",[[1,"ifx-link",{"href":[1],"target":[1],"size":[1],"variant":[1]}]]],["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-33a2f4a0",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"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-fb6abac5",[[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"]]]]],["p-5f0c8cc4",[[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["p-f65d726c",[[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"size":[1],"indeterminate":[4],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["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-be54b78c",[[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-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-5dad72b3",[[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"]],{"href":["setInternalHref"]}]]],["p-24813bed",[[1,"ifx-number-indicator",{"inverted":[4]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,c as o,h as r,g as i}from"./p-5308bbce.js";const c=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.checkbox__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const t=class{constructor(r){e(this,r);this.ifxChange=o(this,"ifxChange",7);this.disabled=false;this.value=false;this.error=false;this.name="";this.size="m";this.internalValue=undefined;this.indeterminate=false}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalValue=true;this.
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,c as o,h as r,g as i}from"./p-5308bbce.js";const c=':host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked{background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked.error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked.disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:"";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{height:20px;font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;flex:none;order:1;flex-grow:0}.checkbox__container .label.label-m{height:24px;font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}';const t=class{constructor(r){e(this,r);this.ifxChange=o(this,"ifxChange",7);this.disabled=false;this.value=false;this.error=false;this.name="";this.size="m";this.internalValue=undefined;this.indeterminate=false}handleCheckbox(){if(!this.disabled){if(this.inputElement.indeterminate){this.internalValue=true;this.indeterminate=false}else{this.internalValue=!this.internalValue}this.ifxChange.emit(this.internalValue)}}valueChanged(e,o){if(e!==o){this.internalValue=e;this.inputElement.checked=this.internalValue}}handleKeydown(e){if(e.keyCode===32||e.keyCode===13){this.handleCheckbox();e.preventDefault()}}componentWillLoad(){this.internalValue=this.value}componentDidRender(){this.inputElement.indeterminate=this.indeterminate}getCheckedClassName(){if(this.error){if(this.internalValue){return"checked error"}else{return"error"}}else if(this.internalValue){return"checked"}else return""}render(){const e=this.el.innerHTML;let o=false;if(e){o=true}return r("div",{class:"checkbox__container"},r("input",{type:"checkbox",hidden:true,ref:e=>this.inputElement=e,name:this.name,checked:this.internalValue,onChange:this.handleCheckbox.bind(this),id:"checkbox",value:`${this.internalValue}`}),r("div",{tabindex:"0",onClick:this.handleCheckbox.bind(this),onKeyDown:this.handleKeydown.bind(this),role:"checkbox","aria-value":this.internalValue,"aria-disabled":this.disabled,"aria-labelledby":"label",class:`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size==="m"?"checkbox-m":""}\n ${this.indeterminate?"indeterminate":""}\n ${this.disabled?"disabled":""}`},this.internalValue&&r("ifx-icon",{icon:"check-12"})),o&&r("div",{id:"label",class:`label ${this.size==="m"?"label-m":""} ${this.disabled?"disabled":""} `,onClick:this.handleCheckbox.bind(this)},r("slot",null)))}get el(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};t.style=c;export{t as ifx_checkbox};
|
|
2
|
+
//# sourceMappingURL=p-f65d726c.entry.js.map
|
package/dist/infineon-design-system-stencil/{p-a2e98d09.entry.js.map → p-f65d726c.entry.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["checkboxCss","Checkbox","handleCheckbox","this","disabled","inputElement","indeterminate","internalValue","
|
|
1
|
+
{"version":3,"names":["checkboxCss","Checkbox","handleCheckbox","this","disabled","inputElement","indeterminate","internalValue","ifxChange","emit","valueChanged","newValue","oldValue","checked","handleKeydown","event","keyCode","preventDefault","componentWillLoad","value","componentDidRender","getCheckedClassName","error","render","slot","el","innerHTML","hasSlot","h","class","type","hidden","ref","name","onChange","bind","id","tabindex","onClick","onKeyDown","role","size","icon"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-flex;\n vertical-align: top;\n}\n\n\n.checkbox__container {\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n padding: 0px;\n gap: tokens.$ifxSpace100;\n font-family: var(--ifx-font-family);\n\n & .checkbox__wrapper {\n display: flex;\n position: relative; //needs to be added for the indeterminate state of the checkbox\n justify-content: center;\n align-items: center;\n width: tokens.$ifxSize250;\n height: tokens.$ifxSize250;\n background-color: tokens.$ifxColorBaseWhite;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n &.checkbox-m {\n height: tokens.$ifxSize300;\n width: tokens.$ifxSize300;\n }\n\n\n &.error {\n border-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid #575352;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #EEEDED;\n border: 1px solid #575352;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background-color: #BFBBBB;\n border-color: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.checked {\n background-color: #0A8276;\n border-radius: tokens.$ifxBorderRadius12;\n border-color: tokens.$ifxColorBaseTransparent;\n flex: none;\n order: 0;\n flex-grow: 0;\n color: tokens.$ifxColorBaseWhite;\n\n &.error {\n background-color: #CD002F;\n }\n\n &:focus-visible {\n border: 1px solid transparent;\n outline: 2px solid #0A8276;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: #08665C;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n\n &.disabled {\n background: #BFBBBB;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n flex-grow: 0;\n }\n }\n\n &.indeterminate {\n &:before {\n content: \"\";\n display: block;\n width: 70%; // Adjust as needed for the width of the minus sign\n height: 2px; // Adjust for thickness of the minus sign\n background-color: #08665C; // Color of the minus sign\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n }\n\n }\n\n & .label {\n height: tokens.$ifxSize250;\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n flex-grow: 0;\n\n &.label-m {\n height: tokens.$ifxSize300;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n }\n\n &.disabled {\n color: #BFBBBB;\n }\n }\n\n & .checkbox__wrapper,\n & .label {\n &:hover {\n cursor: pointer;\n }\n }\n\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-checkbox',\n styleUrl: 'checkbox.scss',\n shadow: true\n})\n\nexport class Checkbox {\n private inputElement: HTMLInputElement;\n\n @Element() el;\n @Prop() disabled: boolean = false;\n @Prop() value: boolean = false;\n @Prop() error: boolean = false;\n @Prop() name: string = '';\n @Prop() size: string = 'm';\n @State() internalValue: boolean;\n @Prop() indeterminate: boolean = false;\n @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n\n handleCheckbox() {\n if (!this.disabled) {\n if (this.inputElement.indeterminate) {\n this.internalValue = true;\n this.indeterminate = false;\n } else {\n this.internalValue = !this.internalValue;\n }\n this.ifxChange.emit(this.internalValue);\n }\n }\n\n\n @Watch('value')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalValue = newValue;\n this.inputElement.checked = this.internalValue; // update the checkbox's checked property\n }\n }\n\n\n handleKeydown(event) {\n // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n if (event.keyCode === 32 || event.keyCode === 13) {\n this.handleCheckbox();\n event.preventDefault(); // prevent the default action when space or enter is pressed\n }\n }\n\n componentWillLoad() {\n this.internalValue = this.value;\n }\n\n componentDidRender() {\n this.inputElement.indeterminate = this.indeterminate;\n }\n\n getCheckedClassName() {\n if (this.error) {\n if (this.internalValue) {\n return \"checked error\"\n } else {\n return \"error\"\n }\n } else if (this.internalValue) {\n return \"checked\";\n } else return \"\"\n }\n\n\n render() {\n const slot = this.el.innerHTML;\n let hasSlot = false;\n\n if (slot) {\n hasSlot = true;\n }\n\n return (\n <div class=\"checkbox__container\">\n <input\n type=\"checkbox\"\n hidden\n ref={(el) => (this.inputElement = el)}\n name={this.name}\n checked={this.internalValue}\n onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n id='checkbox'\n value={`${this.internalValue}`}\n />\n\n <div\n tabindex=\"0\"\n onClick={this.handleCheckbox.bind(this)}\n onKeyDown={this.handleKeydown.bind(this)}\n role=\"checkbox\" // role attribute\n aria-value={this.internalValue}\n aria-disabled={this.disabled}\n aria-labelledby=\"label\"\n class={`checkbox__wrapper \n ${this.getCheckedClassName()}\n ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n ${this.indeterminate ? 'indeterminate' : \"\"}\n ${this.disabled ? 'disabled' : \"\"}`}\n >\n {this.internalValue && <ifx-icon icon=\"check-12\"></ifx-icon>}\n </div>\n {hasSlot &&\n <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n <slot />\n </div>}\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAc,wpE,MCQPC,EAAQ,M,4EAIS,M,WACH,M,WACA,M,UACF,G,UACA,I,gDAEU,K,CAGjC,cAAAC,GACE,IAAKC,KAAKC,SAAU,CAClB,GAAID,KAAKE,aAAaC,cAAe,CACnCH,KAAKI,cAAgB,KACrBJ,KAAKG,cAAgB,K,KAChB,CACLH,KAAKI,eAAiBJ,KAAKI,a,CAE7BJ,KAAKK,UAAUC,KAAKN,KAAKI,c,EAM7B,YAAAG,CAAaC,EAAmBC,GAC9B,GAAID,IAAaC,EAAU,CACzBT,KAAKI,cAAgBI,EACrBR,KAAKE,aAAaQ,QAAUV,KAAKI,a,EAKrC,aAAAO,CAAcC,GAEZ,GAAIA,EAAMC,UAAY,IAAMD,EAAMC,UAAY,GAAI,CAChDb,KAAKD,iBACLa,EAAME,gB,EAIV,iBAAAC,GACEf,KAAKI,cAAgBJ,KAAKgB,K,CAG5B,kBAAAC,GACEjB,KAAKE,aAAaC,cAAgBH,KAAKG,a,CAGzC,mBAAAe,GACE,GAAIlB,KAAKmB,MAAO,CACd,GAAInB,KAAKI,cAAe,CACtB,MAAO,e,KACF,CACL,MAAO,O,OAEJ,GAAIJ,KAAKI,cAAe,CAC7B,MAAO,S,MACF,MAAO,E,CAIhB,MAAAgB,GACE,MAAMC,EAAOrB,KAAKsB,GAAGC,UACrB,IAAIC,EAAU,MAEd,GAAIH,EAAM,CACRG,EAAU,I,CAGZ,OACEC,EAAA,OAAKC,MAAM,uBACTD,EAAA,SACEE,KAAK,WACLC,OAAM,KACNC,IAAMP,GAAQtB,KAAKE,aAAeoB,EAClCQ,KAAM9B,KAAK8B,KACXpB,QAASV,KAAKI,cACd2B,SAAU/B,KAAKD,eAAeiC,KAAKhC,MACnCiC,GAAG,WACHjB,MAAO,GAAGhB,KAAKI,kBAGjBqB,EAAA,OACES,SAAS,IACTC,QAASnC,KAAKD,eAAeiC,KAAKhC,MAClCoC,UAAWpC,KAAKW,cAAcqB,KAAKhC,MACnCqC,KAAK,W,aACOrC,KAAKI,cAAa,gBACfJ,KAAKC,SAAQ,kBACZ,QAChByB,MAAO,iCACL1B,KAAKkB,kCACPlB,KAAKsC,OAAS,IAAM,aAAe,eACnCtC,KAAKG,cAAgB,gBAAkB,eACvCH,KAAKC,SAAW,WAAa,MAE5BD,KAAKI,eAAiBqB,EAAA,YAAUc,KAAK,cAEvCf,GACCC,EAAA,OAAKQ,GAAG,QAAQP,MAAO,SAAS1B,KAAKsC,OAAS,IAAM,UAAY,MAAMtC,KAAKC,SAAW,WAAa,MAAOkC,QAASnC,KAAKD,eAAeiC,KAAKhC,OAC1IyB,EAAA,c"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "20.43.
|
|
3
|
+
"version": "20.43.7",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
|