@breadstone/mosaik-elements-foundation 0.0.127 → 0.0.129

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElement.js

@@ -0,0 +1,323 @@
+// #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 { Component } from '../../../../Decorators/ComponentDecorator';
+import { voiceRecorderChatToolElementTemplate } from './VoiceRecorderChatToolElementTemplate';
+import { ChatToolBaseElement } from './Abstracts/ChatToolBaseElement';
+import { RecorderState } from '../../../../Types/RecorderState';
+import { Attribute } from '../../../../Decorators/AttributeDecorator';
+import { Property } from '../../../../Decorators/PropertyDecorator';
+import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
+import { Emit } from '../../../../../Events/Decorators/EmitDecorator';
+import { voiceRecorderChatToolElementJoyStyle } from './Themes/VoiceRecorderChatToolElement.Joy';
+import { Themeable } from '../../../../Behaviors/Themeable';
+import { ButtonElement } from '../../../Buttons/Button/ButtonElement';
+// #endregion
+/**
+ * The `{@link VoiceRecorderChatToolElement}` element.
+ *
+ * @fires recCancel - Called when the recording is canceled.
+ * @fires recStart - Called when the recording is started.
+ * @fires recPause - Called when the recording is paused.
+ * @fires recResume - Called when the recording is resumed.
+ * @fires recStop - Called when the recording is stopped.
+ *
+ * @public
+ */
+let VoiceRecorderChatToolElement = class VoiceRecorderChatToolElement extends Themeable(ChatToolBaseElement) {
+    // #region Fields
+    _recCancel;
+    _recStart;
+    _recPause;
+    _recResume;
+    _recStop;
+    _state;
+    _elapsedTime;
+    _maxDurationTime;
+    _objectUrl;
+    _canPause;
+    // #endregion
+    // #region Ctor
+    /**
+     * @public
+     */
+    constructor() {
+        super();
+        this._state = RecorderState.Idle;
+        this._elapsedTime = 0;
+        this._maxDurationTime = 0;
+        this._objectUrl = null;
+        this._canPause = false;
+        this._recCancel = new HTMLElementEventEmitter(this, 'recCancel');
+        this._recStart = new HTMLElementEventEmitter(this, 'recStart');
+        this._recPause = new HTMLElementEventEmitter(this, 'recPause');
+        this._recResume = new HTMLElementEventEmitter(this, 'recResume');
+        this._recStop = new HTMLElementEventEmitter(this, 'recStop');
+    }
+    // #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-voice-recorder-chat-tool';
+    }
+    /**
+     * 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 `elapsedTime` property.
+     *
+     * @public
+     * @attr
+     */
+    get elapsedTime() {
+        return this._elapsedTime;
+    }
+    set elapsedTime(value) {
+        if (this._elapsedTime !== value) {
+            this._elapsedTime = value;
+            this.requestUpdate('elapsedTime');
+        }
+    }
+    /**
+     * Gets or sets the `maxDurationTime` property.
+     *
+     * @public
+     * @attr
+     */
+    get maxDurationTime() {
+        return this._maxDurationTime;
+    }
+    set maxDurationTime(value) {
+        if (this._maxDurationTime !== value) {
+            this._maxDurationTime = value;
+            this.requestUpdate('maxDurationTime');
+        }
+    }
+    /**
+     * Gets or sets the `objectUrl` property.
+     *
+     * @public
+     */
+    get objectUrl() {
+        return this._objectUrl;
+    }
+    set objectUrl(value) {
+        if (this._objectUrl !== value) {
+            this._objectUrl = value;
+            this.requestUpdate('objectUrl');
+        }
+    }
+    /**
+     * Gets or sets the `canPause` property.
+     *
+     * @public
+     * @attr
+     */
+    get canPause() {
+        return this._canPause;
+    }
+    set canPause(value) {
+        if (this._canPause !== value) {
+            this._canPause = value;
+            this.requestUpdate('canPause');
+        }
+    }
+    /**
+     * Called when the recording is canceled.
+     * Provides reference to `{@link IEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get recCancel() {
+        return this._recCancel;
+    }
+    /**
+     * Called when the recording is resumed.
+     * Provides reference to `{@link IEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get recResume() {
+        return this._recResume;
+    }
+    /**
+     * Called when the recording is stopped.
+     * Provides reference to `{@link IEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get recStop() {
+        return this._recStop;
+    }
+    /**
+     * Called when the recording is started.
+     * Provides reference to `{@link IEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get recStart() {
+        return this._recStart;
+    }
+    /**
+     * Called when the recording is paused.
+     * Provides reference to `{@link IEventDetail}` as event detail.
+     *
+     * @public
+     * @readonly
+     * @eventProperty
+     */
+    get recPause() {
+        return this._recPause;
+    }
+    // #endregion
+    // #region Methods
+    execute(args) {
+        throw new Error('Method not implemented.');
+    }
+    /**
+     * Emits the {@link recCancel} event.
+     *
+     * @protected
+     */
+    onRecCancel(args) {
+        this._recCancel.emit(args);
+    }
+    /**
+     * Emits the {@link recStart} event.
+     *
+     * @protected
+     */
+    onRecStart(args) {
+        this._recStart.emit(args);
+    }
+    /**
+     * Emits the {@link recPause} event.
+     *
+     * @protected
+     */
+    onRecPause(args) {
+        this._recPause.emit(args);
+    }
+    /**
+     * Emits the {@link recResume} event.
+     *
+     * @protected
+     */
+    onRecResume(args) {
+        this._recResume.emit(args);
+    }
+    /**
+     * Emits the {@link recStop} event.
+     *
+     * @protected
+     */
+    onRecStop(args) {
+        this._recStop.emit(args);
+    }
+};
+__decorate([
+    Emit({ eventName: 'recCancel' }),
+    __metadata("design:type", Object)
+], VoiceRecorderChatToolElement.prototype, "_recCancel", void 0);
+__decorate([
+    Emit({ eventName: 'recStart' }),
+    __metadata("design:type", Object)
+], VoiceRecorderChatToolElement.prototype, "_recStart", void 0);
+__decorate([
+    Emit({ eventName: 'recPause' }),
+    __metadata("design:type", Object)
+], VoiceRecorderChatToolElement.prototype, "_recPause", void 0);
+__decorate([
+    Emit({ eventName: 'recResume' }),
+    __metadata("design:type", Object)
+], VoiceRecorderChatToolElement.prototype, "_recResume", void 0);
+__decorate([
+    Emit({ eventName: 'recStop' }),
+    __metadata("design:type", Object)
+], VoiceRecorderChatToolElement.prototype, "_recStop", void 0);
+__decorate([
+    Attribute({ type: RecorderState }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], VoiceRecorderChatToolElement.prototype, "state", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], VoiceRecorderChatToolElement.prototype, "elapsedTime", null);
+__decorate([
+    Attribute({ type: Number }),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], VoiceRecorderChatToolElement.prototype, "maxDurationTime", null);
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], VoiceRecorderChatToolElement.prototype, "objectUrl", null);
+__decorate([
+    Attribute({
+        type: Boolean,
+        useDefault: true
+    }),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [Boolean])
+], VoiceRecorderChatToolElement.prototype, "canPause", null);
+VoiceRecorderChatToolElement = __decorate([
+    Component({
+        selector: 'mosaik-voice-recorder-chat-tool',
+        template: voiceRecorderChatToolElementTemplate,
+        themes: {
+            joy: voiceRecorderChatToolElementJoyStyle,
+            retro: voiceRecorderChatToolElementJoyStyle,
+            cosmopolitan: voiceRecorderChatToolElementJoyStyle
+        },
+        host: {
+            slot: 'tools'
+        },
+        options: {
+            mode: 'open',
+            delegatesFocus: true
+        },
+        imports: [
+            ButtonElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], VoiceRecorderChatToolElement);
+export { VoiceRecorderChatToolElement };
+//# sourceMappingURL=VoiceRecorderChatToolElement.js.map

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElement.js.map

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

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.d.ts

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

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecorderChatToolElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,yBAAyB,CAAC;AAEpE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAInF;;;;GAIG;AACH,wBAAgB,oCAAoC,CAAC,CAAC,SAAS,4BAA4B,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAsCjH"}

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.js

@@ -0,0 +1,48 @@
+// #region Imports
+import { html } from '../../../../../Dom/Html';
+import { when } from '../../../../Directives/Directives';
+// #endregion
+/**
+ * The template of the {@link VoiceRecorderChatToolElement}.
+ *
+ * @public
+ */
+export function voiceRecorderChatToolElementTemplate(e) {
+    const timeLabel = () => {
+        const sec = Math.max(0, Math.floor(e.elapsedTime / 1000));
+        const m = Math.floor(sec / 60).toString()
+            .padStart(2, '0');
+        const s = (sec % 60).toString().padStart(2, '0');
+        return `${m}:${s}`;
+    };
+    return html `
+        ${when(e.state === 'idle', () => html `
+        <mosaik-button .icon="${'M18.25 11a.75.75 0 0 1 .743.648l.007.102v.5a6.75 6.75 0 0 1-6.249 6.732l-.001 2.268a.75.75 0 0 1-1.493.102l-.007-.102v-2.268a6.75 6.75 0 0 1-6.246-6.496L5 12.25v-.5a.75.75 0 0 1 1.493-.102l.007.102v.5a5.25 5.25 0 0 0 5.034 5.246l.216.004h.5a5.25 5.25 0 0 0 5.246-5.034l.004-.216v-.5a.75.75 0 0 1 .75-.75ZM12 2a4 4 0 0 1 4 4v6a4 4 0 0 1-8 0V6a4 4 0 0 1 4-4Z'}"
+                       .type="${'button'}"
+                       .dir="${e.dir}"
+                       .appearance="${'plain'}"
+                       ?disabled=${e.disabled}
+                       @click=${() => e.recStart.emit()}></mosaik-button>
+        `)}
+        ${when(e.state !== 'idle', () => html `
+        <div class="row">
+            <span class="timer" aria-live="polite">${timeLabel()}</span>
+            <div class="spacer"></div>
+            <mosaik-button .icon="${'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.53 6.47-.084-.073a.75.75 0 0 0-.882-.007l-.094.08L12 10.939l-2.47-2.47-.084-.072a.75.75 0 0 0-.882-.007l-.094.08-.073.084a.75.75 0 0 0-.007.882l.08.094L10.939 12l-2.47 2.47-.072.084a.75.75 0 0 0-.007.882l.08.094.084.073a.75.75 0 0 0 .882.007l.094-.08L12 13.061l2.47 2.47.084.072a.75.75 0 0 0 .882.007l.094-.08.073-.084a.75.75 0 0 0 .007-.882l-.08-.094L13.061 12l2.47-2.47.072-.084a.75.75 0 0 0 .007-.882l-.08-.094-.084-.073.084.073Z'}"
+                           .type="${'button'}"
+                           .dir="${e.dir}"
+                           .appearance="${'plain'}"
+                           ?disabled=${e.disabled}
+                           @click=${() => e.recCancel.emit()}></mosaik-button>
+            <mosaik-button .icon="${'M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm3.22 6.97-4.47 4.47-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5a.75.75 0 1 0-1.06-1.06Z'}"
+                           .type="${'button'}"
+                           .dir="${e.dir}"
+                           .appearance="${'plain'}"
+                           ?disabled=${e.disabled}
+                           @click=${() => e.recStop.emit()}>
+            </mosaik-button>
+        </div>
+        `)}
+    `;
+}
+//# sourceMappingURL=VoiceRecorderChatToolElementTemplate.js.map

package/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecorderChatToolElementTemplate.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Media/Chat/Tools/VoiceRecorderChatToolElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAGzD,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,oCAAoC,CAAyC,CAAI;IAC7F,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;QAC1D,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE;aACpC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACtB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QACjD,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;UACL,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;gCACb,sWAAsW;gCACtW,QAAQ;+BACT,CAAC,CAAC,GAAG;sCACE,OAAO;mCACV,CAAC,CAAC,QAAQ;gCACb,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,EAAE;SAC9C,CAAC;UACA,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;qDAEQ,SAAS,EAAE;;oCAE5B,6fAA6f;oCAC7f,QAAQ;mCACT,CAAC,CAAC,GAAG;0CACE,OAAO;uCACV,CAAC,CAAC,QAAQ;oCACb,GAAG,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE;oCACxB,uLAAuL;oCACvL,QAAQ;mCACT,CAAC,CAAC,GAAG;0CACE,OAAO;uCACV,CAAC,CAAC,QAAQ;oCACb,GAAG,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE;;;SAGjD,CAAC;KACL,CAAC;AACN,CAAC"}

package/Controls/Components/States/Abstracts/StateBaseElement.d.ts

@@ -0,0 +1,29 @@
+import { ISlottable, ISlottableProps } from '../../../Behaviors/Slottable';
+import { ITextFormattableProps } from '../../../Behaviors/TextFormattable';
+import { CustomElement } from '../../Abstracts/CustomElement';
+declare const StateBaseElement_base: import("../../../../Index").ControlBehaviorReturn<import("../../../../Index").ControlBehaviorReturn<typeof CustomElement, ISlottableProps & ISlottable>, ITextFormattableProps>;
+/**
+ * State Base - A abstract component for representing states.
+ * For example, empty or error states.
+ *
+ * @public
+ * @abstract
+ */
+export declare class StateBaseElement extends StateBaseElement_base implements ITextFormattableProps, ISlottableProps, ISlottable {
+    private _content;
+    /**
+     * Constructs a new instance of the `StateElement` class.
+     *
+     * @public
+     */
+    constructor();
+    /**
+     * Gets or sets the `content` property of the state.
+     *
+     * @public
+     */
+    get content(): string;
+    set content(value: string);
+}
+export {};
+//# sourceMappingURL=StateBaseElement.d.ts.map

package/Controls/Components/States/Abstracts/StateBaseElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateBaseElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Abstracts/StateBaseElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAa,MAAM,8BAA8B,CAAC;AACtF,OAAO,EAAE,qBAAqB,EAAmB,MAAM,oCAAoC,CAAC;AAE5F,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;;AAI9D;;;;;;GAMG;AACH,qBAAa,gBACT,SAAQ,qBACR,YAAW,qBAAqB,EAAE,eAAe,EAAE,UAAU;IAI7D,OAAO,CAAC,QAAQ,CAAS;IAMzB;;;;OAIG;;IAWH;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAI/B;CAIJ"}

package/Controls/Components/States/Abstracts/StateBaseElement.js

@@ -0,0 +1,58 @@
+// #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 { Slottable } from '../../../Behaviors/Slottable';
+import { TextFormattable } from '../../../Behaviors/TextFormattable';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { CustomElement } from '../../Abstracts/CustomElement';
+// #endregion
+/**
+ * State Base - A abstract component for representing states.
+ * For example, empty or error states.
+ *
+ * @public
+ * @abstract
+ */
+export class StateBaseElement extends TextFormattable(Slottable(CustomElement)) {
+    // #region Fields
+    _content;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `StateElement` class.
+     *
+     * @public
+     */
+    constructor() {
+        super();
+        this._content = '';
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Gets or sets the `content` property of the state.
+     *
+     * @public
+     */
+    get content() {
+        return this._content;
+    }
+    set content(value) {
+        if (this._content !== value) {
+            this._content = value;
+        }
+    }
+}
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], StateBaseElement.prototype, "content", null);
+//# sourceMappingURL=StateBaseElement.js.map

package/Controls/Components/States/Abstracts/StateBaseElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateBaseElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Abstracts/StateBaseElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAA+B,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,EAAyB,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAC5F,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,aAAa;AAEb;;;;;;GAMG;AACH,MAAM,OAAO,gBACT,SAAQ,eAAe,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAGjD,iBAAiB;IAET,QAAQ,CAAS;IAEzB,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACvB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;OAIG;IACH,IACW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IACD,IAAW,OAAO,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC1B,CAAC;IACL,CAAC;CAIJ;AAZG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;+CAG1B"}

package/Controls/Components/States/Busy/BusyStateElement.d.ts

@@ -0,0 +1,94 @@
+import { StateBaseElement } from '../Abstracts/StateBaseElement';
+import { IBusyStateElementProps } from './IBusyStateElementProps';
+declare const BusyStateElement_base: (abstract new (...args: Array<any>) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof StateBaseElement & import("../../../Behaviors/Themeable").IThemeableCtor;
+/**
+ * Busy State - A UI component used to display a message or indication when there is no content or data.
+ *
+ * @description
+ * The Busy State component is designed to provide users with information or guidance when there is no content
+ * or data available. This component often includes a message, icon, and sometimes suggestions or actions
+ * to help users understand what to do next. It helps in creating a more user-friendly experience by guiding users
+ * in scenarios where content is absent.
+ *
+ * @name Busy State
+ * @element mosaik-busy-state
+ * @category States
+ *
+ * @slot - The default slot for placing additional content or elements related to the busy state.
+ * @slot actions - The actions slot for placing actionable elements such as buttons or links for user interaction.
+ *
+ * @csspart icon - The icon part of the busy state component.
+ * @csspart header - The header part of the busy state component.
+ * @csspart content - The content part of the busy state component.
+ *
+ * @cssprop {String} --busy-state-foreground-color - The foreground color for the busy state content.
+ * @cssprop {String} --icon-foreground-color - The foreground color for the icon.
+ * @cssprop {String} --busy-state-header-font-family - The font family for the header text.
+ * @cssprop {String} --busy-state-header-font-size - The font size for the header text.
+ * @cssprop {String} --busy-state-header-font-line-height - The line height for the header text.
+ * @cssprop {String} --busy-state-header-font-weight - The font weight for the header text.
+ * @cssprop {String} --busy-state-header-font-letter-spacing - The letter spacing for the header text.
+ * @cssprop {String} --busy-state-header-font-text-decoration - The text decoration for the header text.
+ * @cssprop {String} --busy-state-header-font-text-transform - The text transform for the header text.
+ *
+ * @dependency {ProgressRingElement} mosaik-progress-ring - The Progress Ring component, used for displaying the loading indicator.
+ * @dependency {TextElement} mosaik-text - The Text component, used for displaying the header and content text.
+ * @dependency {StackElement} mosaik-stack - The Stack component, used for layout management of the icon, header, and content.
+ *
+ * @example
+ * ```html
+ * <mosaik-busy-state>
+ * </mosaik-busy-state>
+ * ```
+ *
+ * @public
+ */
+export declare class BusyStateElement extends BusyStateElement_base implements IBusyStateElementProps {
+    private _header;
+    private _icon;
+    /**
+     * Constructs a new instance of the `BusyStateElement` class.
+     *
+     * @public
+     */
+    constructor();
+    /**
+     * Returns the `is` property.
+     *
+     * @public
+     * @static
+     * @readonly
+    */
+    static get is(): string;
+    /**
+     * Gets or sets the icon property of the state.
+     *
+     * @public
+     */
+    get icon(): string;
+    set icon(value: string);
+    /**
+     * Gets or sets the header property of the state.
+     *
+     * @public
+     * @attr
+     */
+    get header(): string;
+    set header(value: string);
+}
+/**
+ * @public
+ */
+export declare namespace BusyStateElement {
+    type Props = IBusyStateElementProps;
+}
+/**
+ * @public
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'mosaik-busy-state': BusyStateElement;
+    }
+}
+export {};
+//# sourceMappingURL=BusyStateElement.d.ts.map

package/Controls/Components/States/Busy/BusyStateElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAMjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;;AAKlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBAca,gBACT,SAAQ,qBACR,YAAW,sBAAsB;IAIjC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,KAAK,CAAS;IAMtB;;;;OAIG;;IAYH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,IAAI,IAAI,MAAM,CAExB;IAED,IAAW,IAAI,CAAC,KAAK,EAAE,MAAM,EAI5B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAI9B;CAIJ;AAED;;GAEG;AACH,yBAAiB,gBAAgB,CAAC;IAC9B,KAAY,KAAK,GAAG,sBAAsB,CAAC;CAC9C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,mBAAmB,EAAE,gBAAgB,CAAC;KACzC;CACJ"}