@pacem/pacem-ui 1.0.0-abel

package/dist/esm/tuner.js

@@ -0,0 +1,200 @@
+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 { P, PCSS, CustomElement, Watch, ViewChild, Components, Utils, PropertyConverters, UI, Animations } from '@pacem/pacem-core';
+import { Angle } from '@pacem/pacem-foundation';
+//namespace Pacem.Components.UI {
+const TWO_PI = Math.PI * 2;
+function cartesian(cx, cy, r, theta) {
+    return {
+        x: cx + (r * Math.cos(theta)),
+        y: cy + (r * Math.sin(theta))
+    };
+}
+let PacemTunerElement = class PacemTunerElement extends Components.PacemElement {
+    constructor() {
+        super();
+        //#region INTERACTIVE
+        this.min = 0.0;
+        this.max = 100.0;
+        this._rotateStartHandler = (evt) => {
+            const angle = this.#angle = this._getAngle(evt);
+            const r = this._rotate;
+            r.minRotation = 0 - angle;
+            r.maxRotation = TWO_PI - angle;
+            this._setValue(angle);
+        };
+        this._rotateEndHandler = (evt) => {
+            //this.#angle += evt.detail.rotation;
+        };
+        this._rotateHandler = (evt) => {
+            evt.preventDefault();
+            const angle = evt.detail.rotation + this.#angle;
+            this._setValue(angle);
+        };
+    }
+    #angle;
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        const rotate = this._rotate, tween = this._tween;
+        rotate.addEventListener(UI.RotateEventType.Start, this._rotateStartHandler, false);
+        rotate.addEventListener(UI.RotateEventType.Rotate, this._rotateHandler, false);
+        rotate.addEventListener(UI.RotateEventType.End, this._rotateEndHandler, false);
+        rotate.register(this._canvas);
+        this._toggleRotate();
+        //
+        requestAnimationFrame(() => this._draw(this.min));
+        //
+        tween.easing = Animations.Easings.sineInOut;
+        tween.delay = 500 + (Math.random() * 100 - 100);
+        tween.start = this.value > this.min;
+    }
+    disconnectedCallback() {
+        const rotate = this._rotate, canvas = this._canvas;
+        if (!Utils.isNull(rotate)) {
+            rotate.removeEventListener(UI.RotateEventType.Rotate, this._rotateHandler, false);
+            if (!Utils.isNull(canvas)) {
+                rotate.unregister(canvas);
+            }
+        }
+        super.disconnectedCallback();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'interactive':
+                this._toggleRotate(val);
+                if (!val)
+                    Utils.removeClass(this, 'tuner-interactive');
+                else
+                    Utils.addClass(this, 'tuner-interactive');
+                break;
+            case 'round':
+                if (Math.round(val) != val || val < 0)
+                    throw `${this.constructor.name}: round value must be an integer greater or equal to zero.`;
+                break;
+            default:
+                // in any other case:
+                this._draw();
+                break;
+        }
+    }
+    _toggleRotate(interactive = this.interactive) {
+        const r = this._rotate;
+        if (!Utils.isNull(r)) {
+            r.disabled = !interactive;
+        }
+    }
+    _angleToValue(angle) {
+        const round = Math.pow(10, this.round || 0);
+        const angleValue = this.min + angle * (this.max - this.min) / TWO_PI;
+        return Math.round(round * angleValue) / round;
+    }
+    _valueToAngle(v = this.value ?? this.min) {
+        return TWO_PI * (v - this.min) / (this.max - this.min);
+    }
+    _setValue(angle) {
+        const value = this._angleToValue(angle).clamp(this.min, this.max);
+        if (value != this.value) {
+            this.value = value;
+            this.dispatchEvent(new Event("change"));
+        }
+    }
+    /**
+     * Returns the angle between the vertical line through 'center' and the line through 'center' and 'currentPosition'.
+     * @param evt
+     * @returns
+     */
+    _getAngle(evt) {
+        const angle = {
+            vertex: evt.detail.center,
+            end: evt.detail.currentPosition,
+            start: { x: evt.detail.center.x, y: evt.detail.center.y - 1 }
+        };
+        const alpha = Angle.value(angle);
+        if (alpha > 0) {
+            return TWO_PI - alpha;
+        }
+        else {
+            return -alpha;
+        }
+    }
+    //#endregion
+    _draw(value = this.value) {
+        if (this.disabled || Utils.isNull(this._rail)) {
+            return;
+        }
+        value = (isNaN(value) ? this.min : value).clamp(this.min, this.max);
+        const rail = this._rail;
+        const counterRail = this._counterRail;
+        const isMin = value === this.min, isMax = value === this.max;
+        if (isMin || isMax) {
+            const d = `M 50 50 m -50,0 a 50,50 0 1,1 100,0 a 50,50 0 1,1 -100,0`;
+            rail.setAttribute('d', isMin ? '' : d);
+            counterRail.setAttribute('d', isMax ? '' : d);
+        }
+        else {
+            const mathPI2 = Math.PI * .5;
+            // rail
+            const from = cartesian(50, 50, 50, -mathPI2);
+            const angle /* fraction of the round angle */ = this._valueToAngle(value);
+            const to = cartesian(50, 50, 50, -mathPI2 + angle);
+            const large = angle > Math.PI ? 1 : 0;
+            const d = `M ${to.x} ${to.y} A 50 50 0 ${large} 0 ${from.x} ${from.y}`;
+            rail.setAttribute('d', d);
+            // counter rail
+            const counterFrom = to;
+            const counterTo = cartesian(50, 50, 50, 3 * mathPI2);
+            const counterAngle /* fraction of the round angle */ = this._valueToAngle(this.max - value);
+            const counterLarge = counterAngle > Math.PI ? 1 : 0;
+            const counterD = `M ${counterTo.x} ${counterTo.y} A 50 50 0 ${counterLarge} 0 ${counterFrom.x} ${counterFrom.y}`;
+            counterRail.setAttribute('d', counterD);
+        }
+    }
+};
+__decorate([
+    ViewChild('svg')
+], PacemTunerElement.prototype, "_canvas", void 0);
+__decorate([
+    ViewChild('path[part=rail]')
+], PacemTunerElement.prototype, "_rail", void 0);
+__decorate([
+    ViewChild('path[part=complementary-rail]')
+], PacemTunerElement.prototype, "_counterRail", void 0);
+__decorate([
+    ViewChild(P + '-tween')
+], PacemTunerElement.prototype, "_tween", void 0);
+__decorate([
+    ViewChild(P + '-rotate')
+], PacemTunerElement.prototype, "_rotate", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemTunerElement.prototype, "value", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemTunerElement.prototype, "min", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemTunerElement.prototype, "max", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemTunerElement.prototype, "interactive", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemTunerElement.prototype, "round", void 0);
+PacemTunerElement = __decorate([
+    CustomElement({
+        tagName: P + '-tuner', shadow: true,
+        template: `<svg xmlns="http://www.w3.org/2000/svg" class="${PCSS}-tuner" part="tuner" viewBox="0 0 100 100">
+            <circle part="track" cx="50" cy="50" r="50" />
+            <path part="rail" />
+            <path part="complementary-rail" />
+        </svg><div class="${PCSS}-content" part="content"><slot></slot></div>
+        <${P}-rotate></${P}-rotate>
+<${P}-tween on-step=":host._draw($event.detail.value)" on-end="this.disabled = true" duration="500" to="{{ :host.value }}" from="{{ :host.min }}"></${P}-tween>`
+    })
+], PacemTunerElement);
+export { PacemTunerElement };

package/dist/esm/types.js

@@ -0,0 +1,7 @@
+export const ElementOrPointPropertyConverter = {
+    convert: (attr) => {
+        let el = document.querySelector(attr);
+        return el ?? JSON.parse(attr);
+    }
+};
+//}

package/dist/esm/vibration.js

@@ -0,0 +1,33 @@
+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 { P, CustomElement, Watch, PacemEventTarget, Utils } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemVibrateElement = class PacemVibrateElement extends PacemEventTarget {
+    vibrate() {
+        if (this.disabled) {
+            return;
+        }
+        const pattern = this.pattern;
+        if (!Utils.isNullOrEmpty(pattern)) {
+            if (typeof navigator.vibrate === 'function') {
+                navigator.vibrate(pattern);
+            }
+        }
+    }
+};
+__decorate([
+    Watch({
+        emit: false, converter: {
+            convert: (attr) => attr?.split(/[ ,]+/).map(i => parseInt(i)),
+            convertBack: (prop) => prop?.join(' ')
+        }
+    })
+], PacemVibrateElement.prototype, "pattern", void 0);
+PacemVibrateElement = __decorate([
+    CustomElement({ tagName: P + '-vibrate' })
+], PacemVibrateElement);
+export { PacemVibrateElement };

package/dist/esm/view.js

@@ -0,0 +1,206 @@
+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 { P, CustomElement, Watch, PacemEventTarget, Components, Utils, PropertyConverters, Logging } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+const ANIM_TIMEOUT = 500;
+const ElementOrStringPropertyConverter = {
+    convert: (attr, element) => {
+        try {
+            return document.querySelector(attr) ?? (element.isConnected ? attr : null);
+        }
+        catch {
+            return attr;
+        }
+    },
+    convertBack: (prop) => (prop instanceof Element && prop.id) ? ('#' + prop.id) : prop,
+    retryConversionWhenReady: true
+};
+let PacemViewElement = class PacemViewElement extends PacemEventTarget {
+    constructor() {
+        super(...arguments);
+        this._templateChangeHandler = (evt) => {
+            const tmplProxy = evt.target;
+            this._setTmpl(tmplProxy.target);
+        };
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        // url
+        if (name === 'url' || name === 'disabled') {
+            this._dispose(old);
+            this._manage();
+        }
+        else if (name === 'fetching') {
+            (val ? Utils.addClass : Utils.removeClass)(this, 'view-fetching');
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        const url = this.url;
+        if (this._isReference(url) && !this.disabled) {
+            this._manageRef();
+        }
+    }
+    _isReference(url) {
+        return url instanceof HTMLElement || (typeof url === 'string' && url.trim().startsWith('#'));
+    }
+    _dispose(url) {
+        if (url instanceof Components.PacemTemplateProxyElement) {
+            url.removeEventListener('templatechange', this._templateChangeHandler);
+        }
+    }
+    _manage() {
+        if (this.disabled) {
+            return;
+        }
+        const debounce = this.debounce || 0, url = this.url;
+        ;
+        if (this._isReference(url)) {
+            // <template>-based
+            clearTimeout(this._fetchHandle);
+            this._fetchHandle = setTimeout((() => this._manageRef()), debounce);
+        }
+        else if (typeof url === 'string' && !Utils.isNullOrEmpty(url)) {
+            // url-based
+            this.fetching = true;
+            clearTimeout(this._fetchHandle);
+            this._fetchHandle = setTimeout((() => this._manageUrl(url)), debounce);
+        }
+        else /* might be a reset */ {
+            this.innerHTML = '';
+        }
+    }
+    _manageRef() {
+        const url = this.url, tmpl = url instanceof HTMLElement ? url : document.querySelector('template' + url);
+        if (tmpl instanceof Components.PacemTemplateProxyElement) {
+            tmpl.addEventListener('templatechange', this._templateChangeHandler, false);
+            this._setTmpl(tmpl.target);
+        }
+        else if (tmpl instanceof HTMLTemplateElement) {
+            this._setTmpl(tmpl);
+        }
+        else if (!Utils.isNull(tmpl)) {
+            this.log(Logging.LogLevel.Error, `Invalid '${tmpl.constructor.name}' element, HTMLTemplate expected.`);
+        }
+        else {
+            this.log(Logging.LogLevel.Error, `Template element not found.`);
+        }
+    }
+    _setTmpl(tmpl) {
+        cancelAnimationFrame(this._renderHandle);
+        // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
+        this.innerHTML = '';
+        this._renderHandle = requestAnimationFrame(() => {
+            if (Utils.isNull(tmpl)) {
+                this.log(Logging.LogLevel.Error, `Template element not found.`);
+                return;
+            }
+            this.appendChild(tmpl.cloneNode(true).content);
+            this._dispatchRender();
+        });
+    }
+    #aborter;
+    _manageUrl(url) {
+        if (this.#aborter) {
+            this.#aborter.abort();
+        }
+        const { signal } = this.#aborter = new AbortController();
+        fetch(url, { credentials: 'same-origin', signal }).then(async (r) => {
+            // inline function
+            const manageYield = (r, htmlPromise) => {
+                if ((r.status === 301 || r.status === 302) && this.followRedirects) {
+                    this._manageUrl(r.headers.get("Location"));
+                }
+                else if (r.ok || this.renderErrors) {
+                    htmlPromise.then((html) => Utils.addAnimationEndCallback(this, () => this._manageResult(html), ANIM_TIMEOUT));
+                }
+                // fallback to empty content.
+                else
+                    this._manageResult('');
+            };
+            const contentLength = +r.headers.get('Content-Length');
+            if (contentLength > 0) {
+                this.progress = 0;
+                let received = 0;
+                const chunks = [];
+                // progress available
+                const reader = r.body.getReader();
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        break;
+                    }
+                    this.progress = (received += value.length) / contentLength;
+                    chunks.push(value);
+                }
+                manageYield(r, new Promise((resolve, reject) => {
+                    try {
+                        let allChunks = new Uint8Array(received);
+                        let position = 0;
+                        for (let chunk of chunks) {
+                            allChunks.set(chunk, position);
+                            position += chunk.length;
+                        }
+                        const html = new TextDecoder("utf-8").decode(allChunks);
+                        resolve(html);
+                    }
+                    catch (e) {
+                        reject(e);
+                    }
+                }));
+            }
+            else {
+                manageYield(r, r.text());
+            }
+        }, _ => {
+            // do nothing on fail
+        });
+    }
+    _manageResult(result) {
+        // this way, `this._container.innerHTML = ''` instruction will eventually let the page "scroll up"...
+        cancelAnimationFrame(this._renderHandle);
+        this.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+        this.innerHTML = '';
+        this._renderHandle = requestAnimationFrame(() => {
+            this.innerHTML = result;
+            this.fetching = false;
+            this.progress = Number.NaN;
+            // setting fetching to `false` triggers a css class change that could/should cause a css transition to happen
+            // TODO: manage to switch to native in a near future (https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API or https://youtu.be/oDcb3fvtETs)
+            Utils.addAnimationEndCallback(this, () => {
+                this._dispatchRender();
+            }, ANIM_TIMEOUT);
+        });
+    }
+    _dispatchRender() {
+        this.dispatchEvent(new CustomEvent("render"));
+    }
+};
+__decorate([
+    Watch({ reflectBack: true, converter: ElementOrStringPropertyConverter })
+], PacemViewElement.prototype, "url", void 0);
+__decorate([
+    Watch()
+], PacemViewElement.prototype, "fetching", void 0);
+__decorate([
+    Watch()
+], PacemViewElement.prototype, "progress", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemViewElement.prototype, "renderErrors", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemViewElement.prototype, "followRedirects", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemViewElement.prototype, "debounce", void 0);
+PacemViewElement = __decorate([
+    CustomElement({
+        tagName: P + '-view'
+    })
+], PacemViewElement);
+export { PacemViewElement };

package/dist/esm/window.js

@@ -0,0 +1,181 @@
+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 { P, PCSS, CustomElement, Watch, Components, UI, Utils, PropertyConverters, Defaults, CustomElementUtils, PropertyChangeEventName } from '@pacem/pacem-core';
+import { AdapterPageButtonRefreshEventName } from './adapter';
+//namespace Pacem.Components.UI {
+const HANDLE_CSS = 'window-title';
+let PacemWindowAreaElement = class PacemWindowAreaElement extends Components.PacemIterativeElement {
+    constructor() {
+        super(...arguments);
+        this._zIndex = 1;
+        this._startHandler = (evt) => {
+            this._incrementZIndex(evt.detail.element);
+            Utils.addClass(evt.detail.element, 'window-rescaling');
+        };
+        this._blurHandler = (evt) => {
+            Utils.removeClass(evt.detail.element, 'window-rescaling');
+        };
+        this._focusHandler = (evt) => {
+            this._incrementZIndex(evt.currentTarget);
+        };
+        this._itemPropertyChangeHandler = (evt) => {
+            if (evt.detail.propertyName === 'floating' && evt.detail.currentValue === false) {
+                const item = evt.currentTarget, ndx = this.items.indexOf(item);
+                Utils.addClass(item, 'docking-in');
+                this.adapter.select(ndx);
+                Utils.addAnimationEndCallback(item, (e) => {
+                    Utils.removeClass(e, 'docking-in');
+                }, 150);
+            }
+        };
+        this._adapterPagerCallback = (evt) => {
+            const index = evt.detail.index, item = this.items[index];
+            evt.detail.hide = item.hide || item.floating;
+        };
+    }
+    validate(item) {
+        return item instanceof PacemWindowElement;
+    }
+    _incrementZIndex(target) {
+        if (this._zIndex != parseInt(target.style.zIndex)) {
+            target.style.zIndex = '' + (++this._zIndex);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        let shell = CustomElementUtils.findAncestorShell(this);
+        this._behaviors = [
+            shell.appendChild(this._dragDrop = document.createElement(P + '-drag-drop')),
+            shell.appendChild(this._rescale = document.createElement(P + '-rescale'))
+        ];
+        this._dragDrop.handleSelector = '.' + HANDLE_CSS;
+        //this._dragDrop.addEventListener(DragDropEventType.Init, this._focusHandler, false);
+        this._rescale.addEventListener(UI.RescaleEventType.Start, this._startHandler, false);
+        this._rescale.addEventListener(UI.RescaleEventType.End, this._blurHandler, false);
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        // adapter (reuse)
+        if (Utils.isNull(this.adapter)) {
+            const adapter = this.adapter = this.appendChild(document.createElement(P + '-adapter'));
+            Utils.addClass(adapter, 'windows-adapter');
+            adapter.labelCallback = (item, _) => {
+                return item.caption;
+            };
+            adapter.swipeEnabled = false;
+            adapter.deselectable = true;
+            adapter.initialize(this);
+        }
+        this.adapter.addEventListener(AdapterPageButtonRefreshEventName, this._adapterPagerCallback, false);
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this.adapter)) {
+            this.adapter.removeEventListener(AdapterPageButtonRefreshEventName, this._adapterPagerCallback, false);
+            this.adapter.remove();
+            this.adapter = null;
+        }
+        //this._dragDrop.removeEventListener(DragDropEventType.Init, this._focusHandler, false);
+        this._rescale.removeEventListener(UI.RescaleEventType.End, this._blurHandler, false);
+        this._rescale.removeEventListener(UI.RescaleEventType.Start, this._startHandler, false);
+        for (let b of this._behaviors) {
+            b.remove();
+        }
+        super.disconnectedCallback();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'index') {
+            this._syncVisibility();
+        }
+    }
+    register(item) {
+        const retval = super.register(item);
+        if (retval) {
+            item.addEventListener(PropertyChangeEventName, this._itemPropertyChangeHandler, false);
+            item.addEventListener('mousedown', this._focusHandler, false);
+            for (let b of this._behaviors) {
+                const ndx = item.behaviors.indexOf(b);
+                if (ndx === -1) {
+                    item.behaviors.push(b);
+                }
+            }
+        }
+        return retval;
+    }
+    unregister(item) {
+        const retval = super.unregister(item);
+        if (retval) {
+            item.removeEventListener(PropertyChangeEventName, this._itemPropertyChangeHandler, false);
+            item.removeEventListener('mousedown', this._focusHandler, false);
+            for (let b of this._behaviors) {
+                const ndx = item.behaviors.indexOf(b);
+                if (ndx >= 0) {
+                    item.behaviors.splice(ndx, 1);
+                }
+            }
+        }
+        return retval;
+    }
+    _syncVisibility() {
+        let ndx = 0;
+        const items = this.items ?? [];
+        for (let item of items) {
+            if (ndx === this.index) {
+                Utils.addClass(item, 'dock-open');
+            }
+            else {
+                Utils.removeClass(item, 'dock-open');
+            }
+            ndx++;
+        }
+    }
+};
+PacemWindowAreaElement = __decorate([
+    CustomElement({
+        tagName: P + '-window-area'
+    })
+], PacemWindowAreaElement);
+export { PacemWindowAreaElement };
+let PacemWindowElement = class PacemWindowElement extends Components.PacemIterableElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'minimized' || name === 'floating') {
+            this._syncLayout();
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._syncLayout();
+    }
+    _syncLayout() {
+        (this.minimized ? Utils.addClass : Utils.removeClass).apply(this, [this, 'window-min']);
+        (this.floating ? Utils.removeClass : Utils.addClass).apply(this, [this, 'window-dock']);
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemWindowElement.prototype, "caption", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemWindowElement.prototype, "minimized", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemWindowElement.prototype, "floating", void 0);
+PacemWindowElement = __decorate([
+    CustomElement({
+        tagName: P + '-window', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<div class="${HANDLE_CSS}">
+    <${P}-text text="{{ :host.caption || 'Window' }}"></${P}-text>
+</div>
+<div class="window-buttons ${PCSS}-buttonset"><div class="buttonset-right">
+    <${P}-button class="button" on-click=":host.minimized = !:host.minimized" icon-glyph="{{ :host.minimized ? 'maximize' : 'minimize' }}" hide="{{ !:host.floating }}"></${P}-button>
+    <${P}-button class="button" on-click=":host.floating = !:host.floating" css-class="{{ {'buttonset-first': !:host.floating} }}" icon-glyph="{{ :host.floating? 'lock_open' : 'lock' }}"></${P}-button>
+</div></div>
+<div class="window-content"><${P}-content></${P}-content></div>`
+    })
+], PacemWindowElement);
+export { PacemWindowElement };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@pacem/pacem-ui",
+  "files": [
+    "dist/browser/*.*",
+    "dist/bundle/*.*",
+    "dist/esm/*.*",
+    "typings/*.*",
+    "README.md",
+    "LICENSE",
+    "NOTICE",
+    "package.json"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@pacem/pacem-foundation": "*",
+    "@pacem/pacem-core": "*"
+  },
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./typings/index.d.ts"
+    }
+  },
+  "version": "1.0.0-abel",
+  "author": {
+    "name": "Pacem",
+    "url": "https://pacem.it"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://js.pacem.it",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pacem-it/pacem.git"
+  }
+}