@dso-toolkit/core 59.0.0 → 59.0.1-ghi-2408.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 +16 -7
- package/dist/cjs/dso-accordion-section.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js +4 -2
- package/dist/cjs/dso-dropdown-menu.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-expandable.cjs.entry.js +4 -0
- package/dist/cjs/dso-expandable.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-header.cjs.entry.js +1 -1
- package/dist/cjs/dso-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dso-toolkit.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/accordion/components/accordion-section.interfaces.js.map +1 -1
- package/dist/collection/components/accordion/components/accordion-section.js +54 -8
- package/dist/collection/components/accordion/components/accordion-section.js.map +1 -1
- package/dist/collection/components/annotation-button/annotation-button.js +1 -1
- package/dist/collection/components/annotation-output/annotation-output.js +1 -1
- package/dist/collection/components/dropdown-menu/dropdown-menu.js +29 -2
- package/dist/collection/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/collection/components/expandable/expandable.js +26 -2
- package/dist/collection/components/expandable/expandable.js.map +1 -1
- package/dist/collection/components/header/header.js +1 -1
- package/dist/collection/components/header/header.js.map +1 -1
- package/dist/components/dropdown-menu.js +5 -2
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/dso-accordion-section.js +17 -8
- package/dist/components/dso-accordion-section.js.map +1 -1
- package/dist/components/dso-header.js +1 -1
- package/dist/components/dso-header.js.map +1 -1
- package/dist/components/expandable.js +4 -0
- package/dist/components/expandable.js.map +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
- package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
- package/dist/dso-toolkit/{p-298453a9.entry.js → p-0e876e64.entry.js} +2 -2
- package/dist/dso-toolkit/p-0e876e64.entry.js.map +1 -0
- package/dist/dso-toolkit/p-4e2407bf.entry.js +2 -0
- package/dist/dso-toolkit/p-4e2407bf.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-dc6e37dd.entry.js → p-51cfeed4.entry.js} +2 -2
- package/dist/dso-toolkit/p-51cfeed4.entry.js.map +1 -0
- package/dist/dso-toolkit/{p-a3dc08f4.entry.js → p-6658d684.entry.js} +2 -2
- package/dist/dso-toolkit/p-6658d684.entry.js.map +1 -0
- package/dist/esm/dso-accordion-section.entry.js +16 -7
- package/dist/esm/dso-accordion-section.entry.js.map +1 -1
- package/dist/esm/dso-dropdown-menu.entry.js +4 -2
- package/dist/esm/dso-dropdown-menu.entry.js.map +1 -1
- package/dist/esm/dso-expandable.entry.js +4 -0
- package/dist/esm/dso-expandable.entry.js.map +1 -1
- package/dist/esm/dso-header.entry.js +1 -1
- package/dist/esm/dso-header.entry.js.map +1 -1
- package/dist/esm/dso-toolkit.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/accordion/components/accordion-section.d.ts +10 -1
- package/dist/types/components/accordion/components/accordion-section.interfaces.d.ts +11 -1
- package/dist/types/components/dropdown-menu/dropdown-menu.d.ts +7 -0
- package/dist/types/components/expandable/expandable.d.ts +7 -1
- package/dist/types/components.d.ts +31 -5
- package/package.json +2 -2
- package/dist/dso-toolkit/p-298453a9.entry.js.map +0 -1
- package/dist/dso-toolkit/p-41066f6f.entry.js +0 -2
- package/dist/dso-toolkit/p-41066f6f.entry.js.map +0 -1
- package/dist/dso-toolkit/p-a3dc08f4.entry.js.map +0 -1
- package/dist/dso-toolkit/p-dc6e37dd.entry.js.map +0 -1
- package/dist/esm/polyfills/core-js.js +0 -11
- package/dist/esm/polyfills/dom.js +0 -79
- package/dist/esm/polyfills/es5-html-element.js +0 -1
- package/dist/esm/polyfills/index.js +0 -34
- package/dist/esm/polyfills/system.js +0 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dso-header.entry.js","mappings":"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","names":["debounce"],"sources":["src/components/header/header.scss?tag=dso-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-top: units.$u1;\r\n padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0 units.$u3;\r\n padding-bottom: units.$u2;\r\n padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n .dso-tertiary {\r\n cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n vertical-align: text-bottom;\r\n }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n a {\r\n @include anchor.clean();\r\n\r\n color: colors.$grasgroen;\r\n font-weight: 600;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n }\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n margin-left: auto;\r\n\r\n .profile {\r\n a {\r\n margin-left: units.$u1;\r\n }\r\n\r\n + .logout {\r\n border-left: 3px solid colors.$grijs-20;\r\n margin-left: units.$u2;\r\n padding-left: units.$u2;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n\r\n .dso-dropdown-options {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: flex-end;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-right: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n width: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n width: 100%;\r\n }\r\n\r\n ul li {\r\n a,\r\n button {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-left: auto;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n margin-top: units.$u1 * 3.5;\r\n }\r\n\r\n .dso-dropdown-options {\r\n right: 0;\r\n top: 100%;\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n padding-left: 0;\r\n\r\n > li {\r\n margin-bottom: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-bottom: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n left: units.$ru2 * -1 !important;\r\n top: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: center;\r\n color: colors.$bosgroen;\r\n padding-right: units.$u4;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-left: auto;\r\n\r\n dso-icon {\r\n height: 1em;\r\n margin-right: units.$u1;\r\n position: relative;\r\n top: -2px;\r\n width: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /**\r\n * The main menu items.\r\n */\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /**\r\n * Either have the dropdown menu appear automatically or always.\r\n */\r\n @Prop()\r\n useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n /**\r\n * Used to show the login/logout option. 'none' renders nothing.\r\n */\r\n @Prop()\r\n authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n /**\r\n * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n */\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /**\r\n * The URL to open when the user activates \"logout\".\r\n */\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /**\r\n * The name to show when the user is logged in.\r\n */\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /**\r\n * The URL to open when the user activates the profile url.\r\n */\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /**\r\n * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n */\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /**\r\n * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n */\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n hasSubLogo = false;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /**\r\n * Emitted when something in the header is selected.\r\n *\r\n * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" | \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement | undefined;\r\n\r\n private nav: HTMLUListElement | undefined;\r\n\r\n componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"*[slot = 'sub-logo']\") !== null;\r\n }\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper || !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <span class=\"profile-label\">Welkom:</span>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu dropdown-align=\"left\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dso-header.entry.js","mappings":"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","names":["debounce"],"sources":["src/components/header/header.scss?tag=dso-header&encapsulation=scoped","src/components/header/header.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@mixin nav-item-border($color) {\r\n border-bottom: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n margin-top: units.$u1;\r\n padding: units.$u2 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.dso-header {\r\n border-bottom: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n align-items: center;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n &.use-drop-down {\r\n flex-wrap: nowrap;\r\n }\r\n }\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0 units.$u3;\r\n padding-bottom: units.$u2;\r\n padding-top: units.$u2;\r\n}\r\n\r\n.login,\r\n.logout {\r\n .dso-tertiary {\r\n cursor: pointer;\r\n font-family: typography.$font-family-base;\r\n font-weight: 600;\r\n vertical-align: text-bottom;\r\n }\r\n}\r\n\r\n.profile,\r\n.logout,\r\n.login {\r\n a {\r\n @include anchor.clean();\r\n\r\n color: colors.$grasgroen;\r\n font-weight: 600;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n }\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n margin-left: auto;\r\n\r\n .profile {\r\n a {\r\n margin-left: units.$u1;\r\n }\r\n\r\n + .logout {\r\n border-left: 3px solid colors.$grijs-20;\r\n margin-left: units.$u2;\r\n padding-left: units.$u2;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n\r\n .dso-dropdown-options {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n}\r\n\r\ndso-dropdown-menu {\r\n button {\r\n align-items: flex-end;\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n padding-right: units.$u4;\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n width: 375px;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n width: 100%;\r\n }\r\n\r\n ul li {\r\n a,\r\n button {\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n padding: units.$u2;\r\n white-space: pre-wrap;\r\n\r\n &:focus {\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-top: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-left: auto;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n margin-top: units.$u1 * 3.5;\r\n }\r\n\r\n .dso-dropdown-options {\r\n right: 0;\r\n top: 100%;\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-bottom: 0;\r\n margin-top: 0;\r\n padding-left: 0;\r\n\r\n > li {\r\n margin-bottom: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-bottom: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include anchor.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n left: units.$ru2 * -1 !important;\r\n top: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: center;\r\n color: colors.$bosgroen;\r\n padding-right: units.$u4;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-left: units.$u1;\r\n position: absolute;\r\n right: 0px;\r\n top: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .menu-user-home {\r\n margin-left: auto;\r\n\r\n dso-icon {\r\n height: 1em;\r\n margin-right: units.$u1;\r\n position: relative;\r\n top: -2px;\r\n width: 1.2em;\r\n }\r\n }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Fragment, h, Prop, State, Watch } from \"@stencil/core\";\r\n\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { HeaderMenuItem, HeaderNavigationType, HeaderEvent } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n scoped: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string }\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /**\r\n * The main menu items.\r\n */\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /**\r\n * Either have the dropdown menu appear automatically or always.\r\n */\r\n @Prop()\r\n useDropDownMenu: \"always\" | \"auto\" = \"auto\";\r\n\r\n /**\r\n * Used to show the login/logout option. 'none' renders nothing.\r\n */\r\n @Prop()\r\n authStatus: \"none\" | \"loggedIn\" | \"loggedOut\" = \"none\";\r\n\r\n /**\r\n * When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor.\r\n */\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /**\r\n * The URL to open when the user activates \"logout\".\r\n */\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /**\r\n * The name to show when the user is logged in.\r\n */\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /**\r\n * The URL to open when the user activates the profile url.\r\n */\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /**\r\n * The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n */\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /**\r\n * Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n */\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n hasSubLogo = false;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /**\r\n * Emitted when something in the header is selected.\r\n *\r\n * `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" | \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement | undefined;\r\n\r\n private nav: HTMLUListElement | undefined;\r\n\r\n componentWillLoad() {\r\n this.hasSubLogo = this.host.querySelector(\"*[slot = 'sub-logo']\") !== null;\r\n }\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper || !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n [\"has-sub-logo\"]: this.hasSubLogo,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <div class=\"logo\">\r\n <slot name=\"logo\" />\r\n </div>\r\n <div class=\"sub-logo\">\r\n <slot name=\"sub-logo\" />\r\n </div>\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n strategy=\"absolute\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Menu</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <span class=\"profile-label\">Welkom:</span>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n Inloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n Inloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n Uitloggen\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n Uitloggen\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu placement=\"bottom\">\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>Meer</span>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n Mijn Omgevingsloket\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/esm/dso-toolkit.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchBrowser = () => {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
patchBrowser().then(options => {
|
|
17
|
-
return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[
|
|
17
|
+
return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"hover":[32]}]]],["dso-header",[[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"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[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"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"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"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32],"tabView":[32],"activeTab":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[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]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
|
|
20
20
|
//# sourceMappingURL=dso-toolkit.js.map
|
package/dist/esm/loader.js
CHANGED
|
@@ -3,7 +3,7 @@ export { s as setNonce } from './index-f82ed648.js';
|
|
|
3
3
|
|
|
4
4
|
const defineCustomElements = (win, options) => {
|
|
5
5
|
if (typeof window === 'undefined') return undefined;
|
|
6
|
-
return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[
|
|
6
|
+
return bootstrapLazy([["dsot-document-component-demo",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]}]]],["dso-map-base-layers",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["dso-map-overlays",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["dso-toggletip",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-accordion-section",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"hover":[32]}]]],["dso-header",[[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"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]}]]],["dso-map-controls",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"ariaId":[32],"hasFooter":[32]}]]],["dso-pagination",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["dso-tree-view",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["dso-action-list-item",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["dso-attachments-counter",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest",[[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"]]]]],["dso-date-picker",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"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"]]]]],["dso-helpcenter-panel",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-table",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-accordion",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]}]]],["dso-action-list",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["dso-banner",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["dso-card",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4],"imageShape":[513,"image-shape"]}]]],["dso-card-container",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-progress-bar",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-viewer-grid",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32],"tabView":[32],"activeTab":[32]}]]],["dso-dropdown-menu",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]}]]],["dso-progress-indicator",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-scrollable",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["dso-expandable",[[1,"dso-expandable",{"open":[516],"enableAnimation":[4,"enable-animation"],"minimumHeight":[2,"minimum-height"],"animationReady":[32]}]]],["dso-responsive-element",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-info-button",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-tooltip",[[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]}]]],["dso-icon",[[1,"dso-icon",{"icon":[1]}]]],["dso-info_2",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["dso-alert_5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]]],[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}],[0,"dso-annotation-button",{"identifier":[1],"open":[4]}],[1,"dso-badge",{"status":[1]}],[1,"dso-ozon-content",{"content":[1],"inline":[516],"state":[32]}]]],["dso-annotation-output_3",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[4,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513]}],[4,"dso-annotation-output",{"identifier":[513],"annotationPrefix":[513,"annotation-prefix"],"open":[516]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]], options);
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export { defineCustomElements };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentInterface, EventEmitter } from "../../../stencil-public-runtime";
|
|
2
|
-
import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./accordion-section.interfaces";
|
|
2
|
+
import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionAnimationStartEvent } from "./accordion-section.interfaces";
|
|
3
3
|
export declare class AccordionSection implements ComponentInterface {
|
|
4
4
|
private accordionState?;
|
|
5
5
|
private sectionBody?;
|
|
@@ -37,18 +37,27 @@ export declare class AccordionSection implements ComponentInterface {
|
|
|
37
37
|
* Set the Accordion Section open.
|
|
38
38
|
*/
|
|
39
39
|
open: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Set when this Accordion Section contains or will contain an Accordion.
|
|
42
|
+
*/
|
|
40
43
|
hasNestedAccordion: boolean;
|
|
41
44
|
hover: boolean;
|
|
45
|
+
get containsNestedAccordion(): boolean;
|
|
42
46
|
componentWillLoad(): void;
|
|
43
47
|
get isNeutral(): boolean;
|
|
44
48
|
private scrollIntoView;
|
|
45
49
|
private get accordion();
|
|
46
50
|
private handleClick;
|
|
51
|
+
private handleExpandableAnimationStart;
|
|
47
52
|
private handleExpandableAnimationEnd;
|
|
48
53
|
/**
|
|
49
54
|
* Emitted when the user activates the toggle button.
|
|
50
55
|
*/
|
|
51
56
|
dsoToggleClick: EventEmitter<AccordionSectionToggleClickEvent>;
|
|
57
|
+
/**
|
|
58
|
+
* Event emitted when the Accordion Section starts its toggle animation.
|
|
59
|
+
*/
|
|
60
|
+
dsoAnimationStart: EventEmitter<AccordionSectionAnimationStartEvent>;
|
|
52
61
|
/**
|
|
53
62
|
* Event emitted when the Accordion Section completes its toggle animation.
|
|
54
63
|
*/
|
|
@@ -13,11 +13,21 @@ export interface AccordionSectionToggleClickEvent {
|
|
|
13
13
|
*/
|
|
14
14
|
open: boolean;
|
|
15
15
|
}
|
|
16
|
+
export interface AccordionSectionAnimationStartEvent {
|
|
17
|
+
/**
|
|
18
|
+
* Helper function to scroll the Accordion Section into view.
|
|
19
|
+
*/
|
|
20
|
+
scrollIntoView(behavior?: ScrollBehavior): void;
|
|
21
|
+
/**
|
|
22
|
+
* Whether or not the Accordion opening or closing.
|
|
23
|
+
*/
|
|
24
|
+
animation: "opening" | "closing";
|
|
25
|
+
}
|
|
16
26
|
export interface AccordionSectionAnimationEndEvent {
|
|
17
27
|
/**
|
|
18
28
|
* Helper function to scroll the Accordion Section into view.
|
|
19
29
|
*/
|
|
20
|
-
scrollIntoView(): void;
|
|
30
|
+
scrollIntoView(behavior?: ScrollBehavior): void;
|
|
21
31
|
/**
|
|
22
32
|
* The state of the Accordion Section after animation.
|
|
23
33
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Placement } from "@popperjs/core";
|
|
1
2
|
import { FocusableElement } from "tabbable";
|
|
2
3
|
export declare class DropdownMenu {
|
|
3
4
|
/**
|
|
@@ -21,6 +22,12 @@ export declare class DropdownMenu {
|
|
|
21
22
|
* Selector for the element the dropdown options should not be overflowing.
|
|
22
23
|
*/
|
|
23
24
|
boundary?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Force placement of dropdown.
|
|
27
|
+
*
|
|
28
|
+
* This property overrides `dropdownAlign`.
|
|
29
|
+
*/
|
|
30
|
+
placement?: Placement;
|
|
24
31
|
/**
|
|
25
32
|
* Set position strategy of dropdown options
|
|
26
33
|
*/
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
+
export interface ExpandableAnimationStartEvent {
|
|
3
|
+
}
|
|
2
4
|
export interface ExpandableAnimationEndEvent {
|
|
3
5
|
bodyHeight: number | undefined;
|
|
4
6
|
}
|
|
@@ -23,7 +25,11 @@ export declare class Expandable implements ComponentInterface {
|
|
|
23
25
|
toggleOpen(): void;
|
|
24
26
|
toggleEnableAnimation(enableAnimation: boolean): void;
|
|
25
27
|
/**
|
|
26
|
-
* Fired
|
|
28
|
+
* Fired before expanding.
|
|
29
|
+
*/
|
|
30
|
+
dsoExpandableAnimationStart: EventEmitter<ExpandableAnimationStartEvent>;
|
|
31
|
+
/**
|
|
32
|
+
* Fired after expanding.
|
|
27
33
|
*/
|
|
28
34
|
dsoExpandableAnimationEnd: EventEmitter<ExpandableAnimationEndEvent>;
|
|
29
35
|
componentDidLoad(): void;
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
|
|
8
8
|
import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
|
|
9
|
-
import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
|
|
9
|
+
import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
|
|
10
10
|
import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
|
|
11
11
|
import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
|
|
12
12
|
import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
|
|
@@ -14,7 +14,8 @@ import { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfac
|
|
|
14
14
|
import { CardContainerMode } from "./components/card-container/card-container.interfaces";
|
|
15
15
|
import { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
|
|
16
16
|
import { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
|
|
17
|
-
import {
|
|
17
|
+
import { Placement } from "@popperjs/core";
|
|
18
|
+
import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
|
|
18
19
|
import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
|
|
19
20
|
import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
|
|
20
21
|
import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
|
|
@@ -31,7 +32,7 @@ import { SlideToggleActiveEvent } from "./components/slide-toggle/slide-toggle.i
|
|
|
31
32
|
import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-view.interfaces";
|
|
32
33
|
import { MainSize, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent } from "./components/viewer-grid/viewer-grid.interfaces";
|
|
33
34
|
export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
|
|
34
|
-
export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
|
|
35
|
+
export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
|
|
35
36
|
export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
|
|
36
37
|
export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
|
|
37
38
|
export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
|
|
@@ -39,7 +40,8 @@ export { DsoCardClickedEvent, ImageShape } from "./components/card/card.interfac
|
|
|
39
40
|
export { CardContainerMode } from "./components/card-container/card-container.interfaces";
|
|
40
41
|
export { DsoDatePickerChangeEvent, DsoDatePickerDirection, DsoDatePickerFocusEvent, DsoDatePickerKeyboardEvent } from "./components/date-picker/date-picker.interfaces";
|
|
41
42
|
export { DocumentComponentOpenToggleEvent, DocumentComponentOzonContentAnchorClickEvent, DocumentComponentToggleAnnotationEvent, DocumentComponentWijzigactie } from "./components/document-component/document-component.models";
|
|
42
|
-
export {
|
|
43
|
+
export { Placement } from "@popperjs/core";
|
|
44
|
+
export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
|
|
43
45
|
export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
|
|
44
46
|
export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
|
|
45
47
|
export { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
|
|
@@ -80,6 +82,10 @@ export namespace Components {
|
|
|
80
82
|
* When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
|
|
81
83
|
*/
|
|
82
84
|
"handleUrl"?: string;
|
|
85
|
+
/**
|
|
86
|
+
* Set when this Accordion Section contains or will contain an Accordion.
|
|
87
|
+
*/
|
|
88
|
+
"hasNestedAccordion": boolean;
|
|
83
89
|
/**
|
|
84
90
|
* Which heading element to use.
|
|
85
91
|
*/
|
|
@@ -392,6 +398,10 @@ export namespace Components {
|
|
|
392
398
|
* Whether the menu is open or closed. This attribute is reflected and mutable.
|
|
393
399
|
*/
|
|
394
400
|
"open": boolean;
|
|
401
|
+
/**
|
|
402
|
+
* Force placement of dropdown. This property overrides `dropdownAlign`.
|
|
403
|
+
*/
|
|
404
|
+
"placement"?: Placement;
|
|
395
405
|
/**
|
|
396
406
|
* Set position strategy of dropdown options
|
|
397
407
|
*/
|
|
@@ -1308,6 +1318,10 @@ declare namespace LocalJSX {
|
|
|
1308
1318
|
* When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
|
|
1309
1319
|
*/
|
|
1310
1320
|
"handleUrl"?: string;
|
|
1321
|
+
/**
|
|
1322
|
+
* Set when this Accordion Section contains or will contain an Accordion.
|
|
1323
|
+
*/
|
|
1324
|
+
"hasNestedAccordion"?: boolean;
|
|
1311
1325
|
/**
|
|
1312
1326
|
* Which heading element to use.
|
|
1313
1327
|
*/
|
|
@@ -1320,6 +1334,10 @@ declare namespace LocalJSX {
|
|
|
1320
1334
|
* Event emitted when the Accordion Section completes its toggle animation.
|
|
1321
1335
|
*/
|
|
1322
1336
|
"onDsoAnimationEnd"?: (event: DsoAccordionSectionCustomEvent<AccordionSectionAnimationEndEvent>) => void;
|
|
1337
|
+
/**
|
|
1338
|
+
* Event emitted when the Accordion Section starts its toggle animation.
|
|
1339
|
+
*/
|
|
1340
|
+
"onDsoAnimationStart"?: (event: DsoAccordionSectionCustomEvent<AccordionSectionAnimationStartEvent>) => void;
|
|
1323
1341
|
/**
|
|
1324
1342
|
* Emitted when the user activates the toggle button.
|
|
1325
1343
|
*/
|
|
@@ -1672,6 +1690,10 @@ declare namespace LocalJSX {
|
|
|
1672
1690
|
* Whether the menu is open or closed. This attribute is reflected and mutable.
|
|
1673
1691
|
*/
|
|
1674
1692
|
"open"?: boolean;
|
|
1693
|
+
/**
|
|
1694
|
+
* Force placement of dropdown. This property overrides `dropdownAlign`.
|
|
1695
|
+
*/
|
|
1696
|
+
"placement"?: Placement;
|
|
1675
1697
|
/**
|
|
1676
1698
|
* Set position strategy of dropdown options
|
|
1677
1699
|
*/
|
|
@@ -1687,9 +1709,13 @@ declare namespace LocalJSX {
|
|
|
1687
1709
|
*/
|
|
1688
1710
|
"minimumHeight"?: number;
|
|
1689
1711
|
/**
|
|
1690
|
-
* Fired
|
|
1712
|
+
* Fired after expanding.
|
|
1691
1713
|
*/
|
|
1692
1714
|
"onDsoExpandableAnimationEnd"?: (event: DsoExpandableCustomEvent<ExpandableAnimationEndEvent>) => void;
|
|
1715
|
+
/**
|
|
1716
|
+
* Fired before expanding.
|
|
1717
|
+
*/
|
|
1718
|
+
"onDsoExpandableAnimationStart"?: (event: DsoExpandableCustomEvent<ExpandableAnimationStartEvent>) => void;
|
|
1693
1719
|
/**
|
|
1694
1720
|
* Set to `true` to expand the content.
|
|
1695
1721
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dso-toolkit/core",
|
|
3
|
-
"version": "59.0.0",
|
|
3
|
+
"version": "59.0.1-ghi-2408.0",
|
|
4
4
|
"description": "DSO Toolkit Web Components",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/components/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"@types/animejs": "^3.1.7",
|
|
26
26
|
"animejs": "3.2.1",
|
|
27
27
|
"clsx": "^2.0.0",
|
|
28
|
-
"dso-toolkit": "^
|
|
28
|
+
"dso-toolkit": "^25.0.0",
|
|
29
29
|
"escape-string-regexp": "^5.0.0",
|
|
30
30
|
"focus-trap": "^7.5.2",
|
|
31
31
|
"popper-max-size-modifier": "^0.2.0",
|