@dso-toolkit/core 48.0.0 → 49.0.0
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/dso-accordion-section.cjs.entry.js +72 -14
- package/dist/cjs/dso-accordion.cjs.entry.js +24 -4
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/dso-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/accordion/accordion.js +29 -6
- package/dist/collection/components/accordion/components/accordion-section.js +93 -10
- package/dist/collection/components/accordion/components/handles/heading.handle.js +5 -5
- package/dist/collection/components/icon/icon.js +95 -95
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/components/dso-accordion-section.js +74 -15
- package/dist/components/dso-accordion.js +24 -4
- package/dist/components/tooltip.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/p-bcd19ae7.entry.js +1 -0
- package/dist/dso-toolkit/{p-ec5412aa.entry.js → p-d8ba8db6.entry.js} +1 -1
- package/dist/esm/dso-accordion-section.entry.js +72 -14
- package/dist/esm/dso-accordion.entry.js +24 -4
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/dso-tooltip.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/accordion/accordion.d.ts +7 -2
- package/dist/types/components/accordion/accordion.interfaces.d.ts +6 -1
- package/dist/types/components/accordion/components/accordion-section.d.ts +10 -3
- package/dist/types/components/accordion/components/handles/heading.handle.d.ts +1 -0
- package/dist/types/components/tree-view/tree-item.d.ts +1 -1
- package/dist/types/components.d.ts +9 -4
- package/package.json +13 -18
- package/dist/dso-toolkit/p-39a33b89.entry.js +0 -1
|
@@ -1,99 +1,99 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
|
-
import air from "
|
|
3
|
-
import angleDown from "
|
|
4
|
-
import angleLeft from "
|
|
5
|
-
import angleRight from "
|
|
6
|
-
import angleUp from "
|
|
7
|
-
import balloon from "
|
|
8
|
-
import bars from "
|
|
9
|
-
import buildings from "
|
|
10
|
-
import calendar from "
|
|
11
|
-
import call from "
|
|
12
|
-
import caretDown from "
|
|
13
|
-
import check from "
|
|
14
|
-
import checkCircle from "
|
|
15
|
-
import chevronDown from "
|
|
16
|
-
import chevronLeft from "
|
|
17
|
-
import chevronRight from "
|
|
18
|
-
import chevronUp from "
|
|
19
|
-
import circleNotch from "
|
|
20
|
-
import clock from "
|
|
21
|
-
import copy from "
|
|
22
|
-
import crown from "
|
|
23
|
-
import cultural from "
|
|
24
|
-
import document from "
|
|
25
|
-
import download from "
|
|
26
|
-
import email from "
|
|
27
|
-
import energy from "
|
|
28
|
-
import environment from "
|
|
29
|
-
import exclamation from "
|
|
30
|
-
import externalLink from "
|
|
31
|
-
import eyeSlash from "
|
|
32
|
-
import eye from "
|
|
33
|
-
import filter from "
|
|
34
|
-
import forbidden from "
|
|
35
|
-
import health from "
|
|
36
|
-
import helpActive from "
|
|
37
|
-
import help from "
|
|
38
|
-
import house from "
|
|
39
|
-
import infoActive from "
|
|
40
|
-
import infoI from "
|
|
41
|
-
import info from "
|
|
42
|
-
import infrastructure from "
|
|
43
|
-
import label from "
|
|
44
|
-
import land from "
|
|
45
|
-
import landscape from "
|
|
46
|
-
import layers from "
|
|
47
|
-
import location from "
|
|
48
|
-
import locationOutline from "
|
|
49
|
-
import locationSearch from "
|
|
50
|
-
import lock from "
|
|
51
|
-
import magnet from "
|
|
52
|
-
import mapLayers from "
|
|
53
|
-
import mapLocation from "
|
|
54
|
-
import marker from "
|
|
55
|
-
import measurement from "
|
|
56
|
-
import minusSquare from "
|
|
57
|
-
import minus from "
|
|
58
|
-
import more from "
|
|
59
|
-
import municipality from "
|
|
60
|
-
import nature from "
|
|
61
|
-
import newWindow from "
|
|
62
|
-
import paperclip from "
|
|
63
|
-
import parking from "
|
|
64
|
-
import pencil from "
|
|
65
|
-
import pin from "
|
|
66
|
-
import pinOutline from "
|
|
67
|
-
import plusSquare from "
|
|
68
|
-
import plus from "
|
|
69
|
-
import print from "
|
|
70
|
-
import procedures from "
|
|
71
|
-
import redo from "
|
|
72
|
-
import safety from "
|
|
73
|
-
import search from "
|
|
74
|
-
import scale from "
|
|
75
|
-
import sitemap from "
|
|
76
|
-
import soil from "
|
|
77
|
-
import sortAscending from "
|
|
78
|
-
import sortDescending from "
|
|
79
|
-
import sort from "
|
|
80
|
-
import sound from "
|
|
81
|
-
import statusError from "
|
|
82
|
-
import statusDanger from "
|
|
83
|
-
import statusInfo from "
|
|
84
|
-
import statusSuccess from "
|
|
85
|
-
import statusWarning from "
|
|
86
|
-
import statusWarningInline from "
|
|
87
|
-
import statusWarningInlineNegative from "
|
|
88
|
-
import table from "
|
|
89
|
-
import times from "
|
|
90
|
-
import trash from "
|
|
91
|
-
import undo from "
|
|
92
|
-
import userLine from "
|
|
93
|
-
import user from "
|
|
94
|
-
import users from "
|
|
95
|
-
import water from "
|
|
96
|
-
import wipWip from "
|
|
2
|
+
import air from "dso-toolkit/src/icons/air.svg";
|
|
3
|
+
import angleDown from "dso-toolkit/src/icons/angle-down.svg";
|
|
4
|
+
import angleLeft from "dso-toolkit/src/icons/angle-left.svg";
|
|
5
|
+
import angleRight from "dso-toolkit/src/icons/angle-right.svg";
|
|
6
|
+
import angleUp from "dso-toolkit/src/icons/angle-up.svg";
|
|
7
|
+
import balloon from "dso-toolkit/src/icons/balloon.svg";
|
|
8
|
+
import bars from "dso-toolkit/src/icons/bars.svg";
|
|
9
|
+
import buildings from "dso-toolkit/src/icons/buildings.svg";
|
|
10
|
+
import calendar from "dso-toolkit/src/icons/calendar.svg";
|
|
11
|
+
import call from "dso-toolkit/src/icons/call.svg";
|
|
12
|
+
import caretDown from "dso-toolkit/src/icons/caret-down.svg";
|
|
13
|
+
import check from "dso-toolkit/src/icons/check.svg";
|
|
14
|
+
import checkCircle from "dso-toolkit/src/icons/check-circle.svg";
|
|
15
|
+
import chevronDown from "dso-toolkit/src/icons/chevron-down.svg";
|
|
16
|
+
import chevronLeft from "dso-toolkit/src/icons/chevron-left.svg";
|
|
17
|
+
import chevronRight from "dso-toolkit/src/icons/chevron-right.svg";
|
|
18
|
+
import chevronUp from "dso-toolkit/src/icons/chevron-up.svg";
|
|
19
|
+
import circleNotch from "dso-toolkit/src/icons/circle-notch.svg";
|
|
20
|
+
import clock from "dso-toolkit/src/icons/clock.svg";
|
|
21
|
+
import copy from "dso-toolkit/src/icons/copy.svg";
|
|
22
|
+
import crown from "dso-toolkit/src/icons/crown.svg";
|
|
23
|
+
import cultural from "dso-toolkit/src/icons/cultural.svg";
|
|
24
|
+
import document from "dso-toolkit/src/icons/document.svg";
|
|
25
|
+
import download from "dso-toolkit/src/icons/download.svg";
|
|
26
|
+
import email from "dso-toolkit/src/icons/email.svg";
|
|
27
|
+
import energy from "dso-toolkit/src/icons/energy.svg";
|
|
28
|
+
import environment from "dso-toolkit/src/icons/environment.svg";
|
|
29
|
+
import exclamation from "dso-toolkit/src/icons/exclamation.svg";
|
|
30
|
+
import externalLink from "dso-toolkit/src/icons/external-link.svg";
|
|
31
|
+
import eyeSlash from "dso-toolkit/src/icons/eye-slash.svg";
|
|
32
|
+
import eye from "dso-toolkit/src/icons/eye.svg";
|
|
33
|
+
import filter from "dso-toolkit/src/icons/filter.svg";
|
|
34
|
+
import forbidden from "dso-toolkit/src/icons/forbidden.svg";
|
|
35
|
+
import health from "dso-toolkit/src/icons/health.svg";
|
|
36
|
+
import helpActive from "dso-toolkit/src/icons/help-active.svg";
|
|
37
|
+
import help from "dso-toolkit/src/icons/help.svg";
|
|
38
|
+
import house from "dso-toolkit/src/icons/house.svg";
|
|
39
|
+
import infoActive from "dso-toolkit/src/icons/info-active.svg";
|
|
40
|
+
import infoI from "dso-toolkit/src/icons/info-i.svg";
|
|
41
|
+
import info from "dso-toolkit/src/icons/info.svg";
|
|
42
|
+
import infrastructure from "dso-toolkit/src/icons/infrastructure.svg";
|
|
43
|
+
import label from "dso-toolkit/src/icons/label.svg";
|
|
44
|
+
import land from "dso-toolkit/src/icons/land.svg";
|
|
45
|
+
import landscape from "dso-toolkit/src/icons/landscape.svg";
|
|
46
|
+
import layers from "dso-toolkit/src/icons/layers.svg";
|
|
47
|
+
import location from "dso-toolkit/src/icons/location.svg";
|
|
48
|
+
import locationOutline from "dso-toolkit/src/icons/location-outline.svg";
|
|
49
|
+
import locationSearch from "dso-toolkit/src/icons/location-search.svg";
|
|
50
|
+
import lock from "dso-toolkit/src/icons/lock.svg";
|
|
51
|
+
import magnet from "dso-toolkit/src/icons/magnet.svg";
|
|
52
|
+
import mapLayers from "dso-toolkit/src/icons/map-layers.svg";
|
|
53
|
+
import mapLocation from "dso-toolkit/src/icons/map-location.svg";
|
|
54
|
+
import marker from "dso-toolkit/src/icons/marker.svg";
|
|
55
|
+
import measurement from "dso-toolkit/src/icons/measurement.svg";
|
|
56
|
+
import minusSquare from "dso-toolkit/src/icons/minus-square.svg";
|
|
57
|
+
import minus from "dso-toolkit/src/icons/minus.svg";
|
|
58
|
+
import more from "dso-toolkit/src/icons/more.svg";
|
|
59
|
+
import municipality from "dso-toolkit/src/icons/municipality.svg";
|
|
60
|
+
import nature from "dso-toolkit/src/icons/nature.svg";
|
|
61
|
+
import newWindow from "dso-toolkit/src/icons/new-window.svg";
|
|
62
|
+
import paperclip from "dso-toolkit/src/icons/paperclip.svg";
|
|
63
|
+
import parking from "dso-toolkit/src/icons/parking.svg";
|
|
64
|
+
import pencil from "dso-toolkit/src/icons/pencil.svg";
|
|
65
|
+
import pin from "dso-toolkit/src/icons/pin.svg";
|
|
66
|
+
import pinOutline from "dso-toolkit/src/icons/pin-outline.svg";
|
|
67
|
+
import plusSquare from "dso-toolkit/src/icons/plus-square.svg";
|
|
68
|
+
import plus from "dso-toolkit/src/icons/plus.svg";
|
|
69
|
+
import print from "dso-toolkit/src/icons/print.svg";
|
|
70
|
+
import procedures from "dso-toolkit/src/icons/procedures.svg";
|
|
71
|
+
import redo from "dso-toolkit/src/icons/redo.svg";
|
|
72
|
+
import safety from "dso-toolkit/src/icons/safety.svg";
|
|
73
|
+
import search from "dso-toolkit/src/icons/search.svg";
|
|
74
|
+
import scale from "dso-toolkit/src/icons/scale.svg";
|
|
75
|
+
import sitemap from "dso-toolkit/src/icons/sitemap.svg";
|
|
76
|
+
import soil from "dso-toolkit/src/icons/soil.svg";
|
|
77
|
+
import sortAscending from "dso-toolkit/src/icons/sort-ascending.svg";
|
|
78
|
+
import sortDescending from "dso-toolkit/src/icons/sort-descending.svg";
|
|
79
|
+
import sort from "dso-toolkit/src/icons/sort.svg";
|
|
80
|
+
import sound from "dso-toolkit/src/icons/sound.svg";
|
|
81
|
+
import statusError from "dso-toolkit/src/icons/status-error.svg";
|
|
82
|
+
import statusDanger from "dso-toolkit/src/icons/status-danger.svg";
|
|
83
|
+
import statusInfo from "dso-toolkit/src/icons/status-info.svg";
|
|
84
|
+
import statusSuccess from "dso-toolkit/src/icons/status-success.svg";
|
|
85
|
+
import statusWarning from "dso-toolkit/src/icons/status-warning.svg";
|
|
86
|
+
import statusWarningInline from "dso-toolkit/src/icons/status-warning-inline.svg";
|
|
87
|
+
import statusWarningInlineNegative from "dso-toolkit/src/icons/status-warning-inline-negative.svg";
|
|
88
|
+
import table from "dso-toolkit/src/icons/table.svg";
|
|
89
|
+
import times from "dso-toolkit/src/icons/times.svg";
|
|
90
|
+
import trash from "dso-toolkit/src/icons/trash.svg";
|
|
91
|
+
import undo from "dso-toolkit/src/icons/undo.svg";
|
|
92
|
+
import userLine from "dso-toolkit/src/icons/user-line.svg";
|
|
93
|
+
import user from "dso-toolkit/src/icons/user.svg";
|
|
94
|
+
import users from "dso-toolkit/src/icons/users.svg";
|
|
95
|
+
import water from "dso-toolkit/src/icons/water.svg";
|
|
96
|
+
import wipWip from "dso-toolkit/src/icons/wip-wip.svg";
|
|
97
97
|
const icons = [
|
|
98
98
|
{ alias: "air", svg: air },
|
|
99
99
|
{ alias: "angle-down", svg: angleDown },
|
|
@@ -2,7 +2,7 @@ import { beforeWrite, createPopper } from "@popperjs/core";
|
|
|
2
2
|
import maxSize from "popper-max-size-modifier";
|
|
3
3
|
import { h, Host } from "@stencil/core";
|
|
4
4
|
import clsx from "clsx";
|
|
5
|
-
// Keep const in sync with $tooltip-transition-duration in
|
|
5
|
+
// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
|
|
6
6
|
const transitionDuration = 150;
|
|
7
7
|
function hasOverflow(el) {
|
|
8
8
|
const style = window.getComputedStyle(el);
|
|
@@ -1324,17 +1324,17 @@ const HandleElement = ({ handleUrl, onClick, open }, children) => {
|
|
|
1324
1324
|
return (h("button", { type: "button", onClick: onClick, "aria-expanded": open ? "true" : "false" }, children));
|
|
1325
1325
|
};
|
|
1326
1326
|
|
|
1327
|
-
const Handle = ({ heading }, children) => {
|
|
1327
|
+
const Handle = ({ heading, ref }, children) => {
|
|
1328
1328
|
switch (heading) {
|
|
1329
1329
|
default:
|
|
1330
1330
|
case "h2":
|
|
1331
|
-
return h("h2", { class: "dso-section-handle" }, children);
|
|
1331
|
+
return (h("h2", { ref: ref, class: "dso-section-handle" }, children));
|
|
1332
1332
|
case "h3":
|
|
1333
|
-
return h("h3", { class: "dso-section-handle" }, children);
|
|
1333
|
+
return (h("h3", { ref: ref, class: "dso-section-handle" }, children));
|
|
1334
1334
|
case "h4":
|
|
1335
|
-
return h("h4", { class: "dso-section-handle" }, children);
|
|
1335
|
+
return (h("h4", { ref: ref, class: "dso-section-handle" }, children));
|
|
1336
1336
|
case "h5":
|
|
1337
|
-
return h("h5", { class: "dso-section-handle" }, children);
|
|
1337
|
+
return (h("h5", { ref: ref, class: "dso-section-handle" }, children));
|
|
1338
1338
|
}
|
|
1339
1339
|
};
|
|
1340
1340
|
|
|
@@ -1395,7 +1395,7 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
1395
1395
|
forceUpdate(this.host);
|
|
1396
1396
|
});
|
|
1397
1397
|
}
|
|
1398
|
-
this.
|
|
1398
|
+
this.prepareAnimationResizeObserver();
|
|
1399
1399
|
}
|
|
1400
1400
|
componentDidLoad() {
|
|
1401
1401
|
var _a, _b;
|
|
@@ -1408,15 +1408,65 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
1408
1408
|
var _a;
|
|
1409
1409
|
(_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
1410
1410
|
}
|
|
1411
|
-
/** Toggle this section
|
|
1412
|
-
|
|
1411
|
+
/** Toggle this section.
|
|
1412
|
+
* @param scrollIntoView boolean - defaults to true
|
|
1413
|
+
*/
|
|
1414
|
+
async toggleSection(scrollIntoView = true) {
|
|
1413
1415
|
var _a;
|
|
1414
|
-
|
|
1416
|
+
await ((_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host).then(async () => {
|
|
1417
|
+
if (scrollIntoView) {
|
|
1418
|
+
await this.scrollIntoViewWhenNeeded(true);
|
|
1419
|
+
}
|
|
1420
|
+
}));
|
|
1421
|
+
}
|
|
1422
|
+
/** Scroll this section into view when needed. */
|
|
1423
|
+
async scrollSectionIntoView() {
|
|
1424
|
+
await this.scrollIntoViewWhenNeeded(false);
|
|
1425
|
+
}
|
|
1426
|
+
async scrollIntoViewWhenNeeded(sectionToggled) {
|
|
1427
|
+
var _a, _b, _c;
|
|
1428
|
+
AccordionSection.scrollCandidate = undefined;
|
|
1429
|
+
const bodyClientRect = (_a = this.sectionBody) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
1430
|
+
const headingClientRect = (_b = this.sectionHeading) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
|
|
1431
|
+
if (!bodyClientRect || !headingClientRect || !this.accordionState) {
|
|
1432
|
+
return;
|
|
1433
|
+
}
|
|
1434
|
+
const waitForAnimationBeforeScrolling = (state) => {
|
|
1435
|
+
var _a;
|
|
1436
|
+
const sectionBottomOffsetTop = this.host.offsetTop + headingClientRect.height + (this.open ? (_a = this.bodyHeight) !== null && _a !== void 0 ? _a : 0 : 0);
|
|
1437
|
+
return (sectionToggled && (sectionBottomOffsetTop > document.documentElement.scrollHeight || state.allowMultipleOpen));
|
|
1438
|
+
};
|
|
1439
|
+
if (waitForAnimationBeforeScrolling(this.accordionState)) {
|
|
1440
|
+
AccordionSection.scrollCandidate = this.host;
|
|
1441
|
+
return;
|
|
1442
|
+
}
|
|
1443
|
+
// this y is relative to the top of the viewport.
|
|
1444
|
+
const sectionBottomY = headingClientRect.top + headingClientRect.height + (this.open ? (_c = this.bodyHeight) !== null && _c !== void 0 ? _c : 0 : 0);
|
|
1445
|
+
if (sectionBottomY > window.innerHeight) {
|
|
1446
|
+
const expandedAccordionHeight = sectionBottomY - headingClientRect.top;
|
|
1447
|
+
const shouldScrollToTopOfSection = expandedAccordionHeight > window.innerHeight;
|
|
1448
|
+
window.scrollTo({
|
|
1449
|
+
top: shouldScrollToTopOfSection
|
|
1450
|
+
? this.host.offsetTop
|
|
1451
|
+
: this.host.offsetTop - (window.innerHeight - expandedAccordionHeight),
|
|
1452
|
+
behavior: "smooth",
|
|
1453
|
+
});
|
|
1454
|
+
}
|
|
1455
|
+
else if (headingClientRect.top < 0) {
|
|
1456
|
+
window.scrollTo({
|
|
1457
|
+
top: this.host.offsetTop,
|
|
1458
|
+
behavior: "smooth",
|
|
1459
|
+
});
|
|
1460
|
+
}
|
|
1415
1461
|
}
|
|
1416
1462
|
async toggle(e) {
|
|
1417
1463
|
var _a;
|
|
1418
1464
|
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
1419
|
-
|
|
1465
|
+
(_a = this.accordion) === null || _a === void 0 ? void 0 : _a.toggleSection(this.host, e).then(async (isOpen) => {
|
|
1466
|
+
if (isOpen) {
|
|
1467
|
+
await this.scrollIntoViewWhenNeeded(true);
|
|
1468
|
+
}
|
|
1469
|
+
});
|
|
1420
1470
|
}
|
|
1421
1471
|
render() {
|
|
1422
1472
|
var _a;
|
|
@@ -1427,12 +1477,14 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
1427
1477
|
["dso-accordion-" + variant]: true,
|
|
1428
1478
|
"dso-nested-accordion": this.hasNestedSection,
|
|
1429
1479
|
"dso-accordion-reverse-align": reverseAlign !== null && reverseAlign !== void 0 ? reverseAlign : false,
|
|
1430
|
-
}, hidden: !variant }, h(Handle, { heading: this.heading }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
|
|
1480
|
+
}, hidden: !variant }, h(Handle, { heading: this.heading, ref: (element) => (this.sectionHeading = element) }, h(HandleElement, { handleUrl: this.handleUrl, onClick: async (event) => await this.toggle(event), open: this.open }, reverseAlign ? (h(Fragment, null, hasAddons && (h("div", { class: "dso-section-handle-addons" }, h(HandleIcon, { icon: this.icon }))), h("span", null, this.handleTitle), h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-down" }))) : (h(Fragment, null, h("dso-icon", { class: "dso-section-handle-chevron", icon: "chevron-right" }), this.state && h("span", { class: "sr-only" }, stateMap[this.state]), h("span", null, this.handleTitle), hasAddons && (h("div", { class: "dso-section-handle-addons" }, this.status && h("span", { class: "dso-status" }, this.status), h(HandleIcon, { state: this.state, icon: this.icon, attachmentCount: this.attachmentCount }))))))), h("div", { class: { "dso-section-body": true, "dso-animate-ready": !!this.animeInstance }, ref: (element) => (this.sectionBody = element), "aria-hidden": this.open ? "false" : "true" }, h("div", { class: "dso-section-body-content" }, h("slot", null)))));
|
|
1431
1481
|
}
|
|
1432
|
-
|
|
1482
|
+
prepareAnimationResizeObserver() {
|
|
1433
1483
|
this.resizeObserver = new ResizeObserver(debounce_1(([entry]) => {
|
|
1434
|
-
|
|
1435
|
-
|
|
1484
|
+
// entry.contentRect does not include padding, so we use getBoundingClientRect.
|
|
1485
|
+
const height = entry.target.getBoundingClientRect().height;
|
|
1486
|
+
if (this.bodyHeight !== height) {
|
|
1487
|
+
this.bodyHeight = height;
|
|
1436
1488
|
this.instantiateAnimation();
|
|
1437
1489
|
}
|
|
1438
1490
|
}, 150));
|
|
@@ -1445,6 +1497,12 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
1445
1497
|
duration: 260,
|
|
1446
1498
|
autoplay: false,
|
|
1447
1499
|
direction: "normal",
|
|
1500
|
+
changeComplete: async () => {
|
|
1501
|
+
if (AccordionSection.scrollCandidate === this.host) {
|
|
1502
|
+
AccordionSection.scrollCandidate = undefined;
|
|
1503
|
+
await this.scrollSectionIntoView();
|
|
1504
|
+
}
|
|
1505
|
+
},
|
|
1448
1506
|
begin: () => {
|
|
1449
1507
|
if (this.sectionBody) {
|
|
1450
1508
|
if (this.open) {
|
|
@@ -1505,7 +1563,8 @@ const AccordionSection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
1505
1563
|
"status": [1],
|
|
1506
1564
|
"open": [1540],
|
|
1507
1565
|
"hasNestedSection": [32],
|
|
1508
|
-
"toggleSection": [64]
|
|
1566
|
+
"toggleSection": [64],
|
|
1567
|
+
"scrollSectionIntoView": [64]
|
|
1509
1568
|
}]);
|
|
1510
1569
|
function isAccordion(element) {
|
|
1511
1570
|
return element instanceof HTMLElement && "getState" in element;
|
|
@@ -205,6 +205,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
205
205
|
const { state } = createStore({
|
|
206
206
|
variant: this.variant || "default",
|
|
207
207
|
reverseAlign: this.reverseAlign,
|
|
208
|
+
allowMultipleOpen: this.allowMultipleOpen,
|
|
208
209
|
});
|
|
209
210
|
this.accordionState = state;
|
|
210
211
|
}
|
|
@@ -214,6 +215,9 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
214
215
|
updateReverseAlign(reverseAlign) {
|
|
215
216
|
this.accordionState.reverseAlign = reverseAlign;
|
|
216
217
|
}
|
|
218
|
+
updateAllowMultipleOpen(allowMultipleOpen) {
|
|
219
|
+
this.accordionState.allowMultipleOpen = allowMultipleOpen;
|
|
220
|
+
}
|
|
217
221
|
watchAllowMultiple(allowMultipleOpen) {
|
|
218
222
|
if (!allowMultipleOpen) {
|
|
219
223
|
const openSections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));
|
|
@@ -225,7 +229,10 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
225
229
|
async getState() {
|
|
226
230
|
return this.accordionState;
|
|
227
231
|
}
|
|
228
|
-
/** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section
|
|
232
|
+
/** Toggle a section. Pass the `<dso-accordion-section>` element or the index of the section.\
|
|
233
|
+
* returns `undefined` when no section is toggled.\
|
|
234
|
+
* returns `true` when the section is opened and `false` when the section is closed.
|
|
235
|
+
*/
|
|
229
236
|
async toggleSection(sectionElement, event) {
|
|
230
237
|
const sections = Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));
|
|
231
238
|
if (typeof sectionElement === "number") {
|
|
@@ -238,16 +245,17 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
238
245
|
if (this.allowMultipleOpen) {
|
|
239
246
|
this.controlOpenAttribute(sectionElement, !sectionIsOpen);
|
|
240
247
|
this.emitToggleEvent(sectionElement, sections, event);
|
|
241
|
-
return;
|
|
248
|
+
return !sectionIsOpen;
|
|
242
249
|
}
|
|
243
250
|
if (sectionIsOpen) {
|
|
244
251
|
this.controlOpenAttribute(sectionElement, false);
|
|
245
252
|
this.emitToggleEvent(sectionElement, sections, event);
|
|
246
|
-
return;
|
|
253
|
+
return false;
|
|
247
254
|
}
|
|
248
255
|
await this.closeOpenSections();
|
|
249
256
|
this.controlOpenAttribute(sectionElement, true);
|
|
250
257
|
this.emitToggleEvent(sectionElement, sections, event);
|
|
258
|
+
return true;
|
|
251
259
|
}
|
|
252
260
|
/** Closes all sections belonging to this accordion. */
|
|
253
261
|
async closeOpenSections() {
|
|
@@ -255,6 +263,18 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
255
263
|
const openSections = sections.filter((s) => this.isSectionOpen(s));
|
|
256
264
|
openSections.forEach((section) => this.controlOpenAttribute(section, false));
|
|
257
265
|
}
|
|
266
|
+
// These checks are needed for a React timing issue.
|
|
267
|
+
componentWillLoad() {
|
|
268
|
+
if (this.accordionState.variant !== this.variant) {
|
|
269
|
+
this.accordionState.variant = this.variant || "default";
|
|
270
|
+
}
|
|
271
|
+
if (this.accordionState.reverseAlign !== this.reverseAlign) {
|
|
272
|
+
this.accordionState.reverseAlign = this.reverseAlign;
|
|
273
|
+
}
|
|
274
|
+
if (this.accordionState.allowMultipleOpen !== this.allowMultipleOpen) {
|
|
275
|
+
this.accordionState.allowMultipleOpen = this.allowMultipleOpen;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
258
278
|
render() {
|
|
259
279
|
return (h(Host, { class: {
|
|
260
280
|
"dso-accordion": true,
|
|
@@ -285,7 +305,7 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
|
285
305
|
static get watchers() { return {
|
|
286
306
|
"variant": ["updateVariant"],
|
|
287
307
|
"reverseAlign": ["updateReverseAlign"],
|
|
288
|
-
"allowMultipleOpen": ["watchAllowMultiple"]
|
|
308
|
+
"allowMultipleOpen": ["updateAllowMultipleOpen", "watchAllowMultiple"]
|
|
289
309
|
}; }
|
|
290
310
|
static get style() { return accordionCss; }
|
|
291
311
|
}, [1, "dso-accordion", {
|
|
@@ -1835,7 +1835,7 @@ var maxSize = {
|
|
|
1835
1835
|
|
|
1836
1836
|
const tooltipCss = ":host(.hidden){visibility:hidden}:host-context(dso-toggletip){color:red !important}:host-context(dso-toggletip) *[data-popper-placement=top] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=right] .tooltip-arrow{margin-top:0}:host-context(dso-toggletip) *[data-popper-placement=bottom] .tooltip-arrow{margin-left:3px}:host-context(dso-toggletip) *[data-popper-placement=left]{margin-right:-8px !important}:host-context(dso-toggletip) *[data-popper-placement=left] .tooltip-arrow{margin-top:0}*,*::after,*::before{box-sizing:border-box}.tooltip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;display:block;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));font-size:14px;opacity:0;position:absolute;transition:opacity 0.15s linear;z-index:410}.tooltip.in{opacity:1}.tooltip .tooltip-inner{background-color:#fff;border-radius:4px;color:#191919;display:inline-block;font-size:1rem;max-width:640px;padding:8px 16px;position:relative}.tooltip .tooltip-inner.dso-small{max-width:320px}.tooltip .tooltip-arrow{border-color:transparent;border-style:solid;height:0;width:0}.tooltip[data-popper-placement=top]{margin-top:-3px;padding:6px 0}.tooltip[data-popper-placement=top] .tooltip-arrow{border-top-color:#fff;border-width:6px 6px 0;bottom:0}.tooltip[data-popper-placement=top] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=right]{margin-left:3px;padding:0 6px}.tooltip[data-popper-placement=right] .tooltip-arrow{border-right-color:#fff;border-width:6px 6px 6px 0;left:0}.tooltip[data-popper-placement=right] .tooltip-arrow{margin-top:-3px}.tooltip[data-popper-placement=bottom]{margin-top:3px;padding:6px 0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{border-bottom-color:#fff;border-width:0 6px 6px;top:0}.tooltip[data-popper-placement=bottom] .tooltip-arrow{margin-left:-3px}.tooltip[data-popper-placement=left]{margin-left:-3px;padding:0 6px}.tooltip[data-popper-placement=left] .tooltip-arrow{border-left-color:#fff;border-width:6px 0 6px 6px;right:0}.tooltip[data-popper-placement=left] .tooltip-arrow{margin-top:-3px}";
|
|
1837
1837
|
|
|
1838
|
-
// Keep const in sync with $tooltip-transition-duration in
|
|
1838
|
+
// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
|
|
1839
1839
|
const transitionDuration = 150;
|
|
1840
1840
|
function hasOverflow(el) {
|
|
1841
1841
|
const style = window.getComputedStyle(el);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-8f35c8f8.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-c96acfeb",[[1,"dso-icon",{icon:[1]}]]],["p-746dc38a",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-76a1428a",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-35687d62",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-78ee23c5",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32]}]]],["p-52bc72d0",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],truncatedContent:[32],labelText:[32]}]]],["p-46acc09f",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-ff72ee4c",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-8f35c8f8.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-c96acfeb",[[1,"dso-icon",{icon:[1]}]]],["p-746dc38a",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-76a1428a",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-35687d62",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-78ee23c5",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32]}]]],["p-52bc72d0",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],truncatedContent:[32],labelText:[32]}]]],["p-46acc09f",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-ff72ee4c",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-d8ba8db6",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-8aa39e7f",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-2fa96ac0",[[1,"dso-attachments-counter",{count:[2]}]]],["p-655eff47",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]]]]],["p-a8cb2eae",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-daee3252",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-d7b2adc3",[[1,"dso-image-overlay",{active:[32],focused:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-c9ad94a6",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32]}]]],["p-7f8be9bc",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],ariaId:[32],hasFooter:[32]}]]],["p-8e9f6355",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-80575700",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-bcd19ae7",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],closeOpenSections:[64]}]]],["p-daba2d98",[[1,"dso-badge",{status:[1]}]]],["p-19323600",[[1,"dso-banner",{status:[513]}]]],["p-a608d3bd",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"]}]]],["p-c846d208",[[1,"dso-card-container",{mode:[513]}]]],["p-c7ec6e6e",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-d31805a9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-a4086aa3",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-672c8323",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],checkable:[4]}]]],["p-ec25868b",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-a9baa631",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-06b4f78d",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-427f6d90",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-04ffcc93",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{g as t,f as e,r as s,c as n,h as o,H as i,a as r}from"./p-8f35c8f8.js";const a=t=>!("isConnected"in t)||t.isConnected,c=(()=>{let t;return(...e)=>{t&&clearTimeout(t),t=setTimeout((()=>{t=0,(t=>{for(let e of t.keys())t.set(e,t.get(e).filter(a))})(...e)}),2e3)}})(),l=t=>"function"==typeof t?t():t,h=class{constructor(o){s(this,o),this.dsoToggleSection=n(this,"dsoToggleSection",7),this.variant="default",this.reverseAlign=!1,this.allowMultipleOpen=!1;const{state:i}=((s,n)=>{const o=((t,e=((t,e)=>t!==e))=>{const s=l(t);let n=new Map(Object.entries(null!=s?s:{}));const o={dispose:[],get:[],set:[],reset:[]},i=()=>{var e;n=new Map(Object.entries(null!==(e=l(t))&&void 0!==e?e:{})),o.reset.forEach((t=>t()))},r=t=>(o.get.forEach((e=>e(t))),n.get(t)),a=(t,s)=>{const i=n.get(t);e(s,i,t)&&(n.set(t,s),o.set.forEach((e=>e(t,s,i))))},c="undefined"==typeof Proxy?{}:new Proxy(s,{get:(t,e)=>r(e),ownKeys:()=>Array.from(n.keys()),getOwnPropertyDescriptor:()=>({enumerable:!0,configurable:!0}),has:(t,e)=>n.has(e),set:(t,e,s)=>(a(e,s),!0)}),h=(t,e)=>(o[t].push(e),()=>{((t,e)=>{const s=t.indexOf(e);s>=0&&(t[s]=t[t.length-1],t.length--)})(o[t],e)});return{state:c,get:r,set:a,on:h,onChange:(e,s)=>{const n=h("set",((t,n)=>{t===e&&s(n)})),o=h("reset",(()=>s(l(t)[e])));return()=>{n(),o()}},use:(...t)=>{const e=t.reduce(((t,e)=>(e.set&&t.push(h("set",e.set)),e.get&&t.push(h("get",e.get)),e.reset&&t.push(h("reset",e.reset)),e.dispose&&t.push(h("dispose",e.dispose)),t)),[]);return()=>e.forEach((t=>t()))},dispose:()=>{o.dispose.forEach((t=>t())),i()},reset:i,forceUpdate:t=>{const e=n.get(t);o.set.forEach((s=>s(t,e,e)))}}})(s,n);return o.use((()=>{if("function"!=typeof t)return{};const s=new Map;return{dispose:()=>s.clear(),get:e=>{const n=t();n&&((t,e,s)=>{const n=t.get(e);n?n.includes(s)||n.push(s):t.set(e,[s])})(s,e,n)},set:t=>{const n=s.get(t);n&&s.set(t,n.filter(e)),c(s)},reset:()=>{s.forEach((t=>t.forEach(e))),c(s)}}})()),o})({variant:this.variant||"default",reverseAlign:this.reverseAlign,allowMultipleOpen:this.allowMultipleOpen});this.accordionState=i}updateVariant(t="default"){this.accordionState.variant=t||"default"}updateReverseAlign(t){this.accordionState.reverseAlign=t}updateAllowMultipleOpen(t){this.accordionState.allowMultipleOpen=t}watchAllowMultiple(t){if(!t){const t=Array.from(this.host.querySelectorAll(":scope > dso-accordion-section[open]"));t.shift(),t.forEach((t=>this.controlOpenAttribute(t,!1)))}}async getState(){return this.accordionState}async toggleSection(t,e){const s=Array.from(this.host.querySelectorAll(":scope > dso-accordion-section"));if("number"==typeof t&&(t=s[t]),!(t instanceof HTMLElement&&s.includes(t)))return;const n=this.isSectionOpen(t);return this.allowMultipleOpen?(this.controlOpenAttribute(t,!n),this.emitToggleEvent(t,s,e),!n):n?(this.controlOpenAttribute(t,!1),this.emitToggleEvent(t,s,e),!1):(await this.closeOpenSections(),this.controlOpenAttribute(t,!0),this.emitToggleEvent(t,s,e),!0)}async closeOpenSections(){Array.from(this.host.querySelectorAll(":scope > dso-accordion-section")).filter((t=>this.isSectionOpen(t))).forEach((t=>this.controlOpenAttribute(t,!1)))}componentWillLoad(){this.accordionState.variant!==this.variant&&(this.accordionState.variant=this.variant||"default"),this.accordionState.reverseAlign!==this.reverseAlign&&(this.accordionState.reverseAlign=this.reverseAlign),this.accordionState.allowMultipleOpen!==this.allowMultipleOpen&&(this.accordionState.allowMultipleOpen=this.allowMultipleOpen)}render(){return o(i,{class:{"dso-accordion":!0}},o("slot",null))}emitToggleEvent(t,e,s){this.dsoToggleSection.emit({originalEvent:s,section:{element:t,open:this.isSectionOpen(t)},sections:e})}isSectionOpen(t){return"string"==typeof t.getAttribute("open")}controlOpenAttribute(t,e){e?t.setAttribute("open",""):t.removeAttribute("open")}get host(){return r(this)}static get watchers(){return{variant:["updateVariant"],reverseAlign:["updateReverseAlign"],allowMultipleOpen:["updateAllowMultipleOpen","watchAllowMultiple"]}}};h.style=":host{display:block}*,*::after,*::before{box-sizing:border-box}";export{h as dso_accordion}
|