@breadstone/mosaik-elements-foundation 0.0.205 → 0.0.209

package/Controls/Components/Selectors/Stepper/StepperElementTemplate.js

@@ -0,0 +1,113 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { classMap, repeat, when } from '../../../Directives/Directives';
+import { setEmpty } from '../../../Directives/SetEmpty';
+import { Icons } from '../../../../Resources/Icons';
+// #endregion
+/**
+ * The template of the {@link StepperElement}.
+ *
+ * @public
+ */
+export function stepperElementTemplate(e) {
+    const getStateIcon = (state) => {
+        switch (state) {
+            case 'completed':
+                return Icons.successCircle;
+            case 'error':
+                return Icons.errorCircle;
+            case 'pending':
+                return '';
+            default:
+                return '';
+        }
+    };
+    const getStateDisplayMode = (state) => {
+        switch (state) {
+            case 'completed':
+            case 'error':
+                return 'icon';
+            case 'pending':
+            default:
+                return 'text';
+        }
+    };
+    const getStateVariant = (state) => {
+        switch (state) {
+            case 'completed':
+                return 'success';
+            case 'error':
+                return 'danger';
+            case 'pending':
+            default:
+                return 'neutral';
+        }
+    };
+    return html `
+        <div part="header"
+             class="${classMap({ [`is-${e.orientation}`]: true })}">
+            ${repeat(e.items, (x) => x, (x, index) => html `
+            <div part="step-container"
+                 class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
+                <button part="step"
+                        class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
+                        type="button"
+                        role="tab"
+                        aria-selected="${x.isSelected}"
+                        aria-posinset="${index + 1}"
+                        aria-setsize="${e.items.length}"
+                        ?disabled="${x.disabled || e.disabled}"
+                        @click="${() => e.onStepInvoked(x)}">
+                    <span part="step-icon"
+                          aria-hidden="true">
+                        <mosaik-avatar part="step-state"
+                                       .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
+                                       .text="${String(index + 1)}"
+                                       .displayMode="${getStateDisplayMode(x.state)}"
+                                       .variant="${getStateVariant(x.state)}"
+                                       .appearance="${'plain'}"
+                                       .size="${'tiny'}"></mosaik-avatar>
+
+                        ${when(x.icon.trim(), () => html `
+                        <mosaik-icon part="icon" .data="${x.icon}"></mosaik-icon>
+                        `, () => html `
+                        ${when(x.state === 'completed', () => html `
+                        <mosaik-icon part="state-icon" .data="${'M4.53033 12.9697C4.23744 12.6768 3.76256 12.6768 3.46967 12.9697C3.17678 13.2626 3.17678 13.7374 3.46967 14.0303L7.96967 18.5303C8.26256 18.8232 8.73744 18.8232 9.03033 18.5303L20.0303 7.53033C20.3232 7.23744 20.3232 6.76256 20.0303 6.46967C19.7374 6.17678 19.2626 6.17678 18.9697 6.46967L8.5 16.9393L4.53033 12.9697Z'}"></mosaik-icon>
+                        `, () => when(x.state === 'error', () => html `
+                        <mosaik-icon part="state-icon" .data="${'M12 2C17.523 2 22 6.478 22 12C22 17.522 17.523 22 12 22C6.477 22 2 17.522 2 12C2 6.478 6.477 2 12 2ZM12.0018 15.0037C11.4503 15.0037 11.0031 15.4508 11.0031 16.0024C11.0031 16.5539 11.4503 17.001 12.0018 17.001C12.5533 17.001 13.0005 16.5539 13.0005 16.0024C13.0005 15.4508 12.5533 15.0037 12.0018 15.0037ZM11.9996 7C11.4868 7.00018 11.0643 7.38638 11.0067 7.88374L11 8.00036L11.0018 13.0012L11.0086 13.1179C11.0665 13.6152 11.4893 14.0011 12.0022 14.0009C12.515 14.0007 12.9375 13.6145 12.9951 13.1171L13.0018 13.0005L13 7.99964L12.9932 7.88302C12.9353 7.3857 12.5125 6.99982 11.9996 7Z'}"></mosaik-icon>
+                        `, () => html `
+                        <span part="state-index">${index + 1}</span>
+                        `))}
+                        `)}
+                    </span>
+                    <span part="step-text">
+                        <mosaik-text part="step-header"
+                                     .text="${x.header || x.displayText || ''}"></mosaik-text>
+                        ${when(x.description.trim(), () => html `
+                        <mosaik-text part="step-description"
+                                     .text="${x.description}"></mosaik-text>
+                        `)}
+                        ${when(x.hint.trim(), () => html `
+                        <mosaik-text part="step-optional"
+                                     .text="${x.hint}"></mosaik-text>
+                        `)}
+                    </span>
+                </button>
+                ${when(index < e.items.length - 1, () => html `
+                <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
+                `)}
+            </div>
+            `)}
+        </div>
+        <div part="content">
+            <slot name="steps"
+                  @slotchange="${() => e.onSlotChange()}"></slot>
+        </div>
+        <div part="footer"
+             ?hidden="${!e.hasSlotContent('footer')}">
+            <slot name="footer"
+                  @slotchange="${(x) => setEmpty(x.target.parentElement, x.target.assignedElements().length === 0)}"></slot>
+        </div>
+    `;
+}
+//# sourceMappingURL=StepperElementTemplate.js.map

package/Controls/Components/Selectors/Stepper/StepperElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Selectors/Stepper/StepperItemElement.d.ts

@@ -0,0 +1,118 @@
+import { IAnimatable } from '../../../Behaviors/Animatable';
+import { SelectorItemElement } from '../Abstracts/Selector/SelectorItemElement';
+import type { IStepperItemElementProps } from './IStepperItemElementProps';
+import { StepperElement } from './StepperElement';
+declare const StepperItemElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Animatable").IAnimatableProps & IAnimatable) & (abstract new (...args: Array<any>) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new () => SelectorItemElement<import("../Abstracts/Selector/SelectorElement").SelectorElement<any>>) & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Stepper item - Represents a single step inside a stepper.
+ *
+ * @element mosaik-stepper-item
+ * @category Selector
+ *
+ * @slot - The default slot.
+ * @slot footer - The footer slot.
+ *
+ * @public
+ */
+export declare class StepperItemElement extends StepperItemElement_base implements IStepperItemElementProps, IAnimatable {
+    private _header;
+    private _description;
+    private _hint;
+    private _icon;
+    private _state;
+    private _isActive;
+    /**
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `{@link is}` property.
+     *
+     * @public
+     * @static
+     * @override
+     * @readonly
+     */
+    static get is(): string;
+    /**
+     * Gets or sets the `header` property.
+     *
+     * @public
+     * @attr
+     */
+    get header(): string;
+    set header(value: string);
+    /**
+     * Gets or sets the `description` property.
+     *
+     * @public
+     * @attr
+     */
+    get description(): string;
+    set description(value: string);
+    /**
+     * Gets or sets the `hint` property.
+     *
+     * @public
+     * @attr
+     */
+    get hint(): string;
+    set hint(value: string);
+    /**
+     * Gets or sets the `icon` property.
+     *
+     * @public
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * Gets or sets the `state` property.
+     *
+     * @public
+     * @attr
+     */
+    get state(): 'pending' | 'completed' | 'error';
+    set state(value: 'pending' | 'completed' | 'error');
+    /**
+     * Gets or sets the `isActive` property.
+     *
+     * @public
+     * @attr
+     */
+    get isActive(): boolean;
+    set isActive(value: boolean);
+    /**
+     * Get the item parent.
+     *
+     * @protected
+     * @readonly
+     */
+    get parent(): StepperElement;
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback(): void;
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback(): void;
+    /**
+     * @protected
+     */
+    protected onIsActivePropertyChanged(_prev: boolean, next: boolean): void;
+}
+/**
+ * @public
+ */
+export declare namespace StepperItemElement {
+    type Props = IStepperItemElementProps;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-stepper-item': StepperItemElement;
+    }
+}
+export {};
+//# sourceMappingURL=StepperItemElement.d.ts.map

package/Controls/Components/Selectors/Stepper/StepperItemElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperItemElement.ts"],"names":[],"mappings":"AAIA,OAAO,EAAc,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAKxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;AASlD;;;;;;;;;;GAUG;AACH,qBAca,kBACT,SAAQ,uBACR,YAAW,wBAAwB,EAAE,WAAW;IAIhD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,SAAS,CAAU;IAM3B;;OAEG;;IAkBH;;;;;;;OAOG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAK9B;IAED;;;;;OAKG;IACH,IACW,WAAW,IAAI,MAAM,CAE/B;IAED,IAAW,WAAW,CAAC,KAAK,EAAE,MAAM,EAKnC;IAED;;;;;OAKG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAK5B;IAED;;;;;OAKG;IACH,IAIW,KAAK,IAAI,SAAS,GAAG,WAAW,GAAG,OAAO,CAEpD;IAED,IAAW,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,EAKxD;IAED;;;;;OAKG;IACH,IAIW,QAAQ,IAAI,OAAO,CAE7B;IAED,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAKjC;IAED;;;;;OAKG;IACH,IAAW,MAAM,IAAI,cAAc,CAElC;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAKzC;;;OAGG;IACa,oBAAoB,IAAI,IAAI;IAK5C;;OAEG;IAEH,SAAS,CAAC,yBAAyB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;CAW3E;AAED;;GAEG;AACH,yBAAiB,kBAAkB,CAAC;IAChC,KAAY,KAAK,GAAG,wBAAwB,CAAC;CAChD;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,kBAAkB,CAAC;KAC7C;CACJ"}

package/Controls/Components/Selectors/Stepper/StepperItemElement.js

@@ -0,0 +1,265 @@
+// #region Imports
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { fadeIn, fadeOut } from '../../../../Animations/Presets/Fade';
+import { DomServiceLocator } from '../../../../Dom/Dom';
+import { Animatable } from '../../../Behaviors/Animatable';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Watch } from '../../../Decorators/WatchDecorator';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { SelectorItemElement } from '../Abstracts/Selector/SelectorItemElement';
+import { stepperItemElementTemplate } from './StepperItemElementTemplate';
+import { StepperElement } from './StepperElement';
+import { stepperItemElementJoyStyle } from './Themes/StepperItemElement.Joy';
+import { stepperItemElementCosmopolitanStyle } from './Themes/StepperItemElement.Cosmopolitan';
+import { stepperItemElementMemphisStyle } from './Themes/StepperItemElement.Memphis';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Property } from '../../../Decorators/PropertyDecorator';
+// #endregion
+/**
+ * Stepper item - Represents a single step inside a stepper.
+ *
+ * @element mosaik-stepper-item
+ * @category Selector
+ *
+ * @slot - The default slot.
+ * @slot footer - The footer slot.
+ *
+ * @public
+ */
+let StepperItemElement = class StepperItemElement extends Themeable(Animatable(Disableable(SelectorItemElement))) {
+    // #region Fields
+    _header;
+    _description;
+    _hint;
+    _icon;
+    _state;
+    _isActive;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._header = '';
+        this._description = '';
+        this._hint = '';
+        this._icon = '';
+        this._state = 'pending';
+        this._isActive = false;
+        this.enter = fadeIn;
+        this.exit = fadeOut;
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `{@link is}` property.
+     *
+     * @public
+     * @static
+     * @override
+     * @readonly
+     */
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    static get is() {
+        return 'mosaik-stepper-item';
+    }
+    /**
+     * Gets or sets the `header` property.
+     *
+     * @public
+     * @attr
+     */
+    get header() {
+        return this._header;
+    }
+    set header(value) {
+        if (this._header !== value) {
+            this._header = value;
+            this.requestUpdate('header');
+        }
+    }
+    /**
+     * Gets or sets the `description` property.
+     *
+     * @public
+     * @attr
+     */
+    get description() {
+        return this._description;
+    }
+    set description(value) {
+        if (this._description !== value) {
+            this._description = value;
+            this.requestUpdate('description');
+        }
+    }
+    /**
+     * Gets or sets the `hint` property.
+     *
+     * @public
+     * @attr
+     */
+    get hint() {
+        return this._hint;
+    }
+    set hint(value) {
+        if (this._hint !== value) {
+            this._hint = value;
+            this.requestUpdate('hint');
+        }
+    }
+    /**
+     * Gets or sets the `icon` property.
+     *
+     * @public
+     */
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value;
+            this.requestUpdate('icon');
+        }
+    }
+    /**
+     * Gets or sets the `state` property.
+     *
+     * @public
+     * @attr
+     */
+    get state() {
+        return this._state;
+    }
+    set state(value) {
+        if (this._state !== value) {
+            this._state = value;
+            this.requestUpdate('state');
+        }
+    }
+    /**
+     * Gets or sets the `isActive` property.
+     *
+     * @public
+     * @attr
+     */
+    get isActive() {
+        return this._isActive;
+    }
+    set isActive(value) {
+        if (this._isActive !== value) {
+            this._isActive = value;
+            this.requestUpdate('isActive');
+        }
+    }
+    /**
+     * Get the item parent.
+     *
+     * @protected
+     * @readonly
+     */
+    get parent() {
+        return DomServiceLocator.current.findAncestor(this, StepperElement.is, { strict: true });
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        void this.play(this.enter ?? { steps: [] });
+    }
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        void this.play(this.exit ?? { steps: [] });
+        super.disconnectedCallback();
+    }
+    /**
+     * @protected
+     */
+    onIsActivePropertyChanged(_prev, next) {
+        if (next) {
+            void this.updateComplete.then(() => {
+                const index = this.parent.items.indexOf(this);
+                this.parent.select(index);
+            });
+        }
+    }
+};
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StepperItemElement.prototype, "header", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StepperItemElement.prototype, "description", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StepperItemElement.prototype, "hint", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StepperItemElement.prototype, "icon", null);
+__decorate([
+    Attribute({
+        type: String,
+        useDefault: true
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StepperItemElement.prototype, "state", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], StepperItemElement.prototype, "isActive", null);
+__decorate([
+    Watch('isActive'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean, Boolean]),
+    __metadata("design:returntype", void 0)
+], StepperItemElement.prototype, "onIsActivePropertyChanged", null);
+StepperItemElement = __decorate([
+    Component({
+        selector: 'mosaik-stepper-item',
+        template: stepperItemElementTemplate,
+        themes: {
+            joy: stepperItemElementJoyStyle,
+            memphis: stepperItemElementMemphisStyle,
+            cosmopolitan: stepperItemElementCosmopolitanStyle
+        },
+        host: {
+            role: 'tabpanel',
+            slot: 'steps'
+        },
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], StepperItemElement);
+export { StepperItemElement };
+//# sourceMappingURL=StepperItemElement.js.map

package/Controls/Components/Selectors/Stepper/StepperItemElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperItemElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperItemElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.d.ts

@@ -0,0 +1,9 @@
+import { type TemplateResult } from '../../../../Dom/Html';
+import type { StepperItemElement } from './StepperItemElement';
+/**
+ * The template of the {@link StepperItemElement}.
+ *
+ * @public
+ */
+export declare function stepperItemElementTemplate<T extends StepperItemElement>(e: T): TemplateResult;
+//# sourceMappingURL=StepperItemElementTemplate.d.ts.map

package/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperItemElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAI/D;;;;GAIG;AACH,wBAAgB,0BAA0B,CAAC,CAAC,SAAS,kBAAkB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAW7F"}

package/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.js

@@ -0,0 +1,21 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+// #endregion
+/**
+ * The template of the {@link StepperItemElement}.
+ *
+ * @public
+ */
+export function stepperItemElementTemplate(e) {
+    return html `
+        <div part="panel">
+            <div part="content">
+                <slot></slot>
+            </div>
+            <div part="footer">
+                <slot name="footer"></slot>
+            </div>
+        </div>
+    `;
+}
+//# sourceMappingURL=StepperItemElementTemplate.js.map

package/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperItemElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperItemElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AAGjE,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,0BAA0B,CAA+B,CAAI;IACzE,OAAO,IAAI,CAAA;;;;;;;;;KASV,CAAC;AACN,CAAC"}

package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.d.ts

@@ -0,0 +1,6 @@
+import { type CSSResult } from '../../../../../Dom/Css';
+/**
+ * @public
+ */
+export declare function stepperElementCosmopolitanStyle(): CSSResult;
+//# sourceMappingURL=StepperElement.Cosmopolitan.d.ts.map

package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CA+K3D"}