@twick/2d 0.11.0

package/lib/components/Line.d.ts

@@ -0,0 +1,160 @@
+import type { PossibleVector2, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction } from '@twick/core';
+import { BBox, Vector2 } from '@twick/core';
+import type { CurveProfile } from '../curves';
+import type { CurveProps } from './Curve';
+import { Curve } from './Curve';
+export interface LineProps extends CurveProps {
+    /**
+     * {@inheritDoc Line.radius}
+     */
+    radius?: SignalValue<number>;
+    /**
+     * {@inheritDoc Line.points}
+     */
+    points?: SignalValue<SignalValue<PossibleVector2>[]>;
+}
+/**
+ * A node for drawing lines and polygons.
+ *
+ * @remarks
+ * This node can be used to render any polygonal shape defined by a set of
+ * points.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple line
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [150, 50],
+ *         [0, -50],
+ *         [-150, 50],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={40}
+ *       startArrow
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Polygon
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-200, 70],
+ *         [150, 70],
+ *         [100, -70],
+ *         [-100, -70],
+ *       ]}
+ *       fill={'lightseagreen'}
+ *       closed
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Using signals
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createSignal} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const tip = createSignal(-150);
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         // this point is dynamically calculated based on the signal:
+ *         () => [tip(), -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* tip(150, 1).back(1);
+ * });
+ *
+ * // snippet Tweening points
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const line = createRef<Line>();
+ *   view.add(
+ *     <Line
+ *       ref={line}
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         [0, -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={20}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* line()
+ *     .points(
+ *       [
+ *         [-150, 0],
+ *         [0, 100],
+ *         [150, 0],
+ *         [150, -70],
+ *         [-150, -70],
+ *       ],
+ *       2,
+ *     )
+ *     .back(2);
+ * });
+ * ```
+ */
+export declare class Line extends Curve {
+    /**
+     * Rotate the points to minimize the overall distance traveled when tweening.
+     *
+     * @param points - The points to rotate.
+     * @param reference - The reference points to which the distance is measured.
+     * @param closed - Whether the points form a closed polygon.
+     */
+    private static rotatePoints;
+    /**
+     * Distribute additional points along the polyline.
+     *
+     * @param points - The points of a polyline along which new points should be
+     *                 distributed.
+     * @param count - The number of points to add.
+     */
+    private static distributePoints;
+    /**
+     * The radius of the line's corners.
+     */
+    readonly radius: SimpleSignal<number, this>;
+    /**
+     * The points of the line.
+     *
+     * @remarks
+     * When set to `null`, the Line will use the positions of its children as
+     * points.
+     */
+    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+    protected tweenPoints(value: SignalValue<SignalValue<PossibleVector2>[] | null>, time: number, timingFunction: TimingFunction): ThreadGenerator;
+    private tweenedPoints;
+    constructor(props: LineProps);
+    protected childrenBBox(): BBox;
+    parsedPoints(): Vector2[];
+    profile(): CurveProfile;
+    protected lineWidthCoefficient(): number;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    private parsePoints;
+}
+//# sourceMappingURL=Line.d.ts.map

package/lib/components/Line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../src/lib/components/Line.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,YAAY,EACZ,eAAe,EACf,cAAc,EACf,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,IAAI,EAOJ,OAAO,EACR,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAS5C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAoC9B,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,IAAK,SAAQ,KAAK;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAkC3B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IA2C/B;;OAEG;IACH,SAEwB,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE3D;;;;;;OAMG;IACH,SAEwB,MAAM,EAAE,YAAY,CAC1C,WAAW,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,EACrC,IAAI,CACL,CAAC;IAGF,SAAS,CAAE,WAAW,CACpB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,CAAC,EACzD,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,cAAc,GAC7B,eAAe;IAuBlB,OAAO,CAAC,aAAa,CAAwC;gBAE1C,KAAK,EAAE,SAAS;IAanC,SAAS,CAAC,YAAY;IAef,YAAY,IAAI,OAAO,EAAE;IAKhB,OAAO,IAAI,YAAY;cAQpB,oBAAoB,IAAI,MAAM;IAgBjC,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;IAyCnB,OAAO,CAAC,WAAW;CAKpB"}

package/lib/components/Line.js

@@ -0,0 +1,346 @@
+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 Line_1;
+import { BBox, createSignal, threadable, transformVectorAsPoint, tween, unwrap, useLogger, Vector2, } from '@twick/core';
+import { getPolylineProfile } from '../curves';
+import { calculateLerpDistance, polygonLength, polygonPointsLerp, } from '../curves/createCurveProfileLerp';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { arc, drawLine, drawPivot, lineTo, moveTo } from '../utils';
+import { Curve } from './Curve';
+import { Layout } from './Layout';
+const lineWithoutPoints = `
+The line won't be visible unless you specify at least two points:
+
+\`\`\`tsx
+<Line
+  stroke="#fff"
+  lineWidth={8}
+  points={[
+    [100, 0],
+    [0, 0],
+    [0, 100],
+  ]}
+/>
+\`\`\`
+
+Alternatively, you can define the points using the children:
+
+\`\`\`tsx
+<Line stroke="#fff" lineWidth={8}>
+  <Node x={100} />
+  <Node />
+  <Node y={100} />
+</Line>
+\`\`\`
+
+If you did this intentionally, and want to disable this message, set the
+\`points\` property to \`null\`:
+
+\`\`\`tsx
+<Line stroke="#fff" lineWidth={8} points={null} />
+\`\`\`
+`;
+/**
+ * A node for drawing lines and polygons.
+ *
+ * @remarks
+ * This node can be used to render any polygonal shape defined by a set of
+ * points.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple line
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [150, 50],
+ *         [0, -50],
+ *         [-150, 50],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={40}
+ *       startArrow
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Polygon
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-200, 70],
+ *         [150, 70],
+ *         [100, -70],
+ *         [-100, -70],
+ *       ]}
+ *       fill={'lightseagreen'}
+ *       closed
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Using signals
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createSignal} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const tip = createSignal(-150);
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         // this point is dynamically calculated based on the signal:
+ *         () => [tip(), -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* tip(150, 1).back(1);
+ * });
+ *
+ * // snippet Tweening points
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const line = createRef<Line>();
+ *   view.add(
+ *     <Line
+ *       ref={line}
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         [0, -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={20}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* line()
+ *     .points(
+ *       [
+ *         [-150, 0],
+ *         [0, 100],
+ *         [150, 0],
+ *         [150, -70],
+ *         [-150, -70],
+ *       ],
+ *       2,
+ *     )
+ *     .back(2);
+ * });
+ * ```
+ */
+let Line = Line_1 = class Line extends Curve {
+    /**
+     * Rotate the points to minimize the overall distance traveled when tweening.
+     *
+     * @param points - The points to rotate.
+     * @param reference - The reference points to which the distance is measured.
+     * @param closed - Whether the points form a closed polygon.
+     */
+    static rotatePoints(points, reference, closed) {
+        if (closed) {
+            let minDistance = Infinity;
+            let bestOffset = 0;
+            for (let offset = 0; offset < points.length; offset += 1) {
+                const distance = calculateLerpDistance(points, reference, offset);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    bestOffset = offset;
+                }
+            }
+            if (bestOffset) {
+                const spliced = points.splice(0, bestOffset);
+                points.splice(points.length, 0, ...spliced);
+            }
+        }
+        else {
+            const originalDistance = calculateLerpDistance(points, reference, 0);
+            const reversedPoints = [...points].reverse();
+            const reversedDistance = calculateLerpDistance(reversedPoints, reference, 0);
+            if (reversedDistance < originalDistance) {
+                points.reverse();
+            }
+        }
+    }
+    /**
+     * Distribute additional points along the polyline.
+     *
+     * @param points - The points of a polyline along which new points should be
+     *                 distributed.
+     * @param count - The number of points to add.
+     */
+    static distributePoints(points, count) {
+        if (points.length === 0) {
+            for (let j = 0; j < count; j++) {
+                points.push(Vector2.zero);
+            }
+            return;
+        }
+        if (points.length === 1) {
+            const point = points[0];
+            for (let j = 0; j < count; j++) {
+                points.push(point);
+            }
+            return;
+        }
+        const desiredLength = points.length + count;
+        const arcLength = polygonLength(points);
+        let density = count / arcLength;
+        let i = 0;
+        while (points.length < desiredLength) {
+            const pointsLeft = desiredLength - points.length;
+            if (i + 1 >= points.length) {
+                density = pointsLeft / arcLength;
+                i = 0;
+                continue;
+            }
+            const a = points[i];
+            const b = points[i + 1];
+            const length = a.sub(b).magnitude;
+            const pointCount = Math.min(Math.round(length * density), pointsLeft) + 1;
+            for (let j = 1; j < pointCount; j++) {
+                points.splice(++i, 0, Vector2.lerp(a, b, j / pointCount));
+            }
+            i++;
+        }
+    }
+    *tweenPoints(value, time, timingFunction) {
+        const fromPoints = [...this.parsedPoints()];
+        const toPoints = this.parsePoints(unwrap(value));
+        const closed = this.closed();
+        const diff = fromPoints.length - toPoints.length;
+        Line_1.distributePoints(diff < 0 ? fromPoints : toPoints, Math.abs(diff));
+        Line_1.rotatePoints(toPoints, fromPoints, closed);
+        this.tweenedPoints(fromPoints);
+        yield* tween(time, value => {
+            const progress = timingFunction(value);
+            this.tweenedPoints(polygonPointsLerp(fromPoints, toPoints, progress));
+        }, () => {
+            this.tweenedPoints(null);
+            this.points(value);
+        });
+    }
+    constructor(props) {
+        super(props);
+        this.tweenedPoints = createSignal(null);
+        if (props.children === undefined && props.points === undefined) {
+            useLogger().warn({
+                message: 'No points specified for the line',
+                remarks: lineWithoutPoints,
+                inspect: this.key,
+            });
+        }
+    }
+    childrenBBox() {
+        let points = this.tweenedPoints();
+        if (!points) {
+            const custom = this.points();
+            points = custom
+                ? custom.map(signal => new Vector2(unwrap(signal)))
+                : this.children()
+                    .filter(child => !(child instanceof Layout) || child.isLayoutRoot())
+                    .map(child => child.position());
+        }
+        return BBox.fromPoints(...points);
+    }
+    parsedPoints() {
+        return this.parsePoints(this.points());
+    }
+    profile() {
+        return getPolylineProfile(this.tweenedPoints() ?? this.parsedPoints(), this.radius(), this.closed());
+    }
+    lineWidthCoefficient() {
+        const radius = this.radius();
+        const join = this.lineJoin();
+        let coefficient = super.lineWidthCoefficient();
+        if (radius === 0 && join === 'miter') {
+            const { minSin } = this.profile();
+            if (minSin > 0) {
+                coefficient = Math.max(coefficient, 0.5 / minSin);
+            }
+        }
+        return coefficient;
+    }
+    drawOverlay(context, matrix) {
+        const box = this.childrenBBox().transformCorners(matrix);
+        const size = this.computedSize();
+        const offsetVector = size.mul(this.offset()).scale(0.5);
+        const offset = transformVectorAsPoint(offsetVector, matrix);
+        context.fillStyle = 'white';
+        context.strokeStyle = 'black';
+        context.lineWidth = 1;
+        const path = new Path2D();
+        const pointsPreTransformation = this.tweenedPoints() ?? this.parsedPoints();
+        const points = pointsPreTransformation.map(p => transformVectorAsPoint(p, matrix));
+        if (points.length > 0) {
+            moveTo(path, points[0]);
+            for (const point of points) {
+                lineTo(path, point);
+                context.beginPath();
+                arc(context, point, 4);
+                context.closePath();
+                context.fill();
+                context.stroke();
+            }
+        }
+        context.strokeStyle = 'white';
+        context.stroke(path);
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+    parsePoints(points) {
+        return points
+            ? points.map(signal => new Vector2(unwrap(signal)))
+            : this.children().map(child => child.position());
+    }
+};
+__decorate([
+    initial(0),
+    signal()
+], Line.prototype, "radius", void 0);
+__decorate([
+    initial(null),
+    signal()
+], Line.prototype, "points", void 0);
+__decorate([
+    threadable()
+], Line.prototype, "tweenPoints", null);
+__decorate([
+    computed()
+], Line.prototype, "childrenBBox", null);
+__decorate([
+    computed()
+], Line.prototype, "parsedPoints", null);
+__decorate([
+    computed()
+], Line.prototype, "profile", null);
+Line = Line_1 = __decorate([
+    nodeName('Line')
+], Line);
+export { Line };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9MaW5lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFPQSxPQUFPLEVBQ0wsSUFBSSxFQUNKLFlBQVksRUFDWixVQUFVLEVBQ1Ysc0JBQXNCLEVBQ3RCLEtBQUssRUFDTCxNQUFNLEVBQ04sU0FBUyxFQUNULE9BQU8sR0FDUixNQUFNLGFBQWEsQ0FBQztBQUVyQixPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSxXQUFXLENBQUM7QUFDN0MsT0FBTyxFQUNMLHFCQUFxQixFQUNyQixhQUFhLEVBQ2IsaUJBQWlCLEdBQ2xCLE1BQU0sa0NBQWtDLENBQUM7QUFDMUMsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUNsRSxPQUFPLEVBQUMsR0FBRyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBQyxNQUFNLFVBQVUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsS0FBSyxFQUFDLE1BQU0sU0FBUyxDQUFDO0FBQzlCLE9BQU8sRUFBQyxNQUFNLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFFaEMsTUFBTSxpQkFBaUIsR0FBRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQStCekIsQ0FBQztBQWFGOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXdHRztBQUVJLElBQU0sSUFBSSxZQUFWLE1BQU0sSUFBSyxTQUFRLEtBQUs7SUFDN0I7Ozs7OztPQU1HO0lBQ0ssTUFBTSxDQUFDLFlBQVksQ0FDekIsTUFBaUIsRUFDakIsU0FBb0IsRUFDcEIsTUFBZTtRQUVmLElBQUksTUFBTSxFQUFFLENBQUM7WUFD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

package/lib/components/Media.d.ts

@@ -0,0 +1,65 @@
+import type { SignalValue, SimpleSignal } from '@twick/core';
+import type { RectProps } from './Rect';
+import { Rect } from './Rect';
+export interface MediaProps extends RectProps {
+    src?: SignalValue<string>;
+    loop?: SignalValue<boolean>;
+    playbackRate?: number;
+    volume?: number;
+    time?: SignalValue<number>;
+    play?: boolean;
+    awaitCanPlay?: SignalValue<boolean>;
+    allowVolumeAmplificationInPreview?: SignalValue<boolean>;
+}
+export declare abstract class Media extends Rect {
+    readonly src: SimpleSignal<string, this>;
+    readonly loop: SimpleSignal<boolean, this>;
+    readonly playbackRate: SimpleSignal<number, this>;
+    protected readonly time: SimpleSignal<number, this>;
+    protected readonly playing: SimpleSignal<boolean, this>;
+    protected readonly awaitCanPlay: SimpleSignal<boolean, this>;
+    protected readonly allowVolumeAmplificationInPreview: SimpleSignal<boolean, this>;
+    protected volume: number;
+    protected static readonly amplificationPool: Record<string, {
+        audioContext: AudioContext;
+        sourceNode: MediaElementAudioSourceNode;
+        gainNode: GainNode;
+    }>;
+    protected lastTime: number;
+    constructor(props: MediaProps);
+    isPlaying(): boolean;
+    getCurrentTime(): number;
+    getDuration(): number;
+    getVolume(): number;
+    getUrl(): string;
+    dispose(): void;
+    completion(): number;
+    protected abstract mediaElement(): HTMLMediaElement;
+    protected abstract seekedMedia(): HTMLMediaElement;
+    protected abstract fastSeekedMedia(): HTMLMediaElement;
+    protected abstract draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected setCurrentTime(value: number): void;
+    setVolume(volume: number): void;
+    protected amplify(node: HTMLMediaElement, volume: number): void;
+    protected setPlaybackRate(playbackRate: number): void;
+    protected scheduleSeek(time: number): void;
+    /**
+     * Waits for the canplay event to be fired before calling onCanPlay.
+     *
+     * If the media is already ready to play, onCanPlay is called immediately.
+     * @param onCanPlay - The function to call when the media is ready to play.
+     * @returns
+     */
+    protected waitForCanPlay(media: HTMLMediaElement, onCanPlay: () => void): void;
+    /**
+     * Returns true if we should wait for the media to be ready to play.
+     */
+    protected waitForCanPlayNecessary(media: HTMLMediaElement): boolean;
+    pause(): void;
+    play(): void;
+    clampTime(time: number): number;
+    protected collectAsyncResources(): void;
+    protected getErrorReason(errCode?: number): string;
+    protected isIOS(): boolean;
+}
+//# sourceMappingURL=Media.d.ts.map

package/lib/components/Media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/lib/components/Media.ts"],"names":[],"mappings":"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"}