<svelte:options
  customElement={{
    tag: 'm-datepicker',
    props: {
      isinvalid: { reflect: true, type: 'Boolean', attribute: 'isinvalid' },
      disabled: { reflect: true, type: 'Boolean', attribute: 'disabled' },
      readonly: { reflect: true, type: 'Boolean', attribute: 'readonly' },
      isclearable: { reflect: true, type: 'Boolean', attribute: 'isclearable' },
    },
    extend: customElementForwardEvents,
  }}
/>

<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  import { CrossCircleFilled24 } from '@mozaic-ds/icons-svelte';
  /**
   * A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the datepicker element, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the datepicker element, typically used for form submission.
     */
    name?: string;
    /**
     * The current value of the datepicker field.
     */
    value?: string | number;
    /**
     * If `true`, applies an invalid state to the datepicker.
     */
    isinvalid?: boolean;
    /**
     * If `true`, disables the datepicker, making it non-interactive.
     */
    disabled?: boolean;
    /**
     * Determines the size of the datepicker.
     */
    size?: 's' | 'm';
    /**
     * If `true`, the datepicker is read-only (cannot be edited).
     */
    readonly?: boolean;
    /**
     * If `true`, a clear button will appear when the datepicker has a value.
     */
    isclearable?: boolean;
    /**
     * The label text for the clear button.
     */
    clearlabel?: string;
  }

  let {
    id,
    name,
    value = $bindable(),
    isinvalid,
    disabled,
    size = 'm',
    readonly,
    isclearable,
    clearlabel = 'clear content',
    class: className,
    ...attrs
  }: Props = $props();

  const resetValue = () => (value = '');
</script>

<div
  class={[
    'mc-datepicker mc-text-input',
    `mc-text-input--${size}`,
    `mc-datepicker--${size}`,
    isinvalid && 'is-invalid',
    className,
  ]}
>
  <input
    class="mc-datepicker__control mc-text-input__control"
    type="date"
    bind:value
    {id}
    {name}
    {disabled}
    {readonly}
    aria-invalid={isinvalid}
    {...attrs}
  />

  {#if isclearable && value}
    <div class="mc-datepicker__controls-options mc-controls-options">
      <button type="button" class="mc-controls-options__button" onclick={resetValue}>
        <CrossCircleFilled24 className="mc-controls-options__icon" />
        <span class="mc-controls-options__label">{clearlabel}</span>
      </button>
    </div>
  {/if}
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
/* stylelint-disable string-no-newline */
.mc-text-input {
  transition: box-shadow 200ms ease;
  background-color: var(--forms-color-background-default, #ffffff);
  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
  border-radius: var(--forms-border-radius, 0.25rem);
  transition: all ease 200ms;
  color: var(--forms-color-text-default, #000000);
  display: block;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}
.mc-text-input__control {
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  outline: none;
}
.mc-text-input__control[type=number] {
  /* For Blink & WebKit rendering engines */
}
.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.mc-text-input__control[type=number] {
  /* For Gecko rendering engine */
  appearance: textfield;
}
.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
  appearance: none;
}
.mc-text-input__control {
  padding: 0.75rem 0.6875rem;
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--forms-color-text-default, #000000);
  flex-grow: 1;
}
.mc-text-input__control::placeholder {
  color: var(--forms-color-placeholder, #666666);
}
.mc-text-input__addon {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}
.mc-text-input__icon {
  fill: var(--forms-color-icon-default, #666666);
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}
.mc-text-input:focus-within {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-text-input:hover:not(:focus-within) {
  border-color: var(--forms-color-border-hover, #4d4d4d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
}
.mc-text-input:has(input:disabled) {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
  pointer-events: none;
}
.mc-text-input:has(input[readonly]) {
  border-color: var(--forms-color-border-read-only, #cccccc);
  pointer-events: none;
}
.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-start: 0.6875rem;
}
.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-start: 0;
}
.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-end: 0.6875rem;
}
.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-end: 0;
}
.mc-text-input--s {
  height: 2rem;
}
.mc-text-input--s .mc-text-input__control {
  padding: 0.375rem 0.6875rem;
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
}
.mc-text-input--s:has(.mc-text-input__icon) {
  padding-inline-start: 0.4375rem;
}
.mc-text-input--s:has(.mc-controls-options) {
  padding-inline-end: 0.4375rem;
}
.mc-text-input.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-text-input.is-invalid:hover:not(:focus-within) {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}
.mc-text-input * {
  box-sizing: border-box;
}

/* stylelint-enable string-no-newline */
.mc-datepicker {
  border-radius: var(--border-radius-s, 0.25rem);
  position: relative;
}
.mc-datepicker__control {
  font-family: var(--font-family, LeroyMerlin), sans-serif;
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  display: block;
  padding: 0 0.75rem;
}
.mc-datepicker__control::-webkit-calendar-picker-indicator {
  padding-right: 1rem;
  opacity: 0;
  transform: scale(2);
}
.mc-datepicker__control::-moz-calendar-picker-indicator {
  padding-right: 1rem;
  opacity: 0;
  transform: scale(2);
}
.mc-datepicker__control::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  background-color: var(--forms-color-icon-interactive, #000000);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-datepicker__control.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-datepicker__control.is-invalid:hover:not(:focus-within) {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}
.mc-datepicker__control:disabled {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='1.5rem' width='1.5rem' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 3c0-.55228-.44772-1-1-1s-1 .44772-1 1v1H3c-.55228 0-1 .44772-1 1v16c0 .5523.44772 1 1 1h18c.5523 0 1-.4477 1-1V5c0-.55228-.4477-1-1-1h-3.5V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H13V3c0-.55228-.4477-1-1-1s-1 .44772-1 1v1H8.5V3Zm7 3H13v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6H8.5v1c0 .55228-.44772 1-1 1s-1-.44772-1-1V6H4v3.5h16V6h-2.5v1c0 .55228-.4477 1-1 1s-1-.44772-1-1V6ZM4 11.5V20h16v-8.5H4Z'/%3E%3C/svg%3E") no-repeat center/contain;
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
}
.mc-datepicker__control:disabled::after {
  background-color: var(--forms-color-icon-disabled, #737373);
}
.mc-datepicker__control:disabled:hover:not(:focus-within) {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
}
.mc-datepicker:has(.mc-controls-options) {
  padding-inline-end: 0;
}
.mc-datepicker:has(input:disabled) {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
  pointer-events: all;
  cursor: not-allowed;
}
.mc-datepicker:has(input:disabled):hover {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
}
.mc-datepicker--s .mc-datepicker__control {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-datepicker--s .mc-datepicker__control:disabled {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' width='1.25rem' height='1.25rem' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M7 2.5a.75.75 0 0 0-1.5 0v.917h-3a.75.75 0 0 0-.75.75V17.5c0 .414.336.75.75.75h15a.75.75 0 0 0 .75-.75V4.167a.75.75 0 0 0-.75-.75h-3V2.5a.75.75 0 0 0-1.5 0v.917h-2.25V2.5a.75.75 0 0 0-1.5 0v.917H7zm6 2.417h-2.25v.916a.75.75 0 0 1-1.5 0v-.916H7v.916a.75.75 0 1 1-1.5 0v-.916H3.25V8h13.5V4.917H14.5v.916a.75.75 0 0 1-1.5 0zM3.25 9.5v7.25h13.5V9.5z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.mc-datepicker__controls-options {
  position: absolute;
  right: 2.75rem;
  top: 0.75rem;
}

.mc-controls-options {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  gap: 0.5rem;
}
.mc-controls-options__button {
  background-color: transparent;
  border-width: 0;
  color: initial;
  font-family: inherit;
  outline: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--border-radius-full, 100%);
}
.mc-controls-options__button:hover .mc-controls-options__icon {
  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
}
.mc-controls-options__button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-controls-options__icon {
  fill: var(--forms-color-icon-clear, #666666);
  color: var(--forms-color-icon-clear, #666666);
}
.mc-controls-options__button, .mc-controls-options__icon {
  height: 1.5rem;
  width: 1.5rem;
}
.mc-controls-options__label {
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  padding: 0;
  width: 1px;
}
.mc-controls-options__unit {
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}</style>
