@infineon/infineon-design-system-stencil 37.13.0--canary.1964.4c0dbe58a38ebf64252c372b89ceb2ea2b5b3aeb.0 → 37.13.0--canary.1964.d253442be84e3519692a852074a0a0c9de0710a9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-checkbox-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js +1 -1
- package/dist/cjs/ifx-radio-button-group.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js +1 -1
- package/dist/cjs/ifx-segmented-control.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-spinner_2.cjs.entry.js +1 -1
- package/dist/cjs/ifx-spinner_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/checkbox-group/checkbox-group.css +0 -2
- package/dist/collection/components/radio-button-group/radio-button-group.css +0 -2
- package/dist/collection/components/segmented-control/segmented-control.css +0 -2
- package/dist/collection/components/text-field/text-field.css +0 -2
- package/dist/components/ifx-checkbox-group.js +1 -1
- package/dist/components/ifx-checkbox-group.js.map +1 -1
- package/dist/components/ifx-radio-button-group.js +1 -1
- package/dist/components/ifx-radio-button-group.js.map +1 -1
- package/dist/components/ifx-segmented-control.js +1 -1
- package/dist/components/ifx-segmented-control.js.map +1 -1
- package/dist/components/ifx-set-filter.js +1 -1
- package/dist/components/ifx-template.js +1 -1
- package/dist/components/ifx-templates-ui.js +2 -2
- package/dist/components/ifx-text-field.js +1 -1
- package/dist/components/{p-54ace5a0.js → p-04dd6348.js} +2 -2
- package/dist/components/p-04dd6348.js.map +1 -0
- package/dist/components/{p-b510b1ca.js → p-507a8d44.js} +2 -2
- package/dist/components/{p-b510b1ca.js.map → p-507a8d44.js.map} +1 -1
- package/dist/esm/ifx-checkbox-group.entry.js +1 -1
- package/dist/esm/ifx-checkbox-group.entry.js.map +1 -1
- package/dist/esm/ifx-radio-button-group.entry.js +1 -1
- package/dist/esm/ifx-radio-button-group.entry.js.map +1 -1
- package/dist/esm/ifx-segmented-control.entry.js +1 -1
- package/dist/esm/ifx-segmented-control.entry.js.map +1 -1
- package/dist/esm/ifx-spinner_2.entry.js +1 -1
- package/dist/esm/ifx-spinner_2.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-2b88c1e7.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-2b88c1e7.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-a3e39868.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-a3e39868.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-b26b23a2.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-b26b23a2.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-d3b26d00.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-d3b26d00.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/components/p-54ace5a0.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-ae34c255.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-ae34c255.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-c26d6099.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-c26d6099.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-d1552ee5.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-d1552ee5.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-e474b201.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-e474b201.entry.js.map +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-7f4df11a.js');
|
|
|
6
6
|
const frameworkDetection = require('./framework-detection-39905fc2.js');
|
|
7
7
|
const domUtils = require('./dom-utils-2c4573c2.js');
|
|
8
8
|
|
|
9
|
-
const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;
|
|
9
|
+
const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
|
|
10
10
|
const IfxCheckboxGroupStyle0 = checkboxGroupCss;
|
|
11
11
|
|
|
12
12
|
const CheckboxGroup = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-checkbox-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,
|
|
1
|
+
{"file":"ifx-checkbox-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,i3BAAi3B,CAAC;AAC34B,+BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;QAQU,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QAgCpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAiCH;IAhEC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KAExB;IAED,MAAM,gBAAgB;QACpB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAGC,kCAAe,EAAE,CAAC;YACpCC,iCAAc,CAAC,oBAAoB,EAAE,MAAM,SAAS,CAAC,CAAA;SACtD;KACF;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACEC,kEAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,GAAGA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClFA,kEAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzDA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACfA,iBAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAGA,iBAAK,KAAK,EAAC,cAAc,IAACA,sBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtBA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.checkbox-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class CheckboxGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n\n @Listen('ifxError')\n handleCheckboxError(event: CustomEvent) {\n const checkbox = event.target as HTMLElement;\n if (checkbox.tagName === 'ifx-checkbox') {\n this.errorStates.set(checkbox, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all checkboxes in the group\n @Method()\n async setGroupError(error: boolean) {\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n (checkbox as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n if (!this.errorStates.has(checkbox)) {\n this.errorStates.set(checkbox, (checkbox as any).error || false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='checkbox-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -6,7 +6,7 @@ const index = require('./index-7f4df11a.js');
|
|
|
6
6
|
const frameworkDetection = require('./framework-detection-39905fc2.js');
|
|
7
7
|
const domUtils = require('./dom-utils-2c4573c2.js');
|
|
8
8
|
|
|
9
|
-
const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;
|
|
9
|
+
const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
|
|
10
10
|
const IfxRadioButtonGroupStyle0 = radioButtonGroupCss;
|
|
11
11
|
|
|
12
12
|
const RadioButtonGroup = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-radio-button-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"ifx-radio-button-group.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,+1BAA+1B,CAAC;AAC53B,kCAAe,mBAAmB;;MCWrB,gBAAgB;IAP7B;;QAQY,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QA+BpC,qBAAgB,GAAG;YACf,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B,CAAC;KAiCL;IA/DG,sBAAsB,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC5C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B;KACJ;;IAIC,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW;YAC9B,WAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;KACJ;IAEH,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAED,MAAM,gBAAgB;QAClB,IAAG,CAACA,+BAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACjC,MAAM,SAAS,GAAGC,kCAAe,EAAE,CAAC;YACpCC,iCAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC,CAAA;SAC5D;KACJ;IAMO,eAAe;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW;YAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAC1E;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAEO,eAAe;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KACjF;IAED,MAAM;QACF,QACIC,kEAAK,KAAK,EAAC,8BAA8B,IACpC,IAAI,CAAC,cAAc,GAAGA,iBAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClFA,kEAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IAC3DA,mEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD,EACL,IAAI,CAAC,WAAW,IACbA,iBAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IACxD,IAAI,CAAC,eAAe,GAAGA,iBAAK,KAAK,EAAC,cAAc,IAACA,sBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtBA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAChD,IAAI,EAAE,CACd,EACR;KACL;;;;;;;;","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.radio-button-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error || false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -6,7 +6,7 @@ const index = require('./index-7f4df11a.js');
|
|
|
6
6
|
const frameworkDetection = require('./framework-detection-39905fc2.js');
|
|
7
7
|
const domUtils = require('./dom-utils-2c4573c2.js');
|
|
8
8
|
|
|
9
|
-
const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400
|
|
9
|
+
const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D}.group__caption.error{color:#CD002F}";
|
|
10
10
|
const IfxSegmentedControlStyle0 = segmentedControlCss;
|
|
11
11
|
|
|
12
12
|
const SegmentedControl = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-segmented-control.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"ifx-segmented-control.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h"],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.group__label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n \n &:empty {\n display: none;\n }\n\n & .required {\n margin-left: 4px;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n}\n\n.group__controls {\n display: flex;\n flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.group__caption {\n margin-top: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n color: tokens.$ifxColorBaseBlack;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' | 'small' = 'regular';\n @Prop() required: boolean = false;\n @Prop() error: boolean = false;\n\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n }\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n <div class='group__label'>\n { this.label.trim() }\n { this.required && <span class={`required ${this.error ? 'error' : ''}`}> * </span> }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class={`group__caption ${this.error ? 'error' : ''}`}>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"],"version":3}
|
|
@@ -37,7 +37,7 @@ const Spinner = class {
|
|
|
37
37
|
};
|
|
38
38
|
Spinner.style = IfxSpinnerStyle0;
|
|
39
39
|
|
|
40
|
-
const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;
|
|
40
|
+
const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}";
|
|
41
41
|
const IfxTextFieldStyle0 = textFieldCss;
|
|
42
42
|
|
|
43
43
|
const TextField = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-spinner.ifx-text-field.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: tokens.$ifxColorOcean500;\n border-left-color: tokens.$ifxColorOcean500;\n border-right-color: tokens.$ifxColorOcean500;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n\n &.inverted {\n border-top-color: tokens.$ifxColorBaseWhite;\n border-left-color: tokens.$ifxColorBaseWhite;\n border-right-color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n & svg {\n fill: tokens.$ifxColorOcean500;\n }\n\n &.inverted {\n & svg {\n fill: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() el;\n @Prop() size: string;\n @Prop() variant: string;\n @Prop() inverted: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-spinner', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: tokens.$ifxSpace50;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-family: tokens.$ifxFontFamilyBody;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: tokens.$ifxSpace50;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid tokens.$ifxColorRed500;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorEngineering400;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset */\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n color: tokens.$ifxColorBaseBlack;\n font-family: tokens.$ifxFontFamilyBody;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: tokens.$ifxColorRed500;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on'\n @Prop() type: 'text' | 'password' = 'text';\n @Prop() internalId: string = \"text-field\"\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() { \n this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n componentWillLoad() { \n this.handleTypeProp()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-text-field', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) *</span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : \"\"}`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-spinner.ifx-text-field.entry.cjs.js","mappings":"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","names":["isNestedInIfxComponent","detectFramework","trackComponent","h","classNames"],"sources":["src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx","src/components/text-field/text-field.scss?tag=ifx-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: tokens.$ifxColorOcean500;\n border-left-color: tokens.$ifxColorOcean500;\n border-right-color: tokens.$ifxColorOcean500;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n\n &.inverted {\n border-top-color: tokens.$ifxColorBaseWhite;\n border-left-color: tokens.$ifxColorBaseWhite;\n border-right-color: tokens.$ifxColorBaseWhite;\n }\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n & svg {\n fill: tokens.$ifxColorOcean500;\n }\n\n &.inverted {\n & svg {\n fill: tokens.$ifxColorBaseWhite;\n }\n }\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() el;\n @Prop() size: string;\n @Prop() variant: string;\n @Prop() inverted: boolean = false;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-spinner', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`\n );\n }\n}\n","@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n display: flex;\n}\n\n.textInput__container {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n width: 100%;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid tokens.$ifxColorEngineering500;\n background-color: tokens.$ifxColorEngineering200;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n color: tokens.$ifxColorEngineering500;\n }\n }\n }\n }\n\n & .textInput__top-wrapper {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n gap: tokens.$ifxSpace50;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n display: flex;\n align-items: center;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 0;\n flex-grow: 0;\n\n & .optional-required {\n margin-left: 4px;\n }\n\n & .optional {\n margin-left: 4px;\n }\n\n & .required {\n margin-left: 4px;\n \n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n }\n }\n\n .input-container {\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n\n & .textInput__bottom-wrapper {\n flex-grow: 1;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: tokens.$ifxSpace50;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n width: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n gap: tokens.$ifxSpace100;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n border: 1px solid tokens.$ifxColorEngineering400;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n text-overflow: ellipsis;\n\n &.input-s {\n height: tokens.$ifxSize450;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n\n &::placeholder {\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightS;\n }\n\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace500;\n }\n\n &.error {\n border: 1px solid tokens.$ifxColorRed500;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid tokens.$ifxColorGreen500;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid tokens.$ifxColorOcean500;\n }\n\n &:hover:not(:disabled, :focus, .error, .success) {\n border: 1px solid tokens.$ifxColorEngineering500;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: tokens.$ifxColorEngineering400;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & .input-icon {\n // Position the icon within the icon container\n // Adjust the positioning as needed\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: tokens.$ifxSpace200;\n /* Adjust this value to control the icon's left offset */\n transition: .3s;\n color: tokens.$ifxColorEngineering400;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: tokens.$ifxColorRed500;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n \n }\n .delete-icon {\n position: absolute;\n right: tokens.$ifxSpace200;\n\n :hover {\n cursor: pointer;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = \"Placeholder\"\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = \"\";\n @Prop() icon: string = \"\";\n @Prop() caption: string = \"\";\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() optional: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on'\n @Prop() type: 'text' | 'password' = 'text';\n @Prop() internalId: string = \"text-field\"\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() { \n this.internalType = this.type === 'text' || this.type === 'password' ? this.type : 'text'\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue(\"\");\n }\n\n componentWillLoad() { \n this.handleTypeProp()\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-text-field', await framework)\n }\n }\n\n render() {\n return (\n <div aria-label=\"a text field for user input\" aria-value={this.value} aria-disabled={this.disabled} class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor={this.internalId}>\n <slot></slot>\n {this.optional && this.required ? (\n <span class=\"optional-required\">(optional) *</span>\n ) : this.optional ? (\n <span class=\"optional\">(optional)</span>\n ) : this.required ? (\n <span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n ) : null}\n </label>\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && (\n <ifx-icon class='input-icon' icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n maxlength={this.maxlength}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\n\n { (this.showDeleteIcon && this.value) && (\n <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon> \n )}\n </div>\n {this.caption && !this.error &&\n <div class={`textInput__bottom-wrapper-caption ${this.disabled ? 'disabled' : \"\"}`}>\n {this.caption}\n </div>}\n {this.error &&\n <div class=\"textInput__bottom-wrapper-caption error\">\n {this.caption}\n </div>}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
font-size: 1rem;
|
|
26
26
|
line-height: 1.5rem;
|
|
27
27
|
font-weight: 400;
|
|
28
|
-
font-family: "Source Sans 3";
|
|
29
28
|
margin-bottom: 8px;
|
|
30
29
|
text-align: left;
|
|
31
30
|
text-underline-position: from-font;
|
|
@@ -53,7 +52,6 @@
|
|
|
53
52
|
font-weight: 400;
|
|
54
53
|
font-size: 0.75rem;
|
|
55
54
|
line-height: 1rem;
|
|
56
|
-
font-family: "Source Sans 3";
|
|
57
55
|
flex: 1;
|
|
58
56
|
text-align: left;
|
|
59
57
|
text-underline-position: from-font;
|
|
@@ -25,7 +25,6 @@
|
|
|
25
25
|
font-size: 1rem;
|
|
26
26
|
line-height: 1.5rem;
|
|
27
27
|
font-weight: 400;
|
|
28
|
-
font-family: "Source Sans 3";
|
|
29
28
|
margin-bottom: 8px;
|
|
30
29
|
text-align: left;
|
|
31
30
|
text-underline-position: from-font;
|
|
@@ -51,7 +50,6 @@
|
|
|
51
50
|
.caption-text {
|
|
52
51
|
font-size: 0.75rem;
|
|
53
52
|
line-height: 1rem;
|
|
54
|
-
font-family: "Source Sans 3";
|
|
55
53
|
flex: 1;
|
|
56
54
|
text-align: left;
|
|
57
55
|
text-underline-position: from-font;
|
|
@@ -12,7 +12,6 @@
|
|
|
12
12
|
font-size: 1rem;
|
|
13
13
|
line-height: 1.5rem;
|
|
14
14
|
font-weight: 400;
|
|
15
|
-
font-family: "Source Sans 3";
|
|
16
15
|
}
|
|
17
16
|
.group__label:empty {
|
|
18
17
|
display: none;
|
|
@@ -44,7 +43,6 @@
|
|
|
44
43
|
font-size: 0.75rem;
|
|
45
44
|
line-height: 1rem;
|
|
46
45
|
color: #1D1D1D;
|
|
47
|
-
font-family: "Source Sans 3";
|
|
48
46
|
}
|
|
49
47
|
.group__caption.error {
|
|
50
48
|
color: #CD002F;
|
|
@@ -45,7 +45,6 @@
|
|
|
45
45
|
font-weight: 400;
|
|
46
46
|
font-size: 1rem;
|
|
47
47
|
line-height: 1.5rem;
|
|
48
|
-
font-family: "Source Sans 3";
|
|
49
48
|
display: flex;
|
|
50
49
|
align-items: center;
|
|
51
50
|
color: #1D1D1D;
|
|
@@ -162,7 +161,6 @@
|
|
|
162
161
|
font-size: 0.75rem;
|
|
163
162
|
line-height: 1rem;
|
|
164
163
|
color: #1D1D1D;
|
|
165
|
-
font-family: "Source Sans 3";
|
|
166
164
|
flex: none;
|
|
167
165
|
order: 1;
|
|
168
166
|
align-self: stretch;
|
|
@@ -3,7 +3,7 @@ import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
|
|
|
3
3
|
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
|
|
5
5
|
|
|
6
|
-
const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;
|
|
6
|
+
const checkboxGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
|
|
7
7
|
const IfxCheckboxGroupStyle0 = checkboxGroupCss;
|
|
8
8
|
|
|
9
9
|
const CheckboxGroup = /*@__PURE__*/ proxyCustomElement(class CheckboxGroup extends H {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-checkbox-group.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,
|
|
1
|
+
{"file":"ifx-checkbox-group.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,i3BAAi3B,CAAC;AAC34B,+BAAe,gBAAgB;;MCWlB,aAAa;IAP1B;;;;QAQU,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QAgCpC,qBAAgB,GAAG;YACjB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,CAAC;KAiCH;IAhEC,mBAAmB,CAAC,KAAkB;QACpC,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC7C,IAAI,QAAQ,CAAC,OAAO,KAAK,cAAc,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;KACF;;IAID,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YACzB,QAAgB,CAAC,KAAK,GAAG,KAAK,CAAC;SACjC,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KAExB;IAED,MAAM,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,oBAAoB,EAAE,MAAM,SAAS,CAAC,CAAA;SACtD;KACF;IAMO,eAAe;QACrB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACxE,UAAU,CAAC,OAAO,CAAC,CAAC,QAAQ;YAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;gBACnC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,EAAG,QAAgB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAClE;SACF,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,eAAe;QACrB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KAC/E;IAED,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,0BAA0B,IAClC,IAAI,CAAC,cAAc,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClF,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IACzD,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC9C,EACL,IAAI,CAAC,WAAW,IACf,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IAC1D,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAC9C,IAAI,EAAE,CACV,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.checkbox-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class CheckboxGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n\n @Listen('ifxError')\n handleCheckboxError(event: CustomEvent) {\n const checkbox = event.target as HTMLElement;\n if (checkbox.tagName === 'ifx-checkbox') {\n this.errorStates.set(checkbox, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all checkboxes in the group\n @Method()\n async setGroupError(error: boolean) {\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n (checkbox as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-checkbox-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n checkboxes.forEach((checkbox) => {\n if (!this.errorStates.has(checkbox)) {\n this.errorStates.set(checkbox, (checkbox as any).error || false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='checkbox-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange}></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
|
|
|
3
3
|
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
|
|
5
5
|
|
|
6
|
-
const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;
|
|
6
|
+
const radioButtonGroupCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.radio-button-group-container{display:flex;flex-direction:column}.radio-button-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.radio-button-group.horizontal{flex-direction:row;column-gap:12px}.radio-button-group.vertical{flex-direction:column;row-gap:12px}.group-label{font-size:1rem;line-height:1.5rem;font-weight:400;margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font-size:0.75rem;line-height:1rem;flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}";
|
|
7
7
|
const IfxRadioButtonGroupStyle0 = radioButtonGroupCss;
|
|
8
8
|
|
|
9
9
|
const RadioButtonGroup = /*@__PURE__*/ proxyCustomElement(class RadioButtonGroup extends H {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-radio-button-group.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"ifx-radio-button-group.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,+1BAA+1B,CAAC;AAC53B,kCAAe,mBAAmB;;MCWrB,gBAAgB;IAP7B;;;;QAQY,gBAAW,GAA8B,IAAI,GAAG,EAAE,CAAC;QAGnD,cAAS,GAA8B,UAAU,CAAC;QAGlD,mBAAc,GAAW,kBAAkB,CAAC;QAI3C,cAAS,GAAY,KAAK,CAAC;QA+BpC,qBAAgB,GAAG;YACf,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B,CAAC;KAiCL;IA/DG,sBAAsB,CAAC,KAAkB;QACrC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAqB,CAAC;QAChD,IAAI,WAAW,CAAC,OAAO,KAAK,kBAAkB,EAAE;YAC5C,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAChD,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1B;KACJ;;IAIC,MAAM,aAAa,CAAC,KAAc;QAChC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW;YAC9B,WAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;SACpC,CAAC,CAAC;KACJ;IAEH,iBAAiB;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAED,MAAM,gBAAgB;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;YACjC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,wBAAwB,EAAE,MAAM,SAAS,CAAC,CAAA;SAC5D;KACJ;IAMO,eAAe;QACnB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QAC9E,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW;YAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAG,WAAmB,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;aAC1E;SACJ,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,EAAE,CAAC;KAC1B;IAEO,eAAe;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KACjF;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAC,8BAA8B,IACpC,IAAI,CAAC,cAAc,GAAG,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,cAAc,OAAS,GAAG,EAAE,EAClF,4DAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,EAAE,IAC3D,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAU,CACjD,EACL,IAAI,CAAC,WAAW,IACb,WAAK,KAAK,EAAE,WAAW,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAE,IACxD,IAAI,CAAC,eAAe,GAAG,WAAK,KAAK,EAAC,cAAc,IAAC,gBAAU,IAAI,EAAC,WAAW,GACjE,CAAM,GAAG,EAAE,EACtB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAO,CAChD,IAAI,EAAE,CACd,EACR;KACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/radio-button-group/radio-button-group.scss?tag=ifx-radio-button-group&encapsulation=shadow","src/components/radio-button-group/radio-button-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.radio-button-group-container {\n display: flex;\n flex-direction: column;\n}\n\n.radio-button-group {\n display: flex;\n font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n gap: tokens.$ifxSpace100;\n\n &.horizontal {\n flex-direction: row;\n column-gap: tokens.$ifxSpace150;\n }\n\n &.vertical {\n flex-direction: column;\n row-gap: tokens.$ifxSpace150;\n }\n}\n\n.group-label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n margin-bottom: tokens.$ifxSpace100;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption {\n margin-top: tokens.$ifxSpace100;\n align-self: flex-start;\n display: flex;\n width: 100%;\n column-gap: tokens.$ifxSpace100;\n justify-content: space-between;\n align-items: center;\n\n &.default {\n color: tokens.$ifxColorBaseBlack;\n }\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n\n.caption-text {\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n flex: 1;\n text-align: left;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n flex:0;\n display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-radio-button-group',\n styleUrl: 'radio-button-group.scss',\n shadow: true,\n formAssociated: true\n})\n\nexport class RadioButtonGroup {\n private errorStates: Map<HTMLElement, boolean> = new Map();\n\n @Element() el: HTMLElement;\n @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n @Prop() size: string;\n @Prop() showGroupLabel: boolean;\n @Prop() groupLabelText: string = 'Group Label Text';\n @Prop() showCaption: boolean;\n @Prop() captionText: string;\n @Prop() showCaptionIcon: boolean;\n @State() hasErrors: boolean = false;\n \n @Listen('ifxError')\n handleRadioButtonError(event: CustomEvent) {\n const radioButton = event.target as HTMLElement;\n if (radioButton.tagName === 'ifx-radio-button') {\n this.errorStates.set(radioButton, event.detail);\n this.updateHasErrors();\n }\n }\n\n // Method to set the error state of all radio-butttons in the group\n @Method()\n async setGroupError(error: boolean) {\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n (radioButton as any).error = error;\n });\n }\n\n componentWillLoad() {\n this.initializeState();\n }\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-radio-button-group', await framework)\n }\n }\n\n handleSlotChange = () => {\n this.initializeState();\n };\n\n private initializeState() {\n this.errorStates.clear();\n const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n radioButtons.forEach((radioButton) => {\n if (!this.errorStates.has(radioButton)) {\n this.errorStates.set(radioButton, (radioButton as any).error || false);\n }\n });\n this.updateHasErrors();\n }\n\n private updateHasErrors() {\n this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n }\n\n render() {\n return (\n <div class='radio-button-group-container'>\n {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n <div class={`radio-button-group ${this.alignment} ${this.size}`}>\n <slot onSlotchange={this.handleSlotChange} ></slot>\n </div>\n {this.showCaption ? (\n <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n </ifx-icon></div> : ''}\n <div class='caption-text'>{this.captionText}</div>\n </div>) : ''}\n </div>\n );\n }\n}"],"version":3}
|
|
@@ -3,7 +3,7 @@ import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
|
|
|
3
3
|
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
|
4
4
|
import { d as defineCustomElement$2 } from './p-6ca4e3f8.js';
|
|
5
5
|
|
|
6
|
-
const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400
|
|
6
|
+
const segmentedControlCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.group{display:flex;flex-direction:column;justify-content:space-between}.group__label{font-size:1rem;line-height:1.5rem;font-weight:400}.group__label:empty{display:none}.group__label .required{margin-left:4px}.group__label .required.error{color:#CD002F}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{margin-top:4px;display:flex;align-items:center;gap:8px;font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D}.group__caption.error{color:#CD002F}";
|
|
7
7
|
const IfxSegmentedControlStyle0 = segmentedControlCss;
|
|
8
8
|
|
|
9
9
|
const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl extends H {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-segmented-control.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,
|
|
1
|
+
{"file":"ifx-segmented-control.js","mappings":"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","names":[],"sources":["src/components/segmented-control/segmented-control.scss?tag=ifx-segmented-control&encapsulation=shadow","src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.group {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.group__label {\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n font-weight: tokens.$ifxFontWeightRegular;\n \n &:empty {\n display: none;\n }\n\n & .required {\n margin-left: 4px;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n }\n}\n\n.group__controls {\n display: flex;\n flex-wrap: wrap;\n}\n\n.group__controls ::slotted(*) {\n margin-left: -1px;\n margin-top: -1px;\n}\n\n.group__caption {\n margin-top: tokens.$ifxSpace50;\n display: flex;\n align-items: center;\n gap: tokens.$ifxSpace100;\n font-style: normal;\n font-weight: tokens.$ifxFontWeightRegular;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n color: tokens.$ifxColorBaseBlack;\n\n &.error {\n color: tokens.$ifxColorRed500;\n }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component ({\n tag: 'ifx-segmented-control',\n styleUrl: 'segmented-control.scss',\n shadow: true\n})\n\nexport class SegmentedControl {\n @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n @Prop() caption: string = '';\n @Prop() label: string = '';\n @Prop() size: 'regular' | 'small' = 'regular';\n @Prop() required: boolean = false;\n @Prop() error: boolean = false;\n\n\n @Listen('segmentSelect')\n onSegmentSelect(event: CustomEvent) {\n const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n this.selectedValue = selectedValue;\n this.ifxChange.emit({ previousValue, selectedValue });\n }\n\n private selectedValue: string = '';\n\n unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n let previousValue: string;\n let selectedValue: string;\n\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n if (control.selected) {\n if (control.segmentIndex !== newSelectedIndex) {\n control.selected = false;\n previousValue = control.value;\n } else {\n selectedValue = control.value;\n }\n }\n })\n\n return { previousValue, selectedValue };\n }\n\n getSegments(): NodeList {\n return this.SegmentedControl.querySelectorAll('ifx-segment');\n }\n\n setActiveSegment(): void {\n const segments: NodeList = this.getSegments();\n let activeSegmentedControlFound = false;\n segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n control.segmentIndex = idx;\n if (activeSegmentedControlFound) {\n if (control.selected) control.selected = false;\n } else {\n if (control.selected) {\n activeSegmentedControlFound = true;\n this.selectedValue = control.value;\n }\n }\n });\n }\n\n setSegmentSize(): void {\n const segments: NodeList = this.getSegments();\n segments.forEach((control: HTMLIfxSegmentElement) => {\n control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n });\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.SegmentedControl)) { \n const framework = detectFramework();\n trackComponent('ifx-segmented-control', await framework)\n }\n this.setActiveSegment();\n }\n\n render() {\n return (\n <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n <div class='group__label'>\n { this.label.trim() }\n { this.required && <span class={`required ${this.error ? 'error' : ''}`}> * </span> }\n </div>\n \n <div class='group__controls'>\n <slot />\n </div>\n \n {\n this.caption.trim() &&\n <div class={`group__caption ${this.error ? 'error' : ''}`}>\n <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n </div>\n }\n </div>\n );\n }\n\n componentDidRender() {\n this.setSegmentSize();\n }\n}"],"version":3}
|
|
@@ -5,7 +5,7 @@ import { d as defineCustomElement$6 } from './p-c5b03418.js';
|
|
|
5
5
|
import { d as defineCustomElement$5 } from './p-c174f9fd.js';
|
|
6
6
|
import { d as defineCustomElement$4 } from './p-ac46c988.js';
|
|
7
7
|
import { d as defineCustomElement$3 } from './p-1e21ebad.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-04dd6348.js';
|
|
9
9
|
|
|
10
10
|
const setFilterCss = "";
|
|
11
11
|
const IfxSetFilterStyle0 = setFilterCss;
|
|
@@ -5,8 +5,8 @@ import { d as defineCustomElement$7 } from './p-6ca4e3f8.js';
|
|
|
5
5
|
import { d as defineCustomElement$6 } from './p-91c41731.js';
|
|
6
6
|
import { d as defineCustomElement$5 } from './p-2d712043.js';
|
|
7
7
|
import { d as defineCustomElement$4 } from './p-9876eeab.js';
|
|
8
|
-
import { d as defineCustomElement$3 } from './p-
|
|
9
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$3 } from './p-507a8d44.js';
|
|
9
|
+
import { d as defineCustomElement$2 } from './p-04dd6348.js';
|
|
10
10
|
|
|
11
11
|
const templatesUiCss = "*{padding:0;margin:0}.templates__container{display:flex;flex-direction:column;align-items:center}.templates__container .back__btn-wrapper{display:none}.templates__container .back__btn-wrapper.show{display:flex;justify-content:space-between;width:100%}.templates__container .back__btn-wrapper .alert__wrapper{display:none}.templates__container .back__btn-wrapper .alert__wrapper.show{display:block}.templates__container .templates__wrapper{display:flex;padding:20px 0px;gap:20px;flex-wrap:wrap}.templates__container .templates__title.hide{display:none}";
|
|
12
12
|
const IfxTemplatesUiStyle0 = templatesUiCss;
|
|
@@ -3,7 +3,7 @@ import { d as detectFramework, t as trackComponent } from './p-08c92877.js';
|
|
|
3
3
|
import { i as isNestedInIfxComponent } from './p-1ecafb97.js';
|
|
4
4
|
import { d as defineCustomElement$1 } from './p-6ca4e3f8.js';
|
|
5
5
|
|
|
6
|
-
const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;
|
|
6
|
+
const textFieldCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.textInput__container{display:flex;flex-direction:column;align-items:flex-start;padding:0px;width:100%;flex:none;order:0;align-self:stretch;flex-grow:0;font-family:var(--ifx-font-family)}.textInput__container.disabled .textInput__top-wrapper label{color:#575352}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #575352;background-color:#EEEDED}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{font-size:0.875rem;color:#575352}.textInput__container .textInput__top-wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:0px;gap:4px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__top-wrapper label{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;display:flex;align-items:center;color:#1D1D1D;flex:none;order:0;flex-grow:0}.textInput__container .textInput__top-wrapper label .optional-required{margin-left:4px}.textInput__container .textInput__top-wrapper label .optional{margin-left:4px}.textInput__container .textInput__top-wrapper label .required{margin-left:4px}.textInput__container .textInput__top-wrapper label .required.error{color:#CD002F}.textInput__container .input-container{position:relative;display:flex;align-items:center;width:100%}.textInput__container .textInput__bottom-wrapper{flex-grow:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:0px;gap:4px;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input{width:100%;box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:8px;height:40px;background-color:#FFFFFF;color:#1D1D1D;font-family:var(--ifx-font-family);font-size:1rem;line-height:1.5rem;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0;text-overflow:ellipsis}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px;font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.input-s::placeholder{font-size:0.875rem;line-height:1.25rem}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:40px}.textInput__container .textInput__bottom-wrapper input.error{border:1px solid #CD002F}.textInput__container .textInput__bottom-wrapper input.error:focus{outline:none}.textInput__container .textInput__bottom-wrapper input.success{border:1px solid #4CA460}.textInput__container .textInput__bottom-wrapper input.success:focus{outline:none}.textInput__container .textInput__bottom-wrapper input:focus:not(.error,.success){outline:none;border:1px solid #0A8276}.textInput__container .textInput__bottom-wrapper input:hover:not(:disabled,:focus,.error,.success){border:1px solid #575352}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:1rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper .input-icon{position:absolute;top:50%;transform:translateY(-50%);left:16px;transition:0.3s;color:#8D8786}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;color:#1D1D1D;flex:none;order:1;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error{color:#CD002F}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled{color:#575352}.textInput__container .delete-icon{position:absolute;right:16px}.textInput__container .delete-icon :hover{cursor:pointer}";
|
|
7
7
|
const IfxTextFieldStyle0 = textFieldCss;
|
|
8
8
|
|
|
9
9
|
const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
|
|
@@ -121,4 +121,4 @@ function defineCustomElement() {
|
|
|
121
121
|
|
|
122
122
|
export { TextField as T, defineCustomElement as d };
|
|
123
123
|
|
|
124
|
-
//# sourceMappingURL=p-
|
|
124
|
+
//# sourceMappingURL=p-04dd6348.js.map
|