@rxdi/ui-kit
Version:
UI Components for building graphql-server website
85 lines • 2.83 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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Nav = void 0;
const core_1 = require("@rxdi/core");
const rxjs_1 = require("rxjs");
const operators_1 = require("rxjs/operators");
const lit_html_1 = require("@rxdi/lit-html");
let Nav = class Nav {
constructor() {
this.openSubject = new rxjs_1.BehaviorSubject({
left: -270
});
this.template = new rxjs_1.ReplaySubject();
this.stylesSubject = new rxjs_1.BehaviorSubject((0, lit_html_1.css) `
:host {
position: absolute;
top: 0;
transition: left 0.3s ease-out;
bottom: 0;
left: -270px;
box-sizing: border-box;
min-width: 270px;
background: #fff;
overflow-y: auto;
}
`);
}
getOpenSubject() {
return this.openSubject.asObservable();
}
getTemplateSubject() {
return this.template.asObservable();
}
getStylesSubject() {
return this.stylesSubject.asObservable();
}
setStylesSubject(style) {
this.stylesSubject.next(style);
}
open(options = { navOptions: { left: 0, delay: 20 } }) {
this.removeRef();
this.createRef();
this.attachRef(options.ref);
if (options.styles) {
this.stylesSubject.next(options.styles);
}
this.template.next(options.template || (0, lit_html_1.html) ``);
this.openSubject.next(options.navOptions);
}
getNavRef() {
return this.navRef;
}
close(options = { left: -270, delay: 300 }) {
this.openSubject
.pipe((0, operators_1.take)(1), (0, operators_1.delay)(options.delay))
.subscribe(() => this.removeRef());
this.openSubject.next(options);
}
removeRef() {
if (this.navRef) {
this.navRef.remove();
this.navRef = null;
}
}
createRef() {
this.navRef = document.createElement('rx-nav');
}
attachRef(ref) {
if (ref) {
return ref.appendChild(this.navRef);
}
return document.body.appendChild(this.navRef);
}
};
Nav = __decorate([
(0, core_1.Injectable)({ init: true })
], Nav);
exports.Nav = Nav;
//# sourceMappingURL=nav.service.js.map