@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.0

package/dist/components/p-DFInpODO.js.map

@@ -0,0 +1 @@
+{"file":"p-DFInpODO.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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: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  & .delete-icon {\n    position: absolute;\n    right: tokens.$ifxSpace200;\n  }\n\n  &:not(.readonly, .disabled) .delete-icon {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n\n  &.disabled:not(.readonly) {\n\n    & #text-field { \n      color: tokens.$ifxColorBaseWhite;\n    }\n\n    & .delete-icon { \n      color: tokens.$ifxColorBaseWhite;\n    }\n    \n    & .textInput__top-wrapper {\n      & label {\n        color: tokens.$ifxColorEngineering300;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering300;\n      }\n    }\n\n    & .textInput__bottom-wrapper {\n      input {\n        border: 1px solid tokens.$ifxColorEngineering300;\n        background-color: tokens.$ifxColorEngineering300;\n\n        &::placeholder {\n          font-size: tokens.$ifxFontSizeM;\n          color: tokens.$ifxColorBaseWhite;\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: tokens.$ifxSpace50;\n      }\n\n      & .optional {\n        margin-left: tokens.$ifxSpace50;\n      }\n\n      & .required {\n        color: tokens.$ifxColorEngineering500;\n        margin-left: tokens.$ifxSpace50;\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  & .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      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.$ifxFontSizeM;\n          line-height: tokens.$ifxLineHeightS;\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      &.readonly {\n        border: none;\n        border-radius: var(--borderRadius-12, 1px);\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n        background: var(--color-base-white, #fff);\n        padding-left: 0;\n\n        &::placeholder {\n          color: tokens.$ifxColorBaseBlack;\n        }\n      }\n\n      &.success {\n        border: 1px solid tokens.$ifxColorGreen500;\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      &:focus:not(.error, .success):not(.readonly) {\n        outline: none;\n        border: 1px solid tokens.$ifxColorOcean500;\n      }\n\n      &.readonly:focus,\n      &[readonly]:focus {\n        outline: none;\n        box-shadow: none;\n        border: none;\n        border-bottom: 1px solid var(--color-engineering-300, #bfbbbb);\n      }\n\n      &:hover:not(:disabled, :focus, .error, .success):not(.readonly) {\n        border: 1px solid tokens.$ifxColorEngineering500;\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: 0.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      &.disabled {\n        color: tokens.$ifxColorEngineering300;\n      }\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})\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() success: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readOnly: 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  @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    if (!this.disabled && !this.readOnly) {\n      this.reset();\n      this.ifxInput.emit(this.value);\n    }\n  }\n\n  handleInput() {\n    const query = this.inputElement.value;\n    this.value = query;\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\n        aria-label=\"a text field for user input\"\n        aria-value={this.value}\n        aria-disabled={this.disabled}\n        class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\n      >\n        <div class=\"textInput__top-wrapper\">\n          {this.label && (\n            <label htmlFor={this.internalId}>\n              <span>{this.label}</span>\n              {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\n            </label>\n          )}\n        </div>\n\n        <div class=\"textInput__bottom-wrapper\">\n          <div class=\"input-container\">\n            {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\n            <input\n              ref={el => (this.inputElement = el)}\n              disabled={this.disabled && !this.error}\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              readonly={this.readOnly}\n              maxlength={this.maxlength}\n              class={`${this.icon ? 'icon' : ''}\n                ${this.error ? 'error' : ''} \n                ${this.readOnly ? 'readonly' : ''} \n              ${this.size === 's' ? 'input-s' : ''}\n              ${this.success ? 'success' : ''}`}\n            />\n\n            {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\n          </div>\n          {this.caption && (\n            <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\n              {this.caption}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-C0oKAW62.js → p-DHLzWSzN.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
 import { g as getDefaultExportFromCjs } from './p-B85MJLTf.js';
-import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
+import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
 
 var choices = {exports: {}};
 
@@ -7066,9 +7066,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'b6991547fb607b9ae6acac18344a4884b3f6e96f', class: `ifx-select-container` }, this.label ? (h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, h("span", null, this.label), this.required && h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, h("div", { key: 'd4631090d5c4a358c74beef998d9b147fa1f82c5', class: `${choicesWrapperClass} 
-            ${this.disabled && !this.error ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'a37b0ec62a2f0e0f7f6d648498d839bfe55b6080', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '43cb963ce76209e1cf3243361c8933a50246037b', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'f11a8226a109c7c9ab55c569e6a1fab7e03b3d0e', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '4a9e713955e8b3a46852af0f587f720c8c942f37', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'd414796caa9b716af1a1d2b9300e31ec123c0f7e', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'c08899e0217f465d1e7cb9306101b1b2f80db2ef', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && h("div", { key: 'ed418d2787c25790157f7a0651d9acc7693c3423', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
+        return (h("div", { key: 'f7a22d8351935d6c1c5ec3b982b8108a3c1922db', class: `ifx-select-container` }, this.label ? (h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, h("span", null, this.label), this.required && h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, h("div", { key: 'e887521113196418caed070b83fb51d4011428ed', class: `${choicesWrapperClass} 
+            ${this.disabled && !this.error ? 'disabled' : ''} 
+            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'b6d9632789477be3de2de6a0dd85dcba7b69be3d', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '245b0f374f6fa9f45c76c0ac38db3ca2cc2c4b5f', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '5ef777317eb672a0e2b1f1ba71b1f1dde5b74480', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '002f589c071749707ef2de20ad0702a3288c9b88', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'cf822d1d8e24f0555cc590bafe20354ef0ca5f11', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'e6f205f02ed851147496f26f5f08dd17102a2680', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && h("div", { key: '9dd1680c52e34aec1a0c902b65f1131c865994a1', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7188,54 +7188,54 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
                             let removeButtonHTML = '';
                             if (data.placeholder && !((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value)) {
                                 // For placeholders, use data-id="placeholder"
-                                return template(`
-                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                    ${data.label === undefined ? this.placeholderValue : data.label}
-                    ${removeButtonHTML}
-                  </div>
+                                return template(`
+                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                    ${data.label === undefined ? this.placeholderValue : data.label}
+                    ${removeButtonHTML}
+                  </div>
                 `);
                             }
                             else {
                                 // For non-placeholder items, use the actual data ID
-                                return template(`
-                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
-                      data-item 
-                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
-                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
-                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
-                  <!-- Add your remove button here if needed -->
-                </div>
+                                return template(`
+                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
+                      data-item 
+                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
+                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
+                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
+                  <!-- Add your remove button here if needed -->
+                </div>
               `);
                             }
                         },
                         input: ({ classNames }) => {
-                            return template(`
-                  <input 
-                    type="search"
-                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    role="textbox"
-                    aria-autocomplete="list"
+                            return template(`
+                  <input 
+                    type="search"
+                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
+                    autocomplete="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    role="textbox"
+                    aria-autocomplete="list"
                     aria-label="${this.showSearch ? this.searchPlaceholderValue : ''}">`);
                         },
                         //modifying the template of each item in the options list
                         choice: ({ classNames }, data) => {
                             var _a, _b, _c, _d;
-                            return template(`
-              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
-              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
-              ${data.placeholder ? classNames.placeholder : ''} 
-              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
-                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
-                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
-                    data-value="${data.value}"
-                    data-select-text="${this.config.itemSelectText}">
-                <span>${data.label}</span>
-                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
-              </div>
+                            return template(`
+              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
+              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
+              ${data.placeholder ? classNames.placeholder : ''} 
+              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
+                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
+                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
+                    data-value="${data.value}"
+                    data-select-text="${this.config.itemSelectText}">
+                <span>${data.label}</span>
+                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
+              </div>
             `);
                         },
                     };
@@ -7411,6 +7411,6 @@ function defineCustomElement() {
 }
 
 export { Choices as C, defineCustomElement as d };
-//# sourceMappingURL=p-C0oKAW62.js.map
+//# sourceMappingURL=p-DHLzWSzN.js.map
 
-//# sourceMappingURL=p-C0oKAW62.js.map
+//# sourceMappingURL=p-DHLzWSzN.js.map