@infineon/infineon-design-system-stencil 20.20.0 → 20.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/cjs/ifx-text-field.cjs.entry.js +13 -6
  2. package/dist/cjs/ifx-text-field.cjs.entry.js.map +1 -1
  3. package/dist/cjs/infineon-design-system-stencil.cjs.js +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/text-field/text-field.css +43 -13
  6. package/dist/collection/components/text-field/text-field.e2e.js +4 -9
  7. package/dist/collection/components/text-field/text-field.e2e.js.map +1 -1
  8. package/dist/collection/components/text-field/text-field.js +76 -15
  9. package/dist/collection/components/text-field/text-field.js.map +1 -1
  10. package/dist/collection/components/text-field/text-field.stories.js +20 -8
  11. package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
  12. package/dist/components/ifx-text-field.js +20 -10
  13. package/dist/components/ifx-text-field.js.map +1 -1
  14. package/dist/esm/ifx-text-field.entry.js +13 -6
  15. package/dist/esm/ifx-text-field.entry.js.map +1 -1
  16. package/dist/esm/infineon-design-system-stencil.js +1 -1
  17. package/dist/esm/loader.js +1 -1
  18. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
  19. package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js.map +1 -1
  20. package/dist/infineon-design-system-stencil/p-159677ca.entry.js +2 -0
  21. package/dist/infineon-design-system-stencil/p-159677ca.entry.js.map +1 -0
  22. package/dist/types/components/text-field/text-field.d.ts +6 -3
  23. package/dist/types/components/text-field/text-field.stories.d.ts +14 -3
  24. package/dist/types/components.d.ts +12 -6
  25. package/package.json +1 -1
  26. package/dist/infineon-design-system-stencil/p-84745b56.entry.js +0 -2
  27. package/dist/infineon-design-system-stencil/p-84745b56.entry.js.map +0 -1
package/dist/cjs/ifx-text-field.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-b797e11e.js');
6
6
 
7
- const textFieldCss = "*{font-family:\"Source Sans 3\"}.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}.textInput__container.disabled .textInput__top-wrapper label{color:#BFBBBB}.textInput__container.disabled .textInput__bottom-wrapper input{border:1px solid #BFBBBB}.textInput__container.disabled .textInput__bottom-wrapper input::placeholder{color:#BFBBBB}.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__bottom-wrapper{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{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;padding:8px 16px;gap:6px;height:40px;background-color:#FFFFFF;color:#1D1D1D;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0}.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,.error,.success){border:1px solid #3C3A39}.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 ifx-icon{position:absolute;top:12px;right:17px;transition:0.3s}.textInput__container .textInput__bottom-wrapper.show ifx-icon{transition:0.3s;transform:rotate(180deg)}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-error{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;color:#CD002F;flex:none;order:1;align-self:stretch;flex-grow:0}";
7
+ const textFieldCss = "*{font-family:\"Source Sans 3\"}.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:\"Source Sans 3\"}.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 .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;border:1px solid #8D8786;border-radius:1px;flex:none;order:0;align-self:stretch;flex-grow:0}.textInput__container .textInput__bottom-wrapper input.input-s{height:36px}.textInput__container .textInput__bottom-wrapper input.icon{padding-left:32px}.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,.error,.success){border:1px solid #3C3A39}.textInput__container .textInput__bottom-wrapper input::placeholder{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.5rem;color:#8D8786;flex:none;order:1;flex-grow:1}.textInput__container .textInput__bottom-wrapper ifx-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;transition:0.3s}.textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption{font-style:normal;font-weight:400;font-size:0.75rem;line-height:1rem;letter-spacing:0.2px;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}";
8
8
 
9
9
  const TextField = class {
10
10
  constructor(hostRef) {
@@ -13,11 +13,14 @@ const TextField = class {
13
13
  this.placeholder = "Placeholder";
14
14
  this.value = '';
15
15
  this.error = false;
16
- this.errorMessage = "";
16
+ this.label = "";
17
+ this.icon = "";
18
+ this.caption = "";
19
+ this.size = 'm';
20
+ this.required = false;
21
+ this.optional = false;
17
22
  this.success = false;
18
23
  this.disabled = false;
19
- this.readonly = false;
20
- this.icon = false;
21
24
  }
22
25
  valueWatcher(newValue) {
23
26
  if (newValue !== this.inputElement.value) {
@@ -30,8 +33,12 @@ const TextField = class {
30
33
  this.ifxInput.emit(this.value);
31
34
  }
32
35
  render() {
33
- return (index.h("div", { class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { class: "textInput__top-wrapper" }, index.h("label", { htmlFor: "text-field" }, index.h("slot", null))), index.h("div", { class: "textInput__bottom-wrapper" }, index.h("input", { ref: (el) => (this.inputElement = el), readonly: this.readonly, disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, class: `${this.error ? 'error' : ""} ${this.success ? "success" : ""}` }), this.error &&
34
- index.h("div", { class: "textInput__bottom-wrapper-error" }, this.errorMessage), this.icon && index.h("ifx-icon", { icon: 'chevron-down-16' }))));
36
+ return (index.h("div", { class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, index.h("div", { class: "textInput__top-wrapper" }, index.h("label", { htmlFor: "text-field" }, index.h("slot", null), this.optional && this.required ? (index.h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (index.h("span", { class: "optional" }, "(optional)")) : this.required ? (index.h("span", { class: "required" }, "*")) : null)), index.h("div", { class: "textInput__bottom-wrapper" }, index.h("div", { class: "input-container" }, this.icon && (index.h("ifx-icon", { icon: this.icon })), index.h("input", { ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, class: `${this.icon ? 'icon' : ""}
37
+ ${this.error ? 'error' : ""}
38
+ ${this.size === "s" ? "input-s" : ""}
39
+ ${this.success ? "success" : ""}` })), this.caption && !this.error &&
40
+ index.h("div", { class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
41
+ index.h("div", { class: "textInput__bottom-wrapper-caption error" }, this.caption))));
35
42
  }
36
43
  get el() { return index.getElement(this); }
37
44
  static get watchers() { return {
package/dist/cjs/ifx-text-field.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"ifx-text-field.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,q8EAAq8E;;MCQ78E,SAAS;;;;uBAGU,aAAa;iBACF,EAAE;iBAClB,KAAK;wBACC,EAAE;mBACN,KAAK;oBACJ,KAAK;oBACL,KAAK;gBACT,KAAK;;EAK7B,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;MACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;KACpC;GACF;EAGD,WAAW;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnEA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,mBAAO,OAAO,EAAC,YAAY,IACzBA,qBAAQ,CACF,CACJ,EACNA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,EAC3E,IAAI,CAAC,KAAK;MACTA,iBAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,YAAY,CACd,EAEP,IAAI,CAAC,IAAI,IAAIA,sBAAU,IAAI,EAAC,iBAAiB,GAAY,CAEtD,CACF,EACN;GACH;;;;;;;;;;","names":["h"],"sources":["./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@use \"../../global/font.scss\";\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\n &.disabled {\n & .textInput__top-wrapper {\n & label {\n color: #BFBBBB;\n }\n }\n\n & .textInput__bottom-wrapper {\n input {\n border: 1px solid #BFBBBB;\n\n &::placeholder {\n color: #BFBBBB;\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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 }\n\n & .textInput__bottom-wrapper {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n padding: 0px;\n gap: 4px;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n & input {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 8px 16px;\n gap: 6px;\n height: tokens.$ifxSize500;\n background-color: tokens.$ifxColorBaseWhite;\n color: tokens.$ifxColorBaseBlack;\n border: 1px solid #8D8786;\n border-radius: tokens.$ifxBorderRadius12;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n &:hover:not(:disabled, .error, .success) {\n border: 1px solid #3C3A39;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeM;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & ifx-icon {\n position: absolute;\n top: 12px;\n right: 17px;\n transition: .3s;\n }\n\n &.show {\n & ifx-icon {\n transition: .3s;\n transform: rotate(180deg);\n }\n }\n\n & .textInput__bottom-wrapper-error {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: #CD002F;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n }\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: 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() errorMessage: string = \"\"\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() readonly: boolean = false;\n @Prop() icon: boolean = false;\n @Event() ifxInput: EventEmitter<String>;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n }\n\n render() {\n return (\n <div class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor=\"text-field\">\n <slot />\n </label>\n </div>\n <div class=\"textInput__bottom-wrapper\">\n <input\n ref={(el) => (this.inputElement = el)}\n readonly={this.readonly}\n disabled={this.disabled}\n type=\"text\"\n id='text-field'\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n class={`${this.error ? 'error' : \"\"} ${this.success ? \"success\" : \"\"}`} />\n {this.error &&\n <div class=\"textInput__bottom-wrapper-error\">\n {this.errorMessage}\n </div>}\n\n {this.icon && <ifx-icon icon='chevron-down-16'></ifx-icon>}\n\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"ifx-text-field.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,+pGAA+pG;;MCQvqG,SAAS;;;;uBAGU,aAAa;iBACF,EAAE;iBAClB,KAAK;iBACN,EAAE;gBACH,EAAE;mBACC,EAAE;gBACL,GAAG;oBACE,KAAK;oBACL,KAAK;mBACN,KAAK;oBACJ,KAAK;;EAKjC,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;MACxC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;KACpC;GACF;EAGD,WAAW;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAChC;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,wBAAwB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,IACnEA,iBAAK,KAAK,EAAC,wBAAwB,IACjCA,mBAAO,OAAO,EAAC,YAAY,IACzBA,qBAAa,EACZ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAC7BA,kBAAM,KAAK,EAAC,mBAAmB,mBAAoB,IACjD,IAAI,CAAC,QAAQ,IACfA,kBAAM,KAAK,EAAC,UAAU,iBAAkB,IACtC,IAAI,CAAC,QAAQ,IACfA,kBAAM,KAAK,EAAC,UAAU,QAAS,IAC7B,IAAI,CACF,CACJ,EAENA,iBAAK,KAAK,EAAC,2BAA2B,IACpCA,iBAAK,KAAK,EAAC,iBAAiB,IACzB,IAAI,CAAC,IAAI,KACRA,sBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAC9B,EACDA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,YAAY,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EACH,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,EAAE;kBACxB,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,EAAE;gBAC3B,IAAI,CAAC,IAAI,KAAK,GAAG,GAAG,SAAS,GAAG,EAAE;gBAClC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE,EAAE,GAAI,CACnC,EACL,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK;MAC1BA,iBAAK,KAAK,EAAE,qCAAqC,IAAI,CAAC,QAAQ,kBAAkB,IAC7E,IAAI,CAAC,OAAO,CACT,EACP,IAAI,CAAC,KAAK;MACTA,iBAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,OAAO,CACT,CACJ,CACF,EACN;GACH;;;;;;;;;;","names":["h"],"sources":["./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@use \"../../global/font.scss\";\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: tokens.$ifxFontFamilyBody;\n\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: 4px;\n flex: none;\n order: 0;\n align-self: stretch;\n flex-grow: 0;\n\n & label {\n font-style: normal;\n font-weight: 400;\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 }\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: 4px;\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 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\n &.input-s {\n height: tokens.$ifxSize450;\n }\n\n &.icon {\n padding-left: tokens.$ifxSpace400;\n }\n\n &.error {\n border: 1px solid #CD002F;\n\n &:focus {\n outline: none;\n }\n }\n\n &.success {\n border: 1px solid #4CA460;\n\n &:focus {\n outline: none;\n }\n }\n\n\n &:focus:not(.error, .success) {\n outline: none;\n border: 1px solid #0A8276;\n }\n\n &:hover:not(:disabled, .error, .success) {\n border: 1px solid #3C3A39;\n }\n\n &::placeholder {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeS;\n line-height: tokens.$ifxLineHeightM;\n color: #8D8786;\n flex: none;\n order: 1;\n flex-grow: 1;\n }\n }\n\n & ifx-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: 8px;\n /* Adjust this value to control the icon's left offset */\n transition: .3s;\n }\n\n & .textInput__bottom-wrapper-caption {\n font-style: normal;\n font-weight: 400;\n font-size: tokens.$ifxFontSizeXs;\n line-height: tokens.$ifxLineHeightXs;\n letter-spacing: 0.2px;\n color: tokens.$ifxColorBaseBlack;\n flex: none;\n order: 1;\n align-self: stretch;\n flex-grow: 0;\n\n &.error {\n color: #CD002F;\n\n }\n\n &.disabled {\n color: tokens.$ifxColorEngineering500;\n }\n }\n\n }\n}","import { Component, h, Event, Element, Prop, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: 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 @Event() ifxInput: EventEmitter<String>;\n\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query; // update the value property when input changes\n this.ifxInput.emit(this.value);\n }\n\n render() {\n return (\n <div class={`textInput__container ${this.disabled ? 'disabled' : \"\"}`}>\n <div class=\"textInput__top-wrapper\">\n <label htmlFor=\"text-field\">\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\">*</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 icon={this.icon} />\n )}\n <input\n ref={(el) => (this.inputElement = el)}\n disabled={this.disabled}\n type=\"text\"\n id='text-field'\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n class={\n `${this.icon ? 'icon' : \"\"}\n ${this.error ? 'error' : \"\"} \n ${this.size === \"s\" ? \"input-s\" : \"\"}\n ${this.success ? \"success\" : \"\"}`} />\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}
package/dist/cjs/infineon-design-system-stencil.cjs.js CHANGED
@@ -43,7 +43,7 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
43
43
  };
44
44
 
45
45
  patchBrowser().then(options => {
46
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"alertColor\":[1,\"alert-color\"],\"alertIcon\":[1,\"alert-icon\"],\"showModal\":[32],\"open\":[64],\"close\":[64]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogo\":[4,\"show-logo\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-select.cjs\",[[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\"]]]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[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]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"success\":[4],\"disabled\":[4],\"readonly\":[4],\"icon\":[4]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[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]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[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\"]]]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"color\":[1],\"bold\":[4],\"underline\":[4]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"ifx-table.cjs\",[[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]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]]]"), options);
46
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"alertColor\":[1,\"alert-color\"],\"alertIcon\":[1,\"alert-icon\"],\"showModal\":[32],\"open\":[64],\"close\":[64]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogo\":[4,\"show-logo\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-select.cjs\",[[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\"]]]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[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]}]]],[\"ifx-text-field.cjs\",[[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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[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]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[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\"]]]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"color\":[1],\"bold\":[4],\"underline\":[4]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"ifx-table.cjs\",[[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]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]]]"), options);
47
47
  });
48
48
 
49
49
  exports.setNonce = index.setNonce;
package/dist/cjs/loader.cjs.js CHANGED
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"alertColor\":[1,\"alert-color\"],\"alertIcon\":[1,\"alert-icon\"],\"showModal\":[32],\"open\":[64],\"close\":[64]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogo\":[4,\"show-logo\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-select.cjs\",[[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\"]]]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[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]}]]],[\"ifx-text-field.cjs\",[[1,\"ifx-text-field\",{\"placeholder\":[1],\"value\":[1025],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"success\":[4],\"disabled\":[4],\"readonly\":[4],\"icon\":[4]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[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]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[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\"]]]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"color\":[1],\"bold\":[4],\"underline\":[4]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"ifx-table.cjs\",[[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]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]]]"), options);
17
+ return index.bootstrapLazy(JSON.parse("[[\"ifx-faq.cjs\",[[1,\"ifx-faq\"]]],[\"ifx-dropdown-trigger-button.cjs\",[[1,\"ifx-dropdown-trigger-button\",{\"isOpen\":[4,\"is-open\"],\"theme\":[1],\"variant\":[1],\"size\":[1],\"disabled\":[4],\"hideArrow\":[4,\"hide-arrow\"]}]]],[\"ifx-modal.cjs\",[[1,\"ifx-modal\",{\"caption\":[1],\"closeOnOverlayClick\":[4,\"close-on-overlay-click\"],\"alertColor\":[1,\"alert-color\"],\"alertIcon\":[1,\"alert-icon\"],\"showModal\":[32],\"open\":[64],\"close\":[64]}]]],[\"ifx-multiselect.cjs\",[[1,\"ifx-multiselect\",{\"options\":[1],\"size\":[1],\"disabled\":[4],\"error\":[4],\"errorMessage\":[1,\"error-message\"],\"label\":[1],\"maxItemCount\":[2,\"max-item-count\"],\"persistentSelectedOptions\":[32],\"listOfOptions\":[32],\"dropdownOpen\":[32],\"dropdownFlipped\":[32],\"zIndex\":[32]}]]],[\"ifx-search-bar.cjs\",[[1,\"ifx-search-bar\",{\"isOpen\":[4,\"is-open\"],\"disabled\":[4],\"value\":[1025],\"internalState\":[32]}]]],[\"ifx-alert.cjs\",[[1,\"ifx-alert\",{\"color\":[1],\"icon\":[1]}]]],[\"ifx-breadcrumb-item-label.cjs\",[[1,\"ifx-breadcrumb-item-label\",{\"icon\":[1],\"url\":[1],\"target\":[1]}]]],[\"ifx-chip.cjs\",[[1,\"ifx-chip\",{\"placeholder\":[1],\"isEmpty\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-dropdown-item.cjs\",[[1,\"ifx-dropdown-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hide\":[4],\"size\":[32]},[[16,\"menuSize\",\"handleMenuSize\"]]]]],[\"ifx-example.cjs\",[[1,\"ifx-example\",{\"variant\":[1],\"color\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"position\":[1],\"href\":[1],\"target\":[1],\"type\":[1],\"internalPosition\":[32],\"setFocus\":[64]}]]],[\"ifx-icon-button.cjs\",[[1,\"ifx-icon-button\",{\"variant\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[1],\"href\":[1],\"target\":[1],\"shape\":[1],\"setFocus\":[64]}]]],[\"ifx-icons-preview.cjs\",[[1,\"ifx-icons-preview\",{\"iconsArray\":[32],\"isCopied\":[32],\"copiedIndex\":[32],\"htmlTag\":[32],\"iconName\":[32]}]]],[\"ifx-list-item.cjs\",[[1,\"ifx-list-item\",{\"isFlush\":[1028,\"is-flush\"],\"badge\":[4],\"badgeValue\":[2,\"badge-value\"],\"hasBulletpoint\":[32]}]]],[\"ifx-navbar.cjs\",[[1,\"ifx-navbar\",{\"applicationName\":[1,\"application-name\"],\"fixed\":[4],\"showLogo\":[4,\"show-logo\"],\"main\":[32],\"products\":[32],\"applications\":[32],\"design\":[32],\"support\":[32],\"about\":[32],\"hasLeftMenuItems\":[32],\"searchBarIsOpen\":[32]},[[0,\"ifxSearchBarIsOpen\",\"handleSearchBarToggle\"],[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-navbar-item.cjs\",[[1,\"ifx-navbar-item\",{\"isProfile\":[1028,\"is-profile\"],\"hideLabel\":[4,\"hide-label\"],\"icon\":[1],\"href\":[1],\"target\":[1],\"hideComponent\":[4,\"hide-component\"]}]]],[\"ifx-select.cjs\",[[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\"]]]]],[\"ifx-sidebar-item.cjs\",[[1,\"ifx-sidebar-item\",{\"icon\":[1],\"href\":[1],\"target\":[1],\"hasIcon\":[32],\"hasIconWrapper\":[32]},[[0,\"consoleError\",\"handleConsoleError\"]]]]],[\"ifx-slider.cjs\",[[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]}]]],[\"ifx-text-field.cjs\",[[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]}]]],[\"ifx-tooltip.cjs\",[[1,\"ifx-tooltip\",{\"header\":[1],\"text\":[1],\"position\":[1],\"variant\":[1],\"icon\":[1],\"tooltipVisible\":[32],\"internalPosition\":[32]}]]],[\"ifx-badge.cjs\",[[1,\"ifx-badge\"]]],[\"ifx-basic-table.cjs\",[[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]}]]],[\"ifx-breadcrumb.cjs\",[[1,\"ifx-breadcrumb\"]]],[\"ifx-breadcrumb-item.cjs\",[[1,\"ifx-breadcrumb-item\",{\"isLastItem\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"],[0,\"breadcrumbMenuIconWrapper\",\"menuWrapperEventReEmitter\"]]]]],[\"ifx-card.cjs\",[[1,\"ifx-card\",{\"direction\":[1],\"href\":[1],\"target\":[1],\"noBtns\":[32],\"alignment\":[32],\"noImg\":[32]},[[0,\"imgPosition\",\"setImgPosition\"]]]]],[\"ifx-card-headline.cjs\",[[1,\"ifx-card-headline\",{\"isHovered\":[4,\"is-hovered\"],\"direction\":[32],\"hasDesc\":[32]}]]],[\"ifx-card-image.cjs\",[[1,\"ifx-card-image\",{\"src\":[1],\"alt\":[1],\"position\":[1]}]]],[\"ifx-card-links.cjs\",[[1,\"ifx-card-links\"]]],[\"ifx-card-overline.cjs\",[[1,\"ifx-card-overline\"]]],[\"ifx-card-text.cjs\",[[1,\"ifx-card-text\",{\"hasBtn\":[32]}]]],[\"ifx-dropdown.cjs\",[[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\"]]]]],[\"ifx-dropdown-header.cjs\",[[1,\"ifx-dropdown-header\"]]],[\"ifx-dropdown-menu.cjs\",[[1,\"ifx-dropdown-menu\",{\"isOpen\":[4,\"is-open\"],\"size\":[1],\"hideTopPadding\":[32],\"filteredItems\":[32]},[[0,\"ifxInput\",\"handleMenuFilter\"],[0,\"ifxDropdownItem\",\"handleDropdownItemValueEmission\"]]]]],[\"ifx-dropdown-separator.cjs\",[[1,\"ifx-dropdown-separator\"]]],[\"ifx-dropdown-trigger.cjs\",[[1,\"ifx-dropdown-trigger\",{\"isOpen\":[4,\"is-open\"]}]]],[\"ifx-filter-input.cjs\",[[1,\"ifx-filter-input\",{\"label\":[1],\"size\":[1],\"disabled\":[4],\"icon\":[4],\"search\":[4],\"filter\":[4],\"options\":[32]}]]],[\"ifx-footer.cjs\",[[1,\"ifx-footer\",{\"variant\":[1],\"large\":[32],\"default\":[32],\"showFacebook\":[32]}]]],[\"ifx-footer-column.cjs\",[[1,\"ifx-footer-column\"]]],[\"ifx-link.cjs\",[[1,\"ifx-link\",{\"href\":[1],\"target\":[1],\"color\":[1],\"bold\":[4],\"underline\":[4]}]]],[\"ifx-list-group.cjs\",[[1,\"ifx-list-group\",{\"flush\":[4],\"bulletpoint\":[4],\"notification\":[4]}]]],[\"ifx-list-notification.cjs\",[[1,\"ifx-list-notification\",{\"titleText\":[1,\"title-text\"],\"isFlush\":[4,\"is-flush\"],\"creationTime\":[8,\"creation-time\"],\"postTime\":[32],\"shownTime\":[32]}]]],[\"ifx-navbar-menu.cjs\",[[1,\"ifx-navbar-menu\",{\"menu\":[32]}]]],[\"ifx-navbar-menu-item.cjs\",[[1,\"ifx-navbar-menu-item\",{\"href\":[1],\"target\":[1],\"hide\":[4]}]]],[\"ifx-progress-bar.cjs\",[[1,\"ifx-progress-bar\",{\"value\":[2],\"label\":[1],\"size\":[1],\"showLabel\":[4,\"show-label\"],\"internalValue\":[32]}]]],[\"ifx-radio-button.cjs\",[[1,\"ifx-radio-button\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"size\":[1],\"internalValue\":[32],\"hasSlot\":[32]}]]],[\"ifx-sidebar.cjs\",[[1,\"ifx-sidebar\",{\"applicationName\":[1,\"application-name\"]}]]],[\"ifx-spinner.cjs\",[[1,\"ifx-spinner\",{\"size\":[1],\"variant\":[1]}]]],[\"ifx-status.cjs\",[[1,\"ifx-status\",{\"label\":[1],\"border\":[4],\"color\":[1]}]]],[\"ifx-switch.cjs\",[[1,\"ifx-switch\",{\"value\":[4],\"name\":[1],\"disabled\":[4],\"internalValue\":[32]}]]],[\"ifx-tab.cjs\",[[4,\"ifx-tab\",{\"header\":[1]}]]],[\"ifx-table.cjs\",[[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]}]]],[\"ifx-tabs.cjs\",[[1,\"ifx-tabs\",{\"tabs\":[16],\"orientation\":[1],\"small\":[4],\"internalOrientation\":[32],\"activeTabIndex\":[32],\"tabRefs\":[32],\"tabHeaderRefs\":[32],\"tabTitles\":[32]},[[0,\"slotchange\",\"onSlotChange\"]]]]],[\"ifx-tag.cjs\",[[1,\"ifx-tag\"]]],[\"ifx-checkbox.cjs\",[[1,\"ifx-checkbox\",{\"disabled\":[4],\"value\":[4],\"error\":[4],\"name\":[1],\"size\":[1],\"indeterminate\":[4],\"internalValue\":[32]}]]],[\"ifx-search-field.cjs\",[[1,\"ifx-search-field\",{\"value\":[1025],\"showDeleteIcon\":[4,\"show-delete-icon\"],\"disabled\":[4],\"size\":[1],\"insideDropdown\":[32],\"showDeleteIconInternalState\":[32],\"isFocused\":[32]},[[5,\"mousedown\",\"handleOutsideClick\"]]]]],[\"ifx-number-indicator.cjs\",[[1,\"ifx-number-indicator\",{\"inverted\":[4]}]]],[\"ifx-accordion_2.cjs\",[[1,\"ifx-accordion-item\",{\"caption\":[1],\"open\":[32],\"close\":[64],\"isOpen\":[64]}],[1,\"ifx-accordion\",{\"autoCollapse\":[4,\"auto-collapse\"]},[[0,\"ifxItemOpen\",\"onItemOpen\"]]]]],[\"ifx-button.cjs\",[[1,\"ifx-button\",{\"variant\":[1],\"theme\":[1],\"size\":[1],\"disabled\":[4],\"href\":[1],\"target\":[1],\"internalHref\":[32],\"setFocus\":[64]}]]],[\"ifx-icon.cjs\",[[0,\"ifx-icon\",{\"icon\":[1025],\"ifxIcon\":[1032,\"ifx-icon\"]}]]]]"), options);
18
18
  });
19
19
  };
20
20
 
package/dist/collection/components/text-field/text-field.css CHANGED
@@ -12,15 +12,18 @@
12
12
  order: 0;
13
13
  align-self: stretch;
14
14
  flex-grow: 0;
15
+ font-family: "Source Sans 3";
15
16
  }
16
17
  .textInput__container.disabled .textInput__top-wrapper label {
17
- color: #BFBBBB;
18
+ color: #575352;
18
19
  }
19
20
  .textInput__container.disabled .textInput__bottom-wrapper input {
20
- border: 1px solid #BFBBBB;
21
+ border: 1px solid #575352;
22
+ background-color: #EEEDED;
21
23
  }
22
24
  .textInput__container.disabled .textInput__bottom-wrapper input::placeholder {
23
- color: #BFBBBB;
25
+ font-size: 0.875rem;
26
+ color: #575352;
24
27
  }
25
28
  .textInput__container .textInput__top-wrapper {
26
29
  display: flex;
@@ -45,7 +48,23 @@
45
48
  order: 0;
46
49
  flex-grow: 0;
47
50
  }
51
+ .textInput__container .textInput__top-wrapper label .optional-required {
52
+ margin-left: 4px;
53
+ }
54
+ .textInput__container .textInput__top-wrapper label .optional {
55
+ margin-left: 4px;
56
+ }
57
+ .textInput__container .textInput__top-wrapper label .required {
58
+ margin-left: 4px;
59
+ }
60
+ .textInput__container .input-container {
61
+ position: relative;
62
+ display: flex;
63
+ align-items: center;
64
+ width: 100%;
65
+ }
48
66
  .textInput__container .textInput__bottom-wrapper {
67
+ flex-grow: 1;
49
68
  position: relative;
50
69
  display: flex;
51
70
  flex-direction: column;
@@ -58,12 +77,13 @@
58
77
  flex-grow: 0;
59
78
  }
60
79
  .textInput__container .textInput__bottom-wrapper input {
80
+ width: 100%;
61
81
  box-sizing: border-box;
62
82
  display: flex;
63
83
  flex-direction: row;
64
84
  align-items: center;
65
85
  padding: 8px 16px;
66
- gap: 6px;
86
+ gap: 8px;
67
87
  height: 40px;
68
88
  background-color: #FFFFFF;
69
89
  color: #1D1D1D;
@@ -74,6 +94,12 @@
74
94
  align-self: stretch;
75
95
  flex-grow: 0;
76
96
  }
97
+ .textInput__container .textInput__bottom-wrapper input.input-s {
98
+ height: 36px;
99
+ }
100
+ .textInput__container .textInput__bottom-wrapper input.icon {
101
+ padding-left: 32px;
102
+ }
77
103
  .textInput__container .textInput__bottom-wrapper input.error {
78
104
  border: 1px solid #CD002F;
79
105
  }
@@ -96,7 +122,7 @@
96
122
  .textInput__container .textInput__bottom-wrapper input::placeholder {
97
123
  font-style: normal;
98
124
  font-weight: 400;
99
- font-size: 1rem;
125
+ font-size: 0.875rem;
100
126
  line-height: 1.5rem;
101
127
  color: #8D8786;
102
128
  flex: none;
@@ -105,23 +131,27 @@
105
131
  }
106
132
  .textInput__container .textInput__bottom-wrapper ifx-icon {
107
133
  position: absolute;
108
- top: 12px;
109
- right: 17px;
110
- transition: 0.3s;
111
- }
112
- .textInput__container .textInput__bottom-wrapper.show ifx-icon {
134
+ top: 50%;
135
+ transform: translateY(-50%);
136
+ left: 8px;
137
+ /* Adjust this value to control the icon's left offset */
113
138
  transition: 0.3s;
114
- transform: rotate(180deg);
115
139
  }
116
- .textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-error {
140
+ .textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption {
117
141
  font-style: normal;
118
142
  font-weight: 400;
119
143
  font-size: 0.75rem;
120
144
  line-height: 1rem;
121
145
  letter-spacing: 0.2px;
122
- color: #CD002F;
146
+ color: #1D1D1D;
123
147
  flex: none;
124
148
  order: 1;
125
149
  align-self: stretch;
126
150
  flex-grow: 0;
151
+ }
152
+ .textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.error {
153
+ color: #CD002F;
154
+ }
155
+ .textInput__container .textInput__bottom-wrapper .textInput__bottom-wrapper-caption.disabled {
156
+ color: #575352;
127
157
  }
package/dist/collection/components/text-field/text-field.e2e.js CHANGED
@@ -18,12 +18,6 @@ describe('ifx-text-field', () => {
18
18
  const input = await page.find('ifx-text-field >>> input');
19
19
  expect(await input.getProperty('disabled')).toBeTruthy();
20
20
  });
21
- it('renders readonly', async () => {
22
- const page = await newE2EPage();
23
- await page.setContent('<ifx-text-field readonly></ifx-text-field>');
24
- const input = await page.find('ifx-text-field >>> input');
25
- expect(await input.getAttribute('readonly')).not.toBeNull();
26
- });
27
21
  it('handles value change', async () => {
28
22
  const page = await newE2EPage();
29
23
  await page.setContent('<ifx-text-field></ifx-text-field>');
@@ -34,8 +28,8 @@ describe('ifx-text-field', () => {
34
28
  });
35
29
  it('renders with error', async () => {
36
30
  const page = await newE2EPage();
37
- await page.setContent('<ifx-text-field error error-message="Invalid input"></ifx-text-field>');
38
- const errorDiv = await page.find('ifx-text-field >>> .textInput__bottom-wrapper-error');
31
+ await page.setContent('<ifx-text-field error caption="Invalid input"></ifx-text-field>');
32
+ const errorDiv = await page.find('ifx-text-field >>> .textInput__bottom-wrapper-caption.error');
39
33
  expect(errorDiv.innerText).toBe('Invalid input');
40
34
  });
41
35
  it('renders with success', async () => {
@@ -46,7 +40,8 @@ describe('ifx-text-field', () => {
46
40
  });
47
41
  it('renders with icon', async () => {
48
42
  const page = await newE2EPage();
49
- await page.setContent('<ifx-text-field icon></ifx-text-field>');
43
+ await page.setContent('<ifx-text-field icon="chevron-down-16"></ifx-text-field>'); // Set the icon attribute with a valid icon name
44
+ await page.waitForChanges(); // Wait for any potential asynchronous updates
50
45
  const icon = await page.find('ifx-text-field >>> ifx-icon');
51
46
  expect(icon).not.toBeNull();
52
47
  });
package/dist/collection/components/text-field/text-field.e2e.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-field.e2e.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-text-field', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field></ifx-text-field>');\n const element = await page.find('ifx-text-field');\n expect(element).toHaveClass('hydrated');\n });\n\n it('renders placeholder', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field placeholder=\"Testing placeholder\"></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(await input.getProperty('placeholder')).toEqual('Testing placeholder');\n });\n\n it('renders disabled', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field disabled></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(await input.getProperty('disabled')).toBeTruthy();\n });\n\n it('renders readonly', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field readonly></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(await input.getAttribute('readonly')).not.toBeNull();\n });\n\n it('handles value change', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n const newValue = 'New value';\n await input.type(newValue);\n expect(await input.getProperty('value')).toBe(newValue);\n });\n\n it('renders with error', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field error error-message=\"Invalid input\"></ifx-text-field>');\n const errorDiv = await page.find('ifx-text-field >>> .textInput__bottom-wrapper-error');\n expect(errorDiv.innerText).toBe('Invalid input');\n });\n\n it('renders with success', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field success></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(input).toHaveClass('success');\n });\n\n it('renders with icon', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field icon></ifx-text-field>');\n const icon = await page.find('ifx-text-field >>> ifx-icon');\n expect(icon).not.toBeNull();\n });\n});\n"]}
1
+ {"version":3,"file":"text-field.e2e.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-text-field', () => {\n it('renders', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field></ifx-text-field>');\n const element = await page.find('ifx-text-field');\n expect(element).toHaveClass('hydrated');\n });\n\n it('renders placeholder', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field placeholder=\"Testing placeholder\"></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(await input.getProperty('placeholder')).toEqual('Testing placeholder');\n });\n\n it('renders disabled', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field disabled></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(await input.getProperty('disabled')).toBeTruthy();\n });\n\n\n it('handles value change', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n const newValue = 'New value';\n await input.type(newValue);\n expect(await input.getProperty('value')).toBe(newValue);\n });\n\n it('renders with error', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field error caption=\"Invalid input\"></ifx-text-field>');\n const errorDiv = await page.find('ifx-text-field >>> .textInput__bottom-wrapper-caption.error');\n expect(errorDiv.innerText).toBe('Invalid input');\n });\n\n it('renders with success', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field success></ifx-text-field>');\n const input = await page.find('ifx-text-field >>> input');\n expect(input).toHaveClass('success');\n });\n\n it('renders with icon', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-text-field icon=\"chevron-down-16\"></ifx-text-field>'); // Set the icon attribute with a valid icon name\n await page.waitForChanges(); // Wait for any potential asynchronous updates\n const icon = await page.find('ifx-text-field >>> ifx-icon');\n expect(icon).not.toBeNull();\n });\n\n});\n"]}
package/dist/collection/components/text-field/text-field.js CHANGED
@@ -4,11 +4,14 @@ export class TextField {
4
4
  this.placeholder = "Placeholder";
5
5
  this.value = '';
6
6
  this.error = false;
7
- this.errorMessage = "";
7
+ this.label = "";
8
+ this.icon = "";
9
+ this.caption = "";
10
+ this.size = 'm';
11
+ this.required = false;
12
+ this.optional = false;
8
13
  this.success = false;
9
14
  this.disabled = false;
10
- this.readonly = false;
11
- this.icon = false;
12
15
  }
13
16
  valueWatcher(newValue) {
14
17
  if (newValue !== this.inputElement.value) {
@@ -21,8 +24,12 @@ export class TextField {
21
24
  this.ifxInput.emit(this.value);
22
25
  }
23
26
  render() {
24
- return (h("div", { class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { class: "textInput__top-wrapper" }, h("label", { htmlFor: "text-field" }, h("slot", null))), h("div", { class: "textInput__bottom-wrapper" }, h("input", { ref: (el) => (this.inputElement = el), readonly: this.readonly, disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, class: `${this.error ? 'error' : ""} ${this.success ? "success" : ""}` }), this.error &&
25
- h("div", { class: "textInput__bottom-wrapper-error" }, this.errorMessage), this.icon && h("ifx-icon", { icon: 'chevron-down-16' }))));
27
+ return (h("div", { class: `textInput__container ${this.disabled ? 'disabled' : ""}` }, h("div", { class: "textInput__top-wrapper" }, h("label", { htmlFor: "text-field" }, h("slot", null), this.optional && this.required ? (h("span", { class: "optional-required" }, "(optional) *")) : this.optional ? (h("span", { class: "optional" }, "(optional)")) : this.required ? (h("span", { class: "required" }, "*")) : null)), h("div", { class: "textInput__bottom-wrapper" }, h("div", { class: "input-container" }, this.icon && (h("ifx-icon", { icon: this.icon })), h("input", { ref: (el) => (this.inputElement = el), disabled: this.disabled, type: "text", id: 'text-field', value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, class: `${this.icon ? 'icon' : ""}
28
+ ${this.error ? 'error' : ""}
29
+ ${this.size === "s" ? "input-s" : ""}
30
+ ${this.success ? "success" : ""}` })), this.caption && !this.error &&
31
+ h("div", { class: `textInput__bottom-wrapper-caption ${this.disabled} ? disabled : ""` }, this.caption), this.error &&
32
+ h("div", { class: "textInput__bottom-wrapper-caption error" }, this.caption))));
26
33
  }
27
34
  static get is() { return "ifx-text-field"; }
28
35
  static get encapsulation() { return "shadow"; }
@@ -92,7 +99,7 @@ export class TextField {
92
99
  "reflect": false,
93
100
  "defaultValue": "false"
94
101
  },
95
- "errorMessage": {
102
+ "label": {
96
103
  "type": "string",
97
104
  "mutable": false,
98
105
  "complexType": {
@@ -106,11 +113,65 @@ export class TextField {
106
113
  "tags": [],
107
114
  "text": ""
108
115
  },
109
- "attribute": "error-message",
116
+ "attribute": "label",
110
117
  "reflect": false,
111
118
  "defaultValue": "\"\""
112
119
  },
113
- "success": {
120
+ "icon": {
121
+ "type": "string",
122
+ "mutable": false,
123
+ "complexType": {
124
+ "original": "string",
125
+ "resolved": "string",
126
+ "references": {}
127
+ },
128
+ "required": false,
129
+ "optional": false,
130
+ "docs": {
131
+ "tags": [],
132
+ "text": ""
133
+ },
134
+ "attribute": "icon",
135
+ "reflect": false,
136
+ "defaultValue": "\"\""
137
+ },
138
+ "caption": {
139
+ "type": "string",
140
+ "mutable": false,
141
+ "complexType": {
142
+ "original": "string",
143
+ "resolved": "string",
144
+ "references": {}
145
+ },
146
+ "required": false,
147
+ "optional": false,
148
+ "docs": {
149
+ "tags": [],
150
+ "text": ""
151
+ },
152
+ "attribute": "caption",
153
+ "reflect": false,
154
+ "defaultValue": "\"\""
155
+ },
156
+ "size": {
157
+ "type": "string",
158
+ "mutable": false,
159
+ "complexType": {
160
+ "original": "string",
161
+ "resolved": "string",
162
+ "references": {}
163
+ },
164
+ "required": false,
165
+ "optional": false,
166
+ "docs": {
167
+ "tags": [],
168
+ "text": ""
169
+ },
170
+ "attribute": "size",
171
+ "reflect": false,
172
+ "defaultValue": "'m'"
173
+ },
174
+ "required": {
114
175
  "type": "boolean",
115
176
  "mutable": false,
116
177
  "complexType": {
@@ -124,11 +185,11 @@ export class TextField {
124
185
  "tags": [],
125
186
  "text": ""
126
187
  },
127
- "attribute": "success",
188
+ "attribute": "required",
128
189
  "reflect": false,
129
190
  "defaultValue": "false"
130
191
  },
131
- "disabled": {
192
+ "optional": {
132
193
  "type": "boolean",
133
194
  "mutable": false,
134
195
  "complexType": {
@@ -142,11 +203,11 @@ export class TextField {
142
203
  "tags": [],
143
204
  "text": ""
144
205
  },
145
- "attribute": "disabled",
206
+ "attribute": "optional",
146
207
  "reflect": false,
147
208
  "defaultValue": "false"
148
209
  },
149
- "readonly": {
210
+ "success": {
150
211
  "type": "boolean",
151
212
  "mutable": false,
152
213
  "complexType": {
@@ -160,11 +221,11 @@ export class TextField {
160
221
  "tags": [],
161
222
  "text": ""
162
223
  },
163
- "attribute": "readonly",
224
+ "attribute": "success",
164
225
  "reflect": false,
165
226
  "defaultValue": "false"
166
227
  },
167
- "icon": {
228
+ "disabled": {
168
229
  "type": "boolean",
169
230
  "mutable": false,
170
231
  "complexType": {
@@ -178,7 +239,7 @@ export class TextField {
178
239
  "tags": [],
179
240
  "text": ""
180
241
  },
181
- "attribute": "icon",
242
+ "attribute": "disabled",
182
243
  "reflect": false,
183
244
  "defaultValue": "false"
184
245
  }