@dso-toolkit/core 59.0.0 → 60.0.0

package/dist/dso-toolkit/p-f08a5a06.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabs","ViewerGridFilterpanelButtons","onApply","onCancel","h","class","type","onClick","icon","Filterpanel","ref","id","e","preventDefault","name","MainPanel","tabView","mainSize","shrinkMain","expandMain","sizeLabelMap","small","medium","large","disabled","Overlay","dsoCloseOverlay","viewerGridCss","tabViewWidth","ViewerGrid","this","mediaCondition","tabLabelMap","main","map","filterpanelSlot","overlaySlot","changeListener","largeScreen","matches","window","innerWidth","mainSizeWatcher","currentSize","previousSize","dsoMainSizeChange","emit","stage","_a","mainPanel","addEventListener","propertyName","once","filterpanelOpenWatcher","open","console","warn","filterpanel","showModal","_b","close","overlayOpenWatcher","overlay","connectedCallback","matchMedia","host","querySelector","componentDidLoad","filterpanelOpen","overlayOpen","componentWillLoad","initialMainSize","disconnectedCallback","removeEventListener","handleFilterpanelApply","mouseEvent","dsoFilterpanelApply","originalEvent","handleFilterpanelCancel","dsoFilterpanelCancel","render","Host","Object","assign","tab","key","clsx","activeTab","element"],"sources":["src/components/viewer-grid/viewer-grid.interfaces.ts","src/components/viewer-grid/components/viewer-grid-filterpanel-buttons.tsx","src/components/viewer-grid/components/filterpanel.tsx","src/components/viewer-grid/components/main-panel.tsx","src/components/viewer-grid/components/overlay.tsx","src/components/viewer-grid/viewer-grid.scss?tag=dso-viewer-grid&encapsulation=shadow","src/components/viewer-grid/viewer-grid.tsx"],"sourcesContent":["export interface ViewerGridChangeSizeEvent {\r\n  /**\r\n   * Indicates whether it's before or after the animation\r\n   */\r\n  stage: \"start\" | \"end\";\r\n  previousSize: MainSize;\r\n  currentSize: MainSize;\r\n}\r\n\r\nexport interface ViewerGridCloseOverlayEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelCancelEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport interface ViewerGridFilterpanelApplyEvent {\r\n  originalEvent: MouseEvent | Event;\r\n}\r\n\r\nexport type MainSize = \"small\" | \"medium\" | \"large\";\r\n\r\nexport type LabelSizeMap = { [key in MainSize]: string };\r\n\r\nexport const tabs = [\"main\", \"map\"] as const;\r\n\r\nexport type Tabs = (typeof tabs)[number];\r\n\r\nexport type TabLabelMap = { [key in Tabs]: string };\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridFilterpanelButtonsProps {\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (mouseEvent: MouseEvent) => void;\r\n}\r\n\r\nexport const ViewerGridFilterpanelButtons: FunctionalComponent<ViewerGridFilterpanelButtonsProps> = ({\r\n  onApply,\r\n  onCancel,\r\n}) => (\r\n  <div class=\"filterpanel-buttons\">\r\n    <button type=\"button\" class=\"cancel-button\" onClick={onCancel}>\r\n      <span>Annuleren</span>\r\n    </button>\r\n    <button type=\"button\" class=\"apply-button\" onClick={onApply}>\r\n      <span>Toepassen</span>\r\n      <dso-icon icon=\"chevron-right\"></dso-icon>\r\n    </button>\r\n  </div>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\n\r\nexport interface ViewerGridFilterpanelProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  onApply: (mouseEvent: MouseEvent) => void;\r\n  onCancel: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Filterpanel: FunctionalComponent<ViewerGridFilterpanelProps> = ({ ref, onApply, onCancel }) => (\r\n  <dialog\r\n    id=\"filterpanel\"\r\n    class=\"filterpanel\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      onCancel(e);\r\n    }}\r\n  >\r\n    <h1>Uw keuzes</h1>\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n    <slot name=\"filterpanel\" />\r\n    <ViewerGridFilterpanelButtons onApply={onApply} onCancel={onCancel} />\r\n  </dialog>\r\n);\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { LabelSizeMap, MainSize } from \"../viewer-grid.interfaces\";\r\n\r\nexport interface ViewerGridMainPanelProps {\r\n  ref: ((element: HTMLDivElement | undefined) => void) | undefined;\r\n  tabView: boolean;\r\n  mainSize: MainSize;\r\n  shrinkMain: () => void;\r\n  expandMain: () => void;\r\n}\r\n\r\nexport const MainPanel: FunctionalComponent<ViewerGridMainPanelProps> = ({\r\n  ref,\r\n  tabView,\r\n  mainSize,\r\n  shrinkMain,\r\n  expandMain,\r\n}) => {\r\n  const sizeLabelMap: LabelSizeMap = {\r\n    small: \"smal\",\r\n    medium: \"middel\",\r\n    large: \"breed\",\r\n  };\r\n\r\n  return (\r\n    <div class=\"dso-main-panel\" ref={ref}>\r\n      {!tabView && (\r\n        <div class=\"sizing-buttons\">\r\n          <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n            Breedte hoofdpaneel: {sizeLabelMap[mainSize]}\r\n          </span>\r\n          <button type=\"button\" class=\"shrink\" disabled={mainSize === \"small\"} onClick={shrinkMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel smaller maken</span>\r\n            <dso-icon icon=\"chevron-left\"></dso-icon>\r\n          </button>\r\n          <button type=\"button\" class=\"expand\" disabled={mainSize === \"large\"} onClick={expandMain}>\r\n            <span class=\"sr-only\">Hoofdpaneel breder maken</span>\r\n            <dso-icon icon=\"chevron-right\"></dso-icon>\r\n          </button>\r\n        </div>\r\n      )}\r\n      <div class=\"main\">\r\n        <slot name=\"main\" />\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nexport interface ViewerGridOverlayProps {\r\n  ref: ((element: HTMLDialogElement | undefined) => void) | undefined;\r\n  dsoCloseOverlay: (event: MouseEvent | Event) => void;\r\n}\r\n\r\nexport const Overlay: FunctionalComponent<ViewerGridOverlayProps> = ({ ref, dsoCloseOverlay }) => (\r\n  <dialog\r\n    class=\"overlay\"\r\n    ref={ref}\r\n    onCancel={(e) => {\r\n      e.preventDefault();\r\n\r\n      dsoCloseOverlay(e);\r\n    }}\r\n  >\r\n    <button type=\"button\" class=\"overlay-close-button\" onClick={dsoCloseOverlay}>\r\n      <dso-icon icon=\"times\"></dso-icon>\r\n      <span class=\"sr-only\">sluiten</span>\r\n    </button>\r\n    <slot name=\"overlay\" />\r\n  </dialog>\r\n);\r\n","@use \"~dso-toolkit/src/components/grid\" as css-grid;\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@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/zindex\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/headings\";\r\n@use \"~dso-toolkit/src/components/navbar\";\r\n\r\n@use \"viewer-grid.variables\" as core-viewer-grid-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.shrink,\r\n.expand,\r\n.overlay-close-button {\r\n  @include button.tertiary($modifiers: false);\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &[disabled] {\r\n    display: none;\r\n  }\r\n}\r\n\r\n.overlay-close-button {\r\n  position: absolute;\r\n  top: units.$u1;\r\n  right: css-grid.$grid-gutter-width * 0.5;\r\n}\r\n\r\n.dso-main-panel {\r\n  background-color: colors.$wit;\r\n  flex-shrink: 0;\r\n  flex-grow: 0;\r\n  position: relative;\r\n  transition: flex-basis core-viewer-grid-variables.$transition-time ease-in,\r\n    max-width core-viewer-grid-variables.$transition-time ease-in,\r\n    min-width core-viewer-grid-variables.$transition-time ease-in;\r\n  z-index: zindex.$viewer-grid-main-panel;\r\n\r\n  .dso-filterblok-address {\r\n    font-weight: bold;\r\n    margin: units.$u1 0;\r\n  }\r\n\r\n  .main {\r\n    height: 100%;\r\n    padding: 0 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  }\r\n}\r\n\r\n.sizing-buttons {\r\n  left: calc(100% + 1px);\r\n  overflow-x: hidden;\r\n  padding: 0 units.$u1 * 0.5 units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  top: core-viewer-grid-variables.$sizing-buttons-top;\r\n  transition: left core-viewer-grid-variables.$transition-time ease-in;\r\n  width: core-viewer-grid-variables.$resize-button-size + units.$u1 * 0.5;\r\n  z-index: zindex.$viewer-grid-sizing-buttons;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-bottom-right-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    box-shadow: 0 1px units.$u1 * 0.5 0 rgba(0, 0, 0, 0.4);\r\n    flex: 0 0 100%;\r\n    height: core-viewer-grid-variables.$resize-button-size;\r\n    min-width: auto;\r\n    width: core-viewer-grid-variables.$resize-button-size;\r\n\r\n    &:hover {\r\n      dso-icon {\r\n        color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.map {\r\n  height: 100%;\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.filterpanel,\r\n.overlay {\r\n  background-color: colors.$wit;\r\n  border: 0;\r\n  height: 100%;\r\n  margin-block: 0;\r\n  max-height: 100vh;\r\n  overflow-y: auto;\r\n  z-index: zindex.$viewer-grid-main-panel + 1;\r\n}\r\n\r\n.filterpanel {\r\n  padding: units.$u1 css-grid.$grid-gutter-width * 0.5;\r\n  left: 0;\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$filterpanel-width) {\r\n    width: 100vw;\r\n\r\n    &::before {\r\n      display: none !important;\r\n    }\r\n  }\r\n\r\n  h1 {\r\n    @include headings.base();\r\n    @include headings.margin-large();\r\n    @include headings.h1();\r\n  }\r\n}\r\n\r\n.overlay {\r\n  padding: units.$u5 css-grid.$grid-gutter-width * 0.5 units.$u1;\r\n  right: 0;\r\n  width: core-viewer-grid-variables.$overlay-width;\r\n\r\n  &::backdrop {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n  }\r\n\r\n  @media screen and (max-width: core-viewer-grid-variables.$overlay-width) {\r\n    width: 100vw;\r\n  }\r\n}\r\n\r\n.filterpanel-buttons {\r\n  text-align: right;\r\n\r\n  .cancel-button {\r\n    @include button.secondary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .apply-button {\r\n    @include button.primary($modifiers: false);\r\n    @include button.small();\r\n  }\r\n\r\n  .cancel-button + .apply-button {\r\n    margin-left: units.$u2;\r\n  }\r\n}\r\n\r\n@media screen and (min-width: #{media-query-breakpoints.$screen-sm-min + units.$u5}) {\r\n  :host {\r\n    display: flex;\r\n    height: 100vh;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n\r\n  :host([small]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$small;\r\n      min-width: 0;\r\n      max-width: core-viewer-grid-variables.$small;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$small) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: 0;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  :host([medium]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$medium;\r\n      min-width: core-viewer-grid-variables.$small;\r\n      max-width: core-viewer-grid-variables.$medium;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$medium) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: core-viewer-grid-variables.$small;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  :host([large]) {\r\n    .dso-main-panel {\r\n      flex-basis: core-viewer-grid-variables.$large;\r\n      min-width: core-viewer-grid-variables.$large-min;\r\n      max-width: core-viewer-grid-variables.$large-max;\r\n\r\n      @media screen and (max-width: core-viewer-grid-variables.$large-min) {\r\n        flex-basis: 100vw;\r\n        max-width: 100vw;\r\n        min-width: core-viewer-grid-variables.$large-min;\r\n        transition: none;\r\n      }\r\n    }\r\n  }\r\n\r\n  .dso-main-panel {\r\n    box-shadow: units.$u1 * 0.25 0 units.$u1 0 rgba(0, 0, 0, 0.4);\r\n    padding-right: units.$u1;\r\n\r\n    .main {\r\n      overflow-y: scroll;\r\n    }\r\n  }\r\n\r\n  .filterpanel {\r\n    box-shadow: 2px 0 5px colors.$grijs-60;\r\n    margin-inline: 0 auto;\r\n    max-width: core-viewer-grid-variables.$filterpanel-max-width;\r\n    width: calc(100vw - 40px);\r\n\r\n    &::before {\r\n      content: \"\";\r\n      display: block;\r\n      position: fixed;\r\n      top: 0;\r\n      bottom: 0;\r\n      right: 0;\r\n      left: core-viewer-grid-variables.$filterpanel-max-width;\r\n      background-color: rgba(0, 0, 0, 0.5);\r\n\r\n      @media screen and (max-width: #{core-viewer-grid-variables.$filterpanel-max-width + 40px}) {\r\n        left: auto;\r\n        width: 40px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    box-shadow: -2px 0 5px colors.$grijs-60;\r\n    margin-inline: auto 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: #{media-query-breakpoints.$screen-xs-max + units.$u5 + 0.99}) {\r\n  @include navbar.root();\r\n\r\n  .dso-navbar {\r\n    padding-inline: units.$u2;\r\n  }\r\n\r\n  .dso-nav {\r\n    @include navbar.nav-border();\r\n\r\n    display: flex;\r\n    gap: units.$u2;\r\n    margin-block-start: 0;\r\n    width: calc(100vw - units.$u4);\r\n  }\r\n\r\n  .dso-tertiary {\r\n    @include button.tertiary($modifiers: false);\r\n\r\n    font-weight: 300;\r\n  }\r\n\r\n  .filterpanel,\r\n  .overlay {\r\n    margin-inline: 0;\r\n    max-width: 100vw;\r\n    top: 0;\r\n    width: 100vw;\r\n  }\r\n}\r\n","import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport {\r\n  MainSize,\r\n  TabLabelMap,\r\n  Tabs,\r\n  ViewerGridChangeSizeEvent,\r\n  ViewerGridCloseOverlayEvent,\r\n  ViewerGridFilterpanelApplyEvent,\r\n  ViewerGridFilterpanelCancelEvent,\r\n  tabs,\r\n} from \"./viewer-grid.interfaces\";\r\nimport { Filterpanel, MainPanel, Overlay } from \"./components\";\r\n\r\nconst tabViewWidth = 768 + 40;\r\n\r\n@Component({\r\n  tag: \"dso-viewer-grid\",\r\n  styleUrl: \"viewer-grid.scss\",\r\n  shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n  private mediaCondition = `(min-width: ${tabViewWidth}px)`;\r\n\r\n  private tabLabelMap: TabLabelMap = {\r\n    main: \"Hoofdpaneel\",\r\n    map: \"Kaart\",\r\n  };\r\n\r\n  private mainPanel?: HTMLDivElement;\r\n\r\n  /**\r\n   * Set to true when filterpanel should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filterpanelOpen = false;\r\n\r\n  /**\r\n   * Set to true when overlay should show.\r\n   */\r\n  @Prop({ reflect: true })\r\n  overlayOpen = false;\r\n\r\n  /**\r\n   * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n   *\r\n   * Default size is `large`.\r\n   */\r\n  @Prop()\r\n  initialMainSize?: MainSize;\r\n\r\n  @State()\r\n  mainSize: MainSize = \"large\";\r\n\r\n  @State()\r\n  tabView = window.innerWidth < tabViewWidth;\r\n\r\n  @State()\r\n  activeTab: Tabs = \"main\";\r\n\r\n  /**\r\n   * Emitted when user wants to close the overlay.\r\n   */\r\n  @Event()\r\n  dsoCloseOverlay!: EventEmitter<ViewerGridCloseOverlayEvent>;\r\n\r\n  /**\r\n   * Emitted when user cancels filterpanel.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelCancel!: EventEmitter<ViewerGridFilterpanelCancelEvent>;\r\n\r\n  /**\r\n   * Emitted when user applies filterpanel options.\r\n   */\r\n  @Event()\r\n  dsoFilterpanelApply!: EventEmitter<ViewerGridFilterpanelApplyEvent>;\r\n\r\n  /**\r\n   * Emitted before and after main size animation. Inspect `detail` property for more information.\r\n   */\r\n  @Event()\r\n  dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoViewerGridElement;\r\n\r\n  private filterpanel: HTMLDialogElement | undefined;\r\n\r\n  private filterpanelSlot: HTMLElement | null = null;\r\n\r\n  private overlay: HTMLDialogElement | undefined;\r\n\r\n  private overlaySlot: HTMLDivElement | null = null;\r\n\r\n  @Watch(\"mainSize\")\r\n  mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n    this.dsoMainSizeChange.emit({\r\n      stage: \"start\",\r\n      previousSize,\r\n      currentSize,\r\n    });\r\n\r\n    this.mainPanel?.addEventListener(\r\n      \"transitionend\",\r\n      (e) => {\r\n        if (e.propertyName === \"flex-basis\") {\r\n          this.dsoMainSizeChange.emit({\r\n            stage: \"end\",\r\n            previousSize,\r\n            currentSize,\r\n          });\r\n        }\r\n      },\r\n      { once: true }\r\n    );\r\n  }\r\n\r\n  @Watch(\"filterpanelOpen\")\r\n  filterpanelOpenWatcher(open: boolean) {\r\n    if (!this.filterpanelSlot) {\r\n      console.warn(\"slot 'filterpanel' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.filterpanel?.showModal();\r\n    } else {\r\n      this.filterpanel?.close();\r\n    }\r\n  }\r\n\r\n  @Watch(\"overlayOpen\")\r\n  overlayOpenWatcher(open: boolean) {\r\n    if (!this.overlaySlot) {\r\n      console.warn(\"slot 'overlay' has not been set\");\r\n    }\r\n\r\n    if (open) {\r\n      this.overlay?.showModal();\r\n    } else {\r\n      this.overlay?.close();\r\n    }\r\n  }\r\n\r\n  private shrinkMain = () => {\r\n    this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n  };\r\n\r\n  private expandMain = () => {\r\n    this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n  };\r\n\r\n  private changeListener = (largeScreen: MediaQueryListEvent) => (this.tabView = !largeScreen.matches);\r\n\r\n  connectedCallback() {\r\n    window.matchMedia(this.mediaCondition).addEventListener(\"change\", this.changeListener);\r\n\r\n    this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n    this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.filterpanelOpen && this.filterpanelSlot) {\r\n      this.filterpanel?.showModal();\r\n    }\r\n\r\n    if (this.overlayOpen && this.overlaySlot) {\r\n      this.overlay?.showModal();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.initialMainSize) {\r\n      this.mainSize = this.initialMainSize;\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.matchMedia(this.mediaCondition).removeEventListener(\"change\", this.changeListener);\r\n  }\r\n\r\n  private handleFilterpanelApply(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  private handleFilterpanelCancel(mouseEvent: MouseEvent | Event) {\r\n    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host {...{ [this.mainSize]: true }}>\r\n        {this.tabView && (\r\n          <nav class=\"dso-navbar\">\r\n            <ul class=\"dso-nav dso-nav-sub\">\r\n              {tabs.map((tab) => (\r\n                <li key={tab} class={clsx({ \"dso-active\": this.activeTab === tab })}>\r\n                  <button type=\"button\" class=\"dso-tertiary\" onClick={() => (this.activeTab = tab)}>\r\n                    {this.tabLabelMap[tab]}\r\n                  </button>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"main\")) && (\r\n          <MainPanel\r\n            ref={(element: HTMLDivElement | undefined) => (this.mainPanel = element)}\r\n            tabView={this.tabView}\r\n            mainSize={this.mainSize}\r\n            shrinkMain={this.shrinkMain}\r\n            expandMain={this.expandMain}\r\n          ></MainPanel>\r\n        )}\r\n        <Filterpanel\r\n          ref={(element) => (this.filterpanel = element)}\r\n          onApply={(e) => this.handleFilterpanelApply(e)}\r\n          onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n        ></Filterpanel>\r\n        {(!this.tabView || (this.tabView && this.activeTab === \"map\")) && (\r\n          <div class=\"map\">\r\n            <slot name=\"map\" />\r\n          </div>\r\n        )}\r\n        <Overlay\r\n          ref={(element) => (this.overlay = element)}\r\n          dsoCloseOverlay={(e) => this.dsoCloseOverlay.emit({ originalEvent: e })}\r\n        ></Overlay>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/esm/create-identifier-479a4699.js

@@ -1,17 +0,0 @@
-/**
- * Form random hash
- */
-function chr4() {
-  return Math.random().toString(16).slice(-4);
-}
-/**
- * Create random identifier with a prefix
- * @param prefix
- */
-function createIdentifier(prefix) {
-  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
-}
-
-export { createIdentifier as c };
-
-//# sourceMappingURL=create-identifier-479a4699.js.map

package/dist/esm/create-identifier-479a4699.js.map

@@ -1 +0,0 @@
-{"file":"create-identifier-479a4699.js","mappings":"AAAA;;;SAGgB,IAAI;EAClB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,CAAC;AAED;;;;SAIgB,gBAAgB,CAAC,MAAc;EAC7C,OAAO,GAAG,MAAM,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,IAAI,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,CAAC;AAClG;;;;","names":[],"sources":["src/utils/create-identifier.ts"],"sourcesContent":["/**\r\n * Form random hash\r\n */\r\nexport function chr4() {\r\n  return Math.random().toString(16).slice(-4);\r\n}\r\n\r\n/**\r\n * Create random identifier with a prefix\r\n * @param prefix\r\n */\r\nexport function createIdentifier(prefix: string): string {\r\n  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;\r\n}\r\n"],"version":3}

package/dist/types/components/date-picker/date-localization.d.ts

@@ -1,19 +0,0 @@
-type MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string];
-type DayNames = [string, string, string, string, string, string, string];
-export type DsoLocalizedText = {
-  buttonLabel: string;
-  placeholder: string;
-  selectedDateMessage: string;
-  prevMonthLabel: string;
-  nextMonthLabel: string;
-  monthSelectLabel: string;
-  yearSelectLabel: string;
-  closeLabel: string;
-  keyboardInstruction: string;
-  calendarHeading: string;
-  dayNames: DayNames;
-  monthNames: MonthsNames;
-  monthNamesShort: MonthsNames;
-};
-declare const localization: DsoLocalizedText;
-export default localization;

package/dist/types/components/date-picker/date-picker-day.d.ts

@@ -1,11 +0,0 @@
-import { FunctionalComponent } from "../../stencil-public-runtime";
-export type DatePickerDayProps = {
-  focusedDay: Date;
-  today: Date;
-  day: Date;
-  inRange: boolean;
-  onDaySelect: (event: MouseEvent, day: Date) => void;
-  onKeyboardNavigation: (event: KeyboardEvent) => void;
-  focusedDayRef?: (element: HTMLButtonElement) => void;
-};
-export declare const DatePickerDay: FunctionalComponent<DatePickerDayProps>;

package/dist/types/components/date-picker/date-picker-month.d.ts

@@ -1,20 +0,0 @@
-import { FunctionalComponent } from "../../stencil-public-runtime";
-import { DsoLocalizedText } from "./date-localization";
-import { DatePickerDayProps } from "./date-picker-day";
-import { DaysOfWeek } from "./date-utils";
-type DatePickerMonthProps = {
-  selectedDate: Date | undefined;
-  focusedDate: Date;
-  labelledById: string;
-  localization: DsoLocalizedText;
-  firstDayOfWeek: DaysOfWeek;
-  min?: Date;
-  max?: Date;
-  onDateSelect: DatePickerDayProps["onDaySelect"];
-  onKeyboardNavigation: DatePickerDayProps["onKeyboardNavigation"];
-  focusedDayRef: (element: HTMLButtonElement) => void;
-  onFocusIn?: (e: FocusEvent) => void;
-  onMouseDown?: (e: MouseEvent) => void;
-};
-export declare const DatePickerMonth: FunctionalComponent<DatePickerMonthProps>;
-export {};

package/dist/types/components/date-picker/utils/month-range.d.ts

@@ -1,2 +0,0 @@
-import { DsoLocalizedText } from "../date-localization";
-export declare function monthRange(localization: DsoLocalizedText, selectedYear: number, minDate?: Date, maxDate?: Date): string[];

package/dist/types/components/date-picker/utils/range.d.ts

@@ -1 +0,0 @@
-export declare function range(from: number, to: number): number[];