@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/components/document-component.js.map

@@ -1 +1 @@
-{"file":"document-component.js","mappings":"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","names":[],"sources":["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":["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.not-applicable {\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 ? false : 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 type=\"button\" class=\"toggle-button\">\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                  </button>\r\n                )}\r\n                <div class=\"title\">\r\n                  {this.notApplicable && <span class=\"not-applicable\">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"],"version":3}
+{"file":"document-component.js","mappings":"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","names":[],"sources":["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":["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"],"version":3}

package/dist/components/dropdown-menu.js

@@ -5,250 +5,251 @@ import { g as getActiveElement } from './get-active-element.js';
 import { v as v4 } from './v4.js';
 
 const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
+const DsoDropdownMenuStyle0 = dropdownMenuCss;
 
 const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class DropdownMenu extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.focusOutListener = (event) => {
-      if (this.open &&
-        (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.focusOutListener = (event) => {
+            if (this.open &&
+                (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))) {
+                this.open = false;
+            }
+        };
+        this.escape = () => {
+            this.button.focus();
+            this.open = false;
+        };
         this.open = false;
-      }
-    };
-    this.escape = () => {
-      this.button.focus();
-      this.open = false;
-    };
-    this.open = false;
-    this.dropdownAlign = "left";
-    this.dropdownOptionsOffset = 2;
-    this.checkable = false;
-    this.boundary = undefined;
-    this.placement = undefined;
-    this.strategy = "auto";
-  }
-  watchPosition() {
-    if (!this.popper) {
-      return;
+        this.dropdownAlign = "left";
+        this.dropdownOptionsOffset = 2;
+        this.checkable = false;
+        this.boundary = undefined;
+        this.placement = undefined;
+        this.strategy = "auto";
     }
-    this.popper.setOptions({
-      placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
-    });
-  }
-  watchOptionsOffset() {
-    var _a;
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, this.dropdownOptionsOffset],
-          },
-        },
-      ],
-    });
-  }
-  watchStrategy() {
-    this.setStrategy();
-  }
-  setStrategy() {
-    if (!this.popper) {
-      return;
-    }
-    if (this.strategy === "absolute" || this.strategy === "fixed") {
-      this.popper.setOptions({
-        strategy: this.strategy,
-      });
-      return;
-    }
-    let element = this.host;
-    const boundary = this.boundary || document;
-    while (element && element.parentNode !== boundary) {
-      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
-      if (element !== null && hasOverflow(element)) {
+    watchPosition() {
+        if (!this.popper) {
+            return;
+        }
         this.popper.setOptions({
-          strategy: "fixed",
+            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
         });
-        return;
-      }
     }
-    this.popper.setOptions({
-      strategy: "absolute",
-    });
-  }
-  get button() {
-    const button = this.host.querySelector('button[slot="toggle"]');
-    if (!(button instanceof HTMLButtonElement)) {
-      throw new ReferenceError("Mandatory toggle button not found");
+    watchOptionsOffset() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, this.dropdownOptionsOffset],
+                    },
+                },
+            ],
+        });
     }
-    return button;
-  }
-  tabbables(withButton) {
-    const tabbables = tabbable(this.host);
-    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
-  }
-  componentDidLoad() {
-    this.button.setAttribute("aria-haspopup", "menu");
-    this.button.setAttribute("aria-expanded", "false");
-    if (!this.button.id) {
-      this.button.id = v4();
+    watchStrategy() {
+        this.setStrategy();
     }
-    const options = this.host.querySelector(".dso-dropdown-options");
-    if (!options) {
-      throw new ReferenceError("Dropdown options not found");
+    setStrategy() {
+        if (!this.popper) {
+            return;
+        }
+        if (this.strategy === "absolute" || this.strategy === "fixed") {
+            this.popper.setOptions({
+                strategy: this.strategy,
+            });
+            return;
+        }
+        let element = this.host;
+        const boundary = this.boundary || document;
+        while (element && element.parentNode !== boundary) {
+            element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+            if (element !== null && hasOverflow(element)) {
+                this.popper.setOptions({
+                    strategy: "fixed",
+                });
+                return;
+            }
+        }
+        this.popper.setOptions({
+            strategy: "absolute",
+        });
     }
-    options.setAttribute("role", "menu");
-    options.setAttribute("aria-labelledby", this.button.id);
-    for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
-      ul.setAttribute("role", "group");
-      for (const li of Array.from(ul.getElementsByTagName("li"))) {
-        li.setAttribute("role", "none");
-      }
+    get button() {
+        const button = this.host.querySelector('button[slot="toggle"]');
+        if (!(button instanceof HTMLButtonElement)) {
+            throw new ReferenceError("Mandatory toggle button not found");
+        }
+        return button;
     }
-    if (this.popper) {
-      return;
+    tabbables(withButton) {
+        const tabbables = tabbable(this.host);
+        return withButton ? tabbables : tabbables.filter((element) => element !== this.button);
     }
-    const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
-    if (!(dropdownOptionsElement instanceof HTMLElement)) {
-      throw new Error("dropdown options element is not instanceof HTMLElement");
+    componentDidLoad() {
+        this.button.setAttribute("aria-haspopup", "menu");
+        this.button.setAttribute("aria-expanded", "false");
+        if (!this.button.id) {
+            this.button.id = v4();
+        }
+        const options = this.host.querySelector(".dso-dropdown-options");
+        if (!options) {
+            throw new ReferenceError("Dropdown options not found");
+        }
+        options.setAttribute("role", "menu");
+        options.setAttribute("aria-labelledby", this.button.id);
+        for (const ul of Array.from(this.host.getElementsByTagName("ul"))) {
+            ul.setAttribute("role", "group");
+            for (const li of Array.from(ul.getElementsByTagName("li"))) {
+                li.setAttribute("role", "none");
+            }
+        }
+        if (this.popper) {
+            return;
+        }
+        const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
+        if (!(dropdownOptionsElement instanceof HTMLElement)) {
+            throw new Error("dropdown options element is not instanceof HTMLElement");
+        }
+        this.popper = createPopper(this.button, dropdownOptionsElement, {
+            placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
+            modifiers: [
+                {
+                    name: "offset",
+                    options: {
+                        offset: [0, this.dropdownOptionsOffset],
+                    },
+                },
+                {
+                    name: "preventOverflow",
+                    options: {
+                        boundary: this.boundary ? document.querySelector(this.boundary) : null,
+                    },
+                    enabled: this.boundary !== undefined,
+                },
+            ],
+        });
     }
-    this.popper = createPopper(this.button, dropdownOptionsElement, {
-      placement: this.placement || (this.dropdownAlign === "right" ? "bottom-end" : "bottom-start"),
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, this.dropdownOptionsOffset],
-          },
-        },
-        {
-          name: "preventOverflow",
-          options: {
-            boundary: this.boundary ? document.querySelector(this.boundary) : null,
-          },
-          enabled: this.boundary !== undefined,
-        },
-      ],
-    });
-  }
-  componentDidRender() {
-    var _a;
-    this.setStrategy();
-    if (this.open) {
-      (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+    componentDidRender() {
+        var _a;
+        this.setStrategy();
+        if (this.open) {
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+        }
+        for (const li of Array.from(this.host.getElementsByTagName("li"))) {
+            for (const tab of tabbable(li)) {
+                tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
+                if (this.checkable) {
+                    tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
+                }
+            }
+        }
+        this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
     }
-    for (const li of Array.from(this.host.getElementsByTagName("li"))) {
-      for (const tab of tabbable(li)) {
-        tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
-        if (this.checkable) {
-          tab.setAttribute("aria-checked", li.classList.contains("dso-checked").toString());
+    onClick(event) {
+        const composedPath = event.composedPath();
+        if (this.isToggleButtonEvent(composedPath)) {
+            this.open = !this.open;
+        }
+        else if (this.open && this.isMenuItemEvent(composedPath)) {
+            this.open = false;
         }
-      }
     }
-    this.button.setAttribute("aria-expanded", this.open ? "true" : "false");
-  }
-  onClick(event) {
-    const composedPath = event.composedPath();
-    if (this.isToggleButtonEvent(composedPath)) {
-      this.open = !this.open;
+    isToggleButtonEvent(composedPath) {
+        return composedPath.includes(this.button);
     }
-    else if (this.open && this.isMenuItemEvent(composedPath)) {
-      this.open = false;
+    isMenuItemEvent(composedPath) {
+        return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
     }
-  }
-  isToggleButtonEvent(composedPath) {
-    return composedPath.includes(this.button);
-  }
-  isMenuItemEvent(composedPath) {
-    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
-  }
-  keyDownListener(event) {
-    if (event.defaultPrevented || !this.open) {
-      return;
+    disconnectedCallback() {
+        var _a;
+        (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
     }
-    switch (event.key) {
-      case "Tab":
-        if (event.shiftKey) {
-          this.tabInPopup(this.tabbables(true), -1);
+    keyDownListener(event) {
+        if (event.defaultPrevented || !this.open) {
+            return;
         }
-        else {
-          this.tabInPopup(this.tabbables(true), 1);
+        switch (event.key) {
+            case "Tab":
+                if (event.shiftKey) {
+                    this.tabInPopup(this.tabbables(true), -1);
+                }
+                else {
+                    this.tabInPopup(this.tabbables(true), 1);
+                }
+                break;
+            case "ArrowDown":
+                this.tabInPopup(this.tabbables(false), 1);
+                break;
+            case "ArrowUp":
+                this.tabInPopup(this.tabbables(false), -1);
+                break;
+            case "Escape":
+                this.escape();
+                break;
+            case " ":
+                if (event.target instanceof HTMLElement) {
+                    event.target.click();
+                }
+                break;
+            default:
+                return;
         }
-        break;
-      case "ArrowDown":
-        this.tabInPopup(this.tabbables(false), 1);
-        break;
-      case "ArrowUp":
-        this.tabInPopup(this.tabbables(false), -1);
-        break;
-      case "Escape":
-        this.escape();
-        break;
-      case " ":
-        if (event.target instanceof HTMLElement) {
-          event.target.click();
-        }
-        break;
-      default:
-        return;
+        event.preventDefault();
     }
-    event.preventDefault();
-  }
-  tabInPopup(tabbables, direction) {
-    var _a;
-    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
-    let nextIndex = currentIndex + direction;
-    if (nextIndex >= tabbables.length) {
-      nextIndex = 0;
+    tabInPopup(tabbables, direction) {
+        var _a;
+        const currentIndex = tabbables.findIndex((e) => e === getActiveElement());
+        let nextIndex = currentIndex + direction;
+        if (nextIndex >= tabbables.length) {
+            nextIndex = 0;
+        }
+        else if (nextIndex < 0) {
+            nextIndex = tabbables.length - 1;
+        }
+        (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    else if (nextIndex < 0) {
-      nextIndex = tabbables.length - 1;
+    render() {
+        return (h(Host, { key: '8511a4953a043ad97ce78a54e3cad085af2fbbf9', onFocusout: this.focusOutListener }, h("slot", { key: '47ad6e2194994af7b3ea7b85f4069f0fac342d7c', name: "toggle" }), h("div", { key: '6398693835335f206a6eaba54bcf318ce097d306', hidden: !this.open }, h("slot", { key: '1c6f158faeaf1666505c7251b94e657d72d8129d' }))));
     }
-    (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  render() {
-    return (h(Host, { onFocusout: this.focusOutListener }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "placement": ["watchPosition"],
-    "dropdownAlign": ["watchPosition"],
-    "dropdownOptionsOffset": ["watchOptionsOffset"],
-    "strategy": ["watchStrategy"]
-  }; }
-  static get style() { return dropdownMenuCss; }
+    get host() { return this; }
+    static get watchers() { return {
+        "placement": ["watchPosition"],
+        "dropdownAlign": ["watchPosition"],
+        "dropdownOptionsOffset": ["watchOptionsOffset"],
+        "strategy": ["watchStrategy"]
+    }; }
+    static get style() { return DsoDropdownMenuStyle0; }
 }, [1, "dso-dropdown-menu", {
-    "open": [1540],
-    "dropdownAlign": [1, "dropdown-align"],
-    "dropdownOptionsOffset": [2, "dropdown-options-offset"],
-    "checkable": [4],
-    "boundary": [1],
-    "placement": [1],
-    "strategy": [1]
-  }, [[8, "click", "onClick"], [8, "keydown", "keyDownListener"]], {
-    "placement": ["watchPosition"],
-    "dropdownAlign": ["watchPosition"],
-    "dropdownOptionsOffset": ["watchOptionsOffset"],
-    "strategy": ["watchStrategy"]
-  }]);
+        "open": [1540],
+        "dropdownAlign": [1, "dropdown-align"],
+        "dropdownOptionsOffset": [2, "dropdown-options-offset"],
+        "checkable": [4],
+        "boundary": [1],
+        "placement": [1],
+        "strategy": [1]
+    }, [[8, "click", "onClick"], [8, "keydown", "keyDownListener"]], {
+        "placement": ["watchPosition"],
+        "dropdownAlign": ["watchPosition"],
+        "dropdownOptionsOffset": ["watchOptionsOffset"],
+        "strategy": ["watchStrategy"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-dropdown-menu"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-dropdown-menu":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, DropdownMenu);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-dropdown-menu"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-dropdown-menu":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DropdownMenu);
+            }
+            break;
+    } });
 }
 
 export { DropdownMenu as D, defineCustomElement as d };