@six-group/ui-library 0.0.0-insider.931e1d7 → 0.0.0-insider.98c4058

package/dist/components/six-dialog.js.map

@@ -1 +1 @@
-{"file":"six-dialog.js","mappings":"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","names":["SixDialog"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-dialog.js","mappings":"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","names":["SixDialog","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--six-z-index-dialog);\n  color: var(--six-color-web-rock-900);\n\n  &:not(.dialog--visible) {\n    @include hidden;\n  }\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--six-spacing-xx-large));\n  max-height: calc(100% - var(--six-spacing-xx-large));\n  background-color: var(--six-panel-background-color);\n  border-radius: var(--six-border-radius-medium);\n  box-shadow: var(--six-shadow-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-x-large);\n  font-weight: var(--six-font-weight-bold);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:first-of-type)) {\n    margin-left: var(--six-spacing-xx-small);\n  }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n *\n */\n@Component({\n  tag: 'six-dialog',\n  styleUrl: 'six-dialog.scss',\n  shadow: true,\n})\nexport class SixDialog {\n  private componentId = `dialog-${++id}`;\n  private dialog?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDialogElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The dialog's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /**\n   * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n   * easy, accessible way for users to dismiss the dialog.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog opens and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the dialog closes and all transitions are complete. */\n  @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the dialog, such as an input or button.\n   */\n  @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. */\n  @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => this.panel?.focus(),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the dialog */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.dialog == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n    this.modal.activate();\n\n    lockBodyScrolling(this.host);\n\n    if (this.open) {\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the dialog */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n      this.isVisible = this.open;\n      this.willShow = false;\n      this.willHide = false;\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n    }\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.dialog = el)}\n        part=\"base\"\n        class={{\n          dialog: true,\n          'dialog--open': this.open,\n          'dialog--visible': this.isVisible,\n          'dialog--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"dialog__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"dialog__header\">\n              <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"dialog__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"dialog__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"dialog__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-drawer.js

@@ -1,28 +1,48 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll.js';
-import { h as hasSlot } from './slot.js';
-import { M as Modal } from './modal.js';
-import { d as defineCustomElement$3 } from './six-icon2.js';
-import { d as defineCustomElement$2 } from './six-icon-button2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './p-BY6hIEFX.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { M as Modal } from './p-CfIoyvm-.js';
+import { d as defineCustomElement$3 } from './p-Q3Zlhwd0.js';
+import { d as defineCustomElement$2 } from './p-CIvx-Vfd.js';
 
 const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";
-const SixDrawerStyle0 = sixDrawerCss;
 
 let id = 0;
-const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends HTMLElement {
+const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixShow = createEvent(this, "six-drawer-show", 7);
-        this.sixAfterShow = createEvent(this, "six-drawer-after-show", 7);
-        this.sixHide = createEvent(this, "six-drawer-hide", 7);
-        this.sixAfterHide = createEvent(this, "six-drawer-after-hide", 7);
-        this.sixInitialFocus = createEvent(this, "six-drawer-initial-focus", 7);
-        this.sixOverlayDismiss = createEvent(this, "six-drawer-overlay-dismiss", 7);
+        this.sixShow = createEvent(this, "six-drawer-show");
+        this.sixAfterShow = createEvent(this, "six-drawer-after-show");
+        this.sixHide = createEvent(this, "six-drawer-hide");
+        this.sixAfterHide = createEvent(this, "six-drawer-after-hide");
+        this.sixInitialFocus = createEvent(this, "six-drawer-initial-focus");
+        this.sixOverlayDismiss = createEvent(this, "six-drawer-overlay-dismiss");
         this.componentId = `drawer-${++id}`;
         this.willShow = false;
         this.willHide = false;
+        this.hasFooter = false;
+        this.isVisible = false;
+        /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /**
+         * The drawer's label as displayed in the header. You should always include a relevant label even when using
+         * `no-header`, as it is required for proper accessibility.
+         */
+        this.label = '';
+        /** The direction from which the drawer will open. */
+        this.placement = 'right';
+        /**
+         * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+         * its parent element, set this prop and add `position: relative` to the parent.
+         */
+        this.contained = false;
+        /**
+         * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+         * accessible way for users to dismiss the drawer.
+         */
+        this.noHeader = false;
         this.handleCloseClick = () => {
             this.hide();
         };
@@ -47,13 +67,6 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends HTM
                 this.resetTransitionVariables();
             }
         };
-        this.hasFooter = false;
-        this.isVisible = false;
-        this.open = false;
-        this.label = '';
-        this.placement = 'right';
-        this.contained = false;
-        this.noHeader = false;
     }
     handleOpenChange() {
         this.open ? this.show() : this.hide();
@@ -127,7 +140,7 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends HTM
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("div", { key: '36e3f65ac5f2721b42452c5c8bb6b7c82caaf90b', ref: (el) => (this.drawer = el), part: "base", class: {
+        return (h("div", { key: '3f0c58a92f99ceaedd021a99055d4b9d3cb6b490', ref: (el) => (this.drawer = el), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 'drawer--visible': this.isVisible,
@@ -138,13 +151,13 @@ const SixDrawer$1 = /*@__PURE__*/ proxyCustomElement(class SixDrawer extends HTM
                 'drawer--contained': this.contained,
                 'drawer--fixed': !this.contained,
                 'drawer--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '1d882839efb405169548546f93eacabd88803051', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: 'b53bc8fa6d3d233727f87b111b220674de9ab2d5', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '3d580bea13f4ce5e361a1789550b011e52af859e', part: "header", class: "drawer__header" }, h("span", { key: 'e068532fb2b4e517ef09289396cba476ab699331', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '35a8c80566e7083d532817bd9cc6fa2acbf4416c', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'a294b23eb653e39fc714adf63b6df7c4b46e9002', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: 'a347e151af6ecb2d79c6b5773ddd533405e6b5b6', part: "body", class: "drawer__body" }, h("slot", { key: '5a0634971a10582fb22c3cbbecd0975a6b65fd04' })), h("footer", { key: '051fe5aa4ec54b0fe82a20f569884adbf29256cb', part: "footer", class: "drawer__footer" }, h("slot", { key: 'dce35b793bbc64207727c39f7cc8153a8102ca86', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '06d4b753471747898380ad96df47d14eb97f3191', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: '3c5fc6ef2f0e6fa30feacd66534628385957894a', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '0b49d4f269ba18e09a4b249200385c58746057f2', part: "header", class: "drawer__header" }, h("span", { key: 'b6ae3162f1eef9678470add112b5a7588c1a59d2', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: 'a6da570ad5f2cc9bfea3738be1f49f2da8e0e4bf', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'b91dcd172972abab22d6c3160d305a2188281a57', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '92e6853d2012222b7eaa29c1f8a3df56d138d7c5', part: "body", class: "drawer__body" }, h("slot", { key: '2abc9eb1633feb27ae0cf658602a79e5eef8a3f5' })), h("footer", { key: 'b772e1b63f3a50d1b68de0adae38aa28270fe884', part: "footer", class: "drawer__footer" }, h("slot", { key: 'a20158d9f897a62749150469ddb7e97ba545305e', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return this; }
     static get watchers() { return {
         "open": ["handleOpenChange"]
     }; }
-    static get style() { return SixDrawerStyle0; }
+    static get style() { return sixDrawerCss; }
 }, [1, "six-drawer", {
         "open": [1540],
         "label": [1],
@@ -186,5 +199,6 @@ const SixDrawer = SixDrawer$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixDrawer, defineCustomElement };
+//# sourceMappingURL=six-drawer.js.map
 
 //# sourceMappingURL=six-drawer.js.map

package/dist/components/six-drawer.js.map

@@ -1 +1 @@
-{"file":"six-drawer.js","mappings":"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","names":["SixDrawer"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-drawer.js","mappings":"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","names":["SixDrawer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  private componentId = `drawer-${++id}`;\n  private drawer?: HTMLElement;\n  private modal?: Modal;\n  private panel?: HTMLElement;\n  private willShow = false;\n  private willHide = false;\n\n  @Element() host!: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * The drawer's label as displayed in the header. You should always include a relevant label even when using\n   * `no-header`, as it is required for proper accessibility.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {\n      return;\n    }\n    const panel = this.panel;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      // Wait for the next frame before setting initial focus so the dialog is technically visible\n      requestAnimationFrame(() => {\n        const sixInitialFocus = this.sixInitialFocus.emit();\n        if (!sixInitialFocus.defaultPrevented) {\n          panel.focus({ preventScroll: true });\n        }\n      });\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide || this.modal == null) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  private handleCloseClick = () => {\n    this.hide();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  };\n\n  private handleOverlayClick = () => {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  };\n\n  private handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"close\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-dropdown.js

@@ -1,8 +1,9 @@
-import { S as SixDropdown$1, d as defineCustomElement$1 } from './six-dropdown2.js';
+import { S as SixDropdown$1, d as defineCustomElement$1 } from './p-CMn2PWhi.js';
 
 const SixDropdown = SixDropdown$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixDropdown, defineCustomElement };
+//# sourceMappingURL=six-dropdown.js.map
 
 //# sourceMappingURL=six-dropdown.js.map

package/dist/components/six-error-page.js

@@ -1,8 +1,7 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './six-picto2.js';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$2 } from './p-BqVEvtlR.js';
 
 const sixErrorPageCss = ".six-error-page__title{display:flex;justify-content:center;font-size:var(--six-font-size-xx-large);font-weight:bold;margin-bottom:var(--six-spacing-large)}.six-error-page__description>*{text-align:center}.six-error-page__icon-container{display:flex;justify-content:center}.six-error-page__icon::part(icon){background-color:var(--six-color-web-rock-300)}";
-const SixErrorPageStyle0 = sixErrorPageCss;
 
 const TITLE_PER_ERROR_CODE = {
     403: {
@@ -41,16 +40,15 @@ const DESCRIPTION_PER_ERROR_CODE = {
         ],
     },
 };
-const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage extends HTMLElement {
+const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.errorCode = undefined;
+        /**
+         * Defines language and thus displays the proper error page in the selected language.
+         */
         this.language = 'en';
-        this.customTitle = undefined;
-        this.customDescription = undefined;
-        this.customIcon = undefined;
     }
     getIconName() {
         if (this.customIcon != null) {
@@ -96,9 +94,9 @@ const SixErrorPage$1 = /*@__PURE__*/ proxyCustomElement(class SixErrorPage exten
         return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
     render() {
-        return (h("div", { key: 'c11b8a0d98ed8a03a1ee91e8932a3c7f7ba60fb8', part: "container" }, h("div", { key: '54352589667286a7659b65adcc071f14bd4ac409', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: '8532d61184d3de5f8c00e1f8bff8a9bfb9cff44b', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: 'b94c4b57087f5278a8424bf5dc9b0e9c73a9f4ef', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: '6313d2f5039d1ceeaac79ea3eb5cbb9a30d44b01', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+        return (h("div", { key: '6b37d62582a5b07926ab326efa2064c854143817', part: "container" }, h("div", { key: 'fb92d248f0bfab9716569a74fa7458a899b5a244', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'fd543564f87c4870f1d424b0b5132fb6e7b38f94', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '347c9155de1d0bde81188aa01bc959a01856b531', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'e23468922bae5999349ef63b1884e5f6ab065b90', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
-    static get style() { return SixErrorPageStyle0; }
+    static get style() { return sixErrorPageCss; }
 }, [1, "six-error-page", {
         "errorCode": [2, "error-code"],
         "language": [1],
@@ -129,5 +127,6 @@ const SixErrorPage = SixErrorPage$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixErrorPage, defineCustomElement };
+//# sourceMappingURL=six-error-page.js.map
 
 //# sourceMappingURL=six-error-page.js.map

package/dist/components/six-error-page.js.map

@@ -1 +1 @@
-{"file":"six-error-page.js","mappings":"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","names":["SixErrorPage"],"sources":["src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  404: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  500: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode?: 404 | 403 | 500;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions() ?? [];\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-error-page.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,mWAAmW;;ACI3X,MAAM,oBAAoB,GAMtB;AACF,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,cAAc;AACnB,KAAA;AACD,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE,WAAW;AACf,QAAA,EAAE,EAAE,sBAAsB;AAC3B,KAAA;AACD,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,MAAM;AACX,KAAA;CACF;AAED,MAAM,0BAA0B,GAAsD;AACpF,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE;YACF,iDAAiD;YACjD,oEAAoE;AACrE,SAAA;AACD,QAAA,EAAE,EAAE;YACF,uDAAuD;YACvD,4FAA4F;AAC7F,SAAA;AACF,KAAA;AACD,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE,CAAC,2CAA2C,EAAE,wCAAwC,CAAC;AAC3F,QAAA,EAAE,EAAE,CAAC,kDAAkD,EAAE,gDAAgD,CAAC;AAC3G,KAAA;AACD,IAAA,GAAG,EAAE;AACH,QAAA,EAAE,EAAE,CAAC,0CAA0C,EAAE,wCAAwC,CAAC;AAC1F,QAAA,EAAE,EAAE;YACF,4DAA4D;YAC5D,gDAAgD;AACjD,SAAA;AACF,KAAA;CACF;MAcYA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAWE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAgB,IAAI;AAyFrC;IAxES,WAAW,GAAA;AACjB,QAAA,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,EAAE;YAC3B,OAAO,IAAI,CAAC,UAAU;;AAGxB,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,EAAE;YAC1B;;AAGF,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;AAC1B,YAAA,OAAO,MAAM;;AAGf,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;AAC1B,YAAA,OAAO,cAAc;;AAGvB,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,GAAG,EAAE;AAC1B,YAAA,OAAO,wBAAwB;;;IAI3B,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;YAC5B,OAAO,IAAI,CAAC,WAAW;;AAGzB,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,EAAE;YAC1B;;QAGF,OAAO,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGpD,mBAAmB,GAAA;;AACzB,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,EAAE;YAC5D;;QAGF,MAAM,YAAY,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,EAAE;AACjD,QAAA,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,YAAY,KAAK,CAAA,CAAA,KAAA,EAAA,IAAA,EAAM,YAAY,CAAO,CAAC;;IAG9D,eAAe,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,iBAAiB,KAAK,SAAS,EAAE;YACxC,OAAO,IAAI,CAAC,iBAAiB;;AAG/B,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,EAAE;YAC1B;;QAGF,OAAO,0BAA0B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC;;IAGlE,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,WAAW,EAAA,EACnB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,gBAAgB,EAAA,EAC/D,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,MAAM,EAC3D,EAAA,IAAI,CAAC,WAAW,EAAE,CACT,CACR,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,EAAA,EAC5C,IAAI,CAAC,aAAa,EAAE,CACjB,EACN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,aAAa,EACxD,EAAA,IAAI,CAAC,mBAAmB,EAAE,CACvB,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixErrorPage","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-error-page/six-error-page.scss?tag=six-error-page&encapsulation=shadow","src/components/six-error-page/six-error-page.tsx"],"sourcesContent":[".six-error-page {\n  &__title {\n    display: flex;\n    justify-content: center;\n    font-size: var(--six-font-size-xx-large);\n    font-weight: bold;\n    margin-bottom: var(--six-spacing-large);\n  }\n\n  &__description {\n    & > * {\n      text-align: center;\n    }\n  }\n\n  &__icon-container {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__icon::part(icon) {\n    background-color: var(--six-color-web-rock-300);\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\ntype ErrorCode = 403 | 404 | 500;\n\nconst TITLE_PER_ERROR_CODE: Record<\n  ErrorCode,\n  {\n    en: string;\n    de: string;\n  }\n> = {\n  403: {\n    en: 'Access Denied',\n    de: 'Kein Zugriff',\n  },\n  404: {\n    en: 'Not Found',\n    de: 'Seite nicht gefunden',\n  },\n  500: {\n    en: 'Ooops!',\n    de: 'Ups!',\n  },\n};\n\nconst DESCRIPTION_PER_ERROR_CODE: Record<ErrorCode, { en: string[]; de: string[] }> = {\n  403: {\n    en: [\n      'You don’t have permission to access this page. ',\n      'Please contact an administrator or click the SIX logo on top left.',\n    ],\n    de: [\n      'Sie haben keine Zugriffsberechtigung auf diese Seite.',\n      'Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n  404: {\n    en: ['We have not found the page you requested.', 'Please click the SIX logo on top left.'],\n    de: ['Wir haben die angeforderte Seite nicht gefunden.', 'Bitte klicken Sie auf das SIX-Logo oben links.'],\n  },\n  500: {\n    en: ['Sorry, we messed up! We try to fix this.', 'Please click the SIX logo on top left.'],\n    de: [\n      'Sorry, das war unser Fehler! Wir versuchen das zu beheben.',\n      'Bitte klicken Sie auf das SIX-Logo oben links.',\n    ],\n  },\n};\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n\n@Component({\n  tag: 'six-error-page',\n  styleUrl: 'six-error-page.scss',\n  shadow: true,\n})\nexport class SixErrorPage {\n  /**\n   * Defines error Code and thus displays the proper error page.\n   */\n  @Prop() errorCode?: 404 | 403 | 500;\n\n  /**\n   * Defines language and thus displays the proper error page in the selected language.\n   */\n  @Prop() language: 'en' | 'de' = 'en';\n\n  /**\n   * Defines a custom title.\n   */\n  @Prop() customTitle?: string;\n\n  /**\n   * Defines a custom description.\n   */\n  @Prop() customDescription?: string[];\n\n  /**\n   * Defines a custom icon.\n   */\n  @Prop() customIcon?: string;\n\n  private getIconName() {\n    if (this.customIcon != null) {\n      return this.customIcon;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    if (this.errorCode === 403) {\n      return 'lock';\n    }\n\n    if (this.errorCode === 404) {\n      return 'find-in-page';\n    }\n\n    if (this.errorCode === 500) {\n      return 'sentiment-dissatisfied';\n    }\n  }\n\n  private getErrorTitle(): string | undefined {\n    if (this.customTitle != null) {\n      return this.customTitle;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return TITLE_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  private getErrorDescription() {\n    if (this.errorCode == null && this.customDescription == null) {\n      return;\n    }\n\n    const descriptions = this.getDescriptions() ?? [];\n    return descriptions.map((errorMessage) => <div>{errorMessage}</div>);\n  }\n\n  private getDescriptions() {\n    if (this.customDescription !== undefined) {\n      return this.customDescription;\n    }\n\n    if (this.errorCode == null) {\n      return;\n    }\n\n    return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];\n  }\n\n  render() {\n    return (\n      <div part=\"container\">\n        <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n          <six-picto size=\"4xl\" class=\"six-error-page__icon\" part=\"icon\">\n            {this.getIconName()}\n          </six-picto>\n        </div>\n        <div class=\"six-error-page__title\" part=\"title\">\n          {this.getErrorTitle()}\n        </div>\n        <div class=\"six-error-page__description\" part=\"description\">\n          {this.getErrorDescription()}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-error.js

@@ -1,8 +1,9 @@
-import { S as SixError$1, d as defineCustomElement$1 } from './six-error2.js';
+import { S as SixError$1, d as defineCustomElement$1 } from './p-Ba-Z8Etn.js';
 
 const SixError = SixError$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixError, defineCustomElement };
+//# sourceMappingURL=six-error.js.map
 
 //# sourceMappingURL=six-error.js.map

package/dist/components/six-file-list-item.js

@@ -1,16 +1,25 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './six-icon2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$2 } from './p-Q3Zlhwd0.js';
 
 const sixFileListItemCss = ".six-files-list-item{padding-bottom:0.5rem}.six-files-list-item__name{color:var(--six-color-action-600);cursor:pointer}.six-files-list-item__name--disabled{cursor:inherit;color:var(--six-color-web-rock-500)}.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled){color:var(--six-color-action-500)}.six-files-list-item__date{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__size{padding-left:1rem;color:var(--six-color-web-rock-600)}.six-files-list-item__icon{padding-left:0.5rem;display:inline-block;transform:translateY(-3px);cursor:pointer;color:var(--six-color-web-rock-600)}.six-files-list-item__icon--disabled{cursor:not-allowed;color:var(--six-color-web-rock-500)}.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled){color:var(--six-color-web-rock-900)}";
-const SixFileListItemStyle0 = sixFileListItemCss;
 
-const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem extends HTMLElement {
+const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.downloadEvent = createEvent(this, "six-file-list-item-download", 7);
-        this.removeEvent = createEvent(this, "six-file-list-item-remove", 7);
+        this.downloadEvent = createEvent(this, "six-file-list-item-download");
+        this.removeEvent = createEvent(this, "six-file-list-item-remove");
+        /** An id to clearly identify the file */
+        this.identifier = '';
+        /** The filename */
+        this.name = '';
+        /** The date when the file was uploaded */
+        this.date = '';
+        /** Set to true if you don't want to allow to download this file */
+        this.nodownload = false;
+        /** Set to true if you don't want to allow to delete this file */
+        this.nodelete = false;
         this.downloadFile = () => {
             if (this.nodownload) {
                 return;
@@ -23,12 +32,6 @@ const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem
             }
             this.removeEvent.emit({ fileId: this.identifier, name: this.name });
         };
-        this.identifier = '';
-        this.name = '';
-        this.date = '';
-        this.size = undefined;
-        this.nodownload = false;
-        this.nodelete = false;
     }
     render() {
         return (h("div", { key: '65ea17f1ce1ff3d9cb48696bbf25465f126ca879', class: "six-files-list-item" }, h("span", { key: '53749104860721fd92bbb07b84029e2d3a22c0c0', class: {
@@ -39,7 +42,7 @@ const SixFileListItem$1 = /*@__PURE__*/ proxyCustomElement(class SixFileListItem
                 'six-files-list-item__icon--disabled': this.nodelete,
             }, size: "small", onClick: this.removeFile }, "delete")));
     }
-    static get style() { return SixFileListItemStyle0; }
+    static get style() { return sixFileListItemCss; }
 }, [1, "six-file-list-item", {
         "identifier": [513],
         "name": [513],
@@ -71,5 +74,6 @@ const SixFileListItem = SixFileListItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixFileListItem, defineCustomElement };
+//# sourceMappingURL=six-file-list-item.js.map
 
 //# sourceMappingURL=six-file-list-item.js.map

package/dist/components/six-file-list-item.js.map

@@ -1 +1 @@
-{"file":"six-file-list-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,6zBAA6zB,CAAC;AACz1B,8BAAe,kBAAkB;;MCqBpBA,iBAAe;;;;;;;QAyBlB,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,OAAO;aACR;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACvE,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SACrE,CAAC;0BArCoC,EAAE;oBAGR,EAAE;oBAGF,EAAE;;0BAMI,KAAK;wBAGP,KAAK;;IAwBzC,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;aACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL,EACP,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,6DAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,QAAW,EACtG,iEACE,KAAK,EAAE;gBACL,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;aACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileListItem"],"sources":["src/components/six-file-list-item/six-file-list-item.scss?tag=six-file-list-item&encapsulation=shadow","src/components/six-file-list-item/six-file-list-item.tsx"],"sourcesContent":[".six-files-list-item {\n  padding-bottom: 0.5rem;\n\n  &__name {\n    color: var(--six-color-action-600);\n    cursor: pointer;\n\n    &--disabled {\n      cursor: inherit;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-action-500);\n    }\n  }\n\n  &__date {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__size {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__icon {\n    padding-left: 0.5rem;\n    display: inline-block;\n    transform: translateY(-3px);\n    cursor: pointer;\n    color: var(--six-color-web-rock-600);\n\n    &--disabled {\n      cursor: not-allowed;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size?: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent!: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent!: EventEmitter<SixFileListRemovePayload>;\n\n  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size != null && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-file-list-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,6zBAA6zB;;MCsB30BA,iBAAe,iBAAAC,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,GAAA;;;;;;;AAO2B,QAAA,IAAU,CAAA,UAAA,GAAG,EAAE;;AAGf,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;;AAGT,QAAA,IAAI,CAAA,IAAA,GAAG,EAAE;;AAMT,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;;AAGlB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQjC,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB;;AAGF,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACvE,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB;;AAGF,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACrE,SAAC;AA6BF;IA3BC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;AACvD,aAAA,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,EAEzB,EAAA,IAAI,CAAC,IAAI,CACL,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAW,KAAA,CAAA,EACtG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,2BAA2B,EAAE,IAAI;gBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;AACrD,aAAA,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,EAAA,EAAA,QAAA,CAGf,CACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileListItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-list-item/six-file-list-item.scss?tag=six-file-list-item&encapsulation=shadow","src/components/six-file-list-item/six-file-list-item.tsx"],"sourcesContent":[".six-files-list-item {\n  padding-bottom: 0.5rem;\n\n  &__name {\n    color: var(--six-color-action-600);\n    cursor: pointer;\n\n    &--disabled {\n      cursor: inherit;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-action-500);\n    }\n  }\n\n  &__date {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__size {\n    padding-left: 1rem;\n    color: var(--six-color-web-rock-600);\n  }\n\n  &__icon {\n    padding-left: 0.5rem;\n    display: inline-block;\n    transform: translateY(-3px);\n    cursor: pointer;\n    color: var(--six-color-web-rock-600);\n\n    &--disabled {\n      cursor: not-allowed;\n      color: var(--six-color-web-rock-500);\n    }\n\n    &:hover:not(&--disabled) {\n      color: var(--six-color-web-rock-900);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size?: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent!: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent!: EventEmitter<SixFileListRemovePayload>;\n\n  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size != null && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-file-list.js

@@ -1,18 +1,17 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
 
 const sixFileListCss = ".six-files-list__container{padding:1rem}.six-files-list__container :last-child{padding-bottom:0}";
-const SixFileListStyle0 = sixFileListCss;
 
-const SixFileList$1 = /*@__PURE__*/ proxyCustomElement(class SixFileList extends HTMLElement {
+const SixFileList$1 = /*@__PURE__*/ proxyCustomElement(class SixFileList extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '5856049cee6f4ed3201403e1c917208d720e3a7a', class: "six-files-list__container" }, h("slot", { key: '78874af25ab226bbd61b0067ae34dd1516754f34' })));
+        return (h("div", { key: '479e510a36e663a5c0e24124d0d3585392beb64d', class: "six-files-list__container" }, h("slot", { key: '3a10d91d539d87463393eb8a134bd9910f0bdaba' })));
     }
-    static get style() { return SixFileListStyle0; }
+    static get style() { return sixFileListCss; }
 }, [1, "six-file-list"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -32,5 +31,6 @@ const SixFileList = SixFileList$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixFileList, defineCustomElement };
+//# sourceMappingURL=six-file-list.js.map
 
 //# sourceMappingURL=six-file-list.js.map

package/dist/components/six-file-list.js.map

@@ -1 +1 @@
-{"file":"six-file-list.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kGAAkG,CAAC;AAC1H,0BAAe,cAAc;;MCWhBA,aAAW;;;;;;IACtB,MAAM;QACJ,QACE,4DAAK,KAAK,EAAC,2BAA2B,IACpC,8DAAQ,CACJ,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileList"],"sources":["src/components/six-file-list/six-file-list.scss?tag=six-file-list&encapsulation=shadow","src/components/six-file-list/six-file-list.tsx"],"sourcesContent":[".six-files-list {\n  &__container {\n    padding: 1rem;\n\n    & :last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-file-list.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kGAAkG;;MCY5GA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;IACtB,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["SixFileList","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-file-list/six-file-list.scss?tag=six-file-list&encapsulation=shadow","src/components/six-file-list/six-file-list.tsx"],"sourcesContent":[".six-files-list {\n  &__container {\n    padding: 1rem;\n\n    & :last-child {\n      padding-bottom: 0;\n    }\n  }\n}\n","import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}