dap-design-system 0.62.4 → 0.63.1

package/dist/components/calendar/calendar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.component.js","sources":["../../../src/components/calendar/calendar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAll, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsExpandUpDownFill from '../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './calendar.scss?inline'\nimport DapDSCalendarCell from './calendar-cell.component'\n\n/**\n * `dap-ds-calendar`\n * @summary A calendar is a visual representation of dates. It allows users to select a date.\n * @element dap-ds-calendar\n * @title - Calendar\n *\n * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes.\n *\n * @slot - The content of the calendar.\n *\n * @csspart base - The main calendar container.\n * @csspart calendar-header - The header of the calendar.\n * @csspart body - The body of the calendar.\n * @csspart calendar-grid-header - The header of the calendar grid.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-header-button-prev - The previous month button of the calendar header.\n * @csspart calendar-header-button-next - The next month button of the calendar header.\n * @csspart calendar-header-year-select - The year select of the calendar header.\n * @csspart calendar-header-month-select - The month select of the calendar header.\n *\n * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)\n * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)\n * @cssproperty --dds-calendar-block-display - The display property of the calendar block (default: block)\n * @cssproperty --dds-calendar-transition - The transition property for the calendar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-calendar-header-display - The display property of the calendar header (default: grid)\n * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header (default: column)\n * @cssproperty --dds-calendar-header-width - The width of the calendar header (default: 100%)\n * @cssproperty --dds-calendar-header-gap - The gap between header items (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger (default: auto)\n * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger (default: 32px)\n * @cssproperty --dds-calendar-select-padding - The padding of the select trigger (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive))\n * @cssproperty --dds-calendar-select-background - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-calendar-select-color - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger (default: normal)\n * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled))\n */\nexport default class DapDSCalendar extends DdsElement {\n  static tagName = 'dap-ds-calendar'\n\n  static dependencies = {\n    'dap-ds-calendar-cell': DapDSCalendarCell,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-select': DapDSSelect,\n    'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFill,\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  @queryAll('dap-ds-calendar-cell:not([header])')\n  private readonly cells: NodeListOf<DapDSCalendarCell>\n\n  @query('#monthSelect')\n  private readonly monthSelect: DapDSSelect\n\n  /** The mode of the calendar - single date or range selection.\n   * @type {'single' | 'range'}\n   * @default 'single'\n   */\n  @property({ reflect: true }) mode: 'single' | 'range' = 'single'\n\n  /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.*/\n  @property({ type: Boolean }) hideAdjacentMonths: boolean = false\n\n  /** The value of the calendar.\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) value?: Dayjs\n\n  /** The start date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeStart?: Dayjs\n\n  /** The end date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeEnd?: Dayjs\n\n  /** The current visible date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs()\n   */\n  @property({ attribute: false }) currentDate = dayjs()\n\n  /** The minimum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().subtract(50, 'year')\n   */\n  @property({ attribute: false }) minDate = dayjs().subtract(50, 'year')\n\n  /** The maximum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().add(50, 'year')\n   */\n  @property({ attribute: false }) maxDate = dayjs().add(50, 'year')\n\n  /** The function to determine if the date is disabled.\n   * @type {Function}\n   * @default () => false\n   */\n  @property({ attribute: false }) disabledDate = (date: Dayjs) => {\n    return !date\n  }\n\n  /** The locale of the calendar.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  /** `data-testid` for the previous-month button. */\n  @property() prevButtonTestId = 'calendar-prev-button'\n\n  /** `data-testid` for the next-month button. */\n  @property() nextButtonTestId = 'calendar-next-button'\n\n  @state() private _currentCell: DapDSCalendarCell\n  @state() private _yearOptionsLoaded = false\n\n  private instanceLocalData = dayjs().localeData()\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    if (!dayjs.isDayjs(this.currentDate)) {\n      this.currentDate = dayjs(this.currentDate)\n    }\n\n    if (this.locale) {\n      this.instanceLocalData = dayjs().locale(this.locale).localeData()\n      this.currentDate = dayjs(this.currentDate).locale(this.locale)\n      // Remove requestUpdate() - let Lit handle the update cycle\n    }\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  get startDate() {\n    if (dayjs.isDayjs(this.currentDate)) {\n      return dayjs(this.currentDate.toDate())\n        .locale(this.locale)\n        .startOf('month')\n    }\n    return dayjs(this.currentDate).locale(this.locale).startOf('month')\n  }\n\n  get endDate() {\n    return dayjs(this.currentDate).locale(this.locale).endOf('month')\n  }\n\n  get shouldHideAdjacentMonths() {\n    // If explicitly set, use that value\n    if (this.mode === 'range') {\n      return true\n    }\n    // Default: false for single mode, true for range mode\n    return this.hideAdjacentMonths\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    const documentElementObserver = new MutationObserver(\n      this.updateLocaleFromHtml,\n    )\n\n    documentElementObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir', 'lang'],\n    })\n\n    this.setValue(this.value, false)\n\n    // Load year options after initial render to improve startup performance\n    // but ensure they're available for user interaction\n    queueMicrotask(() => this.loadYearOptions())\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      this.setValue(this.value, false)\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, _old, value)\n\n    if (name === 'locale') {\n      this.updateLocale(value)\n    }\n  }\n\n  private readonly updateLocale = (locale?: string | null) => {\n    if (!locale) {\n      this.locale = dayjs.locale()\n    } else {\n      this.instanceLocalData = dayjs().locale(locale).localeData()\n      this.locale = locale\n\n      // Defer DOM manipulation to avoid update cycles\n      this.updateComplete.then(() => {\n        this.monthSelect\n          ?.querySelectorAll('dap-ds-option-item')\n          .forEach(item => item.remove())\n\n        const monthOptions = this.getAllowedMonths(\n          dayjs(this.currentDate).locale(this.locale),\n        ).map(month => {\n          const option = document.createElement('dap-ds-option-item')\n          option.value = `${this.instanceLocalData.months().indexOf(month) + 1}`\n          option.appendChild(document.createTextNode(month))\n          return option\n        })\n\n        monthOptions.forEach(monthOption =>\n          this.monthSelect?.appendChild(monthOption),\n        )\n      })\n    }\n    // Remove manual requestUpdate() - locale property change will trigger update\n  }\n\n  private readonly updateLocaleFromHtml = (mutationList: any) => {\n    this.updateLocale(mutationList[0].target[mutationList[0].attributeName])\n  }\n\n  setValue(value?: Dayjs, setFocus = true) {\n    if (value) {\n      if (\n        this.isOutOfRange(\n          dayjs(this.currentDate).locale(this.locale),\n          dayjs(value),\n        )\n      ) {\n        this.setToFirstDayOfMonth()\n      } else {\n        const selectedCell = this.getCellByDate(dayjs(value))\n        this.setCurrentCell(selectedCell!, setFocus)\n      }\n    } else if (\n      this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), dayjs())\n    ) {\n      this.setToFirstAllowedDayOfMonth()\n    } else {\n      this.setToToday()\n    }\n  }\n\n  private readonly getWeeksInMonth = (date: Dayjs) => {\n    const days = date.daysInMonth()\n    const weekday = date.weekday()\n\n    return Math.ceil((days + weekday) / 7)\n  }\n\n  private loadYearOptions() {\n    if (!this._yearOptionsLoaded) {\n      this._yearOptionsLoaded = true\n      // Immediate update for better UX\n      this.requestUpdate()\n    }\n  }\n\n  isOutOfRange(currentDate: Dayjs, date: Dayjs) {\n    return !dayjs(currentDate).locale(this.locale).isSame(date, 'month')\n  }\n\n  isToday(date: Dayjs) {\n    return date.isSame(new Date(), 'day')\n  }\n\n  isSelected(date: Dayjs) {\n    if (this.mode === 'range') {\n      return this.isRangeStart(date) || this.isRangeEnd(date)\n    }\n\n    if (!this.value) {\n      return false\n    }\n\n    return date.isSame(this.value, 'day')\n  }\n\n  isRangeStart(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart) {\n      return false\n    }\n    return date.isSame(this.rangeStart, 'day')\n  }\n\n  isRangeEnd(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeEnd) {\n      return false\n    }\n    return date.isSame(this.rangeEnd, 'day')\n  }\n\n  isInRange(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart || !this.rangeEnd) {\n      return false\n    }\n    return (\n      date.isAfter(this.rangeStart, 'day') &&\n      date.isBefore(this.rangeEnd, 'day')\n    )\n  }\n\n  getDatesInWeek(week: number, from: Dayjs) {\n    let date = from.startOf('week').add(week, 'week')\n    const dates: Dayjs[] = []\n\n    while (dates.length < 7) {\n      dates.push(date)\n      const nextDate = date.add(1, 'day')\n      if (date.isSame(from.endOf('month'))) {\n        break\n      }\n      date = nextDate\n    }\n\n    return dates\n  }\n\n  isDateInAllowedRange(date: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    return !date.isBefore(minDate, 'day') && !date.isAfter(maxDate, 'day')\n  }\n\n  isMonthInAllowedRange(year: number, month: number) {\n    const monthStart = dayjs(new Date(year, month, 1)).locale(this.locale)\n    const monthEnd = monthStart.endOf('month')\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n\n    // A month is allowed if it intersects the [minDate, maxDate] range.\n    return (\n      !monthEnd.isBefore(minDate, 'day') && !monthStart.isAfter(maxDate, 'day')\n    )\n  }\n\n  isDateInAllowedRangeByDate(year: number, month: number, date: number) {\n    return this.isDateInAllowedRange(dayjs(new Date(year, month, date)))\n  }\n\n  getAllowedMonths(currentDate: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    const minYear = minDate.year()\n    const maxYear = maxDate.year()\n    const minMonth = minDate.month()\n    const maxMonth = maxDate.month()\n\n    if (currentDate.year() === minYear && currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth - minMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === minYear) {\n      return Array.from(\n        { length: 12 - minMonth },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i],\n      )\n    }\n\n    const months = Array.from(\n      { length: 12 },\n      (_, i) => this.instanceLocalData.months()[i],\n    )\n\n    return months\n  }\n\n  setMonth(month: number) {\n    if (\n      month < 0 &&\n      this.isMonthInAllowedRange(dayjs(this.currentDate).year() - 1, 11)\n    ) {\n      this.setYear(dayjs(this.currentDate).locale(this.locale).year() - 1)\n      this.currentDate = this.currentDate.locale(this.locale).set('month', 11)\n      return\n    }\n\n    if (\n      month > 11 &&\n      this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year() + 1,\n        0,\n      )\n    ) {\n      this.setYear(dayjs(this.currentDate).year() + 1)\n      this.currentDate = this.currentDate.set('month', 0)\n      return\n    }\n\n    if (\n      !this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year(),\n        month,\n      )\n    ) {\n      return\n    }\n\n    this.currentDate = dayjs(this.currentDate)\n      .locale(this.locale)\n      .set('month', month)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setDay(day: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    if (!this.isDateInAllowedRangeByDate(date.year(), date.month(), day)) {\n      return\n    }\n\n    this.currentDate = date.set('date', day)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setYear(year: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    this.currentDate = date.set('year', year)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setSelectedDate(date: Dayjs) {\n    if (this.disabledDate(date)) {\n      return\n    }\n\n    if (!this.isDateInAllowedRange(date)) {\n      return\n    }\n\n    if (this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), date)) {\n      this.setMonth(date.month())\n    }\n\n    if (this.mode === 'range') {\n      // Range selection logic\n      if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {\n        // Start new range selection\n        this.rangeStart = date\n        this.rangeEnd = undefined\n        // Update currentDate to show the start date's month\n        this.currentDate = dayjs(date).locale(this.locale)\n      } else if (this.rangeStart && !this.rangeEnd) {\n        // Complete range selection\n        if (date.isBefore(this.rangeStart)) {\n          // If end date is before start date, swap them\n          this.rangeEnd = this.rangeStart\n          this.rangeStart = date\n        } else {\n          this.rangeEnd = date\n        }\n\n        // Update currentDate to show the start date's month in the first calendar\n        this.currentDate = dayjs(this.rangeStart).locale(this.locale)\n\n        // Emit range-change event\n        this.emit('dds-range-change', {\n          startDate: this.rangeStart,\n          endDate: this.rangeEnd,\n        })\n      }\n\n      this.setCurrentCell(this.getCellByDate(date)!)\n    } else {\n      // Single date selection\n      this.value = date\n      this.setCurrentCell(this.getCellByDate(date)!)\n\n      this.emit('dds-change', {\n        value: this.value,\n        type: 'value',\n      })\n    }\n  }\n\n  getFirstDayOfMonthCell() {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(this.startDate, 'day')\n    })\n  }\n\n  getCellByDate(date: Dayjs) {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(date, 'day')\n    })\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    event.preventDefault()\n    const element = event.composedPath()[0]\n    if (element instanceof DapDSCalendarCell) {\n      switch (event.code) {\n        case 'ArrowLeft':\n          this.focusNextCell(element, -1)\n          break\n        case 'ArrowRight':\n          this.focusNextCell(element, 1)\n          break\n        case 'ArrowUp':\n          this.focusNextCell(element, -7)\n          break\n        case 'ArrowDown':\n          this.focusNextCell(element, 7)\n          break\n        case 'PageUp':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() - 1)\n          break\n        case 'PageDown':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() + 1)\n          break\n        case 'Enter':\n          this.setSelectedDate(element.value)\n          break\n        case 'Escape':\n          this.emit('dds-close')\n          break\n      }\n    } else if (event.key === 'Escape') {\n      this.emit('dds-close')\n    }\n  }\n\n  setCurrentCell(cell: DapDSCalendarCell, setFocus = true) {\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '-1')\n    }\n    this._currentCell = cell\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '0')\n    }\n\n    if (setFocus && this._currentCell) {\n      this.setFocusToCurrentCell()\n    }\n  }\n\n  setFocusToCurrentCell() {\n    this._currentCell.focus()\n  }\n\n  setToFirstDayOfMonth() {\n    const firstDayofMonth = this.getFirstDayOfMonthCell()\n    firstDayofMonth?.setAttribute('tabindex', '0')\n    this._currentCell = firstDayofMonth!\n  }\n\n  setToToday() {\n    const today = this.getCellByDate(dayjs())\n    today?.setAttribute('tabindex', '0')\n    this._currentCell = today!\n  }\n\n  setToFirstAllowedDayOfMonth(currentDate = this.currentDate) {\n    const firstAllowedDay = this.getCellByDate(\n      dayjs(currentDate).locale(this.locale).startOf('month'),\n    )\n    firstAllowedDay?.setAttribute('tabindex', '0')\n    this._currentCell = firstAllowedDay!\n  }\n\n  focusNextCell(element: DapDSCalendarCell, offset: number) {\n    const index = [...this.cells].indexOf(element)\n    const nextIndex = index + offset\n    const currentMonth = dayjs(this.currentDate).locale(this.locale).month()\n\n    if (nextIndex >= 0 && nextIndex < this.cells.length) {\n      const cell = this.cells[nextIndex]\n      this.setCurrentCell(cell)\n    } else if (nextIndex < 0) {\n      this.setMonth(currentMonth - 1)\n\n      if (this.currentDate.month() < currentMonth) {\n        this.updateComplete.then(() => {\n          const lastDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .endOf('month')\n          const lastDayCell = this.getCellByDate(lastDay)\n          this.setCurrentCell(lastDayCell!)\n        })\n      }\n    } else if (nextIndex >= this.cells.length) {\n      this.setMonth(currentMonth + 1)\n\n      if (this.currentDate.month() > currentMonth) {\n        this.updateComplete.then(() => {\n          const firstDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .startOf('month')\n          const firstDayCell = this.getCellByDate(firstDay)\n          this.setCurrentCell(firstDayCell!)\n        })\n      }\n    }\n  }\n\n  public captureFocus(): void {\n    this.focus()\n    this.setFocusToCurrentCell()\n  }\n\n  private getWeekdaysMin() {\n    const firstDay = this.instanceLocalData.firstDayOfWeek()\n    const weekdays = this.instanceLocalData.weekdaysMin()\n    return weekdays.slice(firstDay).concat(weekdays.slice(0, firstDay))\n  }\n\n  renderCalendarGridHeader() {\n    return html`<thead part=\"calendar-grid-header\" class=\"calendar-grid-header\">\n      <tr class=\"calendar-grid-header-row\">\n        ${this.getWeekdaysMin().map(\n          day =>\n            html`<th class=\"calendar-cell\">\n              <dap-ds-calendar-cell\n                header\n                part=\"calendar-grid-header-cell\"\n                exportparts=\"base: calendar-grid-header-cell-base\"\n                locale=${this.locale}\n                >${day}</dap-ds-calendar-cell\n              >\n            </th>`,\n        )}\n      </tr>\n    </thead>`\n  }\n\n  renderCalendarGridBody(date: Dayjs) {\n    return html`<tbody part=\"body\" class=\"calendar-grid-body\">\n      ${[\n        ...new Array(\n          this.getWeeksInMonth(date || dayjs().locale(this.locale)),\n        ).keys(),\n      ].map(\n        week =>\n          html`<tr class=\"calendar-grid-row\">\n            ${this.getDatesInWeek(week, date).map(d => {\n              const isOutOfRange = this.isOutOfRange(date, d)\n              const isDisabled =\n                !this.isDateInAllowedRange(d) || this.disabledDate(d)\n\n              const isRangeStart = this.isRangeStart(d)\n              const isRangeEnd = this.isRangeEnd(d)\n              const isInRange = this.isInRange(d)\n\n              // Hide dates from adjacent months if shouldHideAdjacentMonths is true\n              if (this.shouldHideAdjacentMonths && isOutOfRange) {\n                return html`<td\n                  role=\"gridcell\"\n                  class=\"${clsx('calendar-cell calendar-cell--empty')}\"></td>`\n              }\n\n              return html`<td\n                role=\"gridcell\"\n                class=\"${clsx('calendar-cell')}\"\n                aria-disabled=${isDisabled}>\n                <dap-ds-calendar-cell\n                  part=\"calendar-grid-cell\"\n                  exportparts=\"base: calendar-grid-cell-base, today-mark: calendar-grid-cell-today-mark\"\n                  ?outofrange=${isOutOfRange}\n                  ?today=${this.isToday(d)}\n                  ?selected=${this.isSelected(d)}\n                  ?rangestart=${isRangeStart}\n                  ?rangeend=${isRangeEnd}\n                  ?inrange=${isInRange}\n                  .value=${d}\n                  locale=${this.locale}\n                  ?disabledDay=${isDisabled}\n                  role=\"button\"\n                  aria-pressed=${this.isSelected(d)}\n                  aria-disabled=${isDisabled}\n                  @click=${() => !isDisabled && this.setSelectedDate(d)}\n                  @keydown=${this.handleKeyDown}\n                  >${d.date()}</dap-ds-calendar-cell\n                >\n              </td>`\n            })}\n          </tr> `,\n      )}\n    </tbody>`\n  }\n\n  renderCalendarHeader() {\n    return html`\n      <header\n        part=\"calendar-header\"\n        class=\"calendar__header\"\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-prev\"\n          class=\"calendar__header-button-prev\"\n          data-testid=${this.prevButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-left-l-line\"\n          @keydown=${this.handleKeyDown}\n          aria-label=${t('calendar.prevMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(this.currentDate.month() - 1)\n          }}>\n        </dap-ds-icon-button>\n        <dap-ds-select\n          part=\"calendar-header-year-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-year-select',\n          )}\n          @dds-keydown=${this.handleKeyDown}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.year', { lng: this.locale })}\n          value=${dayjs(this.currentDate).year()}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).year()\n            ) {\n              this.currentDate = dayjs(this.currentDate)\n                .locale(this.locale)\n                .set('year', parseInt(e.detail.value))\n              // Remove requestUpdate() - currentDate property change will trigger update\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this._yearOptionsLoaded\n            ? [\n                ...new Array(\n                  dayjs(this.maxDate).locale(this.locale).year() -\n                    dayjs(this.minDate).locale(this.locale).year() +\n                    1,\n                ).keys(),\n              ].map(\n                year =>\n                  html`<dap-ds-option-item\n                    value=${dayjs(this.minDate).locale(this.locale).year() +\n                    year}>\n                    ${dayjs(this.minDate).locale(this.locale).year() + year}\n                  </dap-ds-option-item>`,\n              )\n            : html`<dap-ds-option-item value=${dayjs(this.currentDate).year()}>\n                ${dayjs(this.currentDate).year()}\n              </dap-ds-option-item>`}\n        </dap-ds-select>\n        <dap-ds-select\n          id=\"monthSelect\"\n          part=\"calendar-header-month-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-month-select',\n          )}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.month', { lng: this.locale })}\n          value=${dayjs(this.currentDate).locale(this.locale).month() + 1}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).month() + 1\n            ) {\n              this.setMonth(parseInt(e.detail.value) - 1)\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this.getAllowedMonths(\n            dayjs(this.currentDate).locale(this.locale),\n          ).map(\n            month =>\n              html`<dap-ds-option-item\n                value=${this.instanceLocalData.months().indexOf(month) + 1}>\n                ${month}\n              </dap-ds-option-item>`,\n          )}\n        </dap-ds-select>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-next\"\n          class=\"calendar__header-button-next\"\n          data-testid=${this.nextButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-right-l-line\"\n          aria-label=${t('calendar.nextMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(\n              dayjs(this.currentDate).locale(this.locale).month() + 1,\n            )\n          }}>\n        </dap-ds-icon-button>\n      </header>\n    `\n  }\n\n  render() {\n    if (this.mode === 'range') {\n      // Render two calendars side-by-side for range mode\n      const currentMonth = dayjs(this.currentDate).locale(this.locale)\n      const nextMonth = currentMonth.add(1, 'month')\n\n      return html` <div class=\"calendar calendar--range\">\n        ${this.renderCalendarHeader()}\n        <div class=\"calendar__months\">\n          <div class=\"calendar__month\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeStart ? dayjs(this.rangeStart).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(this.startDate)}\n            </table>\n          </div>\n          <div class=\"calendar__month calendar__month--next\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeEnd ? dayjs(this.rangeEnd).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(nextMonth.startOf('month'))}\n            </table>\n          </div>\n        </div>\n      </div>`\n    }\n\n    // Single date mode\n    return html` <div class=\"calendar\">\n      ${this.renderCalendarHeader()}\n      <table\n        part=\"base\"\n        class=\"calendar__grid\"\n        role=\"grid\"\n        aria-label=${`${this.value ? dayjs(this.value).locale(this.locale).format('LL, dddd') : ''}`}>\n        ${this.renderCalendarGridHeader()}\n        ${this.renderCalendarGridBody(this.startDate)}\n      </table>\n    </div>`\n  }\n}\n"],"names":["_DapDSCalendar","DdsElement","dayjs","date","locale","_a","item","month","option","monthOption","mutationList","days","weekday","__async","__superGet","_changedProperties","name","_old","value","setFocus","selectedCell","currentDate","week","from","dates","nextDate","minDate","maxDate","year","monthStart","monthEnd","minYear","maxYear","minMonth","maxMonth","_","i","day","cell","event","element","DapDSCalendarCell","firstDayofMonth","today","firstAllowedDay","offset","nextIndex","currentMonth","lastDay","lastDayCell","firstDay","firstDayCell","weekdays","html","d","isOutOfRange","isDisabled","isRangeStart","isRangeEnd","isInRange","clsx","t","nextMonth","DapDSIconButton","DapDSSelect","ArrowsExpandUpDownFill","DapDSOptionItem","unsafeCSS","styles","DapDSCalendar","__decorateClass","queryAll","query","property","state"],"mappings":"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"}
+{"version":3,"file":"calendar.component.js","sources":["../../../src/components/calendar/calendar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport dayjs, { Dayjs } from 'dayjs'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query, queryAll, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { t } from '@/localization/localization'\n\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport ArrowsExpandUpDownFill from '../icons/arrows/arrows-expand-up-down-fill/arrows-expand-up-down-fill.component'\nimport DapDSOptionItem from '../option-item/option-item.component'\nimport DapDSSelect from '../select/select.component'\nimport styles from './calendar.scss?inline'\nimport DapDSCalendarCell from './calendar-cell.component'\n\n/**\n * `dap-ds-calendar`\n * @summary A calendar is a visual representation of dates. It allows users to select a date.\n * @element dap-ds-calendar\n * @title - Calendar\n *\n * @event {{ value: Dayjs }} dds-change - Fired when the calendar value changes.\n *\n * @slot - The content of the calendar.\n *\n * @csspart base - The main calendar container.\n * @csspart calendar-header - The header of the calendar.\n * @csspart body - The body of the calendar.\n * @csspart calendar-grid-header - The header of the calendar grid.\n * @csspart calendar-grid-header-cell - The header cell of the calendar grid.\n * @csspart calendar-grid-cell - The cell of the calendar grid.\n * @csspart calendar-header-button-prev - The previous month button of the calendar header.\n * @csspart calendar-header-button-next - The next month button of the calendar header.\n * @csspart calendar-header-year-select - The year select of the calendar header.\n * @csspart calendar-header-month-select - The month select of the calendar header.\n * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.\n * @csspart calendar-grid-cell-base - The base of the calendar grid cell.\n * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.\n *\n * @cssproperty --dds-calendar-display - The display property of the calendar container (default: flex)\n * @cssproperty --dds-calendar-isolation - The isolation property of the calendar (default: isolate)\n * @cssproperty --dds-calendar-block-display - The display property of the calendar block (default: block)\n * @cssproperty --dds-calendar-transition - The transition property for the calendar (default: all 0.2s ease-in-out)\n * @cssproperty --dds-calendar-header-display - The display property of the calendar header (default: grid)\n * @cssproperty --dds-calendar-header-grid-flow - The grid-auto-flow property of the calendar header (default: column)\n * @cssproperty --dds-calendar-header-width - The width of the calendar header (default: 100%)\n * @cssproperty --dds-calendar-header-gap - The gap between header items (default: var(--dds-spacing-100))\n * @cssproperty --dds-calendar-select-min-height - The minimum height of the select trigger (default: auto)\n * @cssproperty --dds-calendar-select-max-height - The maximum height of the select trigger (default: 32px)\n * @cssproperty --dds-calendar-select-padding - The padding of the select trigger (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-select-border-radius - The border radius of the select trigger (default: var(--dds-radius-rounded))\n * @cssproperty --dds-calendar-select-border-color - The border color of the select trigger (default: var(--dds-border-neutral-transparent-interactive))\n * @cssproperty --dds-calendar-select-background - The background color of the select trigger (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-calendar-select-color - The text color of the select trigger (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-calendar-select-font-size - The font size of the select trigger (default: var(--dds-font-sm))\n * @cssproperty --dds-calendar-select-font-style - The font style of the select trigger (default: normal)\n * @cssproperty --dds-calendar-select-font-weight - The font weight of the select trigger (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-calendar-nav-button-margin - The margin of the navigation buttons (default: var(--dds-spacing-200))\n * @cssproperty --dds-calendar-nav-button-color - The color of the navigation button icons (default: var(--dds-button-subtle-icon-enabled))\n */\nexport default class DapDSCalendar extends DdsElement {\n  static tagName = 'dap-ds-calendar'\n\n  static dependencies = {\n    'dap-ds-calendar-cell': DapDSCalendarCell,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-select': DapDSSelect,\n    'dap-ds-icon-expand-up-down-fill': ArrowsExpandUpDownFill,\n    'dap-ds-option-item': DapDSOptionItem,\n  }\n\n  @queryAll('dap-ds-calendar-cell:not([header])')\n  private readonly cells: NodeListOf<DapDSCalendarCell>\n\n  @query('#monthSelect')\n  private readonly monthSelect: DapDSSelect\n\n  /** The mode of the calendar - single date or range selection.\n   * @type {'single' | 'range'}\n   * @default 'single'\n   */\n  @property({ reflect: true }) mode: 'single' | 'range' = 'single'\n\n  /** Whether to hide dates from adjacent months (previous/next) in the calendar grid. When not explicitly set, defaults to false for single mode and true for range mode.*/\n  @property({ type: Boolean }) hideAdjacentMonths: boolean = false\n\n  /** The value of the calendar.\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) value?: Dayjs\n\n  /** The start date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeStart?: Dayjs\n\n  /** The end date of the range selection (only used in range mode).\n   * @type {Dayjs}\n   */\n  @property({ attribute: false }) rangeEnd?: Dayjs\n\n  /** The current visible date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs()\n   */\n  @property({ attribute: false }) currentDate = dayjs()\n\n  /** The minimum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().subtract(50, 'year')\n   */\n  @property({ attribute: false }) minDate = dayjs().subtract(50, 'year')\n\n  /** The maximum date of the calendar. Only the month and year are considered.\n   * @type {Dayjs}\n   * @default dayjs().add(50, 'year')\n   */\n  @property({ attribute: false }) maxDate = dayjs().add(50, 'year')\n\n  /** The function to determine if the date is disabled.\n   * @type {Function}\n   * @default () => false\n   */\n  @property({ attribute: false }) disabledDate = (date: Dayjs) => {\n    return !date\n  }\n\n  /** The locale of the calendar.\n   * @type {'hu' | 'en' | 'de'}\n   * @default dayjs.locale()\n   */\n  @property({ reflect: true }) locale: string = dayjs.locale()\n\n  /** `data-testid` for the previous-month button. */\n  @property() prevButtonTestId = 'calendar-prev-button'\n\n  /** `data-testid` for the next-month button. */\n  @property() nextButtonTestId = 'calendar-next-button'\n\n  @state() private _currentCell: DapDSCalendarCell\n  @state() private _yearOptionsLoaded = false\n\n  /** Locale-aware month/weekday data. Derived from `this.locale` (a reactive\n   * property Lit sets from the attribute during SSR) so the weekday/month names\n   * are correct in the SERVER render. The old approach set this field only from\n   * `connectedCallback`/`attributeChangedCallback`, neither of which takes effect\n   * on the server, so SSR rendered English names that then mismatched the\n   * Hungarian client hydration render. */\n  private get instanceLocalData() {\n    return dayjs()\n      .locale(this.locale || dayjs.locale())\n      .localeData()\n  }\n\n  async connectedCallback(): Promise<void> {\n    super.connectedCallback()\n\n    if (!dayjs.isDayjs(this.currentDate)) {\n      this.currentDate = dayjs(this.currentDate)\n    }\n\n    if (this.locale) {\n      this.currentDate = dayjs(this.currentDate).locale(this.locale)\n      // Remove requestUpdate() - let Lit handle the update cycle\n    }\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  get startDate() {\n    if (dayjs.isDayjs(this.currentDate)) {\n      return dayjs(this.currentDate.toDate())\n        .locale(this.locale)\n        .startOf('month')\n    }\n    return dayjs(this.currentDate).locale(this.locale).startOf('month')\n  }\n\n  get endDate() {\n    return dayjs(this.currentDate).locale(this.locale).endOf('month')\n  }\n\n  get shouldHideAdjacentMonths() {\n    // If explicitly set, use that value\n    if (this.mode === 'range') {\n      return true\n    }\n    // Default: false for single mode, true for range mode\n    return this.hideAdjacentMonths\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    const documentElementObserver = new MutationObserver(\n      this.updateLocaleFromHtml,\n    )\n\n    documentElementObserver.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['dir', 'lang'],\n    })\n\n    this.setValue(this.value, false)\n\n    // Load year options after initial render to improve startup performance\n    // but ensure they're available for user interaction\n    queueMicrotask(() => this.loadYearOptions())\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(_changedProperties)\n\n    if (_changedProperties.has('value')) {\n      this.setValue(this.value, false)\n    }\n\n    if (_changedProperties.has('locale')) {\n      // The month select's displayed (collapsed) label is derived from its\n      // slotted option-item text, which we relabel on locale change. Relabeling\n      // existing option text nodes does NOT fire `slotchange`, and the select's\n      // own `value` is unchanged, so it won't re-render on its own — its trigger\n      // keeps the previous language's month name even though the options are\n      // correct. Force it to re-read the now-localized selected option text.\n      // (The year select shows a locale-independent number, so it needs nothing.)\n      this.monthSelect?.requestUpdate()\n    }\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    super.attributeChangedCallback(name, _old, value)\n\n    if (name === 'locale') {\n      this.updateLocale(value)\n    }\n  }\n\n  private readonly updateLocale = (locale?: string | null) => {\n    if (!locale) {\n      this.locale = dayjs.locale()\n    } else {\n      this.locale = locale\n    }\n    // Re-render so the month/year options pick up the new locale. The options\n    // are declared in the template (getAllowedMonths / year range), so we let\n    // Lit re-render them declaratively instead of imperatively removing and\n    // re-creating <dap-ds-option-item> nodes — imperative DOM surgery on\n    // template-managed nodes breaks Lit hydration under SSR (the month/year\n    // selects then render blank even though the value is set).\n    this.requestUpdate()\n  }\n\n  private readonly updateLocaleFromHtml = (mutationList: any) => {\n    this.updateLocale(mutationList[0].target[mutationList[0].attributeName])\n  }\n\n  setValue(value?: Dayjs, setFocus = true) {\n    if (value) {\n      if (\n        this.isOutOfRange(\n          dayjs(this.currentDate).locale(this.locale),\n          dayjs(value),\n        )\n      ) {\n        this.setToFirstDayOfMonth()\n      } else {\n        const selectedCell = this.getCellByDate(dayjs(value))\n        this.setCurrentCell(selectedCell!, setFocus)\n      }\n    } else if (\n      this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), dayjs())\n    ) {\n      this.setToFirstAllowedDayOfMonth()\n    } else {\n      this.setToToday()\n    }\n  }\n\n  private readonly getWeeksInMonth = (date: Dayjs) => {\n    const days = date.daysInMonth()\n    const weekday = date.weekday()\n\n    return Math.ceil((days + weekday) / 7)\n  }\n\n  private loadYearOptions() {\n    if (!this._yearOptionsLoaded) {\n      this._yearOptionsLoaded = true\n      // Immediate update for better UX\n      this.requestUpdate()\n    }\n  }\n\n  isOutOfRange(currentDate: Dayjs, date: Dayjs) {\n    return !dayjs(currentDate).locale(this.locale).isSame(date, 'month')\n  }\n\n  isToday(date: Dayjs) {\n    return date.isSame(new Date(), 'day')\n  }\n\n  isSelected(date: Dayjs) {\n    if (this.mode === 'range') {\n      return this.isRangeStart(date) || this.isRangeEnd(date)\n    }\n\n    if (!this.value) {\n      return false\n    }\n\n    return date.isSame(this.value, 'day')\n  }\n\n  isRangeStart(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart) {\n      return false\n    }\n    return date.isSame(this.rangeStart, 'day')\n  }\n\n  isRangeEnd(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeEnd) {\n      return false\n    }\n    return date.isSame(this.rangeEnd, 'day')\n  }\n\n  isInRange(date: Dayjs) {\n    if (this.mode !== 'range' || !this.rangeStart || !this.rangeEnd) {\n      return false\n    }\n    return (\n      date.isAfter(this.rangeStart, 'day') &&\n      date.isBefore(this.rangeEnd, 'day')\n    )\n  }\n\n  getDatesInWeek(week: number, from: Dayjs) {\n    let date = from.startOf('week').add(week, 'week')\n    const dates: Dayjs[] = []\n\n    while (dates.length < 7) {\n      dates.push(date)\n      const nextDate = date.add(1, 'day')\n      if (date.isSame(from.endOf('month'))) {\n        break\n      }\n      date = nextDate\n    }\n\n    return dates\n  }\n\n  isDateInAllowedRange(date: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    return !date.isBefore(minDate, 'day') && !date.isAfter(maxDate, 'day')\n  }\n\n  isMonthInAllowedRange(year: number, month: number) {\n    const monthStart = dayjs(new Date(year, month, 1)).locale(this.locale)\n    const monthEnd = monthStart.endOf('month')\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n\n    // A month is allowed if it intersects the [minDate, maxDate] range.\n    return (\n      !monthEnd.isBefore(minDate, 'day') && !monthStart.isAfter(maxDate, 'day')\n    )\n  }\n\n  isDateInAllowedRangeByDate(year: number, month: number, date: number) {\n    return this.isDateInAllowedRange(dayjs(new Date(year, month, date)))\n  }\n\n  getAllowedMonths(currentDate: Dayjs) {\n    const minDate = dayjs(this.minDate).locale(this.locale)\n    const maxDate = dayjs(this.maxDate).locale(this.locale)\n    const minYear = minDate.year()\n    const maxYear = maxDate.year()\n    const minMonth = minDate.month()\n    const maxMonth = maxDate.month()\n\n    if (currentDate.year() === minYear && currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth - minMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === minYear) {\n      return Array.from(\n        { length: 12 - minMonth },\n        (_, i) => this.instanceLocalData.months()[i + minMonth],\n      )\n    }\n\n    if (currentDate.year() === maxYear) {\n      return Array.from(\n        { length: maxMonth + 1 },\n        (_, i) => this.instanceLocalData.months()[i],\n      )\n    }\n\n    const months = Array.from(\n      { length: 12 },\n      (_, i) => this.instanceLocalData.months()[i],\n    )\n\n    return months\n  }\n\n  setMonth(month: number) {\n    if (\n      month < 0 &&\n      this.isMonthInAllowedRange(dayjs(this.currentDate).year() - 1, 11)\n    ) {\n      this.setYear(dayjs(this.currentDate).locale(this.locale).year() - 1)\n      this.currentDate = this.currentDate.locale(this.locale).set('month', 11)\n      return\n    }\n\n    if (\n      month > 11 &&\n      this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year() + 1,\n        0,\n      )\n    ) {\n      this.setYear(dayjs(this.currentDate).year() + 1)\n      this.currentDate = this.currentDate.set('month', 0)\n      return\n    }\n\n    if (\n      !this.isMonthInAllowedRange(\n        dayjs(this.currentDate).locale(this.locale).year(),\n        month,\n      )\n    ) {\n      return\n    }\n\n    this.currentDate = dayjs(this.currentDate)\n      .locale(this.locale)\n      .set('month', month)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setDay(day: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    if (!this.isDateInAllowedRangeByDate(date.year(), date.month(), day)) {\n      return\n    }\n\n    this.currentDate = date.set('date', day)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setYear(year: number) {\n    const date = dayjs(this.currentDate).locale(this.locale)\n\n    this.currentDate = date.set('year', year)\n    // Remove requestUpdate() - currentDate property change will trigger update\n  }\n\n  setSelectedDate(date: Dayjs) {\n    if (this.disabledDate(date)) {\n      return\n    }\n\n    if (!this.isDateInAllowedRange(date)) {\n      return\n    }\n\n    if (this.isOutOfRange(dayjs(this.currentDate).locale(this.locale), date)) {\n      this.setMonth(date.month())\n    }\n\n    if (this.mode === 'range') {\n      // Range selection logic\n      if (!this.rangeStart || (this.rangeStart && this.rangeEnd)) {\n        // Start new range selection\n        this.rangeStart = date\n        this.rangeEnd = undefined\n        // Update currentDate to show the start date's month\n        this.currentDate = dayjs(date).locale(this.locale)\n      } else if (this.rangeStart && !this.rangeEnd) {\n        // Complete range selection\n        if (date.isBefore(this.rangeStart)) {\n          // If end date is before start date, swap them\n          this.rangeEnd = this.rangeStart\n          this.rangeStart = date\n        } else {\n          this.rangeEnd = date\n        }\n\n        // Update currentDate to show the start date's month in the first calendar\n        this.currentDate = dayjs(this.rangeStart).locale(this.locale)\n\n        // Emit range-change event\n        this.emit('dds-range-change', {\n          startDate: this.rangeStart,\n          endDate: this.rangeEnd,\n        })\n      }\n\n      this.setCurrentCell(this.getCellByDate(date)!)\n    } else {\n      // Single date selection\n      this.value = date\n      this.setCurrentCell(this.getCellByDate(date)!)\n\n      this.emit('dds-change', {\n        value: this.value,\n        type: 'value',\n      })\n    }\n  }\n\n  getFirstDayOfMonthCell() {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(this.startDate, 'day')\n    })\n  }\n\n  getCellByDate(date: Dayjs) {\n    return [...this.cells].find(cell => {\n      return dayjs(cell.value).locale(this.locale).isSame(date, 'day')\n    })\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return\n    }\n\n    event.preventDefault()\n    const element = event.composedPath()[0]\n    if (element instanceof DapDSCalendarCell) {\n      switch (event.code) {\n        case 'ArrowLeft':\n          this.focusNextCell(element, -1)\n          break\n        case 'ArrowRight':\n          this.focusNextCell(element, 1)\n          break\n        case 'ArrowUp':\n          this.focusNextCell(element, -7)\n          break\n        case 'ArrowDown':\n          this.focusNextCell(element, 7)\n          break\n        case 'PageUp':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() - 1)\n          break\n        case 'PageDown':\n          this.setMonth(dayjs(this.currentDate).locale(this.locale).month() + 1)\n          break\n        case 'Enter':\n          this.setSelectedDate(element.value)\n          break\n        case 'Escape':\n          this.emit('dds-close')\n          break\n      }\n    } else if (event.key === 'Escape') {\n      this.emit('dds-close')\n    }\n  }\n\n  setCurrentCell(cell: DapDSCalendarCell, setFocus = true) {\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '-1')\n    }\n    this._currentCell = cell\n    if (this._currentCell) {\n      this._currentCell.setAttribute('tabindex', '0')\n    }\n\n    if (setFocus && this._currentCell) {\n      this.setFocusToCurrentCell()\n    }\n  }\n\n  setFocusToCurrentCell() {\n    this._currentCell.focus()\n  }\n\n  setToFirstDayOfMonth() {\n    const firstDayofMonth = this.getFirstDayOfMonthCell()\n    firstDayofMonth?.setAttribute('tabindex', '0')\n    this._currentCell = firstDayofMonth!\n  }\n\n  setToToday() {\n    const today = this.getCellByDate(dayjs())\n    today?.setAttribute('tabindex', '0')\n    this._currentCell = today!\n  }\n\n  setToFirstAllowedDayOfMonth(currentDate = this.currentDate) {\n    const firstAllowedDay = this.getCellByDate(\n      dayjs(currentDate).locale(this.locale).startOf('month'),\n    )\n    firstAllowedDay?.setAttribute('tabindex', '0')\n    this._currentCell = firstAllowedDay!\n  }\n\n  focusNextCell(element: DapDSCalendarCell, offset: number) {\n    const index = [...this.cells].indexOf(element)\n    const nextIndex = index + offset\n    const currentMonth = dayjs(this.currentDate).locale(this.locale).month()\n\n    if (nextIndex >= 0 && nextIndex < this.cells.length) {\n      const cell = this.cells[nextIndex]\n      this.setCurrentCell(cell)\n    } else if (nextIndex < 0) {\n      this.setMonth(currentMonth - 1)\n\n      if (this.currentDate.month() < currentMonth) {\n        this.updateComplete.then(() => {\n          const lastDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .endOf('month')\n          const lastDayCell = this.getCellByDate(lastDay)\n          this.setCurrentCell(lastDayCell!)\n        })\n      }\n    } else if (nextIndex >= this.cells.length) {\n      this.setMonth(currentMonth + 1)\n\n      if (this.currentDate.month() > currentMonth) {\n        this.updateComplete.then(() => {\n          const firstDay = dayjs(this.currentDate)\n            .locale(this.locale)\n            .startOf('month')\n          const firstDayCell = this.getCellByDate(firstDay)\n          this.setCurrentCell(firstDayCell!)\n        })\n      }\n    }\n  }\n\n  public captureFocus(): void {\n    this.focus()\n    this.setFocusToCurrentCell()\n  }\n\n  private getWeekdaysMin() {\n    const firstDay = this.instanceLocalData.firstDayOfWeek()\n    const weekdays = this.instanceLocalData.weekdaysMin()\n    return weekdays.slice(firstDay).concat(weekdays.slice(0, firstDay))\n  }\n\n  renderCalendarGridHeader() {\n    return html`<thead part=\"calendar-grid-header\" class=\"calendar-grid-header\">\n      <tr class=\"calendar-grid-header-row\">\n        ${this.getWeekdaysMin().map(\n          day =>\n            html`<th class=\"calendar-cell\">\n              <dap-ds-calendar-cell\n                header\n                part=\"calendar-grid-header-cell\"\n                exportparts=\"base: calendar-grid-header-cell-base\"\n                locale=${this.locale}\n                >${day}</dap-ds-calendar-cell\n              >\n            </th>`,\n        )}\n      </tr>\n    </thead>`\n  }\n\n  renderCalendarGridBody(date: Dayjs) {\n    return html`<tbody part=\"body\" class=\"calendar-grid-body\">\n      ${[\n        ...new Array(\n          this.getWeeksInMonth(date || dayjs().locale(this.locale)),\n        ).keys(),\n      ].map(\n        week =>\n          html`<tr class=\"calendar-grid-row\">\n            ${this.getDatesInWeek(week, date).map(d => {\n              const isOutOfRange = this.isOutOfRange(date, d)\n              const isDisabled =\n                !this.isDateInAllowedRange(d) || this.disabledDate(d)\n\n              const isRangeStart = this.isRangeStart(d)\n              const isRangeEnd = this.isRangeEnd(d)\n              const isInRange = this.isInRange(d)\n\n              // Hide dates from adjacent months if shouldHideAdjacentMonths is true\n              if (this.shouldHideAdjacentMonths && isOutOfRange) {\n                return html`<td\n                  role=\"gridcell\"\n                  class=\"${clsx('calendar-cell calendar-cell--empty')}\"></td>`\n              }\n\n              return html`<td\n                role=\"gridcell\"\n                class=\"${clsx('calendar-cell')}\"\n                aria-disabled=${isDisabled}>\n                <dap-ds-calendar-cell\n                  part=\"calendar-grid-cell\"\n                  exportparts=\"base: calendar-grid-cell-base, today-mark: calendar-grid-cell-today-mark\"\n                  ?outofrange=${isOutOfRange}\n                  ?today=${this.isToday(d)}\n                  ?selected=${this.isSelected(d)}\n                  ?rangestart=${isRangeStart}\n                  ?rangeend=${isRangeEnd}\n                  ?inrange=${isInRange}\n                  .value=${d}\n                  locale=${this.locale}\n                  ?disabledDay=${isDisabled}\n                  role=\"button\"\n                  aria-pressed=${this.isSelected(d)}\n                  aria-disabled=${isDisabled}\n                  @click=${() => !isDisabled && this.setSelectedDate(d)}\n                  @keydown=${this.handleKeyDown}\n                  >${d.date()}</dap-ds-calendar-cell\n                >\n              </td>`\n            })}\n          </tr> `,\n      )}\n    </tbody>`\n  }\n\n  renderCalendarHeader() {\n    return html`\n      <header\n        part=\"calendar-header\"\n        class=\"calendar__header\"\n        @keydown=${this.handleKeyDown}>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-prev\"\n          class=\"calendar__header-button-prev\"\n          data-testid=${this.prevButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-left-l-line\"\n          @keydown=${this.handleKeyDown}\n          aria-label=${t('calendar.prevMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(this.currentDate.month() - 1)\n          }}>\n        </dap-ds-icon-button>\n        <dap-ds-select\n          part=\"calendar-header-year-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-year-select',\n          )}\n          @dds-keydown=${this.handleKeyDown}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.year', { lng: this.locale })}\n          value=${dayjs(this.currentDate).year()}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).year()\n            ) {\n              this.currentDate = dayjs(this.currentDate)\n                .locale(this.locale)\n                .set('year', parseInt(e.detail.value))\n              // Remove requestUpdate() - currentDate property change will trigger update\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this._yearOptionsLoaded\n            ? [\n                ...new Array(\n                  dayjs(this.maxDate).locale(this.locale).year() -\n                    dayjs(this.minDate).locale(this.locale).year() +\n                    1,\n                ).keys(),\n              ].map(\n                year =>\n                  html`<dap-ds-option-item\n                    value=${dayjs(this.minDate).locale(this.locale).year() +\n                    year}>\n                    ${dayjs(this.minDate).locale(this.locale).year() + year}\n                  </dap-ds-option-item>`,\n              )\n            : html`<dap-ds-option-item value=${dayjs(this.currentDate).year()}>\n                ${dayjs(this.currentDate).year()}\n              </dap-ds-option-item>`}\n        </dap-ds-select>\n        <dap-ds-select\n          id=\"monthSelect\"\n          part=\"calendar-header-month-select\"\n          floatingStrategy=\"fixed\"\n          class=${clsx(\n            'calendar__header-select',\n            'calendar__header-month-select',\n          )}\n          size=\"sm\"\n          noAnimation\n          aria-label=${t('calendar.month', { lng: this.locale })}\n          value=${dayjs(this.currentDate).locale(this.locale).month() + 1}\n          @dds-change=${(e: CustomEvent) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            if (\n              e.detail.value &&\n              !isNaN(parseInt(e.detail.value)) &&\n              parseInt(e.detail.value) !==\n                dayjs(this.currentDate).locale(this.locale).month() + 1\n            ) {\n              this.setMonth(parseInt(e.detail.value) - 1)\n            }\n          }}>\n          <dap-ds-icon-expand-up-down-fill\n            slot=\"indicator-icon\"\n            size=\"16\"></dap-ds-icon-expand-up-down-fill>\n          ${this.getAllowedMonths(\n            dayjs(this.currentDate).locale(this.locale),\n          ).map(\n            month =>\n              html`<dap-ds-option-item\n                value=${this.instanceLocalData.months().indexOf(month) + 1}>\n                ${month}\n              </dap-ds-option-item>`,\n          )}\n        </dap-ds-select>\n        <dap-ds-icon-button\n          part=\"calendar-header-button-next\"\n          class=\"calendar__header-button-next\"\n          data-testid=${this.nextButtonTestId}\n          clean\n          size=\"lg\"\n          variant=\"brand\"\n          icon=\"arrow-right-l-line\"\n          aria-label=${t('calendar.nextMonth', { lng: this.locale })}\n          @click=${() => {\n            this.setMonth(\n              dayjs(this.currentDate).locale(this.locale).month() + 1,\n            )\n          }}>\n        </dap-ds-icon-button>\n      </header>\n    `\n  }\n\n  render() {\n    if (this.mode === 'range') {\n      // Render two calendars side-by-side for range mode\n      const currentMonth = dayjs(this.currentDate).locale(this.locale)\n      const nextMonth = currentMonth.add(1, 'month')\n\n      return html` <div class=\"calendar calendar--range\">\n        ${this.renderCalendarHeader()}\n        <div class=\"calendar__months\">\n          <div class=\"calendar__month\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeStart ? dayjs(this.rangeStart).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(this.startDate)}\n            </table>\n          </div>\n          <div class=\"calendar__month calendar__month--next\">\n            <table\n              part=\"base\"\n              class=\"calendar__grid\"\n              role=\"grid\"\n              aria-label=${`${this.rangeEnd ? dayjs(this.rangeEnd).locale(this.locale).format('LL, dddd') : ''}`}>\n              ${this.renderCalendarGridHeader()}\n              ${this.renderCalendarGridBody(nextMonth.startOf('month'))}\n            </table>\n          </div>\n        </div>\n      </div>`\n    }\n\n    // Single date mode\n    return html` <div class=\"calendar\">\n      ${this.renderCalendarHeader()}\n      <table\n        part=\"base\"\n        class=\"calendar__grid\"\n        role=\"grid\"\n        aria-label=${`${this.value ? dayjs(this.value).locale(this.locale).format('LL, dddd') : ''}`}>\n        ${this.renderCalendarGridHeader()}\n        ${this.renderCalendarGridBody(this.startDate)}\n      </table>\n    </div>`\n  }\n}\n"],"names":["_DapDSCalendar","DdsElement","dayjs","date","locale","mutationList","days","weekday","__async","__superGet","_changedProperties","_a","name","_old","value","setFocus","selectedCell","currentDate","week","from","dates","nextDate","minDate","maxDate","year","month","monthStart","monthEnd","minYear","maxYear","minMonth","maxMonth","_","i","day","cell","event","element","DapDSCalendarCell","firstDayofMonth","today","firstAllowedDay","offset","nextIndex","currentMonth","lastDay","lastDayCell","firstDay","firstDayCell","weekdays","html","d","isOutOfRange","isDisabled","isRangeStart","isRangeEnd","isInRange","clsx","t","nextMonth","DapDSIconButton","DapDSSelect","ArrowsExpandUpDownFill","DapDSOptionItem","unsafeCSS","styles","DapDSCalendar","__decorateClass","queryAll","query","property","state"],"mappings":"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"}

package/dist/components/callout/callout.component.d.ts

@@ -30,6 +30,7 @@ import { default as SystemInformation2Fill } from '../icons/system/system-inform
  * @csspart description - The description of the callout.
  * @csspart actions - The actions of the callout.
  * @csspart close - The close button of the callout.
+ * @csspart icon-base - The base of the icon.
  *
  * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))
  * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))
@@ -117,8 +118,11 @@ export default class DapDSCallout extends DdsElement {
     /** If the callout is opened */
     opened: string;
     static readonly styles: import('lit').CSSResult;
+    /** @ignore */
+    actionsSlot: HTMLSlotElement;
     private _hasActions;
     private get hasActions();
+    protected firstUpdated(): void;
     private handleActionsSlotChange;
     private static readonly defaultIcons;
     getDefaultIcon(variant: CalloutVariant): import('lit-html').TemplateResult;

package/dist/components/callout/callout.component.js

@@ -1,35 +1,34 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as r } from "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as i } from "../../node_modules/lit-html/static.js";
-import { normalizeStringProperty as f, stringPropertyConverter as u } from "../../common/utils.js";
-import { DdsElement as b } from "../../internal/dds-hu-element.js";
-import "../../localization/localization.js";
-import g from "../card/card.component.js";
-import y from "../card/card-content.component.js";
-import $ from "../icon/icon.component.js";
-import v from "../icon-button/icon-button.component.js";
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as f, nothing as r } from "lit";
+import { property as i, query as m } from "lit/decorators.js";
+import { html as a } from "lit/static-html.js";
+import { normalizeStringProperty as b, stringPropertyConverter as g } from "../../common/utils.js";
+import { DdsElement as y } from "../../internal/dds-hu-element.js";
+import $ from "../card/card.component.js";
+import S from "../card/card-content.component.js";
+import v from "../icon/icon.component.js";
+import _ from "../icon-button/icon-button.component.js";
 import x from "../icons/system/system-alert-fill/system-alert-fill.component.js";
 import B from "../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component.js";
-import S from "../icons/system/system-error-warning-fill/system-error-warning-fill.component.js";
-import _ from "../icons/system/system-information-2-fill/system-information-2-fill.component.js";
-import C from "./callout.scss.js";
-import { unsafeCSS as D } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as I } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var w = Object.defineProperty, a = (d, t, n, p) => {
+import C from "../icons/system/system-error-warning-fill/system-error-warning-fill.component.js";
+import D from "../icons/system/system-information-2-fill/system-information-2-fill.component.js";
+import I from "./callout.scss.js";
+var A = Object.defineProperty, o = (d, t, n, p) => {
   for (var l = void 0, c = d.length - 1, h; c >= 0; c--)
     (h = d[c]) && (l = h(t, n, l) || l);
-  return l && w(t, n, l), l;
+  return l && A(t, n, l), l;
 }, e;
-const o = (e = class extends b {
+const s = (e = class extends y {
   constructor() {
     super(...arguments), this.variant = "brand", this.alignment = "horizontal", this.shade = "base", this.noBorder = "true", this.closeable = !1, this.closeButtonTestId = "callout-close-button", this.opened = "true", this._hasActions = !1;
   }
   get hasActions() {
     return this._hasActions;
   }
+  firstUpdated() {
+    var t;
+    (t = this.actionsSlot) != null && t.assignedElements().length && (this._hasActions = !0, this.requestUpdate());
+  }
   handleActionsSlotChange(t) {
     const p = t.target.assignedElements();
     this._hasActions = p.length > 0, this.requestUpdate();
@@ -45,10 +44,10 @@ const o = (e = class extends b {
     t.key === "Escape" && this.closeable && (t.preventDefault(), this.handleClose());
   }
   updated(t) {
-    super.updated(t), t.has("title") && (this.title = f(this.title));
+    super.updated(t), t.has("title") && (this.title = b(this.title));
   }
   render() {
-    return this.opened !== "false" ? i`
+    return this.opened !== "false" ? a`
           <dap-ds-card
             part="base"
             role="region"
@@ -56,7 +55,7 @@ const o = (e = class extends b {
             aria-labelledby=${this.title && typeof this.title == "string" && this.title.trim() && this.title !== "null" && this.title !== "undefined" ? "callout-title" : r}
             @keydown=${this.handleKeyDown}
             .noBorder=${this.noBorder === "true"}
-            class=${m(
+            class=${u(
       "callout",
       `callout--${this.variant}`,
       `callout--${this.alignment}`,
@@ -74,7 +73,7 @@ const o = (e = class extends b {
                 </slot>
               </span>
               <span class="callout__content-wrapper">
-                ${this.title && typeof this.title == "string" && this.title.trim() && this.title !== "null" && this.title !== "undefined" ? i`<span
+                ${this.title && typeof this.title == "string" && this.title.trim() && this.title !== "null" && this.title !== "undefined" ? a`<span
                       part="title"
                       class="callout__title"
                       id="callout-title">
@@ -93,12 +92,12 @@ const o = (e = class extends b {
                     @slotchange=${this.handleActionsSlotChange}></slot>
                 </span>
               </span>
-              ${this.closeable ? i` <span part="close" class="callout__close">
+              ${this.closeable ? a` <span part="close" class="callout__close">
                     <slot name="close">
                       <dap-ds-icon-button
                         clean
                         data-testid=${this.closeButtonTestId}
-                        aria-label=${this.closeButtonLabel ? this.closeButtonLabel : I("close")}
+                        aria-label=${this.closeButtonLabel ? this.closeButtonLabel : this.localize.t("close")}
                         @click=${this.handleClose}>
                         <dap-ds-icon name="close-line"></dap-ds-icon>
                       </dap-ds-icon-button>
@@ -109,62 +108,65 @@ const o = (e = class extends b {
         ` : r;
   }
 }, e.tagName = "dap-ds-callout", e.dependencies = {
-  "dap-ds-icon-information-2-fill": _,
+  "dap-ds-icon-information-2-fill": D,
   "dap-ds-icon-checkbox-circle-fill": B,
   "dap-ds-icon-alert-fill": x,
-  "dap-ds-icon-error-warning-fill": S,
-  "dap-ds-card": g,
-  "dap-ds-card-content": y,
-  "dap-ds-icon-button": v,
-  "dap-ds-icon": $
-}, e.styles = D(C), e.defaultIcons = {
-  brand: i`<dap-ds-icon-information-2-fill
+  "dap-ds-icon-error-warning-fill": C,
+  "dap-ds-card": $,
+  "dap-ds-card-content": S,
+  "dap-ds-icon-button": _,
+  "dap-ds-icon": v
+}, e.styles = f(I), e.defaultIcons = {
+  brand: a`<dap-ds-icon-information-2-fill
       aria-hidden="true"
       exportparts="base:icon-base"></dap-ds-icon-information-2-fill>`,
-  info: i`<dap-ds-icon-information-2-fill
+  info: a`<dap-ds-icon-information-2-fill
       aria-hidden="true"
       exportparts="base:icon-base"></dap-ds-icon-information-2-fill>`,
-  positive: i`<dap-ds-icon-checkbox-circle-fill
+  positive: a`<dap-ds-icon-checkbox-circle-fill
       aria-hidden="true"
       exportparts="base:icon-base"></dap-ds-icon-checkbox-circle-fill>`,
-  warning: i`<dap-ds-icon-alert-fill
+  warning: a`<dap-ds-icon-alert-fill
       aria-hidden="true"
       exportparts="base:icon-base"></dap-ds-icon-alert-fill>`,
-  negative: i`<dap-ds-icon-error-warning-fill
+  negative: a`<dap-ds-icon-error-warning-fill
       aria-hidden="true"
       exportparts="base:icon-base"></dap-ds-icon-error-warning-fill>`
 }, e);
-a([
-  s()
-], o.prototype, "variant");
-a([
-  s()
-], o.prototype, "alignment");
-a([
-  s()
-], o.prototype, "shade");
-a([
-  s({ type: String })
-], o.prototype, "noBorder");
-a([
-  s({ type: Boolean })
-], o.prototype, "closeable");
-a([
-  s({
-    converter: u
+o([
+  i()
+], s.prototype, "variant");
+o([
+  i()
+], s.prototype, "alignment");
+o([
+  i()
+], s.prototype, "shade");
+o([
+  i({ type: String })
+], s.prototype, "noBorder");
+o([
+  i({ type: Boolean })
+], s.prototype, "closeable");
+o([
+  i({
+    converter: g
   })
-], o.prototype, "title");
-a([
-  s()
-], o.prototype, "closeButtonLabel");
-a([
-  s()
-], o.prototype, "closeButtonTestId");
-a([
-  s({ reflect: !0 })
-], o.prototype, "opened");
-let R = o;
+], s.prototype, "title");
+o([
+  i()
+], s.prototype, "closeButtonLabel");
+o([
+  i()
+], s.prototype, "closeButtonTestId");
+o([
+  i({ reflect: !0 })
+], s.prototype, "opened");
+o([
+  m('slot[name="actions"]')
+], s.prototype, "actionsSlot");
+let G = s;
 export {
-  R as default
+  G as default
 };
 //# sourceMappingURL=callout.component.js.map

package/dist/components/callout/callout.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.component.js","sources":["../../../src/components/callout/callout.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Alignment, BackgroundShade, CalloutVariant } from '@/common/types'\nimport {\n  normalizeStringProperty,\n  stringPropertyConverter,\n} from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { translate } from '@/localization/localization'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemAlertFill from '../icons/system/system-alert-fill/system-alert-fill.component'\nimport SystemCheckboxCircleFill from '../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component'\nimport SystemErrorWarningFill from '../icons/system/system-error-warning-fill/system-error-warning-fill.component'\nimport SystemInformation2Fill from '../icons/system/system-information-2-fill/system-information-2-fill.component'\nimport styles from './callout.scss?inline'\n\n/**\n * `dap-ds-callout` is a custom callout component.\n * @element dap-ds-callout\n * @title - Callout\n *\n * @event {{ void }} dds-close - Fired when the close button is clicked.\n *\n * @slot - The content of the callout.\n * @slot title - The title of the callout.\n * @slot icon - The icon of the callout.\n * @slot actions - The actions of the callout.\n * @slot close - The close button of the callout.\n *\n * @csspart base - The main callout container.\n * @csspart content - The content of the callout.\n * @csspart card-content - The content of the card.\n * @csspart icon - The icon of the callout.\n * @csspart title - The title of the callout.\n * @csspart description - The description of the callout.\n * @csspart actions - The actions of the callout.\n * @csspart close - The close button of the callout.\n *\n * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-icon-size - Size of the icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-callout-title-color - Color of the title text. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-callout-description-color - Color of the description text. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-callout-title-font-size - Font size of the title. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-description-font-size - Font size of the description. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-title-font-weight - Font weight of the title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-description-font-weight - Font weight of the description. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-actions-gap - Gap between action items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-callout-content-gap - Gap between content elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-callout-border-radius - Border radius of the callout. (default: var(--dds-radius-base))\n *\n * @cssproperty --dds-callout-brand-background - Brand variant background color. (default: var(--dds-background-brand-base))\n * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. (default: var(--dds-background-brand-subtle))\n * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-callout-brand-icon - Brand variant icon color. (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-callout-brand-border - Brand variant border color. (default: var(--dds-border-brand-subtle))\n *\n * @cssproperty --dds-callout-info-background - Info variant background color. (default: var(--dds-background-informative-base))\n * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. (default: var(--dds-background-informative-subtle))\n * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. (default: var(--dds-background-informative-strong))\n * @cssproperty --dds-callout-info-icon - Info variant icon color. (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-callout-info-border - Info variant border color. (default: var(--dds-border-informative-subtle))\n *\n * @cssproperty --dds-callout-positive-background - Positive variant background color. (default: var(--dds-background-positive-base))\n * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. (default: var(--dds-background-positive-subtle))\n * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. (default: var(--dds-background-positive-strong))\n * @cssproperty --dds-callout-positive-icon - Positive variant icon color. (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-callout-positive-border - Positive variant border color. (default: var(--dds-border-positive-subtle))\n *\n * @cssproperty --dds-callout-warning-background - Warning variant background color. (default: var(--dds-background-warning-base))\n * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. (default: var(--dds-background-warning-subtle))\n * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. (default: var(--dds-background-warning-strong))\n * @cssproperty --dds-callout-warning-icon - Warning variant icon color. (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-callout-warning-border - Warning variant border color. (default: var(--dds-border-warning-subtle))\n *\n * @cssproperty --dds-callout-negative-background - Negative variant background color. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. (default: var(--dds-background-negative-subtle))\n * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-callout-negative-icon - Negative variant icon color. (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-callout-negative-border - Negative variant border color. (default: var(--dds-border-negative-subtle))\n */\nexport default class DapDSCallout extends DdsElement {\n  static tagName = 'dap-ds-callout'\n\n  static dependencies = {\n    'dap-ds-icon-information-2-fill': SystemInformation2Fill,\n    'dap-ds-icon-checkbox-circle-fill': SystemCheckboxCircleFill,\n    'dap-ds-icon-alert-fill': SystemAlertFill,\n    'dap-ds-icon-error-warning-fill': SystemErrorWarningFill,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The variant of the callout\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: CalloutVariant = 'brand'\n\n  /** The alignment of the callout. Can be `vertical` or `horizontal`.\n   * @type { 'vertical' | 'horizontal' }\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.\n   * @type { 'subtle' | 'base' | 'medium' | 'strong' }\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /** If the callout has a border */\n  @property({ type: String }) noBorder: string = 'true'\n\n  /** If the callout has a close button */\n  @property({ type: Boolean }) closeable: boolean = false\n\n  /** The header of the callout */\n  @property({\n    converter: stringPropertyConverter,\n  })\n  title: string\n\n  /** The label of the close button */\n  @property() closeButtonLabel: string\n\n  /** `data-testid` for the default close button. */\n  @property() closeButtonTestId = 'callout-close-button'\n\n  /** If the callout is opened */\n  @property({ reflect: true }) opened: string = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  private _hasActions: boolean = false\n\n  private get hasActions(): boolean {\n    return this._hasActions\n  }\n\n  private handleActionsSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement\n    const assignedElements = slot.assignedElements()\n    this._hasActions = assignedElements.length > 0\n    this.requestUpdate()\n  }\n\n  private static readonly defaultIcons = {\n    brand: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    info: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    positive: html`<dap-ds-icon-checkbox-circle-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-checkbox-circle-fill>`,\n    warning: html`<dap-ds-icon-alert-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-alert-fill>`,\n    negative: html`<dap-ds-icon-error-warning-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-error-warning-fill>`,\n  } as const\n\n  getDefaultIcon(variant: CalloutVariant) {\n    return DapDSCallout.defaultIcons[variant] ?? DapDSCallout.defaultIcons.brand\n  }\n\n  handleClose() {\n    this.emit('dds-close')\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closeable) {\n      event.preventDefault()\n      this.handleClose()\n    }\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('title')) {\n      this.title = normalizeStringProperty(this.title)\n    }\n  }\n\n  render() {\n    return this.opened !== 'false'\n      ? html`\n          <dap-ds-card\n            part=\"base\"\n            role=\"region\"\n            aria-live=\"polite\"\n            aria-labelledby=${this.title &&\n            typeof this.title === 'string' &&\n            this.title.trim() &&\n            this.title !== 'null' &&\n            this.title !== 'undefined'\n              ? 'callout-title'\n              : nothing}\n            @keydown=${this.handleKeyDown}\n            .noBorder=${this.noBorder === 'true'}\n            class=${clsx(\n              'callout',\n              `callout--${this.variant}`,\n              `callout--${this.alignment}`,\n              `callout--${this.shade}`,\n              { [`callout--border`]: this.noBorder === 'false' },\n            )}>\n            <dap-ds-card-content\n              class=\"callout__content\"\n              spacing=\"none\"\n              part=\"content\"\n              exportparts=\"base:card-content\">\n              <span class=\"callout__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" part=\"icon\">\n                  ${this.getDefaultIcon(this.variant)}\n                </slot>\n              </span>\n              <span class=\"callout__content-wrapper\">\n                ${this.title &&\n                typeof this.title === 'string' &&\n                this.title.trim() &&\n                this.title !== 'null' &&\n                this.title !== 'undefined'\n                  ? html`<span\n                      part=\"title\"\n                      class=\"callout__title\"\n                      id=\"callout-title\">\n                      <slot name=\"title\">${this.title}</slot>\n                    </span>`\n                  : nothing}\n                <span part=\"description\" class=\"callout__description\">\n                  <slot></slot>\n                </span>\n                <span\n                  part=\"actions\"\n                  class=\"callout__actions\"\n                  ?hidden=${!this.hasActions}>\n                  <slot\n                    name=\"actions\"\n                    part=\"actions\"\n                    @slotchange=${this.handleActionsSlotChange}></slot>\n                </span>\n              </span>\n              ${this.closeable\n                ? html` <span part=\"close\" class=\"callout__close\">\n                    <slot name=\"close\">\n                      <dap-ds-icon-button\n                        clean\n                        data-testid=${this.closeButtonTestId}\n                        aria-label=${this.closeButtonLabel\n                          ? this.closeButtonLabel\n                          : translate('close')}\n                        @click=${this.handleClose}>\n                        <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n                      </dap-ds-icon-button>\n                    </slot>\n                  </span>`\n                : nothing}\n            </dap-ds-card-content>\n          </dap-ds-card>\n        `\n      : nothing\n  }\n}\n"],"names":["_DapDSCallout","_a","DdsElement","event","assignedElements","variant","changedProperties","normalizeStringProperty","html","nothing","clsx","translate","SystemInformation2Fill","SystemCheckboxCircleFill","SystemAlertFill","SystemErrorWarningFill","DapDSCard","DapDSCardContent","DapDSIconButton","DapDSIcon","unsafeCSS","styles","__decorateClass","property","stringPropertyConverter","DapDSCallout"],"mappings":"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"}
+{"version":3,"file":"callout.component.js","sources":["../../../src/components/callout/callout.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Alignment, BackgroundShade, CalloutVariant } from '@/common/types'\nimport {\n  normalizeStringProperty,\n  stringPropertyConverter,\n} from '@/common/utils'\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSCard from '../card/card.component'\nimport DapDSCardContent from '../card/card-content.component'\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSIconButton from '../icon-button/icon-button.component'\nimport SystemAlertFill from '../icons/system/system-alert-fill/system-alert-fill.component'\nimport SystemCheckboxCircleFill from '../icons/system/system-checkbox-circle-fill/system-checkbox-circle-fill.component'\nimport SystemErrorWarningFill from '../icons/system/system-error-warning-fill/system-error-warning-fill.component'\nimport SystemInformation2Fill from '../icons/system/system-information-2-fill/system-information-2-fill.component'\nimport styles from './callout.scss?inline'\n\n/**\n * `dap-ds-callout` is a custom callout component.\n * @element dap-ds-callout\n * @title - Callout\n *\n * @event {{ void }} dds-close - Fired when the close button is clicked.\n *\n * @slot - The content of the callout.\n * @slot title - The title of the callout.\n * @slot icon - The icon of the callout.\n * @slot actions - The actions of the callout.\n * @slot close - The close button of the callout.\n *\n * @csspart base - The main callout container.\n * @csspart content - The content of the callout.\n * @csspart card-content - The content of the card.\n * @csspart icon - The icon of the callout.\n * @csspart title - The title of the callout.\n * @csspart description - The description of the callout.\n * @csspart actions - The actions of the callout.\n * @csspart close - The close button of the callout.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-callout-padding - Padding of the callout content. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-gap - Gap between elements in horizontal layout. (default: var(--dds-spacing-300))\n * @cssproperty --dds-callout-icon-size - Size of the icon. (default: var(--dds-spacing-600))\n * @cssproperty --dds-callout-title-color - Color of the title text. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-callout-description-color - Color of the description text. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-callout-title-font-size - Font size of the title. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-description-font-size - Font size of the description. (default: var(--dds-font-base))\n * @cssproperty --dds-callout-title-font-weight - Font weight of the title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-description-font-weight - Font weight of the description. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-callout-actions-font-weight - Font weight of the actions. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-callout-actions-gap - Gap between action items. (default: var(--dds-spacing-400))\n * @cssproperty --dds-callout-content-gap - Gap between content elements. (default: var(--dds-spacing-100))\n * @cssproperty --dds-callout-border-radius - Border radius of the callout. (default: var(--dds-radius-base))\n *\n * @cssproperty --dds-callout-brand-background - Brand variant background color. (default: var(--dds-background-brand-base))\n * @cssproperty --dds-callout-brand-background-subtle - Brand variant subtle background color. (default: var(--dds-background-brand-subtle))\n * @cssproperty --dds-callout-brand-background-medium - Brand variant medium background color. (default: var(--dds-background-brand-medium))\n * @cssproperty --dds-callout-brand-background-strong - Brand variant strong background color. (default: var(--dds-background-brand-strong))\n * @cssproperty --dds-callout-brand-icon - Brand variant icon color. (default: var(--dds-icon-brand-subtle))\n * @cssproperty --dds-callout-brand-border - Brand variant border color. (default: var(--dds-border-brand-subtle))\n *\n * @cssproperty --dds-callout-info-background - Info variant background color. (default: var(--dds-background-informative-base))\n * @cssproperty --dds-callout-info-background-subtle - Info variant subtle background color. (default: var(--dds-background-informative-subtle))\n * @cssproperty --dds-callout-info-background-medium - Info variant medium background color. (default: var(--dds-background-informative-medium))\n * @cssproperty --dds-callout-info-background-strong - Info variant strong background color. (default: var(--dds-background-informative-strong))\n * @cssproperty --dds-callout-info-icon - Info variant icon color. (default: var(--dds-icon-informative-subtle))\n * @cssproperty --dds-callout-info-border - Info variant border color. (default: var(--dds-border-informative-subtle))\n *\n * @cssproperty --dds-callout-positive-background - Positive variant background color. (default: var(--dds-background-positive-base))\n * @cssproperty --dds-callout-positive-background-subtle - Positive variant subtle background color. (default: var(--dds-background-positive-subtle))\n * @cssproperty --dds-callout-positive-background-medium - Positive variant medium background color. (default: var(--dds-background-positive-medium))\n * @cssproperty --dds-callout-positive-background-strong - Positive variant strong background color. (default: var(--dds-background-positive-strong))\n * @cssproperty --dds-callout-positive-icon - Positive variant icon color. (default: var(--dds-icon-positive-subtle))\n * @cssproperty --dds-callout-positive-border - Positive variant border color. (default: var(--dds-border-positive-subtle))\n *\n * @cssproperty --dds-callout-warning-background - Warning variant background color. (default: var(--dds-background-warning-base))\n * @cssproperty --dds-callout-warning-background-subtle - Warning variant subtle background color. (default: var(--dds-background-warning-subtle))\n * @cssproperty --dds-callout-warning-background-medium - Warning variant medium background color. (default: var(--dds-background-warning-medium))\n * @cssproperty --dds-callout-warning-background-strong - Warning variant strong background color. (default: var(--dds-background-warning-strong))\n * @cssproperty --dds-callout-warning-icon - Warning variant icon color. (default: var(--dds-icon-neutral-strong))\n * @cssproperty --dds-callout-warning-border - Warning variant border color. (default: var(--dds-border-warning-subtle))\n *\n * @cssproperty --dds-callout-negative-background - Negative variant background color. (default: var(--dds-background-negative-base))\n * @cssproperty --dds-callout-negative-background-subtle - Negative variant subtle background color. (default: var(--dds-background-negative-subtle))\n * @cssproperty --dds-callout-negative-background-medium - Negative variant medium background color. (default: var(--dds-background-negative-medium))\n * @cssproperty --dds-callout-negative-background-strong - Negative variant strong background color. (default: var(--dds-background-negative-strong))\n * @cssproperty --dds-callout-negative-icon - Negative variant icon color. (default: var(--dds-icon-negative-subtle))\n * @cssproperty --dds-callout-negative-border - Negative variant border color. (default: var(--dds-border-negative-subtle))\n */\nexport default class DapDSCallout extends DdsElement {\n  static tagName = 'dap-ds-callout'\n\n  static dependencies = {\n    'dap-ds-icon-information-2-fill': SystemInformation2Fill,\n    'dap-ds-icon-checkbox-circle-fill': SystemCheckboxCircleFill,\n    'dap-ds-icon-alert-fill': SystemAlertFill,\n    'dap-ds-icon-error-warning-fill': SystemErrorWarningFill,\n    'dap-ds-card': DapDSCard,\n    'dap-ds-card-content': DapDSCardContent,\n    'dap-ds-icon-button': DapDSIconButton,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The variant of the callout\n   * @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }\n   */\n  @property() variant: CalloutVariant = 'brand'\n\n  /** The alignment of the callout. Can be `vertical` or `horizontal`.\n   * @type { 'vertical' | 'horizontal' }\n   */\n  @property() alignment: Alignment = 'horizontal'\n\n  /** The strongness of the callout colors. Can be `subtle`, `base`, `medium`, or `strong`.\n   * @type { 'subtle' | 'base' | 'medium' | 'strong' }\n   */\n  @property() shade: BackgroundShade = 'base'\n\n  /** If the callout has a border */\n  @property({ type: String }) noBorder: string = 'true'\n\n  /** If the callout has a close button */\n  @property({ type: Boolean }) closeable: boolean = false\n\n  /** The header of the callout */\n  @property({\n    converter: stringPropertyConverter,\n  })\n  title: string\n\n  /** The label of the close button */\n  @property() closeButtonLabel: string\n\n  /** `data-testid` for the default close button. */\n  @property() closeButtonTestId = 'callout-close-button'\n\n  /** If the callout is opened */\n  @property({ reflect: true }) opened: string = 'true'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** @ignore */\n  @query('slot[name=\"actions\"]') actionsSlot!: HTMLSlotElement\n\n  private _hasActions: boolean = false\n\n  private get hasActions(): boolean {\n    return this._hasActions\n  }\n\n  protected firstUpdated(): void {\n    // On SSR hydration `slotchange` does not fire, so `_hasActions` stays false\n    // and the actions wrapper keeps its server-rendered `hidden` attribute even\n    // when actions were slotted. Resolve once here from the assigned elements.\n    if (this.actionsSlot?.assignedElements().length) {\n      this._hasActions = true\n      this.requestUpdate()\n    }\n  }\n\n  private handleActionsSlotChange(event: Event): void {\n    const slot = event.target as HTMLSlotElement\n    const assignedElements = slot.assignedElements()\n    this._hasActions = assignedElements.length > 0\n    this.requestUpdate()\n  }\n\n  private static readonly defaultIcons = {\n    brand: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    info: html`<dap-ds-icon-information-2-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-information-2-fill>`,\n    positive: html`<dap-ds-icon-checkbox-circle-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-checkbox-circle-fill>`,\n    warning: html`<dap-ds-icon-alert-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-alert-fill>`,\n    negative: html`<dap-ds-icon-error-warning-fill\n      aria-hidden=\"true\"\n      exportparts=\"base:icon-base\"></dap-ds-icon-error-warning-fill>`,\n  } as const\n\n  getDefaultIcon(variant: CalloutVariant) {\n    return DapDSCallout.defaultIcons[variant] ?? DapDSCallout.defaultIcons.brand\n  }\n\n  handleClose() {\n    this.emit('dds-close')\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.closeable) {\n      event.preventDefault()\n      this.handleClose()\n    }\n  }\n\n  protected updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('title')) {\n      this.title = normalizeStringProperty(this.title)\n    }\n  }\n\n  render() {\n    return this.opened !== 'false'\n      ? html`\n          <dap-ds-card\n            part=\"base\"\n            role=\"region\"\n            aria-live=\"polite\"\n            aria-labelledby=${this.title &&\n            typeof this.title === 'string' &&\n            this.title.trim() &&\n            this.title !== 'null' &&\n            this.title !== 'undefined'\n              ? 'callout-title'\n              : nothing}\n            @keydown=${this.handleKeyDown}\n            .noBorder=${this.noBorder === 'true'}\n            class=${clsx(\n              'callout',\n              `callout--${this.variant}`,\n              `callout--${this.alignment}`,\n              `callout--${this.shade}`,\n              { [`callout--border`]: this.noBorder === 'false' },\n            )}>\n            <dap-ds-card-content\n              class=\"callout__content\"\n              spacing=\"none\"\n              part=\"content\"\n              exportparts=\"base:card-content\">\n              <span class=\"callout__icon\" aria-hidden=\"true\">\n                <slot name=\"icon\" part=\"icon\">\n                  ${this.getDefaultIcon(this.variant)}\n                </slot>\n              </span>\n              <span class=\"callout__content-wrapper\">\n                ${this.title &&\n                typeof this.title === 'string' &&\n                this.title.trim() &&\n                this.title !== 'null' &&\n                this.title !== 'undefined'\n                  ? html`<span\n                      part=\"title\"\n                      class=\"callout__title\"\n                      id=\"callout-title\">\n                      <slot name=\"title\">${this.title}</slot>\n                    </span>`\n                  : nothing}\n                <span part=\"description\" class=\"callout__description\">\n                  <slot></slot>\n                </span>\n                <span\n                  part=\"actions\"\n                  class=\"callout__actions\"\n                  ?hidden=${!this.hasActions}>\n                  <slot\n                    name=\"actions\"\n                    part=\"actions\"\n                    @slotchange=${this.handleActionsSlotChange}></slot>\n                </span>\n              </span>\n              ${this.closeable\n                ? html` <span part=\"close\" class=\"callout__close\">\n                    <slot name=\"close\">\n                      <dap-ds-icon-button\n                        clean\n                        data-testid=${this.closeButtonTestId}\n                        aria-label=${this.closeButtonLabel\n                          ? this.closeButtonLabel\n                          : this.localize.t('close')}\n                        @click=${this.handleClose}>\n                        <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n                      </dap-ds-icon-button>\n                    </slot>\n                  </span>`\n                : nothing}\n            </dap-ds-card-content>\n          </dap-ds-card>\n        `\n      : nothing\n  }\n}\n"],"names":["_DapDSCallout","_a","DdsElement","event","assignedElements","variant","changedProperties","normalizeStringProperty","html","nothing","clsx","SystemInformation2Fill","SystemCheckboxCircleFill","SystemAlertFill","SystemErrorWarningFill","DapDSCard","DapDSCardContent","DapDSIconButton","DapDSIcon","unsafeCSS","styles","__decorateClass","property","stringPropertyConverter","query","DapDSCallout"],"mappings":"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"}

package/dist/components/card/card-actions.component.js

@@ -1,18 +1,15 @@
 import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { html as r } from "../../node_modules/lit-html/static.js";
-import { DdsElement as e } from "../../internal/dds-hu-element.js";
-import { SizedMixin as o } from "../../internal/mixin/sizedMixin.js";
-import a from "./_styles/card-actions.scss.js";
-import { unsafeCSS as m } from "../../node_modules/@lit/reactive-element/css-tag.js";
-const t = class t extends o(e) {
+import { unsafeCSS as r } from "lit";
+import { html as e } from "lit/static-html.js";
+import { DdsElement as o } from "../../internal/dds-hu-element.js";
+import { SizedMixin as a } from "../../internal/mixin/sizedMixin.js";
+import c from "./_styles/card-actions.scss.js";
+const t = class t extends a(o) {
   constructor() {
     super(), this.spacing = "bottom", this.parentSized = "true";
   }
   render() {
-    return r`
+    return e`
       <div
         part="base"
         class=${i(
@@ -25,7 +22,7 @@ const t = class t extends o(e) {
     `;
   }
 };
-t.tagName = "dap-ds-card-actions", t.styles = m(a);
+t.tagName = "dap-ds-card-actions", t.styles = r(c);
 let s = t;
 export {
   s as default

package/dist/components/card/card-actions.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-actions.component.js","sources":["../../../src/components/card/card-actions.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-actions.scss?inline'\n\n/**\n * `dap-ds-card-actions`\n * @summary A card actions is a container for actions in a card.\n * @element dap-ds-card-actions\n * @title - Card actions\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card actions. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card actions.\n *\n * @csspart base - The main card actions container.\n *\n * @cssproperty --dds-card-actions-gap - The gap between items in the card actions. (default: var(--dds-spacing-200))\n * @cssproperty --dds-card-actions-padding-lg - The padding for large size card actions. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-actions-padding-md - The padding for medium size card actions. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-padding-sm - The padding for small size card actions. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-margin-lg - The margin for large size card actions spacing. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-actions-margin-md - The margin for medium size card actions spacing. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-margin-sm - The margin for small size card actions spacing. (default: var(--dds-spacing-400))\n */\nexport default class DapDSCardActions extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-actions'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'bottom'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'card-actions',\n          `card-actions--${this.effectiveSize}`,\n          `card-actions-spacing--${this.spacing}`,\n        )}>\n        <slot> </slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCardActions","SizedMixin","DdsElement","html","clsx","unsafeCSS","styles","DapDSCardActions"],"mappings":";;;;;;;;;AAgCqB,MAAAA,IAAA,MAAAA,UAAyBC,EAAWC,CAAU,EAAE;AAAA,EAKnE,cAAc;AACN,UAAA,GACN,KAAK,UAAU,UACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC;AAAA,MACN;AAAA,MACA,iBAAiB,KAAK,aAAa;AAAA,MACnC,yBAAyB,KAAK,OAAO;AAAA,IAAA,CACtC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AAvBEJ,EAAO,UAAU,uBAEDA,EAAA,SAASK,EAAUC,CAAM;AAHtB,IAAAC,IAAAP;"}
+{"version":3,"file":"card-actions.component.js","sources":["../../../src/components/card/card-actions.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-actions.scss?inline'\n\n/**\n * `dap-ds-card-actions`\n * @summary A card actions is a container for actions in a card.\n * @element dap-ds-card-actions\n * @title - Card actions\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card actions. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card actions. This adds a margin to the card actions. Default is `bottom`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card actions.\n *\n * @csspart base - The main card actions container.\n *\n * @cssproperty --dds-card-actions-gap - The gap between items in the card actions. (default: var(--dds-spacing-200))\n * @cssproperty --dds-card-actions-padding-lg - The padding for large size card actions. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-actions-padding-md - The padding for medium size card actions. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-padding-sm - The padding for small size card actions. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-margin-lg - The margin for large size card actions spacing. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-actions-margin-md - The margin for medium size card actions spacing. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-actions-margin-sm - The margin for small size card actions spacing. (default: var(--dds-spacing-400))\n */\nexport default class DapDSCardActions extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-actions'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'bottom'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${clsx(\n          'card-actions',\n          `card-actions--${this.effectiveSize}`,\n          `card-actions-spacing--${this.spacing}`,\n        )}>\n        <slot> </slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSCardActions","SizedMixin","DdsElement","html","clsx","unsafeCSS","styles","DapDSCardActions"],"mappings":";;;;;;AAgCqB,MAAAA,IAAA,MAAAA,UAAyBC,EAAWC,CAAU,EAAE;AAAA,EAKnE,cAAc;AACN,UAAA,GACN,KAAK,UAAU,UACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAA;AAAA;AAAA,gBAGKC;AAAA,MACN;AAAA,MACA,iBAAiB,KAAK,aAAa;AAAA,MACnC,yBAAyB,KAAK,OAAO;AAAA,IAAA,CACtC;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AAvBEJ,EAAO,UAAU,uBAEDA,EAAA,SAASK,EAAUC,CAAM;AAHtB,IAAAC,IAAAP;"}