@tylertech/forge 2.0.0

package/esm/time-picker/time-picker-utils.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare function timeStringToMillis(time: string | null, use24HourTime: boolean, allowSeconds: boolean): number | null;
+export declare function millisToTimeString(value: number | null, use24HourTime: boolean, allowSeconds: boolean): string | null;
+export declare function millisToHours(millis: number): number;
+export declare function millisToMinutesClamped(millis: number): number;
+export declare function millisToMinutes(millis: number): number;
+export declare function millisToSecondsClamped(millis: number): number;
+export declare function millisToSeconds(millis: number): number;
+export declare function hoursToMillis(hours: number): number;
+export declare function minutesToMillis(minutes: number): number;
+export declare function secondsToMillis(seconds: number): number;
+export declare function stripSecondsFromMillis(millis: number): number;
+export declare function getCurrentTimeOfDayMillis(allowSeconds: boolean): number;
+/**
+ * Combines a `Date` object with a 24-hour time string from the time-picker component.
+ * @param date The `Date` object to adjust.
+ * @param time The 24-hour time string.
+ * @param useSeconds If your 24-hour time string contains seconds, set this to `true`.
+ * @returns The same `Date` object that was provided, with the newly adjusted time.
+ */
+export declare function mergeDateWithTime(date: Date, time: string, useSeconds?: boolean): Date;

package/esm/time-picker/time-picker-utils.js

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { tokenize24HourTimeString, tokenize12HourTimeString, TWENTY_FOUR_HOUR_TIME_REGEX, TWELVE_HOUR_TIME_REGEX } from '../core/utils/time-utils';
+export function timeStringToMillis(time, use24HourTime, allowSeconds) {
+    if (!time || /^\s*$/.test(time)) {
+        return null;
+    }
+    let hours = 0;
+    let minutes = 0;
+    let seconds = 0;
+    if (TWENTY_FOUR_HOUR_TIME_REGEX.test(time)) {
+        const tokens = tokenize24HourTimeString(time);
+        hours = +tokens.hours || 0;
+        minutes = +tokens.minutes || 0;
+        seconds = +tokens.seconds || 0;
+    }
+    else if (TWELVE_HOUR_TIME_REGEX.test(time)) {
+        const tokens = tokenize12HourTimeString(time);
+        hours = +tokens.hours || 0;
+        minutes = +tokens.minutes || 0;
+        seconds = +tokens.seconds || 0;
+        if (hours === 12 && tokens.meridiem === 'AM') {
+            hours = 0;
+        }
+        if (hours < 12 && tokens.meridiem === 'PM') {
+            hours += 12;
+        }
+    }
+    else {
+        return null;
+    }
+    return hoursToMillis(hours) + minutesToMillis(minutes) + (allowSeconds ? secondsToMillis(seconds) : 0);
+}
+export function millisToTimeString(value, use24HourTime, allowSeconds) {
+    if (typeof value !== 'number' || value < 0) {
+        return null;
+    }
+    let hours = Math.min(millisToHours(value), 23);
+    const minutes = Math.min(millisToMinutesClamped(value), 59);
+    const totalMinutes = value / (1000 * 60);
+    const meridiem = totalMinutes < 720 ? 'AM' : 'PM';
+    if (!use24HourTime) {
+        hours = hours <= 12 ? hours : hours - 12;
+        if (hours === 0) {
+            hours = 12;
+        }
+    }
+    let time = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+    if (allowSeconds) {
+        const seconds = Math.min(millisToSecondsClamped(value), 59);
+        time += `:${String(seconds).padStart(2, '0')}`;
+    }
+    if (!use24HourTime) {
+        time += ` ${meridiem}`;
+    }
+    return time;
+}
+export function millisToHours(millis) {
+    return Math.abs(Math.floor(millis / (1000 * 60 * 60)));
+}
+export function millisToMinutesClamped(millis) {
+    return Math.abs(Math.floor(millisToMinutes(millis) % 60));
+}
+export function millisToMinutes(millis) {
+    return millis / (1000 * 60);
+}
+export function millisToSecondsClamped(millis) {
+    return Math.abs(Math.floor(millisToSeconds(millis) % 60));
+}
+export function millisToSeconds(millis) {
+    return millis / 1000;
+}
+export function hoursToMillis(hours) {
+    return hours * 60 * 60 * 1000;
+}
+export function minutesToMillis(minutes) {
+    return minutes * 60 * 1000;
+}
+export function secondsToMillis(seconds) {
+    return seconds * 1000;
+}
+export function stripSecondsFromMillis(millis) {
+    return millis - secondsToMillis(millisToSecondsClamped(millis));
+}
+export function getCurrentTimeOfDayMillis(allowSeconds) {
+    const date = new Date();
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    return hoursToMillis(hours) + minutesToMillis(minutes) + (allowSeconds ? secondsToMillis(date.getSeconds()) : 0);
+}
+/**
+ * Combines a `Date` object with a 24-hour time string from the time-picker component.
+ * @param date The `Date` object to adjust.
+ * @param time The 24-hour time string.
+ * @param useSeconds If your 24-hour time string contains seconds, set this to `true`.
+ * @returns The same `Date` object that was provided, with the newly adjusted time.
+ */
+export function mergeDateWithTime(date, time, useSeconds = false) {
+    if (!date) {
+        date = new Date();
+    }
+    const millis = timeStringToMillis(time, true, useSeconds);
+    if (!millis) {
+        date.setHours(0, 0, 0);
+        return date;
+    }
+    let hours = millisToHours(millis);
+    const twentyThreeHoursInMillis = 82800000;
+    if (hours > twentyThreeHoursInMillis) {
+        hours = twentyThreeHoursInMillis;
+    }
+    else if (hours < 0) {
+        hours = 0;
+    }
+    const minutes = millisToMinutesClamped(millis);
+    const seconds = useSeconds ? millisToSecondsClamped(millis) : 0;
+    date.setHours(hours, minutes, seconds);
+    return date;
+}

package/esm/time-picker/time-picker.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { ITimePickerOption, TimePickerParseCallback, TimePickerValidationCallback, TimePickerFormatCallback, TimePickerCoercionCallback, TimePickerPrepareMaskCallback } from './time-picker-constants';
+import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+export interface ITimePickerComponent extends IBaseComponent {
+    value: string | null;
+    open: boolean;
+    allowSeconds: boolean;
+    masked: boolean;
+    showMaskFormat: boolean;
+    use24HourTime: boolean;
+    allowInvalidTime: boolean;
+    min: string | null;
+    max: string | null;
+    restrictedTimes: string[];
+    startTime: string | null;
+    step: number;
+    allowInput: boolean;
+    showNow: boolean;
+    customOptions: ITimePickerOption[];
+    validationCallback: TimePickerValidationCallback;
+    parseCallback: TimePickerParseCallback;
+    formatCallback: TimePickerFormatCallback;
+    coercionCallback: TimePickerCoercionCallback;
+    prepareMaskCallback: TimePickerPrepareMaskCallback;
+    disabled: boolean;
+    popupClasses: string | string[];
+    allowDropdown: boolean;
+    popupTarget: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'forge-time-picker': ITimePickerComponent;
+    }
+    interface HTMLElementEventMap {
+        'forge-time-picker-open': CustomEvent<void>;
+        'forge-time-picker-close': CustomEvent<void>;
+        'forge-time-picker-input': Event;
+        'forge-time-picker-change': CustomEvent<string | null>;
+    }
+}
+export declare class TimePickerComponent extends BaseComponent implements ITimePickerComponent {
+    static get observedAttributes(): string[];
+    private _foundation;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    value: string | null;
+    open: boolean;
+    allowSeconds: boolean;
+    masked: boolean;
+    showMaskFormat: boolean;
+    use24HourTime: boolean;
+    allowInvalidTime: boolean;
+    min: string | null;
+    max: string | null;
+    restrictedTimes: string[];
+    startTime: string | null;
+    step: number;
+    allowInput: boolean;
+    showNow: boolean;
+    customOptions: ITimePickerOption[];
+    validationCallback: TimePickerValidationCallback;
+    parseCallback: TimePickerParseCallback;
+    formatCallback: TimePickerFormatCallback;
+    coercionCallback: TimePickerCoercionCallback;
+    prepareMaskCallback: TimePickerPrepareMaskCallback;
+    disabled: boolean;
+    popupClasses: string | string[];
+    allowDropdown: boolean;
+    popupTarget: string;
+}

package/esm/time-picker/time-picker.js

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean, coerceNumber, ensureChild } from '@tylertech/forge-core';
+import { tylIconClockOutline } from '@tylertech/tyler-icons/extended';
+import { tylIconClose } from '@tylertech/tyler-icons/standard';
+import { TimePickerAdapter } from './time-picker-adapter';
+import { TimePickerFoundation } from './time-picker-foundation';
+import { TIME_PICKER_CONSTANTS } from './time-picker-constants';
+import { IconRegistry, IconComponent } from '../icon';
+import { IconButtonComponent } from '../icon-button';
+import { PopupComponent } from '../popup';
+import { DialogComponent } from '../dialog';
+import { ListComponent, ListItemComponent } from '../list';
+import { BaseComponent } from '../core/base/base-component';
+const template = '<template><slot></slot></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}';
+let TimePickerComponent = class TimePickerComponent extends BaseComponent {
+    constructor() {
+        super();
+        IconRegistry.define([tylIconClockOutline, tylIconClose]);
+        attachShadowTemplate(this, template, styles);
+        this._foundation = new TimePickerFoundation(new TimePickerAdapter(this));
+    }
+    static get observedAttributes() {
+        return [
+            TIME_PICKER_CONSTANTS.attributes.VALUE,
+            TIME_PICKER_CONSTANTS.attributes.OPEN,
+            TIME_PICKER_CONSTANTS.attributes.ALLOW_SECONDS,
+            TIME_PICKER_CONSTANTS.attributes.MASKED,
+            TIME_PICKER_CONSTANTS.attributes.SHOW_MASK_FORMAT,
+            TIME_PICKER_CONSTANTS.attributes.USE_24_HOUR_TIME,
+            TIME_PICKER_CONSTANTS.attributes.ALLOW_INVALID_TIME,
+            TIME_PICKER_CONSTANTS.attributes.MIN,
+            TIME_PICKER_CONSTANTS.attributes.MAX,
+            TIME_PICKER_CONSTANTS.attributes.START_TIME,
+            TIME_PICKER_CONSTANTS.attributes.STEP,
+            TIME_PICKER_CONSTANTS.attributes.ALLOW_INPUT,
+            TIME_PICKER_CONSTANTS.attributes.SHOW_NOW,
+            TIME_PICKER_CONSTANTS.attributes.DISABLED,
+            TIME_PICKER_CONSTANTS.attributes.POPUP_CLASSES,
+            TIME_PICKER_CONSTANTS.attributes.ALLOW_DROPDOWN
+        ];
+    }
+    connectedCallback() {
+        if (this.querySelector(TIME_PICKER_CONSTANTS.selectors.INPUT)) {
+            this._foundation.initialize();
+        }
+        else {
+            ensureChild(this, TIME_PICKER_CONSTANTS.selectors.INPUT).then(() => this._foundation.initialize());
+        }
+    }
+    disconnectedCallback() {
+        this._foundation.disconnect();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        switch (name) {
+            case TIME_PICKER_CONSTANTS.attributes.VALUE:
+                this.value = newValue;
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.OPEN:
+                this.open = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.ALLOW_SECONDS:
+                this.allowSeconds = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.MASKED:
+                this.masked = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.SHOW_MASK_FORMAT:
+                this.showMaskFormat = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.USE_24_HOUR_TIME:
+                this.use24HourTime = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.ALLOW_INVALID_TIME:
+                this.allowInvalidTime = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.SHOW_NOW:
+                this.showNow = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.MIN:
+                this.min = newValue;
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.MAX:
+                this.max = newValue;
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.START_TIME:
+                this.startTime = newValue;
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.STEP:
+                this.step = coerceNumber(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.ALLOW_INPUT:
+                this.allowInput = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.DISABLED:
+                this.disabled = coerceBoolean(newValue);
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.POPUP_CLASSES:
+                this.popupClasses = newValue;
+                break;
+            case TIME_PICKER_CONSTANTS.attributes.ALLOW_DROPDOWN:
+                this.allowDropdown = coerceBoolean(newValue);
+                break;
+        }
+    }
+};
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "value", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "open", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "allowSeconds", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "masked", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "showMaskFormat", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "use24HourTime", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "allowInvalidTime", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "min", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "max", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "restrictedTimes", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "startTime", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "step", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "allowInput", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "showNow", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "customOptions", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "validationCallback", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "parseCallback", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "formatCallback", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "coercionCallback", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "prepareMaskCallback", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "disabled", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "popupClasses", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "allowDropdown", void 0);
+__decorate([
+    FoundationProperty()
+], TimePickerComponent.prototype, "popupTarget", void 0);
+TimePickerComponent = __decorate([
+    CustomElement({
+        name: TIME_PICKER_CONSTANTS.elementName,
+        dependencies: [
+            ListComponent,
+            ListItemComponent,
+            IconButtonComponent,
+            IconComponent,
+            PopupComponent,
+            IconComponent,
+            DialogComponent
+        ]
+    })
+], TimePickerComponent);
+export { TimePickerComponent };

package/esm/toast/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export * from './toast-adapter';
+export * from './toast-constants';
+export * from './toast-foundation';
+export * from './toast';
+export declare function defineToastComponent(): void;

package/esm/toast/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { defineCustomElement } from '@tylertech/forge-core';
+import { ToastComponent } from './toast';
+export * from './toast-adapter';
+export * from './toast-constants';
+export * from './toast-foundation';
+export * from './toast';
+export function defineToastComponent() {
+    defineCustomElement(ToastComponent);
+}

package/esm/toast/toast-adapter.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
+import { PopupPlacement } from '../popup';
+import { IToastComponent } from './toast';
+export interface IToastAdapter extends IBaseAdapter {
+    setHostAttribute: (name: string, value: string) => void;
+    setMessage: (value: string) => void;
+    setMessageTemplate: (tpl: HTMLElement | string) => void;
+    setActionVisibility: (isVisible: boolean) => void;
+    setActionText: (message: string) => void;
+    registerActionListener: (type: string, listener: (evt: MouseEvent) => void) => void;
+    deregisterActionListener: (type: string, listener: (evt: MouseEvent) => void) => void;
+    setPlacement: (placement: PopupPlacement) => void;
+    setActive: (isActive: boolean) => void;
+    setCloseButtonVisibility(visible: boolean): void;
+    registerCloseListener(listener: (evt: Event) => void): void;
+}
+/**
+ * The DOM adapter for the `ToastComponent` web component.
+ */
+export declare class ToastAdapter extends BaseAdapter<IToastComponent> implements IToastAdapter {
+    private _containerElement;
+    private _messageElement;
+    private _actionButtonElement;
+    private _actionButtonPlaceholder;
+    private _closeButtonElement;
+    constructor(component: IToastComponent);
+    /**
+     * Sets an attrinbute on the host element.
+     * @param name The attribute name.
+     * @param value The attribute value.
+     */
+    setHostAttribute(name: string, value: string): void;
+    /**
+     * Sets the message text on the toast element.
+     * @param value The message text.
+     */
+    setMessage(value: string): void;
+    /**
+     * Sets a custom template on the message element.
+     * @param tpl The message template.
+     */
+    setMessageTemplate(tpl: HTMLElement | string): void;
+    /**
+     * Toggles the visibility of the action button element.
+     * @param isVisible The visibility.
+     */
+    setActionVisibility(isVisible: boolean): void;
+    /**
+     * Sets the action button text.
+     * @param message The message text.
+     */
+    setActionText(message: string): void;
+    /**
+     * Adds an event listener to the action button element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    registerActionListener(type: string, listener: (evt: MouseEvent) => void): void;
+    /**
+     * Removes an event listener from the action button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    deregisterActionListener(type: string, listener: (evt: MouseEvent) => void): void;
+    /**
+     * Adjusts the class applied to the toast container to position it properly.
+     * @param placement The screen placement position.
+     */
+    setPlacement(placement: PopupPlacement): void;
+    /**
+     * Triggers the addition of classes to the container element to hide or show the toast using CSS transitions.
+     * @param isActive Active or not.
+     */
+    setActive(isActive: boolean): void;
+    setCloseButtonVisibility(visible: boolean): void;
+    registerCloseListener(listener: (evt: Event) => void): void;
+    private _getPlacementClass;
+}

package/esm/toast/toast-adapter.js

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright 2022 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { getShadowElement, isString, removeAllChildren, removeClass, removeElement, toggleElementPlaceholder } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core/base/base-adapter';
+import { TOAST_CONSTANTS } from './toast-constants';
+/**
+ * The DOM adapter for the `ToastComponent` web component.
+ */
+export class ToastAdapter extends BaseAdapter {
+    constructor(component) {
+        super(component);
+        this._containerElement = getShadowElement(component, TOAST_CONSTANTS.selectors.CONTAINER);
+        this._messageElement = getShadowElement(component, TOAST_CONSTANTS.selectors.MESSAGE);
+        this._actionButtonElement = getShadowElement(component, TOAST_CONSTANTS.selectors.ACTION_BUTTON);
+        this._closeButtonElement = getShadowElement(component, TOAST_CONSTANTS.selectors.CLOSE_BUTTON);
+    }
+    /**
+     * Sets an attrinbute on the host element.
+     * @param name The attribute name.
+     * @param value The attribute value.
+     */
+    setHostAttribute(name, value) {
+        if (this._component.getAttribute(name) !== value) {
+            this._component.setAttribute(name, value);
+        }
+    }
+    /**
+     * Sets the message text on the toast element.
+     * @param value The message text.
+     */
+    setMessage(value) {
+        this._messageElement.innerText = value;
+    }
+    /**
+     * Sets a custom template on the message element.
+     * @param tpl The message template.
+     */
+    setMessageTemplate(tpl) {
+        this._containerElement.classList.add(TOAST_CONSTANTS.classes.CUSTOM);
+        if (isString(tpl)) {
+            this._component.innerHTML = tpl;
+        }
+        else {
+            removeAllChildren(this._messageElement);
+            this._component.appendChild(tpl);
+        }
+    }
+    /**
+     * Toggles the visibility of the action button element.
+     * @param isVisible The visibility.
+     */
+    setActionVisibility(isVisible) {
+        this._actionButtonPlaceholder = toggleElementPlaceholder(this._component, isVisible, TOAST_CONSTANTS.elementName, TOAST_CONSTANTS.selectors.ACTION_BUTTON, this._actionButtonElement, this._actionButtonPlaceholder);
+    }
+    /**
+     * Sets the action button text.
+     * @param message The message text.
+     */
+    setActionText(message) {
+        this._actionButtonElement.innerText = message;
+    }
+    /**
+     * Adds an event listener to the action button element.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    registerActionListener(type, listener) {
+        this._actionButtonElement.addEventListener(type, listener);
+    }
+    /**
+     * Removes an event listener from the action button.
+     * @param type The event type.
+     * @param listener The event listener.
+     */
+    deregisterActionListener(type, listener) {
+        this._actionButtonElement.removeEventListener(type, listener);
+    }
+    /**
+     * Adjusts the class applied to the toast container to position it properly.
+     * @param placement The screen placement position.
+     */
+    setPlacement(placement) {
+        removeClass([
+            TOAST_CONSTANTS.classes.TOP,
+            TOAST_CONSTANTS.classes.TOP_LEFT,
+            TOAST_CONSTANTS.classes.TOP_RIGHT,
+            TOAST_CONSTANTS.classes.BOTTOM,
+            TOAST_CONSTANTS.classes.BOTTOM_LEFT,
+            TOAST_CONSTANTS.classes.BOTTOM_RIGHT
+        ], this._containerElement);
+        const placementClass = this._getPlacementClass(placement);
+        if (placementClass) {
+            this._containerElement.classList.add(placementClass);
+        }
+    }
+    /**
+     * Triggers the addition of classes to the container element to hide or show the toast using CSS transitions.
+     * @param isActive Active or not.
+     */
+    setActive(isActive) {
+        if (isActive) {
+            // We need to force a reflow here to make sure that our new transform gets applied by the active class
+            window.getComputedStyle(this._containerElement).getPropertyValue('bottom');
+            this._containerElement.classList.add(TOAST_CONSTANTS.classes.ACTIVE);
+        }
+        else {
+            this._containerElement.classList.remove(TOAST_CONSTANTS.classes.ACTIVE);
+            const animationCompletedListener = () => {
+                this._containerElement.removeEventListener('transitionend', animationCompletedListener);
+                removeElement(this._component);
+            };
+            this._containerElement.addEventListener('transitionend', animationCompletedListener);
+        }
+    }
+    setCloseButtonVisibility(visible) {
+        if (visible) {
+            this._closeButtonElement.style.removeProperty('display');
+        }
+        else {
+            this._closeButtonElement.style.display = 'none';
+        }
+    }
+    registerCloseListener(listener) {
+        this._closeButtonElement.addEventListener('click', listener);
+    }
+    _getPlacementClass(placement) {
+        switch (placement) {
+            case 'top':
+                return TOAST_CONSTANTS.classes.TOP;
+            case 'top-start':
+                return TOAST_CONSTANTS.classes.TOP_LEFT;
+            case 'top-end':
+                return TOAST_CONSTANTS.classes.TOP_RIGHT;
+            case 'bottom':
+                return TOAST_CONSTANTS.classes.BOTTOM;
+            case 'bottom-start':
+                return TOAST_CONSTANTS.classes.BOTTOM_LEFT;
+            case 'bottom-end':
+                return TOAST_CONSTANTS.classes.BOTTOM_RIGHT;
+        }
+        return null;
+    }
+}