@genesislcap/pbc-notify-ui 1.0.1 → 1.0.3

package/dist/esm/components/foundation-alerts/components/foundation-alerts-condition-builder/foundation-alerts-condition-builder.styles.js

@@ -1,68 +0,0 @@
-import { css } from '@microsoft/fast-element';
-export const FoundationAlertsConditionBuilderStyles = css `
-  section {
-    display: flex;
-    flex-wrap: wrap;
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .select-fields {
-    height: auto;
-  }
-
-  .text-field::part(root) {
-    height: calc(var(--design-unit) * var(--base-height-multiplier) * 1px);
-  }
-
-  .select-fields::part(control) {
-    height: calc(
-      var(--design-unit) * var(--base-height-multiplier) * 1px - calc(var(--stroke-width) * 1px)
-    );
-  }
-
-  .text-field,
-  .select-fields,
-  .radio-group {
-    color: var(--neutral-color);
-    width: 100%;
-  }
-
-  .radio-group {
-    align-items: center;
-    text-align: center;
-  }
-
-  .text-field::part(root),
-  .select-fields {
-    box-sizing: border-box;
-    border: solid calc(var(--stroke-width) * 1px) var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  legend {
-    width: 100%;
-    padding: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 1px) 0;
-    margin: 0 0 calc(var(--design-unit) * -3px) 0;
-    color: var(--neutral-foreground-rest);
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 1;
-  }
-
-  .select-fields-single {
-    width: 100%;
-  }
-
-  .select-value-type {
-    flex: 2;
-    min-width: auto;
-  }
-
-  .input-value {
-    flex: 3;
-  }
-
-  .select-fields::part(listbox) {
-    max-height: 200px;
-  }
-`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-condition-builder/foundation-alerts-condition-builder.template.js

@@ -1,135 +0,0 @@
-import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when } from '@microsoft/fast-element';
-export const FoundationAlertsConditionBuilderTemplate = (prefix = 'zero') => html `
-  <section @change=${(x) => x.handleConditionStateChanged()}>
-    <legend>Condition</legend>
-    <${prefix}-select
-      class="select-fields select-resources"
-      part="select-fields"
-      :value=${sync((x) => x.selectedResourceName)}
-    >
-      <${prefix}-option>${(x) => x.labels.selectResource}</${prefix}-option>
-      ${repeat((x) => x.resources, html `
-          <${prefix}-option value=${(x) => x.RESOURCE_NAME}>
-            ${(x) => x.RESOURCE_NAME}
-          </${prefix}-option>
-        `)}
-    </${prefix}-select>
-    ${when((x) => { var _a; return x.selectedResourceName && ((_a = x.fields) === null || _a === void 0 ? void 0 : _a.length) > 0; }, html `
-        <${prefix}-select
-          class="select-fields"
-          part="select-fields"
-          @change=${(x, c) => x.handleFieldStateChanged(c.event.detail.value)}
-        >
-          <${prefix}-option>${(x) => x.labels.selectField}</${prefix}-option>
-          ${repeat((x) => x.fields, html `
-              <${prefix}-option value=${(field) => JSON.stringify(field)}>
-                ${(field) => field.NAME}
-              </${prefix}-option>
-            `)}
-        </${prefix}-select>
-      `)}
-    ${when((x) => x.selectedField, html `
-        <${prefix}-select
-          class="select-fields select-fields-single"
-          part="select-fields"
-          :value=${sync((x) => x.conditionMainType)}
-        >
-          <${prefix}-option>${(x) => x.labels.selectFilter}</${prefix}-option>
-          ${repeat((x) => x.getFilterOptionsByFieldType(x.selectedField.TYPE), html `
-              <${prefix}-option value="${(x) => x}">${(x) => x === null || x === void 0 ? void 0 : x.toUpperCase()}</${prefix}-option>
-            `)}
-        </${prefix}-select>
-        ${when((x) => { var _a; return x.conditionMainType && !['BLANK', 'NOT BLANK'].includes((_a = x.conditionMainType) === null || _a === void 0 ? void 0 : _a.toUpperCase()); }, html `
-            ${when((x) => x.selectedField.VALID_VALUES, html `
-                <${prefix}-select
-                  class="select-fields select-fields-single"
-                  part="select-fields"
-                  :value=${sync((x) => x.conditionMainValue)}
-                >
-                  <${prefix}-option>${(x) => x.labels.selectValue}</${prefix}-option>
-                  ${repeat((x) => x.selectedField.VALID_VALUES, html `
-                      <${prefix}-option value="${(x) => x}">${(x) => x}</${prefix}-option>
-                    `)}
-                </${prefix}-select>
-              `)}
-            ${when((x) => !x.selectedField.VALID_VALUES, html `
-                <${prefix}-text-field
-                  class="text-field "
-                  :value=${sync((x) => x.conditionMainValue)}
-                  placeholder=${(x) => x.labels.enterValue}
-                  type=${(x) => x.selectedField.TYPE === 'NUMBER' || x.selectedField.TYPE === 'DOUBLE'
-    ? 'number'
-    : 'text'}
-                >
-                </${prefix}-text-field>
-              `)}
-          `)}
-        
-        ${when((x) => { var _a; return x.conditionMainValue || ['BLANK', 'NOT BLANK'].includes((_a = x.conditionMainType) === null || _a === void 0 ? void 0 : _a.toUpperCase()); }, html `
-            <${prefix}-radio-group class="radio-group" :value=${sync((x) => x.selectedTermsConnector)}>
-              ${repeat((x) => {
-    var _a;
-    return ((_a = x.conditionMainType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'BLANK' || x.selectedField.VALID_VALUES
-        ? ['OR']
-        : ['AND', 'OR'];
-}, html `
-                  <${prefix}-radio :value=${(x) => x}>${(x) => x}</${prefix}-radio>
-                `)}
-            </${prefix}-radio-group>
-            ${when((x) => x.selectedTermsConnector, html `
-                <!-- <p>${(x) => { var _a; return (_a = x.conditionMainType) === null || _a === void 0 ? void 0 : _a.toUpperCase(); }}</p> -->
-                <${prefix}-select
-                  class="select-fields select-fields-single"
-                  part="select-fields"
-                  :value=${sync((x) => x.conditionExtraType)}
-                >
-                  <${prefix}-option>${(x) => x.labels.selectFilter}</${prefix}-option>
-                  ${repeat((x) => {
-    var _a, _b;
-    return x.getFilterOptionsByFieldType(x.selectedField.TYPE, (x.selectedTermsConnector === 'AND' && ['BLANK', 'NOT BLANK'].includes((_a = x.conditionMainType) === null || _a === void 0 ? void 0 : _a.toUpperCase())
-        ? ['BLANK', 'NOT BLANK']
-        : undefined) || x.selectedTermsConnector === 'OR'
-        ? [(_b = x.conditionMainType) === null || _b === void 0 ? void 0 : _b.toUpperCase()]
-        : undefined);
-}, html `
-                      <${prefix}-option value="${(x) => x}">${(x) => x === null || x === void 0 ? void 0 : x.toUpperCase()}</${prefix}-option>
-                    `)}
-                </${prefix}-select>
-                ${when((x) => { var _a; return x.conditionExtraType && !['BLANK', 'NOT BLANK'].includes((_a = x.conditionExtraType) === null || _a === void 0 ? void 0 : _a.toUpperCase()); }, html `
-                    ${when((x) => {
-    var _a;
-    return (_a = x.selectedField.VALID_VALUES) === null || _a === void 0 ? void 0 : _a.filter((validValue) => validValue !== x.conditionExtraValue);
-}, html `
-                        <${prefix}-select
-                          class="select-fields select-fields-single"
-                          part="select-fields"
-                          :value=${sync((x) => x.conditionExtraValue)}
-                        >
-                          <${prefix}-option>${(x) => x.labels.selectValue}</${prefix}-option>
-                          ${repeat((x) => x.selectedField.VALID_VALUES, html `
-                              <${prefix}-option value="${(x) => x}">${(x) => x}</${prefix}-option>
-                            `)}
-                        </${prefix}-select>
-                      `)}
-                    ${when((x) => !x.selectedField.VALID_VALUES, html `
-                        <${prefix}-text-field
-                          class="select-fields select-fields-single"
-                          :value=${sync((x) => x.conditionExtraValue)}
-                          placeholder=${(x) => x.labels.enterValue}
-                          type=${(x) => x.selectedField.TYPE === 'NUMBER' || x.selectedField.TYPE === 'DOUBLE'
-    ? 'number'
-    : 'text'}
-                        >
-                        </${prefix}-text-field>
-                      `)}
-                  `)}
-              `)}
-          `)}
-        
-      `)}
-  </section>
-`;
-export const FoundationAlertsConditionBuilderRenderer = html `
-  ${(x) => FoundationAlertsConditionBuilderTemplate(x.prefix)}
-`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-condition-builder/foundation-alerts-condition-builder.types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/foundation-alerts/components/foundation-alerts-form/foundation-alerts-form.js

@@ -1,145 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement, FASTElement, observable, volatile, attr, } from '@microsoft/fast-element';
-import { logger } from '../../utils';
-import { FoundationAlertsFormStyles } from './foundation-alerts-form.styles';
-import { FoundationAlertsFormRenderer as template } from './foundation-alerts-form.template';
-import { AlertRuleStatus } from '../../alerts.types';
-import { FREQUENCY_ALL_VALUE, MAP_ALERT_TYPE_TO_SEVERITY_TYPE, SEVERITY_TYPE_DEFAULT } from '../../alerts.config';
-const alertRuleRowPropsMap = new Map([
-    ['DYNAMIC_NOTIFY_RULE_ID', 'alertId'],
-    ['ROW_REF', 'alertRowRef'],
-    ['RULE_NAME', 'alertName'],
-    ['RULE_DESCRIPTION', 'alertDescription'],
-    ['RULE_SEVERITY', 'alertType'],
-    ['RULE_EXPIRY', 'expirationDate'],
-    ['RULE_FREQUENCY', 'frequencyOption'],
-    ['RULE_EXPRESSION', 'condition'],
-]);
-const propsConvertersMap = new Map([
-    [
-        'RULE_EXPIRY',
-        (data) => {
-            const [day, month, year] = data['RULE_EXPIRY'].split('.').map((x) => Number(x));
-            return new Date(year, month - 1, day);
-        },
-    ],
-]);
-const dataConverter = {
-    toView(value) {
-        return JSON.stringify(value);
-    },
-    fromView(value) {
-        if (value) {
-            const alertData = JSON.parse(value);
-            return alertData;
-        }
-    },
-};
-let FoundationAlertsForm = class FoundationAlertsForm extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.expirationDate = new Date();
-        this.alertType = SEVERITY_TYPE_DEFAULT;
-        this.frequencyOption = FREQUENCY_ALL_VALUE.ONCE;
-        this.prefix = 'zero';
-        this.displayFrequency = true;
-        this.condition = 'EVENT_DYNAMIC_RULE_NOTIFY_UPDATE';
-        this.frequencyOptions = Object.values(FREQUENCY_ALL_VALUE);
-        this.mapAlertTypeToSeverityType = MAP_ALERT_TYPE_TO_SEVERITY_TYPE;
-    }
-    dataChanged(ignore, newValue) {
-        alertRuleRowPropsMap.forEach((propName, alertRuleRowKey) => {
-            const converter = propsConvertersMap.get(alertRuleRowKey);
-            if (converter) {
-                this[propName] = converter(newValue);
-            }
-            else if (newValue[alertRuleRowKey]) {
-                this[propName] = newValue[alertRuleRowKey];
-            }
-        });
-    }
-    get submitButtonText() {
-        return this.alertRowRef ? 'Update' : 'Create';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.blockCloseToastPreview();
-    }
-    setCondition(x) {
-        if (!x) {
-            this.condition = undefined;
-        }
-        this.condition = x;
-    }
-    blockCloseToastPreview() {
-        this.toastPreview.addEventListener('click', (event) => {
-            event.stopPropagation();
-            logger.debug('Toast preview close clicked');
-        }, { capture: true });
-    }
-    handleSubmit() {
-        const alertRuleRow = {
-            ROW_REF: this.alertRowRef,
-            DYNAMIC_NOTIFY_RULE_ID: this.alertId,
-            RULE_NAME: this.alertName,
-            RULE_DESCRIPTION: this.alertDescription,
-            RULE_SEVERITY: this.alertType,
-            // @todo handle groovy expression - FUI-1497
-            RULE_EXPRESSION: this.condition ? JSON.stringify(this.condition) : '',
-            RULE_EXPIRY: `${this.expirationDate}`,
-            RULE_FREQUENCY: this.frequencyOption,
-            RULE_STATUS: AlertRuleStatus.ENABLED,
-            MESSAGE: this.data.MESSAGE,
-            TOPIC: this.data.TOPIC,
-            USER_NAME: this.data.USER_NAME,
-            RULE_TABLE: this.data.RULE_TABLE,
-        };
-        // @todo commit event when FUI-1497 and FUI-1496 will be done
-        logger.debug({ alertRuleRow });
-        this.$emit('close');
-    }
-};
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "expirationDate", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "alertId", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "alertRowRef", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "alertName", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "alertDescription", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "alertType", void 0);
-__decorate([
-    observable
-], FoundationAlertsForm.prototype, "frequencyOption", void 0);
-__decorate([
-    attr
-], FoundationAlertsForm.prototype, "prefix", void 0);
-__decorate([
-    attr({ mode: 'boolean' })
-], FoundationAlertsForm.prototype, "displayFrequency", void 0);
-__decorate([
-    attr({
-        mode: 'reflect',
-        converter: dataConverter,
-    })
-], FoundationAlertsForm.prototype, "data", void 0);
-__decorate([
-    volatile
-], FoundationAlertsForm.prototype, "submitButtonText", null);
-FoundationAlertsForm = __decorate([
-    customElement({
-        name: 'foundation-alerts-form',
-        template,
-        styles: FoundationAlertsFormStyles,
-    })
-], FoundationAlertsForm);
-export { FoundationAlertsForm };

package/dist/esm/components/foundation-alerts/components/foundation-alerts-form/foundation-alerts-form.styles.js

@@ -1,194 +0,0 @@
-import { css } from '@microsoft/fast-element';
-export const FoundationAlertsFormStyles = css `
-  :host {
-    font-size: 16px;
-    --design-unit-for-select: var(--design-unit);
-    --base-height-multiplier-for-select: var(--base-height-multiplier);
-  }
-
-  .select-fields,
-  foundation-alerts-condition-builder::part(select-fields) {
-    --design-unit: var(--design-unit-for-select);
-    --base-height-multiplier: var(--base-height-multiplier-for-select);
-  }
-
-  zero-tabs::part(tablist) {
-    grid-template-columns: none;
-  }
-
-  /*
-  .tabs {
-    background: none;
-    padding-bottom: calc(var(--design-unit) * 6px);
-  }
-
-  .tabs::part(tablist) {
-    display: flex;
-    background: none;
-    height: auto;
-    padding: calc(var(--design-unit) * 5px) 0 calc(var(--design-unit) * 2px) 0;
-    border-bottom: solid calc(var(--stroke-width) * 1px) var(--neutral-stroke-rest);
-  }
-
-  .tabs .tab {
-    flex: 1;
-    border-radius: 0;
-    border: none;
-    background: transparent;
-    margin: 0;
-    text-align: center;
-    font-size: 14px;
-    font-weight: 700;
-    color: var(--neutral-foreground-rest);
-    box-shadow: none;
-    text-transform: uppercase;
-  }
-
-  .tabs .tab[aria-selected='true'] {
-    color: var(--neutral-color);
-  }
-  */
-
-  h2,
-  fieldset {
-    width: calc(100% - (var(--design-unit) * 5px * 2));
-    margin: 0;
-    padding-left: calc(var(--design-unit) * 5px);
-    padding-right: calc(var(--design-unit) * 5px);
-  }
-
-  h2 {
-    padding-top: calc(var(--design-unit) * 2px);
-    padding-bottom: calc(var(--design-unit) * 2px);
-  }
-
-  fieldset {
-    margin: 0;
-    border: none;
-    padding-top: 0;
-    padding-bottom: 0;
-    font-size: 0;
-    line-height: 0;
-  }
-
-  .text-field::part(root),
-  .segmented-control::part(root) {
-    height: calc(var(--design-unit) * var(--base-height-multiplier) * 1px);
-  }
-
-  .select-fields::part(control) {
-    height: calc(
-      var(--design-unit) * var(--base-height-multiplier) * 1px - calc(var(--stroke-width) * 1px)
-    );
-  }
-
-  .text-field,
-  .segmented-control,
-  .select-fields,
-  .text-area {
-    width: 100%;
-  }
-
-  .text-field::part(root),
-  .select-fields::part(control),
-  .text-area::part(control),
-  .notify-preview .toast {
-    color: var(--neutral-color);
-    box-sizing: border-box;
-    border: solid calc(var(--stroke-width) * 1px) var(--neutral-stroke-rest);
-    border-radius: calc(var(--control-corner-radius) * 1px);
-  }
-
-  h2,
-  legend {
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 1;
-  }
-
-  legend {
-    width: 100%;
-    padding: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 1px) 0;
-    margin: 0;
-    color: var(--neutral-foreground-rest);
-  }
-
-  .segmented-control {
-    margin: 0;
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: stretch;
-    line-height: calc(var(--design-unit) * 6px);
-  }
-
-  .segmented-control-item {
-    flex: 1;
-    justify-content: center;
-    border-color: var(--neutral-foreground-rest);
-    color: var(--neutral-foreground-rest);
-  }
-
-  .segmented-control-item[aria-checked='true'] {
-    background: var(--neutral-foreground-rest);
-    color: var(--neutral-layer-2);
-    box-shadow: none;
-    font-weight: 500;
-  }
-
-  .expiration-field {
-    --base-height-multiplier: 12.5;
-  }
-
-  .expiration-field::part(root) {
-    align-items: flex-end;
-  }
-
-  .text-area {
-    line-height: 0;
-  }
-
-  .notify-preview {
-    color: var(--neutral-color);
-    box-sizing: border-box;
-    line-height: 1;
-    font-size: 14px;
-
-    --toast-max-width: calc(100% - 33px);
-    --toast-min-width: calc(100% - 33px);
-  }
-
-  .notify-preview::part(content) {
-    padding: calc(var(--design-unit) * 5px) 0;
-  }
-
-  .notify-preview::part(date) {
-    margin: calc(var(--design-unit) * 3px) 0 0 0;
-  }
-
-  .notify-preview::part(toast) {
-    transition: none;
-    box-shadow: none;
-  }
-
-  .fieldset-bottom .button {
-    width: 100%;
-    color: var(--neutral-color);
-    height: 40px;
-    margin: 16px 0;
-  }
-  
-  zero-tabs {
-    
-  }
-
-  zero-tabs::part(tabpanel) {
-    
-  }
-  
-  zero-tab-panel {
-    
-  }
-
-  .general-panel {
-  }
-`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-form/foundation-alerts-form.template.js

@@ -1,96 +0,0 @@
-import { sync } from '@genesislcap/foundation-utils';
-import { html, repeat, when, ref } from '@microsoft/fast-element';
-import { getDateStringFormat } from '../../utils';
-export const FoundationAlertsFormTemplate = (prefix = 'zero') => html `
-    <${prefix}-tabs appearance="secondary">
-      <${prefix}-tab slot="tab" appearance="secondary">General</${prefix}-tab>
-      <${prefix}-tab slot="tab" appearance="secondary">Alert Type</${prefix}-tab>
-      <!-- GENERAL -->
-      <${prefix}-tab-panel slot="tabpanel" class="general-panel">
-        <fieldset class="fieldset-condition">
-          <foundation-alerts-condition-builder
-            :prefix=${prefix}
-            @change-state=${(x, c) => x.setCondition(c.event.detail)}
-          >
-          </foundation-alerts-condition-builder>
-        </fieldset>
-        ${when(x => x.displayFrequency, html `
-            <fieldset>
-              <legend>Frequency</legend>
-              <${prefix}-segmented-control class="segmented-control" :value=${x => x.frequencyOptions[0]} name="frequency">
-                ${repeat(x => x.frequencyOptions, html `
-                    <${prefix}-segmented-item
-                      class="segmented-control-item"
-                      @click=${(option, c) => (c.parent.frequencyOption = option)}
-                      value=${(option) => option}
-                    >
-                      ${(option) => option}
-                    </${prefix}-segmented-item>
-                  `)}
-              </${prefix}-segmented-control>
-            </fieldset>
-          `)}
-        <fieldset>
-          <legend>Expiration</legend>
-          <${prefix}-text-field
-            type="datetime-local"
-            class="text-field expiration-field"
-            value=${sync(x => getDateStringFormat(x.expirationDate))}
-          >
-          </${prefix}-text-field>
-        </fieldset>
-        <fieldset>
-          <legend>Alert Name</legend>
-          <${prefix}-text-field class="text-field" :value=${sync(x => x.alertName)}>
-          </${prefix}-text-field>
-        </fieldset>
-        <fieldset>
-          <legend>Alert Description</legend>
-          <${prefix}-text-area
-            class="text-area"
-            :value=${sync(x => x.alertDescription)}
-          >
-          </${prefix}-text-area>
-        </fieldset>
-        <fieldset>
-          <legend>Preview</legend>
-          <${prefix}-toast
-            ${ref('toastPreview')}
-            class='notify-preview'
-            notify=${x => x.alertType}
-          >
-            <div slot="top">${x => x.alertName}</div>
-            <span slot="content">${x => x.alertDescription}</span>
-            <span slot="date">${x => x.expirationDate.toLocaleDateString()}</span>
-          </${prefix}-toast>
-        </fieldset>
-        <fieldset class="fieldset-bottom">
-          <${prefix}-button
-            class="button"
-            appearance="primary-gradient"
-            type="submit"
-            @click=${x => x.handleSubmit()}
-          >
-            ${x => x.submitButtonText}
-          </${prefix}-button>
-        </fieldset>
-      </${prefix}-tab-panel>
-      
-      <!-- ALERT TYPE -->
-      <${prefix}-tab-panel slot="tabpanel">
-        <fieldset>
-          <legend>Alert Type</legend>
-          <${prefix}-select class="select-fields select-value-conditon" part="select-fields" :value=${sync(x => x.alertType)}>
-            ${repeat(x => Array.from(x.mapAlertTypeToSeverityType.keys()), html `
-                <${prefix}-option value="${(x, c) => c.parent.mapAlertTypeToSeverityType.get(x)}">
-                  ${x => x}
-                </${prefix}-option>
-              `)}
-          </${prefix}-select>
-        </fieldset>
-      </${prefix}-tab-panel>
-    </${prefix}-tabs>
-`;
-export const FoundationAlertsFormRenderer = html `
-  ${x => FoundationAlertsFormTemplate(x.prefix)}
-`;

package/dist/esm/components/foundation-alerts/components/foundation-alerts-navigation-button/foundation-alerts-navigation-button.js

@@ -1,33 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement, FASTElement, attr } from '@microsoft/fast-element';
-import { FoundationAlertsNavigationButtonStyles as styles } from './foundation-alerts-navigation-button.styles';
-import { FoundationAlertsConditionBuilderRenderer as template } from './foundation-alerts-navigation-button.template';
-let FoundationAlertsNavigationButton = class FoundationAlertsNavigationButton extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.prefix = 'zero';
-    }
-    handleChangeStateAction() {
-        if (this.current !== 'list') {
-            this.current = 'list';
-            this.$emit('change-state', this.current);
-        }
-        else {
-            this.$emit('close');
-        }
-    }
-};
-__decorate([
-    attr
-], FoundationAlertsNavigationButton.prototype, "current", void 0);
-__decorate([
-    attr
-], FoundationAlertsNavigationButton.prototype, "prefix", void 0);
-FoundationAlertsNavigationButton = __decorate([
-    customElement({
-        name: 'foundation-alerts-navigation-button',
-        template,
-        styles,
-    })
-], FoundationAlertsNavigationButton);
-export { FoundationAlertsNavigationButton };