@tylertech/forge 2.0.0

package/esm/busy-indicator/busy-indicator-adapter.js

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { addClass, getShadowElement, removeElement, replaceElement, getActiveElement, toggleAttribute, toggleClass } from '@tylertech/forge-core';
+import { BACKDROP_CONSTANTS } from '../backdrop';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { BUSY_INDICATOR_CONSTANTS } from './busy-indicator-constants';
+/**
+ * Provides facilities for interacting with the internal DOM of `BusyIndicatorComponent`.
+ */
+export class BusyIndicatorAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._parentElement = null;
+        this._surfaceElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.SURFACE);
+        this._titleElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.TITLE);
+        this._messageElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.MESSAGE);
+        this._cancelButtonElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.CANCEL);
+        this._spinnerElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.SPINNER);
+        this._progressBarContainerElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.PROGRESS_BAR_CONTAINER);
+        this._progressBarElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.PROGRESS_BAR);
+        this._backdropElement = getShadowElement(component, BUSY_INDICATOR_CONSTANTS.selectors.BACKDROP);
+    }
+    /**
+     * Sets the opacity of the content element.
+     * @param opacity The opacity value.
+     */
+    setSurfaceOpacity(opacity) {
+        this._surfaceElement.style.opacity = opacity.toString();
+    }
+    setFixed(value) {
+        toggleAttribute(this._backdropElement, value, BACKDROP_CONSTANTS.attributes.FIXED);
+        toggleClass(this._surfaceElement, value, BUSY_INDICATOR_CONSTANTS.classes.SURFACE_FIXED);
+    }
+    /**
+     * Sets the content of the title element.
+     * @param title The title text.
+     */
+    setTitle(title) {
+        this._titleElement.innerText = title;
+    }
+    /**
+     * Sets the content of the message element.
+     * @param message The message text.
+     */
+    setMessage(message) {
+        this._messageElement.innerText = message;
+    }
+    /**
+     * Sets the visibility of the title element by adding or removing it from the DOM.
+     * @param visible Whether the title is visible or not.
+     */
+    setTitleVisibility(visible) {
+        this._titlePlaceholderElement = this._toggleElement(visible, BUSY_INDICATOR_CONSTANTS.selectors.TITLE, this._titleElement, this._titlePlaceholderElement);
+    }
+    /**
+     * Adds or removes the cancel button from the DOM.
+     * @param visible The visibility value.
+     */
+    setCancelButtonVisibility(visible) {
+        this._cancelButtonPlaceholderElement = this._toggleElement(visible, BUSY_INDICATOR_CONSTANTS.selectors.CANCEL, this._cancelButtonElement, this._cancelButtonPlaceholderElement);
+    }
+    /**
+     * Adds or removes the message element from the DOM.
+     * @param visible The visibility value.
+     */
+    setMessageVisibility(visible) {
+        this._messagePlaceholderElement = this._toggleElement(visible, BUSY_INDICATOR_CONSTANTS.selectors.MESSAGE, this._messageElement, this._messagePlaceholderElement);
+    }
+    /**
+     * Adds or removes the spinner element from the DOM.
+     * @param visible The visibility value.
+     */
+    setSpinnerVisibility(visible) {
+        this._spinnerPlaceholderElement = this._toggleElement(visible, BUSY_INDICATOR_CONSTANTS.selectors.SPINNER, this._spinnerElement, this._spinnerPlaceholderElement);
+    }
+    /**
+     * Adds or removes the progress bar element from the DOM.
+     * @param visible The visibility value.
+     */
+    setProgressBarVisibility(visible) {
+        this._progressBarContainerPlaceholderElement = this._toggleElement(visible, BUSY_INDICATOR_CONSTANTS.selectors.PROGRESS_BAR_CONTAINER, this._progressBarContainerElement, this._progressBarContainerPlaceholderElement);
+    }
+    /**
+     * Sets the determinate state of the progress bar component.
+     * @param {boolean} determinate The determinate value.
+     */
+    setProgressBarDeterminate(determinate) {
+        this._progressBarElement.determinate = determinate;
+    }
+    /**
+     * Sets the progress percent for the progress bar component.
+     * @param value The progress percent.
+     */
+    setProgressBarProgress(value) {
+        this._progressBarElement.progress = value;
+    }
+    /**
+     * Sets the progress bar component buffer percent.
+     * @param value The buffer percent.
+     */
+    setProgressBarBuffer(value) {
+        this._progressBarElement.buffer = value;
+    }
+    /**
+     * Adds an event listener to the cancel button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    addCancelButtonEventListener(type, listener) {
+        this._cancelButtonElement.addEventListener(type, listener);
+    }
+    /**
+     * Removes an event listener from the cancel button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    removeCancelButtonEventListener(type, listener) {
+        this._cancelButtonElement.removeEventListener(type, listener);
+    }
+    /**
+     * Sets an attribute on the cancel button.
+     * @param name The attribute name.
+     * @param value The attribute value.
+     */
+    setCancelButtonAttribute(name, value) {
+        this._cancelButtonElement.setAttribute(name, value);
+    }
+    /**
+     * Sets the text displayed in the cancel button element.
+     * @param text The text value.
+     */
+    setCancelButtonText(text) {
+        this._cancelButtonElement.innerText = text;
+    }
+    /**
+     * Sets the width of the surface element.
+     * @param value The CSS width.
+     */
+    setSurfaceWidth(value) {
+        this._surfaceElement.style.width = value.toString();
+    }
+    /**
+     * Sets focus to the busy indicator component element.
+     */
+    captureFocus() {
+        this._surfaceElement.focus();
+    }
+    /**
+     * Removes the busy indicator component from its parent.
+     */
+    remove() {
+        removeElement(this._component);
+    }
+    /**
+     * Hides the backdrop by fading it out.
+     */
+    hideBackdrop() {
+        this._backdropElement.fadeOut();
+    }
+    _toggleElement(isVisible, selector, element, placeholder) {
+        const exists = !!getShadowElement(this._component, selector);
+        if (!placeholder) {
+            placeholder = document.createComment(`(${BUSY_INDICATOR_CONSTANTS.elementName}) ${selector}`);
+        }
+        if (isVisible && !exists) {
+            replaceElement(element, placeholder);
+        }
+        else if (!isVisible && exists) {
+            replaceElement(placeholder, element);
+        }
+        return placeholder;
+    }
+    setContainerInvisible() {
+        addClass(BUSY_INDICATOR_CONSTANTS.classes.SURFACE_INVISIBLE, this._surfaceElement);
+    }
+    setBackdropAppearance(appearance) {
+        this._backdropElement.setAttribute(BACKDROP_CONSTANTS.attributes.APPEARANCE, String(appearance));
+    }
+    setParentAttribute(name, value) {
+        this._parentElement = this._component.parentElement;
+        if (this._parentElement) {
+            this._parentElement.setAttribute(name, value);
+        }
+    }
+    removeParentAttribute(name) {
+        if (this._parentElement) {
+            this._parentElement.removeAttribute(name);
+            this._parentElement = null;
+        }
+    }
+    getFocusedElement() {
+        return getActiveElement();
+    }
+    hasFocus() {
+        const activeElement = this.getFocusedElement();
+        return this._component === activeElement || this._surfaceElement === activeElement || this._surfaceElement.contains(activeElement);
+    }
+}

package/esm/busy-indicator/busy-indicator-constants.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const BUSY_INDICATOR_CONSTANTS: {
+    elementName: "forge-busy-indicator";
+    selectors: {
+        SURFACE: string;
+        SURFACE_INVISIBLE: string;
+        TITLE: string;
+        MESSAGE: string;
+        CANCEL: string;
+        SPINNER: string;
+        PROGRESS_BAR_CONTAINER: string;
+        PROGRESS_BAR: string;
+        BACKDROP: "forge-backdrop";
+    };
+    events: {
+        CANCEL: string;
+    };
+    strings: {
+        CANCELLING: string;
+    };
+    attributes: {
+        TITLE_TEXT: string;
+        MESSAGE: string;
+        CANCEL: string;
+        SPINNER: string;
+        PROGRESS_BAR: string;
+        PROGRESS_BAR_DETERMINATE: string;
+        PROGRESS: string;
+        BUFFER: string;
+        WIDTH: string;
+        DIRECTION: string;
+        MINIMUM_VISIBLE_LIFETIME: string;
+        MANAGE_FOCUS: string;
+        PARENT_OPEN: string;
+        FIXED: string;
+    };
+    numbers: {
+        TRANSITION_LENGTH: number;
+    };
+    classes: {
+        SURFACE_INVISIBLE: string;
+        SURFACE_FIXED: string;
+    };
+};
+export declare type BusyIndicatorLayoutDirection = 'row' | 'column' | undefined;

package/esm/busy-indicator/busy-indicator-constants.js

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BACKDROP_CONSTANTS } from '../backdrop';
+import { COMPONENT_NAME_PREFIX } from '../constants';
+import { LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
+const elementName = `${COMPONENT_NAME_PREFIX}busy-indicator`;
+const classes = {
+    SURFACE_INVISIBLE: 'forge-busy-indicator__surface--invisible',
+    SURFACE_FIXED: 'forge-busy-indicator__surface--fixed'
+};
+const selectors = {
+    SURFACE: '.forge-busy-indicator__surface',
+    SURFACE_INVISIBLE: `.${classes.SURFACE_INVISIBLE}`,
+    TITLE: '.forge-busy-indicator__title',
+    MESSAGE: '.forge-busy-indicator__message',
+    CANCEL: '.forge-busy-indicator__cancel-button',
+    SPINNER: '.forge-busy-indicator__spinner',
+    PROGRESS_BAR_CONTAINER: '.forge-busy-indicator__progress-container',
+    PROGRESS_BAR: `.forge-busy-indicator__progress-container ${LINEAR_PROGRESS_CONSTANTS.elementName}`,
+    BACKDROP: BACKDROP_CONSTANTS.elementName
+};
+const events = {
+    CANCEL: `${elementName}-cancel`
+};
+const strings = {
+    CANCELLING: 'Cancelling...'
+};
+const attributes = {
+    TITLE_TEXT: 'title-text',
+    MESSAGE: 'message',
+    CANCEL: 'cancel',
+    SPINNER: 'spinner',
+    PROGRESS_BAR: 'progress-bar',
+    PROGRESS_BAR_DETERMINATE: 'progress-bar-determinate',
+    PROGRESS: 'progress',
+    BUFFER: 'buffer',
+    WIDTH: 'width',
+    DIRECTION: 'direction',
+    MINIMUM_VISIBLE_LIFETIME: 'minimum-visible-lifetime',
+    MANAGE_FOCUS: 'manage-focus',
+    PARENT_OPEN: 'forge-busy-indicator-open',
+    FIXED: 'fixed'
+};
+const numbers = {
+    TRANSITION_LENGTH: 120
+};
+export const BUSY_INDICATOR_CONSTANTS = {
+    elementName,
+    selectors,
+    events,
+    strings,
+    attributes,
+    numbers,
+    classes
+};

package/esm/busy-indicator/busy-indicator-foundation.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ICustomElementFoundation } from '@tylertech/forge-core';
+import { IBusyIndicatorAdapter } from './busy-indicator-adapter';
+import { BusyIndicatorLayoutDirection } from './busy-indicator-constants';
+export interface IBusyIndicatorFoundation extends ICustomElementFoundation {
+    titleText: string;
+    message: string;
+    cancel: boolean;
+    spinner: boolean;
+    progressBar: boolean;
+    progressBarDeterminate: boolean;
+    progress: number;
+    buffer: number;
+    width: number | 'auto';
+    direction: BusyIndicatorLayoutDirection;
+    manageFocus: boolean;
+    fixed: boolean;
+    hide(force?: boolean): void;
+}
+/**
+ * Provides facilities and helper methods for creating a busy indicator component.
+ */
+export declare class BusyIndicatorFoundation implements IBusyIndicatorFoundation {
+    private _adapter;
+    private _titleText;
+    private _message;
+    private _canCancel;
+    private _showSpinner;
+    private _showProgressBar;
+    private _progressBarDeterminate;
+    private _progress;
+    private _buffer;
+    private _cancelListenerAttached;
+    private _width;
+    private _previouslyFocusedElement?;
+    private _direction;
+    private _manageFocus;
+    private _fixed;
+    constructor(_adapter: IBusyIndicatorAdapter);
+    destroy(): void;
+    show(): void;
+    /**
+     * Removes the element from the DOM.
+     * @param {boolean} [force=false] Whether to force removal of the busy indicator or not.
+     */
+    hide(force?: boolean): void;
+    /** Sets the elements opacity to 0 which triggers the CSS transition to fade out. */
+    fadeOut(): void;
+    /** Sets the elements opacity to 1 which triggers the CSS transition to fade in after the current delay value. */
+    fadeIn(): void;
+    /** Attaches the click listener to the cancel button. */
+    private _attachCancelClickListener;
+    /** Handles clicks on the cancel button. */
+    private _onCancelClick;
+    /** Cache currently focused element, set focus to the busy indicator. */
+    private _captureFocus;
+    /** Gives focus back to the element that had it when the busy indicator was displayed. */
+    private _releaseFocus;
+    /** The title to be displayed. */
+    set titleText(value: string);
+    get titleText(): string;
+    /** The message to be displayed. */
+    set message(value: string);
+    get message(): string;
+    /** Controls whether the cancel button is visible or not. */
+    set cancel(canCancel: boolean);
+    get cancel(): boolean;
+    /** Controls whether the progress spinner is visible or not. */
+    set spinner(showSpinner: boolean);
+    get spinner(): boolean;
+    /** Controls whether the progres bar is visible or not. */
+    set progressBar(showProgressBar: boolean);
+    get progressBar(): boolean;
+    /** Sets the progress bar mode. */
+    set progressBarDeterminate(determinate: boolean);
+    get progressBarDeterminate(): boolean;
+    /** The progress amount of the progress bar. */
+    set progress(value: number);
+    get progress(): number;
+    /** The buffer amount of the progress bar. */
+    set buffer(value: number);
+    get buffer(): number;
+    get direction(): BusyIndicatorLayoutDirection;
+    set direction(value: BusyIndicatorLayoutDirection);
+    private _applyDirection;
+    /** Sets the width of the busy indicator element. */
+    set width(value: number | 'auto');
+    get width(): number | 'auto';
+    get manageFocus(): boolean;
+    set manageFocus(value: boolean);
+    get fixed(): boolean;
+    set fixed(value: boolean);
+}

package/esm/busy-indicator/busy-indicator-foundation.js

@@ -0,0 +1,268 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { isDefined } from '@tylertech/forge-core';
+import { BUSY_INDICATOR_CONSTANTS } from './busy-indicator-constants';
+/**
+ * Provides facilities and helper methods for creating a busy indicator component.
+ */
+export class BusyIndicatorFoundation {
+    constructor(_adapter) {
+        this._adapter = _adapter;
+        this._canCancel = false;
+        this._showSpinner = true;
+        this._showProgressBar = false;
+        this._progressBarDeterminate = false;
+        this._progress = 0;
+        this._buffer = 0;
+        this._cancelListenerAttached = false;
+        this._direction = 'row';
+        this._manageFocus = true;
+        this._fixed = true;
+    }
+    destroy() {
+        this._adapter.removeCancelButtonEventListener('click', this._onCancelClick);
+    }
+    show() {
+        this._applyDirection();
+        this._adapter.setParentAttribute(BUSY_INDICATOR_CONSTANTS.attributes.PARENT_OPEN, 'true');
+        this._adapter.setHostAttribute('tabindex', '0');
+        this._adapter.setSurfaceOpacity(0);
+        this._adapter.setFixed(this._fixed);
+        if (!this._titleText) {
+            this._adapter.setTitleVisibility(false);
+        }
+        if (this._message) {
+            this._adapter.setMessage(this._message);
+        }
+        this._adapter.setMessageVisibility(!!this._message);
+        if (!this._canCancel) {
+            this._adapter.setCancelButtonVisibility(false);
+        }
+        else {
+            this._attachCancelClickListener();
+        }
+        if (!this._showSpinner) {
+            this._adapter.setSpinnerVisibility(false);
+        }
+        if (!this._showProgressBar) {
+            this._adapter.setProgressBarVisibility(false);
+        }
+        else {
+            this._adapter.setProgressBarDeterminate(this._progressBarDeterminate);
+            this._adapter.setProgressBarProgress(this._progress);
+            this._adapter.setProgressBarBuffer(this._buffer);
+        }
+        if (this._width) {
+            this._adapter.setSurfaceWidth(typeof this._width === 'number' ? `${this._width}px` : this._width);
+        }
+        if ((!this._message || this._message.length === 0) && this._showSpinner && (!this.titleText || this._titleText.length === 0) && !this._canCancel) {
+            this._adapter.setContainerInvisible();
+            this._adapter.setBackdropAppearance('light');
+        }
+        this.fadeIn();
+    }
+    /**
+     * Removes the element from the DOM.
+     * @param {boolean} [force=false] Whether to force removal of the busy indicator or not.
+     */
+    hide(force = false) {
+        if (force) {
+            if (this._manageFocus) {
+                this._releaseFocus();
+            }
+            this._adapter.remove();
+            this._adapter.removeParentAttribute(BUSY_INDICATOR_CONSTANTS.attributes.PARENT_OPEN);
+        }
+        else {
+            this.fadeOut();
+            this._adapter.hideBackdrop();
+            setTimeout(() => {
+                if (this._manageFocus) {
+                    this._releaseFocus();
+                }
+                this._adapter.remove();
+                this._adapter.removeParentAttribute(BUSY_INDICATOR_CONSTANTS.attributes.PARENT_OPEN);
+            }, BUSY_INDICATOR_CONSTANTS.numbers.TRANSITION_LENGTH);
+        }
+    }
+    /** Sets the elements opacity to 0 which triggers the CSS transition to fade out. */
+    fadeOut() {
+        this._adapter.setSurfaceOpacity(0);
+    }
+    /** Sets the elements opacity to 1 which triggers the CSS transition to fade in after the current delay value. */
+    fadeIn() {
+        this._adapter.setSurfaceOpacity(1);
+        if (this._manageFocus) {
+            this._captureFocus();
+        }
+    }
+    /** Attaches the click listener to the cancel button. */
+    _attachCancelClickListener() {
+        if (!this._cancelListenerAttached) {
+            this._adapter.addCancelButtonEventListener('click', this._onCancelClick.bind(this));
+            this._cancelListenerAttached = true;
+        }
+    }
+    /** Handles clicks on the cancel button. */
+    _onCancelClick() {
+        this._adapter.setCancelButtonAttribute('disabled', 'disabled');
+        this._adapter.setCancelButtonText(BUSY_INDICATOR_CONSTANTS.strings.CANCELLING);
+        this._adapter.removeCancelButtonEventListener('click', this._onCancelClick);
+        this._adapter.emitHostEvent(BUSY_INDICATOR_CONSTANTS.events.CANCEL);
+    }
+    /** Cache currently focused element, set focus to the busy indicator. */
+    _captureFocus() {
+        this._previouslyFocusedElement = this._adapter.getFocusedElement();
+        this._adapter.captureFocus();
+    }
+    /** Gives focus back to the element that had it when the busy indicator was displayed. */
+    _releaseFocus() {
+        if (this._previouslyFocusedElement && this._adapter.hasFocus()) {
+            this._previouslyFocusedElement.focus();
+        }
+    }
+    /** The title to be displayed. */
+    set titleText(value) {
+        if (this._titleText !== value) {
+            this._titleText = value;
+            this._adapter.setTitle(this._titleText);
+            this._adapter.setTitleVisibility(!!this._titleText);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.TITLE_TEXT, this._titleText);
+        }
+    }
+    get titleText() {
+        return this._titleText;
+    }
+    /** The message to be displayed. */
+    set message(value) {
+        if (this._message !== value) {
+            this._message = value;
+            this._adapter.setMessage(this._message);
+            this._adapter.setMessageVisibility(!!this._message);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.MESSAGE, this._message);
+        }
+    }
+    get message() {
+        return this._message;
+    }
+    /** Controls whether the cancel button is visible or not. */
+    set cancel(canCancel) {
+        if (this._canCancel !== canCancel) {
+            this._canCancel = canCancel;
+            this._adapter.setCancelButtonVisibility(!!this._canCancel);
+            if (this._canCancel) {
+                this._attachCancelClickListener();
+            }
+            else {
+                this._adapter.removeCancelButtonEventListener('click', this._onCancelClick);
+            }
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.CANCEL, this._canCancel.toString());
+        }
+    }
+    get cancel() {
+        return this._canCancel;
+    }
+    /** Controls whether the progress spinner is visible or not. */
+    set spinner(showSpinner) {
+        if (this._showSpinner !== showSpinner) {
+            this._showSpinner = showSpinner;
+            this._adapter.setSpinnerVisibility(!!this._showSpinner);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.SPINNER, '' + this._showSpinner);
+        }
+    }
+    get spinner() {
+        return this._showSpinner;
+    }
+    /** Controls whether the progres bar is visible or not. */
+    set progressBar(showProgressBar) {
+        if (this._showProgressBar !== showProgressBar) {
+            this._showProgressBar = showProgressBar;
+            this._adapter.setProgressBarVisibility(!!this._showProgressBar);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.PROGRESS_BAR, this._showProgressBar.toString());
+        }
+    }
+    get progressBar() {
+        return this._showProgressBar;
+    }
+    /** Sets the progress bar mode. */
+    set progressBarDeterminate(determinate) {
+        if (this._progressBarDeterminate !== determinate) {
+            this._progressBarDeterminate = determinate;
+            this._adapter.setProgressBarDeterminate(determinate);
+        }
+    }
+    get progressBarDeterminate() {
+        return this._progressBarDeterminate;
+    }
+    /** The progress amount of the progress bar. */
+    set progress(value) {
+        if (this._progress !== value && this._progressBarDeterminate) {
+            this._progress = value;
+            this._adapter.setProgressBarProgress(value);
+        }
+    }
+    get progress() {
+        return this._progress;
+    }
+    /** The buffer amount of the progress bar. */
+    set buffer(value) {
+        if (this._buffer !== value && this._progressBarDeterminate) {
+            this._buffer = value;
+            this._adapter.setProgressBarBuffer(value);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.BUFFER, isDefined(this._buffer) ? this._buffer.toString() : '0');
+        }
+    }
+    get buffer() {
+        return this._buffer;
+    }
+    get direction() {
+        return this._direction;
+    }
+    set direction(value) {
+        if (value !== this._direction) {
+            this._direction = value;
+            this._applyDirection();
+        }
+    }
+    _applyDirection() {
+        if (this._direction) {
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.DIRECTION, String(this._direction));
+        }
+    }
+    /** Sets the width of the busy indicator element. */
+    set width(value) {
+        if (this._width !== value) {
+            if (typeof value === 'number' && value < 0) {
+                value = 'auto';
+            }
+            this._width = value;
+            this._adapter.setSurfaceWidth(typeof this._width === 'number' ? `${this._width}px` : this._width);
+            this._adapter.setHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.WIDTH, this._width.toString());
+        }
+    }
+    get width() {
+        return this._width;
+    }
+    get manageFocus() {
+        return this._manageFocus;
+    }
+    set manageFocus(value) {
+        if (this._manageFocus !== value) {
+            this._manageFocus = value;
+            this._adapter.toggleHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.MANAGE_FOCUS, this._manageFocus);
+        }
+    }
+    get fixed() {
+        return this._fixed;
+    }
+    set fixed(value) {
+        if (this._fixed !== value) {
+            this._fixed = value;
+            this._adapter.setFixed(this._fixed);
+            this._adapter.toggleHostAttribute(BUSY_INDICATOR_CONSTANTS.attributes.FIXED, this._fixed);
+        }
+    }
+}