@dso-toolkit/core 62.23.0 → 62.25.0

package/dist/dso-toolkit/p-616ea03e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["annotationOutputCss","DsoAnnotationOutputStyle0","AnnotationOutput","this","toggleHandler","e","dsoClose","emit","originalEvent","render","h","key","id","identifier","open","annotationPrefix","class","name","type","onClick","icon","Heading","_a","children","heading","props","__rest","Object","assign","documentComponentCss","DsoDocumentComponentStyle0","wijzigActieLabels","nieuweContainer","verwijder","verwijderContainer","voegtoe","DocumentComponent","handleHeadingClick","dsoOpenToggle","handleOzonContentAnchorClick","dsoOzonContentAnchorClick","ozonContentAnchorClick","detail","handleRecursiveToggleClick","dsoRecursiveToggle","current","recursiveToggle","next","wijzigactieLabel","wijzigactie","suffix","vervallen","gereserveerd","undefined","collapsible","label","nummer","opschrift","alternativeTitle","showHeading","bevatOntwerpInformatie","annotated","Host","part","toString","notApplicable","Fragment","content","onDsoAnchorClick","mark","text","call","onDsoOzonContentMarkItemHighlight","dsoMarkItemHighlight","source","inline","title","genesteOntwerpInformatie","status","compact","openAnnotation","onDsoClick","dsoAnnotationToggle","inhoud","slideToggleCss","DsoSlideToggleStyle0","SlideToggle","v4","handleSwitch","dsoActiveChange","checked","componentWillLoad","hasVisibleLabel","host","querySelector","role","disabled","accessibleLabel","labelledbyId","xmlns","width","height","viewBox","fill","rx","cy","r","htmlFor"],"sources":["src/components/annotation-output/annotation-output.scss?tag=dso-annotation-output","src/components/annotation-output/annotation-output.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","src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\ndso-annotation-output {\r\n  display: block;\r\n}\r\n\r\n.dso-annotation-header {\r\n  align-items: center;\r\n  background-color: colors.$grijs-5;\r\n  clear: both;\r\n  display: flex;\r\n  margin-bottom: 2px;\r\n  margin-top: units.$u1;\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n\r\n  > [slot=\"title\"] {\r\n    color: colors.$zwart;\r\n    font-size: 1.25rem;\r\n    margin-bottom: 0;\r\n    margin-top: 0;\r\n  }\r\n\r\n  > :nth-child(2) {\r\n    margin-left: auto;\r\n  }\r\n}\r\n\r\ndso-responsive-element[small],\r\ndso-responsive-element[medium] {\r\n  .dso-annotation-header {\r\n    display: grid;\r\n    row-gap: units.$u1;\r\n\r\n    *[slot=\"title\"] {\r\n      grid-row: 1;\r\n      grid-column: 1;\r\n    }\r\n\r\n    *[slot=\"addons\"] {\r\n      grid-row: 2;\r\n      grid-column: 1;\r\n      margin-left: initial;\r\n    }\r\n\r\n    .dso-annotation-close-button {\r\n      grid-row: 1;\r\n      grid-column: 2;\r\n      margin-left: units.$u1;\r\n      text-align: end;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-annotation-content {\r\n  @include set-colors.apply(colors.$grijs-5);\r\n\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n}\r\n\r\n.dso-annotation-close-button {\r\n  margin-left: units.$u4;\r\n}\r\n\r\n.dso-annotation-prefix {\r\n  font-style: italic;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop({ reflect: true })\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * Set to `true` to show content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n  private toggleHandler = (e: MouseEvent) => {\r\n    this.dsoClose.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} open={this.open}>\r\n          {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n          <div class=\"dso-annotation-header\">\r\n            <slot name=\"title\" />\r\n            <slot name=\"addons\" />\r\n            <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n              <span class=\"sr-only\">Toelichting sluiten</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"dso-annotation-content\">\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\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-left: units.$u1;\r\n  margin-right: 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-top: units.$u1 * 0.5;\r\n  padding-bottom: 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();\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    left: -3px;\r\n    position: absolute;\r\n    display: block;\r\n    width: 3px;\r\n    top: 0;\r\n    bottom: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .heading-container {\r\n    margin-bottom: 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-bottom: 0;\r\n  }\r\n\r\n  .editaction-label {\r\n    margin-left: 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-left: 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.editaction-label {\r\n  font-style: italic;\r\n  margin-left: units.$u1;\r\n}\r\n\r\n.content,\r\n.heading-container {\r\n  padding-right: units.$u1;\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 Output is opened, set this to true.\r\n   */\r\n  @Prop()\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                    <dso-annotation-button\r\n                      identifier=\"expandable\"\r\n                      open={this.openAnnotation}\r\n                      onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    ></dso-annotation-button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"annotation-container\" part=\"_annotation-container\">\r\n          <slot name=\"annotation\" />\r\n        </div>\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","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-63112de0.entry.js

@@ -1,2 +0,0 @@
-import{r,h as s}from"./p-1754d0a9.js";const a=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";const e=a;const o=class{constructor(s){r(this,s);this.progress=undefined;this.min=0;this.max=100}render(){const r=Math.round(this.progress);const a=`${r}%`;return s("div",{key:"1a45c38772e90c8b968b3f7b977f268e2b4690a6",class:"progress"},s("span",{key:"313b816b1e77a99897f35766f283cbdc241e7e7d",class:"progress-bar",role:"progressbar","aria-labelledby":"progress-bar-label","aria-valuenow":r,"aria-valuemin":this.min,"aria-valuemax":this.max},s("span",{key:"319575966c1dd86f400a850b7b73945d487b306c",style:{width:`${a}`}})),s("span",{key:"afc0c3b8043f59cbaa30b175af3e4dfb4397af80",id:"progress-bar-label"},s("slot",{key:"d1340fc1c5180795f6b7a4277b54cf79eba1327b"})))}};o.style=e;export{o as dso_progress_bar};
-//# sourceMappingURL=p-63112de0.entry.js.map

package/dist/dso-toolkit/p-74a7baf5.entry.js

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as i,F as e,a as o}from"./p-1754d0a9.js";import{d as h}from"./p-23b5692c.js";import{v as a}from"./p-14616bce.js";function n(s){if(typeof s!=="string"){throw new TypeError("Expected a string")}return s.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}const r=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{padding:4px 16px}ul.sc-dso-autosuggest li.sc-dso-autosuggest .suggestion-row.sc-dso-autosuggest{display:flex;justify-content:space-between}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .extra.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest,.extra.sc-dso-autosuggest{color:#666}.extra.sc-dso-autosuggest{font-size:14px;line-height:21px}";const l=r;const u=class{constructor(i){s(this,i);this.dsoSelect=t(this,"dsoSelect",7);this.dsoChange=t(this,"dsoChange",7);this.dsoSearch=t(this,"dsoSearch",7);this.listboxId=a();this.inputId=a();this.labelId=a();this.debouncedEmitValue=h((s=>{this.dsoChange.emit(s);this.debouncedShowLoading()}),200);this.debouncedShowLoading=h((()=>{if(this.inputValue){this.showLoading=true}}),this.loadingDelayed);this.inputValue="";this.onInput=s=>{if(!(s.target instanceof HTMLInputElement)){return}this.showLoading=!this.loadingDelayed;this.inputValue=s.target.value;this.debouncedEmitValue(s.target.value.match(/(\S+)/g)?s.target.value:"")};this.onFocusIn=()=>{if(this.suggestOnFocus){this.openSuggestions()}};this.onKeyDown=s=>{if(s.defaultPrevented||this.loading){return}switch(s.key){case"ArrowDown":if(!this.showSuggestions){this.openSuggestions("first")}else{this.selectNextSuggestion()}break;case"ArrowUp":if(!this.showSuggestions){this.openSuggestions("last")}else{this.selectPreviousSuggestion()}break;case"Tab":this.closeSuggestions();return;case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}s.preventDefault()};this.suggestions=null;this.loading=false;this.loadingLabel="Een moment geduld.";this.loadingDelayed=undefined;this.notFoundLabel=undefined;this.suggestOnFocus=false;this.showSuggestions=false;this.selectedSuggestion=undefined;this.notFound=false;this.showLoading=false}suggestionsWatcher(){this.resetSelectedSuggestion();if((!this.showSuggestions||!this.notFound)&&this.inputValue){this.openSuggestions()}else if((this.showSuggestions||this.notFound)&&!this.inputValue){this.closeSuggestions()}}onDocumentClick(s){if((this.showSuggestions||this.notFound)&&this.listbox&&s.target instanceof Node&&!this.listbox.contains(s.target)&&this.input!==s.target){this.closeSuggestions()}}connectedCallback(){setTimeout((()=>{const s=this.host.querySelector('input[type="text"]');if(!(s instanceof HTMLInputElement)){return}this.input=s;if(s.id){this.inputId=s.id}else{s.id=this.inputId}if(!this.input.labels||this.input.labels.length<1){return}const t=this.input.labels[0];if(t===null||t===void 0?void 0:t.id){this.labelId=t.id}else if(t){t.id=this.labelId}this.input.setAttribute("role","combobox");this.input.setAttribute("aria-haspopup","listbox");this.input.setAttribute("aria-controls",this.listboxId);this.input.setAttribute("aria-expanded","false");this.input.setAttribute("autocomplete","off");this.input.setAttribute("aria-autocomplete","list");this.input.setAttribute("aria-activedescendant","");this.input.addEventListener("input",this.onInput);this.input.addEventListener("keydown",this.onKeyDown);this.input.addEventListener("focusin",this.onFocusIn)}))}disconnectedCallback(){var s,t,i;(s=this.input)===null||s===void 0?void 0:s.removeEventListener("input",this.onInput);(t=this.input)===null||t===void 0?void 0:t.removeEventListener("keydown",this.onKeyDown);(i=this.input)===null||i===void 0?void 0:i.removeEventListener("focusin",this.onFocusIn)}markTerms(s,t){if(!s||!t||t.length===0||t[0]===undefined){return[""]}const e=new RegExp(`(${n(t[0])})`,"gi");return s.split(e).map((s=>{if(!s){return""}if(e.test(s)){return i("mark",null,s)}if(t.length===1){return i("span",null,s)}return this.markTerms(s,t.slice(1))}))}selectSuggestion(s){var t;this.selectedSuggestion=s;(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(s))}selectFirstSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[0];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectLastSuggestion(){var s;if(!this.suggestions){return}this.selectedSuggestion=this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectNextSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=(s=this.suggestions[i+1])!==null&&s!==void 0?s:this.suggestions[0];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}selectPreviousSuggestion(){var s,t;if(!this.suggestions){return}const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=(s=this.suggestions[i-1])!==null&&s!==void 0?s:this.suggestions[this.suggestions.length-1];if(this.selectedSuggestion){(t=this.input)===null||t===void 0?void 0:t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))}}resetSelectedSuggestion(){var s;this.showLoading=!this.loadingDelayed;this.notFound=false;this.selectedSuggestion=undefined;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-activedescendant","")}openSuggestions(s){var t,i,e,o;this.showSuggestions=(t=this.suggestions&&this.suggestions.length>0)!==null&&t!==void 0?t:false;this.notFound=(e=((i=this.suggestions)===null||i===void 0?void 0:i.length)===0)!==null&&e!==void 0?e:false;(o=this.input)===null||o===void 0?void 0:o.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString());if(this.showSuggestions&&s==="first"){this.selectFirstSuggestion()}else if(this.showSuggestions&&s==="last"){this.selectLastSuggestion()}}closeSuggestions(){var s;this.showSuggestions=false;this.notFound=false;(s=this.input)===null||s===void 0?void 0:s.setAttribute("aria-expanded","false");this.selectFirstSuggestion()}pickSelectedValue(){var s;if(this.selectedSuggestion&&this.showSuggestions){this.dsoSelect.emit(this.selectedSuggestion)}else{this.dsoSearch.emit((s=this.input)===null||s===void 0?void 0:s.value)}this.closeSuggestions()}listboxItemId(s){if(!this.suggestions){return""}return`${this.inputId}-${this.suggestions.indexOf(s)+1}`}getChunkedExtras(s){return s.reduce(((s,t,i)=>{var e;const o=Math.floor(i/2);if(!s[o]){s[o]=[]}(e=s[o])===null||e===void 0?void 0:e.push(t);return s}),[])}render(){var s,t;const o=(t=(s=this.input)===null||s===void 0?void 0:s.value.split(" ").filter((s=>s)))!==null&&t!==void 0?t:[];return i(e,null,i("slot",{key:"09b8007a9093730c9198eb3298b7c653138c2647"}),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):i("ul",{role:"listbox","aria-live":"polite",id:this.listboxId,"aria-labelledby":this.labelId,ref:s=>this.listbox=s,hidden:!this.showSuggestions&&!this.notFound},this.showSuggestions&&this.suggestions&&this.suggestions.map((s=>i("li",{role:"option",id:this.listboxItemId(s),key:s.value,onMouseEnter:()=>this.selectSuggestion(s),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(s===this.selectedSuggestion).toString(),"aria-label":s.value},i("div",{class:"suggestion-row"},i("span",{class:"value"},this.markTerms(s.value,o)),s.type?i("span",{class:"type"},this.markTerms(s.type,o)):undefined),s.extras&&this.getChunkedExtras(s.extras).map((s=>i("div",{class:"suggestion-row"},s.map((s=>i("span",{class:"extra"},this.markTerms(s,o))))))))))||this.notFound&&i("li",null,i("span",{class:"value"},!this.notFoundLabel?this.markTerms(`${this.inputValue} is niet gevonden.`,o):i("span",null,this.notFoundLabel)))))}get host(){return o(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};u.style=l;export{u as dso_autosuggest};
-//# sourceMappingURL=p-74a7baf5.entry.js.map

package/dist/dso-toolkit/p-74a7baf5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["escapeStringRegexp","string","TypeError","replace","autosuggestCss","DsoAutosuggestStyle0","Autosuggest","this","listboxId","v4","inputId","labelId","debouncedEmitValue","debounce","value","dsoChange","emit","debouncedShowLoading","inputValue","showLoading","loadingDelayed","onInput","event","target","HTMLInputElement","match","onFocusIn","suggestOnFocus","openSuggestions","onKeyDown","defaultPrevented","loading","key","showSuggestions","selectNextSuggestion","selectPreviousSuggestion","closeSuggestions","pickSelectedValue","preventDefault","suggestionsWatcher","resetSelectedSuggestion","notFound","onDocumentClick","listbox","Node","contains","input","connectedCallback","setTimeout","host","querySelector","id","labels","length","label","setAttribute","addEventListener","disconnectedCallback","_a","removeEventListener","_b","_c","markTerms","suggestionValue","terms","undefined","termRegex","RegExp","split","map","valuePart","test","h","slice","selectSuggestion","suggestion","selectedSuggestion","listboxItemId","selectFirstSuggestion","suggestions","selectLastSuggestion","index","indexOf","_d","toString","dsoSelect","dsoSearch","getChunkedExtras","extras","reduce","resultArray","extra","chunkIndex","Math","floor","push","render","filter","t","Fragment","class","loadingLabel","role","ref","element","hidden","onMouseEnter","onMouseLeave","onClick","type","chunk","c","notFoundLabel"],"sources":["../../node_modules/escape-string-regexp/index.js","src/components/autosuggest/autosuggest.scss?tag=dso-autosuggest&encapsulation=scoped","src/components/autosuggest/autosuggest.tsx"],"sourcesContent":["export default function escapeStringRegexp(string) {\n\tif (typeof string !== 'string') {\n\t\tthrow new TypeError('Expected a string');\n\t}\n\n\t// Escape characters with special meaning either inside or outside character sets.\n\t// Use a simple backslash escape when it’s always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.\n\treturn string\n\t\t.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n\t\t.replace(/-/g, '\\\\x2d');\n}\n","@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"autosuggest.variables\" as core-autosuggest-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n}\r\n\r\nul,\r\n.autosuggest-progress-box {\r\n  background-clip: padding-box;\r\n  background-color: core-autosuggest-variables.$background-color;\r\n  border: 1px solid core-autosuggest-variables.$border-color;\r\n  border-radius: scaffolding.$border-radius-base;\r\n  box-shadow: core-autosuggest-variables.$box-shadow;\r\n  list-style-type: none;\r\n  margin-top: 2px;\r\n  padding: units.$u1 * 0.5 0;\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  top: 100%;\r\n  z-index: zindex.$autosuggest;\r\n}\r\n\r\n.autosuggest-progress-box {\r\n  padding: units.$u1 * 1.5 units.$u1;\r\n}\r\n\r\nul {\r\n  padding: units.$u1 0;\r\n\r\n  li {\r\n    padding: units.$u1 * 0.5 units.$u2;\r\n\r\n    .suggestion-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n    }\r\n  }\r\n}\r\n\r\nli[aria-selected=\"true\"] {\r\n  cursor: pointer;\r\n  background-color: colors.$grasgroen;\r\n\r\n  &,\r\n  .type,\r\n  .extra {\r\n    color: colors.$wit;\r\n  }\r\n}\r\n\r\nmark {\r\n  font-weight: 700;\r\n  background-color: inherit;\r\n  color: inherit;\r\n  padding: 0;\r\n}\r\n\r\n.type,\r\n.extra {\r\n  color: colors.$grijs-60;\r\n}\r\n\r\n.extra {\r\n  font-size: typography.$root-font-size-small;\r\n  line-height: typography.$root-font-size-small * typography.$line-height-base;\r\n}\r\n","import { Component, Element, h, Listen, Prop, State, Fragment, Event, EventEmitter, VNode, Watch } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { v4 } from \"uuid\";\r\nimport escapeStringRegexp from \"escape-string-regexp\";\r\n\r\nimport { Suggestion } from \"./autosuggest.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-autosuggest\",\r\n  styleUrl: \"autosuggest.scss\",\r\n  scoped: true,\r\n})\r\nexport class Autosuggest {\r\n  /**\r\n   * The suggestions for the value of the slotted input element. Optionally a\r\n   * Suggestion can have a `type` and `item`.\r\n   *\r\n   * The `type` is used to style the suggestion. `item` can be use to reference\r\n   * the original object that was used to create the suggestion.\r\n   *\r\n   * The value should be null when no suggestions have been fetched.\r\n   */\r\n  @Prop()\r\n  readonly suggestions: Suggestion[] | null = null;\r\n\r\n  /**\r\n   * Shows progress indicator when fetching results.\r\n   */\r\n  @Prop()\r\n  loading = false;\r\n\r\n  /**\r\n   * To override progress indicator's default loading label.\r\n   */\r\n  @Prop()\r\n  loadingLabel?: string = \"Een moment geduld.\";\r\n\r\n  /**\r\n   * To delay progress indicator showing (in ms).\r\n   */\r\n  @Prop()\r\n  loadingDelayed?: number;\r\n\r\n  /**\r\n   * To show text when no results are found.\r\n   */\r\n  @Prop()\r\n  notFoundLabel?: string;\r\n\r\n  /**\r\n   * Whether the previous suggestions will be presented when the input gets focus again.\r\n   */\r\n  @Prop()\r\n  suggestOnFocus = false;\r\n\r\n  /**\r\n   * Emitted when a suggestion is selected.\r\n   * The `detail` property of the `CustomEvent` will contain the selected suggestion.\r\n   */\r\n  @Event()\r\n  dsoSelect!: EventEmitter<Suggestion>;\r\n\r\n  /**\r\n   * This is emitted debounced for every change for the slotted input type=text element.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<string>;\r\n\r\n  /**\r\n   * Emitted when enter is pressed.\r\n   * The `detail` property of the `CustomEvent` will contain the input text.\r\n   */\r\n  @Event()\r\n  dsoSearch!: EventEmitter<string>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoAutosuggestElement;\r\n\r\n  @State()\r\n  showSuggestions = false;\r\n\r\n  @State()\r\n  selectedSuggestion: Suggestion | undefined;\r\n\r\n  @State()\r\n  notFound = false;\r\n\r\n  @State()\r\n  showLoading = false;\r\n\r\n  @Watch(\"suggestions\")\r\n  suggestionsWatcher() {\r\n    this.resetSelectedSuggestion();\r\n\r\n    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {\r\n      this.openSuggestions();\r\n    } else if ((this.showSuggestions || this.notFound) && !this.inputValue) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  private input?: HTMLInputElement;\r\n\r\n  private listbox: HTMLUListElement | undefined;\r\n\r\n  private listboxId: string = v4();\r\n\r\n  private inputId: string = v4();\r\n\r\n  private labelId: string = v4();\r\n\r\n  private debouncedEmitValue = debounce((value: string) => {\r\n    this.dsoChange.emit(value);\r\n    this.debouncedShowLoading();\r\n  }, 200);\r\n\r\n  private debouncedShowLoading = debounce(() => {\r\n    if (this.inputValue) {\r\n      this.showLoading = true;\r\n    }\r\n  }, this.loadingDelayed);\r\n\r\n  private inputValue = \"\";\r\n\r\n  private onInput = (event: Event) => {\r\n    if (!(event.target instanceof HTMLInputElement)) {\r\n      return;\r\n      // throw new Error(\"event.target is not instanceof HTMLInputElement\"); #2293\r\n    }\r\n\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.inputValue = event.target.value;\r\n    this.debouncedEmitValue(event.target.value.match(/(\\S+)/g) ? event.target.value : \"\");\r\n  };\r\n\r\n  private onFocusIn = () => {\r\n    if (this.suggestOnFocus) {\r\n      this.openSuggestions();\r\n    }\r\n  };\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  onDocumentClick(event: MouseEvent) {\r\n    if (\r\n      (this.showSuggestions || this.notFound) &&\r\n      this.listbox &&\r\n      event.target instanceof Node &&\r\n      !this.listbox.contains(event.target) &&\r\n      this.input !== event.target\r\n    ) {\r\n      this.closeSuggestions();\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    setTimeout(() => {\r\n      const input = this.host.querySelector('input[type=\"text\"]');\r\n      if (!(input instanceof HTMLInputElement)) {\r\n        return;\r\n        // throw new ReferenceError(\"Mandatory text input not found\"); #2293\r\n      }\r\n\r\n      this.input = input;\r\n      if (input.id) {\r\n        this.inputId = input.id;\r\n      } else {\r\n        input.id = this.inputId;\r\n      }\r\n\r\n      if (!this.input.labels || this.input.labels.length < 1) {\r\n        return;\r\n        // throw new ReferenceError(\"Mandatory label for text input not found\"); #2293\r\n      }\r\n\r\n      const label = this.input.labels[0];\r\n      if (label?.id) {\r\n        this.labelId = label.id;\r\n      } else if (label) {\r\n        label.id = this.labelId;\r\n      }\r\n\r\n      this.input.setAttribute(\"role\", \"combobox\");\r\n      this.input.setAttribute(\"aria-haspopup\", \"listbox\");\r\n      this.input.setAttribute(\"aria-controls\", this.listboxId);\r\n      this.input.setAttribute(\"aria-expanded\", \"false\");\r\n      this.input.setAttribute(\"autocomplete\", \"off\");\r\n      this.input.setAttribute(\"aria-autocomplete\", \"list\");\r\n      this.input.setAttribute(\"aria-activedescendant\", \"\");\r\n      this.input.addEventListener(\"input\", this.onInput);\r\n      this.input.addEventListener(\"keydown\", this.onKeyDown);\r\n      this.input.addEventListener(\"focusin\", this.onFocusIn);\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.input?.removeEventListener(\"input\", this.onInput);\r\n    this.input?.removeEventListener(\"keydown\", this.onKeyDown);\r\n    this.input?.removeEventListener(\"focusin\", this.onFocusIn);\r\n  }\r\n\r\n  private markTerms(suggestionValue: string, terms: string[]): (VNode | string)[] {\r\n    if (!suggestionValue || !terms || terms.length === 0 || terms[0] === undefined) {\r\n      return [\"\"];\r\n    }\r\n\r\n    const termRegex = new RegExp(`(${escapeStringRegexp(terms[0])})`, \"gi\");\r\n\r\n    return suggestionValue.split(termRegex).map((valuePart: string) => {\r\n      if (!valuePart) {\r\n        return \"\";\r\n      }\r\n\r\n      if (termRegex.test(valuePart)) {\r\n        return <mark>{valuePart}</mark>;\r\n      }\r\n\r\n      if (terms.length === 1) {\r\n        return <span>{valuePart}</span>;\r\n      }\r\n\r\n      return this.markTerms(valuePart, terms.slice(1));\r\n    });\r\n  }\r\n\r\n  private selectSuggestion(suggestion: Suggestion) {\r\n    this.selectedSuggestion = suggestion;\r\n\r\n    this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(suggestion));\r\n  }\r\n\r\n  private selectFirstSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    this.selectedSuggestion = this.suggestions[0];\r\n\r\n    if (this.selectedSuggestion) {\r\n      this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n    }\r\n  }\r\n\r\n  private selectLastSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    this.selectedSuggestion = this.suggestions[this.suggestions.length - 1];\r\n\r\n    if (this.selectedSuggestion) {\r\n      this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n    }\r\n  }\r\n\r\n  private selectNextSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : -1;\r\n\r\n    this.selectedSuggestion = this.suggestions[index + 1] ?? this.suggestions[0];\r\n\r\n    if (this.selectedSuggestion) {\r\n      this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n    }\r\n  }\r\n\r\n  private selectPreviousSuggestion() {\r\n    if (!this.suggestions) {\r\n      return;\r\n    }\r\n\r\n    const index = this.selectedSuggestion ? this.suggestions.indexOf(this.selectedSuggestion) : 0;\r\n\r\n    this.selectedSuggestion = this.suggestions[index - 1] ?? this.suggestions[this.suggestions.length - 1];\r\n\r\n    if (this.selectedSuggestion) {\r\n      this.input?.setAttribute(\"aria-activedescendant\", this.listboxItemId(this.selectedSuggestion));\r\n    }\r\n  }\r\n\r\n  private resetSelectedSuggestion() {\r\n    this.showLoading = !this.loadingDelayed;\r\n    this.notFound = false;\r\n    this.selectedSuggestion = undefined;\r\n    this.input?.setAttribute(\"aria-activedescendant\", \"\");\r\n  }\r\n\r\n  private openSuggestions(selectSuggestion?: \"first\" | \"last\") {\r\n    this.showSuggestions = (this.suggestions && this.suggestions.length > 0) ?? false;\r\n    this.notFound = this.suggestions?.length === 0 ?? false;\r\n    this.input?.setAttribute(\"aria-expanded\", (this.showSuggestions || this.notFound).toString());\r\n\r\n    if (this.showSuggestions && selectSuggestion === \"first\") {\r\n      this.selectFirstSuggestion();\r\n    } else if (this.showSuggestions && selectSuggestion === \"last\") {\r\n      this.selectLastSuggestion();\r\n    }\r\n  }\r\n\r\n  private closeSuggestions() {\r\n    this.showSuggestions = false;\r\n    this.notFound = false;\r\n    this.input?.setAttribute(\"aria-expanded\", \"false\");\r\n    this.selectFirstSuggestion();\r\n  }\r\n\r\n  private pickSelectedValue() {\r\n    if (this.selectedSuggestion && this.showSuggestions) {\r\n      this.dsoSelect.emit(this.selectedSuggestion);\r\n    } else {\r\n      this.dsoSearch.emit(this.input?.value);\r\n    }\r\n\r\n    this.closeSuggestions();\r\n  }\r\n\r\n  private onKeyDown = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || this.loading) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"first\");\r\n        } else {\r\n          this.selectNextSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        if (!this.showSuggestions) {\r\n          this.openSuggestions(\"last\");\r\n        } else {\r\n          this.selectPreviousSuggestion();\r\n        }\r\n\r\n        break;\r\n\r\n      case \"Tab\":\r\n        this.closeSuggestions();\r\n        return;\r\n\r\n      case \"Escape\":\r\n        this.closeSuggestions();\r\n        break;\r\n\r\n      case \"Enter\":\r\n        this.pickSelectedValue();\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private listboxItemId(suggestion: Suggestion): string {\r\n    if (!this.suggestions) {\r\n      return \"\";\r\n    }\r\n    return `${this.inputId}-${this.suggestions.indexOf(suggestion) + 1}`;\r\n  }\r\n\r\n  private getChunkedExtras(extras: string[]): string[][] {\r\n    return extras.reduce((resultArray: string[][], extra, index) => {\r\n      const chunkIndex = Math.floor(index / 2);\r\n\r\n      if (!resultArray[chunkIndex]) {\r\n        resultArray[chunkIndex] = [];\r\n      }\r\n      resultArray[chunkIndex]?.push(extra);\r\n      return resultArray;\r\n    }, []);\r\n  }\r\n\r\n  render() {\r\n    const terms = this.input?.value.split(\" \").filter((t) => t) ?? [];\r\n\r\n    return (\r\n      <>\r\n        <slot />\r\n        {this.loading && this.showLoading ? (\r\n          <div class=\"autosuggest-progress-box\">\r\n            <dso-progress-indicator label={this.loadingLabel}></dso-progress-indicator>\r\n          </div>\r\n        ) : (\r\n          <ul\r\n            role=\"listbox\"\r\n            aria-live=\"polite\"\r\n            id={this.listboxId}\r\n            aria-labelledby={this.labelId}\r\n            ref={(element) => (this.listbox = element)}\r\n            hidden={!this.showSuggestions && !this.notFound}\r\n          >\r\n            {(this.showSuggestions &&\r\n              this.suggestions &&\r\n              this.suggestions.map((suggestion) => (\r\n                <li\r\n                  role=\"option\"\r\n                  id={this.listboxItemId(suggestion)}\r\n                  key={suggestion.value}\r\n                  onMouseEnter={() => this.selectSuggestion(suggestion)}\r\n                  onMouseLeave={() => this.resetSelectedSuggestion()}\r\n                  onClick={() => this.pickSelectedValue()}\r\n                  aria-selected={(suggestion === this.selectedSuggestion).toString()}\r\n                  aria-label={suggestion.value}\r\n                >\r\n                  <div class=\"suggestion-row\">\r\n                    <span class=\"value\">{this.markTerms(suggestion.value, terms)}</span>\r\n                    {suggestion.type ? <span class=\"type\">{this.markTerms(suggestion.type, terms)}</span> : undefined}\r\n                  </div>\r\n                  {suggestion.extras &&\r\n                    this.getChunkedExtras(suggestion.extras).map((chunk) => (\r\n                      <div class=\"suggestion-row\">\r\n                        {chunk.map((c) => (\r\n                          <span class=\"extra\">{this.markTerms(c, terms)}</span>\r\n                        ))}\r\n                      </div>\r\n                    ))}\r\n                </li>\r\n              ))) ||\r\n              (this.notFound && (\r\n                <li>\r\n                  <span class=\"value\">\r\n                    {!this.notFoundLabel ? (\r\n                      this.markTerms(`${this.inputValue} is niet gevonden.`, terms)\r\n                    ) : (\r\n                      <span>{this.notFoundLabel}</span>\r\n                    )}\r\n                  </span>\r\n                </li>\r\n              ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/dso-toolkit/p-8486c46d.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as e}from"./p-1754d0a9.js";import{c as o}from"./p-8a1a6e56.js";const a=":host{display:block}*,*::after,*::before{box-sizing:border-box}.dso-banner{padding:16px 0;position:relative}.dso-banner.dso-compact{padding:12px 0}";const t=a;const r=class{constructor(e){s(this,e);this.status=undefined;this.compact=false;this.noIcon=true}render(){return e("section",{key:"a5cb823753eda49087b357498f5b92e3a042d46d",class:o("dso-banner",`alert-${this.status}`,{"dso-compact":this.compact}),role:"alert"},e("slot",{key:"9c76ee38f37a2f5d1c246d21bcfb40f801882de4"}))}};r.style=t;export{r as dso_banner};
-//# sourceMappingURL=p-8486c46d.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as e,c as s,h as a}from"./p-1754d0a9.js";import{v as i}from"./p-14616bce.js";const d=":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";const o=d;const t=class{constructor(a){e(this,a);this.dsoBaseLayerChange=s(this,"dsoBaseLayerChange",7);this.selectableRefs={};this.group=i();this.baseLayers=undefined}baseLayerChangeHandler(e){this.dsoBaseLayerChange.emit({activeBaseLayer:e})}componentDidRender(){this.baseLayers.filter((e=>{var s,a;return!e.disabled&&((a=(s=this.previousBaselayers)===null||s===void 0?void 0:s.find((s=>s.id===e.id)))===null||a===void 0?void 0:a.disabled)===true})).forEach((e=>{var s;(s=this.selectableRefs[e.id])===null||s===void 0?void 0:s.toggleInfo(false)}));this.previousBaselayers=this.baseLayers}render(){for(const e in this.selectableRefs){delete this.selectableRefs[e]}return a("fieldset",{key:"9393b34468f7e7c35fd8933d344353c42a50f627",class:"form-group dso-radios"},a("legend",{key:"aa1cf5cc8c0d9874c7b443072637bcacb9dca799",class:"sr-only"},"Achtergrond"),a("div",{key:"7c4236d2023cd6712e5f5761151990d7614a6c39",class:"dso-label-container"},a("span",{key:"3195ba776a980eed4eb47bf224d8617aa5debda4",class:"control-label","aria-hidden":"true"},"Achtergrond")),a("div",{key:"6561ad34fa4d0eeb3ec152c75e891109b8c1eda0",class:"dso-field-container"},this.baseLayers.map((e=>a("dso-selectable",{key:e.id,type:"radio",value:e.name,checked:e.checked,disabled:e.disabled,name:this.group,ref:s=>s&&(this.selectableRefs[e.id]=s),onDsoChange:()=>this.baseLayerChangeHandler(e)},e.name,e.info?a("p",{slot:"info"},e.info):null)))))}};t.style=o;export{t as dso_map_base_layers};
-//# sourceMappingURL=p-85326997.entry.js.map

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

@@ -1,2 +0,0 @@
-import{r as s,c as t,h as i,H as e,a}from"./p-1754d0a9.js";const o=":host{display:block}";const r=o;const l=[{width:624,alias:"large"},{width:375,alias:"medium"},{width:0,alias:"small"}];const h=class{constructor(i){s(this,i);this.dsoSizeChange=t(this,"dsoSizeChange",7);this.observer=new ResizeObserver((([s])=>{var t,i;if(!s){throw new Error("No entry found")}const e=(i=(t=l.find((t=>s.contentRect.width>=t.width)))===null||t===void 0?void 0:t.alias)!==null&&i!==void 0?i:l[0].alias;this.sizeAlias=e;this.dsoSizeChange.emit(e)}));this.sizeAlias=l[0].alias;this.sizeWidth=0}async getSize(){return this.sizeAlias}componentWillLoad(){this.observer.observe(this.host)}disconnectedCallback(){this.observer.unobserve(this.host)}render(){return i(e,{key:"2029e4f353845ef8216aca8b34766d1994dc1978",small:this.sizeAlias==="small",medium:this.sizeAlias==="medium",large:this.sizeAlias==="large"},i("slot",{key:"1091f3ff1b743749016eb05770a1832b71addad4"}))}get host(){return a(this)}};h.style=r;export{h as dso_responsive_element};
-//# sourceMappingURL=p-d8815ab6.entry.js.map