@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4--canary.1723.e4323cb727c1b785c590fb74fe461a95eae530fd.0

package/dist/components/{p-DFInpODO.js.map → p-DX0ddaB9.js.map}

@@ -1 +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}
+{"file":"p-DX0ddaB9.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-BG0cmSVP.js → p-DkRZn47g.js}

@@ -1,8 +1,8 @@
 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 { d as defineCustomElement$3 } from './p-DhNY6ZGA.js';
-import { d as defineCustomElement$2 } from './p-F-WOWp_H.js';
-import { d as defineCustomElement$1 } from './p-DHLzWSzN.js';
+import { d as defineCustomElement$3 } from './p-B2e3orJn.js';
+import { d as defineCustomElement$2 } from './p-CYCBkVYd.js';
+import { d as defineCustomElement$1 } from './p-BnMuxXaP.js';
 
 const paginationCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.container{display:inline-flex;justify-content:center;align-items:center;gap:32px;font-family:var(--ifx-font-family);flex-wrap:wrap}.container .items__per-page-wrapper{display:flex;align-items:center;gap:16px}.container .items__per-page-wrapper .items__per-page-label{color:#1D1D1D;font-size:14px;font-style:normal;font-weight:600;line-height:20px}.container .items__per-page-wrapper .items__per-page-field{display:flex;flex-direction:column;align-items:flex-start}.container .items__per-page-wrapper .items__per-page-field ifx-select{width:92px}.container .items__total-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .items__total-button{display:flex;width:40px;height:40px;justify-content:center;align-items:center;border-radius:100px;border:1px solid #BFBBBB;background:#FFF}.container .items__total-wrapper .page__numbers-wrapper{display:flex;justify-content:center;align-items:center;gap:12px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item{display:flex;padding:6px;flex-direction:column;justify-content:center;align-items:center;gap:10px;border-radius:100px}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active{background-color:#0A8276}.container .items__total-wrapper .page__numbers-wrapper .page__number-item.active span{color:#fff}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover{cursor:pointer}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:hover:not(.active){background-color:#ddd}.container .items__total-wrapper .page__numbers-wrapper .page__number-item:active:not(.active){background-color:#575352}.container .items__total-wrapper .page__numbers-wrapper .page__number-item span{display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px}.pagination{display:flex}.pagination ifx-icon-button:first-of-type{margin-right:12px}.pagination ifx-icon-button:last-of-type{margin-left:12px}.page__button{padding:8px;border-radius:100px}ol{list-style-type:none;padding:0;margin:0;display:inline-flex;align-items:center;gap:12px}li{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:100px}li:hover:not(.active) page__button{background-color:#EEEDED}li:active:not(.active) .page__button{background-color:#575352;color:#fff}li.active{background-color:#0A8276}li.active .page__button{color:#fff}li:hover{cursor:pointer}li .page__button{text-decoration:none;display:flex;width:16px;height:16px;flex-direction:column;justify-content:center;color:#1D1D1D;text-align:center;font-size:13px;font-style:normal;font-weight:400;line-height:20px;align-items:center}.prev.disabled,.next.disabled{cursor:default}.prev.disabled:hover,.next.disabled:hover{cursor:default;text-decoration:none}.prev{margin-right:2.5px}.next{margin-left:2.5px}@media (max-width: 768px){.container{gap:16px;justify-content:left}.container .items__total-wrapper .pagination ol{gap:12px}}@media (max-width: 374px){.pagination .ellipsis+.active{margin-left:8px}.pagination .active+.ellipsis{margin-left:8px}}";
 
@@ -287,6 +287,6 @@ function defineCustomElement() {
 }
 
 export { Pagination as P, defineCustomElement as d };
-//# sourceMappingURL=p-BG0cmSVP.js.map
+//# sourceMappingURL=p-DkRZn47g.js.map
 
-//# sourceMappingURL=p-BG0cmSVP.js.map
+//# sourceMappingURL=p-DkRZn47g.js.map

package/dist/components/{p-BG0cmSVP.js.map → p-DkRZn47g.js.map}

@@ -1 +1 @@
-{"file":"p-BG0cmSVP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n  flex-wrap: wrap;\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\n.page__button {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & page__button {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & .page__button {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & .page__button {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .page__button {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n@media (max-width: tokens.$ifxBreakpointM) {\n  .container {\n    gap: tokens.$ifxSpace200;\n    justify-content: left;\n\n    .items__total-wrapper {\n      .pagination {\n        ol {\n          gap: tokens.$ifxSpace150;\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 374px) {\n  .pagination {\n    .ellipsis + .active {\n      margin-left: tokens.$ifxSpace100;\n    }\n\n    .active + .ellipsis {\n      margin-left: tokens.$ifxSpace100;\n    }\n  }\n}\n","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } 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-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxItemsPerPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @Prop() showItemsPerPage: boolean = true;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n  @Watch('total')\n  watchTotalHandler() {\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n  @Watch('currentPage')\n  currentPageWatcher(newVal: number) {\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label;\n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1;\n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n    emitItemsPerPage(e) {\n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\n    }\n\n  async componentDidLoad() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if(select) {\n        select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n      }\n    }\n\n    // Add resize listener to update pagination on screen size changes\n    window.addEventListener('resize', this.handleResize);\n\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-pagination', await framework)\n    }\n    this.initPagination();\n  }\n\n  disconnectedCallback() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if (select) {\n        select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n      }\n    }\n\n    // Remove resize listener\n    window.removeEventListener('resize', this.handleResize);\n\n    // Clear any pending resize timeout\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  updateVisiblePages() {\n    // Check if screen is mobile (< 375px)\n    const isMobile = window.innerWidth < 375;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n\n    if (isMobile) {\n      // Mobile logic: maximum 5 elements\n      if (totalPages <= 5) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        if (current <= 2) {\n          // Show: 1 2 3 … 10 (for pages 1 and 2)\n          pages.push(2, 3, '...', totalPages);\n        } else if (current >= totalPages - 1) {\n          // Show: 1 … 23 24 25 (for last 2 pages only)\n          pages.push('...', totalPages - 2, totalPages - 1, totalPages);\n        } else {\n          // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\n          pages.push('...', current, '...', totalPages);\n        }\n      }\n    } else {\n      // Desktop logic: maximum 7 elements\n      const buffer = 2;\n\n      if (totalPages <= 7) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        // Determine the range around current page\n        let start = Math.max(2, current - buffer);\n        let end = Math.min(totalPages - 1, current + buffer);\n\n        // Adjust range to ensure we show enough pages\n        // If we're close to the beginning, extend the end\n        if (current <= 4) {\n          start = 2;\n          end = Math.min(totalPages - 1, 5);\n        }\n        // If we're close to the end, extend the start\n        else if (current >= totalPages - 3) {\n          start = Math.max(2, totalPages - 4);\n          end = totalPages - 1;\n        }\n        // For middle pages, show current +/- 1\n        else {\n          start = current - 1;\n          end = current + 1;\n        }\n\n        // Add ellipsis before the range if there's a gap\n        if (start > 2) {\n          pages.push('...');\n        }\n\n        // Add the range of pages\n        for (let i = start; i <= end; i++) {\n          pages.push(i);\n        }\n\n        // Add ellipsis after the range if there's a gap\n        if (end < totalPages - 1) {\n          pages.push('...');\n        }\n\n        // Always show last page\n        pages.push(totalPages);\n      }\n    }\n\n    this.visiblePages = pages;\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() {\n    const items = typeof this.itemsPerPage === 'string' ?\n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.filterOptionsArray();\n\n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n    if (selectedOption) {\n      this.internalItemsPerPage = Number(selectedOption.value);\n    } else if (this.filteredItemsPerPage.length > 0) {\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n    }\n\n    this.calculateNumberOfPages();\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() {\n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  private handleResize = () => {\n    // Debounce resize events to prevent excessive calls\n    clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.updateVisiblePages();\n    }, 100);\n  };\n\n  private resizeTimeout: any;\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n\n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        {this.showItemsPerPage && (\n          <div class=\"items__per-page-wrapper\">\n            <div class=\"items__per-page-label\">Results per Page</div>\n            <div class=\"items__per-page-field\">\n              <ifx-select\n                id='itemsPerPageSelect'\n                placeholder='false'\n                show-search='false'\n                value={undefined}\n                disabled={false}\n                error={false}\n                size=\"s\"\n                options={this.filteredItemsPerPage}\n                placeholder-value=\"Select\"\n              ></ifx-select>\n            </div>\n          </div>\n        )}\n\n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              aria-label='Previous Page'\n              onClick={() => this.changePage(this.internalPage - 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n\n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li\n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <span \n                  class='page__button'\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-current={page === this.internalPage ? \"page\" : undefined}\n                  aria-label={`Page ${page}`}\n                  onClick={() => this.changePage(page)}\n                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page)}\n                >\n                  {page}\n                </span>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span aria-hidden=\"true\">...</span>\n              </li>\n            ))}\n            </ol>\n\n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              aria-label='Next Page'\n              onClick={() => this.changePage(this.internalPage + 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DkRZn47g.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pagination/pagination.scss?tag=ifx-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 32px;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n  flex-wrap: wrap;\n\n  & .items__per-page-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    & .items__per-page-label {\n      color: #1D1D1D;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 600;\n      line-height: 20px;\n    }\n\n    & .items__per-page-field {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n\n      & ifx-select {\n        width: 92px;\n      }\n    }\n  }\n\n  & .items__total-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 12px;\n\n    & .items__total-button {\n      display: flex;\n      width: 40px;\n      height: 40px;\n      justify-content: center;\n      align-items: center;\n      border-radius: 100px;\n      border: 1px solid #BFBBBB;\n      background: #FFF;\n    }\n\n    & .page__numbers-wrapper {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 12px;\n\n      & .page__number-item {\n        display: flex;\n        padding: 6px;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        gap: 10px;\n        border-radius: 100px;\n\n        &.active {\n          background-color: #0A8276;\n\n          & span {\n            color: #fff;\n          }\n        }\n\n        &:hover {\n          cursor: pointer;\n        }\n\n        &:hover:not(.active) {\n          background-color: #ddd;\n\n        }\n\n        &:active:not(.active) {\n          background-color: #575352;\n        }\n\n        & span {\n          display: flex;\n          width: 16px;\n          height: 16px;\n          flex-direction: column;\n          justify-content: center;\n          color: #1D1D1D;\n          text-align: center;\n          font-size: 13px;\n          font-style: normal;\n          font-weight: 400;\n          line-height: 20px;\n        }\n      }\n    }\n  }\n}\n\n\n.pagination {\n  display: flex;\n\n  & ifx-icon-button:first-of-type {\n    margin-right: 12px;\n  }\n\n  & ifx-icon-button:last-of-type {\n    margin-left: 12px;\n  }\n}\n\n.page__button {\n  padding: 8px;\n  border-radius: 100px;\n}\n\nol {\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n}\n\nli {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  border-radius: 100px;\n\n  &:hover:not(.active) {\n    & page__button {\n      background-color: #EEEDED;\n    }\n  }\n\n  &:active:not(.active) {\n    & .page__button {\n      background-color: #575352;\n      color: #fff;\n    }\n  }\n\n  &.active {\n    background-color: #0A8276;\n\n    & .page__button {\n      color: #fff;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  & .page__button {\n    text-decoration: none;\n    display: flex;\n    width: 16px;\n    height: 16px;\n    flex-direction: column;\n    justify-content: center;\n    color: #1D1D1D;\n    text-align: center;\n    font-size: 13px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    align-items: center;\n  }\n}\n\n.prev,\n.next {\n  &.disabled {\n    cursor: default;\n\n    &:hover {\n      cursor: default;\n      text-decoration: none;\n    }\n  }\n}\n\n.prev {\n  margin-right: 2.5px;\n}\n\n.next {\n  margin-left: 2.5px;\n}\n\n@media (max-width: tokens.$ifxBreakpointM) {\n  .container {\n    gap: tokens.$ifxSpace200;\n    justify-content: left;\n\n    .items__total-wrapper {\n      .pagination {\n        ol {\n          gap: tokens.$ifxSpace150;\n        }\n      }\n    }\n  }\n}\n\n@media (max-width: 374px) {\n  .pagination {\n    .ellipsis + .active {\n      margin-left: tokens.$ifxSpace100;\n    }\n\n    .active + .ellipsis {\n      margin-left: tokens.$ifxSpace100;\n    }\n  }\n}\n","import { Component, h, Element, Event, EventEmitter, Prop, State, Listen, Watch } 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-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true\n})\nexport class Pagination {\n  @Element() el: HTMLElement;\n  @Event() ifxPageChange: EventEmitter;\n  @Event() ifxItemsPerPageChange: EventEmitter;\n  @Prop() currentPage: number = 1;\n  @Prop() showItemsPerPage: boolean = true;\n  @State() internalPage: number = 1;\n  @State() internalItemsPerPage: number = 10;\n  @State() numberOfPages: number[] = [];\n  @Prop() total: number = 1;\n  @Prop() itemsPerPage: any[] | string;\n  @State() filteredItemsPerPage: any[] = [];\n  @State() visiblePages: (number | string)[] = [];\n\n  private CLASS_DISABLED = \"disabled\";\n  private CLASS_ACTIVE = \"active\";\n  private prevInternalPage: number;\n\n  @Watch('total')\n  watchTotalHandler() {\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n  @Watch('currentPage')\n  currentPageWatcher(newVal: number) {\n    this.internalPage = Math.max(1, Math.min(newVal, this.numberOfPages.length));\n    this.calculateNumberOfPages();\n    this.updateVisiblePages();\n  }\n\n    @Listen('ifxSelect')\n    setItemsPerPage(e: CustomEvent) {\n      const selectedValue = e.detail?.value || e.detail?.label;\n      const newItemsPerPage = parseInt(selectedValue) || 10;\n\n      if (newItemsPerPage === this.internalItemsPerPage) {\n        return;\n      }\n\n      this.internalItemsPerPage = newItemsPerPage;\n      this.internalPage = 1;\n      this.calculateNumberOfPages();\n      this.updateVisiblePages();\n      this.handleEventEmission();\n    }\n\n    emitItemsPerPage(e) {\n      this.ifxItemsPerPageChange.emit((e as any).detail.label)\n    }\n\n  async componentDidLoad() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if(select) {\n        select.addEventListener('ifxSelect', (e) => this.emitItemsPerPage(e))\n      }\n    }\n\n    // Add resize listener to update pagination on screen size changes\n    window.addEventListener('resize', this.handleResize);\n\n    if(!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-pagination', await framework)\n    }\n    this.initPagination();\n  }\n\n  disconnectedCallback() {\n    if (this.showItemsPerPage) {\n      const select = this.el.shadowRoot.querySelector('#itemsPerPageSelect');\n      if (select) {\n        select.removeEventListener('ifxSelect', (e) => this.emitItemsPerPage(e));\n      }\n    }\n\n    // Remove resize listener\n    window.removeEventListener('resize', this.handleResize);\n\n    // Clear any pending resize timeout\n    if (this.resizeTimeout) {\n      clearTimeout(this.resizeTimeout);\n    }\n  }\n\n  updateVisiblePages() {\n    // Check if screen is mobile (< 375px)\n    const isMobile = window.innerWidth < 375;\n    const totalPages = this.numberOfPages.length;\n    const current = this.internalPage;\n    let pages: (number | string)[] = [];\n\n    if (isMobile) {\n      // Mobile logic: maximum 5 elements\n      if (totalPages <= 5) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        if (current <= 2) {\n          // Show: 1 2 3 … 10 (for pages 1 and 2)\n          pages.push(2, 3, '...', totalPages);\n        } else if (current >= totalPages - 1) {\n          // Show: 1 … 23 24 25 (for last 2 pages only)\n          pages.push('...', totalPages - 2, totalPages - 1, totalPages);\n        } else {\n          // Show: 1 … 5 … 10 (for middle pages, including page 3 and third-to-last page)\n          pages.push('...', current, '...', totalPages);\n        }\n      }\n    } else {\n      // Desktop logic: maximum 7 elements\n      const buffer = 2;\n\n      if (totalPages <= 7) {\n        pages = [...this.numberOfPages];\n      } else {\n        // Always show first page\n        pages.push(1);\n\n        // Determine the range around current page\n        let start = Math.max(2, current - buffer);\n        let end = Math.min(totalPages - 1, current + buffer);\n\n        // Adjust range to ensure we show enough pages\n        // If we're close to the beginning, extend the end\n        if (current <= 4) {\n          start = 2;\n          end = Math.min(totalPages - 1, 5);\n        }\n        // If we're close to the end, extend the start\n        else if (current >= totalPages - 3) {\n          start = Math.max(2, totalPages - 4);\n          end = totalPages - 1;\n        }\n        // For middle pages, show current +/- 1\n        else {\n          start = current - 1;\n          end = current + 1;\n        }\n\n        // Add ellipsis before the range if there's a gap\n        if (start > 2) {\n          pages.push('...');\n        }\n\n        // Add the range of pages\n        for (let i = start; i <= end; i++) {\n          pages.push(i);\n        }\n\n        // Add ellipsis after the range if there's a gap\n        if (end < totalPages - 1) {\n          pages.push('...');\n        }\n\n        // Always show last page\n        pages.push(totalPages);\n      }\n    }\n\n    this.visiblePages = pages;\n  }\n\n  calculateNumberOfPages() {\n    const totalPages = Math.ceil(this.total / this.internalItemsPerPage);\n    this.numberOfPages = Array.from({ length: totalPages }, (_, i) => i + 1);\n    this.internalPage = Math.max(1, Math.min(this.currentPage, totalPages));\n  }\n\n  filterOptionsArray() {\n    const items = typeof this.itemsPerPage === 'string' ?\n      JSON.parse(this.itemsPerPage) : this.itemsPerPage;\n    this.filteredItemsPerPage = items.map(item => ({\n      ...item,\n      label: item.label || item.value\n    }));\n  }\n\n  componentWillLoad() {\n    this.filterOptionsArray();\n\n    const selectedOption = this.filteredItemsPerPage.find(option => option.selected);\n    if (selectedOption) {\n      this.internalItemsPerPage = Number(selectedOption.value);\n    } else if (this.filteredItemsPerPage.length > 0) {\n      this.internalItemsPerPage = Number(this.filteredItemsPerPage[0].value);\n    }\n\n    this.calculateNumberOfPages();\n    this.internalPage = Math.max(1, Math.min(this.currentPage, this.numberOfPages.length));\n    this.updateVisiblePages();\n  }\n\n  componentWillUpdate() {\n     if (this.prevInternalPage !== this.internalPage) {\n      this.updateVisiblePages();\n      this.prevInternalPage = this.internalPage;\n    }\n  }\n\n  componentDidUpdate() {\n    this.initPagination();\n  }\n\n  handleEventEmission() {\n    this.ifxPageChange.emit({\n      currentPage: this.internalPage,\n      totalPages: this.numberOfPages.length,\n      itemsPerPage: this.internalItemsPerPage\n    });\n  }\n\n  initPagination() {\n    const pagination = this.el.shadowRoot.querySelector('.pagination');\n    if (!pagination) return;\n\n    const updateButtons = () => {\n      const prev = pagination.querySelector<HTMLButtonElement>('.prev');\n      const next = pagination.querySelector<HTMLButtonElement>('.next');\n      if (prev) {\n        prev.disabled = this.internalPage === 1;\n        prev.classList.toggle(this.CLASS_DISABLED, this.internalPage === 1);\n      }\n      if (next) {\n        next.disabled = this.internalPage === this.numberOfPages.length;\n        next.classList.toggle(this.CLASS_DISABLED, this.internalPage === this.numberOfPages.length);\n      }\n    };\n\n    pagination.querySelectorAll('li').forEach(li => {\n      li.removeEventListener('click', this.handlePageClick);\n      li.addEventListener('click', this.handlePageClick);\n    });\n\n    updateButtons();\n  }\n\n  private handlePageClick = (e: Event) => {\n    const li = e.currentTarget as HTMLLIElement;\n    const page = parseInt(li.dataset.page);\n    if (!isNaN(page)) this.changePage(page);\n  };\n\n  private handleResize = () => {\n    // Debounce resize events to prevent excessive calls\n    clearTimeout(this.resizeTimeout);\n    this.resizeTimeout = setTimeout(() => {\n      this.updateVisiblePages();\n    }, 100);\n  };\n\n  private resizeTimeout: any;\n\n  changePage(newPage: number) {\n    newPage = Math.max(1, Math.min(newPage, this.numberOfPages.length));\n    if (newPage === this.internalPage) return;\n\n    this.internalPage = newPage;\n    this.handleEventEmission();\n    this.initPagination();\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        {this.showItemsPerPage && (\n          <div class=\"items__per-page-wrapper\">\n            <div class=\"items__per-page-label\">Results per Page</div>\n            <div class=\"items__per-page-field\">\n              <ifx-select\n                id='itemsPerPageSelect'\n                placeholder='false'\n                show-search='false'\n                value={undefined}\n                disabled={false}\n                error={false}\n                size=\"s\"\n                options={this.filteredItemsPerPage}\n                placeholder-value=\"Select\"\n              ></ifx-select>\n            </div>\n          </div>\n        )}\n\n        <div class=\"items__total-wrapper\">\n          <div class=\"pagination\">\n            <ifx-icon-button\n              class=\"prev\"\n              icon=\"arrow-left-16\"\n              aria-label='Previous Page'\n              onClick={() => this.changePage(this.internalPage - 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n\n            <ol>\n            {this.visiblePages.map((page, i) => typeof page === 'number' ? (\n              <li\n                key={`page-${page}`}\n                class={{ [this.CLASS_ACTIVE]: page === this.internalPage }}\n                data-page={page}\n              >\n                <span \n                  class='page__button'\n                  role=\"button\"\n                  tabindex=\"0\"\n                  aria-current={page === this.internalPage ? \"page\" : undefined}\n                  aria-label={`Page ${page}`}\n                  onClick={() => this.changePage(page)}\n                  onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && this.changePage(page)}\n                >\n                  {page}\n                </span>\n              </li>\n            ) : (\n              <li class=\"ellipsis\" key={`ellipsis-${i}`}>\n                <span aria-hidden=\"true\">...</span>\n              </li>\n            ))}\n            </ol>\n\n            <ifx-icon-button\n              class=\"next\"\n              icon=\"arrow-right-16\"\n              aria-label='Next Page'\n              onClick={() => this.changePage(this.internalPage + 1)}\n              variant=\"secondary\"\n            ></ifx-icon-button>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BQj9WQQe.js → p-DlFdNq4F.js}

@@ -1,6 +1,6 @@
 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 { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-B2e3orJn.js';
 
 const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:\"Source Sans 3\";vertical-align:bottom}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#0A8276;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
 
@@ -147,6 +147,6 @@ function defineCustomElement() {
 }
 
 export { Checkbox as C, defineCustomElement as d };
-//# sourceMappingURL=p-BQj9WQQe.js.map
+//# sourceMappingURL=p-DlFdNq4F.js.map
 
-//# sourceMappingURL=p-BQj9WQQe.js.map
+//# sourceMappingURL=p-DlFdNq4F.js.map

package/dist/components/{p-BQj9WQQe.js.map → p-DlFdNq4F.js.map}

@@ -1 +1 @@
-{"file":"p-BQj9WQQe.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: tokens.$ifxFontFamilyBody;\n    vertical-align: bottom;\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid tokens.$ifxColorEngineering500;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: tokens.$ifxColorRed500;\n        }\n\n        &:focus-visible {\n            border: 1px solid tokens.$ifxColorEngineering500;\n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n            border: 1px solid tokens.$ifxColorEngineering500;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: tokens.$ifxColorEngineering300;;\n            border-color: tokens.$ifxColorEngineering300;;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: tokens.$ifxColorOcean500;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: tokens.$ifxColorRed500;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: tokens.$ifxColorOcean500;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: tokens.$ifxColorEngineering300;;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: tokens.$ifxColorOcean600; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          //this.internals.setFormValue(this.value);\n        } else {\n          //this.internals.setFormValue(\"on\")\n        }\n      } else {\n        //this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox', await framework)\n    }\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"p-DlFdNq4F.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: tokens.$ifxFontFamilyBody;\n    vertical-align: bottom;\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid tokens.$ifxColorEngineering500;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: tokens.$ifxColorRed500;\n        }\n\n        &:focus-visible {\n            border: 1px solid tokens.$ifxColorEngineering500;\n            outline: 2px solid tokens.$ifxColorOcean500;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: tokens.$ifxColorEngineering200;\n            border: 1px solid tokens.$ifxColorEngineering500;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: tokens.$ifxColorEngineering300;;\n            border-color: tokens.$ifxColorEngineering300;;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: tokens.$ifxColorOcean500;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: tokens.$ifxColorRed500;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: tokens.$ifxColorOcean500;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: tokens.$ifxColorEngineering300;;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: tokens.$ifxColorOcean600; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: tokens.$ifxColorEngineering300;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  // formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          //this.internals.setFormValue(this.value);\n        } else {\n          //this.internals.setFormValue(\"on\")\n        }\n      } else {\n        //this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox', await framework)\n    }\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  // formResetCallback() {\n  //   this.internals.setFormValue(null);\n  // }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-16\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-esRQWwdS.js → p-Enb5HFzA.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as defineCustomElement$5 } from './p-R79iWjuc.js';
-import { d as defineCustomElement$4 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$4 } from './p-B2e3orJn.js';
 import { d as defineCustomElement$3 } from './p-C12r4j5b.js';
 import { d as defineCustomElement$2 } from './p-DdOsLLJc.js';
-import { d as defineCustomElement$1 } from './p-DFInpODO.js';
+import { d as defineCustomElement$1 } from './p-DX0ddaB9.js';
 
 const templateCss = ".react__template-wrapper{display:flex;width:300px;height:200px;border-radius:3px;border:1px solid #ccc}.react__template-wrapper.hide{display:none}.react__template-wrapper:hover{cursor:pointer}.template__page-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.template__page-wrapper .repository__url{text-decoration:none}.input__fields-wrapper{display:flex;flex-direction:column;gap:10px}.details__wrapper{display:flex;flex-direction:column;gap:10px}.selection__buttons-wrapper{display:flex;gap:10px;padding-top:10px;align-items:center}.selection__buttons-wrapper .vue__label{color:#ccc}.selection__buttons-wrapper label:not(.vue__label):hover{cursor:pointer}.selection__buttons-wrapper .selection__input{display:flex;align-items:center;gap:5px}.selection__buttons-wrapper .selection__input input{margin:0;height:20px;width:20px}.selection__buttons-wrapper .selection__input input:hover:not(.vue__input){cursor:pointer}.image__wrapper img{position:relative;width:300px;height:100%;border-radius:3px;object-fit:contain;transition:transform 0.2s}.image__wrapper img:hover{transform:scale(2);top:50px;z-index:100}";
 
@@ -202,6 +202,6 @@ function defineCustomElement() {
 }
 
 export { Template as T, defineCustomElement as d };
-//# sourceMappingURL=p-esRQWwdS.js.map
+//# sourceMappingURL=p-Enb5HFzA.js.map
 
-//# sourceMappingURL=p-esRQWwdS.js.map
+//# sourceMappingURL=p-Enb5HFzA.js.map

package/dist/components/{p-esRQWwdS.js.map → p-Enb5HFzA.js.map}

@@ -1 +1 @@
-{"file":"p-esRQWwdS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"version":3}
+{"file":"p-Enb5HFzA.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/templates/template/template.scss?tag=ifx-template&encapsulation=shadow","src/components/templates/template/template.tsx"],"sourcesContent":["\n.react__template-wrapper { \n  display: flex;\n  width: 300px;\n  height: 200px;\n  border-radius: 3px;\n  border: 1px solid #ccc;\n\n  &.hide { \n    display: none;\n  }\n  \n  &:hover { \n    cursor: pointer;\n  }\n}\n\n.template__page-wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n\n  & .repository__url { \n    text-decoration: none;\n  }\n}\n\n.input__fields-wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n}\n\n.details__wrapper { \n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.selection__buttons-wrapper { \n  display: flex;\n  gap: 10px;\n  padding-top: 10px;\n  align-items: center;\n  & .vue__label { \n    color: #ccc;\n  }\n\n  & label:not(.vue__label) { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  & .selection__input { \n    display: flex;\n    align-items: center;\n    gap: 5px;\n    & input { \n      margin: 0;\n      height: 20px;\n      width: 20px;\n      &:hover:not(.vue__input) { \n        cursor: pointer;\n      }\n    }\n  }\n}\n\n.image__wrapper { \n  img { \n    position: relative;\n    width: 300px;\n    height: 100%;\n    border-radius: 3px;\n    object-fit: contain;\n    transition: transform .2s;\n    &:hover { \n      transform: scale(2);\n      top: 50px;\n      z-index: 100;\n    }\n  }\n}","import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-template',\n  styleUrl: 'template.scss',\n  shadow: true,\n})\nexport class Template {\n  @Element() el: HTMLElement;\n  @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n  @State() repoUrl: string;\n  @State() showDetails: boolean = false;\n  @State() isTemplatePage: boolean = false;\n  @State() isLoading: boolean = true;\n  @State() repoError: string;\n  @Prop() name: string;\n  @Event() toggleTemplates: EventEmitter;\n  @Event() fieldError: EventEmitter;\n  @Prop() thumbnail: string;\n  \n  private clientId = 'Ov23lixmXiNTTNb6V5W6'\n  private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n  private scope = 'repo workflow'\n  private state = 'template123'\n\n  authUser() { \n    const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n      `client_id=${this.clientId}&` +\n      `redirect_uri=${this.redirectUri}&` +\n      `scope=${this.scope}&` +\n      `state=${this.state}`;\n    \n      window.open(authorizationUrl, '_blank'); \n  }\n\n  componentDidLoad() { \n    const url = new URL(window.location.href);\n    const code = url.searchParams.get('code');\n    const { templateName } = this.getLocalStorageValues()\n    if(code && this.name === templateName) { \n      this.isTemplatePage = true;\n      this.toggleTemplates.emit('details')\n      this.getUserToken(code)\n    } \n  }\n\n  getLocalStorageValues() { \n    const repoName = localStorage.getItem('repo_name');\n    const repoDesc = localStorage.getItem('repo_desc');\n    const repoFramework = localStorage.getItem('repo_framework');\n    const templateName = localStorage.getItem('selectedTemplate');\n    return { repoName, repoDesc, repoFramework, templateName }\n  }\n\n  async getUserToken(authCode) {\n    const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n    fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n    .then(response => {\n      if (response.ok) {\n        return response.text();\n      } else {\n        return response.text().then(errorMessage => {\n          throw new Error(errorMessage);\n        });\n      }\n    })\n    .then(data => { \n      if(data) { \n        this.isLoading = false;\n        this.repoUrl = data;\n        localStorage.clear();\n      } \n    })\n    .catch(error => {\n      this.repoError = error.message;\n      console.error('Error:', error.message)\n    });\n  }\n\n  handleUserInput(e, type) { \n    if (type === 'name') {\n      this.repoDetails = { ...this.repoDetails, name: e.target.value };\n    } else if (type === 'desc') {\n      this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n    } else if(type === 'framework') { \n      this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n    }\n  }\n\n  submitUserData() { \n    if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n      localStorage.setItem('repo_name', this.repoDetails.name);\n      localStorage.setItem('repo_desc', this.repoDetails.desc);\n      localStorage.setItem('repo_framework', this.repoDetails.framework);\n      localStorage.setItem('selectedTemplate', this.name);\n      this.fieldError.emit(false)\n      this.authUser()\n    } else { \n      this.fieldError.emit('All fields are mandatory')\n    }\n  }\n\n  togglePadding(action) { \n    let parent = this.el.parentElement;\n    if (parent) {\n      const rootNode = parent.getRootNode();\n      if (rootNode instanceof ShadowRoot) {\n        parent = rootNode.host.parentElement;\n      } else {\n        parent = parent.parentElement;\n      }\n      if(action === 'remove') { \n        parent.parentElement.style.padding = '0px';\n      } else if(action === 'add') { \n        parent.parentElement.style.padding = '4rem 20px';\n      }\n    }\n  }\n\n  handleCurrentTemplate(e) { \n    if(e && !this.showDetails) { \n      this.togglePadding('remove')\n      const targetTemplate = e.currentTarget;\n      this.toggleTemplates.emit(targetTemplate)\n      this.showDetails = true;\n    } \n  }\n\n  @Method()\n  async toggleTemplate(currTemp) { \n    const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n    if(templateWrapper) { \n      if(!templateWrapper.classList.contains('hide') && currTemp ) { \n        if(templateWrapper !== currTemp) {\n          templateWrapper.classList.add('hide')\n        }\n      } else { \n        if(this.showDetails) { \n          this.showDetails = false;\n        }\n        this.togglePadding('add')\n        templateWrapper.classList.remove('hide')\n      }\n    }\n  }\n\n \n  render() {\n      return (\n        <div>\n          {this.isTemplatePage \n          ? \n          <div class=\"template__page-wrapper\">\n            {!this.repoUrl && !this.repoError && \n            <div>\n              <h3>Your repository is getting ready..</h3>\n              <p>This will only take a minute.</p>\n            </div>}\n            {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n            {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n            {this.repoError && <div>{this.repoError}</div>}\n          </div> \n          : \n          <div class=\"react__template-container\">\n              <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n                <div class=\"image__wrapper\">\n                  <img src={this.thumbnail} />\n                </div>\n              </div>\n            {this.showDetails && \n            <div class=\"details__wrapper\">\n              <div class=\"selection__buttons-wrapper\">\n                <div class=\"selection__input\">\n                  <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')}  />\n                  <label htmlFor=\"react\">React</label>\n                </div>\n                <div class=\"selection__input vue\">\n                  <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n                  <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n                </div>\n              </div>\n           \n\n              <div class=\"input__fields-wrapper\">\n                <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n                <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n                <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n              </div>\n              \n            </div>}\n          </div>}\n        </div>\n      );\n  }\n}"],"version":3}

package/dist/esm/{icons-CmdmgBUp.js → icons-CjdLRP3d.js}

@@ -6,7 +6,7 @@ var addressBook16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" heig
 
 var advanced16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M2.697 2.697A7.5 7.5 0 0 1 15.5 8v.5h-2.25v-1h1.23a6.5 6.5 0 0 0-12.96 0h1.807a4.7 4.7 0 0 1 7.996-2.823l-.707.707A3.7 3.7 0 0 0 4.3 8v.5H.5V8a7.5 7.5 0 0 1 2.197-5.303Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M8 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M13.132 5.672 9.242 9.56l-.707-.707 3.89-3.89.707.708Z" clip-rule="evenodd"/> </svg>';
 
-var ai16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8.98 10.02h-.854L7.77 8.781H6.23l-.359 1.24h-.826l1.491-4.579h.952l1.491 4.579ZM6.79 6.844c-.066.252-.136.5-.21.742l-.163.56h1.17l-.161-.56a24.233 24.233 0 0 1-.217-.75l-.196-.763h-.028c-.06.257-.126.514-.196.77Z" clip-rule="evenodd"/> <path d="M10.356 10.02h-.811V5.442h.811v4.579Z"/> <path fill-rule="evenodd" d="M8 0c1.6 0 2.987.973 3.951 2.419.22.328.417.685.594 1.063.368.174.716.368 1.036.581C15.027 5.028 16 6.415 16 8.015s-.973 2.986-2.419 3.95a7.707 7.707 0 0 1-.347.217c.198-.502.36-1.033.484-1.587C14.547 9.84 15 8.943 15 8.015c0-1.143-.685-2.238-1.915-3.078.268.946.415 1.982.415 3.063 0 2.156-.582 4.131-1.549 5.581C10.987 15.027 9.6 16 8 16s-2.987-.973-3.951-2.419a8.13 8.13 0 0 1-.576-1.026 8.145 8.145 0 0 1-1.054-.59C.973 11.003 0 9.616 0 8.016s.973-2.987 2.419-3.952c.107-.071.218-.14.331-.207a10.643 10.643 0 0 0-.477 1.586C1.45 6.195 1 7.09 1 8.015c0 1.146.689 2.244 1.925 3.085A11.277 11.277 0 0 1 2.5 8c0-2.156.582-4.131 1.549-5.581C5.013.973 6.4 0 8 0Zm0 1c-1.161 0-2.274.706-3.12 1.974C4.039 4.238 3.5 6.014 3.5 8c0 1.407.271 2.708.729 3.797 1.083.45 2.375.718 3.771.718a10.16 10.16 0 0 0 3.111-.474c-.125.252-.262.49-.408.708a5.447 5.447 0 0 1-.41.538A11.51 11.51 0 0 1 8 13.515c-1.083 0-2.121-.149-3.07-.417C5.77 14.32 6.862 15 8 15c1.161 0 2.274-.706 3.12-1.974.842-1.264 1.38-3.04 1.38-5.026 0-1.392-.266-2.68-.714-3.762C10.7 3.784 9.402 3.515 8 3.515c-1.13 0-2.192.174-3.13.48.13-.267.274-.515.427-.744.121-.182.248-.35.378-.503A11.508 11.508 0 0 1 8 2.515c1.093 0 2.139.15 3.094.423C10.252 1.694 9.15 1 8 1Z" clip-rule="evenodd"/> </svg>';
+var ai16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M4.505 8.18a3.5 3.5 0 0 0 3.315 3.315L8 11.5v1A3.5 3.5 0 0 0 4.5 16h-1A3.5 3.5 0 0 0 0 12.5v-1A3.5 3.5 0 0 0 3.5 8h1l.005.18ZM4 10.06A4.517 4.517 0 0 1 2.06 12 4.518 4.518 0 0 1 4 13.938 4.518 4.518 0 0 1 5.938 12 4.517 4.517 0 0 1 4 10.06ZM10.5 0a5.5 5.5 0 0 0 5.217 5.493L16 5.5v1a5.5 5.5 0 0 0-5.493 5.217L10.5 12h-1A5.5 5.5 0 0 0 4 6.5v-1A5.5 5.5 0 0 0 9.5 0h1ZM10 2.503A6.522 6.522 0 0 1 6.503 6 6.522 6.522 0 0 1 10 9.496 6.522 6.522 0 0 1 13.496 6 6.522 6.522 0 0 1 10 2.503Z" clip-rule="evenodd"/> </svg>';
 
 var airplane16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="m3.2 9.99-1.745-.069a1.283 1.283 0 0 0-.577.101 1.03 1.03 0 0 0-.47.393.843.843 0 0 0-.107.65.92.92 0 0 0 .343.51l1.275 1.074-.354.835a.741.741 0 0 0 .986.975l.953-.437.93 1.336.007.01a.925.925 0 0 0 .522.358.843.843 0 0 0 .649-.107 1.03 1.03 0 0 0 .393-.47c.08-.182.112-.384.1-.58l-.093-1.698 1.356-.622 2.078-2.08 3.743 5.614 1.184-1.185a2.433 2.433 0 0 0 .465-2.788l-2.414-4.619 2.61-2.611A2.537 2.537 0 0 0 11.447.993l-2.61 2.61-4.62-2.414a2.432 2.432 0 0 0-2.787.466L.25 2.835l5.564 3.79-2.039 2.039-.574 1.327Zm10.04-8.74c-.407 0-.797.162-1.086.45l-5.5 5.499-2.037 2.037-.64 1.48-1 1.998-.236.558 4.046-1.857 7.54-7.542a1.536 1.536 0 0 0-1.086-2.623ZM2.36 11.713l.37-.74-1.311-.052.94.792Zm4.173-5.807 1.562-1.561-4.322-2.26a1.432 1.432 0 0 0-1.635.277l-.327.326 4.722 3.218Zm5.15 2.026-1.515 1.516 3.176 4.765.322-.322a1.432 1.432 0 0 0 .277-1.636l-2.26-4.323ZM5.035 13.32l-.608.28.677.972-.069-1.252Z" clip-rule="evenodd"/> </svg>';
 
@@ -282,6 +282,8 @@ var facebookIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1
 
 var factory16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M0 0h2v1H1v14h14V6.5L9 11V6.5L3 11V4h1v5l6-4.5V9l6-4.5V16H0V0Zm3 0h11.5v.5c0 .834-.21 1.538-.613 2.086-.404.548-.975.902-1.628 1.083-1.236.344-2.79.082-4.296-.631-2.17.688-3.5.508-4.254-.247-.375-.375-.547-.839-.629-1.248C3 1.143 3 .758 3 .511V0Zm1.014 1c.009.114.023.23.047.347.059.295.168.55.355.737.348.348 1.212.68 3.426-.058l.196-.066.186.093c1.437.718 2.805.92 3.767.653.472-.131.839-.372 1.09-.714.185-.25.323-.575.384-.992h-9.45ZM6 13h2v1H6v-1Zm6 0h2v1h-2v-1Z" clip-rule="evenodd"/> </svg>';
 
+var fairyWand16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <g clip-path="url(#a)">    <path fill-rule="evenodd" d="M8.28.729A.5.5 0 0 1 8.8.768l2.306 1.657 2.705-.863a.5.5 0 0 1 .628.628l-.864 2.705L15.232 7.2a.5.5 0 0 1-.404.792l-2.84.014-1.68 2.289a.5.5 0 0 1-.877-.14l-.717-2.165-7.86 7.862a.5.5 0 1 1-.708-.707l7.86-7.862-2.163-.715a.5.5 0 0 1-.139-.877L7.992 4.01l.015-2.84.005-.07A.5.5 0 0 1 8.28.73Zm.711 3.539a.501.501 0 0 1-.204.4l-1.71 1.256 2.015.666.013.006c.023.008.044.02.066.031.01.006.023.01.033.018a.502.502 0 0 1 .11.098.499.499 0 0 1 .04.052c.01.013.016.028.023.042a.491.491 0 0 1 .023.052c.003.006.008.012.01.02l.665 2.013 1.257-1.709.08-.086a.5.5 0 0 1 .32-.118l2.123-.01-1.239-1.724a.5.5 0 0 1-.07-.444l.644-2.023-2.021.646a.5.5 0 0 1-.443-.07L9 2.146l-.01 2.122Z" clip-rule="evenodd"/> <path d="M13.5 10a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0-2.5-2.5 2.5 2.5 0 0 0 2.5-2.5ZM2.5 1A2.5 2.5 0 0 0 5 3.5 2.5 2.5 0 0 0 2.5 6 2.5 2.5 0 0 0 0 3.5 2.5 2.5 0 0 0 2.5 1Z"/> </g> <defs>    <clipPath id="a">      <path d="M0 0h16v16H0z"/> </clipPath> </defs> </svg>';
+
 var feedbackSupport16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M0 0h10v2H9V1H1v8h2v2.413L5.675 9.12l.65.76L2 13.587V10H0V0Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M7 3h9v10h-2v2.972L9.84 13H7V3Zm1 1v8h2.16L13 14.028V12h2V4H8Z" clip-rule="evenodd"/> <path d="M3.413 6.065a1.5 1.5 0 0 1 .036-.702c.072-.21.168-.399.288-.567.126-.168.255-.324.387-.468.132-.15.243-.297.333-.441a.852.852 0 0 0 .045-.837.58.58 0 0 0-.243-.252.805.805 0 0 0-.396-.09c-.18 0-.348.042-.504.126a1.71 1.71 0 0 0-.423.342l-.576-.531c.198-.228.432-.414.702-.558a1.91 1.91 0 0 1 .927-.225c.312 0 .588.057.828.171.246.108.438.273.576.495.138.222.207.498.207.828 0 .228-.048.432-.144.612-.09.18-.204.348-.342.504-.138.156-.273.312-.405.468a2.177 2.177 0 0 0-.306.504c-.078.18-.105.387-.08.621h-.91Zm.46 2.043a.65.65 0 0 1-.478-.198.72.72 0 0 1-.189-.504.7.7 0 0 1 .19-.504.65.65 0 0 1 .476-.198c.192 0 .351.066.477.198.132.132.198.3.198.504a.702.702 0 0 1-.198.504.631.631 0 0 1-.477.198ZM11.152 9.065l-.144-3.069-.027-1.026h1.044l-.036 1.026-.144 3.069h-.693Zm.35 2.043a.65.65 0 0 1-.476-.198.702.702 0 0 1-.198-.504c0-.204.066-.372.198-.504a.65.65 0 0 1 .477-.198c.192 0 .35.066.477.198a.7.7 0 0 1 .189.504.72.72 0 0 1-.19.504.631.631 0 0 1-.476.198Z"/> </svg>';
 
 var file16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M1 0h8.707L15 5.293V16H1V0Zm1 1v14h12V6H9V1H2Zm8 .707L13.293 5H10V1.707Z" clip-rule="evenodd"/> </svg>';
@@ -406,7 +408,7 @@ var grid16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 
 var gridLayout16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M0 0h16v16H0V0Zm1 1v14h14V1H1Zm2 2h4v4H3V3Zm1 1v2h2V4H4Zm5-1h4v4H9V3Zm1 1v2h2V4h-2ZM3 9h4v4H3V9Zm1 1v2h2v-2H4Zm5-1h4v4H9V9Zm1 1v2h2v-2h-2Z" clip-rule="evenodd"/> </svg>';
 
-var group16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M1 1h14v14H1V1Zm1 1v12h12V2H2Zm1 1h7v7H3V3Zm1 1v5h5V4H4Zm9 2v7H6v-1h6V6h1Z" clip-rule="evenodd"/> </svg>';
+var group16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 12H8v-1h3V7h1v5Z"/> <path fill-rule="evenodd" d="M9 9H4V4h5v5ZM5 8h3V5H5v3Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M15 15H1V1h14v14ZM2 14h12V2H2v12Z" clip-rule="evenodd"/> </svg>';
 
 var gym16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="m9.146.854.708-.708L12.5 2.793 14.646.646l.708.708L13.207 3.5l2.647 2.646-.707.708-6-6Zm2.708 4-7 7-.708-.707 7-7 .708.707Zm-11 4.292 6 6-.708.708L3.5 13.207l-2.146 2.147-.708-.707L2.793 12.5.146 9.854l.708-.708Z" clip-rule="evenodd"/> </svg>';
 
@@ -468,6 +470,8 @@ var laptop16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1
 
 var launch16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8 0h8v8h-1V1.707l-7.5 7.5-.707-.707 7.5-7.5H8V0ZM2 4a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h9a1 1 0 0 0 1-1V9h1v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5v1H2Z" clip-rule="evenodd"/> </svg>';
 
+var layers16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M6.5 0v1H1v10H0V0h6.5Z"/> <path d="M9.5 3v1H4v10H3V3h6.5Z"/> <path fill-rule="evenodd" d="M15 9.5V16H6V6h5.5L15 9.5ZM7 15h7v-5h-3.5V7H7v8Zm4.5-6h1.586L11.5 7.414V9Z" clip-rule="evenodd"/> </svg>';
+
 var layout16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M2 1a1 1 0 0 0-1 1v3h14V2a1 1 0 0 0-1-1H2Zm14 1a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2Zm-1 4H6v9h8a1 1 0 0 0 1-1V6ZM5 15V6H1v8a1 1 0 0 0 1 1h3Z" clip-rule="evenodd"/> </svg>';
 
 var leadFree16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M2.27 3.978a7 7 0 0 0 9.752 9.752l-2.59-2.59h-.285v-.286L6.822 8.53A3.35 3.35 0 0 1 5.6 8.74h-.94v2.4H3.5V5.207l-1.23-1.23Zm.636-.78L4.307 4.6H5.56c.487 0 .92.063 1.3.19s.68.337.9.63c.22.293.33.693.33 1.2 0 .48-.11.877-.33 1.19a1.857 1.857 0 0 1-.104.139L9.147 9.44V4.786h1.035v1.638l-.027.738c.186-.162.387-.294.603-.396.222-.102.447-.153.675-.153.366 0 .678.093.936.279.264.186.465.447.603.783.138.33.207.723.207 1.179 0 .504-.09.936-.27 1.296-.18.354-.414.627-.702.819a1.635 1.635 0 0 1-.918.279c-.129 0-.26-.02-.395-.061l1.907 1.907a7 7 0 1 0-9.895-9.895Zm3.95 3.95c.063-.15.094-.327.094-.528 0-.413-.127-.697-.38-.85-.247-.16-.613-.24-1.1-.24h-.233l1.619 1.618Zm-2.196-.78V7.81h.85c.202 0 .383-.017.541-.052L4.66 6.368ZM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm11.073 2.393a.877.877 0 0 0 .531-.171 1.13 1.13 0 0 0 .37-.504c.09-.228.134-.51.134-.846 0-.294-.033-.546-.099-.756a.918.918 0 0 0-.315-.477c-.138-.114-.318-.171-.54-.171a.995.995 0 0 0-.477.126 2.067 2.067 0 0 0-.495.369v2.061c.156.132.312.228.468.288.156.054.297.081.423.081Z" clip-rule="evenodd"/> </svg>';
@@ -508,6 +512,8 @@ var mail16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
 
 var mapPin16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M10.22 12.25C11.69 10.412 13 8.142 13 6A5 5 0 0 0 3 6c0 2.142 1.31 4.412 2.78 6.25A23.933 23.933 0 0 0 8 14.654c.075-.07.155-.148.24-.23a23.929 23.929 0 0 0 1.98-2.174ZM8 16s6-5 6-10A6 6 0 0 0 2 6c0 5 6 10 6 10Z" clip-rule="evenodd"/> </svg>';
 
+var maximize16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M12 4.707V9h1V3H7v1h4.293l-4.5 4.5.707.707 4.5-4.5Z"/> <path fill-rule="evenodd" d="M16 0H0v16h16V0ZM6 10H1V1h14v14H6v-5Zm-5 1h4v4H1v-4Z" clip-rule="evenodd"/> </svg>';
+
 var medal16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M5.809 0H.215l3.753 8.043a5 5 0 1 0 8.064 0L15.785 0h-5.594L8 4.382 5.809 0Zm5.492 7.244L14.215 1h-3.406L8.304 6.01a4.98 4.98 0 0 1 2.997 1.234ZM7.695 6.01 5.191 1H1.785l2.914 6.244A4.98 4.98 0 0 1 7.695 6.01ZM12 11a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd"/> </svg>';
 
 var mediaEject16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M0 15h16v1H0v-1ZM8 .038 15.89 13H.11L8 .038ZM1.89 12h12.22L8 1.962 1.89 12Z" clip-rule="evenodd"/> </svg>';
@@ -608,6 +614,8 @@ var protection16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" heigh
 
 var qrCode16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M11 11h3v3h-3v-3ZM14 4h2v3h-2V4ZM9 3h2v2H9V3ZM9 0h3v2H9V0ZM14 0h2v2h-2V0ZM7 14v2H5v-2h2ZM14 2v2h-2V2h2ZM5 11v2H3v-2h2ZM2 9v2H0V9h2ZM7 9v2H3V9h4ZM3 13v3H0v-3h3ZM9 5h4v2H9V5ZM0 0h1v7H0V0ZM6 0h1v7H6V0Z"/> <path d="M7 6v1H0V6h7ZM7 0v1H0V0h7ZM9 9h1v7H9V9ZM15 9h1v7h-1V9Z"/> <path d="M16 15v1H9v-1h7ZM16 9v1H9V9h7Z"/> </svg>';
 
+var qualified16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8ZM3 5a5 5 0 1 1 10 0A5 5 0 0 1 3 5Z" clip-rule="evenodd"/> <path fill-rule="evenodd" d="M4 10h1v4.138l3-1.714 3 1.714V10h1v5.862l-4-2.286-4 2.286V10Z" clip-rule="evenodd"/> <path d="m10.384 3.82-2.85 3.42-1.888-1.886.708-.708L7.466 5.76l2.15-2.58.768.641Z"/> </svg>';
+
 var questionMark16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M7.266 10.228c-.308-2.184 1.918-2.982 1.918-4.466 0-.742-.462-1.358-1.358-1.358-.616 0-1.176.308-1.61.812l-.658-.602c.588-.672 1.386-1.162 2.408-1.162 1.414 0 2.338.854 2.338 2.24 0 1.834-2.254 2.576-2.03 4.536H7.266Zm.532 2.94c-.462 0-.826-.364-.826-.868 0-.532.364-.896.826-.896.462 0 .84.364.84.896 0 .504-.378.868-.84.868Z"/> </svg>';
 
 var quote16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="m4.526 1.953-.462.191c-.999.413-1.753 1.064-2.264 1.968-.515.912-.8 2.113-.8 3.642V8h6v7H0V7.754c0-1.648.306-3.03.93-4.134.627-1.11 1.559-1.907 2.752-2.4l.462-.191.382.924ZM1 9v5h5V9H1ZM13.526 1.953l-.462.191c-.999.413-1.753 1.064-2.264 1.968-.515.912-.8 2.113-.8 3.642V8h6v7H9V7.754c0-1.648.306-3.03.93-4.134.627-1.11 1.559-1.907 2.752-2.4l.462-.191.382.924ZM10 9v5h5V9h-5Z" clip-rule="evenodd"/> </svg>';
@@ -738,7 +746,7 @@ var trendDown16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height
 
 var trendUp16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8.5 13 15 6.5v5.293h1v-7H9v1h5.293L8.5 11.586l-4-4-4.354 4.353.708.707L4.5 9l4 4Z" clip-rule="evenodd"/> </svg>';
 
-var ungroup16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M1 1h11v11H1V1Zm1 1v9h9V2H2Zm13 1v12H3v-1h11V3h1Z" clip-rule="evenodd"/> </svg>';
+var ungroup16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M2 14h2v1H1v-3h1v2ZM10 15H6v-1h4v1ZM15 15h-3v-1h2v-2h1v3ZM12 12H8v-1h3V7h1v5ZM2 10H1V6h1v4ZM15 10h-1V6h1v4Z"/> <path fill-rule="evenodd" d="M9 9H4V4h5v5ZM5 8h3V5H5v3Z" clip-rule="evenodd"/> <path d="M4 2H2v2H1V1h3v1ZM15 4h-1V2h-2V1h3v3ZM10 2H6V1h4v1Z"/> </svg>';
 
 var unlink16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="M3.95 6.071 1.828 8.192a4 4 0 1 0 5.657 5.657l2.122-2.121-.707-.707-2.122 2.121A3 3 0 1 1 2.536 8.9l2.12-2.122-.706-.707ZM13.85 1.828a4 4 0 0 0-5.658 0L6.072 3.95l.706.707L8.9 2.536a3 3 0 1 1 4.242 4.242L11.021 8.9l.707.707 2.121-2.122a4 4 0 0 0 0-5.657Z"/> <path fill-rule="evenodd" d="m4.303 10.667 6.364-6.364.707.707-6.364 6.364-.707-.707ZM2.354 1.646l3 3-.708.708-3-3 .708-.708ZM11.354 10.646l3 3-.707.708-3-3 .707-.707Z" clip-rule="evenodd"/> </svg>';
 
@@ -780,6 +788,8 @@ var volumeMute16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" heigh
 
 var volumeUp16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M14 1.5V.566l-.777.518L7.349 5H0v6h7.349l5.874 3.916.777.518V12h-1v1.566l-5.223-3.482L7.651 10H1V6h6.651l.126-.084L13 2.434V4h1V1.5Zm0 4v2h2v1h-2v2h-1v-2h-2v-1h2v-2h1Z" clip-rule="evenodd"/> </svg>';
 
+var wafer16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <g clip-path="url(#a)">    <path fill-rule="evenodd" d="M10 3v3h3v4h-3v3H6v-3H3V6h3V3h4Zm-3 7v2h2v-2H7ZM4 9h2V7H4v2Zm6 0h2V7h-2v2ZM7 9h2V7H7v2Zm0-5v2h2V4H7Z" clip-rule="evenodd"/> <path d="M15 8c0-3.724-3.276-7-7-7S1 4.276 1 8c0 1.833.92 3.468 1.997 4.665a8.642 8.642 0 0 0 1.577 1.388c.24.16.452.277.624.352.184.081.28.095.302.095h4.927c.804-.237 1.939-.917 2.882-2.014C14.266 11.373 15 9.86 15 8Zm1 0c0 2.14-.849 3.877-1.934 5.139-1.075 1.251-2.408 2.063-3.434 2.343l-.065.018H5.5c-.229 0-.476-.08-.702-.179a5.209 5.209 0 0 1-.778-.436 9.636 9.636 0 0 1-1.767-1.55C1.08 12.032 0 10.167 0 8c0-4.276 3.724-8 8-8s8 3.724 8 8Z"/> </g> <defs>    <clipPath id="a">      <path d="M0 0h16v16H0z"/> </clipPath> </defs> </svg>';
+
 var warning16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path fill-rule="evenodd" d="M8.447 1.512a.5.5 0 0 0-.894 0L1.67 13.276a.5.5 0 0 0 .447.724h11.764a.5.5 0 0 0 .447-.724L8.447 1.512Zm-1.789-.447c.553-1.105 2.13-1.105 2.684 0l5.882 11.764A1.5 1.5 0 0 1 13.882 15H2.118a1.5 1.5 0 0 1-1.342-2.17L6.658 1.064Z" clip-rule="evenodd"/> <path d="m7.535 10.42-.192-4.092-.036-1.368H8.7l-.048 1.368-.192 4.092h-.924Zm.468 2.724a.867.867 0 0 1-.636-.264.936.936 0 0 1-.264-.672.91.91 0 0 1 .264-.672.867.867 0 0 1 .636-.264c.256 0 .468.088.636.264.168.176.252.4.252.672a.96.96 0 0 1-.252.672.842.842 0 0 1-.636.264Z"/> </svg>';
 
 var warningCritical16Icon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">  <path d="m7.535 9.42-.192-4.092-.036-1.368H8.7l-.048 1.368L8.46 9.42h-.924Zm.468 2.724a.867.867 0 0 1-.636-.264.936.936 0 0 1-.264-.672.91.91 0 0 1 .264-.672.867.867 0 0 1 .636-.264c.256 0 .468.088.636.264.168.176.252.4.252.672a.96.96 0 0 1-.252.672.842.842 0 0 1-.636.264Z"/> <path fill-rule="evenodd" d="M4.793 0h6.414L16 4.793v6.414L11.207 16H4.793L0 11.207V4.793L4.793 0Zm.414 1L1 5.207v5.586L5.207 15h5.586L15 10.793V5.207L10.793 1H5.207Z" clip-rule="evenodd"/> </svg>';
@@ -959,6 +969,7 @@ const icons = {
   euc16: euc16Icon,
   facebook: facebookIcon,
   factory16: factory16Icon,
+  fairyWand16: fairyWand16Icon,
   feedbackSupport16: feedbackSupport16Icon,
   file16: file16Icon,
   fileAac16: fileAac16Icon,
@@ -1052,6 +1063,7 @@ const icons = {
   language16: language16Icon,
   laptop16: laptop16Icon,
   launch16: launch16Icon,
+  layers16: layers16Icon,
   layout16: layout16Icon,
   leadFree16: leadFree16Icon,
   leaf16: leaf16Icon,
@@ -1072,6 +1084,7 @@ const icons = {
   logout16: logout16Icon,
   mail16: mail16Icon,
   mapPin16: mapPin16Icon,
+  maximize16: maximize16Icon,
   medal16: medal16Icon,
   mediaEject16: mediaEject16Icon,
   mediaPause16: mediaPause16Icon,
@@ -1122,6 +1135,7 @@ const icons = {
   project16: project16Icon,
   protection16: protection16Icon,
   qrCode16: qrCode16Icon,
+  qualified16: qualified16Icon,
   questionMark16: questionMark16Icon,
   quote16: quote16Icon,
   rateDown16: rateDown16Icon,
@@ -1208,6 +1222,7 @@ const icons = {
   volumeDown16: volumeDown16Icon,
   volumeMute16: volumeMute16Icon,
   volumeUp16: volumeUp16Icon,
+  wafer16: wafer16Icon,
   warning16: warning16Icon,
   warningCritical16: warningCritical16Icon,
   warningCriticalF16: warningCriticalF16Icon,
@@ -1230,6 +1245,6 @@ const icons = {
 const getIcon = (icon) => icons[icon];
 
 export { getIcon as g, icons as i };
-//# sourceMappingURL=icons-CmdmgBUp.js.map
+//# sourceMappingURL=icons-CjdLRP3d.js.map
 
-//# sourceMappingURL=icons-CmdmgBUp.js.map
+//# sourceMappingURL=icons-CjdLRP3d.js.map