@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/components/AudioLayerSettings.js

@@ -1,28 +1,86 @@
+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 { Component } from '../component';
 import { AudioContextContext } from '../contexts/audiocontextcontext';
-import { Observable } from '../observable';
+import { zComponent, zObserve, zUI } from '../decorators';
 /**
  * Audio layer settings.
  * @zcomponent
- * @ztag core/audiolayersettings
- * @zgroup Media
  * @zicon volume_up
+ * @zgroup Media
+ * @ztag core/audiolayersettings
  */
-export class AudioLayerSettings extends Component {
-    /**
-     * Creates a new AudioLayerSettings component.
-     * @param contextManager - The current ContextManager
-     * @param props - The constructor properties.
-     */
-    constructor(contextManager, props) {
-        super(contextManager, props);
+let AudioLayerSettings = (() => {
+    let _classDecorators = [zComponent({ icon: 'volume_up', group: 'Media', tags: ['core/audiolayersettings'] })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _volume_decorators;
+    let _volume_initializers = [];
+    let _volume_extraInitializers = [];
+    var AudioLayerSettings = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _volume_decorators = [zObserve((v, instance) => instance.contextManager.get(AudioContextContext).setVolumeForLayer(instance.constructorProps?.layer, v)), zUI({ type: 'proportion' })];
+            __esDecorate(null, null, _volume_decorators, { kind: "field", name: "volume", static: false, private: false, access: { has: obj => "volume" in obj, get: obj => obj.volume, set: (obj, value) => { obj.volume = value; } }, metadata: _metadata }, _volume_initializers, _volume_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            AudioLayerSettings = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         /**
-         * @zprop
+         * The volume of the layer.
+         *
+         * Default is 1.
+         * @default 1
+         * @zui
          * @ztype proportion
-         * @zdefault 1
          */
-        this.volume = new Observable(1, v => {
-            this.contextManager.get(AudioContextContext).setVolumeForLayer(this.constructorProps?.layer, v);
-        });
-    }
-}
+        volume = __runInitializers(this, _volume_initializers, 1);
+        /**
+         * Creates a new AudioLayerSettings component.
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
+         */
+        constructor(contextManager, props) {
+            super(contextManager, props);
+            __runInitializers(this, _volume_extraInitializers);
+        }
+    };
+    return AudioLayerSettings = _classThis;
+})();
+export { AudioLayerSettings };

package/lib/components/Children.d.ts

@@ -2,12 +2,13 @@ import { Component, ConstructorProps } from '../component';
 import { ContextManager } from '../context';
 /**
  * @zcomponent
- * @zgroup Advanced
  * @zicon list
+ * @zgroup Advanced
  */
 export declare class Children extends Component {
     /**
      * Creates an instance of Children.
+     *
      * @param contextManager - The current ContextManager
      * @param props - The constructor properties.
      */

package/lib/components/Children.js

@@ -1,18 +1,71 @@
+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 { Component } from '../component';
+import { zComponent } from '../decorators';
 /**
  * @zcomponent
- * @zgroup Advanced
  * @zicon list
+ * @zgroup Advanced
  */
-export class Children extends Component {
-    /**
-     * Creates an instance of Children.
-     * @param contextManager - The current ContextManager
-     * @param props - The constructor properties.
-     */
-    constructor(contextManager, props) {
-        super(contextManager, props);
-        const zcomponent = this.getZComponentInstance();
-        this.constructChildren(zcomponent?.constructorProps?.children ?? []);
-    }
-}
+let Children = (() => {
+    let _classDecorators = [zComponent({ icon: 'list', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    var Children = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            Children = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        /**
+         * Creates an instance of Children.
+         *
+         * @param contextManager - The current ContextManager
+         * @param props - The constructor properties.
+         */
+        constructor(contextManager, props) {
+            super(contextManager, props);
+            const zcomponent = this.getZComponentInstance();
+            this.constructChildren(zcomponent?.constructorProps?.children ?? []);
+        }
+    };
+    return Children = _classThis;
+})();
+export { Children };

package/lib/components/ConditionalConstruct.d.ts

@@ -0,0 +1,44 @@
+import { Component, ConstructorProps } from '../component';
+import { ContextManager } from '../context';
+/**
+ * A component that conditionally loads its children based on the values of its loadAtRuntime and loadAtDesignTime properties.
+ *
+ * Useful for optimizing performance by only loading certain parts of the component tree when needed.
+ * @zcomponent
+ * @zicon switches
+ * @zgroup Advanced
+ */
+export declare class ConditionalConstruct extends Component {
+    constructorProps: ConstructorProps;
+    private _childrenSpec;
+    /**
+     * @default false
+     */
+    private _isLoaded;
+    constructor(contextManager: ContextManager, constructorProps: ConstructorProps);
+    private _updateWithDelay;
+    private _update;
+    /**
+     * @default false
+     * @zui
+     * @zgroup ConditionalConstruct
+     * @zgrouppriority 100
+     */
+    loadAtRuntime: boolean;
+    /**
+     * @default false
+     * @zui
+     * @zgroup ConditionalConstruct
+     * @zgrouppriority 100
+     */
+    loadAtDesignTime: boolean;
+    /**
+     * An amount of time to delay any changes to loading state. Use this to give time for a loader to appear before changing the content.
+     * @default 0
+     * @zui
+     * @zgroup ConditionalConstruct
+     * @zgrouppriority 100
+     * @ztype time-milliseconds
+     */
+    delayForLoader: number;
+}

package/lib/components/ConditionalConstruct.js

@@ -0,0 +1,142 @@
+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 { Component } from '../component';
+import { isDesignTime } from '../contexts/environmentcontext';
+import { registerLoadable } from '../contexts/loadcontext';
+import { zComponent, zObserve, zUI } from '../decorators';
+/**
+ * A component that conditionally loads its children based on the values of its loadAtRuntime and loadAtDesignTime properties.
+ *
+ * Useful for optimizing performance by only loading certain parts of the component tree when needed.
+ * @zcomponent
+ * @zicon switches
+ * @zgroup Advanced
+ */
+let ConditionalConstruct = (() => {
+    let _classDecorators = [zComponent({ icon: 'switches', group: 'Advanced' })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Component;
+    let _loadAtRuntime_decorators;
+    let _loadAtRuntime_initializers = [];
+    let _loadAtRuntime_extraInitializers = [];
+    let _loadAtDesignTime_decorators;
+    let _loadAtDesignTime_initializers = [];
+    let _loadAtDesignTime_extraInitializers = [];
+    let _delayForLoader_decorators;
+    let _delayForLoader_initializers = [];
+    let _delayForLoader_extraInitializers = [];
+    var ConditionalConstruct = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _loadAtRuntime_decorators = [zUI({ group: { name: 'ConditionalConstruct', priority: 100 } }), zObserve((v, instance) => instance._updateWithDelay())];
+            _loadAtDesignTime_decorators = [zUI({ group: { name: 'ConditionalConstruct', priority: 100 } }), zObserve((v, instance) => instance._updateWithDelay())];
+            _delayForLoader_decorators = [zUI({ group: { name: 'ConditionalConstruct', priority: 100 }, type: 'time-milliseconds' })];
+            __esDecorate(null, null, _loadAtRuntime_decorators, { kind: "field", name: "loadAtRuntime", static: false, private: false, access: { has: obj => "loadAtRuntime" in obj, get: obj => obj.loadAtRuntime, set: (obj, value) => { obj.loadAtRuntime = value; } }, metadata: _metadata }, _loadAtRuntime_initializers, _loadAtRuntime_extraInitializers);
+            __esDecorate(null, null, _loadAtDesignTime_decorators, { kind: "field", name: "loadAtDesignTime", static: false, private: false, access: { has: obj => "loadAtDesignTime" in obj, get: obj => obj.loadAtDesignTime, set: (obj, value) => { obj.loadAtDesignTime = value; } }, metadata: _metadata }, _loadAtDesignTime_initializers, _loadAtDesignTime_extraInitializers);
+            __esDecorate(null, null, _delayForLoader_decorators, { kind: "field", name: "delayForLoader", static: false, private: false, access: { has: obj => "delayForLoader" in obj, get: obj => obj.delayForLoader, set: (obj, value) => { obj.delayForLoader = value; } }, metadata: _metadata }, _delayForLoader_initializers, _delayForLoader_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ConditionalConstruct = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructorProps;
+        _childrenSpec;
+        /**
+         * @default false
+         */
+        _isLoaded = false;
+        constructor(contextManager, constructorProps) {
+            const propsSansChildren = { ...constructorProps, children: [] };
+            super(contextManager, propsSansChildren);
+            __runInitializers(this, _delayForLoader_extraInitializers);
+            this.constructorProps = constructorProps;
+            this._childrenSpec = constructorProps.children ?? [];
+        }
+        _updateWithDelay = () => {
+            if (this.delayForLoader === 0)
+                return this._update();
+            registerLoadable(this, (async () => {
+                await delay(this.delayForLoader);
+                this._update();
+            })());
+        };
+        _update = () => {
+            const shouldBeLoaded = (isDesignTime(this.contextManager) && this.loadAtDesignTime) || (!isDesignTime(this.contextManager) && this.loadAtRuntime);
+            if (this._isLoaded && !shouldBeLoaded) {
+                let child = this.children[0];
+                while (child) {
+                    child.remove();
+                    child.dispose();
+                    child = this.children[0];
+                }
+            }
+            else if (!this._isLoaded && shouldBeLoaded) {
+                this.constructChildren(this._childrenSpec);
+            }
+            this._isLoaded = shouldBeLoaded;
+        };
+        /**
+         * @default false
+         * @zui
+         * @zgroup ConditionalConstruct
+         * @zgrouppriority 100
+         */
+        loadAtRuntime = __runInitializers(this, _loadAtRuntime_initializers, false);
+        /**
+         * @default false
+         * @zui
+         * @zgroup ConditionalConstruct
+         * @zgrouppriority 100
+         */
+        loadAtDesignTime = (__runInitializers(this, _loadAtRuntime_extraInitializers), __runInitializers(this, _loadAtDesignTime_initializers, false));
+        /**
+         * An amount of time to delay any changes to loading state. Use this to give time for a loader to appear before changing the content.
+         * @default 0
+         * @zui
+         * @zgroup ConditionalConstruct
+         * @zgrouppriority 100
+         * @ztype time-milliseconds
+         */
+        delayForLoader = (__runInitializers(this, _loadAtDesignTime_extraInitializers), __runInitializers(this, _delayForLoader_initializers, 0));
+    };
+    return ConditionalConstruct = _classThis;
+})();
+export { ConditionalConstruct };
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

package/lib/components/DefaultCookieConsent.d.ts

@@ -1,23 +1,19 @@
 import { Component } from '../component';
 import { ContextManager } from '../context';
-import { Observable } from '../observable';
 export interface DefaultCookieConsentConstructorProps {
     /**
      * Show the cookie consent dialog when the experience starts, rather than when the component is initialized.
-     * @zui
-     * @zdefault false
+     * @default false
      */
     waitForStart: boolean;
     /**
      * Only show the cookie consent dialog if the experience contains analytics components that indicate they use cookies.
-     * @zui
-     * @zdefault true
+     * @default true
      */
     onlyShowIfVendors: boolean;
     /**
      * Previews how the consent dialog looks at design time.
-     * @zui
-     * @zdefault false
+     * @default false
      */
     preview: boolean;
 }
@@ -28,123 +24,107 @@ export interface DefaultCookieConsentConstructorProps {
  * The component handles the logic for displaying the banner, receiving the user's consent, and storing this consent.
  * It also provides methods to check if the user has already given their consent.
  * @zcomponent
- * @zgroup Cookie Consent
  * @zicon cookie
+ * @zgroup Cookie Consent
  */
 export declare class DefaultCookieConsent extends Component {
     constructorProps: DefaultCookieConsentConstructorProps;
     /**
-     * @zprop
+     * @default "This website uses cookies to store information on your computer."
+     * @zui
      * @zgroup Consent Screen
-     * @zgrouppriority 20
-     * @zdefault "This website uses cookies to store information on your computer."
      */
-    readonly title: Observable<string, never>;
+    title: string;
     /**
-     * @zprop
+     * @default "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
+     * @zui
      * @zgroup Consent Screen
-     * @zgrouppriority 20
-     * @zdefault "Some of these cookies are essential, while others help us to improve your experience by providing insights into how the site is being used."
      */
-    readonly description: Observable<string, never>;
+    description: string;
     /**
-     * @zprop
+     * @default "Privacy Policy"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Privacy Policy"
      */
-    readonly privacyPolicyText: Observable<string, never>;
+    privacyPolicyText: string;
     /**
-     * @zprop
+     * @default ""
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault ""
      */
-    readonly privacyPolicyURL: Observable<string, never>;
+    privacyPolicyURL: string;
     /**
-     * @zprop
+     * @default "I Accept Cookies"
+     * @zui
      * @zgroup Consent Screen
-     * @zgrouppriority 20
-     * @zdefault "I Accept Cookies"
      */
-    readonly acceptButton: Observable<string, never>;
+    acceptButton: string;
     /**
-     * @zprop
+     * @default "Settings"
+     * @zui
      * @zgroup Consent Screen
-     * @zgrouppriority 20
-     * @zdefault "Settings"
      */
-    readonly settingsButton: Observable<string, never>;
+    settingsButton: string;
     /**
-     * @zprop
-     * @zgroup Consent Screen
-     * @zgrouppriority 20
-     * @zdefault "Save"
+     * @default "Save"
+     * @zui
+     * @zgroup Settings
      */
-    readonly saveButton: Observable<string, never>;
+    saveButton: string;
     /**
-     * @zprop
+     * @default "Essential"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Essential"
      */
-    readonly essentialTitle: Observable<string, never>;
+    essentialTitle: string;
     /**
-     * @zprop
+     * @default "Cookies that are necessary to provide the service."
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Cookies that are necessary to provide the service."
      */
-    readonly essentialDescription: Observable<string, never>;
+    essentialDescription: string;
     /**
-     * @zprop
+     * @default "Functional"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Functional"
      */
-    readonly functionalTitle: Observable<string, never>;
+    functionalTitle: string;
     /**
-     * @zprop
+     * @default "Cookies that provide you with useful functionality, such as saving your preferences."
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Cookies that provide you with useful functionality, such as saving your preferences."
      */
-    readonly functionalDescription: Observable<string, never>;
+    functionalDescription: string;
     /**
-     * @zprop
+     * @default "Performance"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Performance"
      */
-    readonly performanceTitle: Observable<string, never>;
+    performanceTitle: string;
     /**
-     * @zprop
+     * @default "Cookies that help us measure and understand how the site is being used."
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Cookies that help us measure and understand how the site is being used."
      */
-    readonly performanceDescription: Observable<string, never>;
+    performanceDescription: string;
     /**
-     * @zprop
+     * @default "Marketing"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Marketing"
      */
-    readonly marketingTitle: Observable<string, never>;
+    marketingTitle: string;
     /**
-     * @zprop
+     * @default "Cookies that help us market our site and services."
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Cookies that help us market our site and services."
      */
-    readonly marketingDescription: Observable<string, never>;
+    marketingDescription: string;
     /**
-     * @zprop
+     * @default "Required"
+     * @zui
      * @zgroup Settings
-     * @zgrouppriority 10
-     * @zdefault "Required"
      */
-    readonly required: Observable<string, never>;
+    required: string;
     private _dom;
     private _functional;
     private _performance;