@statistikzh/leu 0.5.1 → 0.6.0

package/dist/Menu.js

@@ -1,5 +1,8 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
+import { LeuMenuItem } from './MenuItem.js';
+import 'lit/directives/if-defined.js';
+import './Icon.js';
 
 var css_248z = css`:host,
 :host * {
@@ -24,14 +27,128 @@ var css_248z = css`:host,
 }
 `;
 
+/**
+ * @typedef {'single' | 'multiple' | 'none'} SelectsType
+ */
+
 /**
  * @tagname leu-menu
+ * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
-class LeuMenu extends LitElement {
+class LeuMenu extends LeuElement {
+  constructor() {
+    super();
+
+    /** @type {SelectsType} */
+    this.selects = "none";
+    this.value = undefined;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.getAttribute("role")) {
+      this.setAttribute("role", "menu");
+    }
+    this.addEventListener("keydown", this._handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _handleSlotChange() {
+    this.setCurrentItem(0);
+    this._setMenuItemRoles();
+  }
+  _setMenuItemRoles() {
+    const menuRole = this.getAttribute("role");
+    let menuItemRole;
+    if (menuRole === "menu") {
+      if (this.selects === "multiple") {
+        menuItemRole = "menuitemcheckbox";
+      } else if (this.selects === "single") {
+        menuItemRole = "menuitemradio";
+      } else {
+        menuItemRole = "menuitem";
+      }
+    } else if (menuRole === "listbox") {
+      menuItemRole = "option";
+    }
+    if (menuItemRole) {
+      this.getMenuItems().forEach(menuItem => {
+        menuItem.componentRole = menuItemRole; // eslint-disable-line no-param-reassign
+      });
+    }
+  }
+
+  /**
+   *
+   * @returns {import("./MenuItem").LeuMenuItem[]}
+   */
+  getMenuItems() {
+    const slot = this.shadowRoot.querySelector("slot");
+    return slot.assignedElements({
+      flatten: true
+    }).filter(el => el instanceof LeuMenuItem);
+  }
+  getVisibleMenuItems() {
+    return this.getMenuItems().filter(menuItem => !menuItem.hidden);
+  }
+  _handleKeyDown(event) {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const menuItems = this.getVisibleMenuItems();
+      let index = menuItems.findIndex(menuItem => menuItem.tabbable);
+      if (event.key === "ArrowDown") {
+        index += 1;
+      } else if (event.key === "ArrowUp") {
+        index -= 1;
+      } else if (event.key === "Home") {
+        index = 0;
+      } else if (event.key === "End") {
+        index = menuItems.length - 1;
+      }
+      this.focusItem(index);
+    }
+  }
+  setCurrentItem(index) {
+    const menuItems = this.getVisibleMenuItems();
+    let currentItem = null;
+    const currentItemIndex = (index + menuItems.length) % menuItems.length;
+    menuItems.forEach((menuItem, i) => {
+      if (i === currentItemIndex) {
+        currentItem = menuItem;
+        menuItem.tabbable = true; // eslint-disable-line no-param-reassign
+      } else {
+        menuItem.tabbable = false; // eslint-disable-line no-param-reassign
+      }
+    });
+    return currentItem;
+  }
+  focusItem(index) {
+    const currentItem = this.setCurrentItem(index);
+    currentItem.focus();
+  }
+  firstUpdated() {
+    this.setCurrentItem(0);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("selects")) {
+      this._setMenuItemRoles();
+    }
+  }
   render() {
     return html`<slot></slot>`;
   }
 }
 _defineProperty(LeuMenu, "styles", css_248z);
+_defineProperty(LeuMenu, "shadowRootOptions", {
+  ...LeuElement.shadowRootOptions,
+  delegatesFocus: true
+});
+_defineProperty(LeuMenu, "properties", {
+  selects: {
+    type: String,
+    reflect: true
+  }
+});
 
 export { LeuMenu };

package/dist/MenuItem.d.ts

@@ -1,21 +1,38 @@
+export type MenuItemRole = "menuitem" | "menuitemcheckbox" | "menuitemradio" | "option" | "none";
+/**
+ * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
+ */
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
+ * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} disabled - Disables the underlying button or link
+ * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
+ * @property {string} href - The href of the underlying link
+ * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
+ * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
-export class LeuMenuItem extends LitElement {
-    static getIconOrText(name: any): any;
+export class LeuMenuItem extends LeuElement {
     active: boolean;
     disabled: boolean;
+    value: any;
+    href: any;
+    tabbable: any;
+    /** @type {MenuItemRole} */
+    componentRole: MenuItemRole;
+    _handleClick(event: any): void;
     /**
-     * A programmatic way to highlight the menu item like it is hovered.
-     * This is just a visual effect and does not change the active state.
+     * Returns the value of the item. If `value` is not set, it will return the inner text
+     * @returns {string}
      */
-    highlighted: boolean;
-    renderBefore(): typeof nothing | import("lit-html").TemplateResult;
-    renderAfter(): typeof nothing | import("lit-html").TemplateResult;
-    getTagName(): "button" | "a";
-    render(): import("lit-html").TemplateResult;
+    getValue(): string;
+    _getAria(): {
+        disabled: boolean;
+    };
+    _getTabIndex(): 0 | -1;
+    _renderLink(content: any): import("lit-html").TemplateResult<1>;
+    _renderButton(content: any): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
-import { nothing } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"AAsFA;;;GAGG;AACH;IAYE,qCAQC;IAjBC,gBAAmB;IACnB,kBAAqB;IAErB;;;OAGG;IACH,qBAAwB;IAW1B,mEAMC;IACD,kEAMC;IACD,6BAEC;IACD,4CAQC;CACF;2BAxIwC,KAAK;wBAAL,KAAK"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["MenuItem.js"],"names":[],"mappings":"2BA8Fa,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,MAAM;AADlF;;GAEG;AAEH;;;;;;;;;GASG;AACH;IAGI,gBAAmB;IACnB,kBAAqB;IACrB,WAAsB;IACtB,UAAqB;IACrB,cAAyB;IAEzB,2BAA2B;IAC3B,eADW,YAAY,CACQ;IAUjC,+BAKC;IAED;;;OAGG;IACH,YAFa,MAAM,CAIlB;IACD;;MAaC;IACD,uBAKC;IACD,gEAYC;IACD,kEAYC;IACD,+CAOC;CACF;gCAnMqD,0BAA0B"}

package/dist/MenuItem.js

@@ -1,8 +1,7 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, nothing } from 'lit';
-import { html, unsafeStatic } from 'lit/static-html.js';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { a as ICON_NAMES, I as Icon } from './icon-03e86700.js';
+import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host,
 :host * {
@@ -12,9 +11,10 @@ var css_248z = css`:host,
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-func-cyan);
+  --background-active: var(--leu-color-accent-blue);
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-active: var(--leu-color-black-0);
   --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-family-regular);
   --font-black: var(--leu-font-family-black);
@@ -38,6 +38,7 @@ var css_248z = css`:host,
 
   padding: 0.75rem;
 
+  font-family: inherit;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
@@ -52,21 +53,27 @@ var css_248z = css`:host,
 }
 
 .button:hover,
-:host([highlighted]) .button {
+.button:focus-visible {
   --background: var(--background-hover);
 }
 
+/*
+ * These colors do not match with the design system (yet).
+ * But at least they are compliant with the WCAG AA contrast ratio.
+ */
+
 :host([active]) .button {
   --background: var(--background-active);
+  --color: var(--color-active);
 }
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
   --color: var(--color-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 
-.before svg, .after svg {
+.before leu-icon, .after leu-icon {
   display: block;
 }
 
@@ -84,102 +91,142 @@ var css_248z = css`:host,
 }
 `;
 
+/**
+ * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
+ */
+
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
+ * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} disabled - Disables the underlying button or link
+ * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
+ * @property {string} href - The href of the underlying link
+ * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
+ * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
-class LeuMenuItem extends LitElement {
+class LeuMenuItem extends LeuElement {
   constructor() {
     super();
     this.active = false;
     this.disabled = false;
+    this.value = undefined;
+    this.href = undefined;
+    this.tabbable = undefined;
 
-    /**
-     * A programmatic way to highlight the menu item like it is hovered.
-     * This is just a visual effect and does not change the active state.
-     */
-    this.highlighted = false;
+    /** @type {MenuItemRole} */
+    this.componentRole = "menuitem";
   }
-  static getIconOrText(name) {
-    if (ICON_NAMES.includes(name)) {
-      return Icon(name);
-    }
-    if (name === "EMPTY") {
-      return html`<div class="icon-placeholder"></div>`;
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this._handleClick, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("click", this._handleClick, true);
+  }
+  _handleClick(event) {
+    if (this.disabled) {
+      event.stopPropagation();
+      event.preventDefault();
     }
-    return name;
   }
-  renderBefore() {
-    if (this.before) {
-      const content = LeuMenuItem.getIconOrText(this.before);
-      return html`<span class="before">${content}</span>`;
+
+  /**
+   * Returns the value of the item. If `value` is not set, it will return the inner text
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.innerText;
+  }
+  _getAria() {
+    const commonAttributes = {
+      disabled: this.disabled
+    };
+    if (this.href) {
+      return commonAttributes;
     }
-    return nothing;
+    return {
+      ...commonAttributes,
+      checked: this.componentRole === "menuitemcheckbox" || this.componentRole === "menuitemradio" ? this.active : undefined,
+      selected: this.componentRole === "option" ? this.active : undefined,
+      role: this.componentRole === "none" ? undefined : this.componentRole
+    };
   }
-  renderAfter() {
-    if (this.after) {
-      const content = LeuMenuItem.getIconOrText(this.after);
-      return html`<span class="after">${content}</span>`;
+  _getTabIndex() {
+    if (typeof this.tabbable === "boolean") {
+      return this.tabbable ? 0 : -1;
     }
-    return nothing;
+    return undefined;
+  }
+  _renderLink(content) {
+    const aria = this._getAria();
+    return html`<a
+      class="button"
+      href=${this.href}
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+      >${content}</a
+    >`;
   }
-  getTagName() {
-    return this.href ? "a" : "button";
+  _renderButton(content) {
+    const aria = this._getAria();
+    return html`<button
+      class="button"
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+    >
+      ${content}
+    </button>`;
   }
   render() {
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`<${unsafeStatic(this.getTagName())} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label">${this.label}</span
-      >${this.renderAfter()}
-    </${unsafeStatic(this.getTagName())}>`;
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    const content = html`
+      <slot class="before" name="before"></slot>
+      <span class="label"><slot></slot></span>
+      <slot class="after" name="after"></slot>
+    `;
+    return this.href ? this._renderLink(content) : this._renderButton(content);
   }
 }
+_defineProperty(LeuMenuItem, "dependencies", {
+  "leu-icon": LeuIcon
+});
 _defineProperty(LeuMenuItem, "styles", css_248z);
 /**
  * @internal
  */
 _defineProperty(LeuMenuItem, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuMenuItem, "properties", {
-  /**
-   * Can be either an icon name or a text
-   * If no icon with this value is found, it will be displayed as text.
-   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
-   */
-  before: {
-    type: String,
-    reflect: true
-  },
-  /**
-   * Can be either an icon name or a text
-   * If no icon with this value is found, it will be displayed as text
-   * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
-   */
-  after: {
-    type: String,
-    reflect: true
-  },
   active: {
     type: Boolean,
     reflect: true
   },
-  highlighted: {
+  disabled: {
     type: Boolean,
     reflect: true
   },
-  disabled: {
+  tabbable: {
     type: Boolean,
     reflect: true
   },
-  label: {
+  href: {
+    type: String,
+    reflect: true
+  },
+  value: {
     type: String,
     reflect: true
   },
-  href: {
+  componentRole: {
     type: String,
     reflect: true
   }

package/dist/Pagination.d.ts

@@ -1,12 +1,19 @@
 /**
  * @tagname leu-pagination
  */
-export class LeuPagination extends LitElement {
+export class LeuPagination extends LeuElement {
     /** @type {Number} */
     numOfItems: number;
     /** @type {Number} */
     itemsPerPage: number;
-    /** @type {Number} */
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @type {Number}
+     * @internal
+     */
     _page: number;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set page(page: number);
@@ -23,5 +30,5 @@ export class LeuPagination extends LitElement {
     _handleKeyDown(event: any): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=Pagination.d.ts.map

package/dist/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.js"],"names":[],"mappings":"AA2EA;;GAEG;AACH;IAII,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,qBAAqB;IACrB,qBAAqB;IACrB,cAAc;IAEhB,oEAKC;IAID,uBAEC;IALD,mBAEC;IAID,yBAEC;IACD,uBAEC;IACD,uBAEC;IACD,wBAEC;IACD,uBAEC;IACD,8BAEC;IACD,6BAaC;IACD,gCAEC;IACD,+BAKC;IACD,iCASC;IACD,+CAsCC;CACF;2BA9LqC,KAAK"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.js"],"names":[],"mappings":"AAwEA;;GAEG;AACH;IAII,qBAAqB;IACrB,mBAAmB;IAEnB,qBAAqB;IACrB,qBAAqB;IAErB;;;;;;;OAOG;IACH,cAAc;IAEhB,oEAKC;IAID,uBAEC;IALD,mBAEC;IAID,yBAEC;IACD,uBAEC;IACD,uBAEC;IACD,wBAEC;IACD,uBAEC;IACD,8BAEC;IACD,6BAaC;IACD,gCAEC;IACD,+BAKC;IACD,iCASC;IACD,+CAsCC;CACF;gCArMqD,0BAA0B"}

package/dist/Pagination.js

@@ -1,14 +1,11 @@
-import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
-import { css, LitElement, html } from 'lit';
+import { _ as _defineProperty, L as LeuElement } from './LeuElement-6de6f209.js';
+import { css, html } from 'lit';
 import { live } from 'lit/directives/live.js';
-import './leu-button.js';
-import './leu-visually-hidden.js';
-import './defineElement-40372b4b.js';
-import './Button-5326c982.js';
+import { L as LeuButton } from './Button-9692e403.js';
+import { LeuVisuallyHidden } from './VisuallyHidden.js';
+import { LeuIcon } from './Icon.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
-import './icon-03e86700.js';
-import './VisuallyHidden.js';
 
 var css_248z = css`:host {
   margin-top: 16px;
@@ -76,15 +73,24 @@ const MIN_PAGE = 1;
 /**
  * @tagname leu-pagination
  */
-class LeuPagination extends LitElement {
+class LeuPagination extends LeuElement {
   constructor() {
     super();
 
     /** @type {Number} */
     this.numOfItems = 1;
+
     /** @type {Number} */
     this.itemsPerPage = 1;
-    /** @type {Number} */
+
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @type {Number}
+     * @internal
+     */
     this._page = 1;
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -169,33 +175,38 @@ class LeuPagination extends LitElement {
       <div class="label">von ${this._maxPage}</div>
       <div class="button-group">
         <leu-button
-          icon="angleLeft"
           variant="secondary"
           label="Vorherige Seite"
           @click=${_ => {
       this._updatePage(this.page - 1);
     }}
           ?disabled=${this._isFirstPage()}
+          ><leu-icon name="angleLeft"></leu-icon
         ></leu-button>
         <leu-button
-          icon="angleRight"
           variant="secondary"
           label="Nächste Seite"
           @click=${_ => {
       this._updatePage(this.page + 1);
     }}
           ?disabled=${this._isLastPage()}
+          ><leu-icon name="angleRight"></leu-icon
         ></leu-button>
       </div>
     `;
   }
 }
+_defineProperty(LeuPagination, "dependencies", {
+  "leu-button": LeuButton,
+  "leu-icon": LeuIcon,
+  "leu-visually-hidden": LeuVisuallyHidden
+});
 _defineProperty(LeuPagination, "styles", css_248z);
 /**
  * @internal
  */
 _defineProperty(LeuPagination, "shadowRootOptions", {
-  ...LitElement.shadowRootOptions,
+  ...LeuElement.shadowRootOptions,
   delegatesFocus: true
 });
 _defineProperty(LeuPagination, "properties", {
@@ -211,14 +222,6 @@ _defineProperty(LeuPagination, "properties", {
     type: Number,
     reflect: true
   },
-  /**
-   * Internal page state that contains an
-   * already clamped page number. Should only
-   * be accessed through the `page` getter and
-   * setter.
-   * @type {Number}
-   * @internal
-   */
   _page: {
     state: true
   }

package/dist/Popup.d.ts

@@ -1,18 +1,36 @@
+export type Placement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+/**
+ * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
+ */
 /**
  * @tagname leu-popup
  */
-export class LeuPopup extends LitElement {
+export class LeuPopup extends LeuElement {
     anchorEl: any;
     cleanup: () => void;
     flip: boolean;
     shift: boolean;
+    active: boolean;
+    /** @type {Placement} */
+    placement: Placement;
+    /** @type {"width" | "height" | "both"} */
+    matchSize: "width" | "height" | "both";
+    /** @type {"width" | "height" | "both"} */
+    autoSize: "width" | "height" | "both";
+    shiftPadding: number;
+    autoSizePadding: number;
+    /** @type {string | HTMLElement} */
+    anchor: string | HTMLElement;
     updated(changedProperties: any): void;
-    get popupEl(): Element;
+    /**
+     * @returns {HTMLElement | null}
+     */
+    get popupEl(): HTMLElement;
     start(): void;
     stop(): void;
     reposition(): void;
     handleAnchorChange(): void;
     render(): import("lit-html").TemplateResult<1>;
 }
-import { LitElement } from 'lit';
+import { L as LeuElement } from './LeuElement-6de6f209.js';
 //# sourceMappingURL=Popup.d.ts.map

package/dist/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["Popup.js"],"names":[],"mappings":"AAuCA;;GAEG;AACH;IAGI,cAAoB;IACpB,oBAAwB;IACxB,cAAiB;IACjB,eAAkB;IAMpB,sCAcC;IACD,uBAEC;IACD,cAKC;IACD,aAIC;IACD,mBAiEC;IACD,2BAiBC;IACD,+CAOC;CACF;2BA9KqC,KAAK"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["Popup.js"],"names":[],"mappings":"wBAuCa,KAAK,GAAC,WAAW,GAAC,SAAS,GAAC,QAAQ,GAAC,cAAc,GAAC,YAAY,GAAC,MAAM,GAAC,YAAY,GAAC,UAAU,GAAC,OAAO,GAAC,aAAa,GAAC,WAAW;AAD9I;;GAEG;AAEH;;GAEG;AACH;IAGI,cAAoB;IACpB,oBAAwB;IACxB,cAAiB;IACjB,eAAkB;IAClB,gBAAmB;IAEnB,wBAAwB;IACxB,WADW,SAAS,CACM;IAE1B,0CAA0C;IAC1C,WADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACZ;IAE1B,0CAA0C;IAC1C,UADW,OAAO,GAAG,QAAQ,GAAG,MAAM,CACb;IACzB,qBAAqB;IACrB,wBAAwB;IAExB,mCAAmC;IACnC,QADW,MAAM,GAAG,WAAW,CACR;IAMzB,sCAcC;IAED;;OAEG;IACH,2BAEC;IACD,cAKC;IACD,aAIC;IACD,mBAiEC;IACD,2BAiBC;IACD,+CAOC;CACF;gCArMqD,0BAA0B"}