wj-elements 0.7.5 → 0.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -49,7 +49,7 @@ function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {
49
49
  totalItems
50
50
  };
51
51
  }
52
- const styles = ":host {\n .native-pagination {\n display: flex;\n align-items: center;\n gap: 1rem;\n\n wje-select {\n width: 68px;\n margin-block: 0;\n wje-option {\n &::part(native) {\n padding-inline: var(--wje-spacing-x-small);\n }\n &[selected]{\n background: var(--wje-option-highlighted);\n }\n }\n wje-option::part(check) {\n display: none;\n }\n }\n\n .info {\n font-size: var(--wje-font-size-small);\n }\n\n .pages {\n display: flex;\n\n .dots {\n display: flex;\n justify-content: center;\n align-items: center;\n margin-inline: 0.25rem;\n width: 32px;\n &::before {\n content: '...';\n }\n }\n wje-button {\n width: 32px;\n margin-inline: 0.25rem;\n &[disabled] {\n cursor: default;\n }\n }\n }\n }\n}\n";
52
+ const styles = ":host {\n --wje-pagination-gap: 1rem;\n --wje-pagination-summary-gap: 1rem;\n --wje-pagination-page-size-gap: var(--wje-spacing-small, 0.5rem);\n --wje-pagination-mobile-gap: var(--wje-spacing-x-large, 2rem);\n --wje-pagination-page-size-width: 68px;\n --wje-pagination-page-button-width: 32px;\n --wje-pagination-page-button-gap: 0.5rem;\n\n display: block;\n container: wje-pagination / inline-size;\n\n .native-pagination {\n display: flex;\n align-items: center;\n gap: var(--wje-pagination-gap);\n\n .summary,\n .page-size {\n display: flex;\n align-items: center;\n }\n\n .summary {\n gap: var(--wje-pagination-summary-gap);\n }\n\n .page-size {\n gap: var(--wje-pagination-page-size-gap);\n }\n\n .page-size-label {\n display: none;\n white-space: nowrap;\n }\n\n wje-select {\n width: var(--wje-pagination-page-size-width);\n margin-block: 0;\n wje-option {\n &::part(native) {\n padding-inline: var(--wje-spacing-x-small);\n }\n &[selected]{\n background: var(--wje-option-highlighted);\n }\n }\n wje-option::part(check) {\n display: none;\n }\n }\n\n .info {\n font-size: var(--wje-font-size-small);\n }\n\n .pages {\n display: flex;\n align-items: center;\n gap: var(--wje-pagination-page-button-gap);\n\n .dots {\n display: flex;\n justify-content: center;\n align-items: center;\n width: var(--wje-pagination-page-button-width);\n &::before {\n content: '...';\n }\n }\n wje-button {\n width: var(--wje-pagination-page-button-width);\n &[disabled] {\n cursor: default;\n }\n }\n }\n }\n}\n\n@container wje-pagination (max-width: 768px) {\n :host {\n .native-pagination {\n width: 100%;\n flex-direction: column;\n justify-content: center;\n gap: var(--wje-pagination-mobile-gap);\n\n .summary {\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .page-size-label {\n display: inline;\n }\n\n .pages {\n width: 100%;\n max-width: 100%;\n justify-content: safe center;\n overflow-x: auto;\n }\n }\n }\n}\n";
53
53
  class Pagination extends WJElement {
54
54
  /**
55
55
  * Creates an instance of Pagination.
@@ -315,10 +315,22 @@ class Pagination extends WJElement {
315
315
  htmlPagination() {
316
316
  var _a, _b, _c, _d;
317
317
  let fragment = document.createDocumentFragment();
318
+ let summary = document.createElement("div");
319
+ summary.setAttribute("part", "summary");
320
+ summary.classList.add("summary");
321
+ let pageSize = document.createElement("div");
322
+ pageSize.setAttribute("part", "page-size");
323
+ pageSize.classList.add("page-size");
324
+ let pageSizeLabel = document.createElement("span");
325
+ pageSizeLabel.setAttribute("part", "page-size-label");
326
+ pageSizeLabel.classList.add("page-size-label");
327
+ pageSizeLabel.textContent = this.localizer.translate("wj.pagination.itemsPerPage");
318
328
  let select = document.createElement("wje-select");
329
+ select.setAttribute("part", "page-size-select");
319
330
  select.setAttribute("size", "small");
320
331
  select.setAttribute("variant", "standard");
321
332
  select.setAttribute("value", this.pageSize);
333
+ select.setAttribute("aria-label", pageSizeLabel.textContent);
322
334
  select.addEventListener("wje-select:change", (e) => {
323
335
  if (+e.detail.context.value[0] !== this.pageSize) {
324
336
  this.pageSize = +e.detail.context.value[0];
@@ -333,33 +345,40 @@ class Pagination extends WJElement {
333
345
  return option;
334
346
  });
335
347
  let info = document.createElement("div");
348
+ info.setAttribute("part", "info");
336
349
  info.classList.add("info");
337
350
  info.innerHTML = `${((_a = this.paginateObj) == null ? void 0 : _a.startIndex) + 1} - ${((_b = this.paginateObj) == null ? void 0 : _b.endIndex) + 1} ${this.localizer.translate("wj.pagination.of")} ${this.totalItems}`;
338
351
  let pagination = document.createElement("div");
352
+ pagination.setAttribute("part", "pages");
339
353
  pagination.classList.add("pages");
340
354
  const button = document.createElement("wje-button");
355
+ button.setAttribute("part", "page-button");
341
356
  button.setAttribute("fill", "link");
342
357
  if (this.round) button.setAttribute("round", "");
343
358
  let firstButton = button.cloneNode(true);
359
+ firstButton.setAttribute("part", "page-button first-button");
344
360
  firstButton.title = this.localizer.translate("wj.pagination.first");
345
- firstButton.setAttribute("aria-label", firstButton.title);
361
+ firstButton.setAttribute("label", firstButton.title);
346
362
  firstButton.innerHTML = `<wje-icon name="chevron-left-pipe" slot="icon-only"></wje-icon>`;
347
363
  firstButton.addEventListener("click", (e) => this.pageClickAction(e, 0));
348
364
  const prevButton = button.cloneNode(true);
365
+ prevButton.setAttribute("part", "page-button previous-button");
349
366
  prevButton.title = this.localizer.translate("wj.pagination.prev");
350
- prevButton.setAttribute("aria-label", prevButton.title);
367
+ prevButton.setAttribute("label", prevButton.title);
351
368
  prevButton.innerHTML = `<wje-icon name="chevron-left" slot="icon-only"></wje-icon>`;
352
369
  if (this.page === 0) prevButton.disabled = true;
353
370
  prevButton.addEventListener("click", (e) => this.pageClickAction(e, this.page - 1));
354
371
  const nextButton = button.cloneNode(true);
372
+ nextButton.setAttribute("part", "page-button next-button");
355
373
  nextButton.title = this.localizer.translate("wj.pagination.next");
356
- nextButton.setAttribute("aria-label", nextButton.title);
374
+ nextButton.setAttribute("label", nextButton.title);
357
375
  nextButton.innerHTML = `<wje-icon name="chevron-right" slot="icon-only"></wje-icon>`;
358
376
  if (this.page + 1 >= ((_c = this.paginateObj) == null ? void 0 : _c.totalPages)) nextButton.disabled = true;
359
377
  nextButton.addEventListener("click", (e) => this.pageClickAction(e, this.page + 1));
360
378
  let lastButton = button.cloneNode(true);
379
+ lastButton.setAttribute("part", "page-button last-button");
361
380
  lastButton.title = this.localizer.translate("wj.pagination.last");
362
- lastButton.setAttribute("aria-label", lastButton.title);
381
+ lastButton.setAttribute("label", lastButton.title);
363
382
  lastButton.innerHTML = `<wje-icon name="chevron-right-pipe" slot="icon-only"></wje-icon>`;
364
383
  lastButton.disabled = ((_d = this.paginateObj) == null ? void 0 : _d.endIndex) + 1 >= this.totalItems;
365
384
  lastButton.addEventListener(
@@ -375,8 +394,12 @@ class Pagination extends WJElement {
375
394
  pagination.appendChild(this.htmlStackButtons(this.paginateObj));
376
395
  pagination.appendChild(nextButton);
377
396
  if (this.showLastButton) pagination.appendChild(lastButton);
378
- if (this.showPageSizeOptions) fragment.append(select);
379
- if (this.showInfo) fragment.appendChild(info);
397
+ if (this.showPageSizeOptions) {
398
+ pageSize.append(pageSizeLabel, select);
399
+ summary.append(pageSize);
400
+ }
401
+ if (this.showInfo) summary.append(info);
402
+ if (summary.childElementCount) fragment.append(summary);
380
403
  fragment.appendChild(pagination);
381
404
  return fragment;
382
405
  }
@@ -392,9 +415,11 @@ class Pagination extends WJElement {
392
415
  htmlStackButtons(paginateObj) {
393
416
  let fragment = document.createDocumentFragment();
394
417
  const button = document.createElement("wje-button");
418
+ button.setAttribute("part", "page-button page-number");
395
419
  button.setAttribute("fill", "link");
396
420
  if (this.round) button.setAttribute("round", "");
397
421
  let dots = document.createElement("span");
422
+ dots.setAttribute("part", "dots");
398
423
  dots.classList.add("dots");
399
424
  dots.setAttribute("aria-hidden", "true");
400
425
  const first = button.cloneNode(true);
@@ -413,6 +438,7 @@ class Pagination extends WJElement {
413
438
  if (page - 1 === this.page) {
414
439
  newButton.removeAttribute("fill");
415
440
  newButton.setAttribute("aria-current", "page");
441
+ newButton.setAttribute("part", "page-button page-number current-page");
416
442
  } else {
417
443
  newButton.addEventListener("click", (e) => this.pageClickAction(e, page - 1));
418
444
  }
@@ -1 +1 @@
1
- {"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n // Calculate total pages\n const totalPages = Math.ceil(totalItems / pageSize);\n\n // Ensure current page is within valid range\n if (currentPage < 1) {\n currentPage = 1;\n } else if (currentPage > totalPages) {\n currentPage = totalPages;\n }\n\n let startPage;\n let endPage;\n\n const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n const boundary = pagesNearEnd + 3;\n\n if (totalPages > boundary) {\n if (currentPage < pagesNearEnd) {\n // If in the first 4 pages, show up to 5 pages\n startPage = 1;\n endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n } else if (currentPage >= totalPages - pagesNearEnd) {\n // If within 4 pages from the end, show last 5 pages\n startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n endPage = totalPages;\n } else {\n const halfPages = Math.floor(maxPages / 2);\n // Otherwise, only show 3 pages (current, previous, next)\n startPage = currentPage - halfPages + 1;\n endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n }\n } else {\n startPage = 1;\n endPage = totalPages;\n }\n\n // Calculate start and end item indexes\n const startIndex = (currentPage - 1) * pageSize;\n const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n // Create an array of pages to display\n const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n // Return object with all pager properties (preserving original format)\n return {\n boundary: boundary,\n currentPage: currentPage,\n endIndex: endIndex,\n endPage: endPage,\n totalPages: totalPages,\n pages: pages,\n pageSize: pageSize,\n startIndex: startIndex,\n startPage: startPage,\n totalItems: totalItems,\n };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n */\nexport default class Pagination extends WJElement {\n /**\n * Creates an instance of Pagination.\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n\n this._paginateObj = null;\n }\n\n /**\n * Sets the value of the 'page' attribute for the object.\n * @param {string} value The value to set for the 'page' attribute.\n */\n set page(value) {\n this.setAttribute('page', value);\n }\n\n /**\n * Retrieves the current page number as a numeric value.\n * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n */\n get page() {\n return +this.getAttribute('page') || 0;\n }\n\n /**\n * Sets the maximum number of pages.\n * Updates the 'max-pages' attribute with the provided value.\n * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n */\n set maxPages(value) {\n this.setAttribute('max-pages', value);\n }\n\n /**\n * Gets the maximum number of pages.\n * This getter retrieves the value of the \"max-pages\" attribute from the element.\n * If the attribute is not set or is invalid, it defaults to 3.\n * @returns {number} The maximum number of pages as a numeric value.\n */\n get maxPages() {\n return +this.getAttribute('max-pages') || 10;\n }\n\n /**\n * Sets the `pageSize` attribute to the specified value.\n * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n */\n set pageSize(value) {\n this.setAttribute('page-size', value);\n }\n\n /**\n * Retrieves the value of the 'page-size' attribute and converts it to a number.\n * If the attribute is not set or is invalid, returns the default value of 3.\n * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n */\n get pageSize() {\n return +this.getAttribute('page-size') || 3;\n }\n\n /**\n * Sets the total number of items.\n * @param {number} value The new total number of items to set.\n */\n set totalItems(value) {\n this.setAttribute('total-items', value);\n }\n\n /**\n * Retrieves the total number of items represented by the 'total-items' attribute.\n * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n */\n get totalItems() {\n return +this.getAttribute('total-items') || 0;\n }\n\n /**\n * Sets the visibility of the first button based on the provided value.\n * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n */\n set showFirstButton(value) {\n this.removeAttribute('show-first-button');\n\n if (value) {\n this.setAttribute('show-first-button', '');\n }\n }\n\n /**\n * Determines whether the 'show-first-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n */\n get showFirstButton() {\n return this.hasAttribute('show-first-button');\n }\n\n /**\n * Sets the visibility of the \"last\" button. This method controls the presence\n * or absence of the \"show-last-button\" attribute based on the provided value.\n * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n * If true, the \"show-last-button\" attribute is added;\n * if false, the attribute is removed.\n */\n set showLastButton(value) {\n this.removeAttribute('show-last-button');\n\n if (value) {\n this.setAttribute('show-last-button', '');\n }\n }\n\n /**\n * Determines if the 'show-last-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n */\n get showLastButton() {\n return this.hasAttribute('show-last-button');\n }\n\n /**\n * Sets the pagination object by calculating the pagination details\n * based on the total items, current page, page size, and maximum pages.\n * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n */\n set paginateObj(value) {\n this._paginateObj = value;\n }\n\n /**\n * Retrieves the pagination object used for managing paginated data.\n * @returns {object} The pagination object containing details and functionality for paginating data.\n */\n get paginateObj() {\n return this._paginateObj;\n }\n\n /**\n * Sets the 'round' attribute on the element. If the provided value is truthy,\n * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n */\n set round(value) {\n this.removeAttribute('round');\n\n if (value) {\n this.setAttribute('round', '');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute for the current element.\n * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Sets the `show-info` attribute on the element based on the provided value.\n * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n */\n set showInfo(value) {\n this.removeAttribute('show-info');\n\n if (value) {\n this.setAttribute('show-info', '');\n }\n }\n\n /**\n * Retrieves the value of the 'show-info' attribute.\n * Checks if the 'show-info' attribute is present on the element.\n * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n */\n get showInfo() {\n return this.hasAttribute('show-info');\n }\n\n set showPageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('show-page-size-options', value);\n }\n\n get showPageSizeOptions() {\n return this.hasAttribute('show-page-size-options');\n }\n\n set pageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('page-size-options', value);\n }\n\n /**\n * Retrieves the list of available page size options.\n * This method is used to fetch the values representing the different page size options\n * that can be provided or configured in a paginated component or system.\n * @returns {Array<number>} An array of numbers representing the selectable page size options.\n */\n get pageSizeOptions() {\n let options = this.getAttribute('page-size-options');\n if (!options) return [6, 10, 50, 100, 500];\n return options.split(',').map((o) => +o).filter((o) => !isNaN(o));\n }\n\n set hideEmpty(value) {\n if (!value) return;\n this.setAttribute('hide-empty', value);\n }\n\n get hideEmpty() {\n return this.hasAttribute('hide-empty');\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n 'wje-button': Button,\n };\n\n className = 'Pagination';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observedAttributes attribute of the input element.\n * @returns {Array} The attributes to observe for changes.\n */\n static get observedAttributes() {\n return ['page', 'total-items', 'page-size'];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'navigation',\n });\n }\n\n async beforeDraw() {\n this.classList.remove('empty');\n this.removeAttribute(\"hidden\");\n\n if (!this.totalItems || this.totalItems === 0) {\n this.classList.add('empty');\n if (this.hideEmpty)\n this.setAttribute(\"hidden\", \"\");\n\n return;\n }\n\n this.paginateObj = await paginate(this.totalItems, this.page + 1, this.pageSize, this.maxPages) || {};\n }\n\n /**\n * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n * @returns {DocumentFragment} A document fragment containing a slot element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-pagination');\n\n native.append(this.htmlPagination());\n\n fragment.append(native);\n\n return fragment;\n }\n\n /**\n * Creates a pagination control for navigating between pages of content.\n * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n * @returns {DocumentFragment} A document fragment containing the pagination controls.\n */\n htmlPagination() {\n let fragment = document.createDocumentFragment();\n\n let select = document.createElement('wje-select');\n select.setAttribute('size', 'small');\n select.setAttribute('variant', 'standard');\n select.setAttribute('value', this.pageSize);\n select.addEventListener('wje-select:change', (e) => {\n\n if(+e.detail.context.value[0] !== this.pageSize) {\n this.pageSize = +e.detail.context.value[0];\n this.page = 0; // Reset to first page when page size changes\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n }\n });\n\n let options = this.pageSizeOptions.map((o) => {\n let option = document.createElement('wje-option');\n option.value = o;\n option.textContent = o;\n return option;\n });\n\n let info = document.createElement('div');\n info.classList.add('info');\n info.innerHTML = `${this.paginateObj?.startIndex + 1} - ${this.paginateObj?.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n let pagination = document.createElement('div');\n pagination.classList.add('pages');\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n // First button\n let firstButton = button.cloneNode(true);\n firstButton.title = this.localizer.translate('wj.pagination.first');\n firstButton.setAttribute('aria-label', firstButton.title);\n firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n firstButton.addEventListener('click', (e) => this.pageClickAction(e, 0));\n\n // Previous button\n const prevButton = button.cloneNode(true);\n prevButton.title = this.localizer.translate('wj.pagination.prev');\n prevButton.setAttribute('aria-label', prevButton.title);\n prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n if (this.page === 0) prevButton.disabled = true;\n prevButton.addEventListener('click', (e) => this.pageClickAction(e, this.page - 1));\n\n // Next button\n const nextButton = button.cloneNode(true);\n nextButton.title = this.localizer.translate('wj.pagination.next');\n nextButton.setAttribute('aria-label', nextButton.title);\n nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n if (this.page + 1 >= this.paginateObj?.totalPages) nextButton.disabled = true;\n nextButton.addEventListener('click', (e) => this.pageClickAction(e, this.page + 1));\n\n // Last button\n let lastButton = button.cloneNode(true);\n lastButton.title = this.localizer.translate('wj.pagination.last');\n lastButton.setAttribute('aria-label', lastButton.title);\n lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n lastButton.disabled = this.paginateObj?.endIndex + 1 >= this.totalItems;\n lastButton.addEventListener('click', (e) =>\n this.pageClickAction(e, this.paginateObj?.totalPages - 1)\n );\n\n select.append(...options);\n\n if (this.showFirstButton) pagination.appendChild(firstButton);\n pagination.appendChild(prevButton);\n pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n pagination.appendChild(nextButton);\n if (this.showLastButton) pagination.appendChild(lastButton);\n\n if (this.showPageSizeOptions) fragment.append(select);\n if (this.showInfo) fragment.appendChild(info);\n fragment.appendChild(pagination);\n\n return fragment;\n }\n\n /**\n * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n * based on the provided pagination object.\n * @param {object} paginateObj An object containing pagination details.\n * @param {number} paginateObj.currentPage The current active page index (1-based).\n * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n */\n htmlStackButtons(paginateObj) {\n let fragment = document.createDocumentFragment();\n\n const button = document.createElement('wje-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n let dots = document.createElement('span');\n dots.classList.add('dots');\n dots.setAttribute('aria-hidden', 'true');\n\n const first = button.cloneNode(true);\n first.textContent = '1';\n first.addEventListener('click', (e) => this.pageClickAction(e, 0));\n\n const last = button.cloneNode(true);\n last.textContent = paginateObj?.totalPages;\n last.addEventListener('click', (e) => this.pageClickAction(e, paginateObj?.totalPages - 1));\n\n if (paginateObj?.currentPage >= this.maxPages + 1 && paginateObj?.boundary < paginateObj?.totalPages) {\n fragment.appendChild(first);\n fragment.appendChild(dots);\n }\n\n paginateObj?.pages.forEach((page) => {\n let newButton = button.cloneNode(true);\n newButton.textContent = page;\n\n if (page - 1 === this.page) {\n newButton.removeAttribute('fill');\n newButton.setAttribute('aria-current', 'page');\n } else {\n newButton.addEventListener('click', (e) => this.pageClickAction(e, page - 1));\n }\n\n fragment.appendChild(newButton);\n });\n\n if (\n (paginateObj?.pages.length === this.maxPages || paginateObj?.currentPage < this.maxPages + 1) &&\n paginateObj.boundary < paginateObj?.totalPages\n ) {\n fragment.appendChild(dots.cloneNode(true));\n fragment.appendChild(last);\n }\n\n return fragment;\n }\n\n /**\n * Handles the click action for pagination and updates the current page.\n * If the clicked page number is the same as the current page, no action is performed.\n * Otherwise, the current page is updated to the new page number, and a custom event\n * 'wje-pagination:page-change' is dispatched with the pagination object.\n * @param {Event} e The event triggered by the page click.\n * @param {number} page The page number that was clicked.\n */\n pageClickAction = (e, page) => {\n if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n this.page = page;\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":["_a"],"mappings":"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"}
1
+ {"version":3,"file":"wje-pagination.js","sources":["../packages/wje-pagination/service/service.js","../packages/wje-pagination/pagination.element.js","../packages/wje-pagination/pagination.js"],"sourcesContent":["/**\n * Paginates items based on the total number of items, current page, page size, and maximum number of pages to display.\n * @param {number} totalItems The total number of items to paginate.\n * @param {number} [currentPage] The current page number (default is 1).\n * @param {number} [pageSize] The number of items per page (default is 10).\n * @param {number} [maxPages] The maximum number of pages to display in the pagination control (default is 5).\n * @returns {object} An object containing pagination details including total items, current page, page size, total pages, start/end page, start/end index, and the pages array.\n */\nexport function paginate(totalItems, currentPage = 1, pageSize = 10, maxPages = 5) {\n // Calculate total pages\n const totalPages = Math.ceil(totalItems / pageSize);\n\n // Ensure current page is within valid range\n if (currentPage < 1) {\n currentPage = 1;\n } else if (currentPage > totalPages) {\n currentPage = totalPages;\n }\n\n let startPage;\n let endPage;\n\n const pagesNearEnd = maxPages + 1; // Define how close to the end we switch back to 5 pages 4\n\n const boundary = pagesNearEnd + 3;\n\n if (totalPages > boundary) {\n if (currentPage < pagesNearEnd) {\n // If in the first 4 pages, show up to 5 pages\n startPage = 1;\n endPage = Math.min(pagesNearEnd + 1, totalPages); //5\n } else if (currentPage >= totalPages - pagesNearEnd) {\n // If within 4 pages from the end, show last 5 pages\n startPage = Math.max(totalPages - pagesNearEnd, 1); //4\n endPage = totalPages;\n } else {\n const halfPages = Math.floor(maxPages / 2);\n // Otherwise, only show 3 pages (current, previous, next)\n startPage = currentPage - halfPages + 1;\n endPage = maxPages % 2 === 1 ? currentPage + halfPages + 1 : currentPage + halfPages - 1;\n }\n } else {\n startPage = 1;\n endPage = totalPages;\n }\n\n // Calculate start and end item indexes\n const startIndex = (currentPage - 1) * pageSize;\n const endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);\n\n // Create an array of pages to display\n const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);\n\n // Return object with all pager properties (preserving original format)\n return {\n boundary: boundary,\n currentPage: currentPage,\n endIndex: endIndex,\n endPage: endPage,\n totalPages: totalPages,\n pages: pages,\n pageSize: pageSize,\n startIndex: startIndex,\n startPage: startPage,\n totalItems: totalItems,\n };\n}\n","import { Localizer } from '../utils/localize.js';\nimport { default as WJElement, event } from '../wje-element/element.js';\nimport { paginate } from './service/service.js';\nimport Icon from '../wje-icon/icon.js';\nimport Button from '../wje-button/button.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary This class represents the Pagination component for navigating through paginated content and dynamically updating navigation elements based on attributes like the number of items, page size, etc. Extends the WJElement class.\n * @documentation https://elements.webjet.sk/components/pagination\n * @status stable\n * @augments WJElement\n * @dependency wje-icon, wje-button\n * @csspart native - The wrapper element for the pagination component.\n * @csspart summary - The wrapper for the page-size selector and item range.\n * @csspart page-size - The wrapper for the page-size label and selector.\n * @csspart page-size-label - The page-size selector label.\n * @csspart page-size-select - The page-size selector.\n * @csspart info - The item range information.\n * @csspart pages - The page navigation wrapper.\n * @csspart page-button - Any pagination button.\n * @csspart page-number - A numbered page button.\n * @csspart current-page - The current page button.\n * @csspart first-button - The button that navigates to the first page.\n * @csspart previous-button - The button that navigates to the previous page.\n * @csspart next-button - The button that navigates to the next page.\n * @csspart last-button - The button that navigates to the last page.\n * @csspart dots - The page range ellipsis.\n * @cssproperty [--wje-pagination-gap=1rem] - Gap between the summary and page navigation.\n * @cssproperty [--wje-pagination-summary-gap=1rem] - Gap between summary items.\n * @cssproperty [--wje-pagination-page-size-gap=var(--wje-spacing-small)] - Gap between the page-size label and selector.\n * @cssproperty [--wje-pagination-mobile-gap=var(--wje-spacing-x-large)] - Gap between pagination rows below the md container width.\n * @cssproperty [--wje-pagination-page-size-width=68px] - Width of the page-size selector.\n * @cssproperty [--wje-pagination-page-button-width=32px] - Width of pagination buttons.\n * @cssproperty [--wje-pagination-page-button-gap=0.5rem] - Gap between pagination buttons.\n */\nexport default class Pagination extends WJElement {\n /**\n * Creates an instance of Pagination.\n */\n constructor() {\n super();\n this.localizer = new Localizer(this);\n\n this._paginateObj = null;\n }\n\n /**\n * Sets the value of the 'page' attribute for the object.\n * @param {string} value The value to set for the 'page' attribute.\n */\n set page(value) {\n this.setAttribute('page', value);\n }\n\n /**\n * Retrieves the current page number as a numeric value.\n * @returns {number} The current page number. Returns 0 if the attribute 'page' is not set or is not a numeric value.\n */\n get page() {\n return +this.getAttribute('page') || 0;\n }\n\n /**\n * Sets the maximum number of pages.\n * Updates the 'max-pages' attribute with the provided value.\n * @param {number|string} value The maximum number of pages to set. Can be a number or a parsable string representing a number.\n */\n set maxPages(value) {\n this.setAttribute('max-pages', value);\n }\n\n /**\n * Gets the maximum number of pages.\n * This getter retrieves the value of the \"max-pages\" attribute from the element.\n * If the attribute is not set or is invalid, it defaults to 3.\n * @returns {number} The maximum number of pages as a numeric value.\n */\n get maxPages() {\n return +this.getAttribute('max-pages') || 10;\n }\n\n /**\n * Sets the `pageSize` attribute to the specified value.\n * @param {number|string} value The desired page size value. This can be a number or a string representation of the size.\n */\n set pageSize(value) {\n this.setAttribute('page-size', value);\n }\n\n /**\n * Retrieves the value of the 'page-size' attribute and converts it to a number.\n * If the attribute is not set or is invalid, returns the default value of 3.\n * @returns {number} The numeric value of the 'page-size' attribute or the default value of 3.\n */\n get pageSize() {\n return +this.getAttribute('page-size') || 3;\n }\n\n /**\n * Sets the total number of items.\n * @param {number} value The new total number of items to set.\n */\n set totalItems(value) {\n this.setAttribute('total-items', value);\n }\n\n /**\n * Retrieves the total number of items represented by the 'total-items' attribute.\n * @returns {number} The total number of items. Defaults to 0 if the attribute is not set or is invalid.\n */\n get totalItems() {\n return +this.getAttribute('total-items') || 0;\n }\n\n /**\n * Sets the visibility of the first button based on the provided value.\n * Adds the 'show-first-button' attribute when the value is truthy, and removes it otherwise.\n * @param {boolean} value Determines whether to show the first button. If true, the 'show-first-button' attribute is added; if false, it is removed.\n */\n set showFirstButton(value) {\n this.removeAttribute('show-first-button');\n\n if (value) {\n this.setAttribute('show-first-button', '');\n }\n }\n\n /**\n * Determines whether the 'show-first-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-first-button' attribute is set; otherwise, false.\n */\n get showFirstButton() {\n return this.hasAttribute('show-first-button');\n }\n\n /**\n * Sets the visibility of the \"last\" button. This method controls the presence\n * or absence of the \"show-last-button\" attribute based on the provided value.\n * @param {boolean} value A boolean value indicating whether to show the \"last\" button.\n * If true, the \"show-last-button\" attribute is added;\n * if false, the attribute is removed.\n */\n set showLastButton(value) {\n this.removeAttribute('show-last-button');\n\n if (value) {\n this.setAttribute('show-last-button', '');\n }\n }\n\n /**\n * Determines if the 'show-last-button' attribute is present on the element.\n * @returns {boolean} True if the 'show-last-button' attribute is present, otherwise false.\n */\n get showLastButton() {\n return this.hasAttribute('show-last-button');\n }\n\n /**\n * Sets the pagination object by calculating the pagination details\n * based on the total items, current page, page size, and maximum pages.\n * @param {object} value The value to set the pagination object. The pagination details are computed internally.\n */\n set paginateObj(value) {\n this._paginateObj = value;\n }\n\n /**\n * Retrieves the pagination object used for managing paginated data.\n * @returns {object} The pagination object containing details and functionality for paginating data.\n */\n get paginateObj() {\n return this._paginateObj;\n }\n\n /**\n * Sets the 'round' attribute on the element. If the provided value is truthy,\n * the 'round' attribute is added. If the value is falsy, the attribute is removed.\n * @param {boolean} value A boolean value determining whether to add or remove the 'round' attribute.\n */\n set round(value) {\n this.removeAttribute('round');\n\n if (value) {\n this.setAttribute('round', '');\n }\n }\n\n /**\n * Retrieves the value of the 'round' attribute for the current element.\n * @returns {boolean} A boolean indicating whether the 'round' attribute is present on the element.\n */\n get round() {\n return this.hasAttribute('round');\n }\n\n /**\n * Sets the `show-info` attribute on the element based on the provided value.\n * @param {boolean} value A boolean indicating whether to add or remove the `show-info` attribute.\n */\n set showInfo(value) {\n this.removeAttribute('show-info');\n\n if (value) {\n this.setAttribute('show-info', '');\n }\n }\n\n /**\n * Retrieves the value of the 'show-info' attribute.\n * Checks if the 'show-info' attribute is present on the element.\n * @returns {boolean} True if the 'show-info' attribute is present, otherwise false.\n */\n get showInfo() {\n return this.hasAttribute('show-info');\n }\n\n set showPageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('show-page-size-options', value);\n }\n\n get showPageSizeOptions() {\n return this.hasAttribute('show-page-size-options');\n }\n\n set pageSizeOptions(value) {\n if (!value) return;\n this.setAttribute('page-size-options', value);\n }\n\n /**\n * Retrieves the list of available page size options.\n * This method is used to fetch the values representing the different page size options\n * that can be provided or configured in a paginated component or system.\n * @returns {Array<number>} An array of numbers representing the selectable page size options.\n */\n get pageSizeOptions() {\n let options = this.getAttribute('page-size-options');\n if (!options) return [6, 10, 50, 100, 500];\n return options.split(',').map((o) => +o).filter((o) => !isNaN(o));\n }\n\n set hideEmpty(value) {\n if (!value) return;\n this.setAttribute('hide-empty', value);\n }\n\n get hideEmpty() {\n return this.hasAttribute('hide-empty');\n }\n\n /**\n * Dependencies of the Button element.\n * @type {object}\n */\n dependencies = {\n 'wje-icon': Icon,\n 'wje-button': Button,\n };\n\n className = 'Pagination';\n\n /**\n * Returns the CSS styles for the component.\n * @static\n * @returns {CSSStyleSheet}\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Getter for the observedAttributes attribute of the input element.\n * @returns {Array} The attributes to observe for changes.\n */\n static get observedAttributes() {\n return ['page', 'total-items', 'page-size'];\n }\n\n /**\n * Sets up the attributes for the component.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'navigation',\n });\n }\n\n async beforeDraw() {\n this.classList.remove('empty');\n this.removeAttribute(\"hidden\");\n\n if (!this.totalItems || this.totalItems === 0) {\n this.classList.add('empty');\n if (this.hideEmpty)\n this.setAttribute(\"hidden\", \"\");\n\n return;\n }\n\n this.paginateObj = await paginate(this.totalItems, this.page + 1, this.pageSize, this.maxPages) || {};\n }\n\n /**\n * Creates a document fragment, appends a new slot element to it, and returns the fragment.\n * @returns {DocumentFragment} A document fragment containing a slot element.\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-pagination');\n\n native.append(this.htmlPagination());\n\n fragment.append(native);\n\n return fragment;\n }\n\n /**\n * Creates a pagination control for navigating between pages of content.\n * This method generates and returns a document fragment containing pagination controls, including buttons for navigating to the first, previous, next, and last pages, as well as optional informational text about the current set of displayed items and total number of items.\n * @returns {DocumentFragment} A document fragment containing the pagination controls.\n */\n htmlPagination() {\n let fragment = document.createDocumentFragment();\n\n let summary = document.createElement('div');\n summary.setAttribute('part', 'summary');\n summary.classList.add('summary');\n\n let pageSize = document.createElement('div');\n pageSize.setAttribute('part', 'page-size');\n pageSize.classList.add('page-size');\n\n let pageSizeLabel = document.createElement('span');\n pageSizeLabel.setAttribute('part', 'page-size-label');\n pageSizeLabel.classList.add('page-size-label');\n pageSizeLabel.textContent = this.localizer.translate('wj.pagination.itemsPerPage');\n\n let select = document.createElement('wje-select');\n select.setAttribute('part', 'page-size-select');\n select.setAttribute('size', 'small');\n select.setAttribute('variant', 'standard');\n select.setAttribute('value', this.pageSize);\n select.setAttribute('aria-label', pageSizeLabel.textContent);\n select.addEventListener('wje-select:change', (e) => {\n\n if(+e.detail.context.value[0] !== this.pageSize) {\n this.pageSize = +e.detail.context.value[0];\n this.page = 0; // Reset to first page when page size changes\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n }\n });\n\n let options = this.pageSizeOptions.map((o) => {\n let option = document.createElement('wje-option');\n option.value = o;\n option.textContent = o;\n return option;\n });\n\n let info = document.createElement('div');\n info.setAttribute('part', 'info');\n info.classList.add('info');\n info.innerHTML = `${this.paginateObj?.startIndex + 1} - ${this.paginateObj?.endIndex + 1} ${this.localizer.translate('wj.pagination.of')} ${this.totalItems}`;\n\n let pagination = document.createElement('div');\n pagination.setAttribute('part', 'pages');\n pagination.classList.add('pages');\n\n const button = document.createElement('wje-button');\n button.setAttribute('part', 'page-button');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n // First button\n let firstButton = button.cloneNode(true);\n firstButton.setAttribute('part', 'page-button first-button');\n firstButton.title = this.localizer.translate('wj.pagination.first');\n firstButton.setAttribute('label', firstButton.title);\n firstButton.innerHTML = `<wje-icon name=\"chevron-left-pipe\" slot=\"icon-only\"></wje-icon>`;\n firstButton.addEventListener('click', (e) => this.pageClickAction(e, 0));\n\n // Previous button\n const prevButton = button.cloneNode(true);\n prevButton.setAttribute('part', 'page-button previous-button');\n prevButton.title = this.localizer.translate('wj.pagination.prev');\n prevButton.setAttribute('label', prevButton.title);\n prevButton.innerHTML = `<wje-icon name=\"chevron-left\" slot=\"icon-only\"></wje-icon>`;\n if (this.page === 0) prevButton.disabled = true;\n prevButton.addEventListener('click', (e) => this.pageClickAction(e, this.page - 1));\n\n // Next button\n const nextButton = button.cloneNode(true);\n nextButton.setAttribute('part', 'page-button next-button');\n nextButton.title = this.localizer.translate('wj.pagination.next');\n nextButton.setAttribute('label', nextButton.title);\n nextButton.innerHTML = `<wje-icon name=\"chevron-right\" slot=\"icon-only\"></wje-icon>`;\n if (this.page + 1 >= this.paginateObj?.totalPages) nextButton.disabled = true;\n nextButton.addEventListener('click', (e) => this.pageClickAction(e, this.page + 1));\n\n // Last button\n let lastButton = button.cloneNode(true);\n lastButton.setAttribute('part', 'page-button last-button');\n lastButton.title = this.localizer.translate('wj.pagination.last');\n lastButton.setAttribute('label', lastButton.title);\n lastButton.innerHTML = `<wje-icon name=\"chevron-right-pipe\" slot=\"icon-only\"></wje-icon>`;\n lastButton.disabled = this.paginateObj?.endIndex + 1 >= this.totalItems;\n lastButton.addEventListener('click', (e) =>\n this.pageClickAction(e, this.paginateObj?.totalPages - 1)\n );\n\n select.append(...options);\n\n if (this.showFirstButton) pagination.appendChild(firstButton);\n pagination.appendChild(prevButton);\n pagination.appendChild(this.htmlStackButtons(this.paginateObj));\n pagination.appendChild(nextButton);\n if (this.showLastButton) pagination.appendChild(lastButton);\n\n if (this.showPageSizeOptions) {\n pageSize.append(pageSizeLabel, select);\n summary.append(pageSize);\n }\n if (this.showInfo) summary.append(info);\n if (summary.childElementCount) fragment.append(summary);\n fragment.appendChild(pagination);\n\n return fragment;\n }\n\n /**\n * Creates and returns a DocumentFragment containing a series of buttons for pagination purposes,\n * based on the provided pagination object.\n * @param {object} paginateObj An object containing pagination details.\n * @param {number} paginateObj.currentPage The current active page index (1-based).\n * @param {Array<number>} paginateObj.pages An array of page numbers to display in the pagination.\n * @param {number} paginateObj.totalPages Total number of pages available for pagination.\n * @returns {DocumentFragment} A DocumentFragment containing the buttons and additional pagination elements.\n */\n htmlStackButtons(paginateObj) {\n let fragment = document.createDocumentFragment();\n\n const button = document.createElement('wje-button');\n button.setAttribute('part', 'page-button page-number');\n button.setAttribute('fill', 'link');\n if (this.round) button.setAttribute('round', '');\n\n let dots = document.createElement('span');\n dots.setAttribute('part', 'dots');\n dots.classList.add('dots');\n dots.setAttribute('aria-hidden', 'true');\n\n const first = button.cloneNode(true);\n first.textContent = '1';\n first.addEventListener('click', (e) => this.pageClickAction(e, 0));\n\n const last = button.cloneNode(true);\n last.textContent = paginateObj?.totalPages;\n last.addEventListener('click', (e) => this.pageClickAction(e, paginateObj?.totalPages - 1));\n\n if (paginateObj?.currentPage >= this.maxPages + 1 && paginateObj?.boundary < paginateObj?.totalPages) {\n fragment.appendChild(first);\n fragment.appendChild(dots);\n }\n\n paginateObj?.pages.forEach((page) => {\n let newButton = button.cloneNode(true);\n newButton.textContent = page;\n\n if (page - 1 === this.page) {\n newButton.removeAttribute('fill');\n newButton.setAttribute('aria-current', 'page');\n newButton.setAttribute('part', 'page-button page-number current-page');\n } else {\n newButton.addEventListener('click', (e) => this.pageClickAction(e, page - 1));\n }\n\n fragment.appendChild(newButton);\n });\n\n if (\n (paginateObj?.pages.length === this.maxPages || paginateObj?.currentPage < this.maxPages + 1) &&\n paginateObj.boundary < paginateObj?.totalPages\n ) {\n fragment.appendChild(dots.cloneNode(true));\n fragment.appendChild(last);\n }\n\n return fragment;\n }\n\n /**\n * Handles the click action for pagination and updates the current page.\n * If the clicked page number is the same as the current page, no action is performed.\n * Otherwise, the current page is updated to the new page number, and a custom event\n * 'wje-pagination:page-change' is dispatched with the pagination object.\n * @param {Event} e The event triggered by the page click.\n * @param {number} page The page number that was clicked.\n */\n pageClickAction = (e, page) => {\n if (+page === this.page || this.page > this.paginateObj.totalPages) return;\n this.page = page;\n event.dispatchCustomEvent(this, 'wje-pagination:page-change', { page: this.page, pageSize: this.pageSize });\n };\n}\n\nPagination.define('wje-pagination', Pagination);\n","import Pagination from './pagination.element.js';\n\nexport default Pagination;\n\nPagination.define('wje-pagination', Pagination);\n"],"names":["_a"],"mappings":"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"}
package/dist/wje-toast.js CHANGED
@@ -585,7 +585,7 @@ class Toast extends WJElement {
585
585
  closeBtn.setAttribute("color", this.color);
586
586
  closeBtn.setAttribute("size", "small");
587
587
  closeBtn.classList.add("close");
588
- closeBtn.setAttribute("aria-label", "Close");
588
+ closeBtn.setAttribute("label", "Close");
589
589
  let countdownEl = document.createElement("div");
590
590
  countdownEl.classList.add("countdown");
591
591
  let countdownBar = document.createElement("div");
@@ -1 +1 @@
1
- {"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst DEFAULT_STACK_POSITION = 'top-end';\nconst DEFAULT_STACK_DEPTH = 3;\nconst VALID_STACK_POSITIONS = new Set([\n 'top-start',\n 'top-center',\n 'top-end',\n 'bottom-start',\n 'bottom-center',\n 'bottom-end',\n]);\nconst STACKED_SCALE_STEP = 0.04;\nconst STACKED_MIN_SCALE = 0.88;\nconst STACKED_MIN_OPACITY = 0.72;\nconst STACKED_VISIBLE_SLICE = 16;\nconst STACKED_EXPANDED_MARGIN = '0.5rem';\nconst STACKED_PADDING = '1rem';\nconst STACKED_ENTER_OFFSET = 24;\n\nconst toggleStackExpanded = (stack, expanded) => {\n if (expanded) {\n stack.dataset.expanded = 'true';\n return;\n }\n\n delete stack.dataset.expanded;\n};\n\nconst syncExpandedStackToasts = (stack, expanded) => {\n Array.from(stack.children)\n .filter((child) => child.tagName === 'WJE-TOAST')\n .forEach((toast) => {\n if (expanded) {\n toast.pause?.();\n return;\n }\n\n toast.resume?.();\n });\n};\n\nconst setStackExpandedState = (stack, expanded) => {\n let shouldExpand = stack.dataset.stacked === 'true' && expanded;\n let isExpanded = stack.dataset.expanded === 'true';\n\n if (shouldExpand === isExpanded) {\n return;\n }\n\n toggleStackExpanded(stack, shouldExpand);\n syncExpandedStackToasts(stack, shouldExpand);\n stack.updateToastLayout?.();\n};\n\nconst syncStackExpandedState = (stack) => {\n setStackExpandedState(stack, stack.matches(':hover') || stack.matches(':focus-within'));\n};\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.\n * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.\n * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.\n * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.\n * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.\n * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n\n this.toastStack = this.createToastStack();\n }\n\n /**\n * Set headline value of the toast.\n * @param value\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Get headline value of the toast.\n * @returns {string}\n */\n get headline() {\n return this.getAttribute('headline');\n }\n\n /**\n * Set open value of the toast.\n * @param value\n */\n set open(value) {\n this.removeAttribute('open');\n\n if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n }\n\n /**\n * Get open value of the toast.\n * @returns {boolean}\n */\n get open() {\n return this.hasAttribute('open');\n }\n\n /**\n * Set duration value of the toast.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Get duration value of the toast.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration');\n }\n\n /**\n * Set closable value of the toast.\n * @param value\n */\n set closable(value) {\n this.setAttribute('closable', value || '');\n }\n\n /**\n * Get closable value of the toast.\n * @returns {boolean}\n */\n get closable() {\n return this.hasAttribute('closable');\n }\n\n /**\n * Set color value of the toast.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /**\n * Get color value of the toast.\n * @returns {string}\n */\n get color() {\n return this.getAttribute('color');\n }\n\n /**\n * Set countdown value of the toast.\n * @param value\n */\n set countdown(value) {\n if (value) this.setAttribute('countdown', value);\n }\n\n /**\n * Get countdown value of the toast.\n * @returns {boolean}\n */\n get countdown() {\n return this.hasAttribute('countdown');\n }\n\n /**\n * Set stacked value of the toast.\n * @param value\n */\n set stacked(value) {\n this.toggleAttribute('stacked', WjElementUtils.stringToBoolean(value));\n }\n\n /**\n * Get stacked value of the toast.\n * @returns {boolean}\n */\n get stacked() {\n return this.hasAttribute('stacked');\n }\n\n /**\n * Set stack depth of the toast.\n * @param value\n */\n set stackDepth(value) {\n if (value === null || value === undefined || value === '') {\n this.removeAttribute('stack-depth');\n return;\n }\n\n this.setAttribute('stack-depth', value);\n }\n\n /**\n * Get stack depth of the toast.\n * @returns {number}\n */\n get stackDepth() {\n let value = Number.parseInt(this.getAttribute('stack-depth'), 10);\n\n if (Number.isFinite(value) && value > 0) {\n return value;\n }\n\n return DEFAULT_STACK_DEPTH;\n }\n\n /**\n * Set stack position of the toast.\n * @param value\n */\n set stackPosition(value) {\n if (!value) {\n this.removeAttribute('stack-position');\n return;\n }\n\n this.setAttribute('stack-position', value);\n }\n\n /**\n * Get stack position of the toast.\n * @returns {string}\n */\n get stackPosition() {\n let value = this.getAttribute('stack-position');\n\n if (VALID_STACK_POSITIONS.has(value)) {\n return value;\n }\n\n if (this.getAttribute('position') === 'bottom') {\n return 'bottom-end';\n }\n\n return DEFAULT_STACK_POSITION;\n }\n\n /**\n * Set icon value of the toast.\n * @param value\n */\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /**\n * Get icon value of the toast.\n * @returns {string}\n */\n get icon() {\n return this.getAttribute('icon');\n }\n\n /**\n * Creates a toast stack container.\n * @returns {HTMLDivElement}\n */\n createToastStack() {\n let stack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n\n stack.addEventListener('mouseenter', () => setStackExpandedState(stack, true));\n stack.addEventListener('mouseleave', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n stack.addEventListener('focusin', () => setStackExpandedState(stack, true));\n stack.addEventListener('focusout', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n\n this.syncToastStack(stack);\n\n return stack;\n }\n\n /**\n * Returns the key of the toast stack.\n * @returns {string}\n */\n getToastStackKey() {\n return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : 'default'}`;\n }\n\n /**\n * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n * @param {HTMLDivElement} stack\n */\n applyToastStackPlacement(stack = this.toastStack) {\n const positions = {\n 'top-start': {\n top: '0',\n bottom: 'auto',\n left: '0',\n right: 'auto',\n transform: 'none',\n margin: '0.5rem',\n },\n 'top-center': {\n top: '0',\n bottom: 'auto',\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)',\n margin: '0.5rem 0 0',\n },\n 'top-end': {\n top: '0',\n bottom: 'auto',\n left: 'auto',\n right: '0',\n transform: 'none',\n margin: '0.5rem',\n },\n 'bottom-start': {\n top: 'auto',\n bottom: '0',\n left: '0',\n right: 'auto',\n transform: 'none',\n margin: '0 0.5rem 0.5rem',\n },\n 'bottom-center': {\n top: 'auto',\n bottom: '0',\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)',\n margin: '0 0 0.5rem',\n },\n 'bottom-end': {\n top: 'auto',\n bottom: '0',\n left: 'auto',\n right: '0',\n transform: 'none',\n margin: '0 0.5rem 0.5rem',\n },\n };\n\n stack.style.removeProperty('inset-inline');\n stack.style.removeProperty('inset-inline-start');\n stack.style.removeProperty('inset-inline-end');\n Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);\n }\n\n /**\n * Applies the current toast stack configuration to a stack element.\n * @param {HTMLDivElement} stack\n */\n syncToastStack(stack = this.toastStack) {\n stack.dataset.position = this.stackPosition;\n stack.dataset.stackKey = this.getToastStackKey();\n stack.updateToastLayout = () => this.updateToastStack(stack);\n stack.style.display = 'flex';\n stack.style.alignItems = 'stretch';\n stack.style.width = 'min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))';\n stack.style.maxWidth = 'calc(100vw - 1rem)';\n stack.style.maxHeight = 'calc(100vh - 1rem)';\n stack.style.zIndex = '9999';\n this.applyToastStackPlacement(stack);\n\n if (this.stacked) {\n stack.dataset.stacked = 'true';\n stack.dataset.stackDepth = String(this.stackDepth);\n } else {\n delete stack.dataset.stacked;\n delete stack.dataset.stackDepth;\n delete stack.dataset.expanded;\n }\n }\n\n /**\n * Clears transient stack styling from a toast.\n * @param {Toast} toast\n */\n clearStackItemStyles(toast) {\n [\n '--wje-toast-stack-scale',\n '--wje-toast-stack-shift',\n '--wje-toast-stack-opacity',\n '--wje-toast-stack-z',\n '--wje-toast-stack-origin',\n '--wje-toast-stack-host-margin-top',\n '--wje-toast-stack-host-margin-bottom',\n 'order',\n 'position',\n 'top',\n 'left',\n 'right',\n 'width',\n 'margin',\n 'margin-top',\n 'margin-bottom',\n ].forEach((property) => toast.style.removeProperty(property));\n }\n\n /**\n * Measures the rendered height of a toast for stack overlap calculations.\n * @param {Toast} toast\n * @returns {number}\n */\n getToastVisualHeight(toast) {\n let hostHeight = toast.getBoundingClientRect().height;\n let nativeHeight = toast.shadowRoot?.querySelector('.native-toast')?.getBoundingClientRect().height || 0;\n\n return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);\n }\n\n /**\n * Recomputes the visual order of toasts inside the stack.\n * @param {HTMLDivElement} stack\n */\n updateToastStack(stack = this.toastStack) {\n let toasts = Array.from(stack.children).filter((child) => child.tagName === 'WJE-TOAST');\n let isStacked = stack.dataset.stacked === 'true';\n let isExpanded = stack.dataset.expanded === 'true';\n let isBottomStack = stack.dataset.position?.startsWith('bottom');\n let transformOrigin = stack.dataset.position?.startsWith('bottom') ? 'center bottom' : 'center top';\n let stackHeight = 0;\n\n stack.dataset.count = String(toasts.length);\n stack.style.gap = 'var(--wje-spacing-x-small)';\n stack.style.flexDirection = 'column';\n stack.style.overflow = isStacked ? (isExpanded ? 'auto' : 'visible') : 'auto';\n\n if (isStacked) {\n stack.style.paddingTop = isExpanded ? (isBottomStack ? STACKED_PADDING : '0px') : STACKED_PADDING;\n stack.style.paddingBottom = isExpanded ? (isBottomStack ? '0px' : STACKED_PADDING) : STACKED_PADDING;\n } else {\n stack.style.removeProperty('padding-top');\n stack.style.removeProperty('padding-bottom');\n }\n\n if (!isStacked || isExpanded) {\n stack.style.removeProperty('height');\n }\n\n toasts.forEach((toast, index) => {\n this.clearStackItemStyles(toast);\n\n toast.style.setProperty('--wje-toast-stack-z', String(index + 1));\n\n if (!isStacked) {\n return;\n }\n\n if (isExpanded) {\n let visualOrder = isBottomStack ? index : toasts.length - index - 1;\n let isVisualFirst = visualOrder === 0;\n let isVisualLast = visualOrder === toasts.length - 1;\n\n toast.style.setProperty('--wje-toast-stack-scale', '1.000');\n toast.style.setProperty('--wje-toast-stack-shift', '0px');\n toast.style.setProperty('--wje-toast-stack-opacity', '1.000');\n toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n toast.style.order = String(visualOrder);\n toast.style.width = '100%';\n toast.style.setProperty(\n '--wje-toast-stack-host-margin-top',\n isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : '0px'\n );\n toast.style.setProperty(\n '--wje-toast-stack-host-margin-bottom',\n !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : '0px'\n );\n return;\n }\n\n let toastHeight = this.getToastVisualHeight(toast);\n let maxDepth = Math.max(0, this.stackDepth - 1);\n let visibleLevels = Math.min(toasts.length, this.stackDepth);\n let depth = Math.min(toasts.length - index - 1, maxDepth);\n let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));\n let targetTop = isBottomStack\n ? visibleIndex * STACKED_VISIBLE_SLICE\n : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;\n let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);\n let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);\n\n toast.style.setProperty('--wje-toast-stack-scale', scale.toFixed(3));\n toast.style.setProperty('--wje-toast-stack-shift', '0px');\n toast.style.setProperty('--wje-toast-stack-opacity', opacity.toFixed(3));\n toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n toast.style.position = 'absolute';\n toast.style.top = `${targetTop}px`;\n toast.style.left = '0';\n toast.style.right = '0';\n toast.style.width = '100%';\n toast.style.setProperty('--wje-toast-stack-host-margin-top', '0px');\n toast.style.setProperty('--wje-toast-stack-host-margin-bottom', '0px');\n\n stackHeight = Math.max(stackHeight, targetTop + toastHeight);\n });\n\n if (isStacked && !isExpanded) {\n stack.style.height = `${stackHeight}px`;\n }\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Toast';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'status',\n });\n }\n\n /**\n * Draw method for the toast notification.\n * @returns {object} Document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-toast');\n\n let mediaSlot = document.createElement('slot');\n mediaSlot.setAttribute('name', 'media');\n mediaSlot.classList.add('media');\n mediaSlot.addEventListener('slotchange', () => {\n if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n mediaSlot.parentElement.classList.add('has-media');\n } else {\n mediaSlot.parentElement.classList.remove('has-media');\n }\n });\n\n let content = document.createElement('div');\n content.classList.add('content');\n content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n let iconX = document.createElement('wje-icon');\n iconX.setAttribute('name', 'x');\n\n let closeBtn = document.createElement('wje-button');\n closeBtn.setAttribute('fill', 'link');\n closeBtn.setAttribute('color', this.color);\n closeBtn.setAttribute('size', 'small');\n closeBtn.classList.add('close');\n closeBtn.setAttribute('aria-label', 'Close');\n\n let countdownEl = document.createElement('div');\n countdownEl.classList.add('countdown');\n\n let countdownBar = document.createElement('div');\n countdownBar.classList.add('countdown-bar');\n\n closeBtn.appendChild(iconX);\n countdownEl.appendChild(countdownBar);\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n icon.setAttribute('color', this.color);\n icon.setAttribute('slot', 'media');\n icon.setAttribute('part', 'icon');\n\n this.appendChild(icon);\n }\n\n native.appendChild(mediaSlot);\n native.appendChild(content);\n\n if (this.closable) native.appendChild(closeBtn);\n\n if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n fragment.appendChild(native);\n\n this.closeBtn = closeBtn;\n this.countdownBar = countdownBar;\n\n return fragment;\n }\n\n /**\n * After draw method for the toast notification.\n */\n afterDraw() {\n this.closeBtn.addEventListener('wje-button:click', this.hide);\n this.addEventListener('mouseenter', this.pause);\n this.addEventListener('mouseleave', this.resume);\n\n if (this.hasAttribute('countdown')) {\n const startWidth = '100%';\n const endWidth = '0';\n\n this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n duration: this.duration,\n easing: 'linear',\n });\n }\n\n if (this.duration > 0) {\n this.remainingTime = this.duration;\n this.startTimer();\n }\n }\n\n /**\n * Before disconnect method\n * This method is called before the element is disconnected from the document.\n */\n beforeDisconnect() {\n this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n this.removeEventListener('mouseenter', this.pause);\n this.removeEventListener('mouseleave', this.resume);\n\n clearTimeout(this.timeoutID);\n }\n\n /**\n * Starts the timer.\n * This method sets the `startTime` property to the current time and sets\n * the `timeoutID` property to the ID of the timeout. The method also\n * dispatches the `wje-toast:after-hide` custom event when the timeout\n * expires.\n */\n startTimer() {\n this.startTime = Date.now();\n if (this.timeoutID) {\n clearTimeout(this.timeoutID);\n }\n this.isTimerPaused = false;\n this.timeoutID = window.setTimeout(() => {\n this.hide();\n }, this.remainingTime);\n }\n\n /**\n * Stops the timer.\n * This method clears the timeout and calculates the remaining time.\n * The method is called when the toast notification is paused.\n */\n stopTimer() {\n if (!this.timeoutID || this.isTimerPaused) {\n return;\n }\n\n window.clearTimeout(this.timeoutID);\n this.timeoutID = null;\n const elapsedTime = Date.now() - this.startTime;\n this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);\n this.isTimerPaused = true;\n }\n\n /**\n * Resumes the timer.\n * This method resumes the timer if the remaining time is greater\n * than zero. The method is called when the toast notification is resumed.\n */\n resumeTimer() {\n if (this.isTimerPaused && this.remainingTime > 0) {\n this.startTimer();\n }\n }\n\n /**\n * Asynchronously shows the toast notification.\n * This method sets the `open` property to `true` and dispatches the\n * `wje-toast:after-show` custom event. If the toast is already open,\n * the method returns `undefined`.\n */\n show = () => {\n if (this.open) {\n return;\n }\n\n this.open = true;\n event.dispatchCustomEvent(this, 'wje-toast:after-show');\n };\n\n /**\n * Asynchronously hides the toast notification.\n * This method sets the `open` property to `false` and dispatches the\n * `wje-toast:after-hide` custom event. If the toast is already hidden,\n * the method returns `undefined`.\n */\n hide = () => {\n if (!this.open) {\n return;\n }\n\n this.open = false;\n event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n };\n\n /**\n * Pauses the countdown animation and stops the timer.\n */\n pause = () => {\n this.countdownAnimation?.pause();\n this.stopTimer();\n };\n\n /**\n * Resumes the countdown animation and resumes the timer.\n */\n resume = () => {\n if (this.toastStack?.dataset.expanded === 'true') {\n return;\n }\n\n this.countdownAnimation?.play();\n this.resumeTimer();\n };\n\n /**\n * Removes the toast notification and the toast stack.\n *\n * This method removes the toast notification from the toast stack and\n * removes the toast stack from the document body if the toast stack is\n * empty.\n */\n removeChildAndStack() {\n if (this.parentElement === this.toastStack) {\n this.toastStack.removeChild(this);\n }\n\n this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n this.updateToastStack(this.toastStack);\n\n requestAnimationFrame(() => {\n this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n });\n\n if (this.toastStack.querySelector('wje-toast') === null) {\n this.toastStack.remove();\n }\n }\n\n /**\n * Asynchronously starts the toast notification.\n * This method appends the toast notification to the document body and\n * shows the toast notification. The method returns a promise that\n * resolves when the toast notification is shown.\n * @returns {Promise<unknown>}\n */\n start = () => {\n return new Promise((resolve) => {\n let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key=\"${this.getToastStackKey()}\"]`);\n if (stack) {\n this.toastStack = stack;\n } else {\n this.toastStack = this.createToastStack();\n }\n\n this.syncToastStack(this.toastStack);\n\n if (this.toastStack.parentElement === null) {\n document.body.append(this.toastStack);\n }\n\n this.toastStack.append(this);\n if (this.stacked) {\n this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n this.style.setProperty(\n '--wje-toast-enter-offset',\n this.stackPosition.startsWith('bottom') ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`\n );\n this.style.visibility = 'hidden';\n this.show();\n this.updateToastStack(this.toastStack);\n } else {\n this.updateToastStack(this.toastStack);\n this.show();\n }\n\n if (this.toastStack.dataset.expanded === 'true') {\n this.pause();\n }\n\n requestAnimationFrame(() => {\n this.updateToastStack(this.toastStack);\n\n if (this.stacked) {\n this.style.removeProperty('visibility');\n this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n\n requestAnimationFrame(() => this.style.setProperty('--wje-toast-enter-offset', '0px'));\n }\n });\n this.updateComplete?.then(() => this.updateToastStack(this.toastStack));\n\n this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n\n resolve(this);\n });\n };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"wje-toast.js","sources":["../packages/wje-toast/toast.element.js","../packages/wje-toast/toast.js"],"sourcesContent":["import { default as WJElement, WjElementUtils, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\nconst DEFAULT_STACK_POSITION = 'top-end';\nconst DEFAULT_STACK_DEPTH = 3;\nconst VALID_STACK_POSITIONS = new Set([\n 'top-start',\n 'top-center',\n 'top-end',\n 'bottom-start',\n 'bottom-center',\n 'bottom-end',\n]);\nconst STACKED_SCALE_STEP = 0.04;\nconst STACKED_MIN_SCALE = 0.88;\nconst STACKED_MIN_OPACITY = 0.72;\nconst STACKED_VISIBLE_SLICE = 16;\nconst STACKED_EXPANDED_MARGIN = '0.5rem';\nconst STACKED_PADDING = '1rem';\nconst STACKED_ENTER_OFFSET = 24;\n\nconst toggleStackExpanded = (stack, expanded) => {\n if (expanded) {\n stack.dataset.expanded = 'true';\n return;\n }\n\n delete stack.dataset.expanded;\n};\n\nconst syncExpandedStackToasts = (stack, expanded) => {\n Array.from(stack.children)\n .filter((child) => child.tagName === 'WJE-TOAST')\n .forEach((toast) => {\n if (expanded) {\n toast.pause?.();\n return;\n }\n\n toast.resume?.();\n });\n};\n\nconst setStackExpandedState = (stack, expanded) => {\n let shouldExpand = stack.dataset.stacked === 'true' && expanded;\n let isExpanded = stack.dataset.expanded === 'true';\n\n if (shouldExpand === isExpanded) {\n return;\n }\n\n toggleStackExpanded(stack, shouldExpand);\n syncExpandedStackToasts(stack, shouldExpand);\n stack.updateToastLayout?.();\n};\n\nconst syncStackExpandedState = (stack) => {\n setStackExpandedState(stack, stack.matches(':hover') || stack.matches(':focus-within'));\n};\n\n/**\n * `Toast` is a custom web component that represents a toast notification.\n * @summary This element represents a toast notification.\n * @documentation https://elements.webjet.sk/components/toast\n * @status stable\n * @augments {WJElement}\n * @csspart native - The native part\n * @slot - The content of the toast.\n * @slot media - The media of the toast.\n * @attribute {string} headline - Specifies the headline text of the toast. Represents the main title or heading displayed in the toast.\n * @attribute {boolean} open - Indicates whether the toast is currently open (visible). A value of `true` shows the toast, while `false` hides it.\n * @attribute {number} duration - Determines the duration (in milliseconds) for which the toast is displayed. After this time, the toast will automatically close unless it is manually closed.\n * @attribute {boolean} closable - Specifies whether the toast can be manually closed by the user. If `true`, the toast will include a close button or mechanism.\n * @attribute {string} color - Defines the color variant of the toast. Supports values such as `primary`, `complete`, `success`, `warning`, `danger`, `info`, and `contrast`.\n * @attribute {boolean} countdown - Indicates whether a countdown is displayed in the toast. When `true`, a visual countdown timer is shown to indicate the remaining time before the toast closes.\n * @attribute {boolean} stacked - Enables a layered toast stack where the newest toast stays visually on top while older ones shrink behind it.\n * @attribute {string} stack-position - Defines where the toast stack is placed on the screen. Supports `top-start`, `top-center`, `top-end`, `bottom-start`, `bottom-center`, and `bottom-end`.\n * @attribute {number} stack-depth - Defines how many visual levels the collapsed stacked toast can show. Older toasts beyond this limit stay at the last reduced level. Default is `3`.\n * @attribute {string} icon - Adds a leading icon into the `media` slot by icon name.\n * @cssproperty [--wje-toast-stack-width=300px] - Defines the width of the toast stack container. Useful for centered stacked toasts and demo layouts.\n * // @fires wje-toast:after-show - Fired after the toast is shown.\n * // @fires wje-toast:after-hide - Fired after the toast is hidden.\n */\n\nexport default class Toast extends WJElement {\n /**\n * Creates an instance of Toast.\n */\n constructor() {\n super();\n\n this.toastStack = this.createToastStack();\n }\n\n /**\n * Set headline value of the toast.\n * @param value\n */\n set headline(value) {\n this.setAttribute('headline', value);\n }\n\n /**\n * Get headline value of the toast.\n * @returns {string}\n */\n get headline() {\n return this.getAttribute('headline');\n }\n\n /**\n * Set open value of the toast.\n * @param value\n */\n set open(value) {\n this.removeAttribute('open');\n\n if (WjElementUtils.stringToBoolean(value)) this.setAttribute('open', value);\n }\n\n /**\n * Get open value of the toast.\n * @returns {boolean}\n */\n get open() {\n return this.hasAttribute('open');\n }\n\n /**\n * Set duration value of the toast.\n * @param value\n */\n set duration(value) {\n this.setAttribute('duration', value);\n }\n\n /**\n * Get duration value of the toast.\n * @returns {number}\n */\n get duration() {\n return +this.getAttribute('duration');\n }\n\n /**\n * Set closable value of the toast.\n * @param value\n */\n set closable(value) {\n this.setAttribute('closable', value || '');\n }\n\n /**\n * Get closable value of the toast.\n * @returns {boolean}\n */\n get closable() {\n return this.hasAttribute('closable');\n }\n\n /**\n * Set color value of the toast.\n * @param value\n */\n set color(value) {\n this.setAttribute('color', value);\n }\n\n /**\n * Get color value of the toast.\n * @returns {string}\n */\n get color() {\n return this.getAttribute('color');\n }\n\n /**\n * Set countdown value of the toast.\n * @param value\n */\n set countdown(value) {\n if (value) this.setAttribute('countdown', value);\n }\n\n /**\n * Get countdown value of the toast.\n * @returns {boolean}\n */\n get countdown() {\n return this.hasAttribute('countdown');\n }\n\n /**\n * Set stacked value of the toast.\n * @param value\n */\n set stacked(value) {\n this.toggleAttribute('stacked', WjElementUtils.stringToBoolean(value));\n }\n\n /**\n * Get stacked value of the toast.\n * @returns {boolean}\n */\n get stacked() {\n return this.hasAttribute('stacked');\n }\n\n /**\n * Set stack depth of the toast.\n * @param value\n */\n set stackDepth(value) {\n if (value === null || value === undefined || value === '') {\n this.removeAttribute('stack-depth');\n return;\n }\n\n this.setAttribute('stack-depth', value);\n }\n\n /**\n * Get stack depth of the toast.\n * @returns {number}\n */\n get stackDepth() {\n let value = Number.parseInt(this.getAttribute('stack-depth'), 10);\n\n if (Number.isFinite(value) && value > 0) {\n return value;\n }\n\n return DEFAULT_STACK_DEPTH;\n }\n\n /**\n * Set stack position of the toast.\n * @param value\n */\n set stackPosition(value) {\n if (!value) {\n this.removeAttribute('stack-position');\n return;\n }\n\n this.setAttribute('stack-position', value);\n }\n\n /**\n * Get stack position of the toast.\n * @returns {string}\n */\n get stackPosition() {\n let value = this.getAttribute('stack-position');\n\n if (VALID_STACK_POSITIONS.has(value)) {\n return value;\n }\n\n if (this.getAttribute('position') === 'bottom') {\n return 'bottom-end';\n }\n\n return DEFAULT_STACK_POSITION;\n }\n\n /**\n * Set icon value of the toast.\n * @param value\n */\n set icon(value) {\n this.setAttribute('icon', value);\n }\n\n /**\n * Get icon value of the toast.\n * @returns {string}\n */\n get icon() {\n return this.getAttribute('icon');\n }\n\n /**\n * Creates a toast stack container.\n * @returns {HTMLDivElement}\n */\n createToastStack() {\n let stack = Object.assign(document.createElement('div'), { className: 'wje-toast-stack' });\n\n stack.addEventListener('mouseenter', () => setStackExpandedState(stack, true));\n stack.addEventListener('mouseleave', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n stack.addEventListener('focusin', () => setStackExpandedState(stack, true));\n stack.addEventListener('focusout', () => requestAnimationFrame(() => syncStackExpandedState(stack)));\n\n this.syncToastStack(stack);\n\n return stack;\n }\n\n /**\n * Returns the key of the toast stack.\n * @returns {string}\n */\n getToastStackKey() {\n return `${this.stackPosition}:${this.stacked ? `stacked:${this.stackDepth}` : 'default'}`;\n }\n\n /**\n * Applies the stack placement directly on the element so demo/app layout CSS cannot override it accidentally.\n * @param {HTMLDivElement} stack\n */\n applyToastStackPlacement(stack = this.toastStack) {\n const positions = {\n 'top-start': {\n top: '0',\n bottom: 'auto',\n left: '0',\n right: 'auto',\n transform: 'none',\n margin: '0.5rem',\n },\n 'top-center': {\n top: '0',\n bottom: 'auto',\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)',\n margin: '0.5rem 0 0',\n },\n 'top-end': {\n top: '0',\n bottom: 'auto',\n left: 'auto',\n right: '0',\n transform: 'none',\n margin: '0.5rem',\n },\n 'bottom-start': {\n top: 'auto',\n bottom: '0',\n left: '0',\n right: 'auto',\n transform: 'none',\n margin: '0 0.5rem 0.5rem',\n },\n 'bottom-center': {\n top: 'auto',\n bottom: '0',\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)',\n margin: '0 0 0.5rem',\n },\n 'bottom-end': {\n top: 'auto',\n bottom: '0',\n left: 'auto',\n right: '0',\n transform: 'none',\n margin: '0 0.5rem 0.5rem',\n },\n };\n\n stack.style.removeProperty('inset-inline');\n stack.style.removeProperty('inset-inline-start');\n stack.style.removeProperty('inset-inline-end');\n Object.assign(stack.style, positions[this.stackPosition] || positions[DEFAULT_STACK_POSITION]);\n }\n\n /**\n * Applies the current toast stack configuration to a stack element.\n * @param {HTMLDivElement} stack\n */\n syncToastStack(stack = this.toastStack) {\n stack.dataset.position = this.stackPosition;\n stack.dataset.stackKey = this.getToastStackKey();\n stack.updateToastLayout = () => this.updateToastStack(stack);\n stack.style.display = 'flex';\n stack.style.alignItems = 'stretch';\n stack.style.width = 'min(var(--wje-toast-stack-width, 300px), calc(100vw - 1rem))';\n stack.style.maxWidth = 'calc(100vw - 1rem)';\n stack.style.maxHeight = 'calc(100vh - 1rem)';\n stack.style.zIndex = '9999';\n this.applyToastStackPlacement(stack);\n\n if (this.stacked) {\n stack.dataset.stacked = 'true';\n stack.dataset.stackDepth = String(this.stackDepth);\n } else {\n delete stack.dataset.stacked;\n delete stack.dataset.stackDepth;\n delete stack.dataset.expanded;\n }\n }\n\n /**\n * Clears transient stack styling from a toast.\n * @param {Toast} toast\n */\n clearStackItemStyles(toast) {\n [\n '--wje-toast-stack-scale',\n '--wje-toast-stack-shift',\n '--wje-toast-stack-opacity',\n '--wje-toast-stack-z',\n '--wje-toast-stack-origin',\n '--wje-toast-stack-host-margin-top',\n '--wje-toast-stack-host-margin-bottom',\n 'order',\n 'position',\n 'top',\n 'left',\n 'right',\n 'width',\n 'margin',\n 'margin-top',\n 'margin-bottom',\n ].forEach((property) => toast.style.removeProperty(property));\n }\n\n /**\n * Measures the rendered height of a toast for stack overlap calculations.\n * @param {Toast} toast\n * @returns {number}\n */\n getToastVisualHeight(toast) {\n let hostHeight = toast.getBoundingClientRect().height;\n let nativeHeight = toast.shadowRoot?.querySelector('.native-toast')?.getBoundingClientRect().height || 0;\n\n return Math.max(hostHeight, nativeHeight, toast.offsetHeight || 0);\n }\n\n /**\n * Recomputes the visual order of toasts inside the stack.\n * @param {HTMLDivElement} stack\n */\n updateToastStack(stack = this.toastStack) {\n let toasts = Array.from(stack.children).filter((child) => child.tagName === 'WJE-TOAST');\n let isStacked = stack.dataset.stacked === 'true';\n let isExpanded = stack.dataset.expanded === 'true';\n let isBottomStack = stack.dataset.position?.startsWith('bottom');\n let transformOrigin = stack.dataset.position?.startsWith('bottom') ? 'center bottom' : 'center top';\n let stackHeight = 0;\n\n stack.dataset.count = String(toasts.length);\n stack.style.gap = 'var(--wje-spacing-x-small)';\n stack.style.flexDirection = 'column';\n stack.style.overflow = isStacked ? (isExpanded ? 'auto' : 'visible') : 'auto';\n\n if (isStacked) {\n stack.style.paddingTop = isExpanded ? (isBottomStack ? STACKED_PADDING : '0px') : STACKED_PADDING;\n stack.style.paddingBottom = isExpanded ? (isBottomStack ? '0px' : STACKED_PADDING) : STACKED_PADDING;\n } else {\n stack.style.removeProperty('padding-top');\n stack.style.removeProperty('padding-bottom');\n }\n\n if (!isStacked || isExpanded) {\n stack.style.removeProperty('height');\n }\n\n toasts.forEach((toast, index) => {\n this.clearStackItemStyles(toast);\n\n toast.style.setProperty('--wje-toast-stack-z', String(index + 1));\n\n if (!isStacked) {\n return;\n }\n\n if (isExpanded) {\n let visualOrder = isBottomStack ? index : toasts.length - index - 1;\n let isVisualFirst = visualOrder === 0;\n let isVisualLast = visualOrder === toasts.length - 1;\n\n toast.style.setProperty('--wje-toast-stack-scale', '1.000');\n toast.style.setProperty('--wje-toast-stack-shift', '0px');\n toast.style.setProperty('--wje-toast-stack-opacity', '1.000');\n toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n toast.style.order = String(visualOrder);\n toast.style.width = '100%';\n toast.style.setProperty(\n '--wje-toast-stack-host-margin-top',\n isBottomStack && !isVisualFirst ? STACKED_EXPANDED_MARGIN : '0px'\n );\n toast.style.setProperty(\n '--wje-toast-stack-host-margin-bottom',\n !isBottomStack && !isVisualLast ? STACKED_EXPANDED_MARGIN : '0px'\n );\n return;\n }\n\n let toastHeight = this.getToastVisualHeight(toast);\n let maxDepth = Math.max(0, this.stackDepth - 1);\n let visibleLevels = Math.min(toasts.length, this.stackDepth);\n let depth = Math.min(toasts.length - index - 1, maxDepth);\n let visibleIndex = Math.max(0, index - Math.max(0, toasts.length - this.stackDepth));\n let targetTop = isBottomStack\n ? visibleIndex * STACKED_VISIBLE_SLICE\n : (visibleLevels - 1 - visibleIndex) * STACKED_VISIBLE_SLICE;\n let scale = Math.max(STACKED_MIN_SCALE, 1 - depth * STACKED_SCALE_STEP);\n let opacity = Math.max(STACKED_MIN_OPACITY, 1 - depth * 0.08);\n\n toast.style.setProperty('--wje-toast-stack-scale', scale.toFixed(3));\n toast.style.setProperty('--wje-toast-stack-shift', '0px');\n toast.style.setProperty('--wje-toast-stack-opacity', opacity.toFixed(3));\n toast.style.setProperty('--wje-toast-stack-origin', transformOrigin);\n toast.style.position = 'absolute';\n toast.style.top = `${targetTop}px`;\n toast.style.left = '0';\n toast.style.right = '0';\n toast.style.width = '100%';\n toast.style.setProperty('--wje-toast-stack-host-margin-top', '0px');\n toast.style.setProperty('--wje-toast-stack-host-margin-bottom', '0px');\n\n stackHeight = Math.max(stackHeight, targetTop + toastHeight);\n });\n\n if (isStacked && !isExpanded) {\n stack.style.height = `${stackHeight}px`;\n }\n }\n\n /**\n * The class name for the component.\n * @type {string}\n */\n className = 'Toast';\n\n /**\n * Returns the CSS stylesheet for the component.\n * @static\n * @returns {CSSStyleSheet} The CSS stylesheet\n */\n static get cssStyleSheet() {\n return styles;\n }\n\n /**\n * Setup attributes for the Button element.\n */\n setupAttributes() {\n this.isShadowRoot = 'open';\n this.setAriaState({\n role: 'status',\n });\n }\n\n /**\n * Draw method for the toast notification.\n * @returns {object} Document fragment\n */\n draw() {\n let fragment = document.createDocumentFragment();\n\n let native = document.createElement('div');\n native.setAttribute('part', 'native');\n native.classList.add('native-toast');\n\n let mediaSlot = document.createElement('slot');\n mediaSlot.setAttribute('name', 'media');\n mediaSlot.classList.add('media');\n mediaSlot.addEventListener('slotchange', () => {\n if (WjElementUtils.hasSlotContent(this.context, 'media')) {\n mediaSlot.parentElement.classList.add('has-media');\n } else {\n mediaSlot.parentElement.classList.remove('has-media');\n }\n });\n\n let content = document.createElement('div');\n content.classList.add('content');\n content.innerHTML = `<div class=\"headline\">${this.headline}</div><div class=\"message\"><slot></slot></div>`;\n\n let iconX = document.createElement('wje-icon');\n iconX.setAttribute('name', 'x');\n\n let closeBtn = document.createElement('wje-button');\n closeBtn.setAttribute('fill', 'link');\n closeBtn.setAttribute('color', this.color);\n closeBtn.setAttribute('size', 'small');\n closeBtn.classList.add('close');\n closeBtn.setAttribute('label', 'Close');\n\n let countdownEl = document.createElement('div');\n countdownEl.classList.add('countdown');\n\n let countdownBar = document.createElement('div');\n countdownBar.classList.add('countdown-bar');\n\n closeBtn.appendChild(iconX);\n countdownEl.appendChild(countdownBar);\n\n if (this.hasAttribute('icon') && this.icon) {\n let icon = document.createElement('wje-icon');\n icon.setAttribute('name', this.icon);\n icon.setAttribute('color', this.color);\n icon.setAttribute('slot', 'media');\n icon.setAttribute('part', 'icon');\n\n this.appendChild(icon);\n }\n\n native.appendChild(mediaSlot);\n native.appendChild(content);\n\n if (this.closable) native.appendChild(closeBtn);\n\n if (this.hasAttribute('countdown')) native.appendChild(countdownEl);\n\n fragment.appendChild(native);\n\n this.closeBtn = closeBtn;\n this.countdownBar = countdownBar;\n\n return fragment;\n }\n\n /**\n * After draw method for the toast notification.\n */\n afterDraw() {\n this.closeBtn.addEventListener('wje-button:click', this.hide);\n this.addEventListener('mouseenter', this.pause);\n this.addEventListener('mouseleave', this.resume);\n\n if (this.hasAttribute('countdown')) {\n const startWidth = '100%';\n const endWidth = '0';\n\n this.countdownAnimation = this.countdownBar.animate([{ width: startWidth }, { width: endWidth }], {\n duration: this.duration,\n easing: 'linear',\n });\n }\n\n if (this.duration > 0) {\n this.remainingTime = this.duration;\n this.startTimer();\n }\n }\n\n /**\n * Before disconnect method\n * This method is called before the element is disconnected from the document.\n */\n beforeDisconnect() {\n this.closeBtn?.removeEventListener('wje-button:click', this.hide);\n this.removeEventListener('wje-toast:after-hide', this.removeChildAndStack);\n this.removeEventListener('mouseenter', this.pause);\n this.removeEventListener('mouseleave', this.resume);\n\n clearTimeout(this.timeoutID);\n }\n\n /**\n * Starts the timer.\n * This method sets the `startTime` property to the current time and sets\n * the `timeoutID` property to the ID of the timeout. The method also\n * dispatches the `wje-toast:after-hide` custom event when the timeout\n * expires.\n */\n startTimer() {\n this.startTime = Date.now();\n if (this.timeoutID) {\n clearTimeout(this.timeoutID);\n }\n this.isTimerPaused = false;\n this.timeoutID = window.setTimeout(() => {\n this.hide();\n }, this.remainingTime);\n }\n\n /**\n * Stops the timer.\n * This method clears the timeout and calculates the remaining time.\n * The method is called when the toast notification is paused.\n */\n stopTimer() {\n if (!this.timeoutID || this.isTimerPaused) {\n return;\n }\n\n window.clearTimeout(this.timeoutID);\n this.timeoutID = null;\n const elapsedTime = Date.now() - this.startTime;\n this.remainingTime = Math.max(0, this.remainingTime - elapsedTime);\n this.isTimerPaused = true;\n }\n\n /**\n * Resumes the timer.\n * This method resumes the timer if the remaining time is greater\n * than zero. The method is called when the toast notification is resumed.\n */\n resumeTimer() {\n if (this.isTimerPaused && this.remainingTime > 0) {\n this.startTimer();\n }\n }\n\n /**\n * Asynchronously shows the toast notification.\n * This method sets the `open` property to `true` and dispatches the\n * `wje-toast:after-show` custom event. If the toast is already open,\n * the method returns `undefined`.\n */\n show = () => {\n if (this.open) {\n return;\n }\n\n this.open = true;\n event.dispatchCustomEvent(this, 'wje-toast:after-show');\n };\n\n /**\n * Asynchronously hides the toast notification.\n * This method sets the `open` property to `false` and dispatches the\n * `wje-toast:after-hide` custom event. If the toast is already hidden,\n * the method returns `undefined`.\n */\n hide = () => {\n if (!this.open) {\n return;\n }\n\n this.open = false;\n event.dispatchCustomEvent(this, 'wje-toast:after-hide');\n };\n\n /**\n * Pauses the countdown animation and stops the timer.\n */\n pause = () => {\n this.countdownAnimation?.pause();\n this.stopTimer();\n };\n\n /**\n * Resumes the countdown animation and resumes the timer.\n */\n resume = () => {\n if (this.toastStack?.dataset.expanded === 'true') {\n return;\n }\n\n this.countdownAnimation?.play();\n this.resumeTimer();\n };\n\n /**\n * Removes the toast notification and the toast stack.\n *\n * This method removes the toast notification from the toast stack and\n * removes the toast stack from the document body if the toast stack is\n * empty.\n */\n removeChildAndStack() {\n if (this.parentElement === this.toastStack) {\n this.toastStack.removeChild(this);\n }\n\n this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n this.updateToastStack(this.toastStack);\n\n requestAnimationFrame(() => {\n this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n });\n\n if (this.toastStack.querySelector('wje-toast') === null) {\n this.toastStack.remove();\n }\n }\n\n /**\n * Asynchronously starts the toast notification.\n * This method appends the toast notification to the document body and\n * shows the toast notification. The method returns a promise that\n * resolves when the toast notification is shown.\n * @returns {Promise<unknown>}\n */\n start = () => {\n return new Promise((resolve) => {\n let stack = document.body.querySelector(`.wje-toast-stack[data-stack-key=\"${this.getToastStackKey()}\"]`);\n if (stack) {\n this.toastStack = stack;\n } else {\n this.toastStack = this.createToastStack();\n }\n\n this.syncToastStack(this.toastStack);\n\n if (this.toastStack.parentElement === null) {\n document.body.append(this.toastStack);\n }\n\n this.toastStack.append(this);\n if (this.stacked) {\n this.toastStack.style.setProperty('--wje-toast-stack-layout-duration', '0s');\n this.toastStack.style.setProperty('--wje-toast-stack-visual-duration', '0s');\n this.style.setProperty(\n '--wje-toast-enter-offset',\n this.stackPosition.startsWith('bottom') ? `${STACKED_ENTER_OFFSET}px` : `-${STACKED_ENTER_OFFSET}px`\n );\n this.style.visibility = 'hidden';\n this.show();\n this.updateToastStack(this.toastStack);\n } else {\n this.updateToastStack(this.toastStack);\n this.show();\n }\n\n if (this.toastStack.dataset.expanded === 'true') {\n this.pause();\n }\n\n requestAnimationFrame(() => {\n this.updateToastStack(this.toastStack);\n\n if (this.stacked) {\n this.style.removeProperty('visibility');\n this.toastStack.style.removeProperty('--wje-toast-stack-layout-duration');\n this.toastStack.style.removeProperty('--wje-toast-stack-visual-duration');\n\n requestAnimationFrame(() => this.style.setProperty('--wje-toast-enter-offset', '0px'));\n }\n });\n this.updateComplete?.then(() => this.updateToastStack(this.toastStack));\n\n this.addEventListener('wje-toast:after-hide', this.removeChildAndStack);\n\n resolve(this);\n });\n };\n}\n","import Toast from './toast.element.js';\n\nexport default Toast;\n\nToast.define('wje-toast', Toast);\n"],"names":[],"mappings":"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"}
@@ -110,7 +110,7 @@ const _ToolbarAction = class _ToolbarAction extends WJElement {
110
110
  let trigger = document.createElement("wje-button");
111
111
  trigger.setAttribute("slot", "trigger");
112
112
  trigger.setAttribute("fill", "link");
113
- trigger.setAttribute("aria-label", "Show more actions");
113
+ trigger.setAttribute("label", "Show more actions");
114
114
  trigger.innerHTML = '<wje-icon name="dots"></wje-icon>';
115
115
  let menu = document.createElement("wje-menu");
116
116
  menu.setAttribute("variant", "context");