'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b499856a.js');
const uniqueId = require('./uniqueId-dab8aef4.js');
const stringCombiner = require('./stringCombiner-21e97a77.js');
const chevronDown = require('./chevron-down-dda65b2e.js');
const close = require('./close-76c25c23.js');

const calendar = { "name": "calendar", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M58 51.3846V16.9231C57.9973 14.5451 56.0588 12.6181 53.6667 12.6154H49.3333V8.30769C49.3306 5.92975 47.3921 4.00272 45 4H40.6667C38.2746 4.00272 36.3361 5.92975 36.3333 8.30769V12.6154H27.6667V8.30769C27.6639 5.92975 25.7254 4.00272 23.3333 4H19C16.6079 4.00272 14.6694 5.92975 14.6667 8.30769V12.6154H10.3333C7.94123 12.6181 6.00273 14.5451 6 16.9231V51.3846C6.00547 56.1405 9.88247 59.9946 14.6667 60H49.3333C54.1175 59.9946 57.9945 56.1405 58 51.3846ZM44.9999 16.923H40.6666V8.30766H44.9999V16.923ZM23.3333 16.923H18.9999V8.30766H23.3333V16.923ZM49.3334 16.9231H53.6668V24.9852H10.3334V16.9231H14.6668C14.6695 19.301 16.608 21.228 19.0001 21.2307H23.3334C25.7255 21.228 27.664 19.301 27.6668 16.9231H36.3334C36.3362 19.301 38.2747 21.228 40.6668 21.2307H45.0001C47.3922 21.228 49.3307 19.301 49.3334 16.9231ZM10.3334 28.9852V51.3846C10.3362 53.7625 12.2747 55.6896 14.6668 55.6923H49.3334C51.7255 55.6896 53.664 53.7625 53.6668 51.3846V28.9852H10.3334Z\"/><path d=\"M14.6949 35.3069C14.6949 34.2023 15.5957 33.3069 16.7068 33.3069H21.378C22.4891 33.3069 23.3899 34.2024 23.3899 35.3069V36.7091C23.3899 37.8137 22.4891 38.7091 21.378 38.7091H16.7068C15.5957 38.7091 14.6949 37.8137 14.6949 36.7091V35.3069Z\"/><path d=\"M27.7374 35.3069C27.7374 34.2023 28.6381 33.3069 29.7493 33.3069H34.4204C35.5316 33.3069 36.4323 34.2024 36.4323 35.3069V36.7091C36.4323 37.8137 35.5316 38.7091 34.4204 38.7091H29.7493C28.6381 38.7091 27.7374 37.8137 27.7374 36.7091V35.3069Z\"/><path d=\"M40.7798 35.3069C40.7798 34.2023 41.6806 33.3069 42.7917 33.3069H47.4629C48.574 33.3069 49.4748 34.2024 49.4748 35.3069V36.7091C49.4748 37.8137 48.574 38.7091 47.4629 38.7091H42.7917C41.6806 38.7091 40.7798 37.8137 40.7798 36.7091V35.3069Z\"/><path d=\"M14.6949 46.1114C14.6949 45.0068 15.5957 44.1114 16.7068 44.1114H21.378C22.4891 44.1114 23.3899 45.0068 23.3899 46.1114V47.5136C23.3899 48.6181 22.4891 49.5136 21.378 49.5136H16.7068C15.5957 49.5136 14.6949 48.6181 14.6949 47.5136V46.1114Z\"/><path d=\"M27.7374 46.1114C27.7374 45.0068 28.6381 44.1114 29.7493 44.1114H34.4204C35.5316 44.1114 36.4323 45.0068 36.4323 46.1114V47.5136C36.4323 48.6181 35.5316 49.5136 34.4204 49.5136H29.7493C28.6381 49.5136 27.7374 48.6181 27.7374 47.5136V46.1114Z\"/><path d=\"M40.7798 46.1114C40.7798 45.0068 41.6806 44.1114 42.7917 44.1114H47.4629C48.574 44.1114 49.4748 45.0068 49.4748 46.1114V47.5136C49.4748 48.6181 48.574 49.5136 47.4629 49.5136H42.7917C41.6806 49.5136 40.7798 48.6181 40.7798 47.5136V46.1114Z\"/></svg>" };

const chevronLeft = { "name": "chevron-left", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M42.1162 49.8902C42.6915 50.4081 42.9468 51.1934 42.786 51.9505C42.6252 52.7076 42.0727 53.3214 41.3366 53.5607C40.6005 53.8 39.7927 53.6284 39.2174 53.1106L17.5508 33.6106C17.0942 33.1999 16.8335 32.6146 16.8335 32.0004C16.8335 31.3863 17.0942 30.801 17.5508 30.3902L39.2174 10.8902C40.1067 10.0898 41.4766 10.1618 42.277 11.0511C43.0775 11.9403 43.0055 13.3102 42.1162 14.1106L22.2385 32.0004L42.1162 49.8902Z\"/></svg>" };

const chevronRight = { "name": "chevron-right", "svg": "<svg viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M47.1663 32.0005C47.1667 32.6147 46.9059 33.2001 46.449 33.6106L24.7824 53.1106C23.8931 53.9111 22.5233 53.8391 21.7228 52.9498C20.9223 52.0606 20.9943 50.6907 21.8836 49.8903L41.7613 32.0005L21.8836 14.1106C21.3083 13.5928 21.053 12.8075 21.2138 12.0503C21.3746 11.2932 21.9271 10.6794 22.6632 10.4402C23.3993 10.2009 24.2071 10.3724 24.7824 10.8903L46.449 30.3903C46.9059 30.8008 47.1667 31.3862 47.1663 32.0005Z\"/></svg>" };

const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
var DaysOfWeek;
(function (DaysOfWeek) {
  DaysOfWeek[DaysOfWeek["Sunday"] = 0] = "Sunday";
  DaysOfWeek[DaysOfWeek["Monday"] = 1] = "Monday";
  DaysOfWeek[DaysOfWeek["Tuesday"] = 2] = "Tuesday";
  DaysOfWeek[DaysOfWeek["Wednesday"] = 3] = "Wednesday";
  DaysOfWeek[DaysOfWeek["Thursday"] = 4] = "Thursday";
  DaysOfWeek[DaysOfWeek["Friday"] = 5] = "Friday";
  DaysOfWeek[DaysOfWeek["Saturday"] = 6] = "Saturday";
})(DaysOfWeek || (DaysOfWeek = {}));
function createDate(year, month, day) {
  const dayInt = parseInt(day, 10);
  const monthInt = parseInt(month, 10);
  const yearInt = parseInt(year, 10);
  const isValid = Number.isInteger(yearInt) && // all parts should be integers
    Number.isInteger(monthInt) &&
    Number.isInteger(dayInt) &&
    monthInt > 0 && // month must be 1-12
    monthInt <= 12 &&
    dayInt > 0 && // day must be 1-31
    dayInt <= 31 &&
    yearInt > 0;
  if (isValid) {
    return new Date(yearInt, monthInt - 1, dayInt);
  }
}
/**
 * @param value date string in ISO format YYYY-MM-DD
 */
function parseISODate(value) {
  if (!value) {
    return undefined;
  }
  const matches = value.match(ISO_DATE_FORMAT);
  if (matches !== null && matches.length) {
    return createDate(matches[1], matches[2], matches[3]);
  }
}
/**
 * print date in format YYYY-MM-DD
 * @param date
 */
function printISODate(date) {
  if (date === undefined) {
    return '';
  }
  let d = date.getDate().toString(10);
  let m = (date.getMonth() + 1).toString(10);
  let y = date.getFullYear().toString(10);
  // days are not zero-indexed, so pad if less than 10
  if (date.getDate() < 10) {
    d = `0${d}`;
  }
  // months *are* zero-indexed, pad if less than 9!
  if (date.getMonth() < 9) {
    m = `0${m}`;
  }
  return `${y}-${m}-${d}`;
}
/**
 * Compare if two dates are equal in terms of day, month, and year
 */
function isEqual(a, b) {
  if (a == null || b == null) {
    return false;
  }
  return isEqualMonth(a, b) && a.getDate() === b.getDate();
}
/**
 * Compare if two dates are in the same month of the same year.
 */
function isEqualMonth(a, b) {
  if (a == null || b == null) {
    return false;
  }
  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
}
function addDays(date, days) {
  const d = new Date(date);
  d.setDate(d.getDate() + days);
  return d;
}
function startOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
  const d = new Date(date);
  const day = d.getDay();
  const diff = (day < firstDayOfWeek ? 7 : 0) + day - firstDayOfWeek;
  d.setDate(d.getDate() - diff);
  return d;
}
function endOfWeek(date, firstDayOfWeek = DaysOfWeek.Monday) {
  const d = new Date(date);
  const day = d.getDay();
  const diff = (day < firstDayOfWeek ? -7 : 0) + 6 - (day - firstDayOfWeek);
  d.setDate(d.getDate() + diff);
  return d;
}
function startOfMonth(date) {
  return new Date(date.getFullYear(), date.getMonth(), 1);
}
function endOfMonth(date) {
  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
}
function setMonth(date, month) {
  const d = new Date(date);
  d.setMonth(month);
  return d;
}
function setYear(date, year) {
  const d = new Date(date);
  d.setFullYear(year);
  return d;
}
/**
 * Check if date is within a min and max
 */
function inRange(date, min, max) {
  return clamp(date, min, max) === date;
}
/**
 * Ensures date is within range, returns min or max if out of bounds
 */
function clamp(date, min, max) {
  const time = date.getTime();
  if (min && min instanceof Date && time < min.getTime()) {
    return min;
  }
  if (max && max instanceof Date && time > max.getTime()) {
    return max;
  }
  return date;
}
/**
 * given start and end date, return an (inclusive) array of all dates in between
 * @param start
 * @param end
 */
function getDaysInRange(start, end) {
  const days = [];
  let current = start;
  while (!isEqual(current, end)) {
    days.push(current);
    current = addDays(current, 1);
  }
  days.push(current);
  return days;
}
/**
 * given a date, return an array of dates from a calendar perspective
 * @param date
 * @param firstDayOfWeek
 */
function getViewOfMonth(date, firstDayOfWeek = DaysOfWeek.Monday) {
  const start = startOfWeek(startOfMonth(date), firstDayOfWeek);
  const end = endOfWeek(endOfMonth(date), firstDayOfWeek);
  return getDaysInRange(start, end);
}

const DatePickerInput = ({ onClick, dateFormatter, describedBy, localization, name, formattedValue, valueAsDate, value, identifier, disabled, readonly, required, role, touched, buttonLabel, buttonRef, inputRef, onInput, onBlur, onFocus, makeTouched, htmlForm, }) => {
  const toggleDisabledState = readonly || disabled;
  return (index.h(index.Fragment, null,
    index.h("input", { class: {
        'telia-date-picker__input': true,
        'telia-date-picker__input--touched': touched,
      }, value: formattedValue, id: identifier, disabled: disabled, readonly: readonly, role: role, required: required ? true : undefined, "aria-autocomplete": "none", "aria-describedby": describedBy, onInput: onInput, onFocus: onFocus, onBlur: event => {
        makeTouched();
        onBlur(event);
      }, autoComplete: "off", ref: inputRef, onInvalid: event => {
        makeTouched();
        event.preventDefault();
      }, form: htmlForm }),
    index.h("input", { type: "hidden", name: name, value: value }),
    index.h("div", { class: "telia-date-picker__input-icon-container" },
      index.h("telia-button", { allyLabel: buttonLabel, variant: "text", size: "sm", onClick: onClick, disabled: toggleDisabledState, ref: el => buttonRef(el), type: "button", "data-testid": "telia-date-picker__toggle-button" },
        index.h("telia-icon", { class: "telia-date-picker__toggle-icon", svg: calendar.svg, size: "sm" }),
        index.h("span", { class: "telia-date-picker__vhidden" },
          localization.buttonLabel,
          valueAsDate && (index.h("span", null,
            ", ",
            localization.selectedDateMessage,
            ' ',
            dateFormatter.format(valueAsDate))))))));
};

const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, disabled, inRange, isSelected, dateFormatter, }) => {
  const isToday = isEqual(day, today);
  const isMonth = isEqualMonth(day, focusedDay);
  const isFocused = isEqual(day, focusedDay);
  const isOutsideRange = !inRange;
  const isDisabled = disabled || isOutsideRange;
  const handleClick = e => {
    onDaySelect(e, day);
  };
  return (index.h("button", { class: {
      'telia-date-picker__day': true,
      'is-today': isToday,
      'is-month': isMonth,
      'is-disabled': isDisabled,
    }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isDisabled ? 'true' : undefined, 
    // disabled days have to be focusable for a11y purposes
    disabled: isOutsideRange, type: "button", "aria-pressed": isSelected ? 'true' : 'false', ref: el => {
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      if (isFocused && el && focusedDayRef) {
        focusedDayRef(el);
      }
    } },
    index.h("span", { "aria-hidden": "true" }, day.getDate()),
    index.h("span", { class: "telia-date-picker__vhidden" }, dateFormatter.format(day))));
};

/*
 * Split array to an array fileld with chunks size of chunkSize parameter.
 */
function chunk(array, chunkSize) {
  const result = [];
  for (let i = 0; i < array.length; i += chunkSize) {
    result.push(array.slice(i, i + chunkSize));
  }
  return result;
}
/*
 * Regular map function with offset. Array can be reordered to start
 * from different point with offset. For example, does week start from
 * Monday or Sunday.
 */
function mapWithOffset(array, startingOffset, mapFn) {
  return array.map((_, i) => {
    const adjustedIndex = (i + startingOffset) % array.length;
    return mapFn(array[adjustedIndex]);
  });
}

const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, dateFormatter, isDateDisabled, onDateSelect, onKeyboardNavigation, focusedDayRef, }) => {
  const today = new Date();
  const days = getViewOfMonth(focusedDate, firstDayOfWeek);
  return (index.h("div", { class: "telia-date-picker__table-wrapper" },
    index.h("table", { class: "telia-date-picker__table", "aria-labelledby": labelledById },
      index.h("thead", null,
        index.h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, dayName => (index.h("th", { class: "telia-date-picker__table-header", scope: "col" },
          index.h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
          index.h("span", { class: "telia-date-picker__vhidden" }, dayName)))))),
      index.h("tbody", null, chunk(days, 7).map(week => (index.h("tr", { class: "telia-date-picker__row" }, week.map(day => (index.h("td", { class: "telia-date-picker__cell" },
        index.h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, isSelected: isEqual(day, selectedDate), disabled: isDateDisabled(day), inRange: inRange(day, min, max), onDaySelect: onDateSelect, dateFormatter: dateFormatter, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef })))))))))));
};

const localization = {
  buttonLabel: 'Choose date',
  placeholder: 'YYYY-MM-DD',
  selectedDateMessage: 'Selected date is',
  prevMonthLabel: 'Previous month',
  nextMonthLabel: 'Next month',
  monthSelectLabel: 'Month',
  yearSelectLabel: 'Year',
  closeLabel: 'Close window',
  calendarHeading: 'Choose a date',
  dayNames: [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ],
  monthNames: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],
  monthNamesShort: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ],
  locale: 'en-GB',
};

const isoAdapter = {
  parse: parseISODate,
  format: printISODate,
};

/**
 * Return array of numbers between range.
 */
const range = (from, to) => {
  const result = [];
  for (var i = from; i <= to; i++) {
    result.push(i);
  }
  return result;
};

const breakpoints = {
  "breakpointSm": "0",
  "breakpointMd": "37.5em",
  "breakpointLg": "64em",
  "breakpointXl": "90em",
  "fluidBreakpointMedium": "60rem",
  "fluidBreakpointXlarge": "144rem"
};

const teliaDatePickerCss = ".telia-date-picker{display:flex;flex-direction:column;position:relative}.telia-date-picker__label{order:1}.telia-date-picker__label label{color:rgba(0, 0, 0, 0.85)}.telia-date-picker__input{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);border-radius:calc(0.2rem * var(--voca-rem-multiplier));background-color:#ffffff;font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.6rem * var(--voca-rem-multiplier));line-height:1.5;-webkit-appearance:none;appearance:none;box-sizing:border-box;color:rgba(0, 0, 0, 0.85);display:block;margin:0;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier));width:100%;color:rgba(0, 0, 0, 0.85);height:calc(4.6rem * var(--voca-rem-multiplier));margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:2}.telia-date-picker__input:required{box-shadow:none}.telia-date-picker__input:hover{border:calc(0.2rem * var(--voca-rem-multiplier)) solid #29003e;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-date-picker__input:hover:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-date-picker__input:focus{outline:solid calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline-offset:calc(0.2rem * var(--voca-rem-multiplier));padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-date-picker__input:focus:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-date-picker__input:read-only{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;background-color:rgba(0, 0, 0, 0.05)}.telia-date-picker__input:read-only:hover{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd;padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-date-picker__input:disabled{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);background-color:rgba(0, 0, 0, 0.1);color:rgba(0, 0, 0, 0.4);cursor:not-allowed;-webkit-text-fill-color:#606064}.telia-date-picker__input:disabled:hover{padding:calc(1rem * var(--voca-rem-multiplier)) calc(1.2rem * var(--voca-rem-multiplier))}.telia-date-picker__input:disabled~.telia-date-picker__label .telia-label{color:rgba(0, 0, 0, 0.4);cursor:not-allowed}.telia-date-picker__input:disabled~.telia-date-picker__additional{color:rgba(0, 0, 0, 0.4)}.telia-date-picker__input:invalid{box-shadow:none}.telia-date-picker__input--touched:invalid{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #e4175c}.telia-date-picker__input--touched:invalid:focus{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-date-picker__input--touched:invalid:hover:not(:focus){border:calc(0.2rem * var(--voca-rem-multiplier)) solid #e4175c;padding:calc(calc(1rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier))) calc(calc(1.2rem * var(--voca-rem-multiplier)) - calc(0.1rem * var(--voca-rem-multiplier)))}.telia-date-picker__input-icon-container{align-items:center;display:flex;flex-direction:row;height:calc(4.6rem * var(--voca-rem-multiplier));justify-content:flex-end;margin:calc(-1 * calc(4.6rem * var(--voca-rem-multiplier))) 0 0 calc(100% - calc(1.2rem * var(--voca-rem-multiplier)));order:3}.telia-date-picker__additional{order:5}.telia-date-picker__error{margin:calc(0.4rem * var(--voca-rem-multiplier)) 0 0;order:6}.telia-date-picker__toggle-icon{margin:0 calc(1.2rem * var(--voca-rem-multiplier))}.telia-date-picker__input--touched:invalid~.telia-date-picker__input-icon-container .telia-date-picker__toggle-icon{color:#e4175c}.telia-date-picker__dialog-container{order:4}.telia-date-picker__dialog{z-index:300;background-color:rgba(0, 0, 0, 0.3);bottom:0;display:flex;left:0;min-width:calc(32rem * var(--voca-rem-multiplier));opacity:0;position:fixed;right:0;top:0;transform:translateZ(0);transform-origin:bottom center;transition:transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;visibility:hidden;width:100%;will-change:transform, opacity, visibility}@media screen and (min-width: 37.5em){.telia-date-picker__dialog{z-index:100;background:none;bottom:auto;position:absolute;right:auto;top:auto;transform:scale(0.96) translateZ(0) translateY(-2rem);transform-origin:top right}}.telia-date-picker__dialog.is-left{left:auto;right:0;width:auto}.telia-date-picker__dialog.is-active{opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);visibility:visible}.telia-date-picker__dialog-content{background-color:#ffffff;border-radius:0;border-top-left-radius:calc(0.2rem * var(--voca-rem-multiplier));border-top-right-radius:calc(0.2rem * var(--voca-rem-multiplier));border-top:calc(0.1rem * var(--voca-rem-multiplier)) solid #606064;bottom:0;display:none;left:0;margin:0;max-width:none;padding:0;position:absolute;transform:translateZ(0) translateY(100%);width:100%}@media screen and (min-width: 37.5em){.telia-date-picker__dialog-content{border:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3);border-radius:calc(0.2rem * var(--voca-rem-multiplier));box-shadow:0 calc(1.2rem * var(--voca-rem-multiplier)) calc(2.4rem * var(--voca-rem-multiplier)) rgba(0, 0, 0, 0.1);margin:calc(0.8rem * var(--voca-rem-multiplier)) 0 0 auto;max-width:calc(31rem * var(--voca-rem-multiplier));min-width:calc(29rem * var(--voca-rem-multiplier));padding:0;position:relative;transform:none;transition:none;visibility:visible}}.is-active .telia-date-picker__dialog-content{display:block;transform:translateZ(0) translateY(0)}.telia-date-picker__table-wrapper{margin:calc(1.6rem * var(--voca-rem-multiplier)) 0 calc(2rem * var(--voca-rem-multiplier));padding:0 calc(1.6rem * var(--voca-rem-multiplier)) calc(0.8rem * var(--voca-rem-multiplier))}@media screen and (min-width: 37.5em){.telia-date-picker__table-wrapper{padding:0 calc(2rem * var(--voca-rem-multiplier))}}.telia-date-picker__table{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1rem * var(--voca-rem-multiplier));color:#222222;border-collapse:collapse;border-spacing:0;line-height:1.25;margin:0;padding:0;text-align:center;width:100%}.telia-date-picker__table-header{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(1.2rem * var(--voca-rem-multiplier));color:#222222;letter-spacing:calc(0.1rem * var(--voca-rem-multiplier));line-height:1.4;padding-bottom:calc(0.8rem * var(--voca-rem-multiplier));text-decoration:none;text-transform:uppercase}.telia-date-picker__cell{text-align:center}.telia-date-picker__day{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;font-size:calc(1.4rem * var(--voca-rem-multiplier));color:#29003e;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-variant-numeric:tabular-nums;height:calc(3.2rem * var(--voca-rem-multiplier));line-height:calc(1.6rem * var(--voca-rem-multiplier));padding:0 0 calc(0.1rem * var(--voca-rem-multiplier));position:relative;text-align:center;vertical-align:middle;width:calc(3.2rem * var(--voca-rem-multiplier))}.telia-date-picker__day.is-today{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;color:#29003e;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e}.telia-date-picker__day:hover{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:500;background-color:#edc8ff;color:#29003e}.telia-date-picker__day[aria-pressed=true]{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;background-color:#29003e;color:#ffffff;box-shadow:none;outline:0}.telia-date-picker__day:focus-visible{outline:none}.telia-date-picker__day:focus{outline:none;}.telia-date-picker__day:focus::before{border-radius:calc(99.9rem * var(--voca-rem-multiplier));box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;bottom:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));content:\"\";display:block;left:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));position:absolute;right:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));top:calc(-1 * calc(0.4rem * var(--voca-rem-multiplier)));z-index:101}@media screen and (min-width: 37.5em){.telia-date-picker__day:focus::before{z-index:301}}.telia-date-picker__day:not(.is-month){font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;box-shadow:none}.telia-date-picker__day:not(.is-month),.telia-date-picker__day[aria-disabled=true]{background:transparent;color:rgba(0, 0, 0, 0.4);cursor:default}.telia-date-picker__day[aria-disabled=true]{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:normal;background-color:rgba(0, 0, 0, 0.1);color:rgba(0, 0, 0, 0.6)}.telia-date-picker__header{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid #dcdce1;align-items:center;display:flex;justify-content:space-between;padding:calc(3.2rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier)) calc(0.8rem * var(--voca-rem-multiplier)) calc(calc(1.6rem * var(--voca-rem-multiplier)) - calc(0.8rem * var(--voca-rem-multiplier)));width:100%}@media screen and (min-width: 37.5em){.telia-date-picker__header{padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(2rem * var(--voca-rem-multiplier)) calc(0.8rem * var(--voca-rem-multiplier))}}.telia-date-picker__nav{white-space:nowrap}.telia-date-picker__prev,.telia-date-picker__next{color:#29003e;border:calc(0.1rem * var(--voca-rem-multiplier)) solid #29003e;align-items:center;-moz-appearance:none;-webkit-appearance:none;appearance:none;border-radius:50%;cursor:pointer;display:inline-flex;height:calc(3.2rem * var(--voca-rem-multiplier));justify-content:center;margin-left:calc(0.8rem * var(--voca-rem-multiplier));padding:0;width:calc(3.2rem * var(--voca-rem-multiplier))}.telia-date-picker__prev:not([disabled]):hover,.telia-date-picker__next:not([disabled]):hover{background-color:#edc8ff}.telia-date-picker__prev:focus,.telia-date-picker__next:focus{box-shadow:0 0 0 calc(0.3rem * var(--voca-rem-multiplier)) #0099ff;outline:none}.telia-date-picker__prev:active:focus,.telia-date-picker__next:active:focus{box-shadow:none}.telia-date-picker__prev:disabled,.telia-date-picker__next:disabled{cursor:default;opacity:0.5}.telia-date-picker__prev-icon{margin:0 auto}.telia-date-picker__next-icon{margin:0 auto}.telia-date-picker__select{display:inline-flex;margin-top:calc(0.4rem * var(--voca-rem-multiplier));position:relative}.telia-date-picker__select select{cursor:pointer;font-size:calc(1rem * var(--voca-rem-multiplier));height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.telia-date-picker__select select:focus+.telia-date-picker__select-label{box-shadow:0 0 0 calc(0.2rem * var(--voca-rem-multiplier)) #0099ff}.telia-date-picker__select-icon{margin:0 0 0 calc(0.4rem * var(--voca-rem-multiplier))}.telia-date-picker__select-label{font-family:\"TeliaSans\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-weight:bold;font-size:calc(1.6rem * var(--voca-rem-multiplier));color:#222222;border-radius:calc(0.2rem * var(--voca-rem-multiplier));align-items:center;display:flex;line-height:1.25;padding:0 calc(0.4rem * var(--voca-rem-multiplier)) 0 calc(0.8rem * var(--voca-rem-multiplier));pointer-events:none;position:relative;width:100%}.telia-date-picker__mobile{background-color:#fbf0ff;align-items:center;display:flex;justify-content:space-between;overflow:visible;padding:calc(1.6rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier));position:relative;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width: 37.5em){.telia-date-picker__mobile{background-color:transparent;display:flex;justify-content:flex-end;padding:calc(0.8rem * var(--voca-rem-multiplier)) calc(1.6rem * var(--voca-rem-multiplier))}}.telia-date-picker__mobile-heading{color:#29003e;display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media screen and (min-width: 37.5em){.telia-date-picker__mobile-heading{display:none}}.telia-date-picker__close{color:#222222;border-radius:calc(99.9rem * var(--voca-rem-multiplier));align-items:center;-webkit-appearance:none;appearance:none;border:0;cursor:pointer;display:flex;height:calc(2.4rem * var(--voca-rem-multiplier));justify-content:center;padding:0;width:calc(2.4rem * var(--voca-rem-multiplier))}.telia-date-picker__close:hover{color:#29003e}.telia-date-picker__close-icon{margin:0 auto}.telia-date-picker__vhidden{border:0;clip:rect(calc(0.1rem * var(--voca-rem-multiplier)), calc(0.1rem * var(--voca-rem-multiplier)), calc(0.1rem * var(--voca-rem-multiplier)), calc(0.1rem * var(--voca-rem-multiplier)));height:calc(0.1rem * var(--voca-rem-multiplier));overflow:hidden;padding:0;position:absolute;top:0;width:calc(0.1rem * var(--voca-rem-multiplier))}";

const keyCode = {
  TAB: 9,
  ESC: 27,
  SPACE: 32,
  PAGE_UP: 33,
  PAGE_DOWN: 34,
  END: 35,
  HOME: 36,
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
};
function cleanValue(input, regex) {
  const value = input.value;
  const cursor = input.selectionStart;
  const beforeCursor = value.slice(0, cursor);
  const afterCursor = value.slice(cursor, value.length);
  const filteredBeforeCursor = beforeCursor.replace(regex, '');
  const filterAfterCursor = afterCursor.replace(regex, '');
  const newValue = filteredBeforeCursor + filterAfterCursor;
  const newCursor = filteredBeforeCursor.length;
  input.value = newValue;
  input.selectionStart = input.selectionEnd = newCursor;
  return newValue;
}
const DISALLOWED_CHARACTERS = /[^0-9\.\/\-]+/g;
const TRANSITION_MS = 300;
const TeliaDatePicker = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vocaChange = index.createEvent(this, "vocaChange", 7);
    this.vocaBlur = index.createEvent(this, "vocaBlur", 7);
    this.vocaFocus = index.createEvent(this, "vocaFocus", 7);
    /**
     * Own Properties
     */
    this.monthSelectId = uniqueId.uniqueId('dateMonth');
    this.yearSelectId = uniqueId.uniqueId('dateYear');
    this.dialogLabelId = uniqueId.uniqueId('dateLabel');
    this.body = document.body;
    this.initialTouchX = null;
    this.initialTouchY = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-date-picker';
    /** Name of the date picker input. */
    this.name = 'date';
    /** Additional description id */
    this.additionalId = uniqueId.uniqueId('additional');
    /** Input element id */
    this.inputId = uniqueId.uniqueId('input');
    /** Makes the date picker input component disabled. This prevents users from being able to interact with the input, and conveys its inactive state to assistive technologies. */
    this.disabled = false;
    /**
     * Forces the opening direction of the calendar modal to be always left or right.
     * This setting can be useful when the input is smaller than the opening date picker
     * would be as by default the picker always opens towards right.
     */
    this.direction = 'right';
    /** Enable readonly state */
    this.readonly = false;
    /** Should the input be marked as required? */
    this.required = false;
    /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
    this.value = '';
    /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the max property. */
    this.min = '';
    /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD. This setting can be used alone or together with the min property. */
    this.max = '';
    /** Year range specifies the range of the years to be displayed in past and future, default value is 10 years */
    this.yearRange = { past: 10, future: 10 };
    /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc. Default is Monday. */
    this.firstDayOfWeek = DaysOfWeek.Monday;
    /** Button labels, day names, month names, etc, used for localization. Default is English. */
    this.localization = localization;
    /**
     * Date adapter, for custom parsing/formatting.
     * Must be object with a `parse` function which accepts a `string` and returns a `Date`,
     * and a `format` function which accepts a `Date` and returns a `string`.
     * Default is IS0-8601 parsing and formatting.
     */
    this.dateAdapter = isoAdapter;
    /** Indicates if the modal is open */
    this.modalOpen = false;
    /** Controls which days are disabled and therefore disallowed. For example, this can be used to disallow selection of weekends. */
    this.isDateDisabled = () => false;
    /** Error description id */
    this.errorId = uniqueId.uniqueId('error');
    this.activeFocus = false;
    this.focusedDay = new Date();
    this.open = this.modalOpen;
    /** Error message */
    this.errorMessageState = '';
    /** Input has been blurred at least once */
    this.touched = false;
    /**
     * Local methods.
     */
    // TODO: remove this & style body in css once Firefox supports :has() selector
    this.toggleSmallScreenScroll = () => {
      if (this.body.style.overflowY === 'hidden') {
        this.body.style.overflowY = '';
        return;
      }
      const { matches: isSmallScreen } = window.matchMedia(`(max-width: ${breakpoints.breakpointMd})`);
      if (isSmallScreen) {
        this.body.style.overflowY = 'hidden';
      }
    };
    this.enableActiveFocus = () => {
      this.activeFocus = true;
    };
    this.disableActiveFocus = () => {
      this.activeFocus = false;
    };
    this.toggleOpen = (e) => {
      e.preventDefault();
      this.open ? this.hide(false) : this.show();
    };
    this.handleEscKey = (event) => {
      if (event.keyCode === keyCode.ESC) {
        this.hide();
      }
    };
    this.handleBlur = (event) => {
      event.stopPropagation();
      this.updateErrorState();
      this.vocaBlur.emit({
        component: 'telia-date-picker',
      });
    };
    this.handleFocus = (event) => {
      event.stopPropagation();
      this.vocaFocus.emit({
        component: 'telia-date-picker',
      });
    };
    this.handleTouchStart = (event) => {
      const touch = event.changedTouches[0];
      this.initialTouchX = touch.pageX;
      this.initialTouchY = touch.pageY;
    };
    this.handleTouchEnd = (event) => {
      const touch = event.changedTouches[0];
      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
      const threshold = 70;
      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
      const isDownwardsSwipe = Math.abs(distY) >= threshold && Math.abs(distX) <= threshold && distY > 0;
      if (isHorizontalSwipe) {
        this.addMonths(distX < 0 ? 1 : -1);
      }
      else if (isDownwardsSwipe) {
        this.hide(false);
        event.preventDefault();
      }
      this.initialTouchY = null;
      this.initialTouchX = null;
    };
    this.handleNextMonthClick = (event) => {
      event.preventDefault();
      this.addMonths(1);
    };
    this.handlePreviousMonthClick = (event) => {
      event.preventDefault();
      this.addMonths(-1);
    };
    this.handleFirstFocusableKeydown = (event) => {
      // this ensures focus is trapped inside the dialog
      if (event.keyCode === keyCode.TAB && event.shiftKey) {
        this.focusedDayNode.focus();
        event.preventDefault();
      }
    };
    this.handleCloseButtonClick = () => {
      this.hide();
    };
    this.handleKeyboardNavigation = (event) => {
      // handle tab separately, since it needs to be treated
      // differently to other keyboard interactions
      if (event.keyCode === keyCode.TAB && !event.shiftKey) {
        event.preventDefault();
        // TODO: querySelector as a workaround to focus native button inside telia-button, until telia-button doesn't handle that itself
        this.firstFocusableElement.querySelector('button').focus();
        return;
      }
      var handled = true;
      switch (event.keyCode) {
        case keyCode.RIGHT:
          this.addDays(1);
          break;
        case keyCode.LEFT:
          this.addDays(-1);
          break;
        case keyCode.DOWN:
          this.addDays(7);
          break;
        case keyCode.UP:
          this.addDays(-7);
          break;
        case keyCode.PAGE_UP:
          if (event.shiftKey) {
            this.addYears(-1);
          }
          else {
            this.addMonths(-1);
          }
          break;
        case keyCode.PAGE_DOWN:
          if (event.shiftKey) {
            this.addYears(1);
          }
          else {
            this.addMonths(1);
          }
          break;
        case keyCode.HOME:
          this.startOfWeek();
          break;
        case keyCode.END:
          this.endOfWeek();
          break;
        default:
          handled = false;
      }
      if (handled) {
        event.preventDefault();
        this.enableActiveFocus();
      }
    };
    this.handleDaySelect = (_event, day) => {
      const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max));
      const isAllowed = !this.isDateDisabled(day);
      if (isInRange && isAllowed) {
        this.setValue(day);
        this.updateErrorMessage('');
        this.hide();
      }
      else {
        // for consistency we should set the focused day in cases where
        // user has selected a day that has been specifically disallowed
        this.setFocusedDay(day);
      }
    };
    this.handleMonthSelect = (e) => {
      e.stopPropagation();
      this.setMonth(parseInt(e.target.value, 10));
    };
    this.handleYearSelect = (e) => {
      e.stopPropagation();
      this.setYear(parseInt(e.target.value, 10));
    };
    this.handleInputChange = () => {
      const target = this.datePickerInput;
      // clean up any invalid characters
      cleanValue(target, DISALLOWED_CHARACTERS);
      const parsed = this.dateAdapter.parse(target.value, createDate);
      if (parsed || target.value === '') {
        this.setValue(parsed);
      }
    };
    this.processFocusedDayNode = (element) => {
      this.focusedDayNode = element;
      if (this.activeFocus && this.open) {
        setTimeout(() => element.focus(), 0);
      }
    };
    /**
     * Helper for updating touched state, so we can update touched
     * state from functional component.
     */
    this.makeTouched = () => {
      this.touched = true;
    };
    /**
     * Return true if input value is following date input format.
     */
    this.isValueValid = () => {
      const inputValue = this.datePickerInput.value;
      /*
       * We expect dateAdapter.parse to return undefined, if input value
       * is not valid. This way there is no need to separate regexp.
       */
      const parsedDate = this.dateAdapter.parse(inputValue, createDate);
      if (parsedDate === undefined)
        return false;
      const isInRange = inRange(parsedDate, parseISODate(this.min), parseISODate(this.max));
      if (!isInRange)
        return false;
      const isDisabled = this.isDateDisabled(parsedDate);
      return !isDisabled;
    };
    /**
     * Update error message and keep native input error message in sync.
     */
    this.updateErrorMessage = (message) => {
      var _a, _b;
      (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity) === null || _b === void 0 ? void 0 : _b.call(_a, message);
      this.errorMessageState = message;
    };
    /**
     * Check if input value is empty, so required should be triggered.
     */
    this.isValueMissing = () => {
      var _a;
      return ((_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.value.length) === 0;
    };
    this.updateErrorState = () => {
      var _a, _b, _c;
      const errorMessageIsSet = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
      const requiredInUse = this.required;
      const generalErrorInUse = !!((_b = this.errorMessage) === null || _b === void 0 ? void 0 : _b.length);
      const invalidErrorInUse = !!((_c = this.invalidErrorMessage) === null || _c === void 0 ? void 0 : _c.length);
      // eslint-disable-next-line @stencil/strict-boolean-conditions
      const isInputRefSet = !!this.datePickerInput;
      if (generalErrorInUse) {
        this.updateErrorMessage(this.errorMessage);
        this.makeTouched();
        // General error message overrides other errors, so exit here.
        return;
      }
      if (invalidErrorInUse) {
        if (isInputRefSet && !this.isValueValid()) {
          this.updateErrorMessage(this.invalidErrorMessage);
        }
      }
      if (requiredInUse) {
        if (this.touched &&
          !!this.requiredErrorMessage &&
          this.isValueMissing()) {
          this.updateErrorMessage(this.requiredErrorMessage);
        }
      }
      // Clean error message if needed
      if (errorMessageIsSet) {
        if (generalErrorInUse)
          return;
        if (invalidErrorInUse && !this.isValueValid())
          return;
        this.updateErrorMessage('');
      }
    };
    this.setToggleRef = (element) => {
      this.datePickerButton = element;
    };
    this.setTextInputRef = (element) => {
      this.datePickerInput = element;
    };
    this.setDialogWrapperRef = (element) => {
      this.dialogWrapperNode = element;
    };
    this.setCloseButtonRef = (element) => {
      this.firstFocusableElement = element;
    };
    this.setMonthSelectRef = (element) => {
      this.monthSelectNode = element;
    };
  }
  connectedCallback() {
    this.createDateFormatters();
  }
  componentWillLoad() {
    this.updateErrorState();
    this.yearRangeChanged(this.yearRange);
  }
  componentDidRender() {
    var _a, _b;
    (_b = (_a = this.datePickerInput) === null || _a === void 0 ? void 0 : _a.setCustomValidity) === null || _b === void 0 ? void 0 : _b.call(_a, this.errorMessageState);
  }
  yearRangeChanged(newValue) {
    let value = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
    // Convert fractional numbers and minus values
    Object.keys(value).map(key => {
      value[key] = parseInt(value[key]);
      value[key] = value[key] < 0 ? (value[key] = 0) : value[key];
    });
    this.range = value;
  }
  createDateFormatters() {
    this.dateFormatShort = new Intl.DateTimeFormat(this.localization.locale, {
      day: 'numeric',
      month: 'long',
    });
    this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });
  }
  /**
   * Component event handling.
   */
  handleDocumentClick(e) {
    if (!this.open) {
      return;
    }
    // the dialog and the button aren't considered clicks outside.
    // dialog for obvious reasons, but the button needs to be skipped
    // so that two things are possible:
    //
    // a) clicking again on the button when dialog is open should close the modal.
    //    without skipping the button here, we would see a click outside
    //    _and_ a click on the button, so the `open` state goes
    //    open -> close (click outside) -> open (click button)
    //
    // b) clicking another date picker's button should close the current calendar
    //    and open the new one. this means we can't stopPropagation() on the button itself
    //
    // this was the only satisfactory combination of things to get the above to work
    const isClickOutside = e
      .composedPath()
      .every(node => node !== this.dialogWrapperNode && node !== this.datePickerButton);
    if (isClickOutside) {
      this.hide(false);
    }
  }
  /**
   * Public methods API
   */
  /**
   * Sets focus on the date picker's input. Use this method instead of the global `focus()`.
   */
  async setFocus() {
    return this.datePickerInput.focus();
  }
  /**
   * Show the calendar modal, moving focus to the calendar inside.
   */
  async show() {
    this.open = true;
    this.modalOpen = true;
    this.setFocusedDay(parseISODate(this.value) || new Date());
    this.toggleSmallScreenScroll();
    clearTimeout(this.focusTimeoutId);
    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), TRANSITION_MS);
  }
  /**
   * Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus
   * returning to the date picker's button. Default is true.
   */
  async hide(moveFocusToButton = true) {
    this.open = false;
    this.modalOpen = false;
    this.toggleSmallScreenScroll();
    // in cases where calendar is quickly shown and hidden
    // we should avoid moving focus to the button
    clearTimeout(this.focusTimeoutId);
    if (moveFocusToButton) {
      // iOS VoiceOver needs to wait for all transitions to finish.
      setTimeout(
      // TODO: querySelector as a workaround to focus native button inside telia-button, until telia-button doesn't handle that itself
      () => this.datePickerButton.querySelector('button').focus(), TRANSITION_MS + 200);
    }
  }
  addDays(days) {
    this.setFocusedDay(addDays(this.focusedDay, days));
  }
  addMonths(months) {
    this.setMonth(this.focusedDay.getMonth() + months);
  }
  addYears(years) {
    this.setYear(this.focusedDay.getFullYear() + years);
  }
  startOfWeek() {
    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek));
  }
  endOfWeek() {
    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek));
  }
  setMonth(month) {
    const min = setMonth(startOfMonth(this.focusedDay), month);
    const max = endOfMonth(min);
    const date = setMonth(this.focusedDay, month);
    this.setFocusedDay(clamp(date, min, max));
  }
  setYear(year) {
    const min = setYear(startOfMonth(this.focusedDay), year);
    const max = endOfMonth(min);
    const date = setYear(this.focusedDay, year);
    this.setFocusedDay(clamp(date, min, max));
  }
  setFocusedDay(day) {
    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max));
  }
  setValue(date) {
    this.value = printISODate(date);
    this.vocaChange.emit({
      component: 'telia-date-picker',
      value: this.value,
      valueAsDate: date,
    });
  }
  /**
   * render() function
   * Always the last one in the class.
   */
  render() {
    var _a;
    const showAdditional = !!this.additional;
    const showError = !!((_a = this.errorMessageState) === null || _a === void 0 ? void 0 : _a.length);
    const describedBy = stringCombiner.stringCombiner({
      [this.additionalId]: showAdditional,
      [this.errorId]: showError,
    });
    const valueAsDate = parseISODate(this.value);
    const formattedDate = valueAsDate && this.dateAdapter.format(valueAsDate);
    const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
    const focusedMonth = this.focusedDay.getMonth();
    const focusedYear = this.focusedDay.getFullYear();
    const minDate = parseISODate(this.min);
    const maxDate = parseISODate(this.max);
    const prevMonthDisabled = minDate !== undefined &&
      minDate.getMonth() === focusedMonth &&
      minDate.getFullYear() === focusedYear;
    const nextMonthDisabled = maxDate !== undefined &&
      maxDate.getMonth() === focusedMonth &&
      maxDate.getFullYear() === focusedYear;
    const minYear = minDate !== undefined
      ? minDate.getFullYear()
      : selectedYear - this.range.past;
    const maxYear = maxDate !== undefined
      ? maxDate.getFullYear()
      : selectedYear + this.range.future;
    return (index.h(index.Host, null, index.h("telia-vst", { dataTrackingId: this.dataTrackingId }), index.h("div", { class: "telia-date-picker" }, index.h(DatePickerInput, { dateFormatter: this.dateFormatLong, describedBy: describedBy, value: this.value, valueAsDate: valueAsDate, formattedValue: formattedDate, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, readonly: this.readonly, role: this.role, required: this.required, identifier: this.inputId, localization: this.localization, buttonLabel: this.buttonLabel, buttonRef: this.setToggleRef, inputRef: this.setTextInputRef, touched: this.touched, makeTouched: this.makeTouched, htmlForm: this.htmlForm }), index.h("telia-label", { class: "telia-date-picker__label", htmlFor: this.inputId }, this.required && index.h("span", { "aria-hidden": "true" }, '* '), this.label), showAdditional && (index.h("telia-field-assistive-text", { class: "telia-date-picker__additional", id: this.additionalId }, this.additional)), showError && (index.h("telia-field-error", { class: "telia-date-picker__error", id: this.errorId }, this.errorMessageState)), index.h("div", { class: "telia-date-picker__dialog-container" }, index.h("div", { class: {
        'telia-date-picker__dialog': true,
        'is-left': this.direction === 'left',
        'is-active': this.open,
      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.dialogLabelId, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "telia-date-picker__dialog-content", onKeyDown: this.handleEscKey, ref: this.setDialogWrapperRef }, index.h("div", { class: "telia-date-picker__mobile", onFocusin: this.disableActiveFocus }, index.h("telia-heading", { tag: "h2", class: "telia-date-picker__mobile-heading", variant: "subsection-100" }, this.localization.calendarHeading), index.h("telia-button", { class: "telia-date-picker__close", ref: this.setCloseButtonRef, onKeyDown: this.handleFirstFocusableKeydown, onClick: this.handleCloseButtonClick, size: "sm", variant: "text", type: "button", allyLabel: this.localization.closeLabel }, index.h("telia-icon", { class: "telia-date-picker__close-icon", svg: close.close.svg, size: "sm" }))), index.h("div", { class: "telia-date-picker__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "telia-date-picker__vhidden", "aria-live": "polite", "aria-atomic": "true" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "telia-date-picker__vhidden" }, this.localization.monthSelectLabel), index.h("div", { class: "telia-date-picker__select" }, index.h("select", { id: this.monthSelectId, class: "telia-date-picker__select--month", ref: this.setMonthSelectRef, onChange: this.handleMonthSelect, onInput: e => {
        e.stopPropagation();
      } }, this.localization.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate !== undefined
        ? startOfMonth(minDate)
        : null, maxDate !== undefined
        ? endOfMonth(maxDate)
        : null) }, month)))), index.h("div", { class: "telia-date-picker__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.monthNamesShort[focusedMonth]), index.h("telia-icon", { class: "telia-date-picker__select-icon", svg: chevronDown.chevronDown.svg, size: "sm" }))), index.h("label", { htmlFor: this.yearSelectId, class: "telia-date-picker__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "telia-date-picker__select" }, index.h("select", { id: this.yearSelectId, class: "telia-date-picker__select--year", onChange: this.handleYearSelect, onInput: e => {
        e.stopPropagation();
      } }, range(minYear, maxYear).map(year => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "telia-date-picker__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("telia-icon", { class: "telia-date-picker__select-icon", svg: chevronDown.chevronDown.svg, size: "sm" })))), index.h("div", { class: "telia-date-picker__nav" }, index.h("button", { class: "telia-date-picker__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button", "aria-label": this.localization.prevMonthLabel }, index.h("telia-icon", { class: "telia-date-picker__prev-icon", svg: chevronLeft.svg, size: "sm" })), index.h("button", { class: "telia-date-picker__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button", "aria-label": this.localization.nextMonthLabel }, index.h("telia-icon", { class: "telia-date-picker__next-icon", svg: chevronRight.svg, size: "sm" })))), index.h(DatePickerMonth, { dateFormatter: this.dateFormatShort, selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "yearRange": ["yearRangeChanged"],
    "localization": ["createDateFormatters"]
  }; }
};
TeliaDatePicker.style = teliaDatePickerCss;

exports.telia_date_picker = TeliaDatePicker;
