@dso-toolkit/core 62.12.1 → 62.14.0

package/dist/types/components/tooltip/tooltip.d.ts

@@ -1,3 +1,4 @@
+import { Placement } from "@popperjs/core";
 export declare class Tooltip {
   #private;
   /**
@@ -7,7 +8,7 @@ export declare class Tooltip {
   /**
    * Set position of tooltip relative to target
    */
-  position: "top" | "right" | "bottom" | "left";
+  position: Placement;
   /**
    * Set position strategy of tooltip
    */

package/dist/types/components.d.ts

@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 import { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
+import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.models";
 import { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 import { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 import { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -19,6 +20,7 @@ import { Placement } from "@popperjs/core";
 import { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 import { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 import { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
+import { InputRangeChangeEvent } from "./components/input-range/input-range.interfaces";
 import { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
 import { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 import { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
@@ -35,6 +37,7 @@ import { TreeViewItem, TreeViewPointerEvent } from "./components/tree-view/tree-
 import { ViewerGridActiveTabSwitchEvent, ViewerGridChangeSizeAnimationEndEvent, ViewerGridChangeSizeEvent, ViewerGridCloseOverlayEvent, ViewerGridFilterpanelApplyEvent, ViewerGridFilterpanelCancelEvent, ViewerGridMainExpandEvent, ViewerGridMainToggleEvent, ViewerGridMode, ViewerGridPanelSize, ViewerGridVdkTab, ViewerGridVrkTab } from "./components/viewer-grid/viewer-grid.interfaces";
 export { AccordionInternalState, AccordionVariant } from "./components/accordion/accordion.interfaces";
 export { AccordionHeading, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent } from "./components/accordion/components/accordion-section.interfaces";
+export { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.models";
 export { AnnotationButtonClickEvent } from "./components/annotation-button/annotation-button";
 export { AnnotationOutputCloseEvent } from "./components/annotation-output/annotation-output";
 export { Suggestion } from "./components/autosuggest/autosuggest.interfaces";
@@ -47,6 +50,7 @@ export { Placement } from "@popperjs/core";
 export { ExpandableAnimationEndEvent, ExpandableAnimationStartEvent } from "./components/expandable/expandable";
 export { HeaderEvent, HeaderMenuItem } from "./components/header/header.interfaces";
 export { InfoButtonToggleEvent } from "./components/info-button/info-button.interfaces";
+export { InputRangeChangeEvent } from "./components/input-range/input-range.interfaces";
 export { ListButtonChangeEvent, ListButtonSelectedEvent } from "./components/list-button/list-button.interfaces";
 export { BaseLayer, BaseLayerChangeEvent } from "./components/map-base-layers/map-base-layers.interfaces";
 export { MapControlsToggleEvent } from "./components/map-controls/map-controls.interfaces";
@@ -143,6 +147,20 @@ export namespace Components {
          */
         "warning": boolean;
     }
+    interface DsoAdvancedSelect {
+        /**
+          * The active option. By object reference.
+         */
+        "active"?: AdvancedSelectOption<never>;
+        /**
+          * An extra text for the active option. Only visible in the list of options.
+         */
+        "activeHint"?: string;
+        /**
+          * The options to display in the select.
+         */
+        "options": AdvancedSelectOptionOrGroup<never>[];
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -594,6 +612,36 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
     }
+    interface DsoInputRange {
+        /**
+          * The description of the range.
+         */
+        "description"?: string;
+        /**
+          * The label of the range.
+         */
+        "label"?: string;
+        /**
+          * The maximum value of the range.
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the range.
+         */
+        "min"?: number;
+        /**
+          * The step to increment the value by.
+         */
+        "step"?: number;
+        /**
+          * The unit of the range.
+         */
+        "unit": string;
+        /**
+          * The value of the range.
+         */
+        "value"?: number;
+    }
     interface DsoLabel {
         "_truncateLabel": () => Promise<void>;
         /**
@@ -900,7 +948,7 @@ export namespace Components {
         /**
           * Toggletip position.
          */
-        "position": "top" | "right" | "bottom" | "left";
+        "position": Placement;
         /**
           * Set to true for secondary Toggletip.
          */
@@ -934,7 +982,7 @@ export namespace Components {
         /**
           * Set position of tooltip relative to target
          */
-        "position": "top" | "right" | "bottom" | "left";
+        "position": Placement;
         /**
           * Defines if the tooltip has a smaller max-width
          */
@@ -1018,6 +1066,10 @@ export interface DsoAccordionSectionCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoAccordionSectionElement;
 }
+export interface DsoAdvancedSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoAdvancedSelectElement;
+}
 export interface DsoAnnotationButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoAnnotationButtonElement;
@@ -1062,6 +1114,10 @@ export interface DsoInfoButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoInfoButtonElement;
 }
+export interface DsoInputRangeCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsoInputRangeElement;
+}
 export interface DsoLabelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsoLabelElement;
@@ -1164,6 +1220,24 @@ declare global {
         prototype: HTMLDsoActionListItemElement;
         new (): HTMLDsoActionListItemElement;
     };
+    interface HTMLDsoAdvancedSelectElementEventMap {
+        "dsoChange": AdvancedSelectChangeEvent<never>;
+        "dsoRedirect": AdvancedSelectRedirectEvent;
+    }
+    interface HTMLDsoAdvancedSelectElement extends Components.DsoAdvancedSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoAdvancedSelectElementEventMap>(type: K, listener: (this: HTMLDsoAdvancedSelectElement, ev: DsoAdvancedSelectCustomEvent<HTMLDsoAdvancedSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoAdvancedSelectElementEventMap>(type: K, listener: (this: HTMLDsoAdvancedSelectElement, ev: DsoAdvancedSelectCustomEvent<HTMLDsoAdvancedSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoAdvancedSelectElement: {
+        prototype: HTMLDsoAdvancedSelectElement;
+        new (): HTMLDsoAdvancedSelectElement;
+    };
     interface HTMLDsoAlertElement extends Components.DsoAlert, HTMLStencilElement {
     }
     var HTMLDsoAlertElement: {
@@ -1426,6 +1500,23 @@ declare global {
         prototype: HTMLDsoInfoButtonElement;
         new (): HTMLDsoInfoButtonElement;
     };
+    interface HTMLDsoInputRangeElementEventMap {
+        "dsoChange": InputRangeChangeEvent;
+    }
+    interface HTMLDsoInputRangeElement extends Components.DsoInputRange, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsoInputRangeElementEventMap>(type: K, listener: (this: HTMLDsoInputRangeElement, ev: DsoInputRangeCustomEvent<HTMLDsoInputRangeElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsoInputRangeElementEventMap>(type: K, listener: (this: HTMLDsoInputRangeElement, ev: DsoInputRangeCustomEvent<HTMLDsoInputRangeElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsoInputRangeElement: {
+        prototype: HTMLDsoInputRangeElement;
+        new (): HTMLDsoInputRangeElement;
+    };
     interface HTMLDsoLabelElementEventMap {
         "dsoRemoveClick": MouseEvent;
     }
@@ -1757,6 +1848,7 @@ declare global {
         "dso-accordion-section": HTMLDsoAccordionSectionElement;
         "dso-action-list": HTMLDsoActionListElement;
         "dso-action-list-item": HTMLDsoActionListItemElement;
+        "dso-advanced-select": HTMLDsoAdvancedSelectElement;
         "dso-alert": HTMLDsoAlertElement;
         "dso-annotation-button": HTMLDsoAnnotationButtonElement;
         "dso-annotation-output": HTMLDsoAnnotationOutputElement;
@@ -1778,6 +1870,7 @@ declare global {
         "dso-image-overlay": HTMLDsoImageOverlayElement;
         "dso-info": HTMLDsoInfoElement;
         "dso-info-button": HTMLDsoInfoButtonElement;
+        "dso-input-range": HTMLDsoInputRangeElement;
         "dso-label": HTMLDsoLabelElement;
         "dso-list-button": HTMLDsoListButtonElement;
         "dso-logo": HTMLDsoLogoElement;
@@ -1891,6 +1984,28 @@ declare namespace LocalJSX {
          */
         "warning"?: boolean;
     }
+    interface DsoAdvancedSelect {
+        /**
+          * The active option. By object reference.
+         */
+        "active"?: AdvancedSelectOption<never>;
+        /**
+          * An extra text for the active option. Only visible in the list of options.
+         */
+        "activeHint"?: string;
+        /**
+          * Emitted when user selects an option
+         */
+        "onDsoChange"?: (event: DsoAdvancedSelectCustomEvent<AdvancedSelectChangeEvent<never>>) => void;
+        /**
+          * Emitted when user activates a group redirect link.
+         */
+        "onDsoRedirect"?: (event: DsoAdvancedSelectCustomEvent<AdvancedSelectRedirectEvent>) => void;
+        /**
+          * The options to display in the select.
+         */
+        "options"?: AdvancedSelectOptionOrGroup<never>[];
+    }
     interface DsoAlert {
         /**
           * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
@@ -2430,6 +2545,40 @@ declare namespace LocalJSX {
          */
         "secondary"?: boolean;
     }
+    interface DsoInputRange {
+        /**
+          * The description of the range.
+         */
+        "description"?: string;
+        /**
+          * The label of the range.
+         */
+        "label"?: string;
+        /**
+          * The maximum value of the range.
+         */
+        "max"?: number;
+        /**
+          * The minimum value of the range.
+         */
+        "min"?: number;
+        /**
+          * Emitted when the value has changed.
+         */
+        "onDsoChange"?: (event: DsoInputRangeCustomEvent<InputRangeChangeEvent>) => void;
+        /**
+          * The step to increment the value by.
+         */
+        "step"?: number;
+        /**
+          * The unit of the range.
+         */
+        "unit"?: string;
+        /**
+          * The value of the range.
+         */
+        "value"?: number;
+    }
     interface DsoLabel {
         /**
           * For compact Label
@@ -2796,7 +2945,7 @@ declare namespace LocalJSX {
         /**
           * Toggletip position.
          */
-        "position"?: "top" | "right" | "bottom" | "left";
+        "position"?: Placement;
         /**
           * Set to true for secondary Toggletip.
          */
@@ -2822,7 +2971,7 @@ declare namespace LocalJSX {
         /**
           * Set position of tooltip relative to target
          */
-        "position"?: "top" | "right" | "bottom" | "left";
+        "position"?: Placement;
         /**
           * Defines if the tooltip has a smaller max-width
          */
@@ -2955,6 +3104,7 @@ declare namespace LocalJSX {
         "dso-accordion-section": DsoAccordionSection;
         "dso-action-list": DsoActionList;
         "dso-action-list-item": DsoActionListItem;
+        "dso-advanced-select": DsoAdvancedSelect;
         "dso-alert": DsoAlert;
         "dso-annotation-button": DsoAnnotationButton;
         "dso-annotation-output": DsoAnnotationOutput;
@@ -2976,6 +3126,7 @@ declare namespace LocalJSX {
         "dso-image-overlay": DsoImageOverlay;
         "dso-info": DsoInfo;
         "dso-info-button": DsoInfoButton;
+        "dso-input-range": DsoInputRange;
         "dso-label": DsoLabel;
         "dso-list-button": DsoListButton;
         "dso-logo": DsoLogo;
@@ -3008,6 +3159,7 @@ declare module "@stencil/core" {
             "dso-accordion-section": LocalJSX.DsoAccordionSection & JSXBase.HTMLAttributes<HTMLDsoAccordionSectionElement>;
             "dso-action-list": LocalJSX.DsoActionList & JSXBase.HTMLAttributes<HTMLDsoActionListElement>;
             "dso-action-list-item": LocalJSX.DsoActionListItem & JSXBase.HTMLAttributes<HTMLDsoActionListItemElement>;
+            "dso-advanced-select": LocalJSX.DsoAdvancedSelect & JSXBase.HTMLAttributes<HTMLDsoAdvancedSelectElement>;
             "dso-alert": LocalJSX.DsoAlert & JSXBase.HTMLAttributes<HTMLDsoAlertElement>;
             "dso-annotation-button": LocalJSX.DsoAnnotationButton & JSXBase.HTMLAttributes<HTMLDsoAnnotationButtonElement>;
             "dso-annotation-output": LocalJSX.DsoAnnotationOutput & JSXBase.HTMLAttributes<HTMLDsoAnnotationOutputElement>;
@@ -3029,6 +3181,7 @@ declare module "@stencil/core" {
             "dso-image-overlay": LocalJSX.DsoImageOverlay & JSXBase.HTMLAttributes<HTMLDsoImageOverlayElement>;
             "dso-info": LocalJSX.DsoInfo & JSXBase.HTMLAttributes<HTMLDsoInfoElement>;
             "dso-info-button": LocalJSX.DsoInfoButton & JSXBase.HTMLAttributes<HTMLDsoInfoButtonElement>;
+            "dso-input-range": LocalJSX.DsoInputRange & JSXBase.HTMLAttributes<HTMLDsoInputRangeElement>;
             "dso-label": LocalJSX.DsoLabel & JSXBase.HTMLAttributes<HTMLDsoLabelElement>;
             "dso-list-button": LocalJSX.DsoListButton & JSXBase.HTMLAttributes<HTMLDsoListButtonElement>;
             "dso-logo": LocalJSX.DsoLogo & JSXBase.HTMLAttributes<HTMLDsoLogoElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "62.12.1",
+  "version": "62.14.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -25,7 +25,7 @@
     "@types/animejs": "^3.1.12",
     "animejs": "3.2.1",
     "clsx": "^2.0.0",
-    "dso-toolkit": "^62.12.1",
+    "dso-toolkit": "^62.14.0",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^7.5.4",
     "popper-max-size-modifier": "^0.2.0",

package/dist/dso-toolkit/p-1180ebe3.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as r,a as s}from"./p-4592810d.js";import{c as i}from"./p-c87b4d11.js";import{d as e}from"./p-94f26620.js";const n=':host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;max-height:inherit;min-height:inherit;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;max-height:inherit;min-height:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:"";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%;pointer-events:none}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}';const a=new ResizeObserver(e((o=>o.forEach((o=>{var t;return(t=l(o))===null||t===void 0?void 0:t._setScrollState()}))),50));function l({target:o}){if(o.parentNode instanceof ShadowRoot&&c(o.parentNode.host)){return o.parentNode.host}if(o.parentElement&&c(o.parentElement)){return o.parentElement}return undefined}function c(o){return o.tagName==="DSO-SCROLLABLE"}const d=class{constructor(r){o(this,r);this.dsoScrollEnd=t(this,"dsoScrollEnd",7);this.mutationObserver=new MutationObserver((o=>o.forEach((({target:o})=>{var t;const r=(t=o.parentElement)===null||t===void 0?void 0:t.closest("dso-scrollable");if(r!==this.host){return}this._setScrollState()}))));this.scrollPosition="noScroll"}async _setScrollState(){const o=this.getScrollPosition();if(this.scrollPosition!==o){this.scrollPosition=o;if(this.scrollPosition==="top"||this.scrollPosition==="bottom"){this.dsoScrollEnd.emit({scrollEnd:this.scrollPosition})}}}get slottedElements(){return Array.from(this.host.children)}getScrollPosition(){if(!this.scrollContainerDiv){return"noScroll"}const{scrollHeight:o,clientHeight:t,scrollTop:r}=this.scrollContainerDiv;if(o<=t){return"noScroll"}if(r===0){return"top"}if(o-r-t<1){return"bottom"}if(r>0){return"middle"}return"noScroll"}componentDidLoad(){this.mutationObserver.observe(this.host,{characterData:true,attributes:false,childList:false,subtree:true});if(this.shadowContainerDiv instanceof HTMLDivElement){a.observe(this.shadowContainerDiv)}this.slottedElements.forEach((o=>a.observe(o)))}disconnectedCallback(){if(this.shadowContainerDiv instanceof HTMLDivElement){a.unobserve(this.shadowContainerDiv)}this.mutationObserver.disconnect();this.slottedElements.forEach((o=>a.unobserve(o)))}render(){return r("div",{ref:o=>this.shadowContainerDiv=o,class:"dso-shadow-container"},r("div",{ref:o=>this.scrollContainerDiv=o,class:i("dso-scroll-container",{[`dso-scroll-${this.scrollPosition}`]:this.scrollPosition!=="noScroll"}),onScroll:()=>this._setScrollState()},r("slot",null)))}get host(){return s(this)}};d.style=n;export{d as dso_scrollable};
-//# sourceMappingURL=p-1180ebe3.entry.js.map

package/dist/dso-toolkit/p-1180ebe3.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scrollableCss","resizeObserver","ResizeObserver","debounce","entries","forEach","entry","_a","getScrollableComponentFromResizeObserverEntry","_setScrollState","target","parentNode","ShadowRoot","isDsoScrollableComponent","host","parentElement","undefined","element","tagName","Scrollable","this","mutationObserver","MutationObserver","closest","scrollPosition","getScrollPosition","dsoScrollEnd","emit","scrollEnd","slottedElements","Array","from","children","scrollContainerDiv","scrollHeight","clientHeight","scrollTop","componentDidLoad","observe","characterData","attributes","childList","subtree","shadowContainerDiv","HTMLDivElement","disconnectedCallback","unobserve","disconnect","render","h","ref","el","class","clsx","onScroll"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  height: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  height: 100%;\r\n  max-height: inherit;\r\n  min-height: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    height: 100%;\r\n    max-height: inherit;\r\n    min-height: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      left: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      width: 100%;\r\n      pointer-events: none;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      top: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      bottom: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"iIAAA,MAAMA,EAAgB,ksCCMtB,MAAMC,EAAiB,IAAIC,eACzBC,GACGC,GACCA,EAAQC,SAASC,IAAK,IAAAC,EAAK,OAAAA,EAAAC,EAA8CF,MAAM,MAAAC,SAAA,SAAAA,EAAEE,iBAAiB,KACpG,KAIJ,SAASD,GAA8CE,OACrDA,IAEA,GAAIA,EAAOC,sBAAsBC,YAAcC,EAAyBH,EAAOC,WAAWG,MAAO,CAC/F,OAAOJ,EAAOC,WAAWG,I,CAG3B,GAAIJ,EAAOK,eAAiBF,EAAyBH,EAAOK,eAAgB,CAC1E,OAAOL,EAAOK,a,CAGhB,OAAOC,SACT,CAEA,SAASH,EAAyBI,GAChC,OAAOA,EAAQC,UAAY,gBAC7B,C,MAOaC,EAAU,M,oEAEbC,KAAAC,iBAAmB,IAAIC,kBAAkBlB,GAC/CA,EAAQC,SAAQ,EAAGK,a,MACjB,MAAMO,GAAUV,EAAAG,EAAOK,iBAAa,MAAAR,SAAA,SAAAA,EAAEgB,QAAQ,kBAC9C,GAAIN,IAAYG,KAAKN,KAAM,CACzB,M,CAGFM,KAAKX,iBAAiB,M,oBAkBO,U,CAMjC,qBAAMA,GACJ,MAAMe,EAAiBJ,KAAKK,oBAC5B,GAAIL,KAAKI,iBAAmBA,EAAgB,CAC1CJ,KAAKI,eAAiBA,EAEtB,GAAIJ,KAAKI,iBAAmB,OAASJ,KAAKI,iBAAmB,SAAU,CACrEJ,KAAKM,aAAaC,KAAK,CAAEC,UAAWR,KAAKI,gB,GAK/C,mBAAYK,GACV,OAAOC,MAAMC,KAAKX,KAAKN,KAAKkB,S,CAGtB,iBAAAP,GACN,IAAKL,KAAKa,mBAAoB,CAC5B,MAAO,U,CAGT,MAAMC,aAAEA,EAAYC,aAAEA,EAAYC,UAAEA,GAAchB,KAAKa,mBAEvD,GAAIC,GAAgBC,EAAc,CAChC,MAAO,U,CAGT,GAAIC,IAAc,EAAG,CACnB,MAAO,K,CAGT,GAAIF,EAAeE,EAAYD,EAAe,EAAG,CAC/C,MAAO,Q,CAGT,GAAIC,EAAY,EAAG,CACjB,MAAO,Q,CAGT,MAAO,U,CAGT,gBAAAC,GACEjB,KAAKC,iBAAiBiB,QAAQlB,KAAKN,KAAM,CACvCyB,cAAe,KACfC,WAAY,MACZC,UAAW,MACXC,QAAS,OAGX,GAAItB,KAAKuB,8BAA8BC,eAAgB,CACrD3C,EAAeqC,QAAQlB,KAAKuB,mB,CAG9BvB,KAAKS,gBAAgBxB,SAASY,GAAYhB,EAAeqC,QAAQrB,I,CAGnE,oBAAA4B,GACE,GAAIzB,KAAKuB,8BAA8BC,eAAgB,CACrD3C,EAAe6C,UAAU1B,KAAKuB,mB,CAGhCvB,KAAKC,iBAAiB0B,aAEtB3B,KAAKS,gBAAgBxB,SAASY,GAAYhB,EAAe6C,UAAU7B,I,CAGrE,MAAA+B,GACE,OACEC,EAAA,OAAKC,IAAMC,GAAQ/B,KAAKuB,mBAAqBQ,EAAKC,MAAM,wBACtDH,EAAA,OACEC,IAAMC,GAAQ/B,KAAKa,mBAAqBkB,EACxCC,MAAOC,EAAK,uBAAwB,CAClC,CAAC,cAAcjC,KAAKI,kBAAmBJ,KAAKI,iBAAmB,aAEjE8B,SAAU,IAAMlC,KAAKX,mBAErBwC,EAAA,c"}

package/dist/dso-toolkit/p-6d602847.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as n,F as e,a}from"./p-4592810d.js";import{i as o}from"./p-17e4b846.js";const s=':host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:"";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}';const r=class{constructor(n){i(this,n);this.dsoSelectPage=t(this,"dsoSelectPage",7);this.sizePositionsMap={small:7,medium:9,large:11};this.availablePositions=undefined;this.totalPages=undefined;this.currentPage=undefined;this.formatHref=i=>"#"+i}sizeChangeHandler(i){this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i.detail])}clickHandler(i,t){this.dsoSelectPage.emit({originalEvent:i,page:t,isModifiedEvent:o(i)})}componentDidLoad(){var i;(i=this.responsiveElement)===null||i===void 0?void 0:i.getSize().then((i=>this.availablePositions=this.getAvailablePositions(this.sizePositionsMap[i])))}render(){var i,t,a;if(!this.totalPages){return null}if(this.availablePositions===undefined){return n("dso-responsive-element",{ref:i=>this.responsiveElement=i})}const o=this.availablePositions;const s=(i=this.currentPage)!==null&&i!==void 0?i:0;const r=this.getPages(s,this.availablePositions,this.totalPages);return n("dso-responsive-element",{ref:i=>this.responsiveElement=i},n("ul",{class:"pagination"},n("li",{class:s<=1||s>this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1),"aria-label":"Vorige",onClick:i=>{var t;return s&&this.clickHandler(i,(t=r[r.indexOf(s)-1])!==null&&t!==void 0?t:1)}},n("dso-icon",{icon:"chevron-left"}))),r.map((i=>n(e,null,this.showEllipsisBeforeLast(r,i,o)&&n("li",null,n("span",null,"...")),n("li",{key:i,class:s===i?"active":undefined},s===i?n("span",{"aria-current":"page"},i):n("a",{href:this.formatHref(i),onClick:t=>this.clickHandler(t,i)},i)),this.showEllipsisAfterFirst(r,i,o)&&n("li",null,n("span",null,"..."))))),n("li",{class:s<1||s>=this.totalPages?"dso-page-hidden":undefined},n("a",{href:this.formatHref((a=r[r.indexOf(s)+1])!==null&&a!==void 0?a:this.totalPages),"aria-label":"Volgende",onClick:i=>{var t;return s&&this.totalPages&&this.clickHandler(i,(t=r[r.indexOf(s)+1])!==null&&t!==void 0?t:this.totalPages)}},n("dso-icon",{icon:"chevron-right"})))))}getAvailablePositions(i){if(i%2===0){return i-1}if(i<=3){return 3}return i}getPages(i,t,n){if(n+2<=t){return Array.from({length:n},((i,t)=>t+1))}if(t===3){return[i]}if(t===5){return[1,i,n]}return[1,...this.getPageRange(i,t,n),n]}getPageRange(i,t,n){const e=[];const a=Math.floor(t/2);if(i<=a){for(let i=2;i<=t-4;i++){e.push(i)}}if(i>=a&&i<=n-a){if(a===1){if(i>n-2){e.push(n-2)}e.push(i);if(i<3){e.push(3)}}if(a>1){const t=a-3;for(let o=Math.min(i-t,n-a);o<=Math.max(i+t,a);o++){if(o>2&&o<n-1){e.push(o)}}}}if(i>n-a){for(let i=n-(t-5);i<=n-1;i++){e.push(i)}}return e.filter(((i,t,n)=>n.indexOf(i)===t))}showEllipsisAfterFirst(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===0&&e>n-2&&!i.some((i=>i===2))&&n>=7}showEllipsisBeforeLast(i,t,n){const e=i[i.length-1];if(!e){throw new Error("No totalPages")}return i.indexOf(t)===i.length-1&&e>n-2&&!i.some((i=>i===e-1))&&n>=7}get host(){return a(this)}};r.style=s;export{r as dso_pagination};
-//# sourceMappingURL=p-6d602847.entry.js.map