@breadstone/mosaik-elements-foundation 0.0.127 → 0.0.128

package/Controls/Components/States/Busy/BusyStateElement.js

@@ -0,0 +1,150 @@
+// #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 { Attribute } from '../../../Decorators/AttributeDecorator';
+import { Component } from '../../../Decorators/ComponentDecorator';
+import { Property } from '../../../Decorators/PropertyDecorator';
+import { StackElement } from '../../Layouts/Stack/StackElement';
+import { TextElement } from '../../Primitives/Text/TextElement';
+import { StateBaseElement } from '../Abstracts/StateBaseElement';
+import { busyStateElementTemplate } from './BusyStateElementTemplate';
+import { busyStateElementJoyStyle } from './Themes/BusyStateElement.Joy';
+import { busyStateElementRetroStyle } from './Themes/BusyStateElement.Retro';
+import { busyStateElementCosmopolitanStyle } from './Themes/BusyStateElement.Cosmopolitan';
+import { Themeable } from '../../../Behaviors/Themeable';
+import { ProgressRingElement } from '../../Ranges/ProgressRing/ProgressRingElement';
+// #endregion
+/**
+ * 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
+ */
+let BusyStateElement = class BusyStateElement extends Themeable(StateBaseElement) {
+    // #region Fields
+    _header;
+    _icon;
+    // #endregion
+    // #region Ctor
+    /**
+     * Constructs a new instance of the `BusyStateElement` class.
+     *
+     * @public
+     */
+    constructor() {
+        super();
+        this._icon = '';
+        this._header = '';
+    }
+    // #endregion
+    // #region Properties
+    /**
+     * Returns the `is` property.
+     *
+     * @public
+     * @static
+     * @readonly
+    */
+    static get is() {
+        return 'mosaik-busy-state';
+    }
+    /**
+     * Gets or sets the icon property of the state.
+     *
+     * @public
+     */
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value;
+        }
+    }
+    /**
+     * Gets or sets the header property of the state.
+     *
+     * @public
+     * @attr
+     */
+    get header() {
+        return this._header;
+    }
+    set header(value) {
+        if (this._header !== value) {
+            this._header = value;
+        }
+    }
+};
+__decorate([
+    Property({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BusyStateElement.prototype, "icon", null);
+__decorate([
+    Attribute({ type: String }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], BusyStateElement.prototype, "header", null);
+BusyStateElement = __decorate([
+    Component({
+        selector: 'mosaik-busy-state',
+        template: busyStateElementTemplate,
+        themes: {
+            joy: busyStateElementJoyStyle,
+            retro: busyStateElementRetroStyle,
+            cosmopolitan: busyStateElementCosmopolitanStyle
+        },
+        imports: [
+            ProgressRingElement,
+            TextElement,
+            StackElement
+        ]
+    }),
+    __metadata("design:paramtypes", [])
+], BusyStateElement);
+export { BusyStateElement };
+//# sourceMappingURL=BusyStateElement.js.map

package/Controls/Components/States/Busy/BusyStateElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElement.ts"],"names":[],"mappings":"AAAA,kBAAkB;;;;;;;;;;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,OAAO,EAAE,iCAAiC,EAAE,MAAM,wCAAwC,CAAC;AAC3F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAC;AAEpF,aAAa;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAeI,IAAM,gBAAgB,GAAtB,MAAM,gBACT,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IAGnC,iBAAiB;IAET,OAAO,CAAS;IAChB,KAAK,CAAS;IAEtB,aAAa;IAEb,eAAe;IAEf;;;;OAIG;IACH;QACI,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;IAEb,qBAAqB;IAErB;;;;;;MAME;IACK,MAAM,KAAK,EAAE;QAChB,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAED;;;;OAIG;IACH,IACW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACvB,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,IACW,MAAM;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,IAAW,MAAM,CAAC,KAAa;QAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,CAAC;IACL,CAAC;CAIJ,CAAA;AA9BG;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;4CAG1B;AAcD;IAAC,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;;8CAG3B;AAjEQ,gBAAgB;IAd5B,SAAS,CAAC;QACP,QAAQ,EAAE,mBAAmB;QAC7B,QAAQ,EAAE,wBAAwB;QAClC,MAAM,EAAE;YACJ,GAAG,EAAE,wBAAwB;YAC7B,KAAK,EAAE,0BAA0B;YACjC,YAAY,EAAE,iCAAiC;SAClD;QACD,OAAO,EAAE;YACL,mBAAmB;YACnB,WAAW;YACX,YAAY;SACf;KACJ,CAAC;;GACW,gBAAgB,CA2E5B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAIjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAK3D;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,gBAAgB,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA8BzF"}

package/Controls/Components/States/Busy/BusyStateElementTemplate.js

@@ -0,0 +1,44 @@
+// #region Imports
+import { html } from '../../../../Dom/Html';
+import { when } from '../../../Directives/Directives';
+import { Orientation } from '../../../Types/Orientation';
+import { TextAlignment } from '../../../Types/TextAlignment';
+import { styleSheetVar } from '../../../Directives/StyleSheetVarDirective';
+// #endregion
+/**
+ * The template of the {@link BusyStateElement}.
+ *
+ * @public
+ */
+export function busyStateElementTemplate(e) {
+    return html `
+        <mosaik-progress-ring part="symbol"
+                              .radius="${styleSheetVar('--busy-state-symbol-size')}"
+                              .isIndeterminate="${true}"></mosaik-progress-ring>
+        <mosaik-stack .orientation="${Orientation.Vertical}">
+            ${when(e.header, () => html `
+            <mosaik-text part="header"
+                         .readonly="${true}"
+                         .wrap="${true}"
+                         .alignment="${TextAlignment.Center}"
+                         .text="${e.header}"
+                         .formatter="${e.formatter}"></mosaik-text>
+            `)}
+            ${when(e.content, () => html `
+            <mosaik-text part="content"
+                         .readonly="${true}"
+                         .wrap="${true}"
+                         .alignment="${TextAlignment.Center}"
+                         .text="${e.content}"
+                         .formatter="${e.formatter}"></mosaik-text>
+            `)}
+            <slot></slot>
+        </mosaik-stack>
+        <mosaik-stack .orientation="${Orientation.Horizontal}"
+                      .gap="${styleSheetVar('--busy-state-gap')}"
+                      ?hidden="${!e.hasSlotContent('actions')}">
+            <slot name="actions"></slot>
+        </mosaik-stack>
+    `;
+}
+//# sourceMappingURL=BusyStateElementTemplate.js.map

package/Controls/Components/States/Busy/BusyStateElementTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/BusyStateElementTemplate.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,IAAI,EAAuB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,gCAAgC,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAE3E,aAAa;AAEb;;;;GAIG;AACH,MAAM,UAAU,wBAAwB,CAA6B,CAAI;IACrE,OAAO,IAAI,CAAA;;yCAE0B,aAAa,CAAC,0BAA0B,CAAC;kDAChC,IAAI;sCAChB,WAAW,CAAC,QAAQ;cAC5C,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAED,IAAI;kCACR,IAAI;uCACC,aAAa,CAAC,MAAM;kCACzB,CAAC,CAAC,MAAM;uCACH,CAAC,CAAC,SAAS;aACrC,CAAC;cACA,IAAI,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;sCAEF,IAAI;kCACR,IAAI;uCACC,aAAa,CAAC,MAAM;kCACzB,CAAC,CAAC,OAAO;uCACJ,CAAC,CAAC,SAAS;aACrC,CAAC;;;sCAGwB,WAAW,CAAC,UAAU;8BAC9B,aAAa,CAAC,kBAAkB,CAAC;iCAC9B,CAAC,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC;;;KAGxD,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,12 @@
+import type { ISlottableProps } from '../../../Behaviors/Slottable';
+import type { ITextFormattableProps } from '../../../Behaviors/TextFormattable';
+/**
+ * Represents the `{@link IBusyStateElementProps}` interface.
+ *
+ * @public
+ */
+export interface IBusyStateElementProps extends ITextFormattableProps, ISlottableProps {
+    header: string;
+    content: string;
+}
+//# sourceMappingURL=IBusyStateElementProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IBusyStateElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/IBusyStateElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAIhF;;;;GAIG;AACH,MAAM,WAAW,sBACb,SAAQ,qBAAqB,EAAE,eAAe;IAE9C,MAAM,EAAE,MAAM,CAAC;IAEf,OAAO,EAAE,MAAM,CAAC;CAEnB"}

package/Controls/Components/States/Busy/IBusyStateElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IBusyStateElementProps.js.map

package/Controls/Components/States/Busy/IBusyStateElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IBusyStateElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/IBusyStateElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

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

@@ -0,0 +1,12 @@
+import type { ISlottableProps } from '../../../Behaviors/Slottable';
+import type { ITextFormattableProps } from '../../../Behaviors/TextFormattable';
+/**
+ * Represents the `{@link IEmptyStateElementProps}` interface.
+ *
+ * @public
+ */
+export interface IEmptyStateElementProps extends ITextFormattableProps, ISlottableProps {
+    icon: string;
+    header: string;
+}
+//# sourceMappingURL=IEmptyStateElementProps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IEmptyStateElementProps.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/IEmptyStateElementProps.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAIhF;;;;GAIG;AACH,MAAM,WAAW,uBACb,SAAQ,qBAAqB,EAAE,eAAe;IAE9C,IAAI,EAAE,MAAM,CAAC;IAEb,MAAM,EAAE,MAAM,CAAC;CAElB"}

package/Controls/Components/States/Busy/IEmptyStateElementProps.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=IEmptyStateElementProps.js.map

package/Controls/Components/States/Busy/IEmptyStateElementProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IEmptyStateElementProps.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/States/Busy/IEmptyStateElementProps.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,iCAAiC,IAAI,SAAS,CAqG7D"}

package/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.js

@@ -0,0 +1,115 @@
+// ------------------------------------------------------------------------------
+// <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 busyStateElementCosmopolitanStyle() {
+    return css `
+:host {
+  --busy-state-font-family: unset;
+  --busy-state-font-letter-spacing: unset;
+  --busy-state-font-line-height: unset;
+  --busy-state-font-size: unset;
+  --busy-state-font-text-decoration: unset;
+  --busy-state-font-text-transform: unset;
+  --busy-state-font-weight: unset;
+  --busy-state-foreground-color: unset;
+  --busy-state-gap: unset;
+  --busy-state-header-font-family: unset;
+  --busy-state-header-font-letter-spacing: unset;
+  --busy-state-header-font-line-height: unset;
+  --busy-state-header-font-size: unset;
+  --busy-state-header-font-text-decoration: unset;
+  --busy-state-header-font-text-transform: unset;
+  --busy-state-header-font-weight: unset;
+  --busy-state-padding-bottom: unset;
+  --busy-state-padding-left: unset;
+  --busy-state-padding-right: unset;
+  --busy-state-padding-top: unset;
+  --busy-state-transition-duration: unset;
+  --busy-state-transition-mode: unset;
+  --busy-state-transition-property: unset;
+  --busy-state-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 {
+  --busy-state-symbol-size: 26px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding-top: var(--busy-state-padding-top);
+  padding-right: var(--busy-state-padding-right);
+  padding-bottom: var(--busy-state-padding-bottom);
+  padding-left: var(--busy-state-padding-left);
+  place-content: center;
+  align-items: center;
+  gap: var(--busy-state-gap);
+  color: var(--busy-state-foreground-color);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="symbol"] {
+  --icon-foreground-color: var(--busy-state-foreground-color);
+}
+
+:host [part="header"] {
+  font-family: var(--busy-state-header-font-family);
+  font-size: var(--busy-state-header-font-size);
+  line-height: var(--busy-state-header-font-line-height);
+  font-weight: var(--busy-state-header-font-weight);
+  letter-spacing: var(--busy-state-header-font-letter-spacing);
+  -webkit-text-decoration: var(--busy-state-header-font-text-decoration);
+  text-decoration: var(--busy-state-header-font-text-decoration);
+  text-transform: var(--busy-state-header-font-text-transform);
+}
+
+:host [part="content"] {
+  font-family: var(--busy-state-content-font-family);
+  font-size: var(--busy-state-content-font-size);
+  line-height: var(--busy-state-content-font-line-height);
+  font-weight: var(--busy-state-content-font-weight);
+  letter-spacing: var(--busy-state-content-font-letter-spacing);
+  -webkit-text-decoration: var(--busy-state-content-font-text-decoration);
+  text-decoration: var(--busy-state-content-font-text-decoration);
+  text-transform: var(--busy-state-content-font-text-transform);
+}
+
+    `;
+}
+//# sourceMappingURL=BusyStateElement.Cosmopolitan.js.map

package/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Busy/Themes/BusyStateElement.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,iCAAiC;IAC7C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGT,CAAC;AACN,CAAC"}

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

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

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

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

package/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.js

@@ -0,0 +1,135 @@
+// ------------------------------------------------------------------------------
+// <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 busyStateElementJoyStyle() {
+    return css `
+:host {
+  --busy-state-font-family: unset;
+  --busy-state-font-letter-spacing: unset;
+  --busy-state-font-line-height: unset;
+  --busy-state-font-size: unset;
+  --busy-state-font-text-decoration: unset;
+  --busy-state-font-text-transform: unset;
+  --busy-state-font-weight: unset;
+  --busy-state-foreground-color: var(--joy-scheme-middlelight);
+  --busy-state-gap: var(--joy-layout-space);
+  --busy-state-header-font-family: var(--joy-font-family);
+  --busy-state-header-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
+  --busy-state-header-font-line-height: var(--joy-typography-body1-line-height);
+  --busy-state-header-font-size: var(--joy-typography-body1-font-size);
+  --busy-state-header-font-text-decoration: var(--joy-typography-body1-text-decoration);
+  --busy-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
+  --busy-state-header-font-weight: var(--joy-typography-body1-font-weight);
+  --busy-state-padding-bottom: calc(var(--joy-layout-space) * 2);
+  --busy-state-padding-left: calc(var(--joy-layout-space) * 2);
+  --busy-state-padding-right: calc(var(--joy-layout-space) * 2);
+  --busy-state-padding-top: calc(var(--joy-layout-space) * 2);
+  --busy-state-transition-duration: unset;
+  --busy-state-transition-mode: unset;
+  --busy-state-transition-property: unset;
+  --busy-state-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 {
+  --busy-state-symbol-size: 26px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  padding-top: var(--busy-state-padding-top);
+  padding-right: var(--busy-state-padding-right);
+  padding-bottom: var(--busy-state-padding-bottom);
+  padding-left: var(--busy-state-padding-left);
+  place-content: center;
+  align-items: center;
+  gap: var(--busy-state-gap);
+  color: var(--busy-state-foreground-color);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+}
+
+:host [part="symbol"] {
+  --icon-foreground-color: var(--busy-state-foreground-color);
+}
+
+:host [part="header"] {
+  font-family: var(--busy-state-header-font-family);
+  font-size: var(--busy-state-header-font-size);
+  line-height: var(--busy-state-header-font-line-height);
+  font-weight: var(--busy-state-header-font-weight);
+  letter-spacing: var(--busy-state-header-font-letter-spacing);
+  -webkit-text-decoration: var(--busy-state-header-font-text-decoration);
+  text-decoration: var(--busy-state-header-font-text-decoration);
+  text-transform: var(--busy-state-header-font-text-transform);
+}
+
+:host [part="content"] {
+  font-family: var(--busy-state-content-font-family);
+  font-size: var(--busy-state-content-font-size);
+  line-height: var(--busy-state-content-font-line-height);
+  font-weight: var(--busy-state-content-font-weight);
+  letter-spacing: var(--busy-state-content-font-letter-spacing);
+  -webkit-text-decoration: var(--busy-state-content-font-text-decoration);
+  text-decoration: var(--busy-state-content-font-text-decoration);
+  text-transform: var(--busy-state-content-font-text-transform);
+}
+
+:host [part="header"] {
+  --busy-state-header-font-family: var(--joy-typography-body1-font-family);
+  --busy-state-header-font-size: var(--joy-typography-body1-font-size);
+  --busy-state-header-font-line-height: var(--joy-typography-body1-line-height);
+  --busy-state-header-font-weight: var(--joy-typography-body1-font-weight);
+  --busy-state-header-font-letter-spacing: var(--joy-typography-body1-letter-spacing);
+  --busy-state-header-font-text-decoration: var(--joy-typography-body1-text-decoration);
+  --busy-state-header-font-text-transform: var(--joy-typography-body1-text-transform);
+}
+
+:host [part="content"] {
+  --busy-state-content-font-family: var(--joy-typography-body2-font-family);
+  --busy-state-content-font-size: var(--joy-typography-body2-font-size);
+  --busy-state-content-font-line-height: var(--joy-typography-body2-line-height);
+  --busy-state-content-font-weight: var(--joy-typography-body2-font-weight);
+  --busy-state-content-font-letter-spacing: var(--joy-typography-body2-letter-spacing);
+  --busy-state-content-font-text-decoration: var(--joy-typography-body2-text-decoration);
+  --busy-state-content-font-text-transform: var(--joy-typography-body2-text-transform);
+}
+
+    `;
+}
+//# sourceMappingURL=BusyStateElement.Joy.js.map

package/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BusyStateElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.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,wBAAwB;IACpC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuHT,CAAC;AACN,CAAC"}

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

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

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

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