@genesislcap/pbc-notify-ui 15.8.3 → 15.9.0

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.js

@@ -5,6 +5,7 @@ import { NotifyService } from '../../../../../services/notify.service';
 import { RuleService } from '../../../../../services/rule.service';
 import { SystemService } from '../../../../../services/system.service';
 import { humanize } from '../../../../../utils';
+import { AlertSoundAttachmentMixin } from '../../../alert-sound-attachment';
 import { DynamicRuleUtils, RuleUtils, showNotificationError, isEmpty, } from '../../../notification-dashboard.utils';
 import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
 import { RuleDialogTemplate } from './rule-dialog.template';
@@ -15,7 +16,7 @@ import { RuleDialogMode } from './rule-dialog.types';
  *
  * @fires close - Fired when the dialog should close
  */
-let RuleDialog = class RuleDialog extends GenesisElement {
+let RuleDialog = class RuleDialog extends AlertSoundAttachmentMixin(GenesisElement) {
     constructor() {
         super(...arguments);
         this.ruleId = null;
@@ -36,6 +37,15 @@ let RuleDialog = class RuleDialog extends GenesisElement {
         this.fields = [];
         this.topics = [];
     }
+    get isAlertSoundEditMode() {
+        return this.ruleDialogMode === RuleDialogMode.EDIT;
+    }
+    get alertSoundEntityId() {
+        return this.ruleId;
+    }
+    get alertSoundCacheSyncMode() {
+        return 'entity';
+    }
     openDialog(params) {
         return __awaiter(this, void 0, void 0, function* () {
             this.topics = yield this.notifyService.getNotifyRouteTopics();
@@ -55,6 +65,7 @@ let RuleDialog = class RuleDialog extends GenesisElement {
         });
     }
     close() {
+        this.stopTestSound();
         // Objects
         this.ruleId = null;
         this.name = null;
@@ -65,6 +76,7 @@ let RuleDialog = class RuleDialog extends GenesisElement {
         this.topic = null;
         this.severity = null;
         this.ruleDialogMode = null;
+        this.resetAlertSoundState();
         // Arrays
         this.resources = [];
         this.topics = [];
@@ -107,6 +119,7 @@ let RuleDialog = class RuleDialog extends GenesisElement {
             this.conditions = DynamicRuleUtils.resolveLeftValues(loadedConditions, this.fields);
             this.refreshExpressionPreview();
             this.attributeAssignments((_c = rule.RESULT_EXPRESSION) === null || _c === void 0 ? void 0 : _c.ASSIGNMENTS);
+            yield this.loadExistingAlertSound(rule.DYNAMIC_RULE_ID);
         });
     }
     refreshExpressionPreview() {
@@ -151,7 +164,7 @@ let RuleDialog = class RuleDialog extends GenesisElement {
             DynamicRuleUtils.hasOrJoin(this.conditions) ||
             DynamicRuleUtils.hasGroup(this.conditions) ||
             DynamicRuleUtils.hasUnsupportedOperator(this.conditions);
-        return Object.assign(Object.assign({}, (this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, TABLE_OPERATIONS: this.updateType, RULE_EXPRESSION: useRaw
+        const rule = Object.assign(Object.assign({}, (this.ruleDialogMode === RuleDialogMode.EDIT && { DYNAMIC_RULE_ID: this.ruleId })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, TABLE_OPERATIONS: this.updateType, RULE_EXPRESSION: useRaw
                 ? null
                 : {
                     CONDITIONS: DynamicRuleUtils.createConditions(this.conditions),
@@ -163,9 +176,11 @@ let RuleDialog = class RuleDialog extends GenesisElement {
                     DynamicRuleUtils.createAssignment(Assignment.NOTIFY_SEVERITY, humanize(this.severity)),
                 ],
             } });
+        return this.applyAlertSoundToPayload(rule);
     }
     validateResponse(response) {
         if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+            this.syncAlertSoundCacheAfterSave();
             this.close();
             return;
         }

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-dialog/rule-dialog.template.js

@@ -2,6 +2,7 @@ import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@genesislcap/web-core';
 import { Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
+import { alertSoundAttachmentTemplate } from '../../../alert-sound-attachment';
 const isGroup = (node) => Array.isArray(node.CHILDREN);
 export const RuleDialogTemplate = html `
   <rapid-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
@@ -115,6 +116,8 @@ export const RuleDialogTemplate = html `
         </div>
       </div>
 
+      ${alertSoundAttachmentTemplate}
+
       <div class="control">
         <label>Condition(s)</label>
         <div class="items">

package/dist/esm/components/foundation-notification-dashboard/components/rules/rule-management.js

@@ -2,6 +2,7 @@ import { __awaiter, __decorate } from "tslib";
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
 import { RuleService } from '../../../../services/rule.service';
+import { AlertSoundPlayer } from '../../../../utils/alert-sound';
 import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { RULE_MANAGEMENT_COLUMNS } from './columns';
 import { RuleDialogMode } from './rule-dialog/rule-dialog.types';
@@ -27,7 +28,10 @@ let RuleManagement = class RuleManagement extends GenesisElement {
                 confirmingActions: [
                     {
                         label: 'Confirm',
-                        action: () => this.ruleService.deleteRule(rule.ID),
+                        action: () => {
+                            AlertSoundPlayer.shared.clearServerSound(rule.ID);
+                            this.ruleService.deleteRule(rule.ID);
+                        },
                     },
                 ],
             },

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.js

@@ -2,9 +2,11 @@ import { __awaiter, __decorate } from "tslib";
 import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
 import { Assignment, defaultUpdateType, Severity, } from '../../../../../notify.types';
 import { NotifyService } from '../../../../../services/notify.service';
+import { RuleService } from '../../../../../services/rule.service';
 import { SystemService } from '../../../../../services/system.service';
 import { TemplateService } from '../../../../../services/template.service';
 import { humanize, logger } from '../../../../../utils';
+import { AlertSoundAttachmentMixin } from '../../../alert-sound-attachment';
 import { DynamicRuleUtils, showNotificationError, TemplateUtils, isEmpty, } from '../../../notification-dashboard.utils';
 import { DynamicRuleDialogStyles } from '../../../styles/dynamic-rule.styles';
 import { TemplateDialogTemplate } from './template-dialog.template';
@@ -15,7 +17,7 @@ import { TemplateDialogMode } from './template-dialog.types';
  *
  * @fires close - Fired when the dialog should close
  */
-let TemplateDialog = class TemplateDialog extends GenesisElement {
+let TemplateDialog = class TemplateDialog extends AlertSoundAttachmentMixin(GenesisElement) {
     constructor() {
         super(...arguments);
         this.templateDialogMode = null;
@@ -39,6 +41,17 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
         this.topics = [];
         this.requiredFields = () => [this.name, this.description, this.header, this.message];
     }
+    get isAlertSoundEditMode() {
+        return this.templateDialogMode === TemplateDialogMode.EDIT;
+    }
+    get alertSoundEntityId() {
+        return this.templateId;
+    }
+    get alertSoundCacheSyncMode() {
+        // Template sound updates propagate to instance rules by NAME on the server;
+        // bust the whole client cache so those instance ids re-fetch.
+        return 'all';
+    }
     openDialog(params) {
         return __awaiter(this, void 0, void 0, function* () {
             this.topics = yield this.notifyService.getNotifyRouteTopics();
@@ -59,6 +72,7 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
         });
     }
     close() {
+        this.stopTestSound();
         // Objects
         this.templateId = null;
         this.name = null;
@@ -69,6 +83,7 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
         this.topic = null;
         this.severity = null;
         this.templateDialogMode = null;
+        this.resetAlertSoundState();
         // Arrays
         this.resources = [];
         this.topics = [];
@@ -113,6 +128,7 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
             this.conditions = DynamicRuleUtils.resolveLeftValues(loadedConditions, this.fields);
             this.refreshExpressionPreview();
             this.attributeAssignments((_c = template.RESULT_EXPRESSION) === null || _c === void 0 ? void 0 : _c.ASSIGNMENTS);
+            yield this.loadExistingAlertSound(template.DYNAMIC_RULE_ID);
         });
     }
     refreshExpressionPreview() {
@@ -168,7 +184,7 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
             DynamicRuleUtils.hasOrJoin(this.conditions) ||
             DynamicRuleUtils.hasGroup(this.conditions) ||
             DynamicRuleUtils.hasUnsupportedOperator(this.conditions);
-        return Object.assign(Object.assign({}, (this.templateDialogMode === TemplateDialogMode.EDIT && {
+        const template = Object.assign(Object.assign({}, (this.templateDialogMode === TemplateDialogMode.EDIT && {
             DYNAMIC_RULE_ID: this.templateId,
         })), { RULE_NAME: this.name, RULE_DESCRIPTION: this.description, RULE_TABLE: this.resource, TABLE_OPERATIONS: this.updateType, RULE_EXPRESSION: useRaw
                 ? null
@@ -182,9 +198,11 @@ let TemplateDialog = class TemplateDialog extends GenesisElement {
                     DynamicRuleUtils.createAssignment(Assignment.NOTIFY_SEVERITY, humanize(this.severity)),
                 ],
             }, PARAMETER_DETAILS: useRaw ? {} : TemplateUtils.createParameterDetails(this.parameters) });
+        return this.applyAlertSoundToPayload(template);
     }
     validateResponse(response) {
         if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+            this.syncAlertSoundCacheAfterSave();
             this.close();
             return;
         }
@@ -245,6 +263,9 @@ __decorate([
 __decorate([
     NotifyService
 ], TemplateDialog.prototype, "notifyService", void 0);
+__decorate([
+    RuleService
+], TemplateDialog.prototype, "ruleService", void 0);
 __decorate([
     observable
 ], TemplateDialog.prototype, "templateDialogMode", void 0);

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-dialog/template-dialog.template.js

@@ -2,6 +2,7 @@ import { sync } from '@genesislcap/foundation-utils';
 import { html, ref, repeat, when } from '@genesislcap/web-core';
 import { Severity, UpdateType } from '../../../../../notify.types';
 import { eventDetail } from '../../../../../utils/eventDetail';
+import { alertSoundAttachmentTemplate } from '../../../alert-sound-attachment';
 const isGroup = (node) => Array.isArray(node.CHILDREN);
 export const TemplateDialogTemplate = html `
   <rapid-modal ${ref('dialog')} class="dialog" :onCloseCallback=${(x) => () => x.close()}>
@@ -97,6 +98,8 @@ export const TemplateDialogTemplate = html `
         </div>
       </div>
 
+      ${alertSoundAttachmentTemplate}
+
       <div class="control">
         <label>Condition(s)</label>
         <div class="items">

package/dist/esm/components/foundation-notification-dashboard/components/templates/template-management.js

@@ -2,6 +2,7 @@ import { __awaiter, __decorate } from "tslib";
 import { showNotificationDialog } from '@genesislcap/foundation-notifications';
 import { customElement, GenesisElement, html, ref, repeat } from '@genesislcap/web-core';
 import { TemplateService } from '../../../../services/template.service';
+import { AlertSoundPlayer } from '../../../../utils/alert-sound';
 import { DynamicRuleManagementStyles } from '../../styles/dynamic-rule.styles';
 import { TEMPLATE_MANAGEMENT_COLUMNS } from './columns';
 import { TemplateDialogMode } from './template-dialog/template-dialog.types';
@@ -27,7 +28,13 @@ let TemplateManagement = class TemplateManagement extends GenesisElement {
                 confirmingActions: [
                     {
                         label: 'Confirm',
-                        action: () => this.templateService.deleteRuleTemplate(template.ID),
+                        action: () => {
+                            // Template sounds propagate to instance rules by NAME on the
+                            // server; the client cache is keyed by those instance ids, not
+                            // template.ID — bust everything so deleted audio stops playing.
+                            AlertSoundPlayer.shared.clearAllServerSounds();
+                            this.templateService.deleteRuleTemplate(template.ID);
+                        },
                     },
                 ],
             },

package/dist/esm/components/foundation-notification-dashboard/styles/dynamic-rule.styles.js

@@ -90,7 +90,7 @@ export const DynamicRuleDialogStyles = css `
     display: flex;
     flex-direction: column;
     width: ${String(modalWidthPx)}px;
-    max-height: 500px;
+    max-height: 600px;
     overflow-y: scroll;
     gap: calc(var(--design-unit) * 3px);
     padding: calc(var(--design-unit) * 4px);
@@ -161,5 +161,35 @@ export const DynamicRuleDialogStyles = css `
     min-height: calc(var(--design-unit) * 12px);
     resize: vertical;
   }
+
+  .alert-sound {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    margin-top: calc(var(--design-unit) * 2px);
+  }
+
+  .alert-sound .file-input {
+    display: none;
+  }
+
+  .alert-sound-row {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+    flex-wrap: wrap;
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    padding: calc(var(--design-unit) * 2px);
+  }
+
+  .alert-sound-name {
+    flex: 1;
+    min-width: 120px;
+    color: var(--neutral-foreground-hint);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 // #endregion

package/dist/esm/components/foundation-sounds/foundation-sounds-panel.js

@@ -0,0 +1,283 @@
+import { __awaiter, __decorate } from "tslib";
+import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
+import { RuleService } from '../../services/rule.service';
+import { AlertSoundPlayer, MAX_SOUND_RULES, } from '../../utils/alert-sound';
+import { FoundationSoundsPanelStyles } from './foundation-sounds-panel.styles';
+import { FoundationSoundsPanelTemplate } from './foundation-sounds-panel.template';
+/**
+ * Configures alert sound rules in the inbox Sounds tab. Persists via the shared
+ * AlertSoundPlayer; playback is handled by layout-mounted
+ * {@link FoundationSounds}.
+ *
+ * @public
+ */
+let FoundationSoundsPanel = class FoundationSoundsPanel extends GenesisElement {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.rules = [];
+        /** @internal */
+        this.canAddRule = true;
+        /** @internal */
+        this.canRemoveRule = false;
+        /** Global playback volume 0–100. @internal */
+        this.volumePercent = 100;
+        /** @internal */
+        this.muted = false;
+        /** Notification rules from REQ_NOTIFICATION_RULE. @internal */
+        this.selectableRules = [];
+        /** @internal */
+        this.ruleSelectOptions = [
+            { id: '', name: 'Select a rule...' },
+        ];
+        /** @internal */
+        this.maxRules = MAX_SOUND_RULES;
+        this.pendingRuleIndex = null;
+        this.player = AlertSoundPlayer.shared;
+        /** Suppresses select change events while options are rebuilt. */
+        this.ignoreSelectChanges = false;
+    }
+    connectedCallback() {
+        const _super = Object.create(null, {
+            connectedCallback: { get: () => super.connectedCallback }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.connectedCallback.call(this);
+            yield this.player.restore();
+            // The await above can outlive this element (e.g. the inbox flyout closing
+            // before restore() settles). Without this guard, disconnectedCallback runs
+            // first with unsubscribePlayer still unset, so it clears nothing — and we
+            // then add a listener to the shared AlertSoundPlayer.shared that nothing
+            // ever removes, plus fire a redundant loadRules() request.
+            if (!this.isConnected) {
+                return;
+            }
+            this.syncSoundState();
+            this.unsubscribePlayer = this.player.subscribe(() => this.syncSoundState());
+            yield this.loadRules();
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.unsubscribePlayer) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribePlayer = undefined;
+    }
+    onMatchModeChange(index, event) {
+        const value = event.target.value;
+        const matchMode = value === 'rule' ? 'rule' : value === 'header' ? 'header' : 'message';
+        if (matchMode === 'rule') {
+            void this.loadRules();
+        }
+        this.player.setMatchMode(index, matchMode);
+        // FAST preventDefaults when a binding returns void — always allow the event.
+        return true;
+    }
+    onPatternInput(index, event) {
+        const value = event.target.value;
+        this.player.setPattern(index, value);
+        return true;
+    }
+    onRuleChange(index, event) {
+        if (this.ignoreSelectChanges) {
+            return true;
+        }
+        const ruleId = event.target.value;
+        if (!ruleId) {
+            this.player.setRule(index, null);
+            return true;
+        }
+        const rule = this.selectableRules.find((item) => item.id === ruleId);
+        if (!rule) {
+            return true;
+        }
+        this.player.setRule(index, rule);
+        return true;
+    }
+    openFilePicker(index) {
+        var _a;
+        this.pendingRuleIndex = index;
+        (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
+        return true;
+    }
+    onFileSelected(event) {
+        var _a;
+        const input = event.target;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        const index = this.pendingRuleIndex;
+        this.pendingRuleIndex = null;
+        input.value = '';
+        if (!file || index == null) {
+            return true;
+        }
+        this.player.setSoundFromFile(index, file);
+        return true;
+    }
+    clearSound(index) {
+        this.player.clearSound(index);
+        return true;
+    }
+    testSound(index) {
+        this.player.playRule(index);
+        return true;
+    }
+    toggleRuleMute(index) {
+        this.player.toggleRuleMute(index);
+        return true;
+    }
+    onVolumeChange(event) {
+        const value = Number(event.target.value);
+        if (!Number.isFinite(value)) {
+            return true;
+        }
+        this.player.setVolumePercent(value);
+        return true;
+    }
+    toggleMute() {
+        this.player.toggleMute();
+        return true;
+    }
+    addRule() {
+        this.player.addRule();
+        return true;
+    }
+    removeRule(index) {
+        this.player.removeRule(index);
+        return true;
+    }
+    /** Reloads the notification-rule picker (e.g. when the Sounds tab is opened). */
+    reloadRules() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.loadRules();
+        });
+    }
+    loadRules() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const rules = yield this.ruleService.getRules();
+                const ruleList = (Array.isArray(rules) ? rules : []);
+                this.selectableRules = this.mapRules(ruleList);
+                this.ruleSelectOptions = [
+                    {
+                        id: '',
+                        name: this.selectableRules.length ? 'Select a rule...' : 'No rules available',
+                    },
+                    ...this.selectableRules.map((rule) => ({ id: rule.id, name: rule.name })),
+                ];
+                yield this.settleRuleOptions();
+                this.syncSoundState();
+                // options-datasource clearData() wipes select.value whenever :data is
+                // reassigned, and :value won't re-apply if templateId didn't change — so
+                // push persisted rule ids back onto the selects after the rebuild.
+                this.applyRuleSelectValues();
+            }
+            catch (_a) {
+                this.selectableRules = [];
+                this.ruleSelectOptions = [{ id: '', name: 'No rules available' }];
+                // Without this, a failed REQ_NOTIFICATION_RULE leaves a restored
+                // matchMode: 'rule' row showing the "Select a rule..." placeholder for
+                // good, even though the player still holds its templateId and plays fine.
+                this.syncSoundState();
+                this.applyRuleSelectValues();
+            }
+        });
+    }
+    /**
+     * Suppresses select `change` events only while options-datasource rebuilds
+     * the DOM — not for the `getRules()` round trip itself, so a user picking a
+     * rule while a request is in flight isn't silently dropped.
+     */
+    settleRuleOptions() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.ignoreSelectChanges = true;
+            try {
+                yield new Promise((resolve) => {
+                    requestAnimationFrame(() => {
+                        resolve();
+                    });
+                });
+            }
+            finally {
+                this.ignoreSelectChanges = false;
+            }
+        });
+    }
+    /**
+     * Re-applies persisted template ids onto `.rule-select` hosts after
+     * options-datasource has rebuilt its options. We deliberately do *not* bind
+     * `:initialSelectedValue` to templateId: that path compares the option label
+     * against Select.value (the option id), always mismatches, clearData()'s the
+     * select, and leaves the next pick stuck on "Select a rule...".
+     */
+    applyRuleSelectValues() {
+        var _a;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sound-rule').forEach((row) => {
+            var _a;
+            const index = Number(row.getAttribute('data-rule-index'));
+            const rule = this.rules.find((item) => item.index === index);
+            const select = row.querySelector('.rule-select');
+            if (!select || !rule || rule.matchMode !== 'rule') {
+                return;
+            }
+            select.value = (_a = rule.templateId) !== null && _a !== void 0 ? _a : '';
+        });
+    }
+    mapRules(ruleList) {
+        const seenIds = new Set();
+        return ruleList
+            .map((rule) => {
+            var _a, _b, _c;
+            const name = (_c = (_b = (_a = rule === null || rule === void 0 ? void 0 : rule.NAME) !== null && _a !== void 0 ? _a : rule === null || rule === void 0 ? void 0 : rule.RULE_NAME) !== null && _b !== void 0 ? _b : rule === null || rule === void 0 ? void 0 : rule.name) !== null && _c !== void 0 ? _c : '';
+            const id = this.ruleMatchId(rule);
+            if (!id || !name || seenIds.has(id)) {
+                return null;
+            }
+            seenIds.add(id);
+            return { id, name };
+        })
+            .filter((rule) => Boolean(rule));
+    }
+    ruleMatchId(rule) {
+        var _a, _b, _c;
+        return String((_c = (_b = (_a = rule === null || rule === void 0 ? void 0 : rule.DYNAMIC_RULE_ID) !== null && _a !== void 0 ? _a : rule === null || rule === void 0 ? void 0 : rule.ID) !== null && _b !== void 0 ? _b : rule === null || rule === void 0 ? void 0 : rule.id) !== null && _c !== void 0 ? _c : '').trim();
+    }
+    syncSoundState() {
+        this.rules = this.player.rules;
+        this.canAddRule = this.player.canAddRule;
+        this.canRemoveRule = this.player.canRemoveRule;
+        this.volumePercent = this.player.volumePercent;
+        this.muted = this.player.isMuted;
+    }
+};
+__decorate([
+    RuleService
+], FoundationSoundsPanel.prototype, "ruleService", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "rules", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "canAddRule", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "canRemoveRule", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "volumePercent", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "muted", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "selectableRules", void 0);
+__decorate([
+    observable
+], FoundationSoundsPanel.prototype, "ruleSelectOptions", void 0);
+FoundationSoundsPanel = __decorate([
+    customElement({
+        name: 'foundation-sounds-panel',
+        template: FoundationSoundsPanelTemplate,
+        styles: FoundationSoundsPanelStyles,
+    })
+], FoundationSoundsPanel);
+export { FoundationSoundsPanel };