@breadstone/mosaik-elements-foundation 0.0.211 → 0.0.214

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElement.js

@@ -0,0 +1,474 @@
+// #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 { on } from '@breadstone/mosaik-elements';
+import { Attachable } from '../../../Behaviors/Attachable';
+import { Disableable } from '../../../Behaviors/Disableable';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { ResizeThumbController } from '../../../Controllers/ResizeThumbController';
+import { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Emit } from '../../../../Events/Decorators/EmitDecorator';
+import { ALL_RESIZE_DIRECTIONS, ResizeDirection } from '../../../Types/ResizeDirection';
+import { CustomElement } from '../../Abstracts/CustomElement';
+import { resizeThumbElementTemplate } from './ResizeThumbElementTemplate';
+import { resizeThumbElementCosmopolitanStyle } from './Themes/ResizeThumbElement.Cosmopolitan';
+import { resizeThumbElementJoyStyle } from './Themes/ResizeThumbElement.Joy';
+import { resizeThumbElementMemphisStyle } from './Themes/ResizeThumbElement.Memphis';
+// #endregion
+/**
+ * ResizeThumb - A primitive element that provides resize handle functionality.
+ *
+ * @description
+ * The ResizeThumb element is a low-level primitive that signals resizing capability
+ * in a specific direction. It handles user interactions (mouse/touch) and automatically
+ * resizes the attached control element.
+ *
+ * The element uses the Attachable behavior to connect to its target element, either
+ * through the `for` attribute referencing an element ID, or by automatically attaching
+ * to its parent element.
+ *
+ * Internally, this element uses a {@link ResizeThumbController} for all resize logic.
+ * For programmatic usage without a visual thumb, use the controller directly.
+ *
+ * This element has minimal visual appearance by design - parent components like Dialog,
+ * Sheet, or Panel are expected to style the thumb appropriately for their context.
+ *
+ * @name ResizeThumb
+ * @element mosaik-resize-thumb
+ * @category Primitive
+ *
+ * @slot - Default slot for custom thumb content.
+ *
+ * @csspart thumb - The main thumb element.
+ *
+ * @fires resizestart - Fired when a resize operation begins.
+ * @fires resizing - Fired continuously during a resize operation.
+ * @fires resizeend - Fired when a resize operation ends.
+ *
+ * @example
+ * ```html
+ * <!-- Inside a parent element (attaches to parent) -->
+ * <mosaik-dialog>
+ *   <mosaik-resize-thumb direction="south-east"></mosaik-resize-thumb>
+ * </mosaik-dialog>
+ *
+ * <!-- Attached to specific element via for attribute -->
+ * <div id="resizable-box" style="width: 200px; height: 150px;">
+ *   Content
+ * </div>
+ * <mosaik-resize-thumb for="resizable-box" direction="south-east"></mosaik-resize-thumb>
+ *
+ * <!-- With constraints -->
+ * <mosaik-resize-thumb
+ *   direction="south-east"
+ *   min-width="100"
+ *   min-height="80"
+ *   max-width="500"
+ *   max-height="400">
+ * </mosaik-resize-thumb>
+ *
+ * <!-- Auto-apply disabled (manual handling via events) -->
+ * <mosaik-resize-thumb direction="east" auto-apply="false"></mosaik-resize-thumb>
+ * ```
+ *
+ * @see {@link ResizeThumbController} for programmatic usage without visual element.
+ *
+ * @public
+ */
+let ResizeThumbElement = class ResizeThumbElement extends Themeable(Disableable(Attachable(CustomElement))) {
+    // #region Fields
+    _resizeStart;
+    _resizing;
+    _resizeEnd;
+    _direction;
+    _allowedDirections;
+    _minWidth;
+    _minHeight;
+    _maxWidth;
+    _maxHeight;
+    _autoApply;
+    _controller;
+    _mouseDownSubscription;
+    _touchStartSubscription;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._direction = ResizeDirection.SouthEast;
+        this._allowedDirections = ALL_RESIZE_DIRECTIONS;
+        this._minWidth = 0;
+        this._minHeight = 0;
+        this._maxWidth = Number.MAX_SAFE_INTEGER;
+        this._maxHeight = Number.MAX_SAFE_INTEGER;
+        this._autoApply = true;
+        this._controller = null;
+        this._mouseDownSubscription = null;
+        this._touchStartSubscription = null;
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `{@link is}` property.
+     * The `{@link is}` property represents natural name of this element.
+     *
+     * @public
+     * @static
+     * @readonly
+     */
+    static get is() {
+        return 'mosaik-resize-thumb';
+    }
+    /**
+     * Gets or sets the resize `direction`.
+     *
+     * Determines which direction this resize thumb represents.
+     * The cursor style is automatically updated based on this direction.
+     *
+     * @attr
+     * @public
+     */
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        if (this._direction !== value) {
+            this._direction = value;
+            if (this._controller) {
+                this._controller.direction = value;
+            }
+            this.requestUpdate('direction');
+        }
+    }
+    /**
+     * Gets or sets the `allowedDirections` array.
+     *
+     * When set, only the specified directions are permitted for resizing.
+     * If the current direction is not in the allowed list, resize operations
+     * will be blocked.
+     *
+     * @attr
+     * @public
+     */
+    get allowedDirections() {
+        return this._allowedDirections;
+    }
+    set allowedDirections(value) {
+        if (this._allowedDirections !== value) {
+            this._allowedDirections = value;
+            this.requestUpdate('allowedDirections');
+        }
+    }
+    /**
+     * Gets or sets the minimum width the control can be resized to.
+     *
+     * @attr min-width
+     * @public
+     */
+    get minWidth() {
+        return this._minWidth;
+    }
+    set minWidth(value) {
+        if (this._minWidth !== value) {
+            this._minWidth = value;
+            if (this._controller) {
+                this._controller.minWidth = value;
+            }
+            this.requestUpdate('minWidth');
+        }
+    }
+    /**
+     * Gets or sets the minimum height the control can be resized to.
+     *
+     * @attr min-height
+     * @public
+     */
+    get minHeight() {
+        return this._minHeight;
+    }
+    set minHeight(value) {
+        if (this._minHeight !== value) {
+            this._minHeight = value;
+            if (this._controller) {
+                this._controller.minHeight = value;
+            }
+            this.requestUpdate('minHeight');
+        }
+    }
+    /**
+     * Gets or sets the maximum width the control can be resized to.
+     *
+     * @attr max-width
+     * @public
+     */
+    get maxWidth() {
+        return this._maxWidth;
+    }
+    set maxWidth(value) {
+        if (this._maxWidth !== value) {
+            this._maxWidth = value;
+            if (this._controller) {
+                this._controller.maxWidth = value;
+            }
+            this.requestUpdate('maxWidth');
+        }
+    }
+    /**
+     * Gets or sets the maximum height the control can be resized to.
+     *
+     * @attr max-height
+     * @public
+     */
+    get maxHeight() {
+        return this._maxHeight;
+    }
+    set maxHeight(value) {
+        if (this._maxHeight !== value) {
+            this._maxHeight = value;
+            if (this._controller) {
+                this._controller.maxHeight = value;
+            }
+            this.requestUpdate('maxHeight');
+        }
+    }
+    /**
+     * Gets or sets whether resize changes are automatically applied to the control element.
+     * If false, only events are emitted and the control is responsible for applying changes.
+     * Defaults to true.
+     *
+     * @attr auto-apply
+     * @public
+     */
+    get autoApply() {
+        return this._autoApply;
+    }
+    set autoApply(value) {
+        if (this._autoApply !== value) {
+            this._autoApply = value;
+            if (this._controller) {
+                this._controller.autoApply = value;
+            }
+            this.requestUpdate('autoApply');
+        }
+    }
+    /**
+     * Gets whether a resize operation is currently in progress.
+     *
+     * @public
+     * @readonly
+     */
+    get isResizing() {
+        return this._controller?.isResizing ?? false;
+    }
+    /**
+     * Called when a resize operation starts.
+     * Provides reference to `{@link IResizeThumbResizeStartEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get resizeStart() {
+        return this._resizeStart;
+    }
+    /**
+     * Called during a resize operation.
+     * Provides reference to `{@link IResizeThumbResizingEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get resizing() {
+        return this._resizing;
+    }
+    /**
+     * Called when a resize operation ends.
+     * Provides reference to `{@link IResizeThumbResizeEndEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get resizeEnd() {
+        return this._resizeEnd;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * @public
+     * @override
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeController();
+    }
+    /**
+     * @public
+     * @override
+     */
+    disconnectedCallback() {
+        this._mouseDownSubscription?.dispose();
+        this._touchStartSubscription?.dispose();
+        this._controller?.dispose();
+        this._controller = null;
+        super.disconnectedCallback();
+    }
+    /**
+     * @protected
+     * @override
+     */
+    onApplyTemplate() {
+        const thumb = this.getTemplatePart('thumb');
+        this._mouseDownSubscription = on(thumb, 'mousedown', (e) => this.onPointerStart(e.clientX, e.clientY, e));
+        this._touchStartSubscription = on(thumb, 'touchstart', (e) => {
+            if (e.touches.length === 1) {
+                this.onPointerStart(e.touches[0].clientX, e.touches[0].clientY, e);
+            }
+        }, { passive: false });
+    }
+    /**
+     * Checks if the current direction is allowed.
+     *
+     * @protected
+     * @returns True if the direction is in the allowed list, false otherwise.
+     */
+    isDirectionAllowed() {
+        return this._allowedDirections.includes(this._direction);
+    }
+    /**
+     * Handles the start of a pointer (mouse or touch) interaction.
+     *
+     * @protected
+     */
+    onPointerStart(clientX, clientY, event) {
+        if (this.disabled || !this.isDirectionAllowed() || !this._controller) {
+            return;
+        }
+        event.preventDefault();
+        this._controller.startResize(clientX, clientY);
+    }
+    /**
+     * Initializes or re-initializes the controller with the current control element.
+     *
+     * @private
+     */
+    initializeController() {
+        // Dispose existing controller
+        this._controller?.dispose();
+        this._controller = null;
+        // Wait for control to be available
+        if (!this.control) {
+            return;
+        }
+        // Create new controller
+        this._controller = new ResizeThumbController({
+            target: this.control,
+            direction: this._direction,
+            minWidth: this._minWidth,
+            minHeight: this._minHeight,
+            maxWidth: this._maxWidth,
+            maxHeight: this._maxHeight,
+            autoApply: this._autoApply,
+            onResizeStart: (event) => {
+                this._resizeStart.emit({
+                    direction: event.direction,
+                    startX: event.startX,
+                    startY: event.startY
+                });
+            },
+            onResizing: (event) => {
+                this._resizing.emit({
+                    direction: event.direction,
+                    deltaX: event.deltaX,
+                    deltaY: event.deltaY,
+                    currentX: event.currentX,
+                    currentY: event.currentY,
+                    newWidth: event.newWidth,
+                    newHeight: event.newHeight
+                });
+            },
+            onResizeEnd: (event) => {
+                this._resizeEnd.emit({
+                    direction: event.direction,
+                    totalDeltaX: event.totalDeltaX,
+                    totalDeltaY: event.totalDeltaY,
+                    finalWidth: event.finalWidth,
+                    finalHeight: event.finalHeight
+                });
+            }
+        });
+    }
+};
+__decorate([
+    Emit({ eventName: 'resizestart' }),
+    __metadata("design:type", Object)
+], ResizeThumbElement.prototype, "_resizeStart", void 0);
+__decorate([
+    Emit({ eventName: 'resizing' }),
+    __metadata("design:type", Object)
+], ResizeThumbElement.prototype, "_resizing", void 0);
+__decorate([
+    Emit({ eventName: 'resizeend' }),
+    __metadata("design:type", Object)
+], ResizeThumbElement.prototype, "_resizeEnd", void 0);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], ResizeThumbElement.prototype, "direction", null);
+__decorate([
+    Attribute({ type: Array }),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], ResizeThumbElement.prototype, "allowedDirections", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ResizeThumbElement.prototype, "minWidth", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ResizeThumbElement.prototype, "minHeight", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ResizeThumbElement.prototype, "maxWidth", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], ResizeThumbElement.prototype, "maxHeight", null);
+__decorate([
+    Attribute({ type: Boolean }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], ResizeThumbElement.prototype, "autoApply", null);
+ResizeThumbElement = __decorate([
+    Component({
+        selector: 'mosaik-resize-thumb',
+        template: resizeThumbElementTemplate,
+        themes: {
+            joy: resizeThumbElementJoyStyle,
+            memphis: resizeThumbElementMemphisStyle,
+            cosmopolitan: resizeThumbElementCosmopolitanStyle
+        },
+        imports: []
+    }),
+    __metadata("design:paramtypes", [])
+], ResizeThumbElement);
+export { ResizeThumbElement };
+//# sourceMappingURL=ResizeThumbElement.js.map

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElement.js.map

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

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.d.ts

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

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeThumbElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.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,CAI7F"}

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.js

@@ -0,0 +1,14 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+// #endregion
+/**
+ * The template of the {@link ResizeThumbElement}.
+ *
+ * @public
+ */
+export function resizeThumbElementTemplate(e) {
+    return html `
+        <div part="thumb"></div>
+    `;
+}
+//# sourceMappingURL=ResizeThumbElementTemplate.js.map

package/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeThumbElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Primitives/ResizeThumb/ResizeThumbElementTemplate.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;;KAEV,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.d.ts

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

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeThumbElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,SAAS,CA0F/D"}

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.js

@@ -0,0 +1,104 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+// #region Imports
+import { css } from '../../../../../Dom/Css';
+// #endregion
+/**
+ * @public
+ */
+export function resizeThumbElementCosmopolitanStyle() {
+    return css `
+:host {
+  --resize-thumb-border-color: var(--cosmopolitan-scheme-highlight);
+  --resize-thumb-border-radius: var(--cosmopolitan-layout-radius);
+  --resize-thumb-border-style: dashed;
+  --resize-thumb-border-width: var(--cosmopolitan-layout-thickness);
+  --resize-thumb-font-family: unset;
+  --resize-thumb-font-letter-spacing: unset;
+  --resize-thumb-font-line-height: unset;
+  --resize-thumb-font-size: unset;
+  --resize-thumb-font-text-decoration: unset;
+  --resize-thumb-font-text-transform: unset;
+  --resize-thumb-font-weight: unset;
+  --resize-thumb-gap: unset;
+  --resize-thumb-padding-bottom: unset;
+  --resize-thumb-padding-left: unset;
+  --resize-thumb-padding-right: unset;
+  --resize-thumb-padding-top: unset;
+  --resize-thumb-thumb-background-color: var(--cosmopolitan-scheme-highlight);
+  --resize-thumb-thumb-border-radius: var(--cosmopolitan-layout-thickness);
+  --resize-thumb-transition-duration: unset;
+  --resize-thumb-transition-mode: unset;
+  --resize-thumb-transition-property: unset;
+  --resize-thumb-translate: unset;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  :host {
+    transition-duration: .01ms;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+
+:host *, :host :before, :host :after {
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+:host :before, :host :after {
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+:host([hidden]) {
+  display: none !important;
+}
+
+:host {
+  box-sizing: border-box;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  display: block;
+  position: absolute;
+}
+
+:host [part="thumb"] {
+  width: 100%;
+  height: 100%;
+}
+
+:host([direction="north"]), :host([direction="south"]) {
+  cursor: ns-resize;
+}
+
+:host([direction="east"]), :host([direction="west"]) {
+  cursor: ew-resize;
+}
+
+:host([direction="north-west"]), :host([direction="south-east"]) {
+  cursor: nwse-resize;
+}
+
+:host([direction="north-east"]), :host([direction="south-west"]) {
+  cursor: nesw-resize;
+}
+
+:host([disabled]) {
+  cursor: default;
+  pointer-events: none;
+}
+
+    `;
+}
+//# sourceMappingURL=ResizeThumbElement.Cosmopolitan.js.map

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeThumbElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwFT,CAAC;AACN,CAAC"}

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Joy.d.ts

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

package/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Joy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeThumbElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Primitives/ResizeThumb/Themes/ResizeThumbElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAgItD"}