@sme.up/ketchup 11.0.0-SNAPSHOT-20250410104333 → 11.0.0-SNAPSHOT-20250414143939

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/dist/cjs/ketchup.cjs.js +1 -1
  2. package/dist/cjs/kup-accordion.cjs.entry.js +236 -27
  3. package/dist/cjs/kup-autocomplete_29.cjs.entry.js +7 -3
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/assets/accordion.js +24 -23
  6. package/dist/collection/assets/dashboard.js +3 -9
  7. package/dist/collection/components/kup-accordion/kup-accordion-declarations.js +6 -1
  8. package/dist/collection/components/kup-accordion/kup-accordion.css +10 -2
  9. package/dist/collection/components/kup-accordion/kup-accordion.js +442 -40
  10. package/dist/collection/components/kup-image/assets/svg/bullseye-arrow.svg +1 -0
  11. package/dist/collection/components/kup-image/assets/svg/email-stacked.svg +1 -0
  12. package/dist/collection/components/kup-image/assets/svg/filter-off.svg +1 -0
  13. package/dist/collection/components/kup-image/assets/svg/status.svg +9 -0
  14. package/dist/collection/components/kup-tab-bar/kup-tab-bar-declarations.js +4 -0
  15. package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +4 -4
  16. package/dist/components/index.js +1 -1
  17. package/dist/components/kup-accordion.js +242 -29
  18. package/dist/components/kup-activity-timeline.js +2 -2
  19. package/dist/components/kup-autocomplete.js +1 -1
  20. package/dist/components/kup-badge.js +1 -1
  21. package/dist/components/kup-box.js +1 -1
  22. package/dist/components/kup-button-list.js +1 -1
  23. package/dist/components/kup-button.js +1 -1
  24. package/dist/components/kup-calendar.js +2 -2
  25. package/dist/components/kup-card-list.js +3 -3
  26. package/dist/components/kup-card.js +1 -1
  27. package/dist/components/kup-cell.js +2 -2
  28. package/dist/components/kup-chart.js +1 -1
  29. package/dist/components/kup-checkbox.js +1 -1
  30. package/dist/components/kup-chip.js +1 -1
  31. package/dist/components/kup-color-picker.js +1 -1
  32. package/dist/components/kup-combobox.js +1 -1
  33. package/dist/components/kup-dashboard.js +2 -2
  34. package/dist/components/kup-data-table.js +1 -1
  35. package/dist/components/kup-date-picker.js +1 -1
  36. package/dist/components/kup-dialog.js +1 -1
  37. package/dist/components/kup-drawer.js +2 -2
  38. package/dist/components/kup-dropdown-button.js +1 -1
  39. package/dist/components/kup-echart.js +1 -1
  40. package/dist/components/kup-editor.js +1 -1
  41. package/dist/components/kup-family-tree.js +3 -3
  42. package/dist/components/kup-file-upload.js +1 -1
  43. package/dist/components/kup-form.js +1 -1
  44. package/dist/components/kup-gauge.js +1 -1
  45. package/dist/components/kup-grid.js +1 -1
  46. package/dist/components/kup-htm.js +2 -2
  47. package/dist/components/kup-iframe.js +2 -2
  48. package/dist/components/kup-image-list.js +2 -2
  49. package/dist/components/kup-image.js +1 -1
  50. package/dist/components/kup-input-panel.js +3 -3
  51. package/dist/components/kup-lazy.js +2 -2
  52. package/dist/components/kup-list.js +1 -1
  53. package/dist/components/kup-magic-box.js +4 -4
  54. package/dist/components/kup-nav-bar.js +2 -2
  55. package/dist/components/kup-numeric-picker.js +2 -2
  56. package/dist/components/kup-object-field.js +2 -2
  57. package/dist/components/kup-pdf.js +2 -2
  58. package/dist/components/kup-planner.js +2 -2
  59. package/dist/components/kup-probe.js +2 -2
  60. package/dist/components/kup-progress-bar.js +1 -1
  61. package/dist/components/kup-qlik.js +2 -2
  62. package/dist/components/kup-radio.js +1 -1
  63. package/dist/components/kup-rating.js +1 -1
  64. package/dist/components/kup-snackbar.js +2 -2
  65. package/dist/components/kup-spinner.js +1 -1
  66. package/dist/components/kup-switch.js +1 -1
  67. package/dist/components/kup-tab-bar.js +1 -1
  68. package/dist/components/kup-text-field.js +1 -1
  69. package/dist/components/kup-time-picker.js +1 -1
  70. package/dist/components/kup-toolbar.js +1 -1
  71. package/dist/components/kup-tree.js +1 -1
  72. package/dist/components/kup-txt.js +2 -2
  73. package/dist/components/kup-typography-list.js +2 -2
  74. package/dist/components/kup-typography.js +2 -2
  75. package/dist/components/{p-73922583.js → p-04bdcde6.js} +1 -1
  76. package/dist/components/{p-9cadb89a.js → p-154aa772.js} +2 -2
  77. package/dist/components/{p-2d17a388.js → p-9604d7b8.js} +2 -2
  78. package/dist/components/{p-f4cbdb5d.js → p-d814a4cb.js} +2 -2
  79. package/dist/components/{p-76ce24eb.js → p-e22a9cfc.js} +2 -2
  80. package/dist/components/{p-c50f899f.js → p-ece73808.js} +1868 -1859
  81. package/dist/esm/ketchup.js +1 -1
  82. package/dist/esm/kup-accordion.entry.js +237 -28
  83. package/dist/esm/kup-autocomplete_29.entry.js +7 -3
  84. package/dist/esm/loader.js +1 -1
  85. package/dist/ketchup/assets/svg/bullseye-arrow.svg +1 -0
  86. package/dist/ketchup/assets/svg/email-stacked.svg +1 -0
  87. package/dist/ketchup/assets/svg/filter-off.svg +1 -0
  88. package/dist/ketchup/assets/svg/status.svg +9 -0
  89. package/dist/ketchup/ketchup.esm.js +1 -1
  90. package/dist/ketchup/p-527998c8.entry.js +1 -0
  91. package/dist/ketchup/{p-e9f77e3a.entry.js → p-b2a5caf8.entry.js} +1 -1
  92. package/dist/types/components/kup-accordion/kup-accordion-declarations.d.ts +14 -7
  93. package/dist/types/components/kup-accordion/kup-accordion.d.ts +67 -6
  94. package/dist/types/components/kup-tab-bar/kup-tab-bar-declarations.d.ts +6 -1
  95. package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts +1 -1
  96. package/dist/types/components.d.ts +61 -12
  97. package/package.json +1 -1
  98. package/dist/ketchup/p-c832734a.entry.js +0 -1
@@ -16,33 +16,114 @@ require('./kup-dates-bc4cf9d0.js');
16
16
  var KupAccordionProps;
17
17
  (function (KupAccordionProps) {
18
18
  KupAccordionProps["customStyle"] = "Custom style of the component. For more information: https://smeup.github.io/ketchup/#/customization";
19
- KupAccordionProps["data"] = "Data of the accordion.";
19
+ KupAccordionProps["data"] = "List of elements.";
20
+ KupAccordionProps["infoIcon"] = "When true, it will show the info activation icon";
20
21
  KupAccordionProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
22
+ KupAccordionProps["toolbar"] = "When true, it will show the toolbar activation icon";
23
+ KupAccordionProps["sizing"] = "Sets the type of the component sizing.";
24
+ KupAccordionProps["toolbarCallback"] = "Callback to be called when the toolbar icon is clicked";
25
+ KupAccordionProps["infoCallback"] = "Callback to be called when the info icon is clicked";
21
26
  })(KupAccordionProps || (KupAccordionProps = {}));
22
27
 
23
- const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n --kup-accordion-border-top-color,\n var(--kup-border-subtle)\n );--kup_accordion_item_small_height:var(\n --kup-accordion-item-small-height,\n 32px\n );--kup_accordion_item_medium_height:var(\n --kup-accordion-item-medium-height,\n 40px\n );--kup_accordion_item_outline_color_active:var(\n --kup-accordion-item-outline-color-focus,\n var(--kup-border-interactive)\n );--kup_accordion_item_large_height:var(\n --kup-accordion-item-medium-height,\n 48px\n );--kup_accordion_header_background_color:var(\n --kup-accordion-header-background-color,\n var(--kup-layer-0)\n );--kup_accordion_header_background_color_hover:var(\n --kup-accordion-header-background-color-hover,\n var(--kup-layer-0-hover)\n );--kup_accordion_header_padding:var(\n --kup-accordion-header-padding,\n var(--kup-space-05)\n );--kup_accordion_dropdown_icon_color:var(\n --kup-accordio-dropdown-icon-color,\n var(--kup-text-primary)\n );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;margin-left:auto;margin-right:0;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
28
+ const kupAccordionCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:var(--kup-body-01-font-size, 14px);line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:var(--kup-label-01-font-size, 12px);line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-compact-01-font-size, 14px);line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:var(--kup-heading-01-font-size, 14px);line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_accordion_border_top_color:var(\n --kup-accordion-border-top-color,\n var(--kup-border-subtle)\n );--kup_accordion_item_small_height:var(\n --kup-accordion-item-small-height,\n 32px\n );--kup_accordion_item_medium_height:var(\n --kup-accordion-item-medium-height,\n 40px\n );--kup_accordion_item_outline_color_active:var(\n --kup-accordion-item-outline-color-focus,\n var(--kup-border-interactive)\n );--kup_accordion_item_large_height:var(\n --kup-accordion-item-medium-height,\n 48px\n );--kup_accordion_header_background_color:var(\n --kup-accordion-header-background-color,\n var(--kup-layer-0)\n );--kup_accordion_header_background_color_hover:var(\n --kup-accordion-header-background-color-hover,\n var(--kup-layer-0-hover)\n );--kup_accordion_header_padding:var(\n --kup-accordion-header-padding,\n var(--kup-space-05)\n );--kup_accordion_dropdown_icon_color:var(\n --kup-accordio-dropdown-icon-color,\n var(--kup-text-primary)\n );--kup_accordion_transition:var(--kup-accordion-transition, 80ms);display:block;font-family:var(--kup_accordion_font_family);font-size:var(--kup_accordion_font_size)}.accordion{border-radius:var(--kup_accordion_border_radius);display:flex;flex-wrap:wrap;flex-direction:column;width:100%}.accordion-item{border-top:1px solid var(--kup_accordion_border_top_color);box-sizing:border-box;width:100%}.accordion-item--visible{display:block}.accordion-item:is(:last-of-type){border-bottom:1px solid var(--kup_accordion_border_top_color)}.accordion-item__header{height:var(--kup_accordion_item_medium_height);align-items:center;border:none;box-sizing:border-box;color:var(--kup_accordion_text_color);cursor:pointer;display:flex;line-height:1.75em;outline:none;padding:var(--kup_accordion_padding);text-align:left;transition:background-color var(--kup_accordion_transition), color var(--kup_accordion_transition);width:100%;outline:2px solid transparent;outline-offset:-2px;padding-left:16px;padding-right:16px;gap:var(--kup-space-03)}.accordion-item__header:focus{outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header.accordion-item--small{height:var(--kup_accordion_item_small_height)}.accordion-item__header.accordion-item--large{height:var(--kup_accordion_item_large_height)}.accordion-item__header:hover:not(.accordion-item__header--selected){background-color:var(--kup_accordion_header_background_color_hover)}.accordion-item__header:focus(.accordion-item__header--selected){outline:2px solid var(--kup_accordion_item_outline_color_active)}.accordion-item__header--expanded{background-color:var(--kup_accordion_background_color)}.accordion-item__header--expanded .accordion-item__dropdown{transform:rotate(-180deg)}.accordion-item__header .f-image{margin:0}.accordion-item__header .accordion-rigtbuttons{margin-left:auto;margin-right:0;display:flex;gap:var(--kup-space-03)}.accordion-item__text{margin-right:0.5em;overflow:hidden;text-overflow:ellipsis;white-space:pre}.accordion-item__text--highlighted{color:var(--kup_accordion_text_on_primary_color);background-color:var(--kup_accordion_primary_color)}.accordion-item__icon{margin-left:0;margin-right:0.5em}.accordion-item__dropdown{background-color:var(--kup_accordion_dropdown_icon_color);height:1.5em;min-width:1.5em;width:1.5em;transition:transform var(--kup_accordion_transition)}.accordion-item__content{padding-left:16px;padding-top:8px;padding-bottom:24px;padding-right:80px;animation:fade-in 0.25s ease-out;display:none;font-family:var(--kup-font-family);font-size:var(--kup-body-compact-01-font-size, 14px);line-height:18px;font-weight:400;letter-spacing:0.16px}.accordion-item__content--selected{display:block}.mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_accordion_primary_color)}.kup-icon.kup-dropdown-icon{-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}:host(.kup-borderless){--kup-accordion-border:none}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-danger){--kup-accordion-primary-color:var(--kup-danger-color-60);--kup-accordion-primary-color-rgb:var(--kup-danger-color-60-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-info){--kup-accordion-primary-color:var(--kup-info-50-color);--kup-accordion-primary-color-rgb:var(--kup-info-color-50-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-secondary){--kup-accordion-primary-color:var(--kup-secondary-color);--kup-accordion-primary-color-rgb:var(--kup-secondary-color-rgb);--kup-accordion-text-on-primary-color:var(--kup-text-on-secondary-color)}:host(.kup-success){--kup-accordion-primary-color:var(--kup-success-color-40);--kup-accordion-primary-color-rgb:var(--kup-success-color-40-rgb);--kup-accordion-text-on-primary-color:white}:host(.kup-warning){--kup-accordion-primary-color:var(--kup-warning-color-50);--kup-accordion-primary-color-rgb:var(--kup-warning-color-50-rgb);--kup-accordion-text-on-primary-color:white}";
24
29
  const KupAccordionStyle0 = kupAccordionCss;
25
30
 
31
+ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
32
+ if (kind === "m")
33
+ throw new TypeError("Private method is not writable");
34
+ if (kind === "a" && !f)
35
+ throw new TypeError("Private accessor was defined without a setter");
36
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
37
+ throw new TypeError("Cannot write private member to an object whose class did not declare it");
38
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
39
+ };
40
+ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
41
+ if (kind === "a" && !f)
42
+ throw new TypeError("Private accessor was defined without a getter");
43
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
44
+ throw new TypeError("Cannot read private member from an object whose class did not declare it");
45
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
46
+ };
47
+ var _KupAccordion_clickCbDropCard, _KupAccordion_dropDownActionCardAnchor;
26
48
  const KupAccordion = class {
27
49
  constructor(hostRef) {
28
50
  index.registerInstance(this, hostRef);
29
- this.kupAccordionItemSelected = index.createEvent(this, "kup-accordion-itemselected", 6);
51
+ this.kupBlur = index.createEvent(this, "kup-accordion-blur", 6);
52
+ this.kupClick = index.createEvent(this, "kup-accordion-click", 6);
53
+ this.kupIconClick = index.createEvent(this, "kup-accordion-iconclick", 6);
54
+ this.kupInfoIconClick = index.createEvent(this, "kup-accordion-infoiconclick", 6);
55
+ this.kupFocus = index.createEvent(this, "kup-accordion-focus", 6);
56
+ this.kupToolbarItemClick = index.createEvent(this, "kup-accordion-toolbaritemclick", 6);
30
57
  /*-------------------------------------------------*/
31
58
  /* I n t e r n a l V a r i a b l e s */
32
59
  /*-------------------------------------------------*/
60
+ this.toolbarState = [];
61
+ this.infoState = [];
33
62
  /**
34
63
  * Instance of the KupManager class.
35
64
  */
36
65
  this.kupManager = kupManager.kupManagerInstance();
66
+ _KupAccordion_clickCbDropCard.set(this, null);
37
67
  /**
38
68
  * Instance of the KupManager class.
39
69
  */
40
70
  this.slotsNames = [];
71
+ _KupAccordion_dropDownActionCardAnchor.set(this, null);
41
72
  this.selectedItems = [];
42
73
  this.customStyle = '';
43
74
  this.data = null;
75
+ this.infoIcon = false;
44
76
  this.ripple = false;
77
+ this.toolbar = false;
45
78
  this.sizing = kupManager.KupComponentSizing.SMALL;
79
+ this.toolbarCallback = undefined;
80
+ this.infoCallback = undefined;
81
+ }
82
+ onKupBlur(node) {
83
+ this.kupBlur.emit({
84
+ comp: this,
85
+ id: this.rootElement.id,
86
+ node: node,
87
+ });
88
+ }
89
+ onKupClick(i, node) {
90
+ this.data[i].contentVisible = !this.data[i].contentVisible;
91
+ this.updateSelectedItems();
92
+ this.kupClick.emit({
93
+ comp: this,
94
+ id: this.rootElement.id,
95
+ node: node,
96
+ });
97
+ }
98
+ onKupIconClick(el) {
99
+ if (!el) {
100
+ this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
101
+ return;
102
+ }
103
+ __classPrivateFieldSet(this, _KupAccordion_dropDownActionCardAnchor, el, "f");
104
+ this.createDropDownToolbarList();
105
+ }
106
+ onKupInfoIconClick(el) {
107
+ if (!el) {
108
+ this.kupManager.debug.logMessage(this, 'onKupIconClick: Element is null');
109
+ return;
110
+ }
111
+ __classPrivateFieldSet(this, _KupAccordion_dropDownActionCardAnchor, el, "f");
112
+ this.createDropDownInfoList();
113
+ }
114
+ onKupFocus(node) {
115
+ this.kupFocus.emit({
116
+ comp: this,
117
+ id: this.rootElement.id,
118
+ node: node,
119
+ });
120
+ }
121
+ onKupToolbarItemClick(e) {
122
+ this.kupToolbarItemClick.emit({
123
+ comp: this,
124
+ id: this.rootElement.id,
125
+ node: e.detail.selected,
126
+ });
46
127
  }
47
128
  /*-------------------------------------------------*/
48
129
  /* W a t c h e r s */
@@ -66,9 +147,9 @@ const KupAccordion = class {
66
147
  */
67
148
  async collapseAll() {
68
149
  const ids = [];
69
- for (let i = 0; i < this.data.columns.length; i++) {
70
- const column = this.data.columns[i];
71
- const itemName = column.name;
150
+ for (let i = 0; i < this.data.length; i++) {
151
+ const node = this.data[i];
152
+ const itemName = node.id;
72
153
  if (!this.isItemExpandible(itemName) &&
73
154
  this.isItemSelected(itemName)) {
74
155
  ids.push(itemName);
@@ -81,9 +162,9 @@ const KupAccordion = class {
81
162
  */
82
163
  async expandAll() {
83
164
  const ids = [];
84
- for (let i = 0; i < this.data.columns.length; i++) {
85
- const column = this.data.columns[i];
86
- const itemName = column.name;
165
+ for (let i = 0; i < this.data.length; i++) {
166
+ const node = this.data[i];
167
+ const itemName = node.id;
87
168
  if (this.isItemExpandible(itemName)) {
88
169
  ids.push(itemName);
89
170
  }
@@ -115,27 +196,34 @@ const KupAccordion = class {
115
196
  * This method activates or deactivates an item
116
197
  * @param {string} itemName - Name of the item.
117
198
  */
118
- async toggleItem(itemName) {
119
- const isItemExpandible = this.isItemExpandible(itemName);
199
+ async toggleItem(node) {
120
200
  const ids = [...this.selectedItems];
121
- if (ids.includes(itemName)) {
122
- ids.splice(ids.indexOf(itemName), 1);
201
+ if (ids.includes(node.id)) {
202
+ ids.splice(ids.indexOf(node.id), 1);
123
203
  }
124
204
  else {
125
- ids.push(itemName);
205
+ ids.push(node.id);
126
206
  }
127
207
  this.selectedItems = ids;
128
- if (!isItemExpandible) {
129
- this.kupAccordionItemSelected.emit({
130
- comp: this,
131
- id: this.rootElement.id,
132
- itemName: itemName,
133
- });
134
- }
208
+ this.kupClick.emit({
209
+ comp: this,
210
+ id: this.rootElement.id,
211
+ node: node,
212
+ });
135
213
  }
136
214
  /*-------------------------------------------------*/
137
215
  /* P r i v a t e M e t h o d s */
138
216
  /*-------------------------------------------------*/
217
+ updateSelectedItems() {
218
+ const ids = [];
219
+ for (let i = 0; i < this.data.length; i++) {
220
+ const node = this.data[i];
221
+ if (node.contentVisible) {
222
+ ids.push(node.id);
223
+ }
224
+ }
225
+ this.selectedItems = ids;
226
+ }
139
227
  isItemExpandible(itemName) {
140
228
  return this.slotsNames.includes(itemName);
141
229
  }
@@ -143,6 +231,7 @@ const KupAccordion = class {
143
231
  return this.selectedItems.includes(itemName);
144
232
  }
145
233
  renderItems() {
234
+ var _a, _b;
146
235
  const items = [];
147
236
  const slots = Array.prototype.slice.call(this.rootElement.children, 0);
148
237
  this.slotsNames = [];
@@ -150,9 +239,9 @@ const KupAccordion = class {
150
239
  const slot = slots[index];
151
240
  this.slotsNames.push(slot.slot);
152
241
  }
153
- for (let i = 0; i < this.data.columns.length; i++) {
154
- const column = this.data.columns[i];
155
- const itemName = column.name;
242
+ for (let i = 0; i < this.data.length; i++) {
243
+ const node = this.data[i];
244
+ const itemName = node.id;
156
245
  const isItemSelected = this.isItemSelected(itemName);
157
246
  const isItemExpandible = this.isItemExpandible(itemName);
158
247
  const itemHeaderClass = {
@@ -168,10 +257,128 @@ const KupAccordion = class {
168
257
  ? true
169
258
  : false,
170
259
  };
171
- items.push(index.h("div", { class: "accordion-item" }, index.h("div", { tabindex: "1", title: column.title, class: itemHeaderClass, onClick: () => this.toggleItem(itemName) }, column.icon ? (index.h(fImage.FImage, { color: `var(${kupManager.KupThemeColorValues.ICON})`, resource: column.icon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, index.h("span", { class: "accordion-item__text" }, column.title), isItemExpandible ? (index.h("span", { class: `accordion-item__dropdown kup-icon ${kupManager.KupThemeIconValues.DROPDOWN.replace('--', '')}` })) : null), index.h("div", { class: itemContentClass }, index.h("slot", { name: column.name }))));
260
+ const wrapper = (index.h("div", { class: "accordion-rigtbuttons" }, this.infoIcon && (index.h(fImage.FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
261
+ event.stopPropagation();
262
+ const el = event.currentTarget;
263
+ const data = await this.infoCallback();
264
+ this.infoState = data;
265
+ if (this.infoState.length > 0) {
266
+ this.onKupInfoIconClick(el);
267
+ }
268
+ else {
269
+ this.kupManager.debug.logMessage(this, 'InfoIcon data is empty, not opening dropdown.');
270
+ }
271
+ }, wrapperClass: "tab__iconToolbar iconInfo" })), this.toolbar && (index.h(fImage.FImage, { resource: "more_vert", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
272
+ event.stopPropagation();
273
+ const el = event.currentTarget;
274
+ const data = await this.toolbarCallback();
275
+ this.toolbarState = data;
276
+ if (this.toolbarState.length > 0) {
277
+ this.onKupIconClick(el);
278
+ }
279
+ else {
280
+ this.kupManager.debug.logMessage(this, 'Toolbar data is empty, not opening dropdown.');
281
+ }
282
+ }, wrapperClass: "tab__iconToolbar iconToolbar" })), isItemExpandible ? (index.h("div", { class: `accordion-item__dropdown kup-icon ${kupManager.KupThemeIconValues.DROPDOWN.replace('--', '')}` })) : null));
283
+ items.push(index.h("div", { class: "accordion-item" }, index.h("div", { tabindex: i, title: (_a = node.title) !== null && _a !== void 0 ? _a : null, class: itemHeaderClass, onClick: () => this.toggleItem(node), onBlur: () => this.onKupBlur(node),
284
+ // onClick={() => this.onKupClick(i, node)}
285
+ onFocus: () => this.onKupFocus(node) }, node.icon ? (index.h(fImage.FImage, { color: `var(${kupManager.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "accordion-item__icon" })) : null, node.value ? (index.h("span", { class: "accordion-item__text" }, (_b = node.value) !== null && _b !== void 0 ? _b : '')) : null, wrapper), index.h("div", { class: itemContentClass }, index.h("slot", { name: node.id }))));
172
286
  }
173
287
  return items;
174
288
  }
289
+ closeRowToolbarList() {
290
+ if (this.toolbarList) {
291
+ this.kupManager.dynamicPosition.stop(this.toolbarList);
292
+ this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"));
293
+ this.toolbarList.remove();
294
+ this.kupManager.dynamicPosition.unregister([this.toolbarList]);
295
+ this.toolbarList = null;
296
+ }
297
+ }
298
+ /**
299
+ * Create dropdown list for toolbar
300
+ */
301
+ createDropDownToolbarList() {
302
+ if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
303
+ this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
304
+ return;
305
+ }
306
+ if (this.toolbarList) {
307
+ this.closeRowToolbarList();
308
+ }
309
+ if (this.toolbarState.length === 0) {
310
+ this.kupManager.debug.logMessage(this, 'No toolbar state available.');
311
+ return;
312
+ }
313
+ const listEl = document.createElement('kup-toolbar');
314
+ listEl.data = this.toolbarState;
315
+ listEl.addEventListener('kup-toolbar-click', (e) => {
316
+ this.onKupToolbarItemClick(e);
317
+ setTimeout(() => {
318
+ this.closeRowToolbarList();
319
+ }, 0);
320
+ });
321
+ this.toolbarList = listEl;
322
+ __classPrivateFieldSet(this, _KupAccordion_clickCbDropCard, {
323
+ cb: () => {
324
+ this.closeRowToolbarList();
325
+ },
326
+ el: this.toolbarList,
327
+ }, "f");
328
+ this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"), true);
329
+ this.rootElement.shadowRoot.appendChild(this.toolbarList);
330
+ requestAnimationFrame(() => {
331
+ if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
332
+ this.kupManager.debug.logMessage(this, 'DropDown anchor is still null after delay!');
333
+ return;
334
+ }
335
+ this.kupManager.dynamicPosition.register(this.toolbarList, __classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f"), 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
336
+ this.kupManager.dynamicPosition.start(this.toolbarList);
337
+ });
338
+ }
339
+ /**
340
+ * Create dropdown list for tab info icon
341
+ */
342
+ createDropDownInfoList() {
343
+ if (!__classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f")) {
344
+ this.kupManager.debug.logMessage(this, 'createDropDownToolbarList: Anchor is null!');
345
+ return;
346
+ }
347
+ if (this.infoList) {
348
+ this.closeInfoDataList();
349
+ }
350
+ if (this.infoState.length === 0) {
351
+ this.kupManager.debug.logMessage(this, 'No toolbar state available.');
352
+ return;
353
+ }
354
+ const listEl = document.createElement('kup-list');
355
+ listEl.data = this.infoState;
356
+ this.infoList = listEl;
357
+ __classPrivateFieldSet(this, _KupAccordion_clickCbDropCard, {
358
+ cb: () => {
359
+ this.closeInfoDataList();
360
+ },
361
+ el: this.infoList,
362
+ }, "f");
363
+ this.kupManager.addClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"), true);
364
+ this.rootElement.shadowRoot.appendChild(this.infoList);
365
+ requestAnimationFrame(() => {
366
+ this.kupManager.dynamicPosition.register(this.infoList, __classPrivateFieldGet(this, _KupAccordion_dropDownActionCardAnchor, "f"), 0, kupManager.KupDynamicPositionPlacement.AUTO, true);
367
+ this.kupManager.dynamicPosition.start(this.infoList);
368
+ });
369
+ }
370
+ /**
371
+ * Destroy dropdown list for tab info icon
372
+ */
373
+ closeInfoDataList() {
374
+ if (this.infoList) {
375
+ this.kupManager.dynamicPosition.stop(this.infoList);
376
+ this.kupManager.removeClickCallback(__classPrivateFieldGet(this, _KupAccordion_clickCbDropCard, "f"));
377
+ this.infoList.remove();
378
+ this.kupManager.dynamicPosition.unregister([this.infoList]);
379
+ this.infoList = null;
380
+ }
381
+ }
175
382
  /*-------------------------------------------------*/
176
383
  /* L i f e c y c l e H o o k s */
177
384
  /*-------------------------------------------------*/
@@ -180,6 +387,7 @@ const KupAccordion = class {
180
387
  this.kupManager.theme.register(this);
181
388
  }
182
389
  componentDidLoad() {
390
+ this.updateSelectedItems();
183
391
  this.applyRipple();
184
392
  this.kupManager.debug.logLoad(this, true);
185
393
  }
@@ -199,8 +407,8 @@ const KupAccordion = class {
199
407
  this.kupManager.debug.logRender(this, true);
200
408
  }
201
409
  render() {
202
- const content = this.data && this.data.columns ? this.renderItems() : null;
203
- return (index.h(index.Host, { key: 'e833d2f12eaadc0a52bbfa292e29c92e3a7d737c' }, index.h("style", { key: '93b4315cd2a0f9834ec9f4cf70c0c2cf6baf91cb' }, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { key: 'a9cbd70c8e08f1b00cdee843c8b34540e49a7541', id: GenericVariables.componentWrapperId }, index.h("div", { key: '9ddf2bd8d16f97c3004948e31dcd2bb17ee155b6', class: "accordion" }, content))));
410
+ const content = this.data && this.data.length ? this.renderItems() : null;
411
+ return (index.h(index.Host, { key: '1eab0235eab32cfa1132d4f918b56e2788f10e3e' }, index.h("style", { key: '5562ce0c27752221054bfe75c5bc0fa73483c551' }, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { key: '8023ab06eb1040fd72788e4e94f8cf520da31a12', id: GenericVariables.componentWrapperId }, index.h("div", { key: '8cfc0ba359969c76ff2dab13ed3c80f3e03e5828', class: "accordion" }, content))));
204
412
  }
205
413
  disconnectedCallback() {
206
414
  this.kupManager.theme.unregister(this);
@@ -210,6 +418,7 @@ const KupAccordion = class {
210
418
  "ripple": ["applyRipple"]
211
419
  }; }
212
420
  };
421
+ _KupAccordion_clickCbDropCard = new WeakMap(), _KupAccordion_dropDownActionCardAnchor = new WeakMap();
213
422
  KupAccordion.style = KupAccordionStyle0;
214
423
 
215
424
  exports.kup_accordion = KupAccordion;
@@ -17544,9 +17544,13 @@ var KupTabBarProps;
17544
17544
  (function (KupTabBarProps) {
17545
17545
  KupTabBarProps["customStyle"] = "Custom style of the component.";
17546
17546
  KupTabBarProps["data"] = "List of elements.";
17547
+ KupTabBarProps["dense"] = "When true, the component will be more compact.";
17548
+ KupTabBarProps["infoIcon"] = "Icon to be shown in the info button";
17547
17549
  KupTabBarProps["ripple"] = "When enabled displays Material's ripple effect on item headers.";
17548
17550
  KupTabBarProps["toolbar"] = "when true, it will show the toolbar activation icon";
17549
17551
  KupTabBarProps["variant"] = "Variant of the component. It is either flat or contained";
17552
+ KupTabBarProps["toolbarCallback"] = "Callback to be called when the toolbar icon is clicked";
17553
+ KupTabBarProps["infoCallback"] = "Callback to be called when the info icon is clicked";
17550
17554
  })(KupTabBarProps || (KupTabBarProps = {}));
17551
17555
  /**
17552
17556
  * Styling options for the f-button component.
@@ -17589,7 +17593,7 @@ const KupTabBar = class {
17589
17593
  this.kupIconClick = index.createEvent(this, "kup-tabbar-iconclick", 6);
17590
17594
  this.kupInfoIconClick = index.createEvent(this, "kup-tabbar-infoiconclick", 6);
17591
17595
  this.kupFocus = index.createEvent(this, "kup-tabbar-focus", 6);
17592
- this.kupItemClick = index.createEvent(this, "kup-tabbar-itemclick", 6);
17596
+ this.kupToolbarItemClick = index.createEvent(this, "kup-tabbar-toolbaritemclick", 6);
17593
17597
  /*-------------------------------------------------*/
17594
17598
  /* I n t e r n a l V a r i a b l e s */
17595
17599
  /*-------------------------------------------------*/
@@ -17662,7 +17666,7 @@ const KupTabBar = class {
17662
17666
  });
17663
17667
  }
17664
17668
  onKupToolbarItemClick(e) {
17665
- this.kupItemClick.emit({
17669
+ this.kupToolbarItemClick.emit({
17666
17670
  comp: this,
17667
17671
  id: this.rootElement.id,
17668
17672
  value: this.value,
@@ -17876,7 +17880,7 @@ const KupTabBar = class {
17876
17880
  'kup-dense': this.dense,
17877
17881
  'kup-danger': node.danger,
17878
17882
  };
17879
- const tabEl = (index.h("f-button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, index.h("span", { class: "tab__content" }, node.icon ? (index.h(fImage.FImage, { color: `var(${kupManager$1.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (index.h("span", { class: "tab__text-label" }, this.data[i].value)) : null), this.infoIcon && (index.h(fImage.FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
17883
+ const tabEl = (index.h("f-button", { class: tabClass, role: "tab", "aria-selected": node.active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) }, index.h("span", { class: "tab__content" }, node.icon ? (index.h(fImage.FImage, { color: `var(${kupManager$1.KupThemeColorValues.PRIMARY})`, resource: node.icon, placeholderResource: node.placeholderIcon, wrapperClass: "tab__icon" })) : null, node.value ? (index.h("span", { class: "tab__text-label" }, node.value)) : null), this.infoIcon && (index.h(fImage.FImage, { resource: "info_outline", sizeX: "16px", sizeY: "16px", onClick: async (event) => {
17880
17884
  event.stopPropagation();
17881
17885
  const el = event.currentTarget;
17882
17886
  const data = await this.infoCallback();