{"version":3,"names":["getValidDate","date","Date","isNaN","Number","parseInt","getTeaserTimeFormat","timeZoneFormat","twelveHourFormat","toLocaleTimeString","hour12","hour","minute","getTeaserDate","getDate","getTeaserMonth","toLocaleString","month","getTeaserYear","getFullYear","DATE_LOCALIZATION","deepmerge","FORM_LOCALIZATION","en","locale","es","de","cs","fr","hr","hu","it","pl","ro","sk","sl","sr","sv","tr","no","ru","nl","da","dateEventCss","EonUiDateEventStyle0","DateEvent","this","schemeConfig","DATE_EVENT_SCHEME_CONFIG","schemeMap","DATE_EVENT_SCHEME_MAP","localization","dateContainer","h","class","pfx","getFinalDate","monthYearContainer","getFinalMonth","getFinalYear","timeContainer","hideTime","getTimeFormat","timeZone","DATE_TYPE_ONE","componentWillLoad","setCurrentLocalization","applyScheme","currentLocalization","componentDidLoad","setCssVariables","setCurrentLocalizationDelegate","applySchemeDelegate","setCssVariablesDelegate","typeOneTwoDateDesign","Fragment","typeThreeDateDesign","render","Host","key","dateEventType","DATE_TYPE_TWO","DATE_TYPE_THREE"],"sources":["src/components/date-event/helper/helper.ts","src/components/date-event/constants/date-event-i18n.ts","src/components/date-event/date-event.scss?tag=eon-ui-date-event&encapsulation=shadow","src/components/date-event/date-event.tsx"],"sourcesContent":["export const getValidDate = (date: string) => new Date(!isNaN(Number(date)) ? parseInt(date) : date);\n\nexport const getTeaserTimeFormat = (date, timeZoneFormat, twelveHourFormat) => {\n  return twelveHourFormat\n    ? date.toLocaleTimeString(timeZoneFormat, { hour12: true, hour: \"2-digit\", minute: \"numeric\" })\n    : date.toLocaleTimeString(timeZoneFormat, { hour12: false, hour: \"2-digit\", minute: \"numeric\" });\n};\n\nexport const getTeaserDate = (date) => date.getDate();\n\nexport const getTeaserMonth = (date, timeZoneFormat) => date.toLocaleString(timeZoneFormat, { month: \"short\" });\n\nexport const getTeaserYear = (date) => date.getFullYear();\n","import { Localization } from \"../../../common/localizable-component\";\nimport { DateLocalization } from \"./date-event-types\";\nimport { deepmerge } from \"../../../utils/deep-merge\";\nimport { FORM_LOCALIZATION } from \"../../form/constants/form-i18n\";\n\nexport const DATE_LOCALIZATION: Localization<DateLocalization> = deepmerge(FORM_LOCALIZATION, {\n  en: {\n    locale: \"en-US\"\n  },\n  es: {\n    locale: \"es-ES\"\n  },\n  de: {\n    locale: \"de-DE\"\n  },\n  cs: {\n    locale: \"cs-CZ\"\n  },\n  fr: {\n    locale: \"fr-FR\"\n  },\n  hr: {\n    locale: \"hr-HR\"\n  },\n  hu: {\n    locale: \"hu-HU\"\n  },\n  it: {\n    locale: \"it-IT\"\n  },\n  pl: {\n    locale: \"pl-PL\"\n  },\n  ro: {\n    locale: \"ro-RO\"\n  },\n  sk: {\n    locale: \"sk-SK\"\n  },\n  sl: {\n    locale: \"sl-SL\"\n  },\n  sr: {\n    locale: \"sr-SR\"\n  },\n  sv: {\n    locale: \"sv-SE\"\n  },\n  tr: {\n    locale: \"tr-TR\"\n  },\n  no: {\n    locale: \"no-NO\"\n  },\n  ru: {\n    locale: \"ru-RU\"\n  },\n  nl: {\n    locale: \"nl-NL\"\n  },\n  da: {\n    locale: \"da-DK\"\n  }\n});\n","/**\n * THEME JSON CONFIG CSS VARS\n * The following default component scss variables can be overwritten via theme configuration per brand.\n * If you need to add new one, please make sure to set a default value.\n * JSON Definition for Component with name \"Example\": testCssVar: \"20px\"\n * Resulting CSS var: $example-test-css-var: 20px;\n */\n\n/* END THEME JSON CONFIG CSS VARS ******************************************************* */\n\n$border-left: 1px solid v(dateLeftBorder);\n\n:host {\n  display: block;\n  --borderLeft: #{$border-left};\n  font-family: $font-family-base;\n}\n\n.#{$prefix}date-container {\n  position: relative;\n  display: inline-block;\n  &.#{$prefix}left {\n    align-items: flex-start;\n    justify-content: flex-start;\n  }\n\n  &.#{$prefix}right {\n    align-items: flex-end;\n    justify-content: flex-end;\n  }\n  line-height: 24px;\n  .#{$prefix}date {\n    font-size: 36px;\n    font-weight: $font-weight-black;\n    padding-bottom: 4px;\n    color: v(dateColor);\n    @include for-size(tablet) {\n      font-size: 30px;\n    }\n    @include for-size(phone) {\n      font-size: 26px;\n      padding-bottom: 2px;\n    }\n  }\n\n  .#{$prefix}month {\n    font-size: 18px;\n    font-weight: $font-weight-regular;\n    text-transform: uppercase;\n    color: v(dateColor);\n  }\n\n  .#{$prefix}year {\n    color: v(dateColor);\n    font-size: 18px;\n    font-weight: $font-weight-regular;\n    padding-left: 5px;\n  }\n\n  .#{$prefix}time {\n    color: v(dateColor);\n    font-size: 18px;\n    font-weight: $font-weight-regular;\n    border-left: var(--borderLeft);\n    padding-left: 8px;\n    text-transform: uppercase;\n    margin-left: 9px;\n  }\n\n  .#{$prefix}time-zone {\n    font-size: 18px;\n    font-weight: $font-weight-regular;\n    color: v(dateColor);\n    padding-left: 5px;\n  }\n\n  &.#{$prefix}date-type-one {\n    display: flex;\n    flex-direction: column;\n    .#{$prefix}month-time-wrapper {\n      display: flex;\n      flex-direction: row;\n    }\n  }\n\n  &.#{$prefix}date-type-two {\n    display: flex;\n    flex-direction: column;\n    .#{$prefix}month-time-wrapper {\n      display: flex;\n      flex-direction: column;\n      .#{$prefix}time {\n        border-left: none;\n        padding-left: 0;\n        margin-left: 0;\n      }\n    }\n  }\n\n  &.#{$prefix}date-type-three {\n    display: flex;\n    flex-direction: column;\n    .#{$prefix}date-month-wrapper {\n      display: flex;\n      align-items: flex-end;\n\n      .#{$prefix}date {\n        padding-right: 6px;\n      }\n    }\n\n    .#{$prefix}time {\n      border-left: none;\n      padding-left: 0;\n      margin-left: 0;\n    }\n  }\n}\n","import { Component, Element, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { applySchemeDelegate, ColorableComponent, setCssVariablesDelegate } from \"../../common/colorable-component\";\nimport { getTeaserDate, getTeaserMonth, getTeaserTimeFormat, getTeaserYear, getValidDate } from \"./helper/helper\";\nimport {\n  DateEventSchemeDefinition,\n  DateEventSchemeName,\n  DateLocalization,\n  DateTypes\n} from \"./constants/date-event-types\";\nimport {\n  DATE_EVENT_SCHEME_CONFIG,\n  DATE_EVENT_SCHEME_MAP,\n  DATE_TYPE_ONE,\n  DATE_TYPE_THREE,\n  DATE_TYPE_TWO\n} from \"./constants/date-event-constants\";\nimport { LocalizableComponent, Localization, setCurrentLocalizationDelegate } from \"../../common/localizable-component\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { DATE_LOCALIZATION } from \"./constants/date-event-i18n\";\nimport { DateEventSchemeConfiguration } from \"../../constants/colors\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n@Component({\n  tag: \"eon-ui-date-event\",\n  styleUrl: \"date-event.scss\",\n  shadow: true\n})\nexport class DateEvent\n  implements\n    ColorableComponent<DateEventSchemeConfiguration<DateEventSchemeDefinition>>,\n    LocalizableComponent<DateLocalization> {\n  // @InitLogging() sentryTransaction;\n  schemeConfig: DateEventSchemeConfiguration<DateEventSchemeDefinition> = DATE_EVENT_SCHEME_CONFIG;\n  schemeMap = DATE_EVENT_SCHEME_MAP;\n\n  localization: Localization<DateLocalization> = DATE_LOCALIZATION;\n  currentLocalization: DateLocalization;\n\n  /**\n   * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @State() activeScheme: DateEventSchemeDefinition;\n  @State() validDate: Date;\n  @State() timeFormat: string;\n  @State() teaserDate: number;\n  @State() teaserMonth: string;\n  @State() teaserYear: number;\n\n  @Element() hostElement: HTMLEonUiDateEventElement;\n\n  /**\n   * The name of the color scheme of the component.\n   * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n   */\n  @Prop({ reflect: true }) scheme: DateEventSchemeName;\n\n  /**\n   * This property can have date, accordingly the value will be displayed on Teaser\n   */\n  @Prop({ mutable: true }) date: string;\n\n  /**\n   * Property will hide and show the time format in date section\n   */\n  @Prop({ reflect: true, mutable: true }) hideTime: boolean = false;\n\n  /**\n   * timeZone property for uniform standard time, gives flexibility to authors to edit the timeZone\n   * @example: CET/CEST\n   */\n  @Prop({ mutable: true }) timeZone: string;\n\n  /**\n   * twelveHourFormat depicts whether date should be of 12 hours format or 24 hours format\n   */\n  @Prop({ reflect: true, mutable: true }) twelveHourFormat: boolean = false;\n\n  /**\n   * Types of Date design format\n   * @example: Type One | Type Two | Type Three\n   */\n  @Prop() dateEventType: DateTypes = DATE_TYPE_ONE;\n\n  componentWillLoad() {\n    this.setCurrentLocalization();\n    this.applyScheme();\n  }\n\n  private getTimeFormat() {\n    return getTeaserTimeFormat(\n      getValidDate(this.date),\n      this.currentLocalization && this.currentLocalization.locale,\n      this.twelveHourFormat\n    );\n  }\n\n  private getFinalDate() {\n    return getTeaserDate(getValidDate(this.date));\n  }\n\n  private getFinalMonth() {\n    return getTeaserMonth(getValidDate(this.date), this.currentLocalization && this.currentLocalization.locale);\n  }\n\n  private getFinalYear() {\n    return getTeaserYear(getValidDate(this.date));\n  }\n\n  componentDidLoad() {\n    this.setCssVariables();\n  }\n\n  setCurrentLocalization() {\n    setCurrentLocalizationDelegate(this);\n  }\n\n  @Watch(\"scheme\")\n  applyScheme() {\n    applySchemeDelegate(this);\n  }\n\n  @Watch(\"activeScheme\")\n  setCssVariables(): void {\n    setCssVariablesDelegate(this);\n  }\n\n  dateContainer = () => {\n    return (\n      <div\n        class={pfx({\n          [\"date\"]: true\n        })}\n      >\n        {this.getFinalDate()}\n      </div>\n    );\n  };\n\n  monthYearContainer = () => {\n    return (\n      <div class={pfx(\"month-year\")}>\n        <span class={pfx(\"month\")}>{this.getFinalMonth()}</span>\n        <span class={pfx(\"year\")}>{this.getFinalYear()}</span>\n      </div>\n    );\n  };\n\n  timeContainer = () => {\n    return (\n      !this.hideTime && (\n        <div class={pfx(\"time-zone-wrapper\")}>\n          {<span class={pfx(\"time\")}>{this.getTimeFormat()}</span>}\n          {this.timeZone && <span class={pfx(\"time-zone\")}>{this.timeZone}</span>}\n        </div>\n      )\n    );\n  };\n\n  private get typeOneTwoDateDesign() {\n    return (\n      <Fragment>\n        {this.dateContainer()}\n        <div class={pfx(\"month-time-wrapper\")}>\n          {this.monthYearContainer()}\n          {this.timeContainer()}\n        </div>\n      </Fragment>\n    );\n  }\n\n  private get typeThreeDateDesign() {\n    return (\n      <Fragment>\n        <div class={pfx(\"date-month-wrapper\")}>\n          {this.dateContainer()}\n          {this.monthYearContainer()}\n        </div>\n        {this.timeContainer()}\n      </Fragment>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={pfx({\n            [\"date-container\"]: true,\n            [`date-${this.dateEventType}`]: true\n          })}\n        >\n          {(this.dateEventType === DATE_TYPE_ONE || this.dateEventType === DATE_TYPE_TWO) && this.typeOneTwoDateDesign}\n          {this.dateEventType === DATE_TYPE_THREE && this.typeThreeDateDesign}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}