@design.estate/dees-wcctools 1.2.1 → 2.0.0

package/dist_ts_web/elements/wcc-record-button.d.ts

@@ -0,0 +1,12 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+export declare class WccRecordButton extends DeesElement {
+    accessor state: 'idle' | 'recording';
+    accessor duration: number;
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    private formatDuration;
+    render(): TemplateResult;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): Promise<void>;
+    private handleClick;
+    updated(changedProperties: Map<string, unknown>): void;
+}

package/dist_ts_web/elements/wcc-record-button.js

@@ -0,0 +1,165 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, customElement, html, css, property } from '@design.estate/dees-element';
+let WccRecordButton = (() => {
+    let _classDecorators = [customElement('wcc-record-button')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _state_decorators;
+    let _state_initializers = [];
+    let _state_extraInitializers = [];
+    let _duration_decorators;
+    let _duration_initializers = [];
+    let _duration_extraInitializers = [];
+    var WccRecordButton = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _state_decorators = [property({ type: String })];
+            _duration_decorators = [property({ type: Number })];
+            __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
+            __esDecorate(this, null, _duration_decorators, { kind: "accessor", name: "duration", static: false, private: false, access: { has: obj => "duration" in obj, get: obj => obj.duration, set: (obj, value) => { obj.duration = value; } }, metadata: _metadata }, _duration_initializers, _duration_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            WccRecordButton = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #state_accessor_storage = __runInitializers(this, _state_initializers, 'idle');
+        get state() { return this.#state_accessor_storage; }
+        set state(value) { this.#state_accessor_storage = value; }
+        #duration_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _duration_initializers, 0));
+        get duration() { return this.#duration_accessor_storage; }
+        set duration(value) { this.#duration_accessor_storage = value; }
+        static styles = [
+            css `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: #666;
+        user-select: none;
+      }
+
+      :host(:hover) {
+        background: rgba(239, 68, 68, 0.05);
+        color: #f87171;
+      }
+
+      :host(.recording) {
+        background: rgba(239, 68, 68, 0.15);
+        color: #f87171;
+      }
+
+      .content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+      }
+
+      .rec-icon {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      :host(.recording) .rec-icon {
+        animation: pulse-recording 1s ease-in-out infinite;
+      }
+
+      @keyframes pulse-recording {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.5; transform: scale(0.9); }
+      }
+
+      .recording-timer {
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 0.7rem;
+      }
+    `
+        ];
+        formatDuration(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        render() {
+            return html `
+      <div class="content">
+        <div class="rec-icon"></div>
+        ${this.state === 'recording' ? html `
+          <span class="recording-timer">${this.formatDuration(this.duration)}</span>
+        ` : null}
+      </div>
+    `;
+        }
+        async connectedCallback() {
+            await super.connectedCallback();
+            this.addEventListener('click', this.handleClick);
+        }
+        async disconnectedCallback() {
+            await super.disconnectedCallback();
+            this.removeEventListener('click', this.handleClick);
+        }
+        handleClick = (__runInitializers(this, _duration_extraInitializers), () => {
+            this.dispatchEvent(new CustomEvent('record-click', {
+                bubbles: true,
+                composed: true
+            }));
+        });
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('state')) {
+                if (this.state === 'recording') {
+                    this.classList.add('recording');
+                }
+                else {
+                    this.classList.remove('recording');
+                }
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return WccRecordButton = _classThis;
+})();
+export { WccRecordButton };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoid2NjLXJlY29yZC1idXR0b24uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvd2NjLXJlY29yZC1idXR0b24udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsYUFBYSxFQUFFLElBQUksRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUF1QixNQUFNLDZCQUE2QixDQUFDO0lBR3RHLGVBQWU7NEJBRDNCLGFBQWEsQ0FBQyxtQkFBbUIsQ0FBQzs7OztzQkFDRSxXQUFXOzs7Ozs7OytCQUFuQixTQUFRLFdBQVc7Ozs7aUNBQzdDLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztvQ0FHMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO1lBRjNCLG9LQUFTLEtBQUssNkJBQUwsS0FBSyxxRkFBZ0M7WUFHOUMsNktBQVMsUUFBUSw2QkFBUixRQUFRLDJGQUFhO1lBTGhDLDZLQXdHQzs7OztRQXRHQyx1RUFBdUMsTUFBTSxFQUFDO1FBQTlDLElBQVMsS0FBSywyQ0FBZ0M7UUFBOUMsSUFBUyxLQUFLLGlEQUFnQztRQUc5QyxpSUFBNEIsQ0FBQyxHQUFDO1FBQTlCLElBQVMsUUFBUSw4Q0FBYTtRQUE5QixJQUFTLFFBQVEsb0RBQWE7UUFFdkIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixHQUFHLENBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0FpREY7U0FDRixDQUFDO1FBRU0sY0FBYyxDQUFDLE9BQWU7WUFDcEMsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDdEMsTUFBTSxJQUFJLEdBQUcsT0FBTyxHQUFHLEVBQUUsQ0FBQztZQUMxQixPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEVBQUUsR0FBRyxDQUFDLEVBQUUsQ0FBQztRQUNuRixDQUFDO1FBRU0sTUFBTTtZQUNYLE9BQU8sSUFBSSxDQUFBOzs7VUFHTCxJQUFJLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBOzBDQUNELElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztTQUNuRSxDQUFDLENBQUMsQ0FBQyxJQUFJOztLQUVYLENBQUM7UUFDSixDQUFDO1FBRUQsS0FBSyxDQUFDLGlCQUFpQjtZQUNyQixNQUFNLEtBQUssQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1lBQ2hDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBQ25ELENBQUM7UUFFRCxLQUFLLENBQUMsb0JBQW9CO1lBQ3hCLE1BQU0sS0FBSyxDQUFDLG9CQUFvQixFQUFFLENBQUM7WUFDbkMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDLENBQUM7UUFDdEQsQ0FBQztRQUVPLFdBQVcsMERBQUcsR0FBUyxFQUFFO1lBQy9CLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxXQUFXLENBQUMsY0FBYyxFQUFFO2dCQUNqRCxPQUFPLEVBQUUsSUFBSTtnQkFDYixRQUFRLEVBQUUsSUFBSTthQUNmLENBQUMsQ0FBQyxDQUFDO1FBQ04sQ0FBQyxFQUFDO1FBRUYsT0FBTyxDQUFDLGlCQUF1QztZQUM3QyxLQUFLLENBQUMsT0FBTyxDQUFDLGlCQUFpQixDQUFDLENBQUM7WUFDakMsSUFBSSxpQkFBaUIsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztnQkFDbkMsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFdBQVcsRUFBRSxDQUFDO29CQUMvQixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztnQkFDbEMsQ0FBQztxQkFBTSxDQUFDO29CQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO2dCQUNyQyxDQUFDO1lBQ0gsQ0FBQztRQUNILENBQUM7O1lBdkdVLHVEQUFlOzs7OztTQUFmLGVBQWUifQ==

package/dist_ts_web/elements/wcc-recording-panel.d.ts

@@ -0,0 +1,42 @@
+import { DeesElement, type TemplateResult } from '@design.estate/dees-element';
+import type { WccDashboard } from './wcc-dashboard.js';
+export declare class WccRecordingPanel extends DeesElement {
+    accessor dashboardRef: WccDashboard;
+    accessor panelState: 'options' | 'recording' | 'preview';
+    accessor recordingMode: 'viewport' | 'screen';
+    accessor audioEnabled: boolean;
+    accessor selectedMicrophoneId: string;
+    accessor availableMicrophones: MediaDeviceInfo[];
+    accessor audioLevel: number;
+    accessor recordingDuration: number;
+    accessor previewVideoUrl: string;
+    accessor trimStart: number;
+    accessor trimEnd: number;
+    accessor videoDuration: number;
+    accessor isDraggingTrim: 'start' | 'end' | null;
+    accessor isExporting: boolean;
+    private recorderService;
+    constructor();
+    static styles: import("@design.estate/dees-element").CSSResult[];
+    render(): TemplateResult;
+    private renderOptionsPanel;
+    private renderPreviewModal;
+    private handleAudioToggle;
+    private handleMicrophoneChange;
+    private startRecording;
+    stopRecording(): void;
+    private handleRecordingComplete;
+    private discardRecording;
+    private downloadRecording;
+    private handleVideoLoaded;
+    private formatDuration;
+    private getHandlePositionStyle;
+    private getHandlePositionFromEndStyle;
+    private handleTimelineClick;
+    private handleTimelineDrag;
+    private handleTimelineDragEnd;
+    private resetTrim;
+    private previewTrimmedSection;
+    private close;
+    disconnectedCallback(): Promise<void>;
+}