@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f015905

package/dist/collection/components/six-checkbox/six-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-checkbox.js","sourceRoot":"","sources":["../../../src/components/six-checkbox/six-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Method, Prop, State, Watch, h, Element } 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  inputId = `checkbox-${++id}`;\n  labelId = `checkbox-label-${id}`;\n  textId = `checkbox-text-${id}`;\n  errorTextId = `input-error-text-${id}`;\n  input: HTMLInputElement;\n  customErrorText = '';\n  customValidation = false;\n\n  readonly eventListeners = new EventListeners();\n\n  @Element() host: HTMLSixCheckboxElement;\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasErrorTextSlot = false;\n\n  /** The checkbox's name attribute. */\n  @Prop() name: string;\n\n  /** The checkbox's value attribute. */\n  @Prop() value: string;\n\n  /** Set to true to disable the checkbox. */\n  @Prop() disabled = false;\n\n  /** Set to true to make the checkbox a required field. */\n  @Prop() required = false;\n\n  /** The checkbox label. Alternatively, you can use the label slot. */\n  @Prop() label = '';\n\n  /** The checkbox's error text. Alternatively, you can use the error-text slot. */\n  @Prop() errorText = '';\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  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */\n  @Prop({ mutable: true, reflect: true }) invalid = false;\n\n  /** Set to display the error text on blur and not when typing */\n  @Prop() errorOnBlur = 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.input) {\n      return;\n    }\n    this.input.checked = this.checked;\n    this.input.indeterminate = this.indeterminate;\n    this.invalid = !this.input.checkValidity();\n    this.sixChange.emit();\n  }\n\n  @Watch('errorText')\n  @Watch('label')\n  handleLabelChange() {\n    this.handleSlotChange();\n  }\n\n  /** default state whether the radio button should be checked or not when resetting */\n  private defaultState = false;\n\n  connectedCallback() {\n    this.handleChange = this.handleChange.bind(this);\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseDown = this.handleMouseDown.bind(this);\n    this.handleInvalid = this.handleInvalid.bind(this);\n\n    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n  }\n\n  disconnectedCallback() {\n    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);\n    this.eventListeners.removeAll();\n  }\n\n  componentWillLoad() {\n    this.defaultState = this.checked;\n    this.handleSlotChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.eventListeners.add(this.input, 'invalid', (event) => {\n      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n        this.customErrorText = this.input.validationMessage;\n      }\n      event.preventDefault();\n    });\n  }\n\n  /** Sets focus on the checkbox. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  @Method()\n  async removeFocus() {\n    this.input.blur();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  @Method()\n  async reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Checks for validity. */\n  @Method()\n  async checkValidity() {\n    return this.input.validity.valid;\n  }\n\n  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */\n  @Method()\n  async setCustomValidity(message: string) {\n    this.customErrorText = '';\n    this.customValidation = message !== '';\n    this.input.setCustomValidity(message);\n    this.invalid = !this.input.checkValidity();\n  }\n\n  /** Resets the formcontrol */\n  @Method()\n  async reset() {\n    this.checked = this.defaultState;\n    this.customErrorText = '';\n    this.customValidation = false;\n    this.input.setCustomValidity('');\n    this.invalid = false;\n  }\n\n  handleChange() {\n    this.checked = this.input.checked;\n    this.indeterminate = false;\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n    this.sixBlur.emit();\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n    this.sixFocus.emit();\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    // Prevent clicks on the label from briefly blurring the input\n    event.preventDefault();\n    this.input.focus();\n  }\n\n  handleInvalid() {\n    this.invalid = true;\n  }\n\n  handleSlotChange() {\n    this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n  }\n\n  displayError() {\n    return this.invalid && (!this.errorOnBlur || !this.hasFocus);\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        errorText={this.customErrorText ? this.customErrorText : this.errorText}\n        hasErrorTextSlot={this.hasErrorTextSlot}\n        size=\"medium\"\n        disabled={this.disabled}\n        required={this.required}\n        displayError={this.displayError()}\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.input = 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              onInvalid={this.handleInvalid}\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"]}
+{"version":3,"file":"six-checkbox.js","sourceRoot":"","sources":["../../../src/components/six-checkbox/six-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/six-checkbox/test/six-checkbox.spec.js

@@ -0,0 +1,83 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixCheckbox } from "../six-checkbox";
+describe('six-checkbox', () => {
+    it('default', async () => {
+        const page = await newSpecPage({
+            components: [SixCheckbox],
+            html: `<six-checkbox></six-checkbox>`,
+        });
+        expect(page.root).toEqualHtml(`
+       <six-checkbox>
+         <mock:shadow-root>
+           <div class="form-control form-control--medium" part="form-control">
+             <label aria-hidden="true" class="form-control__label" htmlfor="checkbox-1" id="checkbox-label-1" part="label">
+               <slot name="label"></slot>
+             </label>
+             <div class="form-control__input">
+               <label class="checkbox" htmlfor="checkbox-1" part="base">
+                 <span class="checkbox__control" part="control">
+                   <input aria-checked="false" aria-labelledby="checkbox-label-1" id="checkbox-1" role="checkbox" type="checkbox" value="on">
+                 </span>
+                 <span class="checkbox__text" id="checkbox-text-1" part="text">
+                   <slot></slot>
+                 </span>
+               </label>
+             </div>
+             <div aria-hidden="true" class="form-control__error-text" id="input-error-text-1" part="error-text">
+              <slot name="error-text"></slot>
+             </div>
+             <div aria-hidden="true" class="form-control__help-text" part="help-text">
+               <slot name="help-text"></slot>
+             </div>
+           </div>
+         </mock:shadow-root>
+       </six-checkbox>
+    `);
+    });
+    it('checked', async () => {
+        const page = await newSpecPage({
+            components: [SixCheckbox],
+            html: `<six-checkbox checked></six-checkbox>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-checkbox checked="">
+        <mock:shadow-root>
+          <div class="form-control form-control--medium" part="form-control">
+            <label aria-hidden="true" class="form-control__label" htmlfor="checkbox-2" id="checkbox-label-2" part="label">
+                <slot name="label"></slot>
+            </label>
+            <div class="form-control__input">
+              <label class="checkbox checkbox--checked" htmlfor="checkbox-2" part="base">
+                <span part="control" class="checkbox__control">
+                  <span part="checked-icon" class="checkbox__icon">
+                    <svg viewBox="0 0 16 16">
+                      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                        <g stroke="currentColor" stroke-width="2">
+                          <g transform="translate(3.428571, 3.428571)">
+                            <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                            <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
+                          </g>
+                        </g>
+                      </g>
+                    </svg>
+                  </span>
+                  <input id="checkbox-2" type="checkbox" role="checkbox" aria-checked="true" aria-labelledby="checkbox-label-2" checked="" value="on">
+                </span>
+                <span part="text" id="checkbox-text-2" class="checkbox__text">
+                  <slot></slot>
+                </span>
+              </label>
+            </div>
+            <div aria-hidden="true" class="form-control__error-text" id="input-error-text-2" part="error-text">
+              <slot name="error-text"></slot>
+            </div>
+            <div aria-hidden="true" class="form-control__help-text" part="help-text">
+                <slot name="help-text"></slot>
+            </div>
+          </div>
+        </mock:shadow-root>
+    </six-checkbox>
+    `);
+    });
+});
+//# sourceMappingURL=six-checkbox.spec.js.map

package/dist/collection/components/six-checkbox/test/six-checkbox.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-checkbox.spec.js","sourceRoot":"","sources":["../../../../src/components/six-checkbox/test/six-checkbox.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;SACtC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;KA0B7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixCheckbox } from '../six-checkbox';\n\ndescribe('six-checkbox', () => {\n  it('default', async () => {\n    const page = await newSpecPage({\n      components: [SixCheckbox],\n      html: `<six-checkbox></six-checkbox>`,\n    });\n    expect(page.root).toEqualHtml(`\n       <six-checkbox>\n         <mock:shadow-root>\n           <div class=\"form-control form-control--medium\" part=\"form-control\">\n             <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"checkbox-1\" id=\"checkbox-label-1\" part=\"label\">\n               <slot name=\"label\"></slot>\n             </label>\n             <div class=\"form-control__input\">\n               <label class=\"checkbox\" htmlfor=\"checkbox-1\" part=\"base\">\n                 <span class=\"checkbox__control\" part=\"control\">\n                   <input aria-checked=\"false\" aria-labelledby=\"checkbox-label-1\" id=\"checkbox-1\" role=\"checkbox\" type=\"checkbox\" value=\"on\">\n                 </span>\n                 <span class=\"checkbox__text\" id=\"checkbox-text-1\" part=\"text\">\n                   <slot></slot>\n                 </span>\n               </label>\n             </div>\n             <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\">\n              <slot name=\"error-text\"></slot>\n             </div>\n             <div aria-hidden=\"true\" class=\"form-control__help-text\" part=\"help-text\">\n               <slot name=\"help-text\"></slot>\n             </div>\n           </div>\n         </mock:shadow-root>\n       </six-checkbox>\n    `);\n  });\n\n  it('checked', async () => {\n    const page = await newSpecPage({\n      components: [SixCheckbox],\n      html: `<six-checkbox checked></six-checkbox>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-checkbox checked=\"\">\n        <mock:shadow-root>\n          <div class=\"form-control form-control--medium\" part=\"form-control\">\n            <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"checkbox-2\" id=\"checkbox-label-2\" part=\"label\">\n                <slot name=\"label\"></slot>\n            </label>\n            <div class=\"form-control__input\">\n              <label class=\"checkbox checkbox--checked\" htmlfor=\"checkbox-2\" part=\"base\">\n                <span part=\"control\" class=\"checkbox__control\">\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                  <input id=\"checkbox-2\" type=\"checkbox\" role=\"checkbox\" aria-checked=\"true\" aria-labelledby=\"checkbox-label-2\" checked=\"\" value=\"on\">\n                </span>\n                <span part=\"text\" id=\"checkbox-text-2\" class=\"checkbox__text\">\n                  <slot></slot>\n                </span>\n              </label>\n            </div>\n            <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-2\" part=\"error-text\">\n              <slot name=\"error-text\"></slot>\n            </div>\n            <div aria-hidden=\"true\" class=\"form-control__help-text\" part=\"help-text\">\n                <slot name=\"help-text\"></slot>\n            </div>\n          </div>\n        </mock:shadow-root>\n    </six-checkbox>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-datepicker/components/day-selection.js

@@ -1,12 +1,12 @@
-import { h } from '@stencil/core';
-export const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {
-  return (h("table", { class: "datepicker-table", part: "day-selection" }, h("thead", { part: "weekday-header" }, locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))), h("tbody", null, calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => onClickDateCell(cell), class: {
-      'datepicker-table__cell': true,
-      'datepicker-table__cell--is-today': cell.isToday,
-      'datepicker-table__cell--is-selected': cell.isSelected,
-      'datepicker-table__cell--is-outdated': cell.isOutdated,
-      'datepicker-table__cell--is-disabled': cell.isDisabled,
-      'datepicker-table__cell--is-selectable': !cell.isDisabled,
-    } }, cell.label)))))))));
+import { h } from "@stencil/core";
+export const DaySelection = (daySelectionParams) => {
+    return (h("table", { class: "datepicker-table", part: "day-selection" }, h("thead", { part: "weekday-header" }, daySelectionParams.locale.weekdaysMin.map((weekday) => (h("th", { class: "datepicker__cell" }, weekday)))), h("tbody", null, daySelectionParams.calendarGrid.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((cell) => (h("td", { "data-date": cell.dateString, onClick: () => daySelectionParams.onClickDateCell(cell), class: {
+            'datepicker-table__cell': true,
+            'datepicker-table__cell--is-today': cell.isToday,
+            'datepicker-table__cell--is-selected': cell.isSelected,
+            'datepicker-table__cell--is-outdated': cell.isOutdated,
+            'datepicker-table__cell--is-disabled': cell.isDisabled,
+            'datepicker-table__cell--is-selectable': !cell.isDisabled,
+        } }, cell.label)))))))));
 };
 //# sourceMappingURL=day-selection.js.map

package/dist/collection/components/six-datepicker/components/day-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"day-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/day-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,EAAE,EAAE;EACxE,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,eAAe;IAClD,aAAO,IAAI,EAAC,gBAAgB,IACzB,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACnC,UAAI,KAAK,EAAC,kBAAkB,IAAE,OAAO,CAAM,CAC5C,CAAC,CACI;IACR,iBACG,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzB,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,uBACa,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACpC,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,kCAAkC,EAAE,IAAI,CAAC,OAAO;QAChD,qCAAqC,EAAE,IAAI,CAAC,UAAU;QACtD,qCAAqC,EAAE,IAAI,CAAC,UAAU;QACtD,qCAAqC,EAAE,IAAI,CAAC,UAAU;QACtD,uCAAuC,EAAE,CAAC,IAAI,CAAC,UAAU;OAC1D,IAEA,IAAI,CAAC,KAAK,CACR,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\n\nexport const DaySelection = ({ locale, calendarGrid, onClickDateCell }) => {\n  return (\n    <table class=\"datepicker-table\" part=\"day-selection\">\n      <thead part=\"weekday-header\">\n        {locale.weekdaysMin.map((weekday) => (\n          <th class=\"datepicker__cell\">{weekday}</th>\n        ))}\n      </thead>\n      <tbody>\n        {calendarGrid.map((row) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((cell) => (\n              <td\n                data-date={cell.dateString}\n                onClick={() => onClickDateCell(cell)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': cell.isToday,\n                  'datepicker-table__cell--is-selected': cell.isSelected,\n                  'datepicker-table__cell--is-outdated': cell.isOutdated,\n                  'datepicker-table__cell--is-disabled': cell.isDisabled,\n                  'datepicker-table__cell--is-selectable': !cell.isDisabled,\n                }}\n              >\n                {cell.label}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}
+{"version":3,"file":"day-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/day-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASlC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,kBAAsC,EAAE,EAAE;IACrE,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,eAAe;QAClD,aAAO,IAAI,EAAC,gBAAgB,IACzB,kBAAkB,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CACtD,UAAI,KAAK,EAAC,kBAAkB,IAAE,OAAO,CAAM,CAC5C,CAAC,CACI;QACR,iBACG,kBAAkB,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC5C,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,uBACa,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,eAAe,CAAC,IAAI,CAAC,EACvD,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,kCAAkC,EAAE,IAAI,CAAC,OAAO;gBAChD,qCAAqC,EAAE,IAAI,CAAC,UAAU;gBACtD,qCAAqC,EAAE,IAAI,CAAC,UAAU;gBACtD,qCAAqC,EAAE,IAAI,CAAC,UAAU;gBACtD,uCAAuC,EAAE,CAAC,IAAI,CAAC,UAAU;aAC1D,IAEA,IAAI,CAAC,KAAK,CACR,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { DateLocale } from '../../../utils/date-util';\nimport { CalendarCell } from '../six-datepicker';\n\ninterface DaySelectionParams {\n  locale: DateLocale;\n  calendarGrid: CalendarCell[][];\n  onClickDateCell: (cell: CalendarCell) => void;\n}\nexport const DaySelection = (daySelectionParams: DaySelectionParams) => {\n  return (\n    <table class=\"datepicker-table\" part=\"day-selection\">\n      <thead part=\"weekday-header\">\n        {daySelectionParams.locale.weekdaysMin.map((weekday) => (\n          <th class=\"datepicker__cell\">{weekday}</th>\n        ))}\n      </thead>\n      <tbody>\n        {daySelectionParams.calendarGrid.map((row) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((cell) => (\n              <td\n                data-date={cell.dateString}\n                onClick={() => daySelectionParams.onClickDateCell(cell)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': cell.isToday,\n                  'datepicker-table__cell--is-selected': cell.isSelected,\n                  'datepicker-table__cell--is-outdated': cell.isOutdated,\n                  'datepicker-table__cell--is-disabled': cell.isDisabled,\n                  'datepicker-table__cell--is-selectable': !cell.isDisabled,\n                }}\n              >\n                {cell.label}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}

package/dist/collection/components/six-datepicker/components/month-selection.js

@@ -1,12 +1,13 @@
-import { h } from '@stencil/core';
-import { now } from '../../../utils/date-util';
-export const MonthSelection = ({ locale, selectedDate, onClickMonthCell }) => {
-  const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
-  const isSelectedMonth = (value) => (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getMonth()) === locale.monthsShort.findIndex((m) => m === value);
-  return (h("table", { class: "datepicker-table", part: "month-selection" }, h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => onClickMonthCell(month), class: {
-      'datepicker-table__cell': true,
-      'datepicker-table__cell--is-today': isToday(month),
-      'datepicker-table__cell--is-selected': isSelectedMonth(month),
-    } }, month)))))))));
+import { h } from "@stencil/core";
+import { now } from "../../../utils/date-util";
+export const MonthSelection = (monthSelectionParams) => {
+    const locale = monthSelectionParams.locale;
+    const isToday = (value) => locale.monthsShort[now().getMonth()] === value;
+    const isSelectedMonth = (value) => { var _a; return ((_a = monthSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getMonth()) === locale.monthsShort.findIndex((m) => m === value); };
+    return (h("table", { class: "datepicker-table", part: "month-selection" }, h("tbody", null, locale.monthsShortGrouped.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((month) => (h("td", { onClick: () => monthSelectionParams.onClickMonthCell(month), class: {
+            'datepicker-table__cell': true,
+            'datepicker-table__cell--is-today': isToday(month),
+            'datepicker-table__cell--is-selected': isSelectedMonth(month),
+        } }, month)))))))));
 };
 //# sourceMappingURL=month-selection.js.map

package/dist/collection/components/six-datepicker/components/month-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"month-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/month-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,EAAE,EAAE;EAC3E,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,CAAC;EAElF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE,CACxC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,EAAE,MAAK,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC;EAEhF,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,iBAAiB;IACpD,iBACG,MAAM,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACtC,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,UACE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EACtC,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,kCAAkC,EAAE,OAAO,CAAC,KAAK,CAAC;QAClD,qCAAqC,EAAE,eAAe,CAAC,KAAK,CAAC;OAC9D,IAEA,KAAK,CACH,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { now } from '../../../utils/date-util';\n\nexport const MonthSelection = ({ locale, selectedDate, onClickMonthCell }) => {\n  const isToday = (value: string) => locale.monthsShort[now().getMonth()] === value;\n\n  const isSelectedMonth = (value: string) =>\n    selectedDate?.getMonth() === locale.monthsShort.findIndex((m) => m === value);\n\n  return (\n    <table class=\"datepicker-table\" part=\"month-selection\">\n      <tbody>\n        {locale.monthsShortGrouped.map((row) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((month) => (\n              <td\n                onClick={() => onClickMonthCell(month)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': isToday(month),\n                  'datepicker-table__cell--is-selected': isSelectedMonth(month),\n                }}\n              >\n                {month}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}
+{"version":3,"file":"month-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/month-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAc,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAO3D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,oBAA0C,EAAE,EAAE;IAC3E,MAAM,MAAM,GAAG,oBAAoB,CAAC,MAAM,CAAC;IAC3C,MAAM,OAAO,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,CAAC;IAElF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE,WACxC,OAAA,CAAA,MAAA,oBAAoB,CAAC,YAAY,0CAAE,QAAQ,EAAE,MAAK,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAA,EAAA,CAAC;IAErG,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,iBAAiB;QACpD,iBACG,MAAM,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAa,EAAE,EAAE,CAAC,CAChD,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAClB,UACE,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAC3D,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,kCAAkC,EAAE,OAAO,CAAC,KAAK,CAAC;gBAClD,qCAAqC,EAAE,eAAe,CAAC,KAAK,CAAC;aAC9D,IAEA,KAAK,CACH,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { DateLocale, now } from '../../../utils/date-util';\n\ninterface MonthSelectionParams {\n  locale: DateLocale;\n  selectedDate?: Date;\n  onClickMonthCell: (month: string) => void;\n}\nexport const MonthSelection = (monthSelectionParams: MonthSelectionParams) => {\n  const locale = monthSelectionParams.locale;\n  const isToday = (value: string) => locale.monthsShort[now().getMonth()] === value;\n\n  const isSelectedMonth = (value: string) =>\n    monthSelectionParams.selectedDate?.getMonth() === locale.monthsShort.findIndex((m) => m === value);\n\n  return (\n    <table class=\"datepicker-table\" part=\"month-selection\">\n      <tbody>\n        {locale.monthsShortGrouped.map((row: string[]) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((month) => (\n              <td\n                onClick={() => monthSelectionParams.onClickMonthCell(month)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': isToday(month),\n                  'datepicker-table__cell--is-selected': isSelectedMonth(month),\n                }}\n              >\n                {month}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}

package/dist/collection/components/six-datepicker/components/year-selection.js

@@ -1,10 +1,13 @@
-import { now } from '../../../utils/date-util';
-import { h } from '@stencil/core';
-export const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {
-  return (h("table", { class: "datepicker-table", part: "year-selection" }, h("tbody", null, yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => (h("td", { onClick: () => onClickYearCell(year), class: {
-      'datepicker-table__cell': true,
-      'datepicker-table__cell--is-today': now().getFullYear() === year,
-      'datepicker-table__cell--is-selected': (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.getFullYear()) === year,
-    } }, year)))))))));
+import { now } from "../../../utils/date-util";
+import { h } from "@stencil/core";
+export const YearSelection = (yearSelectionParams) => {
+    return (h("table", { class: "datepicker-table", part: "year-selection" }, h("tbody", null, yearSelectionParams.yearSelection.map((row) => (h("tr", { class: "datepicker-table__row" }, row.map((year) => {
+        var _a;
+        return (h("td", { onClick: () => yearSelectionParams.onClickYearCell(year), class: {
+                'datepicker-table__cell': true,
+                'datepicker-table__cell--is-today': now().getFullYear() === year,
+                'datepicker-table__cell--is-selected': ((_a = yearSelectionParams.selectedDate) === null || _a === void 0 ? void 0 : _a.getFullYear()) === year,
+            } }, year));
+    })))))));
 };
 //# sourceMappingURL=year-selection.js.map

package/dist/collection/components/six-datepicker/components/year-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"year-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/year-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,EAAE;EAChF,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,gBAAgB;IACnD,iBACG,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC1B,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,UACE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,EACpC,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,kCAAkC,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,KAAK,IAAI;QAChE,qCAAqC,EAAE,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,WAAW,EAAE,MAAK,IAAI;OAC5E,IAEA,IAAI,CACF,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { now } from '../../../utils/date-util';\nimport { h } from '@stencil/core';\n\nexport const YearSelection = ({ selectedDate, yearSelection, onClickYearCell }) => {\n  return (\n    <table class=\"datepicker-table\" part=\"year-selection\">\n      <tbody>\n        {yearSelection.map((row) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((year) => (\n              <td\n                onClick={() => onClickYearCell(year)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': now().getFullYear() === year,\n                  'datepicker-table__cell--is-selected': selectedDate?.getFullYear() === year,\n                }}\n              >\n                {year}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}
+{"version":3,"file":"year-selection.js","sourceRoot":"","sources":["../../../../src/components/six-datepicker/components/year-selection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,mBAAwC,EAAE,EAAE;IACxE,OAAO,CACL,aAAO,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,gBAAgB;QACnD,iBACG,mBAAmB,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC9C,UAAI,KAAK,EAAC,uBAAuB,IAC9B,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;;YAAC,OAAA,CACjB,UACE,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,eAAe,CAAC,IAAI,CAAC,EACxD,KAAK,EAAE;oBACL,wBAAwB,EAAE,IAAI;oBAC9B,kCAAkC,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,KAAK,IAAI;oBAChE,qCAAqC,EAAE,CAAA,MAAA,mBAAmB,CAAC,YAAY,0CAAE,WAAW,EAAE,MAAK,IAAI;iBAChG,IAEA,IAAI,CACF,CACN,CAAA;SAAA,CAAC,CACC,CACN,CAAC,CACI,CACF,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { now } from '../../../utils/date-util';\nimport { h } from '@stencil/core';\n\ninterface YearSelectionParams {\n  selectedDate?: Date;\n  yearSelection: number[][];\n  onClickYearCell: (year: number) => void;\n}\nexport const YearSelection = (yearSelectionParams: YearSelectionParams) => {\n  return (\n    <table class=\"datepicker-table\" part=\"year-selection\">\n      <tbody>\n        {yearSelectionParams.yearSelection.map((row) => (\n          <tr class=\"datepicker-table__row\">\n            {row.map((year) => (\n              <td\n                onClick={() => yearSelectionParams.onClickYearCell(year)}\n                class={{\n                  'datepicker-table__cell': true,\n                  'datepicker-table__cell--is-today': now().getFullYear() === year,\n                  'datepicker-table__cell--is-selected': yearSelectionParams.selectedDate?.getFullYear() === year,\n                }}\n              >\n                {year}\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n};\n"]}

package/dist/collection/components/six-datepicker/six-date-formats.js

@@ -1,24 +1,25 @@
+// eslint-disable-next-line @stencil-community/ban-exported-const-enums
 export var SixDateFormats;
 (function (SixDateFormats) {
-  SixDateFormats["DDMMYYY_DOT"] = "dd.mm.yyyy";
-  SixDateFormats["YYYYMMDD_DASH"] = "yyyy-mm-dd";
-  SixDateFormats["DDMMYYYY_DASH"] = "dd-mm-yyyy";
-  SixDateFormats["DDMMYYYY_SLASH"] = "dd/mm/yyyy";
-  SixDateFormats["YYYYMMDD_SLASH"] = "yyyy/mm/dd";
-  SixDateFormats["DDMMYY_DOT"] = "dd.mm.yy";
-  SixDateFormats["YYMMDD_DASH"] = "yy-mm-dd";
-  SixDateFormats["DDMMYY_DASH"] = "dd-mm-yy";
-  SixDateFormats["DDMMYY_SLASH"] = "dd/mm/yy";
-  SixDateFormats["YYMMDD_SLASH"] = "yy/mm/dd";
-  SixDateFormats["DDMMYYY_DOT_TIME"] = "dd.mm.yyyy hh:MM:ss";
-  SixDateFormats["YYYYMMDD_DASH_TIME"] = "yyyy-mm-dd hh:MM:ss";
-  SixDateFormats["DDMMYYYY_DASH_TIME"] = "dd-mm-yyyy hh:MM:ss";
-  SixDateFormats["DDMMYYYY_SLASH_TIME"] = "dd/mm/yyyy hh:MM:ss";
-  SixDateFormats["YYYYMMDD_SLASH_TIME"] = "yyyy/mm/dd hh:MM:ss";
-  SixDateFormats["DDMMYY_DOT_TIME"] = "dd.mm.yy hh:MM:ss";
-  SixDateFormats["YYMMDD_DASH_TIME"] = "yy-mm-dd hh:MM:ss";
-  SixDateFormats["DDMMYY_DASH_TIME"] = "dd-mm-yy hh:MM:ss";
-  SixDateFormats["DDMMYY_SLASH_TIME"] = "dd/mm/yy hh:MM:ss";
-  SixDateFormats["YYMMDD_SLASH_TIME"] = "yy/mm/dd hh:MM:ss";
+    SixDateFormats["DDMMYYY_DOT"] = "dd.mm.yyyy";
+    SixDateFormats["YYYYMMDD_DASH"] = "yyyy-mm-dd";
+    SixDateFormats["DDMMYYYY_DASH"] = "dd-mm-yyyy";
+    SixDateFormats["DDMMYYYY_SLASH"] = "dd/mm/yyyy";
+    SixDateFormats["YYYYMMDD_SLASH"] = "yyyy/mm/dd";
+    SixDateFormats["DDMMYY_DOT"] = "dd.mm.yy";
+    SixDateFormats["YYMMDD_DASH"] = "yy-mm-dd";
+    SixDateFormats["DDMMYY_DASH"] = "dd-mm-yy";
+    SixDateFormats["DDMMYY_SLASH"] = "dd/mm/yy";
+    SixDateFormats["YYMMDD_SLASH"] = "yy/mm/dd";
+    SixDateFormats["DDMMYYY_DOT_TIME"] = "dd.mm.yyyy hh:MM:ss";
+    SixDateFormats["YYYYMMDD_DASH_TIME"] = "yyyy-mm-dd hh:MM:ss";
+    SixDateFormats["DDMMYYYY_DASH_TIME"] = "dd-mm-yyyy hh:MM:ss";
+    SixDateFormats["DDMMYYYY_SLASH_TIME"] = "dd/mm/yyyy hh:MM:ss";
+    SixDateFormats["YYYYMMDD_SLASH_TIME"] = "yyyy/mm/dd hh:MM:ss";
+    SixDateFormats["DDMMYY_DOT_TIME"] = "dd.mm.yy hh:MM:ss";
+    SixDateFormats["YYMMDD_DASH_TIME"] = "yy-mm-dd hh:MM:ss";
+    SixDateFormats["DDMMYY_DASH_TIME"] = "dd-mm-yy hh:MM:ss";
+    SixDateFormats["DDMMYY_SLASH_TIME"] = "dd/mm/yy hh:MM:ss";
+    SixDateFormats["YYMMDD_SLASH_TIME"] = "yy/mm/dd hh:MM:ss";
 })(SixDateFormats || (SixDateFormats = {}));
 //# sourceMappingURL=six-date-formats.js.map

package/dist/collection/components/six-datepicker/six-date-formats.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-date-formats.js","sourceRoot":"","sources":["../../../src/components/six-datepicker/six-date-formats.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAsBX;AAtBD,WAAY,cAAc;EACxB,4CAA0B,CAAA;EAC1B,8CAA4B,CAAA;EAC5B,8CAA4B,CAAA;EAC5B,+CAA6B,CAAA;EAC7B,+CAA6B,CAAA;EAC7B,yCAAuB,CAAA;EACvB,0CAAwB,CAAA;EACxB,0CAAwB,CAAA;EACxB,2CAAyB,CAAA;EACzB,2CAAyB,CAAA;EAEzB,0DAAwC,CAAA;EACxC,4DAA0C,CAAA;EAC1C,4DAA0C,CAAA;EAC1C,6DAA2C,CAAA;EAC3C,6DAA2C,CAAA;EAC3C,uDAAqC,CAAA;EACrC,wDAAsC,CAAA;EACtC,wDAAsC,CAAA;EACtC,yDAAuC,CAAA;EACvC,yDAAuC,CAAA;AACzC,CAAC,EAtBW,cAAc,KAAd,cAAc,QAsBzB","sourcesContent":["export enum SixDateFormats {\n  DDMMYYY_DOT = 'dd.mm.yyyy',\n  YYYYMMDD_DASH = 'yyyy-mm-dd',\n  DDMMYYYY_DASH = 'dd-mm-yyyy',\n  DDMMYYYY_SLASH = 'dd/mm/yyyy',\n  YYYYMMDD_SLASH = 'yyyy/mm/dd',\n  DDMMYY_DOT = 'dd.mm.yy',\n  YYMMDD_DASH = 'yy-mm-dd',\n  DDMMYY_DASH = 'dd-mm-yy',\n  DDMMYY_SLASH = 'dd/mm/yy',\n  YYMMDD_SLASH = 'yy/mm/dd',\n\n  DDMMYYY_DOT_TIME = 'dd.mm.yyyy hh:MM:ss',\n  YYYYMMDD_DASH_TIME = 'yyyy-mm-dd hh:MM:ss',\n  DDMMYYYY_DASH_TIME = 'dd-mm-yyyy hh:MM:ss',\n  DDMMYYYY_SLASH_TIME = 'dd/mm/yyyy hh:MM:ss',\n  YYYYMMDD_SLASH_TIME = 'yyyy/mm/dd hh:MM:ss',\n  DDMMYY_DOT_TIME = 'dd.mm.yy hh:MM:ss',\n  YYMMDD_DASH_TIME = 'yy-mm-dd hh:MM:ss',\n  DDMMYY_DASH_TIME = 'dd-mm-yy hh:MM:ss',\n  DDMMYY_SLASH_TIME = 'dd/mm/yy hh:MM:ss',\n  YYMMDD_SLASH_TIME = 'yy/mm/dd hh:MM:ss',\n}\n"]}
+{"version":3,"file":"six-date-formats.js","sourceRoot":"","sources":["../../../src/components/six-datepicker/six-date-formats.tsx"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,CAAN,IAAY,cAsBX;AAtBD,WAAY,cAAc;IACxB,4CAA0B,CAAA;IAC1B,8CAA4B,CAAA;IAC5B,8CAA4B,CAAA;IAC5B,+CAA6B,CAAA;IAC7B,+CAA6B,CAAA;IAC7B,yCAAuB,CAAA;IACvB,0CAAwB,CAAA;IACxB,0CAAwB,CAAA;IACxB,2CAAyB,CAAA;IACzB,2CAAyB,CAAA;IAEzB,0DAAwC,CAAA;IACxC,4DAA0C,CAAA;IAC1C,4DAA0C,CAAA;IAC1C,6DAA2C,CAAA;IAC3C,6DAA2C,CAAA;IAC3C,uDAAqC,CAAA;IACrC,wDAAsC,CAAA;IACtC,wDAAsC,CAAA;IACtC,yDAAuC,CAAA;IACvC,yDAAuC,CAAA;AACzC,CAAC,EAtBW,cAAc,KAAd,cAAc,QAsBzB","sourcesContent":["// eslint-disable-next-line @stencil-community/ban-exported-const-enums\nexport enum SixDateFormats {\n  DDMMYYY_DOT = 'dd.mm.yyyy',\n  YYYYMMDD_DASH = 'yyyy-mm-dd',\n  DDMMYYYY_DASH = 'dd-mm-yyyy',\n  DDMMYYYY_SLASH = 'dd/mm/yyyy',\n  YYYYMMDD_SLASH = 'yyyy/mm/dd',\n  DDMMYY_DOT = 'dd.mm.yy',\n  YYMMDD_DASH = 'yy-mm-dd',\n  DDMMYY_DASH = 'dd-mm-yy',\n  DDMMYY_SLASH = 'dd/mm/yy',\n  YYMMDD_SLASH = 'yy/mm/dd',\n\n  DDMMYYY_DOT_TIME = 'dd.mm.yyyy hh:MM:ss',\n  YYYYMMDD_DASH_TIME = 'yyyy-mm-dd hh:MM:ss',\n  DDMMYYYY_DASH_TIME = 'dd-mm-yyyy hh:MM:ss',\n  DDMMYYYY_SLASH_TIME = 'dd/mm/yyyy hh:MM:ss',\n  YYYYMMDD_SLASH_TIME = 'yyyy/mm/dd hh:MM:ss',\n  DDMMYY_DOT_TIME = 'dd.mm.yy hh:MM:ss',\n  YYMMDD_DASH_TIME = 'yy-mm-dd hh:MM:ss',\n  DDMMYY_DASH_TIME = 'dd-mm-yy hh:MM:ss',\n  DDMMYY_SLASH_TIME = 'dd/mm/yy hh:MM:ss',\n  YYMMDD_SLASH_TIME = 'yy/mm/dd hh:MM:ss',\n}\n"]}

package/dist/collection/components/six-datepicker/six-datepicker.css

@@ -3,7 +3,7 @@
   box-sizing: border-box;
 }
 :host *, :host *:before, :host *:after {
-  box-sizing: inherit;
+  box-sizing: border-box;
 }
 
 :host {