@gameon/web/web-components/notifications/notifications.js

Chat clients for web

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import '@gameon/on-ui-components/base/badge';
import '@gameon/on-ui-components/chat/notification';
import { ContextConsumer } from '@lit-labs/context';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { notificationsContext } from './notifications.context';
let OnChatBotNotifications = class OnChatBotNotifications extends LitElement {
    constructor() {
        super(...arguments);
        this.active = false;
        this.lastSeenMessage = new ContextConsumer(this, notificationsContext, undefined, true);
    }
    onMouseOver() {
        if (!this.active) {
            this.active = true;
        }
    }
    onMouseOut() {
        if (this.active) {
            this.active = false;
        }
    }
    renderCloseBadge() {
        const handleBadgeDeleted = () => {
            this.active = false;
            this.dispatchEvent(new CustomEvent('on-notification-reset'));
        };
        return html `<on-badge
      class="close-badge ${!this.active ? 'hide' : 'show'}"
      ?outlined=${true}
      .size=${'sm'}
      .color=${'default'}
      ?deletable=${true}
      @click=${handleBadgeDeleted}
      >Close</on-badge
    >`;
    }
    renderNotifications() {
        const handleNotificationClick = () => {
            this.dispatchEvent(new CustomEvent('on-notification-open-message'));
        };
        function createNotification(message, speaker, hideTimestamp = false) {
            return html `
        <on-chat-notification
          @click=${handleNotificationClick}
          .message=${message}
          .speaker=${speaker}
          ?shouldHideTimestamp=${hideTimestamp}
        ></on-chat-notification>
      `;
        }
        if (this.lastSeenMessage.value) {
            const numOfNotifications = this.lastSeenMessage.value.unreadMessages.length - 1;
            const truncatedNotification = {
                contents: [
                    {
                        text: `+${numOfNotifications} new message${numOfNotifications > 1 ? 's' : ''}`,
                    },
                ],
                timestamp: 0,
                speakerId: '',
            };
            if (this.lastSeenMessage.value.unreadMessages.length > 1) {
                return html `
          ${createNotification(this.lastSeenMessage.value.unreadMessages[0], this.speaker)}
          ${createNotification(truncatedNotification, this.speaker, true)}
        `;
            }
            else {
                return html `
          ${createNotification(this.lastSeenMessage.value.unreadMessages[0], this.speaker)}
        `;
            }
        }
        else {
            return html `${nothing}`;
        }
    }
    render() {
        var _a;
        if (!((_a = this.lastSeenMessage.value) === null || _a === void 0 ? void 0 : _a.unreadMessages.length)) {
            return html `${nothing}`;
        }
        const classes = { active: this.active };
        return html `
      <div
        class="on-chat-notifications ${classMap(classes)}"
        @mouseover="${this.onMouseOver}"
        @mouseout=${this.onMouseOut}
      >
        ${this.renderCloseBadge()} ${this.renderNotifications()}
      </div>
    `;
    }
};
OnChatBotNotifications.styles = css `
    :host {
      --on-chat-notification-background-color: #ffffff;
      bottom: calc(var(--on-chat-widget-bottom, 1rem) + 80px + 8px);
      position: fixed;
      right: var(--on-chat-widget-right, 1rem);
      z-index: var(--on-chat-widget-z-index, 999999);
    }

    .on-chat-notifications {
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0.5;
      align-items: flex-end;
    }

    .close-badge {
      cursor: pointer;
    }

    .close-badge.hide {
      display: none;
    }

    .close-badge.show {
      display: unset;
    }

    .active {
      opacity: unset;
    }
  `;
__decorate([
    property({ type: Object })
], OnChatBotNotifications.prototype, "speaker", void 0);
__decorate([
    state()
], OnChatBotNotifications.prototype, "active", void 0);
OnChatBotNotifications = __decorate([
    customElement('on-chat-bot-notifications')
], OnChatBotNotifications);
export { OnChatBotNotifications };
//# sourceMappingURL=notifications.js.map