@pushengineering/umg-web-components 2.0.6 → 3.0.1

package/dist/components/media-modal/media-modal.js

@@ -0,0 +1,269 @@
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.16.1_tslib@2.6.2_typescript@5.4.5/node_modules/tslib/tslib.es6.js';
+import { css, LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { global } from '../../styles/global.js';
+import { modal } from './styles/modal.js';
+import { header } from './styles/header.js';
+import { section } from './styles/section.js';
+import { content } from './styles/content.js';
+import { title } from './styles/title.js';
+import '../button-icon/button-icon.js';
+import { settings } from '../../scripts/settings.js';
+
+const { prefix } = settings;
+let MediaModal = class MediaModal extends LitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.stickyHeader = true;
+        this.mobileStickyBottom = true;
+        this.contentWidth = 'page-width';
+        this.mobileContentWidth = 'page-width';
+        this.icon = 'close';
+        this.buttonPosition = 'right';
+        this._historyBack = (event) => {
+            if (event.state?.modalOpen === false) {
+                this._closeModal();
+                history.pushState({ modalOpen: false }, 'Modal Closed');
+            }
+        };
+        this._handleKeyUp = (event) => {
+            if (event.key === 'Escape') {
+                this._closeModal();
+            }
+        };
+        this.openModal = () => {
+            this._openModal();
+        };
+        this.closeModal = () => {
+            this._closeModal();
+        };
+        this._isNumeric = (string) => {
+            if ((typeof (string) === 'number' || typeof (string) === 'string' && string.trim() !== '') && !isNaN(string)) {
+                return true;
+            }
+            return false;
+        };
+        window.history.pushState({ modalOpen: false }, 'Modal Closed');
+    }
+    connectedCallback() {
+        window.addEventListener('keyup', this._handleKeyUp);
+        window.addEventListener('popstate', this._historyBack);
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keyup', this._handleKeyUp);
+        window.removeEventListener('popstate', this._historyBack);
+        super.disconnectedCallback();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('visible') && this.visible) {
+            history.pushState({ modalOpen: true }, 'Modal Open', window.location.pathname);
+        }
+    }
+    _closeModal() {
+        if (this.visible) {
+            this._releaseFocus();
+            this.visible = false;
+            document.body.removeAttribute('style');
+            history.pushState({ modalOpen: false }, 'Modal Closed');
+            const event = new CustomEvent('close-modal', {
+                bubbles: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+    }
+    _openModal() {
+        if (!this.visible) {
+            this._setTabbableElements();
+            this._setlastActiveElement();
+            this._trapFocus();
+            document.body.style.overflow = 'hidden';
+            this.visible = true;
+        }
+    }
+    _setTabbableElements() {
+        if (!this._tabbableElements) {
+            this._tabbableElements = document.querySelectorAll('umg-header, umg-footer, umg-page, main');
+        }
+    }
+    _setlastActiveElement() {
+        const lastActiveFocus = document.activeElement;
+        if (lastActiveFocus) {
+            this._lastActiveElement = lastActiveFocus;
+        }
+    }
+    _trapFocus() {
+        if (this._tabbableElements && this._tabbableElements.length) {
+            this._tabbableElements.forEach((element) => {
+                element.setAttribute('inert', '');
+            });
+        }
+    }
+    _releaseFocus() {
+        if (this._tabbableElements && this._tabbableElements.length) {
+            this._tabbableElements.forEach((element) => {
+                element.removeAttribute('inert');
+            });
+        }
+        if (this._lastActiveElement instanceof HTMLElement) {
+            this._lastActiveElement.focus();
+        }
+    }
+    modalClasses() {
+        let classes = {
+            'modal--visible': this.visible,
+            'modal-header--sticky': this.stickyHeader,
+            'modal-header-sticky--bottom': this.mobileStickyBottom,
+        };
+        if (this.buttonPosition === 'left') {
+            classes = {
+                ...classes,
+                'modal-header-icon--left': true
+            };
+        }
+        return classes;
+    }
+    sectionInnerClasses() {
+        let classes = {};
+        if (this.contentWidth && !this._isNumeric(this.contentWidth)) {
+            classes = {
+                ...classes,
+                ['section-inner--' + this.contentWidth]: true
+            };
+        }
+        if (this.mobileContentWidth !== 'page-width') {
+            classes = {
+                ...classes,
+                ['section-inner--mobile-' + this.mobileContentWidth]: true
+            };
+        }
+        if (this.justifyContent) {
+            classes = {
+                ...classes,
+                ['content-justify--' + this.justifyContent]: true
+            };
+        }
+        return classes;
+    }
+    sectionInnerStyles() {
+        let styles = {};
+        if (this.contentWidth && this._isNumeric(this.contentWidth)) {
+            styles = {
+                ...styles,
+                '--umg-size-content-max-width': Number(this.contentWidth) / 16 + 'rem',
+            };
+        }
+        if (this.maxContentWidth) {
+            styles = {
+                ...styles,
+                '--umg-size-max-width': Number(this.maxContentWidth) / 16 + 'rem',
+            };
+        }
+        return styles;
+    }
+    render() {
+        return html `
+            <div
+                part="modal"
+                class="modal${classMap(this.modalClasses())}"
+                role="dialog"
+                aria-labelledby="dialog-title"
+                aria-modal="true"
+                >
+                <section
+                    part="section"
+                    class="section"
+                    >
+                    <header
+                        part="section-header"
+                        class="section__header"
+                        >
+                        <div class="col"></div>
+                        <div
+                            part="title"
+                            class="title col"
+                            >
+                            <slot name="title"></slot>
+                        </div>
+                        <div
+                            part="close-button"
+                            class="close-button col"
+                            >
+                            <slot name="close-button">
+                                <umg-button-icon
+                                    class="close-modal"
+                                    icon="${this.icon}"
+                                    size="xlarge"
+                                    padding="0"
+                                    extendInteraction
+                                    @click=${() => { this._closeModal(); }}
+                                    >
+                                </umg-button-icon>
+                            </slot>
+                        </div>
+                    </header>
+                    <div
+                        part="section-inner"
+                        class="section__inner ${classMap(this.sectionInnerClasses())}"
+                        style="${styleMap(this.sectionInnerStyles())}"
+                        >
+                        <div class="section__content">
+                            <slot name="content"></slot>
+                        </div>
+                    </div>
+                </section>
+            </div>
+      `;
+    }
+};
+MediaModal.styles = [
+    global,
+    modal,
+    header,
+    section,
+    content,
+    title,
+    css `
+            :host {
+                display: block;
+            }
+        `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MediaModal.prototype, "visible", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], MediaModal.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], MediaModal.prototype, "mobileStickyBottom", void 0);
+__decorate([
+    property()
+], MediaModal.prototype, "contentWidth", void 0);
+__decorate([
+    property()
+], MediaModal.prototype, "mobileContentWidth", void 0);
+__decorate([
+    property({ type: Number })
+], MediaModal.prototype, "maxContentWidth", void 0);
+__decorate([
+    property()
+], MediaModal.prototype, "justifyContent", void 0);
+__decorate([
+    property()
+], MediaModal.prototype, "icon", void 0);
+__decorate([
+    property()
+], MediaModal.prototype, "buttonPosition", void 0);
+MediaModal = __decorate([
+    customElement(`${prefix}-media-modal`)
+], MediaModal);
+
+export { MediaModal };
+//# sourceMappingURL=media-modal.js.map

package/dist/components/media-modal/media-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-modal.js","sources":["../../../src/components/media-modal/media-modal.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/components/media-modal/styles/buttons.d.ts

@@ -0,0 +1,2 @@
+export declare const buttons: import("lit").CSSResult;
+//# sourceMappingURL=buttons.d.ts.map

package/dist/components/media-modal/styles/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/buttons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,yBAgBnB,CAAA"}

package/dist/components/media-modal/styles/content.d.ts

@@ -0,0 +1,2 @@
+export declare const content: import("lit").CSSResult;
+//# sourceMappingURL=content.d.ts.map

package/dist/components/media-modal/styles/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/content.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,yBAmCnB,CAAA"}

package/dist/components/media-modal/styles/content.js

@@ -0,0 +1,41 @@
+import { css } from 'lit';
+
+const content = css `
+.section__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--umg-space-48);
+    min-height: 100%;
+    width: 100%;
+    padding-bottom: calc(100vh * 0.15);
+    padding-right: var(--umg-space-16);
+    padding-left: var(--umg-space-16);
+    --umg-color-base-text: var(--umg-color-modal-text);
+    --umg-color-button-text: var(--umg-color-modal-background, var(--umg-color-base-background));
+    --umg-color-button-background: var(--umg-color-modal-text, var(--umg-color-base-text));
+    --umg-color-icon-text: var(--umg-color-modal-text, var(--umg-color-base-text));
+    --umg-color-icon-border: var(--umg-color-modal-text, var(--umg-color-base-text));
+    --umg-color-icon-background: transparent;
+}
+@media only screen and (max-width: 48rem) {
+    .section__content {
+        gap: var(--umg-space-16);
+    }
+}
+
+/* Vertical alignment */
+.content-justify--start .section__content {
+    justify-content: start;
+}
+.content-justify--center .section__content {
+    justify-content: center;
+}
+.content-justify--end .section__content {
+    justify-content: end;
+}
+`;
+
+export { content };
+//# sourceMappingURL=content.js.map

package/dist/components/media-modal/styles/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../src/components/media-modal/styles/content.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/media-modal/styles/header.d.ts

@@ -0,0 +1,2 @@
+export declare const header: import("lit").CSSResult;
+//# sourceMappingURL=header.d.ts.map

package/dist/components/media-modal/styles/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/header.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+FlB,CAAA"}

package/dist/components/media-modal/styles/header.js

@@ -0,0 +1,101 @@
+import { css } from 'lit';
+
+const header = css `
+    .section__header {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: var(--umg-space-16, 1rem) var(--umg-space-24, 1.5rem);
+        line-height: 1;
+    }
+
+    /* Sticky option */
+    .modal-header--sticky .section__header {
+        position: sticky;
+        top: 0;
+        left: 0;
+        z-index: 100;
+        width: 100%;
+    }
+
+    /* Center title */
+    .section__header .col {
+        flex: 1;
+    }
+    .section__header .col:first-child {
+        margin-right: auto;
+    }
+    .section__header .title {
+        margin-left: auto;
+        text-align: center;
+    }
+    .section__header .close-button {
+        margin-left: auto;
+        text-align: right;
+    }
+
+    /* Icon position */
+    .modal-header-icon--left .section__header {
+        flex-direction: row-reverse;
+    }
+    .modal-header-icon--left .section__header .col:first-child  {
+        margin-left: auto;
+    }
+    .modal-header-icon--left .section__header .col:last-child  {
+        margin-right: auto;
+        text-align: left;
+    }
+    @media screen and (max-width: 48rem) {
+        .section__header .title  {
+            text-align: left;
+        }
+        .modal-header-icon--left .section__header .title  {
+            text-align: right;
+        }
+    }
+    
+    /* Mobile header */
+    @media screen and (max-width: 48rem) {
+        .modal-header--sticky.modal-header-sticky--bottom .section__header {
+            position: fixed;
+            top: initial;
+            bottom: 0;
+            z-index: 100;
+            width: 100%;
+        }
+        .section__header {
+            padding: var(--umg-space-16);
+        }
+        .section__header .close-button {
+            flex: 0;
+        }
+        .section__header .title {
+            --umg-font-heading-scale: 0.6;
+        }
+        .section__header .col:first-child {
+            display: none;
+        }
+    }
+
+    /** Header colour */
+    .section__header {
+        color: var(--umg-color-modal-text, var(--umg-color-base-text));
+        background-color: var(--umg-color-modal-background, var(--umg-color-base-background));
+        --umg-color-base-text: var(--umg-color-modal-header-text, var(--umg-color-modal-text));
+        --umg-color-button-text: var(--umg-color-modal-header-background, var(--umg-color-base-background));
+        --umg-color-button-background: var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text)));
+        --umg-color-icon-text: var(--umg-color-modal-header-text, , var(--umg-color-modal-text, var(--umg-color-base-text)));
+        --umg-color-icon-border: var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text)));
+        --umg-color-icon-background: transparent;
+    }
+
+    @supports (color: rgb(from white r g b)) {
+        .section__header {
+            color: rgb(from var(--umg-color-modal-header-text, var(--umg-color-modal-text, var(--umg-color-base-text))) r g b);
+            background-color: rgb(from var(--umg-color-modal-header-background, var(--umg-color-modal-background, var(--umg-color-base-background))) r g b / alpha);
+        }
+    }
+`;
+
+export { header };
+//# sourceMappingURL=header.js.map

package/dist/components/media-modal/styles/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sources":["../../../../src/components/media-modal/styles/header.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/media-modal/styles/modal.d.ts

@@ -0,0 +1,2 @@
+export declare const modal: import("lit").CSSResult;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/media-modal/styles/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/modal.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAkCjB,CAAA"}

package/dist/components/media-modal/styles/modal.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+
+const modal = css `
+    .modal {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        z-index: 1000;
+        color: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0)));
+        background-color: var(--umg-color-modal-background, var(--umg-color-base-background, rgb(255,255,255)));
+        background-image: var(--umg-image-modal-background);
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    @supports (color: rgb(from white r g b)) {
+        .modal {
+            color: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b);
+            background-color: rgb(from var(--umg-color-modal-background, var(--umg-color-base-background, rgb(255,255,255))) r g b / calc(alpha * var(--umg-opacity-modal-background, 1)));
+        }
+    }
+
+    .modal--visible {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    @media only screen and (min-width: 48.06rem) {
+        .modal--visible {
+            align-items: center;
+        }
+    }
+`;
+
+export { modal };
+//# sourceMappingURL=modal.js.map

package/dist/components/media-modal/styles/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../src/components/media-modal/styles/modal.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/media-modal/styles/section.d.ts

@@ -0,0 +1,2 @@
+export declare const section: import("lit").CSSResult;
+//# sourceMappingURL=section.d.ts.map

package/dist/components/media-modal/styles/section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/section.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,yBA0DnB,CAAA"}

package/dist/components/media-modal/styles/section.js

@@ -0,0 +1,64 @@
+import { css } from 'lit';
+
+const section = css `
+.section {
+    display: flex;
+    flex-direction: column;
+    min-height: 100svh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+.section__inner {
+    flex: 1;
+    margin: 0 auto;
+    max-width:  var(--umg-size-max-width, var(--umg-size-content-max-width, 75rem));
+    width: 100%;
+}
+
+.section__inner.section-inner--full-bleed,
+.section__inner.section-inner--full-width {
+    max-width: var(--umg-size-max-width, 100%);
+}
+
+.section__inner.section-inner--full-bleed .section__content {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+@media screen and (max-width: 48rem) {
+    .section__inner.section-inner--mobile-full-bleed,
+    .section__inner.section-inner--mobile-full-width {
+        max-width: var(--umg-size-max-width, 100%);
+    }
+    .section__inner.section-inner--mobile-full-bleed .section__content {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
+/* Scroll */
+@media screen and (min-width: 48.06) {
+    .section::-webkit-scrollbar {
+        width: 0.5rem;
+    }
+    .section::-webkit-scrollbar-track {
+        background: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0,0.2)));
+    }
+    .section::-webkit-scrollbar-thumb{
+        background: var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0,0.5)));
+    }
+    @supports (color: rgb(from white r g b)) {
+        .section::-webkit-scrollbar-track {
+            background: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / 0.2);
+        }
+        .section::-webkit-scrollbar-thumb{
+            background: rgb(from var(--umg-color-modal-text, var(--umg-color-base-text, rgb(0,0,0))) r g b / 0.5);
+        }
+    }
+}
+`;
+
+export { section };
+//# sourceMappingURL=section.js.map

package/dist/components/media-modal/styles/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sources":["../../../../src/components/media-modal/styles/section.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,OAAO,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/media-modal/styles/title.d.ts

@@ -0,0 +1,2 @@
+export declare const title: import("lit").CSSResult;
+//# sourceMappingURL=title.d.ts.map

package/dist/components/media-modal/styles/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../../../src/components/media-modal/styles/title.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,yBAyBjB,CAAA"}

package/dist/components/media-modal/styles/title.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+
+const title = css `
+
+    @media screen and (min-width: 48.06rem) {
+        .desktop-title {
+        display: block;
+        }
+        .mobile-title {
+            display: none;
+        }
+
+    }
+    @media screen and (max-width: 48rem) {
+        .desktop-title {
+        display: none;
+        }
+        .mobile-title {
+            display: block;
+        }
+    }
+
+    /* Maintain centred title  */
+    .desktop-title,
+    .mobile-title {
+        text-align: center;
+    }
+`;
+
+export { title };
+//# sourceMappingURL=title.js.map

package/dist/components/media-modal/styles/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../../src/components/media-modal/styles/title.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEO,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/media-text/index.d.ts

@@ -1,2 +1,3 @@
 import { MediaText } from './media-text';
 export { MediaText };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/media-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/media-text/media-text.d.ts

@@ -13,18 +13,17 @@ export declare class MediaText extends LitElement {
     justifyContent: string;
     mobileJustifyContent: string;
     spacing: string;
+    adaptivePadding: boolean;
     padding: string | undefined;
     mobilePadding: string | undefined;
     paddingTop: string | undefined;
     paddingRight: string | undefined;
     paddingBottom: string | undefined;
     paddingLeft: string | undefined;
-    colorBg: string | undefined;
-    colorText: string | undefined;
-    opacity: string | undefined;
     gridClasses(): any;
     contentStackClasses(): any;
-    mediaTextStyles(): {};
+    mobileGap(): number | undefined;
     render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultArray;
 }
+//# sourceMappingURL=media-text.d.ts.map

package/dist/components/media-text/media-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-text.d.ts","sourceRoot":"","sources":["../../../src/components/media-text/media-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAM3C,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAElD,OAAO,SAAS,CAAA;AAChB,OAAO,oBAAoB,CAAA;AAU3B,qBAEa,SAAU,SAAQ,UAAU;IAGrC,SAAS,SAAU;IAGnB,WAAW,EAAE,SAAS,CAAU;IAGhC,UAAU,EAAE,SAAS,CAAW;IAGhC,YAAY,UAAQ;IAGpB,UAAU,UAAQ;IAGlB,YAAY,SAAW;IAGvB,kBAAkB,SAAW;IAG7B,cAAc,SAAW;IAGzB,oBAAoB,SAAW;IAG/B,OAAO,SAAM;IAGb,eAAe,UAAQ;IAGvB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAA;IAG3B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IAGjC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAA;IAG9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAGhC,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IAGjC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAE/B,WAAW;IAYX,mBAAmB;IAUnB,SAAS;IAMT,MAAM;IAkDN,MAAM,CAAC,MAAM,+BAiHX;CACL"}