@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.
- package/dist/cjs/ketchup.cjs.js +1 -1
- package/dist/cjs/kup-accordion.cjs.entry.js +236 -27
- package/dist/cjs/kup-autocomplete_29.cjs.entry.js +7 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/accordion.js +24 -23
- package/dist/collection/assets/dashboard.js +3 -9
- package/dist/collection/components/kup-accordion/kup-accordion-declarations.js +6 -1
- package/dist/collection/components/kup-accordion/kup-accordion.css +10 -2
- package/dist/collection/components/kup-accordion/kup-accordion.js +442 -40
- package/dist/collection/components/kup-image/assets/svg/bullseye-arrow.svg +1 -0
- package/dist/collection/components/kup-image/assets/svg/email-stacked.svg +1 -0
- package/dist/collection/components/kup-image/assets/svg/filter-off.svg +1 -0
- package/dist/collection/components/kup-image/assets/svg/status.svg +9 -0
- package/dist/collection/components/kup-tab-bar/kup-tab-bar-declarations.js +4 -0
- package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +4 -4
- package/dist/components/index.js +1 -1
- package/dist/components/kup-accordion.js +242 -29
- package/dist/components/kup-activity-timeline.js +2 -2
- package/dist/components/kup-autocomplete.js +1 -1
- package/dist/components/kup-badge.js +1 -1
- package/dist/components/kup-box.js +1 -1
- package/dist/components/kup-button-list.js +1 -1
- package/dist/components/kup-button.js +1 -1
- package/dist/components/kup-calendar.js +2 -2
- package/dist/components/kup-card-list.js +3 -3
- package/dist/components/kup-card.js +1 -1
- package/dist/components/kup-cell.js +2 -2
- package/dist/components/kup-chart.js +1 -1
- package/dist/components/kup-checkbox.js +1 -1
- package/dist/components/kup-chip.js +1 -1
- package/dist/components/kup-color-picker.js +1 -1
- package/dist/components/kup-combobox.js +1 -1
- package/dist/components/kup-dashboard.js +2 -2
- package/dist/components/kup-data-table.js +1 -1
- package/dist/components/kup-date-picker.js +1 -1
- package/dist/components/kup-dialog.js +1 -1
- package/dist/components/kup-drawer.js +2 -2
- package/dist/components/kup-dropdown-button.js +1 -1
- package/dist/components/kup-echart.js +1 -1
- package/dist/components/kup-editor.js +1 -1
- package/dist/components/kup-family-tree.js +3 -3
- package/dist/components/kup-file-upload.js +1 -1
- package/dist/components/kup-form.js +1 -1
- package/dist/components/kup-gauge.js +1 -1
- package/dist/components/kup-grid.js +1 -1
- package/dist/components/kup-htm.js +2 -2
- package/dist/components/kup-iframe.js +2 -2
- package/dist/components/kup-image-list.js +2 -2
- package/dist/components/kup-image.js +1 -1
- package/dist/components/kup-input-panel.js +3 -3
- package/dist/components/kup-lazy.js +2 -2
- package/dist/components/kup-list.js +1 -1
- package/dist/components/kup-magic-box.js +4 -4
- package/dist/components/kup-nav-bar.js +2 -2
- package/dist/components/kup-numeric-picker.js +2 -2
- package/dist/components/kup-object-field.js +2 -2
- package/dist/components/kup-pdf.js +2 -2
- package/dist/components/kup-planner.js +2 -2
- package/dist/components/kup-probe.js +2 -2
- package/dist/components/kup-progress-bar.js +1 -1
- package/dist/components/kup-qlik.js +2 -2
- package/dist/components/kup-radio.js +1 -1
- package/dist/components/kup-rating.js +1 -1
- package/dist/components/kup-snackbar.js +2 -2
- package/dist/components/kup-spinner.js +1 -1
- package/dist/components/kup-switch.js +1 -1
- package/dist/components/kup-tab-bar.js +1 -1
- package/dist/components/kup-text-field.js +1 -1
- package/dist/components/kup-time-picker.js +1 -1
- package/dist/components/kup-toolbar.js +1 -1
- package/dist/components/kup-tree.js +1 -1
- package/dist/components/kup-txt.js +2 -2
- package/dist/components/kup-typography-list.js +2 -2
- package/dist/components/kup-typography.js +2 -2
- package/dist/components/{p-73922583.js → p-04bdcde6.js} +1 -1
- package/dist/components/{p-9cadb89a.js → p-154aa772.js} +2 -2
- package/dist/components/{p-2d17a388.js → p-9604d7b8.js} +2 -2
- package/dist/components/{p-f4cbdb5d.js → p-d814a4cb.js} +2 -2
- package/dist/components/{p-76ce24eb.js → p-e22a9cfc.js} +2 -2
- package/dist/components/{p-c50f899f.js → p-ece73808.js} +1868 -1859
- package/dist/esm/ketchup.js +1 -1
- package/dist/esm/kup-accordion.entry.js +237 -28
- package/dist/esm/kup-autocomplete_29.entry.js +7 -3
- package/dist/esm/loader.js +1 -1
- package/dist/ketchup/assets/svg/bullseye-arrow.svg +1 -0
- package/dist/ketchup/assets/svg/email-stacked.svg +1 -0
- package/dist/ketchup/assets/svg/filter-off.svg +1 -0
- package/dist/ketchup/assets/svg/status.svg +9 -0
- package/dist/ketchup/ketchup.esm.js +1 -1
- package/dist/ketchup/p-527998c8.entry.js +1 -0
- package/dist/ketchup/{p-e9f77e3a.entry.js → p-b2a5caf8.entry.js} +1 -1
- package/dist/types/components/kup-accordion/kup-accordion-declarations.d.ts +14 -7
- package/dist/types/components/kup-accordion/kup-accordion.d.ts +67 -6
- package/dist/types/components/kup-tab-bar/kup-tab-bar-declarations.d.ts +6 -1
- package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts +1 -1
- package/dist/types/components.d.ts +61 -12
- package/package.json +1 -1
- 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"] = "
|
|
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;
|
|
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.
|
|
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.
|
|
70
|
-
const
|
|
71
|
-
const itemName =
|
|
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.
|
|
85
|
-
const
|
|
86
|
-
const itemName =
|
|
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(
|
|
119
|
-
const isItemExpandible = this.isItemExpandible(itemName);
|
|
199
|
+
async toggleItem(node) {
|
|
120
200
|
const ids = [...this.selectedItems];
|
|
121
|
-
if (ids.includes(
|
|
122
|
-
ids.splice(ids.indexOf(
|
|
201
|
+
if (ids.includes(node.id)) {
|
|
202
|
+
ids.splice(ids.indexOf(node.id), 1);
|
|
123
203
|
}
|
|
124
204
|
else {
|
|
125
|
-
ids.push(
|
|
205
|
+
ids.push(node.id);
|
|
126
206
|
}
|
|
127
207
|
this.selectedItems = ids;
|
|
128
|
-
|
|
129
|
-
this
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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.
|
|
154
|
-
const
|
|
155
|
-
const itemName =
|
|
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
|
-
|
|
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.
|
|
203
|
-
return (index.h(index.Host, { key: '
|
|
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.
|
|
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.
|
|
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":
|
|
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();
|