npm - @umbraco-ui/uui - Versions diffs - 2.0.0-alpha.1 → 2.0.0-rc.0 - Mend

@umbraco-ui/uui 2.0.0-alpha.1 → 2.0.0-rc.0

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.

Files changed (96) hide show

package/dist/components/modal/modal-sidebar.element.js CHANGED Viewed

@@ -44,14 +44,18 @@ const _UUIModalSidebarElement = class _UUIModalSidebarElement extends UUIModalEl
     }, this.transitionDuration);
   }
   render() {
-    return html`<dialog>
+    return html`<div
+      popover="manual"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Dialog">
       <slot></slot>
-    </dialog>`;
+    </div>`;
   }
 };
 _UUIModalSidebarElement_instances = new WeakSet();
 getWidth_get = function() {
-  return this._dialogElement?.getBoundingClientRect().width ?? 0;
+  return this._popoverElement?.getBoundingClientRect().width ?? 0;
 };
 _UUIModalSidebarElement.styles = [
   ...UUIModalElement.styles,
@@ -66,7 +70,7 @@ _UUIModalSidebarElement.styles = [
           --uui-modal-sidebar-left-gap: 64px;
         }
       }
-      dialog {
+      [popover] {
         height: 100%;
         width: 100%;
         box-sizing: border-box;
@@ -79,22 +83,22 @@ _UUIModalSidebarElement.styles = [
           var(--uui-color-surface)
         );
       }
-      :host([index='0']) dialog {
+      :host([index='0']) [popover] {
         box-shadow: var(--uui-shadow-depth-5);
       }
-      :host(:not([index='0'])) dialog {
+      :host(:not([index='0'])) [popover] {
         outline: 1px solid rgba(0, 0, 0, 0.1);
       }
-      :host([hide]) dialog {
+      :host([hide]) [popover] {
         display: none;
       }
-      :host([size='large']) dialog {
+      :host([size='large']) [popover] {
         max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));
       }
-      :host([size='medium']) dialog {
+      :host([size='medium']) [popover] {
         max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));
       }
-      :host([size='small']) dialog {
+      :host([size='small']) [popover] {
         max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));
       }
     `

package/dist/components/modal/modal-sidebar.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal-sidebar.element.js","sources":["../../../src/components/modal/modal-sidebar.element.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIModalElement } from './modal.element.js';\nexport type UUIModalSidebarSize = 'small' \| 'medium' \| 'large' \| 'full';\n\nexport class UUIModalSidebarElement extends UUIModalElement {\n /*\n @attr\n */\n @property({ reflect: true })\n size: UUIModalSidebarSize = 'full';\n\n protected firstUpdated(\n _changedProperties: Map<string \| number \| symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties);\n\n // if we've reached over X layers of sidebars, hide for better performance.\n if (this.uniqueIndex > 10) {\n this.setAttribute('hide', '');\n } else {\n this.removeAttribute('hide');\n }\n }\n\n get #getWidth() {\n return this.~~_dialogElement~~?.getBoundingClientRect().width ?? 0;\n }\n\n forceClose() {\n if (this.isClosing) return;\n\n this.isClosing = true;\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n\n setTimeout(() => {\n super.forceClose();\n }, this.transitionDuration);\n }\n\n render() {\n return html`<dialog>\n <slot></slot>\n </~~dialog~~>`;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-sidebar-left-gap: 24px;\n --uui-modal-sidebar-background: var(--uui-color-surface);\n }\n @media (min-width: 600px) {\n :host {\n --uui-modal-sidebar-left-gap: 64px;\n }\n }\n ~~dialog~~ {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n max-width: calc(100% - var(--uui-modal-sidebar-left-gap));\n margin-left: auto;\n right: var(--uui-modal-offset);\n transition: right var(--uui-modal-transition-duration, 250ms);\n background: var(\n --uui-modal-sidebar-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) ~~dialog~~ {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) ~~dialog~~ {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n :host([hide]) ~~dialog~~ {\n display: none;\n }\n :host([size='large']) ~~dialog~~ {\n max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='medium']) ~~dialog~~ {\n max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='small']) ~~dialog~~ {\n max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,MAAM,0BAAN,MAAM,gCAA+B,gBAAgB;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAKL,SAAA,OAA4B;AAAA,EAAA;AAAA,EAElB,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAAA,EACrE;AAAA,EAEU,QACR,oBACM;AACN,UAAM,QAAQ,kBAAkB;AAGhC,QAAI,KAAK,cAAc,IAAI;AACzB,WAAK,aAAa,QAAQ,EAAE;AAAA,IAC9B,OAAO;AACL,WAAK,gBAAgB,MAAM;AAAA,IAC7B;AAAA,EACF;AAAA,EAMA,aAAa;AACX,QAAI,KAAK,UAAW;AAEpB,SAAK,YAAY;AACjB,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAEnE,eAAW,MAAM;AACf,YAAM,WAAA;AAAA,IACR,GAAG,KAAK,kBAAkB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,~~EAGT~~;AAgDF;~~AA/FO~~;AA4BD,eAAA,WAAY;AACd,SAAO,KAAK,~~gBAAgB~~,sBAAA,EAAwB,SAAS;~~AAC/D~~;~~AAmBA~~,wBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAnDG~~,IAAM,yBAAN;AAKL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAJhB,uBAKX,WAAA,MAAA;"}
1	+ {"version":3,"file":"modal-sidebar.element.js","sources":["../../../src/components/modal/modal-sidebar.element.ts"],"sourcesContent":["import type { PropertyValueMap } from 'lit';\nimport { css, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIModalElement } from './modal.element.js';\nexport type UUIModalSidebarSize = 'small' \| 'medium' \| 'large' \| 'full';\n\nexport class UUIModalSidebarElement extends UUIModalElement {\n /*\n @attr\n */\n @property({ reflect: true })\n size: UUIModalSidebarSize = 'full';\n\n protected firstUpdated(\n _changedProperties: Map<string \| number \| symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n }\n\n protected updated(\n _changedProperties: PropertyValueMap<any> \| Map<PropertyKey, unknown>,\n ): void {\n super.updated(_changedProperties);\n\n // if we've reached over X layers of sidebars, hide for better performance.\n if (this.uniqueIndex > 10) {\n this.setAttribute('hide', '');\n } else {\n this.removeAttribute('hide');\n }\n }\n\n get #getWidth() {\n return this._popoverElement?.getBoundingClientRect().width ?? 0;\n }\n\n forceClose() {\n if (this.isClosing) return;\n\n this.isClosing = true;\n this.style.setProperty('--uui-modal-offset', -this.#getWidth + 'px');\n\n setTimeout(() => {\n super.forceClose();\n }, this.transitionDuration);\n }\n\n render() {\n return html`<div\n popover=\"manual\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Dialog\">\n <slot></slot>\n </div>`;\n }\n\n static override readonly styles = [\n ...UUIModalElement.styles,\n css`\n :host {\n outline: none;\n --uui-modal-sidebar-left-gap: 24px;\n --uui-modal-sidebar-background: var(--uui-color-surface);\n }\n @media (min-width: 600px) {\n :host {\n --uui-modal-sidebar-left-gap: 64px;\n }\n }\n [popover] {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n max-width: calc(100% - var(--uui-modal-sidebar-left-gap));\n margin-left: auto;\n right: var(--uui-modal-offset);\n transition: right var(--uui-modal-transition-duration, 250ms);\n background: var(\n --uui-modal-sidebar-background,\n var(--uui-color-surface)\n );\n }\n :host([index='0']) [popover] {\n box-shadow: var(--uui-shadow-depth-5);\n }\n :host(:not([index='0'])) [popover] {\n outline: 1px solid rgba(0, 0, 0, 0.1);\n }\n :host([hide]) [popover] {\n display: none;\n }\n :host([size='large']) [popover] {\n max-width: min(1200px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='medium']) [popover] {\n max-width: min(800px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n :host([size='small']) [popover] {\n max-width: min(500px, calc(100% - var(--uui-modal-sidebar-left-gap)));\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAMO,MAAM,0BAAN,MAAM,gCAA+B,gBAAgB;AAAA,EAArD,cAAA;AAAA,UAAA,GAAA,SAAA;AAAA;AAKL,SAAA,OAA4B;AAAA,EAAA;AAAA,EAElB,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAAA,EACrE;AAAA,EAEU,QACR,oBACM;AACN,UAAM,QAAQ,kBAAkB;AAGhC,QAAI,KAAK,cAAc,IAAI;AACzB,WAAK,aAAa,QAAQ,EAAE;AAAA,IAC9B,OAAO;AACL,WAAK,gBAAgB,MAAM;AAAA,IAC7B;AAAA,EACF;AAAA,EAMA,aAAa;AACX,QAAI,KAAK,UAAW;AAEpB,SAAK,YAAY;AACjB,SAAK,MAAM,YAAY,sBAAsB,CAAC,mBAAK,mDAAY,IAAI;AAEnE,eAAW,MAAM;AACf,YAAM,WAAA;AAAA,IACR,GAAG,KAAK,kBAAkB;AAAA,EAC5B;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOT;AAgDF;AAnGO;AA4BD,eAAA,WAAY;AACd,SAAO,KAAK,iBAAiB,sBAAA,EAAwB,SAAS;AAChE;AAuBA,wBAAyB,SAAS;AAAA,EAChC,GAAG,gBAAgB;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAvDG,IAAM,yBAAN;AAKL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAJhB,uBAKX,WAAA,MAAA;"}

package/dist/components/modal/modal-with-toasts-example.element.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+import './modal-container.js';
+import './modal.js';
+import '../dialog-layout/dialog-layout.js';
+import '../button/button.js';
+import '../box/box.js';
+import '../toast-notification/toast-notification.js';
+import '../toast-notification-container/toast-notification-container.js';
+import '../toast-notification-layout/toast-notification-layout.js';
+export declare class UUIModalWithToastsExampleElement extends LitElement {
+    #private;
+    private readonly _modals;
+    private _toastCounter;
+    private _dialogCounter;
+    private _messageCounter;
+    private readonly _onModalOpen;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult;
+}

package/dist/components/modal/modal.element.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export declare const UUIModalOpenEvent = "uui:modal-open";
 export declare const UUIModalCloseEvent = "uui:modal-close";
 export declare const UUIModalCloseEndEvent = "uui:modal-close-end";
 export declare class UUIModalElement extends LitElement {
-    protected readonly _dialogElement?: HTMLDialogElement;
+    protected readonly _popoverElement?: HTMLElement;
     isOpen: boolean;
     isClosing: boolean;
     index: number;
@@ -16,5 +16,7 @@ export declare class UUIModalElement extends LitElement {
     close: (event?: Event) => void;
     protected _openModal(): void;
     forceClose(): void;
+    private readonly _onKeydown;
+    private readonly _onFocusTrap;
     static readonly styles: import("lit").CSSResult[];
 }

package/dist/components/modal/modal.element.js CHANGED Viewed

@@ -45,6 +45,17 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
       if (closeEvent.defaultPrevented) return;
       this.forceClose();
     };
+    this._onKeydown = (e) => {
+      if (e.key === "Escape" && this.index === 0) {
+        this.close();
+      }
+    };
+    this._onFocusTrap = (e) => {
+      if (this.index !== 0) return;
+      if (!this._popoverElement?.contains(e.target)) {
+        this._popoverElement?.focus();
+      }
+    };
   }
   get transitionDuration() {
     return this._transitionDuration;
@@ -64,13 +75,19 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
   }
   _openModal() {
     this.isOpen = true;
-    this._dialogElement?.showModal();
-    this._dialogElement?.addEventListener("cancel", this.close);
+    this._popoverElement?.showPopover();
+    if (!this._popoverElement?.hasAttribute("tabindex")) {
+      this._popoverElement?.setAttribute("tabindex", "-1");
+    }
+    document.addEventListener("keydown", this._onKeydown);
+    document.addEventListener("focus", this._onFocusTrap, true);
   }
   forceClose() {
     this.isClosing = true;
     this.isOpen = false;
-    this._dialogElement?.close();
+    this._popoverElement?.hidePopover();
+    document.removeEventListener("keydown", this._onKeydown);
+    document.removeEventListener("focus", this._onFocusTrap, true);
     this.dispatchEvent(new CustomEvent("close-end"));
     this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));
     this.remove();
@@ -78,7 +95,9 @@ const _UUIModalElement = class _UUIModalElement extends LitElement {
 };
 _UUIModalElement.styles = [
   css`
-      dialog {
+      [popover] {
+        position: fixed;
+        inset: 0;
         display: block;
         margin: 0;
         padding: 0;
@@ -88,11 +107,7 @@ _UUIModalElement.styles = [
         background: none;
         color: var(--uui-color-text);
       }
-      dialog::backdrop {
-        background: none;
-        opacity: 0;
-      }
-      dialog::after {
+      [popover]::after {
         content: '';
         position: absolute;
         inset: 0;
@@ -102,15 +117,19 @@ _UUIModalElement.styles = [
         transition: opacity var(--uui-modal-transition-duration, 250ms);
         z-index: 1;
       }
-      :host([index='0']) dialog::after {
+      :host([index='0']) [popover]::after {
         opacity: 0;
+        pointer-events: none;
+      }
+      :host(:not([index='0'])) [popover]::after {
+        pointer-events: auto;
       }
     `
 ];
 let UUIModalElement = _UUIModalElement;
 __decorateClass([
-  query("dialog")
-], UUIModalElement.prototype, "_dialogElement", 2);
+  query("[popover]")
+], UUIModalElement.prototype, "_popoverElement", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true, attribute: "is-open" })
 ], UUIModalElement.prototype, "isOpen", 2);

package/dist/components/modal/modal.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.element.js","sources":["../../../src/components/modal/modal.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nexport const UUIModalOpenEvent = 'uui:modal-open';\nexport const UUIModalCloseEvent = 'uui:modal-close';\nexport const UUIModalCloseEndEvent = 'uui:modal-close-end';\n\nexport class UUIModalElement extends LitElement {\n @query('~~dialog~~')\n protected readonly ~~_dialogElement~~?: ~~HTMLDialogElement~~;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-open' })\n isOpen = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-closing' })\n isClosing = false;\n\n @property({ type: Number, reflect: true })\n index = 0;\n\n @property({ type: Number, reflect: true, attribute: 'unique-index' })\n uniqueIndex = 0;\n\n private _transitionDuration = 250;\n\n @property({ type: Number, attribute: 'transition-duration' })\n public get transitionDuration() {\n return this._transitionDuration;\n }\n public set transitionDuration(value: number) {\n this._transitionDuration = value;\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this._transitionDuration + 'ms',\n );\n }\n\n protected firstUpdated(\n _changedProperties: Map<string \| number \| symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n if (!this.isClosing) {\n this.open();\n }\n }\n\n public open = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const openEvent = new CustomEvent(UUIModalOpenEvent, {\n cancelable: true,\n });\n const legacyOpenEvent = new CustomEvent('open', {\n cancelable: true,\n });\n\n this.dispatchEvent(openEvent);\n this.dispatchEvent(legacyOpenEvent);\n if (openEvent.defaultPrevented \|\| legacyOpenEvent.defaultPrevented) return;\n\n this._openModal();\n };\n\n public close = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const closeEvent = new CustomEvent(UUIModalCloseEvent, {\n cancelable: true,\n });\n this.dispatchEvent(closeEvent);\n\n if (closeEvent.defaultPrevented) return;\n\n this.forceClose();\n };\n\n protected _openModal() {\n this.isOpen = true;\n this.~~_dialogElement~~?.~~showModal~~();\n this.~~_dialogElement~~?.addEventListener('~~cancel~~', this.~~close~~);\n }\n\n public forceClose() {\n this.isClosing = true;\n this.isOpen = false;\n this.~~_dialogElement~~?.~~close~~();\n\n this.dispatchEvent(new CustomEvent('close-end'));\n this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));\n\n this.remove();\n }\n\n static override readonly styles = [\n css`\n ~~dialog~~ {\n display: block;\n margin: 0;\n padding: 0;\n max-width: unset;\n max-height: unset;\n border: none;\n background: none;\n color: var(--uui-color-text);\n }\n ~~dialog~~::~~backdrop {\n background: none;\n opacity: 0;\n }\n dialog::~~after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n z-index: 1;\n }\n :host([index='0']) ~~dialog~~::after {\n opacity: 0;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAGO,MAAM,oBAAoB;AAC1B,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB;AAE9B,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAKL,SAAA,SAAS;AAGT,SAAA,YAAY;AAGZ,SAAA,QAAQ;AAGR,SAAA,cAAc;AAEd,SAAQ,sBAAsB;AAwB9B,SAAO,OAAO,CAAC,UAAkB;AAC/B,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,YAAY,IAAI,YAAY,mBAAmB;AAAA,QACnD,YAAY;AAAA,MAAA,CACb;AACD,YAAM,kBAAkB,IAAI,YAAY,QAAQ;AAAA,QAC9C,YAAY;AAAA,MAAA,CACb;AAED,WAAK,cAAc,SAAS;AAC5B,WAAK,cAAc,eAAe;AAClC,UAAI,UAAU,oBAAoB,gBAAgB,iBAAkB;AAEpE,WAAK,WAAA;AAAA,IACP;AAEA,SAAO,QAAQ,CAAC,UAAkB;AAChC,aAAO,eAAA;AACP,aAAO,yBAAA;AAEP,YAAM,aAAa,IAAI,YAAY,oBAAoB;AAAA,QACrD,YAAY;AAAA,MAAA,CACb;AACD,WAAK,cAAc,UAAU;AAE7B,UAAI,WAAW,iBAAkB;AAEjC,WAAK,WAAA;AAAA,IACP;AAAA,EAAA;AAAA,~~EAnDA~~,IAAW,qBAAqB;AAC9B,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,mBAAmB,OAAe;AAC3C,SAAK,sBAAsB;AAC3B,SAAK,MAAM;AAAA,MACT;AAAA,MACA,KAAK,sBAAsB;AAAA,IAAA;AAAA,EAE/B;AAAA,EAEU,aACR,oBACM;AACN,UAAM,aAAa,kBAAkB;AAErC,QAAI,CAAC,KAAK,WAAW;AACnB,WAAK,KAAA;AAAA,IACP;AAAA,EACF;AAAA,EAkCU,aAAa;AACrB,SAAK,SAAS;AACd,SAAK,~~gBAAgB~~,~~UAAA~~;~~AACrB~~,~~SAAK~~,~~gBAAgB~~,iBAAiB,UAAU,KAAK,KAAK;AAAA,EAC5D;AAAA,EAEO,aAAa;AAClB,SAAK,YAAY;AACjB,SAAK,SAAS;AACd,SAAK,~~gBAAgB~~,~~MAAA~~;~~AAErB~~,SAAK,cAAc,IAAI,YAAY,WAAW,CAAC;AAC/C,SAAK,cAAc,IAAI,YAAY,qBAAqB,CAAC;AAEzD,SAAK,OAAA;AAAA,EACP;~~AAiCF~~;~~AA/BE~~,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AA1FG~~,IAAM,kBAAN;AAEc,gBAAA;AAAA,EADlB,MAAM,~~QAAQ~~;AAAA,~~GADJ~~,gBAEQ,WAAA,~~kBAAA~~,CAAA;AAGnB,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW;AAAA,GAJrD,gBAKX,WAAA,UAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,cAAc;AAAA,GAPxD,gBAQX,WAAA,aAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAV9B,gBAWX,WAAA,SAAA,CAAA;AAGA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,gBAAgB;AAAA,GAbzD,gBAcX,WAAA,eAAA,CAAA;AAKW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,uBAAuB;AAAA,GAlBjD,gBAmBA,WAAA,sBAAA,CAAA;"}
1	+ {"version":3,"file":"modal.element.js","sources":["../../../src/components/modal/modal.element.ts"],"sourcesContent":["import { LitElement, css } from 'lit';\nimport { property, query } from 'lit/decorators.js';\n\nexport const UUIModalOpenEvent = 'uui:modal-open';\nexport const UUIModalCloseEvent = 'uui:modal-close';\nexport const UUIModalCloseEndEvent = 'uui:modal-close-end';\n\nexport class UUIModalElement extends LitElement {\n @query('[popover]')\n protected readonly _popoverElement?: HTMLElement;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-open' })\n isOpen = false;\n\n @property({ type: Boolean, reflect: true, attribute: 'is-closing' })\n isClosing = false;\n\n @property({ type: Number, reflect: true })\n index = 0;\n\n @property({ type: Number, reflect: true, attribute: 'unique-index' })\n uniqueIndex = 0;\n\n private _transitionDuration = 250;\n\n @property({ type: Number, attribute: 'transition-duration' })\n public get transitionDuration() {\n return this._transitionDuration;\n }\n public set transitionDuration(value: number) {\n this._transitionDuration = value;\n this.style.setProperty(\n '--uui-modal-transition-duration',\n this._transitionDuration + 'ms',\n );\n }\n\n protected firstUpdated(\n _changedProperties: Map<string \| number \| symbol, unknown>,\n ): void {\n super.firstUpdated(_changedProperties);\n\n if (!this.isClosing) {\n this.open();\n }\n }\n\n public open = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const openEvent = new CustomEvent(UUIModalOpenEvent, {\n cancelable: true,\n });\n const legacyOpenEvent = new CustomEvent('open', {\n cancelable: true,\n });\n\n this.dispatchEvent(openEvent);\n this.dispatchEvent(legacyOpenEvent);\n if (openEvent.defaultPrevented \|\| legacyOpenEvent.defaultPrevented) return;\n\n this._openModal();\n };\n\n public close = (event?: Event) => {\n event?.preventDefault();\n event?.stopImmediatePropagation();\n\n const closeEvent = new CustomEvent(UUIModalCloseEvent, {\n cancelable: true,\n });\n this.dispatchEvent(closeEvent);\n\n if (closeEvent.defaultPrevented) return;\n\n this.forceClose();\n };\n\n protected _openModal() {\n this.isOpen = true;\n this._popoverElement?.showPopover();\n if (!this._popoverElement?.hasAttribute('tabindex')) {\n this._popoverElement?.setAttribute('tabindex', '-1');\n }\n document.addEventListener('keydown', this._onKeydown);\n document.addEventListener('focus', this._onFocusTrap, true);\n }\n\n public forceClose() {\n this.isClosing = true;\n this.isOpen = false;\n this._popoverElement?.hidePopover();\n document.removeEventListener('keydown', this._onKeydown);\n document.removeEventListener('focus', this._onFocusTrap, true);\n\n this.dispatchEvent(new CustomEvent('close-end'));\n this.dispatchEvent(new CustomEvent(UUIModalCloseEndEvent));\n\n this.remove();\n }\n\n private readonly _onKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && this.index === 0) {\n this.close();\n }\n };\n\n private readonly _onFocusTrap = (e: FocusEvent) => {\n if (this.index !== 0) return;\n if (!this._popoverElement?.contains(e.target as Node)) {\n this._popoverElement?.focus();\n }\n };\n\n static override readonly styles = [\n css`\n [popover] {\n position: fixed;\n inset: 0;\n display: block;\n margin: 0;\n padding: 0;\n max-width: unset;\n max-height: unset;\n border: none;\n background: none;\n color: var(--uui-color-text);\n }\n [popover]::after {\n content: '';\n position: absolute;\n inset: 0;\n background-color: var(--uui-modal-color-backdrop, rgba(0, 0, 0, 0.5));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--uui-modal-transition-duration, 250ms);\n z-index: 1;\n }\n :host([index='0']) [popover]::after {\n opacity: 0;\n pointer-events: none;\n }\n :host(:not([index='0'])) [popover]::after {\n pointer-events: auto;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/modal/modal.js CHANGED Viewed

@@ -2,12 +2,18 @@ import { defineElement } from "../../internal/registration/index.js";
 import { UUIModalDialogElement } from "./modal-dialog.element.js";
 import { UUIModalSidebarElement } from "./modal-sidebar.element.js";
 import { UUIModalContainerElement } from "./modal-container.js";
+import { UUIModalCloseEndEvent, UUIModalCloseEvent, UUIModalElement, UUIModalOpenEvent, UUIModalElement as UUIModalElement2 } from "./modal.element.js";
 defineElement("uui-modal-dialog", UUIModalDialogElement);
 defineElement("uui-modal-sidebar", UUIModalSidebarElement);
 defineElement("uui-modal-container", UUIModalContainerElement);
 export {
+  UUIModalCloseEndEvent,
+  UUIModalCloseEvent,
   UUIModalContainerElement,
   UUIModalDialogElement,
-  UUIModalSidebarElement
+  UUIModalElement,
+  UUIModalOpenEvent,
+  UUIModalSidebarElement,
+  UUIModalElement2 as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/components/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIModalDialogElement } from './modal-dialog.element.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalContainerElement } from './modal-container.js';\n\ndefineElement('uui-modal-dialog', UUIModalDialogElement);\ndefineElement('uui-modal-sidebar', UUIModalSidebarElement);\ndefineElement('uui-modal-container', UUIModalContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uui-modal-dialog': UUIModalDialogElement;\n 'uui-modal-sidebar': UUIModalSidebarElement;\n 'uui-modal-container': UUIModalContainerElement;\n }\n}\n\nexport * from './modal-dialog.element.js';\nexport * from './modal-sidebar.element.js';\nexport * from './modal.element.js';\nexport * from './modal-container.js';\nexport { UUIModalElement as default } from './modal.element.js';\n"],"names":[],"mappings":"~~;;;;~~AAKA,cAAc,oBAAoB,qBAAqB;AACvD,cAAc,qBAAqB,sBAAsB;AACzD,cAAc,uBAAuB,wBAAwB;"}
1	+ {"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIModalDialogElement } from './modal-dialog.element.js';\nimport { UUIModalSidebarElement } from './modal-sidebar.element.js';\nimport { UUIModalContainerElement } from './modal-container.js';\n\ndefineElement('uui-modal-dialog', UUIModalDialogElement);\ndefineElement('uui-modal-sidebar', UUIModalSidebarElement);\ndefineElement('uui-modal-container', UUIModalContainerElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uui-modal-dialog': UUIModalDialogElement;\n 'uui-modal-sidebar': UUIModalSidebarElement;\n 'uui-modal-container': UUIModalContainerElement;\n }\n}\n\nexport * from './modal-dialog.element.js';\nexport * from './modal-sidebar.element.js';\nexport * from './modal.element.js';\nexport * from './modal-container.js';\nexport { UUIModalElement as default } from './modal.element.js';\n"],"names":[],"mappings":";;;;;AAKA,cAAc,oBAAoB,qBAAqB;AACvD,cAAc,qBAAqB,sBAAsB;AACzD,cAAc,uBAAuB,wBAAwB;"}

package/dist/components/pagination/pagination.element.d.ts CHANGED Viewed

@@ -96,6 +96,8 @@ export declare class UUIPaginationElement extends LitElement {
     protected renderLast(): import("lit-html").TemplateResult<1>;
     protected renderDots(): import("lit-html").TemplateResult<1>;
     protected renderPage(page: number): import("lit-html").TemplateResult<1>;
+    protected renderLeftDots(): import("lit-html").TemplateResult<1>;
+    protected renderRightDots(): import("lit-html").TemplateResult<1>;
     protected renderNavigationLeft(): import("lit-html").TemplateResult<1>;
     protected renderNavigationRight(): import("lit-html").TemplateResult<1>;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/pagination/pagination.element.js CHANGED Viewed

@@ -68,7 +68,7 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
     );
     const rangeBaseWidth = containerWidth - navButtonsWidth;
     const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;
-    this._range = Math.max(1, Math.floor(range));
+    this._range = Math.max(0, Math.floor(range));
     this._visiblePages = this._generateVisiblePages(this.current);
   }
   _generateVisiblePages(current) {
@@ -148,9 +148,7 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
   renderFirst() {
     return html`<uui-button
       compact
-      look="outline"
       class="nav"
-      role="listitem"
       label=${this.firstLabel}
       ?disabled=${this._current === 1}
       @click=${() => this.goToPage(1)}></uui-button>`;
@@ -158,9 +156,7 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
   renderPrevious() {
     return html`<uui-button
       compact
-      look="outline"
       class="nav"
-      role="listitem"
       label=${this.previousLabel}
       ?disabled=${this._current === 1}
       @click=${this.goToPreviousPage}></uui-button>`;
@@ -168,8 +164,6 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
   renderNext() {
     return html`<uui-button
       compact
-      look="outline"
-      role="listitem"
       class="nav"
       label=${this.nextLabel}
       ?disabled=${this._current === this.total}
@@ -179,8 +173,6 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
     return html`
       <uui-button
         compact
-        look="outline"
-        role="listitem"
         class="nav"
         label=${this.lastLabel}
         ?disabled=${this.total === this._current}
@@ -196,7 +188,7 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
       class="dots"
       label="More pages"
       >...</uui-button
-    > `;
+    >`;
   }
   renderPage(page) {
     return html`<uui-button
@@ -214,38 +206,50 @@ const _UUIPaginationElement = class _UUIPaginationElement extends LitElement {
       ${page}
     </uui-button>`;
   }
+  renderLeftDots() {
+    return html` ${this._visiblePages.includes(1) ? "" : this.renderDots()}`;
+  }
+  renderRightDots() {
+    return html`${this._visiblePages.includes(this.total) ? "" : this.renderDots()}`;
+  }
   renderNavigationLeft() {
-    return html` ${this.renderFirst()} ${this.renderPrevious()}
-    ${this._visiblePages.includes(1) ? "" : this.renderDots()}`;
+    return html` ${this.renderFirst()} ${this.renderPrevious()}`;
   }
   renderNavigationRight() {
-    return html`${this._visiblePages.includes(this.total) ? "" : this.renderDots()}
-    ${this.renderNext()} ${this.renderLast()}`;
+    return html` ${this.renderNext()} ${this.renderLast()}`;
   }
   render() {
-    return html`<uui-button-group role="list" id="pages">
+    return html`
       ${this.renderNavigationLeft()}
-      ${this._visiblePages.map(
+      <uui-button-group role="list" id="pages">
+        ${this.renderLeftDots()}
+        ${this._visiblePages.map(
       (page) => this.renderPage(page)
     )}
+        ${this.renderRightDots()}
+      </uui-button-group>
       ${this.renderNavigationRight()}
-    </uui-button-group>
     `;
   }
 };
 _UUIPaginationElement.styles = [
   css`
-      uui-button-group {
+      :host {
+        display: inline-flex;
         width: 100%;
+        gap: 1px;
+      }
+      uui-button-group {
+        flex-grow: 1;
       }
-      uui-button {
+      uui-button-group uui-button {
         --uui-button-border-color: var(--uui-color-border-standalone);
         --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);
         --uui-button-border-color-disabled: var(--uui-color-border-standalone);
       }
-      uui-button:hover {
+      uui-button-group uui-button:hover {
         z-index: 1;
       }
@@ -263,6 +267,8 @@ _UUIPaginationElement.styles = [
       .dots {
         pointer-events: none;
+        min-width: 36px;
+        max-width: 72px;
       }
       .active {

package/dist/components/pagination/pagination.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.element.js","sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/*\n @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n /\nexport class UUIPaginationElement extends LitElement {\n private readonly _observer = new ResizeObserver(\n this._calculateRange.bind(this),\n );\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n disconnectedCallback() {\n this._observer.disconnect();\n }\n\n firstUpdated() {\n this._observer.observe(this._pagesGroup);\n\n this.updateLabel();\n this._calculateRange();\n }\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('current') \|\| changedProperties.has('label')) {\n this.updateLabel();\n }\n }\n\n protected updateLabel() {\n this.ariaLabel = `${this.label \|\| 'Pagination navigation'}. Current page: ${\n this.current\n }.`;\n }\n\n private _calculateRange() {\n const containerWidth = this.offsetWidth;\n\n // get all the buttons with .nav-button class and sum up their widths\n const navButtonsWidth = Array.from(this._navButtons).reduce(\n (totalWidth, button) => {\n return totalWidth + button.getBoundingClientRect().width;\n },\n 0,\n );\n\n // subtract width of nav-buttons from the pagination container\n const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n this._range = Math.max(1, Math.floor(range));\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n private _generateVisiblePages(current: number) {\n let start: number;\n if (current < this._range) {\n start = 1;\n } else if (current < this.total - this._range) {\n start = current - this._range;\n } else {\n start = this.total - this._range 2;\n }\n\n let stop: number;\n if (current <= this._range) {\n stop = this._range * 2 + 1;\n } else if (current < this.total - this._range) {\n stop = current + this._range;\n } else {\n stop = this.total;\n }\n\n const pages = arrayOfNumbers(\n limit(start, 1, this.total),\n limit(stop, 1, this.total),\n );\n\n return pages;\n }\n\n @queryAll('uui-button.nav')\n private readonly _navButtons!: Array<UUIButtonElement>;\n\n @query('#pages')\n private readonly _pagesGroup!: any;\n\n /*\n This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n * @type {string}\n * @attr\n /\n @property()\n label = '';\n\n /\n With this property you can overwrite aria-label.\n * @type {string}\n * @attr\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n This property is used to generate the name of the first button\n * @type {string}\n * @attr\n /\n @property()\n firstLabel: string = 'First';\n\n /\n This property is used to generate the name of the previous button\n * @type {string}\n * @attr\n /\n @property()\n previousLabel: string = 'Previous';\n\n /\n This property is used to generate the name of the next button\n * @type {string}\n * @attr\n /\n @property()\n nextLabel: string = 'Next';\n /\n This property is used to generate the name of the last button\n * @type {string}\n * @attr\n /\n @property()\n lastLabel: string = 'Last';\n\n private _total = 100;\n\n /\n Set the amount of pages to navigate.\n * @type {number}\n * @attr\n * @default: 1\n /\n @property({ type: Number })\n get total() {\n return this._total;\n }\n set total(newValue: number) {\n this._total = newValue;\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('total', newValue);\n }\n\n @state()\n private _range = 0;\n\n @state()\n private _visiblePages: number[] = [];\n\n private _current = 1;\n\n /\n Define the current active page.\n * @type {number}\n * @attr\n /\n @property({ type: Number })\n get current() {\n return this._current;\n }\n set current(newValue: number) {\n const oldValue = this._current;\n this._current = limit(newValue, 1, this.total);\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('current', oldValue);\n }\n\n /\n This method will change the page to a next one.\n * @memberof UUIPaginationElement\n /\n goToNextPage() {\n this.current++;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to a previous one.\n * @memberof UUIPaginationElement\n /\n goToPreviousPage() {\n this.current--;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to the one passed as an argument to this method.\n * @param {number} page\n * @memberof UUIPaginationElement\n /\n goToPage(page: number) {\n this.current = page;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /* When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n protected focusActivePage() {\n requestAnimationFrame(() => {\n // for none range changing clicks we need to ensure a rendering before querying.\n const activeButtonElement =\n this.renderRoot.querySelector<HTMLElement>('.active');\n if (activeButtonElement) {\n activeButtonElement.focus();\n }\n });\n }\n\n protected renderFirst() {\n return html`<uui-button\n compact\n look=\"outline\"\n class=\"nav\"\n role=\"listitem\"\n label=${this.firstLabel}\n ?disabled=${this._current === 1}\n @click=${() => this.goToPage(1)}></uui-button>`;\n }\n\n protected renderPrevious() {\n return html`<uui-button\n compact\n look=\"outline\"\n class=\"nav\"\n role=\"listitem\"\n label=${this.previousLabel}\n ?disabled=${this._current === 1}\n @click=${this.goToPreviousPage}></uui-button>`;\n }\n\n protected renderNext() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n class=\"nav\"\n label=${this.nextLabel}\n ?disabled=${this._current === this.total}\n @click=${this.goToNextPage}></uui-button>`;\n }\n\n protected renderLast() {\n return html`\n <uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n class=\"nav\"\n label=${this.lastLabel}\n ?disabled=${this.total === this._current}\n @click=${() => this.goToPage(this.total)}></uui-button>\n `;\n }\n\n protected renderDots() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n tabindex=\"-1\"\n class=\"dots\"\n label=\"More pages\"\n >...</uui-button\n > `;\n }\n\n protected renderPage(page: number) {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n label=\"Go to page ${page}\"\n class=${'page' + (page === this._current ? ' active' : '')}\n tabindex=${page === this._current ? '-1' : ''}\n @click=${() => {\n if (page === this._current) return;\n this.goToPage(page);\n this.focusActivePage();\n }}>\n ${page}\n </uui-button>`;\n }\n\n protected renderNavigationLeft() {\n return html` ${this.renderFirst()} ${this.renderPrevious()}\n ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n }\n\n protected renderNavigationRight() {\n return html`${this._visiblePages.includes(this.total)\n ? ''\n : this.renderDots()}\n ${this.renderNext()} ${this.renderLast()}`;\n }\n\n render() {\n // prettier-ignore\n return html`<uui-button-group role=\"list\" id=\"pages\">\n ${this.renderNavigationLeft()}\n ${this._visiblePages.map(\n page =>\n this.renderPage(page)\n )}\n ${this.renderNavigationRight()}\n </uui-button-group>\n `;\n }\n\n static override readonly styles = [\n css`\n uui-button-group {\n width: 100%;\n }\n\n uui-button {\n --uui-button-border-color: var(--uui-color-border-standalone);\n --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n }\n\n uui-button:hover {\n z-index: 1;\n }\n\n .page {\n min-width: 36px;\n max-width: 72px;\n }\n .page.active {\n z-index: 1;\n }\n\n .nav {\n min-width: 72px;\n }\n\n .dots {\n pointer-events: none;\n }\n\n .active {\n pointer-events: none;\n --uui-button-font-weight: 700;\n --uui-button-contrast: var(--uui-color-selected);\n --uui-button-border-color: var(--uui-color-selected);\n --uui-button-border-width: 2px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"pagination.element.js","sources":["../../../src/components/pagination/pagination.element.ts"],"sourcesContent":["import type { UUIButtonElement } from '../button/button.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, queryAll, state } from 'lit/decorators.js';\n\nimport { UUIPaginationEvent } from './UUIPaginationEvent.js';\n\nimport '../button/button.js';\nimport '../button-group/button-group.js';\n\n//this is how wide the button gets when it has 3 digits inside.\nconst PAGE_BUTTON_MAX_WIDTH = 45;\n\nconst limit = (val: number, min: number, max: number) => {\n return Math.min(Math.max(val, min), max);\n};\n\nconst arrayOfNumbers = (start: number, stop: number) => {\n return Array.from({ length: stop - start + 1 }, (_, i) => start + i);\n};\n\n/*\n @element uui-pagination\n * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.\n * @fires change - When clicked on the page button fires change event\n /\nexport class UUIPaginationElement extends LitElement {\n private readonly _observer = new ResizeObserver(\n this._calculateRange.bind(this),\n );\n\n connectedCallback() {\n super.connectedCallback();\n if (!this.hasAttribute('role')) this.setAttribute('role', 'navigation');\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n disconnectedCallback() {\n this._observer.disconnect();\n }\n\n firstUpdated() {\n this._observer.observe(this._pagesGroup);\n\n this.updateLabel();\n this._calculateRange();\n }\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has('current') \|\| changedProperties.has('label')) {\n this.updateLabel();\n }\n }\n\n protected updateLabel() {\n this.ariaLabel = `${this.label \|\| 'Pagination navigation'}. Current page: ${\n this.current\n }.`;\n }\n\n private _calculateRange() {\n const containerWidth = this.offsetWidth;\n\n // get all the buttons with .nav-button class and sum up their widths\n const navButtonsWidth = Array.from(this._navButtons).reduce(\n (totalWidth, button) => {\n return totalWidth + button.getBoundingClientRect().width;\n },\n 0,\n );\n\n // subtract width of nav-buttons from the pagination container\n const rangeBaseWidth = containerWidth - navButtonsWidth;\n\n // divide remaining width by max-width of page button (when it has 3 digits), then divide by 2 to get the range.\n // Range is number of buttons visible on either \"side\" of current pag button. So, if range === 5 we shall see 11 buttons in total - 5 before the current page and 5 after. This is why we divide by 2.\n const range = rangeBaseWidth / PAGE_BUTTON_MAX_WIDTH / 2;\n this._range = Math.max(0, Math.floor(range));\n this._visiblePages = this._generateVisiblePages(this.current);\n }\n\n private _generateVisiblePages(current: number) {\n let start: number;\n if (current < this._range) {\n start = 1;\n } else if (current < this.total - this._range) {\n start = current - this._range;\n } else {\n start = this.total - this._range 2;\n }\n\n let stop: number;\n if (current <= this._range) {\n stop = this._range * 2 + 1;\n } else if (current < this.total - this._range) {\n stop = current + this._range;\n } else {\n stop = this.total;\n }\n\n const pages = arrayOfNumbers(\n limit(start, 1, this.total),\n limit(stop, 1, this.total),\n );\n\n return pages;\n }\n\n @queryAll('uui-button.nav')\n private readonly _navButtons!: Array<UUIButtonElement>;\n\n @query('#pages')\n private readonly _pagesGroup!: any;\n\n /*\n This property is used to generate a proper `aria-label`. It will be announced by screen reader as: \"<<this.label>>. Current page: <<this.current>>\"\n * @type {string}\n * @attr\n /\n @property()\n label = '';\n\n /\n With this property you can overwrite aria-label.\n * @type {string}\n * @attr\n /\n @property({ reflect: true, attribute: 'aria-label' })\n ariaLabel = '';\n\n /\n This property is used to generate the name of the first button\n * @type {string}\n * @attr\n /\n @property()\n firstLabel: string = 'First';\n\n /\n This property is used to generate the name of the previous button\n * @type {string}\n * @attr\n /\n @property()\n previousLabel: string = 'Previous';\n\n /\n This property is used to generate the name of the next button\n * @type {string}\n * @attr\n /\n @property()\n nextLabel: string = 'Next';\n /\n This property is used to generate the name of the last button\n * @type {string}\n * @attr\n /\n @property()\n lastLabel: string = 'Last';\n\n private _total = 100;\n\n /\n Set the amount of pages to navigate.\n * @type {number}\n * @attr\n * @default: 1\n /\n @property({ type: Number })\n get total() {\n return this._total;\n }\n set total(newValue: number) {\n this._total = newValue;\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('total', newValue);\n }\n\n @state()\n private _range = 0;\n\n @state()\n private _visiblePages: number[] = [];\n\n private _current = 1;\n\n /\n Define the current active page.\n * @type {number}\n * @attr\n /\n @property({ type: Number })\n get current() {\n return this._current;\n }\n set current(newValue: number) {\n const oldValue = this._current;\n this._current = limit(newValue, 1, this.total);\n this._visiblePages = this._generateVisiblePages(this._current);\n this.requestUpdate('current', oldValue);\n }\n\n /\n This method will change the page to a next one.\n * @memberof UUIPaginationElement\n /\n goToNextPage() {\n this.current++;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to a previous one.\n * @memberof UUIPaginationElement\n /\n goToPreviousPage() {\n this.current--;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /\n Change the page to the one passed as an argument to this method.\n * @param {number} page\n * @memberof UUIPaginationElement\n /\n goToPage(page: number) {\n this.current = page;\n this.dispatchEvent(new UUIPaginationEvent(UUIPaginationEvent.CHANGE));\n }\n\n /* When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */\n protected focusActivePage() {\n requestAnimationFrame(() => {\n // for none range changing clicks we need to ensure a rendering before querying.\n const activeButtonElement =\n this.renderRoot.querySelector<HTMLElement>('.active');\n if (activeButtonElement) {\n activeButtonElement.focus();\n }\n });\n }\n\n protected renderFirst() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.firstLabel}\n ?disabled=${this._current === 1}\n @click=${() => this.goToPage(1)}></uui-button>`;\n }\n\n protected renderPrevious() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.previousLabel}\n ?disabled=${this._current === 1}\n @click=${this.goToPreviousPage}></uui-button>`;\n }\n\n protected renderNext() {\n return html`<uui-button\n compact\n class=\"nav\"\n label=${this.nextLabel}\n ?disabled=${this._current === this.total}\n @click=${this.goToNextPage}></uui-button>`;\n }\n\n protected renderLast() {\n return html`\n <uui-button\n compact\n class=\"nav\"\n label=${this.lastLabel}\n ?disabled=${this.total === this._current}\n @click=${() => this.goToPage(this.total)}></uui-button>\n `;\n }\n\n protected renderDots() {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n tabindex=\"-1\"\n class=\"dots\"\n label=\"More pages\"\n >...</uui-button\n >`;\n }\n\n protected renderPage(page: number) {\n return html`<uui-button\n compact\n look=\"outline\"\n role=\"listitem\"\n label=\"Go to page ${page}\"\n class=${'page' + (page === this._current ? ' active' : '')}\n tabindex=${page === this._current ? '-1' : ''}\n @click=${() => {\n if (page === this._current) return;\n this.goToPage(page);\n this.focusActivePage();\n }}>\n ${page}\n </uui-button>`;\n }\n\n protected renderLeftDots() {\n return html` ${this._visiblePages.includes(1) ? '' : this.renderDots()}`;\n }\n protected renderRightDots() {\n return html`${this._visiblePages.includes(this.total)\n ? ''\n : this.renderDots()}`;\n }\n\n protected renderNavigationLeft() {\n return html` ${this.renderFirst()} ${this.renderPrevious()}`;\n }\n protected renderNavigationRight() {\n return html` ${this.renderNext()} ${this.renderLast()}`;\n }\n\n render() {\n // prettier-ignore\n return html`\n ${this.renderNavigationLeft()}\n <uui-button-group role=\"list\" id=\"pages\">\n ${this.renderLeftDots()}\n ${this._visiblePages.map(\n page =>\n this.renderPage(page)\n )}\n ${this.renderRightDots()}\n </uui-button-group>\n ${this.renderNavigationRight()}\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n display: inline-flex;\n width: 100%;\n gap: 1px;\n }\n uui-button-group {\n flex-grow: 1;\n }\n\n uui-button-group uui-button {\n --uui-button-border-color: var(--uui-color-border-standalone);\n --uui-button-border-color-hover: var(--uui-color-interactive-emphasis);\n --uui-button-border-color-disabled: var(--uui-color-border-standalone);\n }\n\n uui-button-group uui-button:hover {\n z-index: 1;\n }\n\n .page {\n min-width: 36px;\n max-width: 72px;\n }\n .page.active {\n z-index: 1;\n }\n\n .nav {\n min-width: 72px;\n }\n\n .dots {\n pointer-events: none;\n min-width: 36px;\n max-width: 72px;\n }\n\n .active {\n pointer-events: none;\n --uui-button-font-weight: 700;\n --uui-button-contrast: var(--uui-color-selected);\n --uui-button-border-color: var(--uui-color-selected);\n --uui-button-border-width: 2px;\n }\n `,\n ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/progress-bar/progress-bar.element.js CHANGED Viewed

@@ -37,19 +37,20 @@ const _UUIProgressBarElement = class _UUIProgressBarElement extends LitElement {
 _UUIProgressBarElement.styles = [
   css`
       :host {
-        width: 100%;
-        height: 4px;
         position: relative;
-        overflow: hidden;
-        background: var(--uui-color-surface-alt);
-        border-radius: 100px;
         display: inline-block;
+        width: 100%;
+        height: 3px;
+        overflow: clip;
+        background: var(--uui-color-surface-alt);
+        border-radius: 2px;
       }
       #bar {
         transition: width 250ms ease;
         background: var(--uui-color-positive);
         height: 100%;
+        border-radius: 2px;
         width: 0%;
       }
     `

package/dist/components/progress-bar/progress-bar.element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar.element.js","sources":["../../../src/components/progress-bar/progress-bar.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst clamp = (num: number, min: number, max: number) =>\n Math.min(Math.max(num, min), max);\n\n/*\n @element uui-progress-bar\n /\nexport class UUIProgressBarElement extends LitElement {\n private _progress = 0;\n /\n Set this to a number between 0 and 100 to reflect the progress of some operation.\n * @type {number}\n * @attr\n * @default 0\n */\n @property({ type: Number })\n get progress() {\n return this._progress;\n }\n\n set progress(newVal) {\n const oldVal = this._progress;\n this._progress = clamp(newVal, 0, 100);\n this.requestUpdate('progress', oldVal);\n }\n\n private _getProgressStyle() {\n return { width: `${this._progress}%` };\n }\n\n render() {\n return html`\n <div id=\"bar\" style=${styleMap(this._getProgressStyle())}></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n ~~width~~: ~~100%;\~~n ~~height~~: ~~4px~~;\n ~~position~~: ~~relative~~;\n overflow: ~~hidden~~;\n background: var(--uui-color-surface-alt);\n border-radius: ~~100px~~;\n ~~display: inline-block;\n~~ }\n\n #bar {\n transition: width 250ms ease;\n background: var(--uui-color-positive);\n height: 100%;\n width: 0%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,MAAM,QAAQ,CAAC,KAAa,KAAa,QACvC,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAK3B,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAAA,EAAA;AAAA,EAQpB,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAEQ,oBAAoB;AAC1B,WAAO,EAAE,OAAO,GAAG,KAAK,SAAS,IAAA;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,4BACiB,SAAS,KAAK,kBAAA,CAAmB,CAAC;AAAA;AAAA,EAE5D;~~AAsBF~~;~~AApBE~~,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9BG,IAAM,wBAAN;AASD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,sBASP,WAAA,UAAA;"}
1	+ {"version":3,"file":"progress-bar.element.js","sources":["../../../src/components/progress-bar/progress-bar.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst clamp = (num: number, min: number, max: number) =>\n Math.min(Math.max(num, min), max);\n\n/*\n @element uui-progress-bar\n /\nexport class UUIProgressBarElement extends LitElement {\n private _progress = 0;\n /\n Set this to a number between 0 and 100 to reflect the progress of some operation.\n * @type {number}\n * @attr\n * @default 0\n */\n @property({ type: Number })\n get progress() {\n return this._progress;\n }\n\n set progress(newVal) {\n const oldVal = this._progress;\n this._progress = clamp(newVal, 0, 100);\n this.requestUpdate('progress', oldVal);\n }\n\n private _getProgressStyle() {\n return { width: `${this._progress}%` };\n }\n\n render() {\n return html`\n <div id=\"bar\" style=${styleMap(this._getProgressStyle())}></div>\n `;\n }\n\n static override readonly styles = [\n css`\n :host {\n position: relative;\n display: inline-block;\n width: 100%;\n height: 3px;\n overflow: clip;\n background: var(--uui-color-surface-alt);\n border-radius: 2px;\n }\n\n #bar {\n transition: width 250ms ease;\n background: var(--uui-color-positive);\n height: 100%;\n border-radius: 2px;\n width: 0%;\n }\n `,\n ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAIA,MAAM,QAAQ,CAAC,KAAa,KAAa,QACvC,KAAK,IAAI,KAAK,IAAI,KAAK,GAAG,GAAG,GAAG;AAK3B,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAAA,EAAA;AAAA,EAQpB,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAEQ,oBAAoB;AAC1B,WAAO,EAAE,OAAO,GAAG,KAAK,SAAS,IAAA;AAAA,EACnC;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,4BACiB,SAAS,KAAK,kBAAA,CAAmB,CAAC;AAAA;AAAA,EAE5D;AAuBF;AArBE,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9BG,IAAM,wBAAN;AASD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARf,sBASP,WAAA,UAAA;"}