@dso-toolkit/core 66.1.0 → 66.2.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["annotationCss","DsoAnnotationLocatieStyle0","AnnotationLocatie","this","watcher","host","connectedCallback","watch","disconnectedCallback","unwatch","render","hasSymbool","h","AnnotationBody","key","symbol","AnnotationSymbolSlot","undefined","active","dsoActiveChange","title","Fragment","class","value","locatieNoemer","gewijzigdeLocatie","AnnotationGewijzigdeLocatie","Heading","_a","children","heading","props","__rest","Object","assign","documentComponentCss","DsoDocumentComponentStyle0","wijzigactieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","handleHeadingClick","e","type","dsoOpenToggle","emit","originalEvent","open","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","vervallen","gereserveerd","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","bevatOntwerpInformatie","annotated","Host","part","onClick","toString","icon","id","notApplicable","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","genesteOntwerpInformatie","status","compact","openAnnotation","dsoAnnotationToggle","onDsoCloseClick","slot","name","inhoud"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx","src/components/document-component/document-component-heading.tsx","src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","src/components/document-component/document-component.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor/anchor\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Prop, Event, h, EventEmitter, Fragment, Element } from \"@stencil/core\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n\r\n  --depth: var(--a, 0);\r\n}\r\n\r\n:host([not-collapsible]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-inline-start: units.$u1;\r\n  margin-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-block-start: units.$u1 * 0.5;\r\n  padding-block-end: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  @include delete.root($strikethrough: false);\r\n\r\n  --_dso-document-component-text-decoration: line-through;\r\n  --_dso-renvooi-text-decoration: line-through;\r\n}\r\n\r\n.heading-element,\r\n.content {\r\n  @include delete.strikethrough($_value: var(--_dso-document-component-text-decoration));\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    inset-inline-start: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    inline-size: 3px;\r\n    inset-block-start: 0;\r\n    inset-block-end: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]),\r\n:host([open-annotation]) {\r\n  .annotation-container,\r\n  .heading-container {\r\n    margin-block-end: units.$u1;\r\n  }\r\n}\r\n\r\n.recursive-toggle,\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n:host([not-collapsible]) {\r\n  .heading-container {\r\n    margin-block-end: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host(:not([not-collapsible])) {\r\n  .heading-element {\r\n    cursor: pointer;\r\n\r\n    @include anchor.pseudo();\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-inline-start: document-component.$indent;\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  align-items: start;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"][open-annotation]) {\r\n  .annotation-container {\r\n    margin-block-start: units.$u1;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-inline-start: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n\r\n.annotation-container {\r\n  padding-inline-end: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$rood-10};\r\n    }\r\n  }\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  .annotation-container {\r\n    dso-panel {\r\n      --_dso-panel-body-background-color: #{colors.$lime-10};\r\n    }\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation is opened, set this to true.\r\n   */\r\n  @Prop({ reflect: true })\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n                {collapsible && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </div>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && (\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"dso-tertiary\"\r\n                      aria-controls={this.openAnnotation ? \"annotations\" : undefined}\r\n                      aria-expanded={this.openAnnotation.toString()}\r\n                      onClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    >\r\n                      <dso-icon icon=\"label\"></dso-icon>\r\n                      <span class=\"sr-only\">Toelichting bekijken</span>\r\n                    </button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.openAnnotation && (\r\n          <div class=\"annotation-container\" part=\"_annotation-container\">\r\n            <dso-panel id=\"annotations\" onDsoCloseClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}>\r\n              <h2 slot=\"heading\">Kenmerken en kaart</h2>\r\n              <slot name=\"annotations\" />\r\n            </dso-panel>\r\n          </div>\r\n        )}\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6JAAA,MAAMA,EAAgB,sgJACtB,MAAAC,EAAeD,E,MCgBFE,EAAiB,M,0EAkCpBC,KAAAC,QAAUA,EAAQD,KAAKE,M,+GAE/B,iBAAAC,GACEH,KAAKC,QAAQG,O,CAGf,oBAAAC,GACEL,KAAKC,QAAQK,S,CAGf,MAAAC,GACE,MAAMC,EAAaR,KAAKC,QAAQO,aAEhC,OACEC,EAACC,EAAc,CAAAC,IAAA,2CACbC,OAAQJ,EAAaC,EAACI,EAAoB,MAAMC,UAChDC,OAAQf,KAAKe,OACbC,gBAAiBhB,KAAKgB,gBACtBC,MACER,EAAAS,EAAA,KACET,EAAA,QAAMU,MAAM,WACVV,EAAA,eAAaW,MAAOpB,KAAKqB,iBAE1BrB,KAAKsB,mBAAqBb,EAACc,EAA2B,Q,qZCnE5D,MAAMC,EAET,CAACC,EAAuBC,K,IAAvBC,QAAEA,GAAOF,EAAKG,EAAKC,EAAAJ,EAAnB,aACH,OAAQE,GACN,QACA,IAAK,KACH,OAAOlB,EAAA,KAAAqB,OAAAC,OAAA,GAAQH,GAAQF,GACzB,IAAK,KACH,OAAOjB,EAAA,KAAAqB,OAAAC,OAAA,GAAQH,GAAQF,GACzB,IAAK,KACH,OAAOjB,EAAA,KAAAqB,OAAAC,OAAA,GAAQH,GAAQF,GACzB,IAAK,KACH,OAAOjB,EAAA,KAAAqB,OAAAC,OAAA,GAAQH,GAAQF,GACzB,IAAK,KACH,OAAOjB,EAAA,KAAAqB,OAAAC,OAAA,GAAQH,GAAQF,G,ECrB7B,MAAMM,EAAuB,2wjCAC7B,MAAAC,EAAeD,ECgBf,MAAME,EAA+E,CACnFC,gBAAiB,aACjBC,UAAW,aACXC,mBAAoB,aACpBC,QAAS,c,MAcEC,EAAiB,M,sTAqJpBvC,KAAAwC,mBAAsBC,IAC5B,GAAIzC,KAAK0C,OAAS,MAAO,CACvB1C,KAAK2C,cAAcC,KAAK,CAAEC,cAAeJ,EAAGK,MAAO9C,KAAK8C,M,GAgBpD9C,KAAA+C,6BAAgCN,IACtCzC,KAAKgD,0BAA0BJ,KAAK,CAAEC,cAAeJ,EAAGQ,uBAAwBR,EAAES,QAAS,EAGrFlD,KAAAmD,2BAA8BV,IACpCzC,KAAKoD,mBAAmBR,KAAK,CAC3BC,cAAeJ,EACfY,QAASrD,KAAKsD,gBACdC,KAAMvD,KAAKsD,kBAAoB,MAC/B,E,aA3KwC,K,oGA8BrC,M,cAMI,M,mBAMK,M,8BAMW,M,4BAMF,M,eAMb,M,kBAMG,M,eAMH,M,oBAMK,M,kIA8DjB,oBAAYE,GACV,OAAOxD,KAAKyD,aAAevB,EAAkBlC,KAAKyD,Y,CAS5C,MAAAC,GACN,GAAI1D,KAAK2D,UAAW,CAClB,MAAO,W,CAGT,GAAI3D,KAAK4D,aAAc,CACrB,MAAO,c,CAGT,OAAO9C,S,CAeT,MAAAP,GACE,MAAMmD,EAAS1D,KAAK0D,SACpB,MAAMG,MACH7D,KAAK8D,OAAS9D,KAAK+D,QAAU/D,KAAKgE,WAAahE,KAAKiE,mBACrDjE,KAAK0C,OAAS,OAEhB,MAAMwB,KACJlE,KAAKyD,aACLI,GACA7D,KAAK8D,OACL9D,KAAK+D,QACL/D,KAAKgE,WACLhE,KAAKiE,kBACLjE,KAAKmE,wBACLnE,KAAKoE,WAGP,OACE3D,EAAC4D,EAAI,CAAA1D,IAAA,8DAAmBkD,GACrBK,GACCzD,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,oBAAoBmD,KAAK,sBACjCtE,KAAKyD,aAAehD,EAAA,QAAAE,IAAA,2CAAMQ,MAAM,oBAAoBnB,KAAKwD,iBAAgB,KAC1E/C,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,WACTV,EAACe,EAAO,CAAAb,IAAA,2CAACgB,QAAS3B,KAAK2B,QAASR,MAAM,kBAAkBoD,QAASvE,KAAKwC,oBACnEqB,GACCpD,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACLvB,MAAM,gBAAe,mBACJ,gBAAe,gBACjBnB,KAAK8C,KAAK0B,YAEzB/D,EAAA,YAAAE,IAAA,2CAAU8D,KAAMzE,KAAK8C,KAAO,eAAiB,kBAC7CrC,EAAA,QAAAE,IAAA,2CAAMQ,MAAM,WAAWnB,KAAK8C,KAAO,WAAa,cAGpDrC,EAAA,OAAAE,IAAA,2CAAK+D,GAAG,iBACL1E,KAAK2E,eAAiBlE,EAAA,QAAAE,IAAA,2CAAMQ,MAAM,WAAS,wBAC3CnB,KAAK8D,OAAS9D,KAAK+D,QAAU/D,KAAKgE,UACjCvD,EAAAS,EAAA,KACGlB,KAAK8D,OACJrD,EAAAS,EAAA,KACG,IACDT,EAAA,oBACEmE,QAAS5E,KAAK8D,MACde,iBAAkB7E,KAAK+C,6BACvB+B,KAAM9E,KAAK8E,MAAI,CAAMC,IAAI,IAAAtD,EAAK,OAAAA,EAAAzB,KAAK8E,QAAI,MAAArD,SAAA,SAAAA,EAAAuD,KAAAhF,KAAG+E,EAAM,QAAQ,GACxDE,kCAAoCxC,GAClCzC,KAAKkF,qBAAqBtC,KAAId,OAAAC,OAAAD,OAAAC,OAAA,GAAMU,EAAES,QAAM,CAAEiC,OAAQ,WAExDC,OAAM,QAIXpF,KAAK+D,QACJtD,EAAAS,EAAA,KACG,IACDT,EAAA,oBACEmE,QAAS5E,KAAK+D,OACdc,iBAAkB7E,KAAK+C,6BACvB+B,KAAM9E,KAAK8E,MAAI,CAAMC,IAAI,IAAAtD,EAAK,OAAAA,EAAAzB,KAAK8E,QAAI,MAAArD,SAAA,SAAAA,EAAAuD,KAAAhF,KAAG+E,EAAM,SAAS,GACzDE,kCAAoCxC,GAClCzC,KAAKkF,qBAAqBtC,KAAId,OAAAC,OAAAD,OAAAC,OAAA,GAAMU,EAAES,QAAM,CAAEiC,OAAQ,YAExDC,OAAM,QAIXpF,KAAKgE,WACJvD,EAAAS,EAAA,KACG,IACDT,EAAA,oBACEmE,QAAS5E,KAAKgE,UACda,iBAAkB7E,KAAK+C,6BACvB+B,KAAM9E,KAAK8E,MAAI,CAAMC,IAAI,IAAAtD,EAAK,OAAAA,EAAAzB,KAAK8E,QAAI,MAAArD,SAAA,SAAAA,EAAAuD,KAAAhF,KAAG+E,EAAM,YAAY,GAC5DE,kCAAoCxC,GAClCzC,KAAKkF,qBAAqBtC,KAAId,OAAAC,OAAAD,OAAAC,OAAA,GAAMU,EAAES,QAAM,CAAEiC,OAAQ,eAExDC,OAAM,SAMdpF,KAAqB,iBAEtB0D,GAAUjD,EAAA,QAAAE,IAAA,mDAAW+C,EAAM,OAG/B1D,KAAKsD,kBAAoBxC,WAAad,KAAK8C,MAC1CrC,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACLvB,MAAM,mBACNF,MAAOjB,KAAKsD,kBAAoB,KAAO,gBAAkB,aACzDiB,QAASvE,KAAKmD,4BAEd1C,EAAA,YAAAE,IAAA,2CAAU8D,KAAMzE,KAAKsD,kBAAoB,KAAO,MAAQ,eAG3DtD,KAAKqF,2BAA6BrF,KAAK8C,OAAS9C,KAAKmE,wBACpD1D,EAAAS,EAAA,KACET,EAAA,aAAAE,IAAA,2CAAW2E,OAAO,UAAS,mBAAkB,4BAA0B,KAGvE7E,EAAA,eAAAE,IAAA,2CAAa+D,GAAG,4BAA0B,oCAG5C1E,KAAKmE,wBAA0BnE,KAAKoE,YACpC3D,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,UACRnB,KAAKmE,wBACJ1D,EAAA,aAAAE,IAAA,2CAAW2E,OAAO,UAAUC,QAAO,iBAIpCvF,KAAKoE,WACJ3D,EAAA,UAAAE,IAAA,2CACE+B,KAAK,SACLvB,MAAM,eAAc,gBACLnB,KAAKwF,eAAiB,cAAgB1E,UAAS,gBAC/Cd,KAAKwF,eAAehB,WACnCD,QAAU9B,GAAMzC,KAAKyF,oBAAoB7C,KAAK,CAAEC,cAAeJ,KAE/DhC,EAAA,YAAAE,IAAA,2CAAU8D,KAAK,UACfhE,EAAA,QAAAE,IAAA,2CAAMQ,MAAM,WAAS,4BAQlCnB,KAAKwF,gBACJ/E,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,uBAAuBmD,KAAK,yBACrC7D,EAAA,aAAAE,IAAA,2CAAW+D,GAAG,cAAcgB,gBAAkBjD,GAAMzC,KAAKyF,oBAAoB7C,KAAK,CAAEC,cAAeJ,KACjGhC,EAAA,MAAAE,IAAA,2CAAIgF,KAAK,WAAS,sBAClBlF,EAAA,QAAAE,IAAA,2CAAMiF,KAAK,kBAIhB5F,KAAK8C,OAAS9C,KAAK6F,QAAU7F,KAAK4D,cAAgB5D,KAAK2D,YACtDlD,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,UAAUmD,KAAK,YACvBtE,KAAK4D,cACJnD,EAAA,aAAAE,IAAA,2CAAW2E,OAAO,QAAM,8DAEzBtF,KAAK2D,WAAalD,EAAA,aAAAE,IAAA,2CAAW2E,OAAO,QAAM,+BAC1CtF,KAAK6F,QACJpF,EAAA,oBAAAE,IAAA,2CACEiE,QAAS5E,KAAK6F,OACdhB,iBAAkB7E,KAAK+C,6BACvB+B,KAAM9E,KAAK8E,MAAI,CAAMC,IAAI,IAAAtD,EAAK,OAAAA,EAAAzB,KAAK8E,QAAI,MAAArD,SAAA,SAAAA,EAAAuD,KAAAhF,KAAG+E,EAAM,SAAS,GACzDE,kCAAoCxC,GAClCzC,KAAKkF,qBAAqBtC,KAAId,OAAAC,OAAAD,OAAAC,OAAA,GAAMU,EAAES,QAAM,CAAEiC,OAAQ,eAMhE1E,EAAA,OAAAE,IAAA,2CAAKQ,MAAM,qBAAqBmD,KAAK,uBACnC7D,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/dso-toolkit/{p-e8322c5b.entry.js → p-afc4bca7.entry.js}

@@ -1,2 +1,2 @@
-import{h as n,r as e,c as t,F as o,a as i}from"./p-b623c74b.js";import{c as s}from"./p-8a1a6e56.js";import{d as a}from"./p-16e112f1.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const c={small:"smal",medium:"middel",large:"breed"};const p=({className:e,onClick:t,label:o,icon:i})=>n("button",{type:"button",class:e,onClick:t},n("span",{class:"sr-only"},o),n("dso-icon",{icon:i}));const b=({shrink:e,expand:t,size:o,panelLabel:i,placement:s})=>{const a=[];if(o!=="small"){a.push(n(p,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(p,{onClick:t,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",c[o]),a)};const f=({tabView:e,panelSize:t,shrinkDocumentPanel:o,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:t})}}},!e&&n(b,{panelLabel:"Documentpaneel",size:t,expand:i,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:e,onCancel:t})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:t},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:e},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const u=({ref:e,onApply:t,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:t,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:t,onCancel:o}));const h=({mode:e,tabView:t,mainSize:o,documentPanelOpen:i,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:c,dsoMainSizeChangeAnimationEnd:p})=>n("div",{class:s("dso-main-panel",{compact:!t&&i&&!a,contracted:!t&&!i&&!a&&e==="vdk",expanded:!t&&i&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){p.emit({currentSize:o})}}},!t&&(e==="vrk"&&n(b,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||e==="vdk"&&i&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:c},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:s("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:e,dsoCloseOverlay:t})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();t(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    inset-inline-start: auto;\n    inline-size: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";const x=v;const k=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&y(e.host)){e.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const w=40;const z=768+w;const B=440;const D=class{constructor(n){e(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=t(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=t(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=t(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=t(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${z}px)`;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+w+w){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})};this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.activeTab=undefined;this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<z}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var e,t;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(e=this.filterpanel)===null||e===void 0?void 0:e.showModal()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.close()}}overlayOpenWatcher(n){var e,t;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(t=this.overlay)===null||t===void 0?void 0:t.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+w+w&&!this.mainPanelExpanded||this.mapElement.clientWidth<=w+w&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){k.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){k.unobserve(this.mapElement)}}render(){const e=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{key:"5bb28bca2da923349ff553a3e32ad6afc6292189",class:"dso-navbar"},n("ul",{key:"0ec74cb43fb25056ca47b063c94e19deaf12e5a2",class:"dso-nav dso-nav-sub"},e.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},d[e])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(h,{key:"92b77fad12d794fe466f0eefb1c077545887970b",mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(u,{key:"ecb109bf285a6838c5ec84ef069bd53ba581c5a7",ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"b4a056be215b05ffb730f82aee8eebb7adf1c7b1",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"26a55ded1adf6f6d12814c4f327538e6cc14dbe8",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"b2ebd498fa85c639196525cda9f4386613bae869",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"718aa0f258d94bad2336b14f13cd0ba26d465205",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};D.style=x;export{D as dso_viewer_grid};
-//# sourceMappingURL=p-e8322c5b.entry.js.map
+import{h as n,r as e,c as t,F as o,a as i}from"./p-7fc1e494.js";import{c as s}from"./p-8a1a6e56.js";import{d as a}from"./p-16e112f1.js";const r=["main","map"];const l=["search","map","document"];const d={main:"Hoofdpaneel",map:"Kaart",document:"Document",search:"Zoeken"};const c={small:"smal",medium:"middel",large:"breed"};const p=({className:e,onClick:t,label:o,icon:i})=>n("button",{type:"button",class:e,onClick:t},n("span",{class:"sr-only"},o),n("dso-icon",{icon:i}));const b=({shrink:e,expand:t,size:o,panelLabel:i,placement:s})=>{const a=[];if(o!=="small"){a.push(n(p,{onClick:e,label:`${i} smaller maken`,icon:s==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(o!=="large"){a.push(n(p,{onClick:t,label:`${i} breder maken`,icon:s==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",i.toLocaleLowerCase(),": ",c[o]),a)};const f=({tabView:e,panelSize:t,shrinkDocumentPanel:o,expandDocumentPanel:i,dsoDocumentPanelSizeChangeAnimationEnd:s})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){s.emit({currentSize:t})}}},!e&&n(b,{panelLabel:"Documentpaneel",size:t,expand:i,shrink:o,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const g=({onApply:e,onCancel:t})=>n("div",{class:"filterpanel-buttons"},n("button",{type:"button",class:"cancel-button",onClick:t},n("span",null,"Annuleren")),n("button",{type:"button",class:"apply-button",onClick:e},n("span",null,"Toepassen"),n("dso-icon",{icon:"chevron-right"})));const u=({ref:e,onApply:t,onCancel:o})=>n("dialog",{id:"filterpanel",class:"filterpanel",ref:e,onCancel:n=>{n.preventDefault();o(n)}},n("h1",null,"Uw keuzes"),n(g,{onApply:t,onCancel:o}),n("slot",{name:"filterpanel"}),n(g,{onApply:t,onCancel:o}));const h=({mode:e,tabView:t,mainSize:o,documentPanelOpen:i,mainPanelExpanded:a,mainPanelHidden:r,shrinkMain:l,expandMain:d,toggleMainPanel:c,dsoMainSizeChangeAnimationEnd:p})=>n("div",{class:s("dso-main-panel",{compact:!t&&i&&!a,contracted:!t&&!i&&!a&&e==="vdk",expanded:!t&&i&&a,collapsed:r}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){p.emit({currentSize:o})}}},!t&&(e==="vrk"&&n(b,{panelLabel:"Hoofdpaneel",size:o,expand:d,shrink:l,placement:"left"})||e==="vdk"&&i&&n("div",{class:"toggle-button"},n("button",{type:"button",onClick:c},n("span",{class:"sr-only"},"Zoeken paneel ",r?"tonen":"verbergen"),n("dso-icon",{icon:r?"chevron-right":"chevron-left"})))),n("div",{class:s("content",{invisible:r})},n("slot",{name:"main"})));const m=({ref:e,dsoCloseOverlay:t})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();t(n)}},n("button",{type:"button",class:"overlay-close-button",onClick:t},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"sluiten")),n("slot",{name:"overlay"}));const v="*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([mode=vdk]) .overlay {\n  block-size: calc(100% - 32px);\n  margin-block: 16px;\n  margin-inline: auto 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink,\n.expand,\n.overlay-close-button {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.dso-align,\n.expand.dso-align,\n.overlay-close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.shrink.dso-truncate,\n.expand.dso-truncate,\n.overlay-close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n\n.overlay-close-button {\n  position: absolute;\n  inset-block-start: 8px;\n  inset-inline-end: 16px;\n}\n\n.content.invisible {\n  visibility: hidden;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n  block-size: 100%;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n\n.dso-main-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n  inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n  flex-shrink: unset;\n  flex-grow: unset;\n  position: absolute;\n  transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n  position: absolute;\n  block-size: 100%;\n}\n.dso-main-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin-block: 8px;\n  margin-inline: 0;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n  inset-inline-start: calc(100% + 1px);\n  transition: inset-inline-start 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 0 4px;\n}\n.dso-main-panel .sizing-buttons button,\n.dso-main-panel .toggle-button button {\n  border-end-end-radius: 4px;\n  border-start-end-radius: 4px;\n}\n\n.dso-document-panel {\n  background-color: #fff;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n  z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n  inset-block-start: auto;\n  inset-block-end: 16px;\n  inset-inline-end: calc(100% + 1px);\n  transition: inset-inline-end 200ms ease-in;\n  padding-block: 0 8px;\n  padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons button {\n  border-end-start-radius: 4px;\n  border-start-start-radius: 4px;\n}\n\n.sizing-buttons,\n.toggle-button {\n  overflow-x: hidden;\n  position: absolute;\n  inset-block-start: 16px;\n  inline-size: 44px;\n  z-index: -1;\n}\n.sizing-buttons button,\n.toggle-button button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible,\n.toggle-button button:focus,\n.toggle-button button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  outline: 0;\n}\n.sizing-buttons button,\n.toggle-button button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.sizing-buttons button:hover,\n.toggle-button button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button:active,\n.toggle-button button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover,\n.toggle-button button[disabled],\n.toggle-button button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.dso-small,\n.toggle-button button.dso-small {\n  line-height: 1rem;\n}\n.sizing-buttons button.dso-small dso-icon,\n.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before,\n.toggle-button button.dso-small dso-icon,\n.toggle-button button.dso-small svg.di,\n.toggle-button button.dso-small.extern::after,\n.toggle-button button.dso-small.download::after,\n.toggle-button button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.sizing-buttons button.dso-small.dso-spinner-left::before,\n.toggle-button button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-small.dso-spinner-right::after,\n.toggle-button button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button > span,\n.toggle-button button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled],\n.toggle-button button.dso-spinner-left[disabled],\n.toggle-button button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before,\n.toggle-button button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before,\n.toggle-button button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after,\n.toggle-button button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after,\n.toggle-button button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.sizing-buttons button,\n.toggle-button button {\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.sizing-buttons button:hover dso-icon,\n.toggle-button button:hover dso-icon {\n  color: #fff;\n}\n.sizing-buttons button:focus-visible,\n.toggle-button button:focus-visible {\n  outline-offset: -1px;\n}\n\n.map {\n  block-size: 100%;\n  inline-size: 100%;\n  overflow: hidden;\n  position: relative;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  border: 0;\n  block-size: 100%;\n  margin-block: 0;\n  max-block-size: 100vh;\n  overflow-y: auto;\n  z-index: 101;\n}\n\n.filterpanel {\n  padding-block: 8px;\n  padding-inline: 16px;\n  inset-inline-start: 0;\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    inline-size: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n@media screen and (min-width: 480px) {\n  .filterpanel h1 {\n    font-size: 2rem;\n  }\n}\n\n.overlay {\n  padding-block: 40px 8px;\n  padding-inline: 16px;\n  inset-inline-end: 0;\n  inline-size: 624px;\n}\n.overlay::backdrop {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    inline-size: 100vw;\n  }\n}\n\n.filterpanel-buttons {\n  text-align: end;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.dso-small dso-icon,\n.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-small {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.dso-small dso-icon,\n.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-inline-start: 16px;\n}\n\n@media screen and (min-width: 808px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 375px;\n    min-inline-size: 0;\n    max-inline-size: 375px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n  :host([main-size=small]) .dso-main-panel,\n  :host([document-panel-size=small]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 0;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 624px;\n    min-inline-size: 375px;\n    max-inline-size: 624px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n  :host([main-size=medium]) .dso-main-panel,\n  :host([document-panel-size=medium]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 375px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 60%;\n    min-inline-size: 768px;\n    max-inline-size: 1024px;\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n  :host([main-size=large]) .dso-main-panel,\n  :host([document-panel-size=large]) .dso-document-panel {\n    flex-basis: 100vw;\n    max-inline-size: 100vw;\n    min-inline-size: 768px;\n    transition: none;\n  }\n}\n@media screen and (min-width: 808px) {\n  :host {\n    display: flex;\n    block-size: 100vh;\n    overflow: hidden;\n    position: relative;\n  }\n  :host .dso-main-panel.compact,\n  :host .dso-main-panel.expanded {\n    flex-basis: unset;\n    min-inline-size: unset;\n    max-inline-size: unset;\n    inline-size: 440px;\n  }\n  :host .dso-main-panel.compact .content,\n  :host .dso-main-panel.expanded .content {\n    block-size: auto;\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .dso-main-panel,\n  .dso-document-panel {\n    box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  }\n  .dso-main-panel .content,\n  .dso-document-panel .content {\n    overflow-y: auto;\n  }\n}\n@media screen and (min-width: 808px) {\n  .filterpanel {\n    box-shadow: 2px 0 5px #666;\n    margin-inline: 0 auto;\n    max-inline-size: 896px;\n    inline-size: calc(100vw - 40px);\n  }\n  .filterpanel::before {\n    content: \"\";\n    display: block;\n    position: fixed;\n    inset-block-start: 0;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inset-inline-start: 896px;\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n}\n@media screen and (min-width: 808px) and (max-width: 936px) {\n  .filterpanel::before {\n    inset-inline-start: auto;\n    inline-size: 40px;\n  }\n}\n@media screen and (min-width: 808px) {\n  .overlay {\n    box-shadow: -2px 0 5px #666;\n    margin-inline: auto 0;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    min-block-size: 32px;\n  }\n  .dso-navbar .dso-navbar-header {\n    float: inline-start;\n  }\n  .dso-navbar .dso-navbar-toggle {\n    border-radius: 4px;\n    min-inline-size: auto;\n    padding-block: 5px;\n    padding-inline: 0;\n  }\n  .dso-navbar .dso-navbar-toggle dso-icon,\n  .dso-navbar .dso-navbar-toggle svg.di {\n    margin-inline-start: 8px;\n    margin-inline-end: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n  .dso-navbar .dso-navbar-toggle {\n    display: none;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n    margin-inline-end: 8rem;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    list-style: none;\n    margin-block-end: 0;\n    padding-inline-start: 0;\n  }\n  .dso-nav > li > button {\n    border: 0;\n    background-color: transparent;\n  }\n  .dso-nav > li > a,\n  .dso-nav > li > button {\n    display: block;\n  }\n  .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n  .dso-nav > li > button,\n  .dso-nav > li > button:hover,\n  .dso-nav > li > button:focus,\n  .dso-nav > li > button:visited {\n    color: #275937;\n  }\n  .dso-nav > li.dso-active > a,\n  .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n  .dso-nav > li.is-active > button {\n    border-block-end: 4px solid #8b4a6a;\n    font-weight: bold;\n  }\n  .dso-nav.dso-nav-main > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n  .dso-nav.dso-nav-main > li > button:hover,\n  .dso-nav.dso-nav-main > li > button:focus-visible,\n  .dso-nav.dso-nav-main > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-main > li > a,\n  .dso-nav.dso-nav-main > li > button {\n    font-size: 1.25em;\n    line-height: 1;\n    margin-block-start: 8px;\n    padding-block: 8px 7px;\n    padding-inline: 16px;\n  }\n  .dso-nav.dso-nav-sub > li {\n    display: inline-block;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    text-decoration: none;\n  }\n  .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n  .dso-nav.dso-nav-sub > li > button:hover,\n  .dso-nav.dso-nav-sub > li > button:focus-visible,\n  .dso-nav.dso-nav-sub > li > button:active {\n    text-decoration: underline;\n  }\n  .dso-nav.dso-nav-sub > li > a,\n  .dso-nav.dso-nav-sub > li > button {\n    font-size: 1rem;\n    margin-block-start: 4px;\n    padding-block: 4px 3px;\n    padding-inline: 8px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-navbar {\n    padding-inline: 16px;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-nav {\n    border-block-end: 1px solid #ccc;\n    display: flex;\n    gap: 16px;\n    margin-block-start: 0;\n    inline-size: calc(100vw - 32px);\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .dso-tertiary {\n    display: inline-block;\n    font-size: 1em;\n    font-weight: 500;\n    margin-block-end: 0;\n    text-decoration: none;\n    touch-action: manipulation;\n    text-align: start;\n    user-select: none;\n    vertical-align: middle;\n  }\n  .dso-tertiary:focus, .dso-tertiary:focus-visible {\n    outline-offset: 2px;\n  }\n  .dso-tertiary:active {\n    outline: 0;\n  }\n  .dso-tertiary {\n    border: 0;\n    color: #39870c;\n    line-height: 1;\n    padding: 0;\n    background-color: transparent;\n  }\n  .dso-tertiary[disabled] {\n    color: #afcf9d;\n  }\n  .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n    color: #39870c;\n  }\n  .dso-tertiary:not([disabled]):hover {\n    color: #275937;\n    text-decoration: underline;\n    text-underline-position: under;\n  }\n  .dso-tertiary:not([disabled]):active {\n    color: #173521;\n  }\n  .dso-tertiary.dso-align {\n    line-height: calc(1.5em - 1px);\n    padding-block: 11px;\n    padding-inline: 0;\n    position: relative;\n  }\n  .dso-tertiary.dso-truncate {\n    max-inline-size: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .dso-tertiary.dso-spinner-left::before {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-end: 8px;\n  }\n  .dso-tertiary.dso-spinner-right::after {\n    background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    content: \"\";\n    display: inline-block;\n    block-size: 24px;\n    vertical-align: middle;\n    inline-size: 24px;\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary dso-icon + span:not(.sr-only),\n  .dso-tertiary svg.di + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + dso-icon,\n  .dso-tertiary span:not(.sr-only) + svg.di {\n    margin-inline-start: 8px;\n  }\n  .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n    margin-inline-start: 4px;\n  }\n  .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n  .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n  .dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n  .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n  .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n    margin-inline-start: 0;\n  }\n  .dso-tertiary dso-icon,\n  .dso-tertiary svg.di,\n  .dso-tertiary span {\n    vertical-align: middle;\n  }\n  .dso-tertiary {\n    font-weight: 300;\n  }\n}\n@media screen and (max-width: 807.99px) {\n  .filterpanel,\n  .overlay {\n    margin-inline: 0;\n    max-inline-size: 100vw;\n    inset-block-start: 0;\n    inline-size: 100vw;\n  }\n}";const x=v;const k=new ResizeObserver(a((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&y(e.host)){e.host._checkMainPanelVisibility()}}),50));function y(n){return n.tagName==="DSO-VIEWER-GRID"}const w=40;const z=768+w;const B=440;const D=class{constructor(n){e(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoFilterpanelCancel=t(this,"dsoFilterpanelCancel",7);this.dsoFilterpanelApply=t(this,"dsoFilterpanelApply",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChange=t(this,"dsoMainSizeChange",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelExpand=t(this,"dsoMainPanelExpand",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${z}px)`;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.emitShrinkMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="large"?"medium":"small"})};this.emitExpandMain=()=>{this.dsoMainSizeChange.emit({currentSize:this.mainSize,nextSize:this.mainSize==="small"?"medium":"large"})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=B+w+w){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches;this.handleFilterpanelApply=n=>{this.dsoFilterpanelApply.emit({originalEvent:n})};this.handleFilterpanelCancel=n=>{this.dsoFilterpanelCancel.emit({originalEvent:n})};this.mode="vrk";this.filterpanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.activeTab=undefined;this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<z}get filterpanelSlot(){return this.host.querySelector("[slot='filterpanel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterpanelOpenWatcher(n){var e,t;if(!this.filterpanelSlot){console.warn("slot 'filterpanel' has not been set")}if(n){(e=this.filterpanel)===null||e===void 0?void 0:e.showModal()}else{(t=this.filterpanel)===null||t===void 0?void 0:t.close()}}overlayOpenWatcher(n){var e,t;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(t=this.overlay)===null||t===void 0?void 0:t.close()}}async _checkMainPanelVisibility(){if(this.mode==="vdk"&&this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=B+w+w&&!this.mainPanelExpanded||this.mapElement.clientWidth<=w+w&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterpanelOpen&&this.filterpanelSlot){(n=this.filterpanel)===null||n===void 0?void 0:n.showModal()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mode==="vdk"&&this.mapElement instanceof HTMLDivElement){k.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mode==="vdk"&&this.mapElement){k.unobserve(this.mapElement)}}render(){const e=this.mode==="vdk"?l:r;return n(o,null,this.tabView&&n("nav",{key:"d5873dcccbb0e3924ef7faa1f5ddbb42d1ac409c",class:"dso-navbar"},n("ul",{key:"c56fc8fefe943280b371173a98e8efe06e7c42a4",class:"dso-nav dso-nav-sub"},e.map((e=>n("li",{key:e,class:s({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},d[e])))))),(!this.tabView||this.tabView&&(this.activeTab==="main"||this.activeTab==="search"))&&n(h,{key:"fc81d5e7a184c57fdc167aa4446d533079c553f4",mode:this.mode,tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,shrinkMain:this.emitShrinkMain,expandMain:this.emitExpandMain,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),n(u,{key:"bf4ee43c574db2ffe1a5b19444a6c2c0fbd5a562",ref:n=>this.filterpanel=n,onApply:this.handleFilterpanelApply,onCancel:this.handleFilterpanelCancel}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"6bb7a4e5ffc92664d3ec41e193b9060a5d9fee7d",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"b90a125e730e877462178784a6f643ee9d140da3",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(f,{key:"b7c0df6c3cedb78dfc86308496c532bd240dc354",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(m,{key:"d4e9cb92bb22d2e8169ddc8535f316d174753c6d",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})}))}get host(){return i(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterpanelOpen:["filterpanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};D.style=x;export{D as dso_viewer_grid};
+//# sourceMappingURL=p-afc4bca7.entry.js.map

package/dist/dso-toolkit/{p-e132910b.entry.js → p-b032496d.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as r,h as n,F as i,a as t}from"./p-b623c74b.js";const o=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const a=o;const s=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.min=undefined;this.max=undefined;this.value=undefined;this.step=undefined;this.label=undefined;this.unit="";this.description=undefined}render(){const e=this.min||0;const r=this.max||100;const t=this.step||1;return n(i,null,this.description&&n("span",{key:"bafd8f561096b1c122444e422218bae57805bc4a",id:"description",hidden:true},this.description),n("span",{key:"2cd87a76024596c12da99f52de025a34535cc137",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"096fd4d114eb459c331b0d9f684a807537a9f85e",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:t})}),n("span",{key:"158967493692699e1bf8314354b66eeddbf61d38",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return t(this)}};s.style=a;export{s as dso_input_range};
-//# sourceMappingURL=p-e132910b.entry.js.map
+import{r as e,c as r,h as n,F as i,a as t}from"./p-7fc1e494.js";const o=":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";const a=o;const s=class{constructor(n){e(this,n);this.dsoChange=r(this,"dsoChange",3);this.min=undefined;this.max=undefined;this.value=undefined;this.step=undefined;this.label=undefined;this.unit="";this.description=undefined}render(){const e=this.min||0;const r=this.max||100;const t=this.step||1;return n(i,null,this.description&&n("span",{key:"bafd8f561096b1c122444e422218bae57805bc4a",id:"description",hidden:true},this.description),n("span",{key:"2cd87a76024596c12da99f52de025a34535cc137",class:"counter min","aria-hidden":"true"},e,this.unit),n("input",{key:"096fd4d114eb459c331b0d9f684a807537a9f85e",type:"range",min:this.min,max:this.max,value:this.value,class:"input","aria-label":this.label,"aria-describedby":this.description?"description":undefined,onChange:n=>this.dsoChange.emit({originalEvent:n,value:n.target instanceof HTMLInputElement?parseInt(n.target.value,10):undefined,max:r,min:e,step:t})}),n("span",{key:"158967493692699e1bf8314354b66eeddbf61d38",class:"counter max","aria-hidden":"true"},r,this.unit))}get host(){return t(this)}};s.style=a;export{s as dso_input_range};
+//# sourceMappingURL=p-b032496d.entry.js.map

package/dist/dso-toolkit/{p-d885c651.entry.js → p-b0a3dfcb.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as s,h as t,F as l,f as c,a as o}from"./p-b623c74b.js";import{c as i}from"./p-8a1a6e56.js";import{c as a}from"./p-97f788d4.js";const d=":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const n=d;const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,{key:"3b3a3390da24484d21869661692c293f766bb06b"},t("slot",{key:"83976a207e4c1505329876192c83e6eccc1f6a52"}),!this.fixed&&t("button",{key:"de983b145b9a2cfd1adccc13116f0f17e8130314",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"c34a3568d69b61537de385c4e9b6277be5ea7697",icon:"times"}),t("span",{key:"bc2069fa68085e27fd9bab79d41ec801f5da1c5f",class:"sr-only"},"Sluiten")))}};b.style=n;const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const p=r;const h=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=a("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});c(this.host)};this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>c(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,{key:"8eaf459e1b418a9c5eb61c12939aa137b1e9a9b7"},t("div",{key:"ecbf02645dd338d6071fb06426662d78649bd8c8",class:"dso-selectable-container"},t("div",{key:"c244e0254c468e30c22ec958c6be91e532d77392",class:i("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"df920ead7e69f3e136a058cd5ab7953ecad8c707",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"f539a4ea7af6bb4c1412895c2af316b9014d8420",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"69bde115eba8f18261c79886654defb9f0f703f6",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"9d92cccb1adfd77adc579f57281dddc56a2225ba"},t("slot",{key:"4fee8b038cb69e5321c23502eb6a5dad31c3c9ee",name:"info"}))),t("slot",{key:"fd69188bb07390259d9ac58f328d3a7c8b42fe12",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return o(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};h.style=p;export{b as dso_info,h as dso_selectable};
-//# sourceMappingURL=p-d885c651.entry.js.map
+import{r as e,c as s,h as t,F as l,f as o,a as c}from"./p-7fc1e494.js";import{c as i}from"./p-8a1a6e56.js";import{c as a}from"./p-97f788d4.js";const d=":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";const n=d;const b=class{constructor(t){e(this,t);this.dsoClose=s(this,"dsoClose",7);this.fixed=undefined;this.active=undefined}render(){return t(l,{key:"3b3a3390da24484d21869661692c293f766bb06b"},t("slot",{key:"83976a207e4c1505329876192c83e6eccc1f6a52"}),!this.fixed&&t("button",{key:"de983b145b9a2cfd1adccc13116f0f17e8130314",type:"button",onClick:e=>this.dsoClose.emit(e)},t("dso-icon",{key:"c34a3568d69b61537de385c4e9b6277be5ea7697",icon:"times"}),t("span",{key:"bc2069fa68085e27fd9bab79d41ec801f5da1c5f",class:"sr-only"},"Sluiten")))}};b.style=n;const r='.sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:"";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:"";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:"";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}';const p=r;const h=class{constructor(t){e(this,t);this.dsoChange=s(this,"dsoChange",7);this.fallbackIdentifier=a("DsoSelectable");this.handleOnChange=e=>{const{target:s}=e;this.dsoChange.emit({originalEvent:e,checked:s instanceof HTMLInputElement&&s.checked});o(this.host)};this.type=undefined;this.identifier=undefined;this.name=undefined;this.value=undefined;this.invalid=undefined;this.describedById=undefined;this.labelledById=undefined;this.disabled=undefined;this.required=undefined;this.checked=undefined;this.indeterminate=undefined;this.infoFixed=undefined;this.infoActive=false;this.keyboardFocus=false}async toggleInfo(e){this.infoActive=e!==null&&e!==void 0?e:!this.infoActive}componentDidLoad(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();this.mutationObserver=new MutationObserver((()=>o(this.host)));this.mutationObserver.observe(this.host,{childList:true});this.setIndeterminate()}disconnectedCallback(){var e;(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect()}setIndeterminate(){if(!(this.input instanceof HTMLInputElement)||this.type!=="checkbox"){return}this.input.indeterminate=!!this.indeterminate}render(){var e;const s=!!this.host.querySelector('[slot="info"]');return t(l,{key:"fa4b6f259cdabb24f0663b252c6a0e759a56ba9d"},t("div",{key:"da1e026349a4d3c7a9cf108f46858aaa17a3dd34",class:"dso-selectable-container"},t("div",{key:"2d17dd9bb4933475c0dd9778de0ccb97a77cbd99",class:i("dso-selectable-input-wrapper",{"dso-keyboard-focus":this.keyboardFocus})},t("input",{key:"4f46deb4c37e9577626af506551cf713214cf2a7",type:this.type,id:this.getIdentifier(),value:this.value,name:this.name,"aria-invalid":(e=this.invalid)===null||e===void 0?void 0:e.toString(),"aria-describedby":s&&this.infoFixed?this.describedById:undefined,"aria-labelledBy":this.labelledById,disabled:this.disabled,required:this.required,checked:this.checked,onChange:this.handleOnChange,onBlur:()=>this.keyboardFocus=false,onKeyUp:()=>this.keyboardFocus=true,ref:e=>this.input=e}),!this.labelledById?t("label",{htmlFor:this.getIdentifier()},t("slot",null)):t("label",null,t("slot",null))),s&&!this.infoFixed&&t("dso-info-button",{key:"e54d3223fb6a7d07a6b39f14b544bf0dffa5ca86",active:this.infoActive,onDsoToggle:e=>this.infoActive=e.detail.active})),s&&t("dso-info",{key:"072933f4b06ef2f3c187b530f4e015f46044bf70",id:s&&this.infoFixed?this.describedById:undefined,fixed:this.infoFixed,active:this.infoActive,onDsoClose:()=>this.infoActive=false},t("div",{key:"2142cbabdf2d970f36144b7d7658587b007d8164"},t("slot",{key:"0d21b22bb68c34eeba23668633391bd62b7b2c40",name:"info"}))),t("slot",{key:"93ee767f26fb270c7dcc4aaa81ef522c205a386b",name:"options"}))}componentDidRender(){if(this.input&&typeof this.checked==="boolean"&&this.input.checked!==this.checked){this.input.checked=this.checked}}getIdentifier(){var e;return(e=this.identifier)!==null&&e!==void 0?e:this.fallbackIdentifier}get host(){return c(this)}static get watchers(){return{indeterminate:["setIndeterminate"]}}};h.style=p;export{b as dso_info,h as dso_selectable};
+//# sourceMappingURL=p-b0a3dfcb.entry.js.map

package/dist/dso-toolkit/{p-bb87ef29.entry.js → p-b2f92815.entry.js}

@@ -1,2 +1,2 @@
-import{r as n,c as o,h as l,F as e}from"./p-b623c74b.js";import{i as r}from"./p-2d694112.js";const a=':host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: "target wordmark label";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url][ribbon]) {\n  grid-template-areas: "targetwordmark label";\n}\n:host([logo-url][ribbon]) .logo-url {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding-block: 0;\n  padding-inline: 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: "target label";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}';const t=a;const i=()=>l(e,null,l("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},l("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),l("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),l("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),l("div",{class:"logo-wordmark"},l("span",{class:"logo-wordmark-omgevings"},"Omgevings"),l("span",{class:"logo-wordmark-loket"},"loket")));const s=class{constructor(l){n(this,l);this.dsoLogoClick=o(this,"dsoLogoClick",7);this.dsoLabelClick=o(this,"dsoLabelClick",7);this.handleLogoClick=n=>{this.dsoLogoClick.emit({originalEvent:n,url:this.logoUrl,isModifiedEvent:r(n)})};this.handleLabelClick=n=>{this.dsoLabelClick.emit({originalEvent:n,url:this.labelUrl,isModifiedEvent:r(n)})};this.logoUrl=undefined;this.label=undefined;this.labelUrl=undefined;this.ribbon=undefined}render(){return l(e,null,this.logoUrl?l("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},l(i,null)):l(i,null),this.label&&(!this.labelUrl?l("span",{class:"logo-label"},this.label):l("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},l("span",{class:"logo-label"},this.label))),this.ribbon&&l("div",{key:"4539eec0153c2ad7ce3ec0797ba61a5080f02e76",class:"logo-ribbon"},this.ribbon))}};s.style=t;export{s as dso_logo};
-//# sourceMappingURL=p-bb87ef29.entry.js.map
+import{r as n,c as o,h as l,F as e}from"./p-7fc1e494.js";import{i as r}from"./p-2d694112.js";const a=':host {\n  max-block-size: 3rem;\n  block-size: 3rem;\n  display: grid;\n  grid-template-areas: "target wordmark label";\n  grid-template-columns: repeat(3, max-content);\n  grid-template-rows: 100%;\n  gap: 16px;\n  font-size: 1.5625rem;\n  font-weight: 500;\n  align-items: center;\n  container-type: size;\n  container-name: logo;\n}\n:host .logo-url,\n:host .logo-label-url {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  text-decoration: none;\n}\n:host .logo-url:hover, :host .logo-url:focus-visible, :host .logo-url:active,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus-visible,\n:host .logo-label-url:active {\n  text-decoration: underline;\n}\n:host .logo-url, :host .logo-url:hover, :host .logo-url:focus, :host .logo-url:visited,\n:host .logo-label-url,\n:host .logo-label-url:hover,\n:host .logo-label-url:focus,\n:host .logo-label-url:visited {\n  color: #275937;\n}\n\n:host([logo-url][ribbon]) {\n  grid-template-areas: "targetwordmark label";\n}\n:host([logo-url][ribbon]) .logo-url {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n:host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n  grid-area: targetwordmark;\n}\n\n.logo-label-url {\n  grid-area: label;\n}\n\n.logo-target {\n  grid-area: target;\n  max-block-size: 48px;\n  max-inline-size: 48px;\n  inline-size: 100%;\n  display: block;\n  aspect-ratio: 1/1;\n}\n\n.logo-wordmark {\n  grid-area: wordmark;\n  font-size: 1.5625rem;\n}\n\n@container logo (max-height: 47px) {\n  .logo-wordmark,\n  .logo-label {\n    font-size: 50cqb;\n    line-height: 1;\n  }\n}\n.logo-wordmark-omgevings {\n  color: #39870c;\n}\n\n.logo-wordmark-loket {\n  color: #275937;\n}\n\n.logo-label {\n  grid-area: label;\n  color: #275937;\n  margin-inline-start: 1rem;\n}\n\n.logo-ribbon {\n  grid-area: wordmark;\n  place-self: start end;\n  display: flex;\n  place-items: center;\n  background-color: #8b4a6a;\n  border-radius: 3px;\n  transform: rotate(3deg);\n  padding-block: 0;\n  padding-inline: 8px;\n  font-size: 0.75rem;\n  font-weight: normal;\n  text-transform: uppercase;\n  color: #fff;\n}\n@container logo (max-height: 47px) {\n  .logo-ribbon {\n    block-size: 28cqb;\n    font-size: 25cqb;\n  }\n}\n\n.inner {\n  fill: #e17000;\n}\n\n.middle {\n  fill: #275937;\n}\n\n.outer {\n  fill: #80bc00;\n}\n\n@media screen and (max-width: 767px) {\n  .logo-wordmark {\n    font-size: initial;\n  }\n  :host([label]) {\n    grid-template-areas: "target label";\n    grid-template-columns: max-content minmax(130px, max-content);\n  }\n  :host([label]) .logo-wordmark {\n    display: none;\n  }\n  :host([label]) .logo-ribbon {\n    grid-area: label;\n  }\n  :host([label]) .logo-label {\n    margin-inline-start: 0;\n    font-size: initial;\n    text-wrap: balance;\n    overflow-wrap: normal;\n  }\n  :host([logo-url][ribbon]) .logo-label-url + .logo-ribbon {\n    grid-area: label;\n  }\n}\n@media screen and (max-width: 480px) {\n  .logo-ribbon {\n    transform: rotate(3deg) translateY(-7px);\n  }\n}';const t=a;const i=({name:n})=>{const o=n.split("|");return l(e,null,l("svg",{fill:"none",viewBox:"0 0 48 48",height:"100%",class:"logo-target"},l("path",{class:"outer",d:"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z"}),l("path",{class:"middle",d:"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z"}),l("path",{class:"inner",d:"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z"})),l("div",{class:"logo-wordmark"},l("span",{class:"logo-wordmark-omgevings"},o[0]),o.length===2&&l("span",{class:"logo-wordmark-loket"},o[1])))};const s=class{constructor(l){n(this,l);this.dsoLogoClick=o(this,"dsoLogoClick",7);this.dsoLabelClick=o(this,"dsoLabelClick",7);this.handleLogoClick=n=>{this.dsoLogoClick.emit({originalEvent:n,url:this.logoUrl,isModifiedEvent:r(n)})};this.handleLabelClick=n=>{this.dsoLabelClick.emit({originalEvent:n,url:this.labelUrl,isModifiedEvent:r(n)})};this.name="Omgevings|loket";this.logoUrl=undefined;this.label=undefined;this.labelUrl=undefined;this.ribbon=undefined}render(){return l(e,null,this.logoUrl?l("a",{class:"logo-url",href:this.logoUrl,onClick:this.handleLogoClick},l(i,{name:this.name})):l(i,{name:this.name}),this.label&&(!this.labelUrl?l("span",{class:"logo-label"},this.label):l("a",{class:"logo-label-url",href:this.labelUrl,onClick:this.handleLabelClick},l("span",{class:"logo-label"},this.label))),this.ribbon&&l("div",{key:"2ffb6bb6b26e9b0969b20283f7ea19487454b533",class:"logo-ribbon"},this.ribbon))}};s.style=t;export{s as dso_logo};
+//# sourceMappingURL=p-b2f92815.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["logoCss","DsoLogoStyle0","DsoLogo","name","splittedName","split","h","Fragment","fill","viewBox","height","class","d","length","Logo","this","handleLogoClick","e","dsoLogoClick","emit","originalEvent","url","logoUrl","isModifiedEvent","handleLabelClick","dsoLabelClick","labelUrl","render","href","onClick","label","ribbon","key"],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@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@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\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\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent<{ name: string }> = ({ name }) => {\r\n  const splittedName = name.split(\"|\");\r\n  return (\r\n    <>\r\n      <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n        <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n        <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n        <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n      </svg>\r\n      <div class=\"logo-wordmark\">\r\n        <span class=\"logo-wordmark-omgevings\">{splittedName[0]}</span>\r\n        {splittedName.length === 2 && <span class=\"logo-wordmark-loket\">{splittedName[1]}</span>}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a\r\n   * pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be\r\n   * shown in bosgroen.\r\n   * When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in\r\n   * bosgroen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  name = \"Omgevings|loket\";\r\n  /**\r\n   * The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo name={this.name} />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo name={this.name} />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"6FAAA,MAAMA,EAAU,igGAChB,MAAAC,EAAeD,ECYf,MAAME,EAAiD,EAAGC,WACxD,MAAMC,EAAeD,EAAKE,MAAM,KAChC,OACEC,EAAAC,EAAA,KACED,EAAA,OAAKE,KAAK,OAAOC,QAAQ,YAAYC,OAAO,OAAOC,MAAM,eACvDL,EAAA,QAAMK,MAAM,QAAQC,EAAE,+CACtBN,EAAA,QAAMK,MAAM,SAASC,EAAE,6CACvBN,EAAA,QAAMK,MAAM,QAAQC,EAAE,2CAExBN,EAAA,OAAKK,MAAM,iBACTL,EAAA,QAAMK,MAAM,2BAA2BP,EAAa,IACnDA,EAAaS,SAAW,GAAKP,EAAA,QAAMK,MAAM,uBAAuBP,EAAa,KAE/E,E,MASMU,EAAI,M,iHAgDPC,KAAAC,gBAAmBC,IACzBF,KAAKG,aAAaC,KAAK,CAAEC,cAAeH,EAAGI,IAAKN,KAAKO,QAAUC,gBAAiBA,EAAgBN,IAAK,EAG/FF,KAAAS,iBAAoBP,IAC1BF,KAAKU,cAAcN,KAAK,CAAEC,cAAeH,EAAGI,IAAKN,KAAKW,SAAWH,gBAAiBA,EAAgBN,IAAK,E,UA5ClG,kB,0FA+CP,MAAAU,GACE,OACErB,EAAAC,EAAA,KACGQ,KAAKO,QACJhB,EAAA,KAAGK,MAAM,WAAWiB,KAAMb,KAAKO,QAASO,QAASd,KAAKC,iBACpDV,EAACJ,EAAO,CAACC,KAAMY,KAAKZ,QAGtBG,EAACJ,EAAO,CAACC,KAAMY,KAAKZ,OAGrBY,KAAKe,SACFf,KAAKW,SACLpB,EAAA,QAAMK,MAAM,cAAcI,KAAKe,OAE/BxB,EAAA,KAAGK,MAAM,iBAAiBiB,KAAMb,KAAKW,SAAUG,QAASd,KAAKS,kBAC3DlB,EAAA,QAAMK,MAAM,cAAcI,KAAKe,SAGpCf,KAAKgB,QAAUzB,EAAA,OAAA0B,IAAA,2CAAKrB,MAAM,eAAeI,KAAKgB,Q","ignoreList":[]}

package/dist/dso-toolkit/p-bc0a6bac.entry.js

@@ -0,0 +1,2 @@
+import{r as n,c as t,h as e,F as r}from"./p-7fc1e494.js";import{c as i}from"./p-4573c419.js";var o=1/0,u=9007199254740991,s=17976931348623157e292,a=0/0;var f="[object Arguments]",c="[object Function]",d="[object GeneratorFunction]",l="[object Map]",h="[object Object]",v="[object Promise]",p="[object Set]",b="[object String]",m="[object Symbol]",y="[object WeakMap]";var g="[object DataView]";var j=/[\\^$.*+?()[\]{}|]/g;var w=/^\s+|\s+$/g;var A=/^[-+]0x[0-9a-f]+$/i;var C=/^0b[01]+$/i;var D=/^\[object .+?Constructor\]$/;var O=/^0o[0-7]+$/i;var k=/^(?:0|[1-9]\d*)$/;var $="\\ud800-\\udfff",I="\\u0300-\\u036f\\ufe20-\\ufe23",F="\\u20d0-\\u20f0",S="\\ufe0e\\ufe0f";var M="["+$+"]",T="["+I+F+"]",x="\\ud83c[\\udffb-\\udfff]",E="(?:"+T+"|"+x+")",z="[^"+$+"]",R="(?:\\ud83c[\\udde6-\\uddff]){2}",W="[\\ud800-\\udbff][\\udc00-\\udfff]",L="\\u200d";var V=E+"?",_="["+S+"]?",K="(?:"+L+"(?:"+[z,R,W].join("|")+")"+_+V+")*",N=_+V+K,P="(?:"+[z+T+"?",T,R,W,M].join("|")+")";var B=RegExp(x+"(?="+x+")|"+P+N,"g");var G=RegExp("["+L+$+I+F+S+"]");var X=parseInt;var H=typeof i=="object"&&i&&i.Object===Object&&i;var q=typeof self=="object"&&self&&self.Object===Object&&self;var J=H||q||Function("return this")();function Q(n,t){var e=-1,r=n?n.length:0,i=Array(r);while(++e<r){i[e]=t(n[e],e,n)}return i}function U(n){return n.split("")}function Y(n,t){var e=-1,r=Array(n);while(++e<n){r[e]=t(e)}return r}function Z(n,t){return Q(t,(function(t){return n[t]}))}function nn(n,t){return n==null?undefined:n[t]}function tn(n){return G.test(n)}function en(n){var t=false;if(n!=null&&typeof n.toString!="function"){try{t=!!(n+"")}catch(n){}}return t}function rn(n){var t,e=[];while(!(t=n.next()).done){e.push(t.value)}return e}function on(n){var t=-1,e=Array(n.size);n.forEach((function(n,r){e[++t]=[r,n]}));return e}function un(n,t){return function(e){return n(t(e))}}function sn(n){var t=-1,e=Array(n.size);n.forEach((function(n){e[++t]=n}));return e}function an(n){return tn(n)?fn(n):U(n)}function fn(n){return n.match(B)||[]}var cn=Function.prototype,dn=Object.prototype;var ln=J["__core-js_shared__"];var hn=function(){var n=/[^.]+$/.exec(ln&&ln.keys&&ln.keys.IE_PROTO||"");return n?"Symbol(src)_1."+n:""}();var vn=cn.toString;var pn=dn.hasOwnProperty;var bn=dn.toString;var mn=RegExp("^"+vn.call(pn).replace(j,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var yn=J.Symbol,gn=yn?yn.iterator:undefined,jn=dn.propertyIsEnumerable;var wn=Math.floor,An=un(Object.keys,Object),Cn=Math.random;var Dn=Kn(J,"DataView"),On=Kn(J,"Map"),kn=Kn(J,"Promise"),$n=Kn(J,"Set"),In=Kn(J,"WeakMap");var Fn=Hn(Dn),Sn=Hn(On),Mn=Hn(kn),Tn=Hn($n),xn=Hn(In);function En(n,t){var e=Un(n)||Qn(n)?Y(n.length,String):[];var r=e.length,i=!!r;for(var o in n){if((t||pn.call(n,o))&&!(i&&(o=="length"||Pn(o,r)))){e.push(o)}}return e}function zn(n,t,e){if(n===n){if(e!==undefined){n=n<=e?n:e}if(t!==undefined){n=n>=t?n:t}}return n}function Rn(n){return bn.call(n)}function Wn(n){if(!et(n)||Gn(n)){return false}var t=nt(n)||en(n)?mn:D;return t.test(Hn(n))}function Ln(n){if(!Xn(n)){return An(n)}var t=[];for(var e in Object(n)){if(pn.call(n,e)&&e!="constructor"){t.push(e)}}return t}function Vn(n,t){return n+wn(Cn()*(t-n+1))}function _n(n,t){var e=-1,r=n.length;t||(t=Array(r));while(++e<r){t[e]=n[e]}return t}function Kn(n,t){var e=nn(n,t);return Wn(e)?e:undefined}var Nn=Rn;if(Dn&&Nn(new Dn(new ArrayBuffer(1)))!=g||On&&Nn(new On)!=l||kn&&Nn(kn.resolve())!=v||$n&&Nn(new $n)!=p||In&&Nn(new In)!=y){Nn=function(n){var t=bn.call(n),e=t==h?n.constructor:undefined,r=e?Hn(e):undefined;if(r){switch(r){case Fn:return g;case Sn:return l;case Mn:return v;case Tn:return p;case xn:return y}}return t}}function Pn(n,t){t=t==null?u:t;return!!t&&(typeof n=="number"||k.test(n))&&(n>-1&&n%1==0&&n<t)}function Bn(n,t,e){if(!et(e)){return false}var r=typeof t;if(r=="number"?Yn(e)&&Pn(t,e.length):r=="string"&&t in e){return Jn(e[t],n)}return false}function Gn(n){return!!hn&&hn in n}function Xn(n){var t=n&&n.constructor,e=typeof t=="function"&&t.prototype||dn;return n===e}function Hn(n){if(n!=null){try{return vn.call(n)}catch(n){}try{return n+""}catch(n){}}return""}function qn(n,t,e){var r=-1,i=ut(n),o=i.length,u=o-1;if(e?Bn(n,t,e):t===undefined){t=1}else{t=zn(at(t),0,o)}while(++r<t){var s=Vn(r,u),a=i[s];i[s]=i[r];i[r]=a}i.length=t;return i}function Jn(n,t){return n===t||n!==n&&t!==t}function Qn(n){return Zn(n)&&pn.call(n,"callee")&&(!jn.call(n,"callee")||bn.call(n)==f)}var Un=Array.isArray;function Yn(n){return n!=null&&tt(n.length)&&!nt(n)}function Zn(n){return rt(n)&&Yn(n)}function nt(n){var t=et(n)?bn.call(n):"";return t==c||t==d}function tt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=u}function et(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function rt(n){return!!n&&typeof n=="object"}function it(n){return typeof n=="string"||!Un(n)&&rt(n)&&bn.call(n)==b}function ot(n){return typeof n=="symbol"||rt(n)&&bn.call(n)==m}function ut(n){if(!n){return[]}if(Yn(n)){return it(n)?an(n):_n(n)}if(gn&&n[gn]){return rn(n[gn]())}var t=Nn(n),e=t==l?on:t==p?sn:dt;return e(n)}function st(n){if(!n){return n===0?n:0}n=ft(n);if(n===o||n===-o){var t=n<0?-1:1;return t*s}return n===n?n:0}function at(n){var t=st(n),e=t%1;return t===t?e?t-e:t:0}function ft(n){if(typeof n=="number"){return n}if(ot(n)){return a}if(et(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=et(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(w,"");var e=C.test(n);return e||O.test(n)?X(n.slice(2),e?2:8):A.test(n)?a:+n}function ct(n){return Yn(n)?En(n):Ln(n)}function dt(n){return n?Z(n,ct(n)):[]}var lt=qn;var ht=1/0,vt=9007199254740991,pt=17976931348623157e292,bt=0/0;var mt="[object Function]",yt="[object GeneratorFunction]",gt="[object Symbol]";var jt=/^\s+|\s+$/g;var wt=/^[-+]0x[0-9a-f]+$/i;var At=/^0b[01]+$/i;var Ct=/^0o[0-7]+$/i;var Dt=/^(?:0|[1-9]\d*)$/;var Ot=parseFloat,kt=parseInt;var $t=Object.prototype;var It=$t.toString;var Ft=Math.floor,St=Math.min,Mt=Math.random;function Tt(n,t){return n+Ft(Mt()*(t-n+1))}function xt(n,t){t=t==null?vt:t;return!!t&&(typeof n=="number"||Dt.test(n))&&(n>-1&&n%1==0&&n<t)}function Et(n,t,e){if(!Vt(e)){return false}var r=typeof t;if(r=="number"?Rt(e)&&xt(t,e.length):r=="string"&&t in e){return zt(e[t],n)}return false}function zt(n,t){return n===t||n!==n&&t!==t}function Rt(n){return n!=null&&Lt(n.length)&&!Wt(n)}function Wt(n){var t=Vt(n)?It.call(n):"";return t==mt||t==yt}function Lt(n){return typeof n=="number"&&n>-1&&n%1==0&&n<=vt}function Vt(n){var t=typeof n;return!!n&&(t=="object"||t=="function")}function _t(n){return!!n&&typeof n=="object"}function Kt(n){return typeof n=="symbol"||_t(n)&&It.call(n)==gt}function Nt(n){if(!n){return n===0?n:0}n=Pt(n);if(n===ht||n===-ht){var t=n<0?-1:1;return t*pt}return n===n?n:0}function Pt(n){if(typeof n=="number"){return n}if(Kt(n)){return bt}if(Vt(n)){var t=typeof n.valueOf=="function"?n.valueOf():n;n=Vt(t)?t+"":t}if(typeof n!="string"){return n===0?n:+n}n=n.replace(jt,"");var e=At.test(n);return e||Ct.test(n)?kt(n.slice(2),e?2:8):wt.test(n)?bt:+n}function Bt(n,t,e){if(e&&typeof e!="boolean"&&Et(n,t,e)){t=e=undefined}if(e===undefined){if(typeof t=="boolean"){e=t;t=undefined}else if(typeof n=="boolean"){e=n;n=undefined}}if(n===undefined&&t===undefined){n=0;t=1}else{n=Nt(n);if(t===undefined){t=n;n=0}else{t=Nt(t)}}if(n>t){var r=n;n=t;t=r}if(e||n%1||t%1){var i=Mt();return St(n+i*(t-n+Ot("1e-"+((i+"").length-1))),t)}return Tt(n,t)}var Gt=Bt;const Xt=".sc-dsot-document-component-demo-h{display:block;margin-block:0;margin-inline:8px;border-inline-start:1px dashed transparent;border-inline-end:1px dashed transparent}[show-canvas].sc-dsot-document-component-demo-h{border-inline-start:1px dashed pink;border-inline-end:1px dashed pink}";const Ht=Xt;const qt=class{constructor(i){n(this,i);this.dsotOzonContentAnchorClick=t(this,"dsotOzonContentAnchorClick",7);this.handleRecursiveToggle=(n,t)=>{const e=this.getEmbeddedDocumentComponents(n);if(!e){return}for(const n of e.documentComponents){this.handleOpenToggle(n,t.next)}};this.DocumentComponent=({path:n})=>{const t=n.at(-1);if(!t){return e(r,null)}const{DocumentComponent:i}=this;const o=this.getEmbeddedDocumentComponents(t);return e("dso-document-component",{annotated:this.isAnnotated(t),bevatOntwerpInformatie:!!t.bevatOntwerpInformatie,filtered:this.isOpen(t)?this.isFiltered(t):this.hasFilteredChildren(t),genesteOntwerpInformatie:this.hasNestedDraft(t),gereserveerd:t.gereserveerd,heading:"h2",inhoud:t.inhoud,label:t.labelXml,openAnnotation:this.isOpenedAnnotation(t),notApplicable:this.isNotApplicable(t)||n.some((n=>this.isNotApplicable(n))),nummer:t.nummerXml,onDsoAnnotationToggle:()=>this.handleAnnotationToggle(t),onDsoOpenToggle:()=>this.handleOpenToggle(t),onDsoOzonContentAnchorClick:n=>this.handleOzonContentAnchorClick(n),open:this.isOpen(t),opschrift:t.opschrift,type:t.type,vervallen:t.vervallen,wijzigactie:t.wijzigactie,recursiveToggle:this.recursiveToggleState(t),onDsoRecursiveToggle:n=>this.handleRecursiveToggle(t,n.detail)},this.isOpenedAnnotation(t)&&e("div",{slot:"annotations"},e("dso-annotation-locatie",{active:this.isCheckedSlideToggle(t),"gewijzigde-locatie":true,locatieNoemer:"Winkelgebied",onDsoActiveChange:()=>this.handleSelectableChange(t)},e("span",{class:"symboolcode",slot:"symbool","data-symboolcode":"vszt030"}))),this.showContent(t)&&(o===null||o===void 0?void 0:o.documentComponents.length)&&e("ul",{class:"dso-document-component-list"},o.documentComponents.map((t=>e("li",{key:t.documentTechnischId},e(i,{path:[...n,t]}))))))};this.MenuButton=({documentComponent:n})=>{const{labelXml:t,nummerXml:i,type:o}=n;return e("button",{type:"button",onClick:()=>this.document=n},!t&&!i?e("span",null,e("i",null,o)):e(r,null,t&&e(r,null,e("dso-ozon-content",{content:t,inline:true})),i&&e(r,null," ",e("dso-ozon-content",{content:i,inline:true}))))};this.showCanvas=false;this.jsonFile=undefined;this.openDefault=false;this.response=undefined;this.document=undefined;this.openOrClosed=[];this.openedAnnotation=[];this.filtered=[];this.notApplicable=[];this.activeAnnotationSelectables=[]}async jsonFileWatcher(){this.openOrClosed=[];await this.loadData()}async openDefaultWatcher(){this.openOrClosed=[];await this.loadData()}async componentDidLoad(){await this.loadData()}getEmbeddedDocumentComponents(n){var t,e;if((t=n===null||n===void 0?void 0:n._embedded)===null||t===void 0?void 0:t.ontwerpTekststructuurDocumentComponenten){return{documentComponents:n._embedded.ontwerpTekststructuurDocumentComponenten,ontwerp:true}}if((e=n===null||n===void 0?void 0:n._embedded)===null||e===void 0?void 0:e.tekststructuurDocumentComponenten){return{documentComponents:n._embedded.tekststructuurDocumentComponenten,ontwerp:false}}return undefined}concatEmbeddedDocumentComponents(n){var t,e;const r=[...(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents)!==null&&e!==void 0?e:[]];for(const n of r){r.push(...this.concatEmbeddedDocumentComponents(n))}return r}selectRandomDocumentComponents(n,t=[]){const e=this.concatEmbeddedDocumentComponents(n).filter((n=>!t.includes(n)));const r=Gt(0,Math.floor(e.length/10));return lt(e,r)}async loadData(){var n,t;if(!this.jsonFile){this.response=undefined;this.document=undefined;return}this.response=await fetch(this.jsonFile).then((n=>n.json()));this.document=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents[0];if(((t=this.document)===null||t===void 0?void 0:t.type)==="LICHAAM"){this.notApplicable=this.selectRandomDocumentComponents(this.document);this.filtered=this.selectRandomDocumentComponents(this.document,this.notApplicable)}else{this.notApplicable=[];this.filtered=[]}}handleOpenToggle(n,t){const e=typeof t==="boolean"?t:this.openOrClosed.includes(n);if(e&&this.openOrClosed.includes(n)){this.openOrClosed=this.openOrClosed.filter((t=>t!==n))}else if(!e&&!this.openOrClosed.includes(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleAnnotationToggle(n){this.openedAnnotation=this.isOpenedAnnotation(n)?this.openedAnnotation.filter((t=>t!==n)):[...this.openedAnnotation,n];if(!this.isOpen(n)){this.openOrClosed=[...this.openOrClosed,n]}}handleSelectableChange(n){this.activeAnnotationSelectables=this.isCheckedSlideToggle(n)?this.activeAnnotationSelectables.filter((t=>t!==n)):[...this.activeAnnotationSelectables,n]}handleOzonContentAnchorClick(n){this.dsotOzonContentAnchorClick.emit(n.detail)}isCheckedSlideToggle(n){return this.activeAnnotationSelectables.includes(n)}hasFilteredChildren(n){var t,e;return this.filtered.includes(n)||((e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>this.hasFilteredChildren(n))))!==null&&e!==void 0?e:false)}isOpen(n){return n.type==="LID"||this.openDefault?!this.openOrClosed.includes(n):this.openOrClosed.includes(n)}isOpenedAnnotation(n){return this.openedAnnotation.includes(n)}isFiltered(n){return this.filtered.includes(n)}isNotApplicable(n){return this.notApplicable.includes(n)}hasNestedDraft(n){var t,e;return(e=(t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.some((n=>!!n.bevatOntwerpInformatie||this.hasNestedDraft(n))))!==null&&e!==void 0?e:false}showContent(n){var t;return this.isOpen(n)&&!!(((t=this.getEmbeddedDocumentComponents(n))===null||t===void 0?void 0:t.documentComponents.length)||n.inhoud)}recursiveToggleState(n){const t=this.getEmbeddedDocumentComponents(n);if(!t||t.documentComponents.length<=1||!t.documentComponents.some((n=>n.type==="ARTIKEL"))){return undefined}return t.documentComponents.every((n=>this.isOpen(n)))}isAnnotated(n){return n.type==="DIVISIE"||n.type==="DIVISIETEKST"||n.type==="ARTIKEL"||n.type==="LID"}render(){var n,t;const{DocumentComponent:r,MenuButton:i}=this;return e("dso-responsive-element",{key:"de29c193eb351b09de8553bc48817f04cb969fb2",class:"dso-document-components"},e("div",{key:"1fec20412411d0dc815f3e9624ecb66db3b5194f",class:"dso-navbar"},e("ul",{key:"efb0857515e2b029561fec6b5e8d20f020b3edc9",class:"dso-nav dso-nav-sub"},(t=(n=this.getEmbeddedDocumentComponents(this.response))===null||n===void 0?void 0:n.documentComponents)===null||t===void 0?void 0:t.map((n=>e("li",{class:this.document===n?"dso-active":undefined},e(i,{documentComponent:n})))))),this.document&&e(r,{key:"c264f48d2a3cff5ea464ac694a2bd5df63f7ea21",path:[this.document]}))}static get watchers(){return{jsonFile:["jsonFileWatcher"],openDefault:["openDefaultWatcher"]}}};qt.style=Ht;export{qt as dsot_document_component_demo};
+//# sourceMappingURL=p-bc0a6bac.entry.js.map