@fluentui/web-components 3.0.0-beta.32 → 3.0.0-beta.34

package/dist/esm/menu-item/menu-item.js

@@ -1,7 +1,6 @@
 import { __decorate } from "tslib";
-import { autoUpdate, computePosition, flip, shift, size } from '@floating-ui/dom';
-import { attr, FASTElement, observable, Updates } from '@microsoft/fast-element';
-import { keyArrowLeft, keyArrowRight, keyEnter, keyEscape, keySpace } from '@microsoft/fast-web-utilities';
+import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { keyArrowLeft, keyArrowRight, keyEnter, keySpace } from '@microsoft/fast-web-utilities';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
@@ -10,21 +9,13 @@ export { MenuItemRole, roleForMenuItem };
  * A Switch Custom HTML Element.
  * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#menuitem | ARIA menuitem }, {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemcheckbox | ARIA menuitemcheckbox}, or {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio | ARIA menuitemradio }.
  *
- * @slot checked-indicator - The checked indicator
- * @slot radio-indicator - The radio indicator
+ * @slot indicator - The checkbox or radio indicator
  * @slot start - Content which can be provided before the menu item content
- * @slot end - Content which can be provided after the menu item content
  * @slot - The default slot for menu item content
- * @slot expand-collapse-indicator - The expand/collapse indicator
+ * @slot end - Content which can be provided after the menu item content
+ * @slot submenu-glyph - The submenu expand/collapse indicator
  * @slot submenu - Used to nest menu's within menu items
- * @csspart input-container - The element representing the visual checked or radio indicator
- * @csspart checkbox - The element wrapping the `menuitemcheckbox` indicator
- * @csspart radio - The element wrapping the `menuitemradio` indicator
  * @csspart content - The element wrapping the menu item content
- * @csspart expand-collapse-glyph-container - The element wrapping the expand collapse element
- * @csspart expand-collapse - The expand/collapse element
- * @csspart submenu-region - The container for the submenu, used for positioning
- * @fires expanded-change - Fires a custom 'expanded-change' event when the expanded state changes
  * @fires change - Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
  *
  * @public
@@ -48,11 +39,11 @@ export class MenuItem extends FASTElement {
          * HTML Attribute: checked
          */
         this.checked = false;
-        this.focusSubmenuOnLoad = false;
         /**
          * @internal
          */
         this.handleMenuItemKeyDown = (e) => {
+            var _a, _b, _c;
             if (e.defaultPrevented) {
                 return false;
             }
@@ -63,21 +54,17 @@ export class MenuItem extends FASTElement {
                     return false;
                 case keyArrowRight:
                     //open/focus on submenu
-                    this.expanded && this.submenu ? this.submenu.focus() : this.expandAndFocus();
-                    return false;
-                case keyEscape:
-                    // close submenu
-                    if (this.expanded) {
-                        this.closeSubMenu();
-                        return false;
+                    if (!this.disabled) {
+                        (_a = this.submenu) === null || _a === void 0 ? void 0 : _a.togglePopover(true);
+                        (_b = this.submenu) === null || _b === void 0 ? void 0 : _b.focus();
                     }
-                    break;
+                    return false;
                 case keyArrowLeft:
                     //close submenu
-                    if (this.expanded) {
-                        this.closeSubMenu();
-                        return false;
+                    if ((_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.hasAttribute('popover')) {
+                        this.parentElement.togglePopover(false);
                     }
+                    return false;
             }
             return true;
         };
@@ -91,56 +78,42 @@ export class MenuItem extends FASTElement {
             this.invoke();
             return false;
         };
-        /**
-         * @internal
-         */
-        this.submenuLoaded = () => {
-            if (!this.focusSubmenuOnLoad) {
-                return;
-            }
-            this.focusSubmenuOnLoad = false;
-            if (this.submenu) {
-                this.submenu.focus();
-                this.setAttribute('tabindex', '-1');
-            }
-        };
         /**
          * @internal
          */
         this.handleMouseOver = (e) => {
-            if (this.disabled || !this.hasSubmenu || this.expanded) {
+            var _a;
+            if (this.disabled) {
                 return false;
             }
-            this.expanded = true;
+            (_a = this.submenu) === null || _a === void 0 ? void 0 : _a.togglePopover(true);
             return false;
         };
         /**
          * @internal
          */
         this.handleMouseOut = (e) => {
-            if (!this.expanded || this.contains(document.activeElement)) {
+            var _a;
+            if (this.contains(document.activeElement)) {
                 return false;
             }
-            this.expanded = false;
+            (_a = this.submenu) === null || _a === void 0 ? void 0 : _a.togglePopover(false);
             return false;
         };
         /**
+         * Setup required ARIA on open/close
          * @internal
          */
-        this.closeSubMenu = () => {
-            // close submenu
-            this.expanded = false;
-            this.focus();
-        };
-        /**
-         * @internal
-         */
-        this.expandAndFocus = () => {
-            if (!this.hasSubmenu) {
-                return;
+        this.toggleHandler = (e) => {
+            if (e instanceof ToggleEvent && e.newState === 'open') {
+                this.setAttribute('tabindex', '-1');
+                this.setAttribute('aria-expanded', 'true');
+                this.setSubmenuPosition();
+            }
+            if (e instanceof ToggleEvent && e.newState === 'closed') {
+                this.setAttribute('aria-expanded', 'false');
+                this.setAttribute('tabindex', '0');
             }
-            this.focusSubmenuOnLoad = true;
-            this.expanded = true;
         };
         /**
          * @internal
@@ -154,8 +127,9 @@ export class MenuItem extends FASTElement {
                     this.checked = !this.checked;
                     break;
                 case MenuItemRole.menuitem:
-                    if (this.hasSubmenu) {
-                        this.expandAndFocus();
+                    if (!!this.submenu) {
+                        this.submenu.togglePopover(true);
+                        this.submenu.focus();
                         break;
                     }
                     this.$emit('change');
@@ -167,90 +141,54 @@ export class MenuItem extends FASTElement {
                     break;
             }
         };
-    }
-    expandedChanged(prev, next) {
-        if (this.$fastController.isConnected) {
-            if (next && this.submenu) {
-                this.updateSubmenu();
+        /**
+         * Set fallback position of menu on open when CSS anchor not supported
+         * @internal
+         */
+        this.setSubmenuPosition = () => {
+            if (!CSS.supports('anchor-name', '--anchor') && !!this.submenu) {
+                const thisRect = this.getBoundingClientRect();
+                const thisSubmenuRect = this.submenu.getBoundingClientRect();
+                const inlineEnd = getComputedStyle(this).direction === 'ltr' ? 'right' : 'left';
+                // If an open submenu is too wide for the viewport, move it above.
+                if (thisRect.width + thisSubmenuRect.width > window.innerWidth * 0.75) {
+                    this.submenu.style.translate = '0 -100%';
+                    return;
+                }
+                // If the open submenu is overflows the inline-end of the window (e.g. justify-content: end),
+                // move to inline-start of menu item
+                if (thisRect[inlineEnd] + thisSubmenuRect.width > window.innerWidth) {
+                    this.submenu.style.translate = '-100% 0';
+                    return;
+                }
+                // Default to inline-end of menu item
+                this.submenu.style.translate = `${thisRect.width - 8}px 0`;
             }
-            this.$emit('expanded-change', this, { bubbles: false });
-        }
+        };
     }
     checkedChanged(oldValue, newValue) {
         if (this.$fastController.isConnected) {
             this.$emit('change');
         }
     }
-    /**
-     * @internal
-     */
-    get hasSubmenu() {
-        return !!this.submenu;
-    }
     /**
      * Sets the submenu and updates its position.
      *
      * @internal
      */
     slottedSubmenuChanged(prev, next) {
+        var _a;
+        (_a = this.submenu) === null || _a === void 0 ? void 0 : _a.removeEventListener('toggle', this.toggleHandler);
         if (next.length) {
             this.submenu = next[0];
-            this.updateSubmenu();
+            this.submenu.toggleAttribute('popover', true);
+            this.submenu.addEventListener('toggle', this.toggleHandler);
         }
     }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        var _a;
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        super.disconnectedCallback();
-    }
-    /**
-     * Calculate and apply submenu positioning.
-     *
-     * @public
-     */
-    updateSubmenu() {
-        var _a;
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        if (!this.submenu || !this.expanded) {
-            return;
-        }
-        Updates.enqueue(() => {
-            this.cleanup = autoUpdate(this, this.submenuContainer, async () => {
-                const fallbackPlacements = ['left-start', 'right-start'];
-                const { x, y } = await computePosition(this, this.submenuContainer, {
-                    middleware: [
-                        shift(),
-                        size({
-                            apply: ({ availableWidth, rects }) => {
-                                if (availableWidth < rects.floating.width) {
-                                    fallbackPlacements.push('bottom-end', 'top-end');
-                                }
-                            },
-                        }),
-                        flip({ fallbackPlacements }),
-                    ],
-                    placement: 'right-start',
-                    strategy: 'fixed',
-                });
-                Object.assign(this.submenuContainer.style, {
-                    left: `${x}px`,
-                    position: 'fixed',
-                    top: `${y}px`,
-                });
-                this.submenuLoaded();
-            });
-        });
-    }
 }
 __decorate([
     attr({ mode: 'boolean' })
 ], MenuItem.prototype, "disabled", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], MenuItem.prototype, "expanded", void 0);
 __decorate([
     attr
 ], MenuItem.prototype, "role", void 0);

package/dist/esm/menu-item/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.ts"],"names":[],"mappings":"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"}

package/dist/esm/menu-item/menu-item.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
-import { borderRadiusMedium, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Selected, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase500, fontWeightRegular, lineHeightBase200, lineHeightBase300, } from '../theme/design-tokens.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { borderRadiusMedium, colorCompoundBrandForeground1Hover, colorCompoundBrandForeground1Pressed, colorNeutralBackground1, colorNeutralBackground1Hover, colorNeutralBackground1Selected, colorNeutralBackgroundDisabled, colorNeutralForeground2, colorNeutralForeground2Hover, colorNeutralForeground2Pressed, colorNeutralForeground3, colorNeutralForegroundDisabled, colorStrokeFocus2, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontWeightRegular, lineHeightBase200, lineHeightBase300, } from '../theme/design-tokens.js';
 /** MenuItem styles
  * @public
  */
@@ -8,76 +8,25 @@ export const styles = css `
   ${display('grid')}
 
   :host {
-    grid-template-columns: 20px 20px auto 20px;
+    --indent: 0;
     align-items: center;
-    grid-gap: 4px;
-    height: 32px;
     background: ${colorNeutralBackground1};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
     border-radius: ${borderRadiusMedium};
     color: ${colorNeutralForeground2};
-    padding: 0 10px;
+    contain: layout;
     cursor: pointer;
+    /* Prevent shrinking of MenuItems when max-height is applied to MenuList */
+    flex-shrink: 0;
+    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
+    grid-gap: 4px;
+    grid-template-columns: 20px 20px auto 20px;
+    height: 32px;
     overflow: visible;
-    contain: layout;
+    padding: 0 10px;
   }
 
   :host(:hover) {
     background: ${colorNeutralBackground1Hover};
-  }
-
-  .content {
-    white-space: nowrap;
-    flex-grow: 1;
-    grid-column: auto / span 2;
-    padding: 0 2px;
-  }
-
-  .checkbox,
-  .radio {
-    display: none;
-  }
-
-  .input-container,
-  .expand-collapse-glyph-container,
-  ::slotted([slot='start']),
-  ::slotted([slot='end']),
-  :host([checked]) .checkbox,
-  :host([checked]) .radio {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    color: ${colorNeutralForeground2};
-  }
-
-  .expand-collapse-glyph-container,
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
-    height: 32px;
-    font-size: ${fontSizeBase500};
-    width: fit-content;
-  }
-
-  .input-container {
-    width: 20px;
-  }
-
-  ::slotted([slot='end']) {
-    color: ${colorNeutralForeground3};
-    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
-    white-space: nowrap;
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
-  }
-
-  .expand-collapse-glyph-container {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
-  }
-
-  :host(:hover) .input-container,
-  :host(:hover) .expand-collapse-glyph-container,
-  :host(:hover) .content {
     color: ${colorNeutralForeground2Hover};
   }
 
@@ -87,11 +36,6 @@ export const styles = css `
 
   :host(:active) {
     background-color: ${colorNeutralBackground1Selected};
-  }
-
-  :host(:active) .input-container,
-  :host(:active) .expand-collapse-glyph-container,
-  :host(:active) .content {
     color: ${colorNeutralForeground2Pressed};
   }
 
@@ -101,67 +45,48 @@ export const styles = css `
 
   :host([disabled]) {
     background-color: ${colorNeutralBackgroundDisabled};
-  }
-
-  :host([disabled]) .content,
-  :host([disabled]) .expand-collapse-glyph-container,
-  :host([disabled]) ::slotted([slot='end']),
-  :host([disabled]) ::slotted([slot='start']) {
     color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent]) {
-    display: grid;
-  }
-
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
-  }
-
-  :host([data-indent='1'][role='menuitemcheckbox']) {
-    display: grid;
+  :host([disabled]) ::slotted([slot='start']),
+  :host([disabled]) ::slotted([slot='end']) {
+    color: ${colorNeutralForegroundDisabled};
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
+  :host(:focus-visible) {
+    border-radius: ${borderRadiusMedium};
+    outline: 2px solid ${colorStrokeFocus2};
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) .expand-collapse-glyph-container {
-    grid-column: 5 / span 1;
+  .content {
+    white-space: nowrap;
+    flex-grow: 1;
+    grid-column: auto / span 2;
+    padding: 0 2px;
   }
 
-  :host([data-indent='1']) .content {
-    grid-column: 2 / span 1;
+  :host(:not([checked])) .indicator,
+  :host(:not([checked])) ::slotted([slot='indicator']),
+  :host(:not([aria-haspopup='menu'])) .submenu-glyph,
+  :host(:not([aria-haspopup='menu'])) ::slotted([slot='submenu-glyph']) {
+    display: none;
   }
 
-  :host([data-indent='1'][role='menuitemcheckbox']) .content,
-  :host([data-indent='1'][role='menuitemradio']) .content {
-    grid-column: auto / span 1;
+  ::slotted([slot='end']) {
+    color: ${colorNeutralForeground3};
+    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
+    white-space: nowrap;
   }
 
-  :host([icon]) ::slotted([slot='end']),
-  :host([data-indent='1']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
+  :host([data-indent='1']) {
+    --indent: 1;
   }
 
   :host([data-indent='2']) {
-    display: grid;
+    --indent: 2;
     grid-template-columns: 20px 20px auto auto;
   }
 
-  :host([data-indent='2']) .content {
-    grid-column: 3 / span 1;
-  }
-
-  :host([data-indent='2']) .input-container {
-    grid-column: 1 / span 1;
-  }
-
-  :host([data-indent='2']) ::slotted([slot='start']) {
-    grid-column: 2 / span 1;
-  }
-
   :host([aria-haspopup='menu']) {
     grid-template-columns: 20px auto auto 20px;
   }
@@ -170,14 +95,61 @@ export const styles = css `
     grid-template-columns: 20px 20px auto auto 20px;
   }
 
-  :host([aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 3 / span 1;
-    justify-self: flex-end;
+  .indicator,
+  ::slotted([slot='indicator']) {
+    grid-column: 1 / span 1;
+    width: 20px;
   }
 
-  :host([data-indent='2'][aria-haspopup='menu']) ::slotted([slot='end']) {
-    grid-column: 4 / span 1;
-    justify-self: flex-end;
+  ::slotted([slot='start']) {
+    display: inline-flex;
+    grid-column: calc(var(--indent)) / span 1;
   }
-`;
+
+  .content {
+    grid-column: calc(var(--indent) + 1) / span 1;
+  }
+
+  ::slotted([slot='end']) {
+    grid-column: calc(var(--indent) + 2) / span 1;
+    justify-self: end;
+  }
+
+  .submenu-glyph,
+  ::slotted([slot='submenu-glyph']) {
+    grid-column: -2 / span 1;
+    justify-self: end;
+  }
+
+  @layer popover {
+    :host {
+      anchor-name: --menu-trigger;
+      position: relative;
+    }
+
+    ::slotted([popover]) {
+      inset-area: inline-end span-block-end;
+      margin: 0;
+      max-height: var(--menu-max-height, auto);
+      position: absolute;
+      position-anchor: --menu-trigger;
+      position-try-options: flip-inline, inset-area(block-start);
+      z-index: 1;
+    }
+
+    ::slotted([popover]:not(:popover-open)) {
+      display: none;
+    }
+
+    ::slotted([popover]:popover-open) {
+      inset: unset;
+    }
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    :host([disabled]),
+    :host([disabled]) ::slotted([slot='start']),
+    :host([disabled]) ::slotted([slot='end']) {
+      color: GrayText;
+    }
+  `));
 //# sourceMappingURL=menu-item.styles.js.map

package/dist/esm/menu-item/menu-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,kCAAkC,EAClC,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;kBAOD,uBAAuB;YAC7B,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;qBACpE,kBAAkB;aAC1B,uBAAuB;;;;;;;;kBAQlB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;aAwBjC,uBAAuB;;;;;;;iBAOnB,eAAe;;;;;;;;;aASnB,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;;aAc5E,4BAA4B;;;;aAI5B,kCAAkC;;;;wBAIvB,+BAA+B;;;;;;aAM1C,8BAA8B;;;;aAI9B,oCAAoC;;;;wBAIzB,8BAA8B;;;;;;;aAOzC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE1C,CAAC"}
+{"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,kBAAkB,EAClB,kCAAkC,EAClC,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,uBAAuB;qBACpB,kBAAkB;aAC1B,uBAAuB;;;;;YAKxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;kBASvE,4BAA4B;aACjC,4BAA4B;;;;aAI5B,kCAAkC;;;;wBAIvB,+BAA+B;aAC1C,8BAA8B;;;;aAI9B,oCAAoC;;;;wBAIzB,8BAA8B;aACzC,8BAA8B;;;;;aAK9B,8BAA8B;;;;qBAItB,kBAAkB;yBACd,iBAAiB;;;;;;;;;;;;;;;;;;aAkB7B,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExF,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;GAMjC,CAAC,CACH,CAAC"}