@tylertech/forge 3.0.0-next.12 → 3.0.0-next.14

package/esm/app-bar/help-button/app-bar-help-button-adapter.d.ts

@@ -5,14 +5,21 @@
  */
 import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IMenuOption } from '../../menu';
-import { IAppBarHelpButtonComponent } from './app-bar-help-button';
+import type { IAppBarHelpButtonComponent } from './app-bar-help-button';
 export interface IAppBarHelpButtonAdapter extends IBaseAdapter {
     initialize(): void;
+    destroy(): void;
     setMenuOptions(options: IMenuOption[]): void;
+    setIcon(icon: string): void;
 }
 export declare class AppBarHelpButtonAdapter extends BaseAdapter<IAppBarHelpButtonComponent> implements IAppBarHelpButtonAdapter {
     private _menuElement;
+    private _iconButtonElement;
+    private _iconElement;
+    private _forwardObserver?;
     constructor(component: IAppBarHelpButtonComponent);
     initialize(): void;
+    destroy(): void;
     setMenuOptions(options: IMenuOption[]): void;
+    setIcon(icon: string): void;
 }

package/esm/app-bar/help-button/app-bar-help-button-adapter.js

@@ -3,17 +3,38 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { getLightElement } from '@tylertech/forge-core';
+import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { MENU_CONSTANTS } from '../../menu';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button/icon-button-constants';
+import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
+import { ICON_CONSTANTS } from '../../icon';
 export class AppBarHelpButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
     }
     initialize() {
         this._menuElement = getLightElement(this._component, MENU_CONSTANTS.elementName);
+        this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
+        this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName);
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this._component, APP_BAR_HELP_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
+            if (name === 'aria-label' && !value) {
+                value = originalAriaLabel;
+            }
+            toggleAttribute(this._iconButtonElement, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._forwardObserver = undefined;
     }
     setMenuOptions(options) {
         this._menuElement.options = options;
     }
+    setIcon(icon) {
+        this._iconElement.name = icon;
+    }
 }

package/esm/app-bar/help-button/app-bar-help-button-constants.d.ts

@@ -5,4 +5,11 @@
  */
 export declare const APP_BAR_HELP_BUTTON_CONSTANTS: {
     elementName: "forge-app-bar-help-button";
+    attributes: {
+        ICON: string;
+    };
+    forwardedAttributes: string[];
+    defaults: {
+        ICON: string;
+    };
 };

package/esm/app-bar/help-button/app-bar-help-button-constants.js

@@ -5,6 +5,16 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}app-bar-help-button`;
+const attributes = {
+    ICON: 'icon'
+};
+const defaults = {
+    ICON: 'help'
+};
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_HELP_BUTTON_CONSTANTS = {
-    elementName
+    elementName,
+    attributes,
+    forwardedAttributes,
+    defaults
 };

package/esm/app-bar/help-button/app-bar-help-button-foundation.d.ts

@@ -8,14 +8,18 @@ import { IMenuOption } from '../../menu';
 import { IAppBarHelpButtonAdapter } from './app-bar-help-button-adapter';
 export interface IAppBarHelpButtonFoundation extends ICustomElementFoundation {
     options: IMenuOption[];
+    icon: string;
 }
 export declare class AppBarHelpButtonFoundation implements IAppBarHelpButtonFoundation {
     private _adapter;
     private _options;
+    private _icon;
     private _isInitialized;
     constructor(_adapter: IAppBarHelpButtonAdapter);
     initialize(): void;
     disconnect(): void;
     get options(): IMenuOption[];
     set options(value: IMenuOption[]);
+    get icon(): string;
+    set icon(value: string);
 }

package/esm/app-bar/help-button/app-bar-help-button-foundation.js

@@ -3,18 +3,22 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
 export class AppBarHelpButtonFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._options = [];
+        this._icon = APP_BAR_HELP_BUTTON_CONSTANTS.defaults.ICON;
         this._isInitialized = false;
     }
     initialize() {
         this._adapter.initialize();
         this._adapter.setMenuOptions(this._options);
+        this._adapter.setIcon(this._icon);
         this._isInitialized = true;
     }
     disconnect() {
+        this._adapter.destroy();
         this._isInitialized = false;
     }
     get options() {
@@ -26,4 +30,16 @@ export class AppBarHelpButtonFoundation {
             this._adapter.setMenuOptions(value);
         }
     }
+    get icon() {
+        return this._icon;
+    }
+    set icon(value) {
+        if (this._icon !== value) {
+            this._icon = value || APP_BAR_HELP_BUTTON_CONSTANTS.defaults.ICON;
+            if (this._isInitialized) {
+                this._adapter.setIcon(value);
+            }
+            this._adapter.setHostAttribute(APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON, this._icon);
+        }
+    }
 }

package/esm/app-bar/help-button/app-bar-help-button.d.ts

@@ -7,6 +7,7 @@ import { IMenuOption } from '../../menu';
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarHelpButtonComponent extends IBaseComponent {
     options: IMenuOption[];
+    icon: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -14,15 +15,25 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-help-button>` custom element.
- *
  * @tag forge-app-bar-help-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `end` slot.
+ *
+ * @property {IMenuOption[]} options - The menu options to display when the button is clicked
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 export declare class AppBarHelpButtonComponent extends BaseComponent implements IAppBarHelpButtonComponent {
+    static get observedAttributes(): string[];
     private _foundation;
     constructor();
     initializedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     options: IMenuOption[];
+    icon: string;
 }

package/esm/app-bar/help-button/app-bar-help-button.js

@@ -12,15 +12,27 @@ import { AppBarHelpButtonFoundation } from './app-bar-help-button-foundation';
 import { APP_BAR_HELP_BUTTON_CONSTANTS } from './app-bar-help-button-constants';
 import { IconButtonComponent } from '../../icon-button';
 import { TooltipComponent } from '../../tooltip';
-import { IconComponent, IconRegistry } from '../../icon';
+import { IconRegistry } from '../../icon';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><forge-icon-button><forge-menu placement=\"bottom-end\"><button type=\"button\" aria-label=\"Open help menu\"><forge-icon name=\"help\"></forge-icon></button></forge-menu><forge-tooltip delay=\"500\" position=\"bottom\">Help</forge-tooltip></forge-icon-button></template>';
+const template = '<template><forge-menu placement=\"bottom-end\"><forge-icon-button aria-label=\"Open help menu\"><forge-icon name=\"help\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Help</forge-tooltip></forge-menu></template>';
 /**
- * The web component class behind the `<forge-app-bar-help-button>` custom element.
- *
  * @tag forge-app-bar-help-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `end` slot.
+ *
+ * @property {IMenuOption[]} options - The menu options to display when the button is clicked
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 let AppBarHelpButtonComponent = class AppBarHelpButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return [
+            APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON
+        ];
+    }
     constructor() {
         super();
         IconRegistry.define(tylIconHelp);
@@ -35,18 +47,27 @@ let AppBarHelpButtonComponent = class AppBarHelpButtonComponent extends BaseComp
     disconnectedCallback() {
         this._foundation.disconnect();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case APP_BAR_HELP_BUTTON_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
+                break;
+        }
+    }
 };
 __decorate([
     FoundationProperty()
 ], AppBarHelpButtonComponent.prototype, "options", void 0);
+__decorate([
+    FoundationProperty()
+], AppBarHelpButtonComponent.prototype, "icon", void 0);
 AppBarHelpButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_HELP_BUTTON_CONSTANTS.elementName,
         dependencies: [
             MenuComponent,
             IconButtonComponent,
-            TooltipComponent,
-            IconComponent
+            TooltipComponent
         ]
     })
 ], AppBarHelpButtonComponent);

package/esm/app-bar/index.d.ts

@@ -3,9 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-export * from './app-bar-adapter';
-export * from './app-bar-constants';
-export * from './app-bar-foundation';
 export * from './app-bar';
 export * from './search';
 export * from './menu-button';
@@ -13,4 +10,3 @@ export * from './notification-button';
 export * from './help-button';
 export * from '../profile-card';
 export * from './profile-button';
-export declare function defineAppBarComponent(): void;

package/esm/app-bar/index.js

@@ -3,11 +3,6 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { defineCustomElement } from '@tylertech/forge-core';
-import { AppBarComponent } from './app-bar';
-export * from './app-bar-adapter';
-export * from './app-bar-constants';
-export * from './app-bar-foundation';
 export * from './app-bar';
 export * from './search';
 export * from './menu-button';
@@ -15,6 +10,3 @@ export * from './notification-button';
 export * from './help-button';
 export * from '../profile-card';
 export * from './profile-button';
-export function defineAppBarComponent() {
-    defineCustomElement(AppBarComponent);
-}

package/esm/app-bar/menu-button/app-bar-menu-button-constants.d.ts

@@ -5,4 +5,11 @@
  */
 export declare const APP_BAR_MENU_BUTTON_CONSTANTS: {
     elementName: "forge-app-bar-menu-button";
+    observedAttributes: {
+        ICON: string;
+    };
+    attributes: {
+        ICON: string;
+    };
+    forwardedAttributes: string[];
 };

package/esm/app-bar/menu-button/app-bar-menu-button-constants.js

@@ -5,6 +5,14 @@
  */
 import { COMPONENT_NAME_PREFIX } from '../../constants';
 const elementName = `${COMPONENT_NAME_PREFIX}app-bar-menu-button`;
+const observedAttributes = {
+    ICON: 'icon'
+};
+const attributes = Object.assign({}, observedAttributes);
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_MENU_BUTTON_CONSTANTS = {
-    elementName
+    elementName,
+    observedAttributes,
+    attributes,
+    forwardedAttributes
 };

package/esm/app-bar/menu-button/app-bar-menu-button.d.ts

@@ -5,6 +5,7 @@
  */
 import { BaseComponent, IBaseComponent } from '../../core/base/base-component';
 export interface IAppBarMenuButtonComponent extends IBaseComponent {
+    icon: string;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -12,11 +13,27 @@ declare global {
     }
 }
 /**
- * The web component class behind the `<forge-app-bar-menu-button>` custom element.
- *
  * @tag forge-app-bar-menu-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `start` slot.
+ *
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 export declare class AppBarMenuButtonComponent extends BaseComponent implements IAppBarMenuButtonComponent {
+    static get observedAttributes(): string[];
+    private _iconButtonElement;
+    private _iconElement;
+    private _forwardObserver?;
+    private _iconName;
     constructor();
     initializedCallback(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    get icon(): string;
+    set icon(value: string);
 }

package/esm/app-bar/menu-button/app-bar-menu-button.js

@@ -4,35 +4,84 @@
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
-import { CustomElement, attachLightTemplate } from '@tylertech/forge-core';
+import { CustomElement, attachLightTemplate, toggleAttribute, getLightElement } from '@tylertech/forge-core';
 import { APP_BAR_MENU_BUTTON_CONSTANTS } from './app-bar-menu-button-constants';
-import { IconButtonComponent } from '../../icon-button';
+import { IconButtonComponent, ICON_BUTTON_CONSTANTS } from '../../icon-button';
 import { TooltipComponent } from '../../tooltip';
-import { IconComponent, IconRegistry } from '../../icon';
+import { IconRegistry, ICON_CONSTANTS } from '../../icon';
 import { tylIconMenu } from '@tylertech/tyler-icons/standard';
 import { BaseComponent } from '../../core/base/base-component';
-const template = '<template><forge-icon-button style=\"width: 48px; height: 48px; display: flex; justify-content: center; align-items: center;\"><button type=\"button\" aria-label=\"Toggle navigation menu\"><forge-icon name=\"menu\"></forge-icon></button><forge-tooltip delay=\"500\" position=\"bottom\">Menu</forge-tooltip></forge-icon-button></template>';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
+const template = '<template><forge-icon-button aria-label=\"Toggle menu\"><forge-icon name=\"menu\"></forge-icon></forge-icon-button><forge-tooltip delay=\"500\" position=\"bottom\">Menu</forge-tooltip></template>';
 /**
- * The web component class behind the `<forge-app-bar-menu-button>` custom element.
- *
  * @tag forge-app-bar-menu-button
+ *
+ * @description A utility component with predefined icon and descriptions for use in an app bar `start` slot.
+ *
+ * @property {string} icon - The name of an alternative icon to display.
+ *
+ * @attribute {string} [icon] - The name of an alternative icon to display.
+ * @attribute {string} [aria-label] - The aria-label to apply to the button.
+ * @attribute {string} [aria-labelledby] - The id of an element to use as the aria-labelledby attribute.
  */
 let AppBarMenuButtonComponent = class AppBarMenuButtonComponent extends BaseComponent {
+    static get observedAttributes() {
+        return Object.values(APP_BAR_MENU_BUTTON_CONSTANTS.observedAttributes);
+    }
+    ;
     constructor() {
         super();
+        this._iconName = tylIconMenu.name;
         IconRegistry.define(tylIconMenu);
     }
     initializedCallback() {
         attachLightTemplate(this, template);
     }
+    connectedCallback() {
+        this._iconButtonElement = getLightElement(this, ICON_BUTTON_CONSTANTS.elementName);
+        this._iconElement = this._iconButtonElement.querySelector(ICON_CONSTANTS.elementName);
+        if (this._iconElement.name !== this._iconName) {
+            this._iconElement.name = this._iconName;
+        }
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this, APP_BAR_MENU_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
+            if (name === 'aria-label' && !value) {
+                value = originalAriaLabel;
+            }
+            toggleAttribute(this._iconButtonElement, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._forwardObserver = undefined;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case APP_BAR_MENU_BUTTON_CONSTANTS.attributes.ICON:
+                this.icon = newValue;
+                break;
+        }
+    }
+    get icon() {
+        return this._iconName;
+    }
+    set icon(value) {
+        if (this._iconName !== value) {
+            this._iconName = value !== null && value !== void 0 ? value : tylIconMenu.name;
+            if (this._iconElement) {
+                this._iconElement.name = this._iconName;
+            }
+            this.setAttribute(APP_BAR_MENU_BUTTON_CONSTANTS.attributes.ICON, this._iconName);
+        }
+    }
 };
 AppBarMenuButtonComponent = __decorate([
     CustomElement({
         name: APP_BAR_MENU_BUTTON_CONSTANTS.elementName,
         dependencies: [
             IconButtonComponent,
-            TooltipComponent,
-            IconComponent
+            TooltipComponent
         ]
     })
 ], AppBarMenuButtonComponent);

package/esm/app-bar/notification-button/app-bar-notification-button-adapter.d.ts

@@ -7,19 +7,23 @@ import { BaseAdapter, IBaseAdapter } from '../../core/base/base-adapter';
 import { IAppBarNotificationButtonComponent } from './app-bar-notification-button';
 export interface IAppBarNotificationButtonAdapter extends IBaseAdapter {
     initialize(): void;
+    destroy(): void;
     setIcon(icon: string): void;
-    setCount(value: number): void;
+    setCount(value: number | string): void;
     setBadgeType(dot: boolean): void;
     setBadgeTheme(theme: string): void;
     setBadgeVisible(isVisible: boolean): void;
 }
 export declare class AppBarNotificationButtonAdapter extends BaseAdapter<IAppBarNotificationButtonComponent> implements IAppBarNotificationButtonAdapter {
+    private _iconButtonElement;
     private _badgeElement;
     private _iconElement;
+    private _forwardObserver?;
     constructor(component: IAppBarNotificationButtonComponent);
     setIcon(icon: string): void;
     initialize(): void;
-    setCount(value: number): void;
+    destroy(): void;
+    setCount(value: number | string): void;
     setBadgeType(dot: boolean): void;
     setBadgeTheme(theme: string): void;
     setBadgeVisible(isVisible: boolean): void;

package/esm/app-bar/notification-button/app-bar-notification-button-adapter.js

@@ -7,6 +7,9 @@ import { getLightElement, toggleAttribute } from '@tylertech/forge-core';
 import { BADGE_CONSTANTS } from '../../badge';
 import { BaseAdapter } from '../../core/base/base-adapter';
 import { ICON_CONSTANTS } from '../../icon';
+import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-button-constants';
+import { forwardAttributes } from '../../core/utils/reflect-utils';
+import { ICON_BUTTON_CONSTANTS } from '../../icon-button/icon-button-constants';
 export class AppBarNotificationButtonAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
@@ -15,11 +18,24 @@ export class AppBarNotificationButtonAdapter extends BaseAdapter {
         this._iconElement.name = icon;
     }
     initialize() {
+        this._iconButtonElement = getLightElement(this._component, ICON_BUTTON_CONSTANTS.elementName);
         this._badgeElement = getLightElement(this._component, BADGE_CONSTANTS.elementName);
         this._iconElement = getLightElement(this._component, ICON_CONSTANTS.elementName);
+        const originalAriaLabel = this._iconButtonElement.getAttribute('aria-label');
+        this._forwardObserver = forwardAttributes(this._component, APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.forwardedAttributes, (name, value) => {
+            if (name === 'aria-label' && !value) {
+                value = originalAriaLabel;
+            }
+            toggleAttribute(this._iconButtonElement, !!value, name, value !== null && value !== void 0 ? value : undefined);
+        });
+    }
+    destroy() {
+        var _a;
+        (_a = this._forwardObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this._forwardObserver = undefined;
     }
     setCount(value) {
-        this._badgeElement.textContent = value;
+        this._badgeElement.textContent = String(value);
     }
     setBadgeType(dot) {
         this._badgeElement.dot = dot;

package/esm/app-bar/notification-button/app-bar-notification-button-constants.d.ts

@@ -12,4 +12,5 @@ export declare const APP_BAR_NOTIFICATION_BUTTON_CONSTANTS: {
         SHOW_BADGE: string;
         ICON: string;
     };
+    forwardedAttributes: string[];
 };

package/esm/app-bar/notification-button/app-bar-notification-button-constants.js

@@ -12,7 +12,9 @@ const attributes = {
     SHOW_BADGE: 'show-badge',
     ICON: 'icon'
 };
+const forwardedAttributes = ['aria-label', 'aria-labelledby'];
 export const APP_BAR_NOTIFICATION_BUTTON_CONSTANTS = {
     elementName,
-    attributes
+    attributes,
+    forwardedAttributes
 };

package/esm/app-bar/notification-button/app-bar-notification-button-foundation.d.ts

@@ -6,7 +6,7 @@
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IAppBarNotificationButtonAdapter } from './app-bar-notification-button-adapter';
 export interface IAppBarNotificationButtonFoundation extends ICustomElementFoundation {
-    count: number;
+    count: number | string;
     dot: boolean;
     theme: string;
     showBadge: boolean;
@@ -22,11 +22,11 @@ export declare class AppBarNotificationButtonFoundation implements IAppBarNotifi
     private _icon;
     constructor(_adapter: IAppBarNotificationButtonAdapter);
     initialize(): void;
-    disconnect(): void;
+    destroy(): void;
     get icon(): string;
     set icon(value: string);
-    get count(): number;
-    set count(value: number);
+    get count(): number | string;
+    set count(value: number | string);
     get dot(): boolean;
     set dot(value: boolean);
     get theme(): string;

package/esm/app-bar/notification-button/app-bar-notification-button-foundation.js

@@ -7,7 +7,7 @@ import { APP_BAR_NOTIFICATION_BUTTON_CONSTANTS } from './app-bar-notification-bu
 export class AppBarNotificationButtonFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
-        this._count = 0;
+        this._count = '0';
         this._dot = false;
         this._showBadge = false;
         this._isInitialized = false;
@@ -22,7 +22,8 @@ export class AppBarNotificationButtonFoundation {
         this._adapter.setIcon(this._icon);
         this._isInitialized = true;
     }
-    disconnect() {
+    destroy() {
+        this._adapter.destroy();
         this._isInitialized = false;
     }
     get icon() {
@@ -33,8 +34,8 @@ export class AppBarNotificationButtonFoundation {
             this._icon = value;
             if (this._isInitialized) {
                 this._adapter.setIcon(this._icon);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON, this._icon);
             }
+            this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.ICON, this._icon);
         }
     }
     get count() {
@@ -45,25 +46,21 @@ export class AppBarNotificationButtonFoundation {
             this._count = value;
             if (this._isInitialized) {
                 this._adapter.setCount(this._count);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT, this._count);
             }
+            this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.COUNT, this._count);
         }
     }
     get dot() {
         return this._dot;
     }
     set dot(value) {
+        value = Boolean(value);
         if (this._dot !== value) {
             this._dot = value;
             if (this._isInitialized) {
                 this._adapter.setBadgeType(this._dot);
-                if (this._dot) {
-                    this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT);
-                }
-                else {
-                    this._adapter.removeHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT);
-                }
             }
+            this._adapter.toggleHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.DOT, this._dot);
         }
     }
     get theme() {
@@ -82,12 +79,13 @@ export class AppBarNotificationButtonFoundation {
         return this._showBadge;
     }
     set showBadge(value) {
+        value = Boolean(value);
         if (this._showBadge !== value) {
             this._showBadge = value;
             if (this._isInitialized) {
                 this._adapter.setBadgeVisible(this._showBadge);
-                this._adapter.setHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE, this._showBadge);
             }
+            this._adapter.toggleHostAttribute(APP_BAR_NOTIFICATION_BUTTON_CONSTANTS.attributes.SHOW_BADGE, this._showBadge);
         }
     }
 }