@rxdi/ui-kit
Version:
UI Components for building graphql-server website
93 lines • 4.29 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 __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
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());
});
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GlobalMenuComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const global_menu_component_css_1 = require("./global-menu.component.css");
const core_1 = require("@rxdi/core");
const global_menu_service_1 = require("./global-menu.service");
/**
* @customElement global-menu
*/
let GlobalMenuComponent = class GlobalMenuComponent extends lit_html_1.LitElement {
constructor() {
super(...arguments);
this.menu = core_1.Container.get(global_menu_service_1.GlobalMenuService);
}
OnUpdateFirst() {
return __awaiter(this, void 0, void 0, function* () {
document.onkeyup = (e) => {
if (e.key === 'Escape') {
this.cancel();
}
};
});
}
open(template) {
this.template = template;
this.menu.setOpenSubject(true);
}
cancel() {
this.remove();
this.menu.setOpenSubject(false);
}
};
__decorate([
(0, lit_html_1.property)({ type: Object }),
__metadata("design:type", Object)
], GlobalMenuComponent.prototype, "template", void 0);
GlobalMenuComponent = __decorate([
(0, lit_html_1.Component)({
selector: 'global-menu',
style: global_menu_component_css_1.style,
template() {
return (0, lit_html_1.html) `
<div id="background" @click="${() => this.cancel()}"></div>
<button id="closeButton" @click="${() => this.cancel()}">
<svg
width="23"
height="22"
viewBox="0 0 23 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
opacity="0.33"
fill-rule="evenodd"
clip-rule="evenodd"
d="M1.11932 0.357981C1.59693 -0.119327 2.37129 -0.119327 2.8489 0.357981L11.7681 9.27152L20.6873 0.357981C21.165 -0.119327 21.9393 -0.119327 22.4169 0.357981C22.8945 0.835288 22.8945 1.60916 22.4169 2.08646L13.4977 11L22.4169 19.9135C22.8945 20.3908 22.8945 21.1647 22.4169 21.642C21.9393 22.1193 21.165 22.1193 20.6873 21.642L11.7681 12.7285L2.8489 21.642C2.37129 22.1193 1.59693 22.1193 1.11932 21.642C0.641705 21.1647 0.641705 20.3908 1.11932 19.9135L10.0385 11L1.11932 2.08646C0.641705 1.60916 0.641705 0.835288 1.11932 0.357981Z"
fill="#60656D"
/>
</svg>
</button>
<div id="installModal">
${this.template ? this.template : (0, lit_html_1.html) `<slot></slot>`}
<div id="buttonsContainer">
<button @click="${() => this.cancel()}" id="installButton">
Close
</button>
</div>
</div>
`;
},
})
], GlobalMenuComponent);
exports.GlobalMenuComponent = GlobalMenuComponent;
//# sourceMappingURL=global-menu.component.js.map