@baloise/ds-core 19.3.0 → 19.4.0-nightly.20250721

package/dist/collection/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.js

@@ -8,10 +8,29 @@ export class NavMetaBar {
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines if the bar should stay on top of the backdrop
+         */
         this.stayOnTopOfBackdrop = false;
+        /**
+         * Defines the color variant
+         */
         this.variant = 'primary';
+        /**
+         * Defines the height of the bar
+         */
         this.size = 'normal';
+        /**
+         * Tells when to hide the bar
+         */
         this.invisible = 'none';
+        /**
+         * Defines the position of the bar
+         */
         this.position = 'none';
     }
     createLogger(log) {
@@ -75,6 +94,7 @@ export class NavMetaBar {
         return {
             "stayOnTopOfBackdrop": {
                 "type": "boolean",
+                "attribute": "stay-on-top-of-backdrop",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -89,12 +109,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stay-on-top-of-backdrop",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarVariant",
@@ -114,12 +134,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarSize",
@@ -139,12 +159,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'normal'"
             },
             "invisible": {
                 "type": "string",
+                "attribute": "invisible",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarInvisible",
@@ -164,12 +184,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invisible",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarPosition",
@@ -189,7 +209,6 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'none'"
             }

package/dist/collection/components/bal-nav/bal-nav.js

@@ -17,7 +17,22 @@ export class Nav {
     constructor() {
         this.navId = `bal-nav-${NavIds++}`;
         this.bodyScrollHandler = new BalScrollHandler();
+        this.isTouch = balBreakpoints.isTouch;
+        this.isDesktop = balBreakpoints.isDesktop;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isFlyoutActive = false;
         this.hasRenderedWithFlyoutActive = false;
+        /**
+         * Link level structure.
+         */
+        this.options = [];
+        this.linkItems = [];
+        /**
+         * Link level structure.
+         */
+        this.buttons = [];
+        this.metaButtons = [];
         this.mutationObserverActive = true;
         /**
          * EVENT BINDING
@@ -97,18 +112,6 @@ export class Nav {
             }
             this.activeMenuLinkValue = value;
         };
-        this.isTouch = balBreakpoints.isTouch;
-        this.isDesktop = balBreakpoints.isDesktop;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.isFlyoutActive = false;
-        this.activeMetaLinkValue = undefined;
-        this.activeMenuLinkValue = undefined;
-        this.logo = undefined;
-        this.options = [];
-        this.linkItems = [];
-        this.buttons = [];
-        this.metaButtons = [];
     }
     createLogger(log) {
         this.log = log;
@@ -368,6 +371,7 @@ export class Nav {
         return {
             "logo": {
                 "type": "unknown",
+                "attribute": "logo",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavLogoLink",
@@ -390,6 +394,7 @@ export class Nav {
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavOptions",
@@ -413,6 +418,7 @@ export class Nav {
             },
             "buttons": {
                 "type": "unknown",
+                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaButtons",

package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js

@@ -36,9 +36,9 @@ export class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
+            return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
         }
-        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
+        return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);

package/dist/collection/components/bal-nav/models/bal-nav-meta-button.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NavLinkItem } from "./bal-nav-link-item";
 import { balBrowser } from "../../../utils/browser";
+import { NavLinkItem } from "./bal-nav-link-item";
 export class NavMetaButton extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -23,42 +23,24 @@ export class NavMetaButton extends NavLinkItem {
     }
     renderAtMetaBar() {
         if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                } }, this.label));
+            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.label));
         }
-        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                title: this.htmlTitle,
-                label: this.ariaLabel || this.label,
-            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
+        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
     }
     renderAtTouchTopMetaBar() {
         if (this.touchPlacement === 'top') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    } }, this.icon ? '' : this.label));
+                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.icon ? '' : this.label));
             }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
         }
     }
     renderAtTouchBottomMetaBar() {
         if (this.touchPlacement === 'bottom') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    }, href: this.href, target: this.target }, this.label));
+                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, href: this.href, target: this.target }, this.label));
             }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
         }
     }
     resetTouchBottomMetaBar() {

package/dist/collection/components/bal-nav/models/bal-nav-meta-link-item.js

@@ -26,9 +26,9 @@ export class NavMetaLinkItem extends NavLinkItem {
     }
     render(context) {
         if (this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
         }
-        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
+        return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {
                     this.onClick(ev.detail);
                 }

package/dist/collection/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.js

@@ -11,15 +11,38 @@ export class NavbarBrand {
         this.bodyScrollHandler = new BalScrollHandler();
         this.language = defaultConfig.language;
         this.isMenuActive = false;
+        /**
+         * Link of the logo / title.
+         */
         this.href = '';
-        this.rel = undefined;
+        /**
+         * If `true` the logo is rendered as a button
+         */
         this.logoClickable = false;
-        this.logoLabel = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
+        /**
+         * @deprecated Use interface on bal-navbar instead.
+         * If `true` the navbar does not have a mobil version. Only shows logo and an app title.
+         */
         this.simple = false;
-        this.logo = undefined;
+        /**
+         * Size of the logo SVG
+         */
         this.logoSize = '';
+        /**
+         * Defines if the logo animation should be active
+         */
         this.animated = true;
+        /**
+         * @internal
+         * Defines the type of navbar. App is used for almost every web applications
+         * like the portal app. For our sales funnel we recommend to use the simple navbar.
+         * Meta and main are used for the website.
+         */
         this.interface = 'app';
     }
     connectedCallback() {
@@ -85,6 +108,7 @@ export class NavbarBrand {
         return {
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -99,12 +123,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "rel": {
                 "type": "string",
+                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -119,11 +143,11 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rel",
                 "reflect": false
             },
             "logoClickable": {
                 "type": "boolean",
+                "attribute": "logo-clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -138,12 +162,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "logoLabel": {
                 "type": "string",
+                "attribute": "logo-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,11 +182,11 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-label",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonTarget",
@@ -182,12 +206,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
             "simple": {
                 "type": "boolean",
+                "attribute": "simple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -205,12 +229,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "simple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "logo": {
                 "type": "string",
+                "attribute": "logo",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,11 +249,11 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo",
                 "reflect": false
             },
             "logoSize": {
                 "type": "string",
+                "attribute": "logo-size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalLogoSize",
@@ -249,12 +273,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "logo-size",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,12 +293,12 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavbarInterface",
@@ -297,7 +321,6 @@ export class NavbarBrand {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'app'"
             }

package/dist/collection/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.js

@@ -7,6 +7,12 @@ export class NavbarMenu {
     constructor() {
         this.isMenuActive = false;
         this.isTouch = balBreakpoints.isTouch;
+        /**
+         * @internal
+         * Defines the type of navbar. App is used for almost every web applications
+         * like the portal app. For our sales funnel we recommend to use the simple navbar.
+         * Meta and main are used for the website.
+         */
         this.interface = 'app';
     }
     breakpointListener(breakpoints) {
@@ -39,6 +45,7 @@ export class NavbarMenu {
         return {
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavbarInterface",
@@ -61,7 +68,6 @@ export class NavbarMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'app'"
             }

package/dist/collection/components/bal-navbar/bal-navbar-menu-end/bal-navbar-menu-end.js

@@ -2,6 +2,12 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class NavbarMenuEnd {
     constructor() {
+        /**
+         * @internal
+         * Defines the type of navbar. App is used for almost every web applications
+         * like the portal app. For our sales funnel we recommend to use the simple navbar.
+         * Meta and main are used for the website.
+         */
         this.interface = 'app';
     }
     render() {
@@ -13,6 +19,7 @@ export class NavbarMenuEnd {
         return {
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavbarInterface",
@@ -35,7 +42,6 @@ export class NavbarMenuEnd {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'app'"
             }

package/dist/collection/components/bal-navbar/bal-navbar-menu-start/bal-navbar-menu-start.js

@@ -2,6 +2,12 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 export class NavbarMenuStart {
     constructor() {
+        /**
+         * @internal
+         * Defines the type of navbar. App is used for almost every web applications
+         * like the portal app. For our sales funnel we recommend to use the simple navbar.
+         * Meta and main are used for the website.
+         */
         this.interface = 'app';
     }
     render() {
@@ -13,6 +19,7 @@ export class NavbarMenuStart {
         return {
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavbarInterface",
@@ -35,7 +42,6 @@ export class NavbarMenuStart {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'app'"
             }

package/dist/collection/components/bal-navbar/bal-navbar.js

@@ -2,8 +2,19 @@ import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 export class Navbar {
     constructor() {
+        /**
+         * It `true` the navbar has a white background. Always use the blue header.
+         */
         this.light = false;
+        /**
+         * Defines the type of navbar. App is used for almost every web applications
+         * like the portal app. For our sales funnel we recommend to use the simple navbar.
+         * Meta and main are used for the website.
+         */
         this.interface = 'app';
+        /**
+         * Sets the content content width with the regular container classes
+         */
         this.container = '';
     }
     interfaceHandler() {
@@ -41,6 +52,7 @@ export class Navbar {
         return {
             "light": {
                 "type": "boolean",
+                "attribute": "light",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -55,12 +67,12 @@ export class Navbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "light",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavbarInterface",
@@ -80,12 +92,12 @@ export class Navbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'app'"
             },
             "container": {
                 "type": "string",
+                "attribute": "container",
                 "mutable": false,
                 "complexType": {
                     "original": "'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | ''",
@@ -100,7 +112,6 @@ export class Navbar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "container",
                 "reflect": false,
                 "defaultValue": "''"
             }

package/dist/collection/components/bal-notices/bal-notices.js

@@ -2,8 +2,17 @@ import { Host, h } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 export class Notices {
     constructor() {
+        /**
+         * @internal Tells if the notice is animated
+         */
         this.animated = true;
+        /**
+         * @internal The interface tells the notice where to show the notice.
+         */
         this.interface = 'toast';
+        /**
+         * @internal Sets the content content width with the regular container classes
+         */
         this.container = undefined;
     }
     render() {
@@ -27,6 +36,7 @@ export class Notices {
         return {
             "animated": {
                 "type": "boolean",
+                "attribute": "animated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -44,12 +54,12 @@ export class Notices {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "interface": {
                 "type": "string",
+                "attribute": "interface",
                 "mutable": false,
                 "complexType": {
                     "original": "'toast' | 'snackbar'",
@@ -67,12 +77,12 @@ export class Notices {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'toast'"
             },
             "container": {
                 "type": "string",
+                "attribute": "container",
                 "mutable": false,
                 "complexType": {
                     "original": "'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | '' | undefined",
@@ -90,7 +100,6 @@ export class Notices {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "container",
                 "reflect": false,
                 "defaultValue": "undefined"
             }