@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

package/dist/cjs/six-checkbox_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"six-checkbox.six-menu-item.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl","getTextContent"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx","src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","src/components/six-menu-item/six-menu-item.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox--focused {\n  .checkbox__control {\n    outline: var(--six-focus-ring);\n    outline-offset: 0;\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        hasErrorTextSlot={this.hasErrorSlot}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n:focus {\n  outline: none;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-x-small) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--active:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n\n  .menu-item__checkbox {\n    margin-top: -1px;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\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 menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @Element() host!: HTMLSixMenuItemElement;\n\n  @State() hasFocus = false;\n\n  @State() active = false;\n\n  /** Defines if the checked state is displayed as a checkbox or a check-icon */\n  @Prop() checkType: 'checkbox' | 'check' = 'check';\n\n  /** Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\n   * checked state */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    this.active = true;\n  }\n\n  private handleMouseLeave() {\n    this.active = false;\n    this.hasFocus = false;\n  }\n\n  private handleCheckboxChange = () => {\n    this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n          'menu-item--active': this.active,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        {this.checkType === 'checkbox' && (\n          <span class=\"menu-item__checkbox\">\n            <six-checkbox\n              onSix-checkbox-change={this.handleCheckboxChange}\n              disabled={this.disabled}\n              checked={this.checked}\n            ></six-checkbox>\n          </span>\n        )}\n\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        {this.checkType === 'check' && (\n          <span part=\"checked-icon\" class=\"menu-item__check\">\n            <six-icon size=\"small\" aria-hidden=\"true\">\n              check\n            </six-icon>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"six-checkbox.six-menu-item.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl","getTextContent"],"sources":["src/components/six-checkbox/six-checkbox.scss?tag=six-checkbox&encapsulation=shadow","src/components/six-checkbox/six-checkbox.tsx","src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","src/components/six-menu-item/six-menu-item.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-input-font-size-medium);\n  font-weight: var(--six-input-font-weight);\n  color: var(--six-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox--focused {\n  .checkbox__control {\n    outline: var(--six-focus-ring);\n    outline-offset: 0;\n  }\n}\n\n.checkbox__control {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--six-selection-control-toggle-size);\n  min-width: var(--six-selection-control-toggle-size);\n  height: var(--six-selection-control-toggle-size);\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: 0;\n  background-color: var(--six-input-background-color);\n  color: var(--six-checkbox-color);\n  transition: var(--six-transition-fast) border-color, var(--six-transition-fast) background-color,\n    var(--six-transition-fast) color, var(--six-transition-fast) box-shadow;\n\n  input[type='checkbox'] {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n    min-width: var(--six-selection-control-toggle-size);\n  }\n\n  .checkbox__icon {\n    display: inline-flex;\n    width: var(--six-selection-control-toggle-size);\n    height: var(--six-selection-control-toggle-size);\n\n    svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n}\n\n// Hover\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-hover);\n}\n\n// Checked/indeterminate\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--six-selection-control-color);\n  background-color: var(--six-selection-control-color);\n}\n\n// Checked/indeterminate + hover\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--six-input-border-color-focus);\n  background-color: var(--six-input-border-color-focus);\n}\n\n// Disabled\n.checkbox--disabled {\n  cursor: not-allowed;\n  color: var(--six-input-color-disabled);\n\n  .checkbox__control {\n    border-color: var(--six-input-border-color-disabled);\n  }\n\n  &.checkbox--checked .checkbox__control,\n  &.checkbox--indeterminate .checkbox__control {\n    background-color: var(--six-selection-control-color-disabled);\n  }\n}\n\n// Invalid\n.checkbox--invalid:not(.checkbox--disabled) {\n  .checkbox__control {\n    border-color: var(--six-input-border-color-danger);\n  }\n}\n\n.checkbox__text {\n  line-height: var(--six-selection-control-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { EventListeners } from '../../utils/event-listeners';\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 label - The checkbox label.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n *\n * @part base - The component's base wrapper.\n * @part control - The checkbox control.\n * @part checked-icon - The container the wraps the checked icon.\n * @part indeterminate-icon - The container that wraps the indeterminate icon.\n * @part text - The checkbox text rendered to the right.\n */\n\n@Component({\n  tag: 'six-checkbox',\n  styleUrl: 'six-checkbox.scss',\n  shadow: true,\n})\nexport class SixCheckbox {\n  private inputId = `checkbox-${++id}`;\n  private labelId = `checkbox-label-${id}`;\n  private textId = `checkbox-text-${id}`;\n  private errorTextId = `input-error-text-${id}`;\n  private nativeInput?: HTMLInputElement;\n  private eventListeners = new EventListeners();\n\n  @Element() host!: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name = '';\n\n  /**\n   * The value of the checkbox does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\n   * it's only used when the checkbox participates in a native `<form>`.\n   */\n  @Prop() value = 'on';\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to show an asterisk beneath the label. */\n  @Prop() required = false;\n\n  /** The label text. */\n  @Prop() label = '';\n\n  /** The error message shown, if `invalid` is set to true.  */\n  @Prop() errorText: string | string[] = '';\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  @Prop() errorTextCount?: number;\n\n  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */\n  @Prop({ reflect: true }) invalid = false;\n\n  /** Set to true to draw the checkbox in a checked state. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Set to true to draw the checkbox in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Emitted when the control loses focus. */\n  @Event({ eventName: 'six-checkbox-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control's checked state changes. */\n  @Event({ eventName: 'six-checkbox-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the control gains focus. */\n  @Event({ eventName: 'six-checkbox-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n  @Watch('checked')\n  @Watch('indeterminate')\n  handleCheckedChange() {\n    if (this.nativeInput == null) return;\n\n    this.nativeInput.checked = this.checked;\n    this.checked = this.nativeInput.checked;\n    this.nativeInput.indeterminate = this.indeterminate;\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  connectedCallback() {\n    this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.forward('six-checkbox-change', 'change', this.host);\n    this.eventListeners.forward('six-checkbox-blur', 'blur', this.host);\n    this.eventListeners.forward('six-checkbox-focus', 'focus', this.host);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    const nativeInput = this.nativeInput;\n    if (nativeInput == null) {\n      return;\n    }\n\n    nativeInput.indeterminate = this.indeterminate;\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.nativeInput?.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.nativeInput?.blur();\n  }\n\n  private handleChange = () => {\n    if (this.nativeInput != null) {\n      this.checked = this.nativeInput.checked;\n      this.indeterminate = false;\n      this.sixChange.emit();\n    }\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.nativeInput?.focus();\n  };\n\n  private handleSlotChange() {\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n    this.hasErrorSlot = hasSlot(this.host, 'error-text');\n  }\n\n  render() {\n    return (\n      <FormControl\n        inputId={this.inputId}\n        label={this.label}\n        labelId={this.labelId}\n        hasLabelSlot={this.hasLabelSlot}\n        errorTextId={this.errorTextId}\n        hasErrorTextSlot={this.hasErrorSlot}\n        errorText={this.errorText}\n        errorTextCount={this.errorTextCount}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.invalid}\n      >\n        <label\n          part=\"base\"\n          class={{\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--invalid': this.invalid,\n            'checkbox--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n          onMouseDown={this.handleMouseDown}\n        >\n          <span part=\"control\" class=\"checkbox__control\">\n            {this.checked && (\n              <span part=\"checked-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(3.428571, 3.428571)\">\n                        <path d=\"M0,5.71428571 L3.42857143,9.14285714\"></path>\n                        <path d=\"M9.14285714,0 L3.42857143,9.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            {!this.checked && this.indeterminate && (\n              <span part=\"indeterminate-icon\" class=\"checkbox__icon\">\n                <svg viewBox=\"0 0 16 16\">\n                  <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\" stroke-linecap=\"round\">\n                    <g stroke=\"currentColor\" stroke-width=\"2\">\n                      <g transform=\"translate(2.285714, 6.857143)\">\n                        <path d=\"M10.2857143,1.14285714 L1.14285714,1.14285714\"></path>\n                      </g>\n                    </g>\n                  </g>\n                </svg>\n              </span>\n            )}\n\n            <input\n              ref={(el) => (this.nativeInput = el)}\n              id={this.inputId}\n              type=\"checkbox\"\n              name={this.name}\n              value={this.value}\n              checked={this.checked}\n              disabled={this.disabled}\n              required={this.required}\n              role=\"checkbox\"\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-labelledby={this.labelId}\n              onChange={this.handleChange}\n              onBlur={this.handleBlur}\n              onFocus={this.handleFocus}\n            />\n          </span>\n\n          <span part=\"text\" id={this.textId} class=\"checkbox__text\">\n            <slot />\n          </span>\n        </label>\n      </FormControl>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n:focus {\n  outline: none;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-x-small) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--active:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n\n  .menu-item__checkbox {\n    margin-top: -1px;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","import { Component, Element, h, Method, Prop, State } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\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 menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  private menuItem?: HTMLElement;\n  private defaultSlot?: HTMLSlotElement;\n\n  @Element() host!: HTMLSixMenuItemElement;\n\n  @State() hasFocus = false;\n\n  @State() active = false;\n\n  /** Defines if the checked state is displayed as a checkbox or a check-icon */\n  @Prop() checkType: 'checkbox' | 'check' = 'check';\n\n  /** Internal: Draws the item in a checked state. CheckType needs to be set to 'checkbox' or 'check' to show the\n   * checked state */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem?.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem?.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n  }\n\n  private handleMouseEnter() {\n    this.active = true;\n  }\n\n  private handleMouseLeave() {\n    this.active = false;\n    this.hasFocus = false;\n  }\n\n  private handleCheckboxChange = () => {\n    this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));\n  };\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n          'menu-item--active': this.active,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : undefined}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        {this.checkType === 'checkbox' && (\n          <span class=\"menu-item__checkbox\">\n            <six-checkbox\n              onSix-checkbox-change={this.handleCheckboxChange}\n              disabled={this.disabled}\n              checked={this.checked}\n            ></six-checkbox>\n          </span>\n        )}\n\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        {this.checkType === 'check' && (\n          <span part=\"checked-icon\" class=\"menu-item__check\">\n            <six-icon size=\"small\" aria-hidden=\"true\">\n              check\n            </six-icon>\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/six-datepicker.cjs.entry.js

@@ -1,18 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d7748d51.js');
-const eventListeners = require('./event-listeners-9fb878f1.js');
-const executionControl = require('./execution-control-d728da70.js');
-const slot = require('./slot-1b1232a1.js');
-const popup = require('./popup-e854acda.js');
+var index = require('./index-B_stPhJp.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
+var executionControl = require('./execution-control-oU0MWBWI.js');
+var slot = require('./slot-DBK7c7jH.js');
+var popup = require('./popup-BBJQmXUh.js');
 
 const isString = (value) => typeof value === 'string';
 // only use '==' instead of '===' to also catch undefined and void
 const isNil = (value) => value == null;
 
 /* eslint-disable */
+// @ts-nocheck
 const i18nDate = {
     en: {
         months: [
@@ -620,10 +619,84 @@ var SelectionMode;
 const SixDatepicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixSelect = index.createEvent(this, "six-datepicker-select", 7);
-        this.sixClear = index.createEvent(this, "six-datepicker-clear", 7);
-        this.sixBlur = index.createEvent(this, "six-datepicker-blur", 7);
+        this.sixSelect = index.createEvent(this, "six-datepicker-select");
+        this.sixClear = index.createEvent(this, "six-datepicker-clear");
+        this.sixBlur = index.createEvent(this, "six-datepicker-blur");
         this.eventListeners = new eventListeners.EventListeners();
+        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
+        this.selectionMode = SelectionMode.DAY;
+        this.isDropDownContentUp = false;
+        /**
+         * Set the type.
+         */
+        this.type = 'date';
+        /**
+         * The language used to render the weekdays and months.
+         */
+        this.locale = 'en';
+        /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Indicates whether or not the calendar should be shown as an inline (always open) component */
+        this.inline = false;
+        /**
+         * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+         */
+        this.readonly = false;
+        /**
+         * If `true` the component is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Callback to determine which date in the datepicker should be selectable.
+         * the callback function will get a datestring as an argument, e.g. '2021-07-04'
+         *
+         * Usage e.g.:
+         * const datepicker = document.getElementById('allowed-date-picker');
+         * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+         */
+        this.allowedDates = () => true;
+        /**
+         * Closes the datepicker dropdown after selection
+         */
+        this.closeOnSelect = this.type === 'date';
+        /** Datepicker size. */
+        this.size = 'medium';
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** Define the dateFormat. Valid formats are:
+         * 'dd.mm.yyyy'
+         * 'yyyy-mm-dd'
+         * 'dd-mm-yyyy'
+         * 'dd/mm/yyyy'
+         * 'yyyy/mm/dd'
+         * 'dd.mm.yy'
+         * 'yy-mm-dd'
+         * 'dd-mm-yy'
+         * 'dd/mm/yy'
+         * 'yy/mm/dd'
+         * */
+        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+         */
+        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
+        /** The input's name attribute. */
+        this.name = '';
+        /** Set to true to add a clear button when the input is populated. */
+        this.clearable = false;
+        /** Set the position of the icon */
+        this.iconPosition = 'left';
+        /**
+         * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+         * `overflow: auto|scroll`.
+         */
+        this.hoist = false;
         this.previousUnit = () => {
             if (this.selectionMode === SelectionMode.DAY) {
                 this.previousMonth();
@@ -730,52 +803,24 @@ const SixDatepicker = class {
             }
         };
         this.handleOnBlur = (event) => {
-            var _a, _b;
+            var _a, _b, _c;
+            event.stopPropagation();
             // clear the value if the user deleted the date
             if (((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) === '' && isValidDate(this.value)) {
                 this.value = undefined;
                 this.sixSelect.emit(this.value);
             }
-            event.stopPropagation();
-            const inputValue = (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value;
-            const inputValueDate = toDate(inputValue, this.dateFormat);
-            const formattedDate = formatDate(this.value, this.dateFormat);
-            if (this.inputElement != null && inputValueDate != null && inputValue !== formattedDate) {
-                // properly format date if necessary
-                this.inputElement.value = formattedDate;
+            const currentDate = toDate((_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value, this.dateFormat);
+            if (isValidDate(currentDate) && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.getTime()) !== (currentDate === null || currentDate === void 0 ? void 0 : currentDate.getTime())) {
+                // Set the value if the input field's value has changed. This can happen if the blur occurs
+                // before the change event had a chance to fire due to its debouncing.
+                this.value = currentDate;
+            }
+            if (this.inputElement != null) {
+                this.inputElement.value = formatDate(this.value, this.dateFormat);
             }
             this.sixBlur.emit(this.value);
         };
-        this.pointerDate = SixDatepicker.getCurrentDateAsPointer();
-        this.selectionMode = SelectionMode.DAY;
-        this.isDropDownContentUp = false;
-        this.type = 'date';
-        this.locale = 'en';
-        this.open = false;
-        this.inline = false;
-        this.readonly = false;
-        this.disabled = false;
-        this.allowedDates = () => true;
-        this.min = undefined;
-        this.max = undefined;
-        this.closeOnSelect = this.type === 'date';
-        this.placement = undefined;
-        this.size = 'medium';
-        this.required = false;
-        this.defaultDate = undefined;
-        this.placeholder = undefined;
-        this.value = undefined;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.containingElement = undefined;
-        this.dateFormat = SixDateFormats.DDMMYYY_DOT;
-        this.debounce = executionControl.DEFAULT_DEBOUNCE_FAST;
-        this.name = '';
-        this.clearable = false;
-        this.iconPosition = 'left';
-        this.hoist = false;
     }
     debounceChanged() {
         this.sixSelect = executionControl.debounceEvent(this.sixSelect, this.debounce);
@@ -821,7 +866,6 @@ const SixDatepicker = class {
             firstDateOfBox: this.firstDateOfBox,
             allowedDates: this.allowedDates,
             dateFormat: this.dateFormat,
-            locale: this.locale,
             selectedDate: this.selectedDate,
             minDate: this.min,
             maxDate: this.max,
@@ -1008,15 +1052,15 @@ const SixDatepicker = class {
     render() {
         var _a, _b, _c;
         this.adjustPopupPosition();
-        return (index.h("div", { ref: (el) => (this.wrapper = el), class: "datepicker__container" }, index.h("six-input", { part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null), this.open && (index.h("div", { part: "popup", ref: (el) => (this.popup = el), class: {
+        return (index.h("div", { key: 'b5ba1d95babef5f6f47bd176f607756df09f293b', ref: (el) => (this.wrapper = el), class: "datepicker__container" }, index.h("six-input", { key: 'bbc7941bb975cb5e66eda215fea89dc3455724a3', part: "base", value: formatDate(this.value, this.dateFormat), ref: (el) => (this.inputElement = el), placeholder: this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onClick: () => this.openCalendar(), size: this.size, class: { 'input--empty': this.value == null } }, this.renderCustomIcon(), this.renderClearable(), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null), this.open && (index.h("div", { key: 'ceaf12686b514b8708e1b254e8ed8990c519e19b', part: "popup", ref: (el) => (this.popup = el), class: {
                 datepicker__popup: true,
                 'datepicker__popup--is-up': this.placement != null ? this.placement === 'top' : this.isDropDownContentUp,
                 'datepicker__popup--is-inline': this.inline,
-            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (index.h("six-timepicker", { inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
+            } }, this.renderHeader(), this.renderBody(), this.type === 'date-time' && (index.h("six-timepicker", { key: 'c978d4bf39f7b212eb6f4f37acbfc2f5533e2ebc', debounce: this.debounce, inline: true, "onSix-timepicker-change-debounced": (event) => this.onTimepickerChange(event), value: ((_a = this.selectedDate) === null || _a === void 0 ? void 0 : _a.getHours()) +
                 ':' +
                 ((_b = this.selectedDate) === null || _b === void 0 ? void 0 : _b.getMinutes()) +
                 ':' +
-                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), index.h("div", { class: "datepicker__footer" }, index.h("slot", null))))));
+                ((_c = this.selectedDate) === null || _c === void 0 ? void 0 : _c.getSeconds()) })), index.h("div", { key: 'ffaec9fff60951e6f8134437f31b359d93b3b91e', class: "datepicker__footer" }, index.h("slot", { key: '58655ebaf55d53e2524eee16e87ecf629fe9eb29' }))))));
     }
     adjustPopupPosition() {
         popup.adjustPopupForHoisting(this.hoist, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT, (isUp) => (this.isDropDownContentUp = isUp));
@@ -1048,5 +1092,6 @@ const SixDatepicker = class {
 SixDatepicker.style = sixDatepickerCss;
 
 exports.six_datepicker = SixDatepicker;
+//# sourceMappingURL=six-datepicker.entry.cjs.js.map
 
 //# sourceMappingURL=six-datepicker.cjs.entry.js.map