@six-group/ui-library 0.0.0-insider.24fcc9e

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

@@ -0,0 +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"]}

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

@@ -0,0 +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)))))))));
+};
+//# sourceMappingURL=day-selection.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,12 @@
+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)))))))));
+};
+//# sourceMappingURL=month-selection.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+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)))))))));
+};
+//# sourceMappingURL=year-selection.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,24 @@
+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 || (SixDateFormats = {}));
+//# sourceMappingURL=six-date-formats.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,156 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+  font-family: var(--six-font-family);
+}
+
+.datepicker__container {
+  position: relative;
+}
+.datepicker__popup {
+  min-width: 400px;
+  background-color: white;
+  padding: 0.5em 0.5em 1.5em;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  user-select: none;
+  position: absolute;
+  z-index: var(--six-z-index-dropdown);
+  right: 0;
+  left: 0;
+}
+.datepicker__popup--is-up {
+  bottom: 100%;
+  min-height: 382px;
+}
+.datepicker__popup--is-inline {
+  position: initial;
+  box-shadow: none;
+  border: 1px solid var(--six-color-web-rock-400);
+}
+
+.datepicker-header {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--six-color-web-rock-400);
+  padding: 0.5em;
+  margin-bottom: 1em;
+}
+.datepicker-header svg {
+  fill: var(--six-color-web-rock-900);
+  stroke: none;
+}
+.datepicker-header__btn {
+  cursor: pointer;
+  width: 2.5em;
+  height: 2.5em;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+}
+.datepicker-header__btn:hover {
+  background-color: var(--six-color-web-rock-100);
+  border-radius: 100%;
+}
+.datepicker-header__label {
+  display: flex;
+}
+.datepicker-header__label > div {
+  cursor: pointer;
+  padding: 0.5em;
+  display: flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+}
+.datepicker-header__label > div:hover {
+  background-color: var(--six-color-web-rock-100);
+}
+
+.datepicker-table {
+  width: 100%;
+}
+.datepicker-table__cell {
+  text-align: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+}
+.datepicker-table__cell:hover {
+  background-color: var(--six-color-web-rock-100);
+}
+.datepicker-table__cell--is-today {
+  border: 1px solid var(--six-color-web-rock-400);
+}
+.datepicker-table__cell--is-selected {
+  background-color: var(--six-color-red);
+  color: var(--six-color-white);
+}
+.datepicker-table__cell--is-disabled {
+  background-color: var(--six-color-web-rock-200);
+  cursor: initial;
+}
+.datepicker-table__cell--is-disabled:hover {
+  background-color: var(--six-color-web-rock-200);
+}
+.datepicker-table__cell--is-outdated {
+  color: var(--six-color-web-rock-400);
+}
+
+.datepicker-clear {
+  display: inline-flex;
+  align-items: center;
+  font-size: inherit;
+  color: var(--six-input-icon-color);
+  border: none;
+  background: none;
+  padding: 0;
+  transition: var(--six-transition-fast) color;
+  cursor: pointer;
+}
+.datepicker-clear:hover {
+  color: var(--six-input-icon-color-hover);
+}
+.datepicker-clear:focus {
+  outline: none;
+}
+.datepicker-clear--right {
+  right: 0;
+  position: absolute;
+}
+.datepicker-clear--left {
+  right: 35px;
+  position: absolute;
+}
+
+.input--empty .datepicker-clear {
+  visibility: hidden;
+}
+
+.prefix {
+  cursor: pointer;
+}
+.prefix--right {
+  right: 0;
+  display: inline-flex;
+  position: absolute;
+  font-size: inherit;
+  color: var(--six-input-icon-color);
+  border: none;
+  background: none;
+  margin-right: var(--six-input-spacing-medium);
+  transition: var(--six-transition-fast) color;
+}
+
+six-timepicker::part(popup) {
+  border: none;
+  padding: 0.5em 0.5em 0;
+  min-height: 0;
+}