sdk-window
Version:
Resizable and movable (Angular) modal window.
648 lines (641 loc) • 37.5 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { DynamicModule } from 'ng-dynamic-component';
class SDKWindows {
static adjustIndex(parent = "webspace", windowID = "", highlight = true) {
let ws = document.getElementById(parent);
let childArray = [];
let childrenArray = [];
if (ws) {
let children = ws.getElementsByTagName("SDK-WINDOW");
for (let c = 0; c < children.length; c++) {
if (children[c].children[0].getAttribute("_parent") === parent) {
childrenArray.push(children[c].children[0]);
}
}
childrenArray = childrenArray.sort((a, b) => parseInt(b.style.zIndex) - parseInt(a.style.zIndex));
for (let c = 0; c < childrenArray.length; c++) {
let child = document.getElementById(childrenArray[c].id);
if (child) {
if (child.className.indexOf("show") > -1) {
if (child.id === windowID) {
childArray = childArray.filter((c) => c.id !== child.id);
childArray.unshift(child);
SDKWindows.highlight(child.id, "on", highlight);
}
else {
childArray.push(child);
SDKWindows.highlight(child.id, "off", highlight);
}
}
else {
childArray.push(child);
}
}
}
}
for (let c = 0; c < childArray.length; c++) {
childArray[c].style.zIndex = (999 - c).toString();
}
}
static toggleVisibility(windowID, oo, highlight = true) {
let win = document.getElementById(windowID);
if (win) {
if (oo === "show") {
SDKWindows.highlight(windowID, "on", highlight);
win.className = win.className.replace("sdk-window-hide", "sdk-window-show");
}
else {
win.className = win.className.replace("sdk-window-show", "sdk-window-hide");
SDKWindows.highlight(windowID, "off", highlight);
}
}
}
static highlight(windowID, oo, highlight) {
let win = document.getElementById(windowID);
if (win) {
if (oo === "on" || !highlight) {
win.className = win.className.replace("sdk-window-inactive", "sdk-window-active");
let bgs = win.getElementsByClassName("sdk-window-inactive");
for (let b = 0; b < bgs.length; b++) {
bgs[b].className = bgs[b].className.replace("sdk-window-inactive", "sdk-window-active");
}
}
else {
win.className = win.className.replace("sdk-window-active", "sdk-window-inactive");
let bgs = win.getElementsByClassName("sdk-window-active");
for (let b = 0; b < bgs.length; b++) {
bgs[b].className = bgs[b].className.replace("sdk-window-active", "sdk-window-inactive");
}
}
}
}
static isActive(windowID) {
let win = document.getElementById(windowID);
if (win) {
if (win.className.indexOf("show") > -1) {
return true;
}
}
return false;
}
static isTop(windowID) {
let win = document.getElementById(windowID);
if (win) {
if (win.className.indexOf("sdk-window-active") > -1) {
return true;
}
}
return false;
}
}
class SDKWindowComponent {
constructor() {
/**************************************************************************
* Input/Output Parameters
**************************************************************************/
this.parent = "webspace";
this.windowID = "";
this.windowTitle = "";
this.windowColor = "rgb(36, 144, 201)";
this.windowTitleColor = "white";
this.zIndex = 0;
this.top = "0";
this.left = "0";
this.height = "500";
this.width = "600";
this.minHeight = "300";
this.minWidth = "300";
this.overflow = "auto";
this.init = false;
this.fullscreen = false;
this.centered = true;
this.resizable = true;
this.closeable = true;
this.maximize = true;
this.highlight = true;
this.adjustmentEvent = new EventEmitter();
this.closeEvent = new EventEmitter();
/**************************************************************************
* Component Variables
**************************************************************************/
this.mobile = false;
}
//******************************************************************************
// Component Life-cycle Methods
//******************************************************************************
ngOnInit() {
setTimeout(() => {
this.calculateMobile(this.windowID);
this.calculateStyle(this.windowID);
this.setStyle(this.windowID);
}, 1);
}
ngAfterViewInit() {
SDKWindows.adjustIndex(this.parent, this.windowID, this.highlight);
setTimeout(() => {
this.setProperties(this.windowID, {
_parent: this.parent,
_minHeight: this.minHeight,
_minWidth: this.minWidth,
zIndex: this.zIndex
});
if (this.init) {
SDKWindows.toggleVisibility(this.windowID, "show", this.highlight);
}
}, 100);
}
//*************************************************************************
// Protected Methods
//*************************************************************************
setFocus(_event, windowID) {
SDKWindows.adjustIndex(this.parent, windowID, this.highlight);
}
close(_event, windowID) {
SDKWindows.toggleVisibility(windowID, "hide", this.highlight);
if (this.closeEvent.observed) {
this.closeEvent.emit(windowID);
}
}
maxsize(_event, windowID) {
let element = document.getElementById(windowID);
if (element) {
if (this.resizable && this.maximize) {
this.fullscreen = !this.fullscreen;
setTimeout(() => {
this.setStyle(windowID);
}, 1);
}
}
}
resize(_event, windowID, area) {
_event.preventDefault();
let ws = document.getElementById(this.parent);
let element = document.getElementById(windowID);
if (element) {
let t = parseInt(element.style.top);
let l = parseInt(element.style.left);
this.setProperties(windowID, {
_top: t.toString() + "px",
_left: l.toString() + "px",
_right: (l + element.clientWidth).toString() + "px",
_bottom: (t + element.clientHeight).toString() + "px",
_height: element.clientHeight.toString() + "px",
_width: element.clientWidth.toString() + "px"
});
}
if (ws) {
ws.setAttribute("_object", windowID);
ws.setAttribute("_area", area);
}
document.body.setAttribute("parent", this.parent);
document.onmousemove = (...props) => {
this.sizing(...props);
this.adjustmentData(...props);
};
document.onmouseup = this.stopAdjustment;
}
move(_event, windowID) {
_event.preventDefault();
if (!this.fullscreen) {
let ws = document.getElementById(this.parent);
let element = document.getElementById(windowID);
if (element) {
let ev = { y: _event.y, x: _event.x };
this.setProperties(windowID, {
_top: ev.y.toString() + "px",
_left: ev.x.toString() + "px"
});
}
if (ws) {
ws.setAttribute("_object", windowID);
}
document.body.setAttribute("parent", this.parent);
document.onmousemove = (...props) => {
this.drag(...props);
this.adjustmentData(...props);
};
document.onmouseup = this.stopAdjustment;
}
}
//*************************************************************************
// Private Methods
//*************************************************************************
sizing(_event) {
_event.preventDefault();
let parent = document.body.getAttribute("parent") ?? "";
let ws = document.getElementById(parent);
let object = ws.getAttribute("_object") ?? "";
let area = ws.getAttribute("_area") ?? "";
let element = document.getElementById(object);
if (element) {
let wsRect = ws.getBoundingClientRect();
let ev = { t: _event.y, l: _event.x };
let pr = {
t: parseInt(element.getAttribute("_top") ?? "0"),
l: parseInt(element.getAttribute("_left") ?? "0"),
r: parseInt(element.getAttribute("_right") ?? "0"),
b: parseInt(element.getAttribute("_bottom") ?? "0"),
h: parseInt(element.getAttribute("_height") ?? "0"),
w: parseInt(element.getAttribute("_width") ?? "0")
};
ev.t = ev.t - wsRect.top;
ev.l = ev.l - wsRect.left;
if (area == 'top') {
element.style.top = ev.t + 'px';
element.style.bottom = pr.b + 'px';
element.style.height = (pr.b - ev.t) + 'px';
}
if (area == 'left') {
element.style.left = ev.l + 'px';
element.style.right = pr.r + 'px';
element.style.width = (pr.r - ev.l) + 'px';
}
if (area == 'right') {
element.style.left = pr.l + 'px';
element.style.right = (ev.l - pr.r) + pr.r + 'px';
element.style.width = (ev.l - pr.l) + 'px';
}
if (area == 'bottom') {
element.style.top = pr.t + 'px';
element.style.bottom = (ev.t - pr.b) + pr.b + 'px';
element.style.height = (ev.t - pr.t) + 'px';
}
if (area == 'top-left') {
element.style.top = ev.t + 'px';
element.style.left = ev.l + 'px';
element.style.right = pr.r + 'px';
element.style.bottom = pr.b + 'px';
element.style.height = (pr.b - ev.t) + 'px';
element.style.width = (pr.r - ev.l) + 'px';
}
if (area == 'top-right') {
element.style.top = ev.t + 'px';
element.style.left = pr.l + 'px';
element.style.right = ev.l + 'px';
element.style.bottom = pr.b + 'px';
element.style.height = (pr.b - ev.t) + 'px';
element.style.width = (ev.l - pr.l) + 'px';
}
if (area == 'bottom-left') {
element.style.top = pr.t + 'px';
element.style.left = ev.l + 'px';
element.style.right = pr.r + 'px';
element.style.bottom = ev.t + 'px';
element.style.height = (ev.t - pr.t) + 'px';
element.style.width = (pr.r - ev.l) + 'px';
}
if (area == 'bottom-right') {
element.style.top = pr.t + 'px';
element.style.left = pr.l + 'px';
element.style.right = ev.l + 'px';
element.style.bottom = ev.t + 'px';
element.style.height = (ev.t - pr.t) + 'px';
element.style.width = (ev.l - pr.l) + 'px';
}
}
}
drag(_event) {
_event.preventDefault();
let parent = document.body.getAttribute("parent") ?? "";
let ws = document.getElementById(parent);
let object = ws.getAttribute("_object") ?? "";
let element = document.getElementById(object);
if (element) {
let ev = { y: _event.y, x: _event.x };
let pr = { y: parseInt(element.getAttribute("_top") ?? "0"), x: parseInt(element.getAttribute("_left") ?? "0") };
let t = parseInt(element.style.top);
let l = parseInt(element.style.left);
element.style.top = (t + (ev.y - pr.y)) + 'px';
element.style.left = (l + (ev.x - pr.x)) + 'px';
element.setAttribute("_top", ev.y.toString());
element.setAttribute("_left", ev.x.toString());
}
}
adjustmentData(_event) {
let parent = document.body.getAttribute("parent") ?? "";
let ws = document.getElementById(parent);
let object = ws.getAttribute("_object") ?? "";
let element = document.getElementById(object);
let data = null;
if (element) {
data = {
window: object,
top: parseInt(element.style.top),
left: parseInt(element.style.left),
height: parseInt(element.style.height),
width: parseInt(element.style.width)
};
}
this.adjustmentEvent.emit(data);
}
stopAdjustment(_event) {
_event.preventDefault();
let parent = document.body.getAttribute("parent") ?? "";
let ws = document.getElementById(parent);
let object = ws.getAttribute("_object") ?? "";
let element = document.getElementById(object);
if (element) {
let wsRect = ws.getBoundingClientRect();
let objRect = element.getBoundingClientRect();
let maxHeight = parseInt(element.getAttribute("_minHeight") ?? "0");
let maxWidth = parseInt(element.getAttribute("_minWidth") ?? "0");
// Height
if (objRect.height < maxHeight) {
element.style.height = `${maxHeight}px`;
}
// Width
if (objRect.width < maxWidth) {
element.style.width = `${maxWidth}px`;
}
// Top
if (objRect.top < wsRect.top) {
element.style.top = '0px';
}
// Bottom
if ((objRect.top + 40) > wsRect.bottom) {
element.style.top = (wsRect.height - 40) + 'px';
}
// Left
if ((objRect.left + objRect.width - 50) < wsRect.left) {
element.style.left = ((objRect.width * -1) + 50) + 'px';
}
// Right
if ((objRect.left + 50) > wsRect.right) {
element.style.left = (wsRect.right - wsRect.left - 50) + 'px';
}
element.setAttribute("_top", element.style.top);
element.setAttribute("_left", element.style.left);
element.setAttribute("_right", element.style.right);
element.setAttribute("_bottom", element.style.bottom);
element.setAttribute("_height", element.style.height);
element.setAttribute("_width", element.style.width);
}
if (ws) {
ws.removeAttribute("_object");
ws.removeAttribute("_area");
}
document.body.removeAttribute("parent");
document.onmousemove = null;
document.onmouseup = null;
}
calculateMobile(windowID) {
let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) {
hasTouchScreen = navigator.maxTouchPoints > 0;
}
if (hasTouchScreen && document.documentElement.clientWidth <= 750) {
this.mobile = true;
this.fullscreen = true;
this.overflow = "auto";
}
this.setProperties(windowID, {
overflow: this.overflow
});
}
calculateStyle(windowID) {
let ws = document.getElementById(this.parent);
let wsRect = ws.getBoundingClientRect();
let dh = wsRect.height;
let dw = wsRect.width;
let height = parseInt(this.height);
let width = parseInt(this.width);
if (this.height.indexOf("%") > -1) {
height = (dh * (height / 100));
}
else {
height += 2;
}
if (this.width.indexOf("%") > -1) {
width = (dw * (width / 100));
}
else {
width += 2;
}
if (this.fullscreen || this.mobile) {
if (this.mobile) {
this.setProperties(windowID, {
_top: "0",
_left: "0",
_right: "0",
_bottom: "0",
_height: `${dh}px`,
_width: `${dw}px`
});
}
else {
this.setProperties(windowID, {
_top: "0",
_left: "0",
_right: "0",
_bottom: "0",
_height: `${dh}px`,
_width: `${dw}px`
});
}
}
else {
if (height > (dh - 5)) {
height = dh - 5;
}
if (width > dw) {
width = dw;
}
if (this.centered) {
let top = ((dh - 5) - height) / 2;
let left = (dw - width) / 2;
let right = left + width;
let bottom = top + height;
this.setProperties(windowID, {
_top: `${top}px`,
_left: `${left}px`,
_right: `${right}px`,
_bottom: `${bottom}px`,
_height: `${height}px`,
_width: `${width}px`
});
}
else {
let right = parseInt(this.left) + width;
let bottom = parseInt(this.top) + height;
this.setProperties(windowID, {
_top: `${parseInt(this.top)}px`,
_left: `${parseInt(this.left)}px`,
_right: `${right}px`,
_bottom: `${bottom}px`,
_height: `${height}px`,
_width: `${width}px`
});
}
}
}
setStyle(windowID) {
let element = document.getElementById(windowID);
if (element) {
element.style.setProperty("--window-color", this.windowColor);
element.style.setProperty("--window-title-color", this.windowTitleColor);
if (this.fullscreen || this.mobile) {
let ws = document.getElementById(this.parent);
let wsRect = ws.getBoundingClientRect();
let dh = wsRect.height;
let dw = wsRect.width;
let height = `${dh - 5}px`;
let width = `${dw - 5}px`;
if (this.mobile) {
height = `${dh}px`;
width = `${dw}px`;
}
this.setProperties(windowID, {
top: "0",
left: "0",
right: "0",
bottom: "0",
height: height,
width: width
});
}
else {
this.setProperties(windowID, {
top: element.getAttribute("_top").toString(),
left: element.getAttribute("_left").toString(),
right: element.getAttribute("_right").toString(),
bottom: element.getAttribute("_bottom").toString(),
height: element.getAttribute("_height").toString(),
width: element.getAttribute("_width").toString()
});
}
}
}
setProperties(windowID, props) {
let element = document.getElementById(windowID);
if (element) {
// Styles
element.style.position = "absolute";
if (props.top)
element.style.top = props.top.toString();
if (props.left)
element.style.left = props.left.toString();
if (props.right)
element.style.right = props.right.toString();
if (props.bottom)
element.style.bottom = props.bottom.toString();
if (props.height)
element.style.height = props.height.toString();
if (props.width)
element.style.width = props.width.toString();
if (props.overflow)
element.style.overflow = props.overflow;
if (props.zIndex)
element.style.zIndex = props.zIndex;
// Attributes
if (props._parent !== undefined)
element.setAttribute("_parent", props._parent);
if (props._minHeight !== undefined)
element.setAttribute("_minHeight", props._minHeight);
if (props._minWidth !== undefined)
element.setAttribute("_minWidth", props._minWidth);
if (props._top !== undefined)
element.setAttribute("_top", props._top);
if (props._left !== undefined)
element.setAttribute("_left", props._left);
if (props._right !== undefined)
element.setAttribute("_right", props._right);
if (props._bottom !== undefined)
element.setAttribute("_bottom", props._bottom);
if (props._height !== undefined)
element.setAttribute("_height", props._height);
if (props._width !== undefined)
element.setAttribute("_width", props._width);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: SDKWindowComponent, isStandalone: true, selector: "sdk-window", inputs: { parent: "parent", windowID: "windowID", windowTitle: "windowTitle", windowColor: "windowColor", windowTitleColor: "windowTitleColor", windowContent: "windowContent", windowContentData: "windowContentData", windowActions: "windowActions", windowActionsData: "windowActionsData", zIndex: "zIndex", top: "top", left: "left", height: "height", width: "width", minHeight: "minHeight", minWidth: "minWidth", overflow: "overflow", init: "init", fullscreen: "fullscreen", centered: "centered", resizable: "resizable", closeable: "closeable", maximize: "maximize", highlight: "highlight" }, outputs: { adjustmentEvent: "adjustmentEvent", closeEvent: "closeEvent" }, ngImport: i0, template: "<div (mousedown)=\"setFocus($event, windowID)\" [id]=\"windowID\" class=\"sdk-window sdk-window-inactive sdk-window-hide\">\n <ng-container *ngIf=\"resizable\">\n <div class=\"top no-mobile\" (mousedown)=\"resize($event, windowID, 'top')\"></div>\n <div class=\"left no-mobile\" (mousedown)=\"resize($event, windowID, 'left')\"></div>\n <div class=\"right no-mobile\" (mousedown)=\"resize($event, windowID, 'right')\"></div>\n <div class=\"bottom no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom')\"></div>\n\n <div class=\"top-left no-mobile\" (mousedown)=\"resize($event, windowID, 'top-left')\"></div>\n <div class=\"top-right no-mobile\" (mousedown)=\"resize($event, windowID, 'top-right')\"></div>\n <div class=\"bottom-left no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom-left')\"></div>\n <div class=\"bottom-right no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom-right')\"></div>\n </ng-container>\n\n <div class=\"sdk-window-center\" [ngClass]=\"{ 'fixed': !resizable || fullscreen }\">\n <div class=\"sdk-window-header noselect sdk-window-inactive\">\n <div *ngIf=\"height !== '0' && width !== '0' && maximize\" class=\"sdk-window-size no-mobile\">\n <div *ngIf=\"resizable && !fullscreen\" (click)=\"maxsize($event, windowID)\" class=\"sdk-icon\">settings_overscan</div>\n <div *ngIf=\"resizable && fullscreen\" (click)=\"maxsize($event, windowID)\" class=\"sdk-icon\">branding_watermark</div>\n </div>\n <div class=\"sdk-window-title\" (dblclick)=\"maxsize($event, windowID)\" (mousedown)=\"move($event, windowID)\">\n <div [title]=\"windowTitle\" class=\"label\">{{ windowTitle }}</div>\n </div>\n <div *ngIf=\"closeable\" class=\"sdk-window-close\">\n <div class=\"sdk-icon\" (click)=\"close($event, windowID)\">cancel_presentation</div>\n </div>\n <div *ngIf=\"windowActions\" class=\"sdk-window-actions\">\n <ng-container [ngTemplateOutlet]=\"windowActions\" [ngTemplateOutletContext]=\"windowActionsData\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"windowContent\" [id]=\"windowID + '_content'\" class=\"sdk-window-content\" [ngStyle]=\"{ overflow: mobile ? 'auto' : overflow }\">\n <ng-container [ngTemplateOutlet]=\"windowContent\" [ngTemplateOutletContext]=\"windowContentData\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host .bold{font-weight:600}:host .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sdk-window{border:1px solid var(--border-color, rgb(150, 150, 150));cursor:default}.sdk-window .top{position:absolute;top:0;left:0;right:0;height:5px;z-index:1;cursor:n-resize}.sdk-window .left{position:absolute;left:0;top:0;bottom:0;width:5px;z-index:1;cursor:w-resize}.sdk-window .right{position:absolute;right:0;top:0;bottom:0;width:5px;z-index:1;cursor:e-resize}.sdk-window .bottom{position:absolute;bottom:0;left:0;right:0;height:5px;z-index:1;cursor:s-resize}.sdk-window .top-left{position:absolute;top:0;left:0;height:5px;width:5px;z-index:2;cursor:nw-resize}.sdk-window .top-right{position:absolute;top:0;right:0;height:5px;width:5px;z-index:2;cursor:ne-resize}.sdk-window .bottom-left{position:absolute;bottom:0;left:0;height:5px;width:5px;z-index:2;cursor:sw-resize}.sdk-window .bottom-right{position:absolute;bottom:0;right:0;height:5px;width:5px;z-index:2;cursor:se-resize}.sdk-window .sdk-window-center{position:absolute;inset:5px;z-index:5;background-color:var(--white-color, rgb(240, 240, 240))}.sdk-window .sdk-window-center.fixed{inset:2px}.sdk-window .sdk-window-center .sdk-window-header{position:absolute;top:0;left:0;right:0;height:30px;color:var(--white-color, rgb(240, 240, 240))}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-size{position:absolute;top:-2;left:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-title{position:absolute;inset:0 30px;z-index:1;text-align:center;color:var(--window-title-color, white)}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-close{position:absolute;top:-2;right:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-actions{position:absolute;top:0;right:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .label{padding-top:3px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-icon{padding-top:2px;cursor:pointer}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-icon:hover{color:var(--black-color, rgb(40, 40, 40))}.sdk-window .sdk-window-center .sdk-window-content{position:absolute;inset:30px 0 0;padding:5px;border:1px solid var(--border-color, rgb(150, 150, 150))}.sdk-window-show{visibility:visible}.sdk-window-hide{visibility:hidden}.sdk-window-active{background-color:var(--window-color, rgb(36, 144, 201))}.sdk-window-inactive{background-color:#afafaf}@media screen and (max-width: 750px){.sdk-window{border:none}.sdk-window .center{inset:2px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: DynamicModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowComponent, decorators: [{
type: Component,
args: [{ selector: 'sdk-window', standalone: true, imports: [
CommonModule,
DynamicModule,
], template: "<div (mousedown)=\"setFocus($event, windowID)\" [id]=\"windowID\" class=\"sdk-window sdk-window-inactive sdk-window-hide\">\n <ng-container *ngIf=\"resizable\">\n <div class=\"top no-mobile\" (mousedown)=\"resize($event, windowID, 'top')\"></div>\n <div class=\"left no-mobile\" (mousedown)=\"resize($event, windowID, 'left')\"></div>\n <div class=\"right no-mobile\" (mousedown)=\"resize($event, windowID, 'right')\"></div>\n <div class=\"bottom no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom')\"></div>\n\n <div class=\"top-left no-mobile\" (mousedown)=\"resize($event, windowID, 'top-left')\"></div>\n <div class=\"top-right no-mobile\" (mousedown)=\"resize($event, windowID, 'top-right')\"></div>\n <div class=\"bottom-left no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom-left')\"></div>\n <div class=\"bottom-right no-mobile\" (mousedown)=\"resize($event, windowID, 'bottom-right')\"></div>\n </ng-container>\n\n <div class=\"sdk-window-center\" [ngClass]=\"{ 'fixed': !resizable || fullscreen }\">\n <div class=\"sdk-window-header noselect sdk-window-inactive\">\n <div *ngIf=\"height !== '0' && width !== '0' && maximize\" class=\"sdk-window-size no-mobile\">\n <div *ngIf=\"resizable && !fullscreen\" (click)=\"maxsize($event, windowID)\" class=\"sdk-icon\">settings_overscan</div>\n <div *ngIf=\"resizable && fullscreen\" (click)=\"maxsize($event, windowID)\" class=\"sdk-icon\">branding_watermark</div>\n </div>\n <div class=\"sdk-window-title\" (dblclick)=\"maxsize($event, windowID)\" (mousedown)=\"move($event, windowID)\">\n <div [title]=\"windowTitle\" class=\"label\">{{ windowTitle }}</div>\n </div>\n <div *ngIf=\"closeable\" class=\"sdk-window-close\">\n <div class=\"sdk-icon\" (click)=\"close($event, windowID)\">cancel_presentation</div>\n </div>\n <div *ngIf=\"windowActions\" class=\"sdk-window-actions\">\n <ng-container [ngTemplateOutlet]=\"windowActions\" [ngTemplateOutletContext]=\"windowActionsData\"></ng-container>\n </div>\n </div>\n <div *ngIf=\"windowContent\" [id]=\"windowID + '_content'\" class=\"sdk-window-content\" [ngStyle]=\"{ overflow: mobile ? 'auto' : overflow }\">\n <ng-container [ngTemplateOutlet]=\"windowContent\" [ngTemplateOutletContext]=\"windowContentData\"></ng-container>\n </div>\n </div>\n</div>\n", styles: [":host .bold{font-weight:600}:host .noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sdk-window{border:1px solid var(--border-color, rgb(150, 150, 150));cursor:default}.sdk-window .top{position:absolute;top:0;left:0;right:0;height:5px;z-index:1;cursor:n-resize}.sdk-window .left{position:absolute;left:0;top:0;bottom:0;width:5px;z-index:1;cursor:w-resize}.sdk-window .right{position:absolute;right:0;top:0;bottom:0;width:5px;z-index:1;cursor:e-resize}.sdk-window .bottom{position:absolute;bottom:0;left:0;right:0;height:5px;z-index:1;cursor:s-resize}.sdk-window .top-left{position:absolute;top:0;left:0;height:5px;width:5px;z-index:2;cursor:nw-resize}.sdk-window .top-right{position:absolute;top:0;right:0;height:5px;width:5px;z-index:2;cursor:ne-resize}.sdk-window .bottom-left{position:absolute;bottom:0;left:0;height:5px;width:5px;z-index:2;cursor:sw-resize}.sdk-window .bottom-right{position:absolute;bottom:0;right:0;height:5px;width:5px;z-index:2;cursor:se-resize}.sdk-window .sdk-window-center{position:absolute;inset:5px;z-index:5;background-color:var(--white-color, rgb(240, 240, 240))}.sdk-window .sdk-window-center.fixed{inset:2px}.sdk-window .sdk-window-center .sdk-window-header{position:absolute;top:0;left:0;right:0;height:30px;color:var(--white-color, rgb(240, 240, 240))}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-size{position:absolute;top:-2;left:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-title{position:absolute;inset:0 30px;z-index:1;text-align:center;color:var(--window-title-color, white)}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-close{position:absolute;top:-2;right:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-actions{position:absolute;top:0;right:0;bottom:0;z-index:2}.sdk-window .sdk-window-center .sdk-window-header .label{padding-top:3px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-icon{padding-top:2px;cursor:pointer}.sdk-window .sdk-window-center .sdk-window-header .sdk-window-icon:hover{color:var(--black-color, rgb(40, 40, 40))}.sdk-window .sdk-window-center .sdk-window-content{position:absolute;inset:30px 0 0;padding:5px;border:1px solid var(--border-color, rgb(150, 150, 150))}.sdk-window-show{visibility:visible}.sdk-window-hide{visibility:hidden}.sdk-window-active{background-color:var(--window-color, rgb(36, 144, 201))}.sdk-window-inactive{background-color:#afafaf}@media screen and (max-width: 750px){.sdk-window{border:none}.sdk-window .center{inset:2px}}\n"] }]
}], propDecorators: { parent: [{
type: Input
}], windowID: [{
type: Input
}], windowTitle: [{
type: Input
}], windowColor: [{
type: Input
}], windowTitleColor: [{
type: Input
}], windowContent: [{
type: Input
}], windowContentData: [{
type: Input
}], windowActions: [{
type: Input
}], windowActionsData: [{
type: Input
}], zIndex: [{
type: Input
}], top: [{
type: Input
}], left: [{
type: Input
}], height: [{
type: Input
}], width: [{
type: Input
}], minHeight: [{
type: Input
}], minWidth: [{
type: Input
}], overflow: [{
type: Input
}], init: [{
type: Input
}], fullscreen: [{
type: Input
}], centered: [{
type: Input
}], resizable: [{
type: Input
}], closeable: [{
type: Input
}], maximize: [{
type: Input
}], highlight: [{
type: Input
}], adjustmentEvent: [{
type: Output
}], closeEvent: [{
type: Output
}] } });
class SDKWindowModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowModule, imports: [SDKWindowComponent], exports: [SDKWindowComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowModule, imports: [SDKWindowComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SDKWindowModule, decorators: [{
type: NgModule,
args: [{
imports: [
SDKWindowComponent
],
exports: [
SDKWindowComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
}]
}] });
/*
* Public API Surface of sdk-loading
*/
/**
* Generated bundle index. Do not edit.
*/
export { SDKWindowComponent, SDKWindowModule, SDKWindows };
//# sourceMappingURL=sdk-window.mjs.map