@nopwdio/sdk-js
Version:
Nopwd JS SDK
91 lines • 4.03 kB
JavaScript
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;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { addSessionStateChanged, removeSessionStateChanged } from "../core/session.js";
export var State;
(function (State) {
State["AUTHENTICATED"] = "authenticated";
State["UNAUTHENTICATED"] = "unauthenticated";
State["UNKNOWN"] = "unknown";
})(State || (State = {}));
/**
* @summary Renders different slotted elements based on the authentication state.
*
* @description
* The `np-if` custom element listens to session state changes and renders different slotted elements
* depending on whether the user is authenticated, unauthenticated, or if the session verification is in progress.
*
* @slot authenticated - The slotted elements to render when a user is logged in.
* @slot unauthenticated - The slotted elements to render when no one is logged in.
* @slot unknown - The slotted elements to render when the session verification is in progress.
*/
let NpIf = class NpIf extends LitElement {
constructor() {
super();
this.state = State.UNKNOWN;
this.sessionStateListener = this.sessionStateListener.bind(this);
}
connectedCallback() {
const _super = Object.create(null, {
connectedCallback: { get: () => super.connectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.connectedCallback.call(this);
addSessionStateChanged(this.sessionStateListener);
});
}
disconnectedCallback() {
const _super = Object.create(null, {
disconnectedCallback: { get: () => super.disconnectedCallback }
});
return __awaiter(this, void 0, void 0, function* () {
_super.disconnectedCallback.call(this);
removeSessionStateChanged(this.sessionStateListener);
});
}
sessionStateListener(session) {
switch (session) {
case undefined:
this.state = State.UNKNOWN;
break;
case null:
this.state = State.UNAUTHENTICATED;
break;
default:
this.state = State.AUTHENTICATED;
}
}
render() {
switch (this.state) {
case State.UNKNOWN:
return html `<slot name="unknown"></slot>`;
case State.AUTHENTICATED:
return html `<slot name="authenticated"></slot>`;
case State.UNAUTHENTICATED:
return html `<slot name="unauthenticated"></slot>`;
}
}
};
NpIf.styles = [];
__decorate([
property()
], NpIf.prototype, "state", void 0);
NpIf = __decorate([
customElement("np-if")
], NpIf);
export { NpIf };
//# sourceMappingURL=np-if.js.map