@pacem/pacem-ui 1.0.0-abel

package/dist/esm/infinite-scroller.js

@@ -0,0 +1,137 @@
+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, Debounce, CustomElement, Watch, Utils, PropertyConverters, PacemEventTarget } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+let PacemInfiniteScrollerElement = class PacemInfiniteScrollerElement extends PacemEventTarget {
+    constructor() {
+        super();
+        this._scrollDelegate = () => this._doScroll();
+        this._enabled = true;
+        this._viewportHeight = 0;
+        this._innerHeight = 0;
+        this._isDocument = false;
+        this._container = null;
+        this._viewport = null;
+        this._scroller = null;
+        this._bottomGap = 10;
+        this._container = this;
+        this._viewport = this;
+        this._scroller = this;
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this.setInfiniteScrollContainer(this._container);
+    }
+    disconnectedCallback() {
+        if (!Utils.isNull(this._scroller))
+            this._scroller.removeEventListener('scroll', this._scrollDelegate, false);
+        super.disconnectedCallback();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'container':
+                this.setInfiniteScrollContainer(val);
+                break;
+            case 'disabled':
+                if (this._enabled = !val)
+                    this._doScroll();
+                break;
+            case 'threshold':
+                this._bottomGap = val || 0;
+                break;
+        }
+    }
+    setInfiniteScrollContainer(v = '$document') {
+        var cont = v;
+        var isDoc = this._isDocument = cont === '$document' || cont === document.body || cont === document.documentElement;
+        this._container = isDoc ? (document.body || document.documentElement) : ((typeof v === 'string') ?
+            document.querySelector(cont)
+            :
+                cont);
+        this._viewport = isDoc ? window : this._container;
+        if (this._scroller)
+            this._scroller.removeEventListener('scroll', this._scrollDelegate, false);
+        this._scroller = isDoc ? window.document : this._container;
+        this._scroller.addEventListener('scroll', this._scrollDelegate, false);
+        if (this._enabled)
+            this._doScroll();
+    }
+    //ngOnChanges(changes: SimpleChanges) {
+    //}
+    _emitFetchMore() {
+        /**
+         * on-fetchmore => must toggle `enabled` while fetching...
+         */
+        var evt = new CustomEvent('fetchmore');
+        this.dispatchEvent(evt);
+    }
+    _doScroll() {
+        if (!this._enabled)
+            return;
+        if (!this._computeHeight()) {
+            var scrollTop = this._scroller instanceof Document ? window.pageYOffset : this._scroller.scrollTop;
+            var viewportHeight = this._viewportHeight, innerHeight = this._innerHeight;
+            var threshold = innerHeight - (scrollTop + viewportHeight);
+            if (threshold < this._bottomGap /* pixels */
+                || innerHeight <= viewportHeight) {
+                // fire fetchMore() 
+                this._emitFetchMore();
+                window.requestAnimationFrame(() => {
+                    if (this._enabled)
+                        this._doScroll();
+                });
+            } //else computeHeight();
+        }
+        else
+            this._doScroll();
+    }
+    _computeHeight() {
+        if (!this._container)
+            return;
+        var cont = this._container;
+        var topOffset = Number.MAX_VALUE, bottomOffset = 0, totalHeight = 0, _innerHeight;
+        if (this._isDocument) {
+            var d = cont;
+            _innerHeight = Math.max(d.scrollHeight, d.offsetHeight, d.clientHeight);
+        }
+        else {
+            for (var i = 0; i < cont.children.length; i++) {
+                var e = cont.children.item(i);
+                var eTopOffset = e.offsetTop, eHeight = e.offsetHeight, eBottomOffset = eTopOffset + eHeight;
+                totalHeight += eHeight;
+                if (eTopOffset < topOffset) {
+                    topOffset = eTopOffset;
+                }
+                if (eBottomOffset > bottomOffset) {
+                    bottomOffset = eBottomOffset;
+                }
+            }
+            _innerHeight = Math.round(bottomOffset - topOffset);
+        }
+        var _viewportHeight = this._viewport instanceof Window ? Utils.windowSize.height : this._viewport.offsetHeight;
+        if (_innerHeight != this._innerHeight || _viewportHeight != this._viewportHeight) {
+            this._innerHeight = _innerHeight;
+            this._viewportHeight = _viewportHeight;
+            return true;
+        }
+        return false;
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemInfiniteScrollerElement.prototype, "container", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.Number })
+], PacemInfiniteScrollerElement.prototype, "threshold", void 0);
+__decorate([
+    Debounce(100)
+], PacemInfiniteScrollerElement.prototype, "_doScroll", null);
+PacemInfiniteScrollerElement = __decorate([
+    CustomElement({ tagName: P + '-infinite-scroller' })
+], PacemInfiniteScrollerElement);
+export { PacemInfiniteScrollerElement };

package/dist/esm/iterative.js

@@ -0,0 +1,45 @@
+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 { Watch, Utils, PropertyConverters, Components } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+export class PacemAdaptedIterativeElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this.index = 0;
+    }
+    isCloseTo(ndx, focusndx) {
+        if (Utils.isNull(this.datasource) || this.datasource.length == 0)
+            return false;
+        return /*this.adapter.isClose(ndx) ||*/ this._isCloseToCore(ndx, focusndx, this.datasource.length);
+    }
+    isPrevious(ndx, focusndx) {
+        if (Utils.isNull(this.datasource) || this.datasource.length == 0)
+            return false;
+        return /*this.adapter.isPrevious(ndx) ||*/ this._isPreviousCore(ndx, focusndx, this.datasource.length);
+    }
+    isNext(ndx, focusndx) {
+        if (Utils.isNull(this.datasource) || this.datasource.length == 0)
+            return false;
+        return /*this.adapter.isNext(ndx) ||*/ this._isNextCore(ndx, focusndx, this.datasource.length);
+    }
+    _isNextCore(ndx, focusndx, count) {
+        return ((focusndx + 1) % count) === ndx;
+    }
+    _isPreviousCore(ndx, focusndx, count) {
+        return ((focusndx - 1 + count) % count) === ndx;
+    }
+    _isCloseToCore(ndx, focusndx, count) {
+        return (((focusndx + count) % count) == ((ndx + count) % count))
+            || this._isNextCore(ndx, focusndx, count) || this._isPreviousCore(ndx, focusndx, count);
+    }
+}
+__decorate([
+    Watch({ converter: PropertyConverters.Number })
+], PacemAdaptedIterativeElement.prototype, "index", void 0);
+__decorate([
+    Watch()
+], PacemAdaptedIterativeElement.prototype, "datasource", void 0);

package/dist/esm/lightbox-abstractions.js

@@ -0,0 +1,6 @@
+//namespace Pacem.Components.UI {
+export var LightboxBehavior;
+(function (LightboxBehavior) {
+    LightboxBehavior["ClickOutsideClose"] = "clickOutsideClose";
+    LightboxBehavior["ExplicitClose"] = "explicitClose";
+})(LightboxBehavior || (LightboxBehavior = {}));

package/dist/esm/lightbox.js

@@ -0,0 +1,203 @@
+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, Utils, PropertyConverters, Components, stopPropagationHandler, ViewChild, avoidHandler } from '@pacem/pacem-core';
+import { LightboxBehavior } from './lightbox-abstractions';
+import { PacemButtonElement } from './button';
+//namespace Pacem.Components.UI {
+// TODO: shadow-ize lightbox (slots, parts, ...) in the next version 0.5x.x.
+let PacemLightboxElement = class PacemLightboxElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._keyupHandler = (evt) => {
+            if (evt.keyCode === 27 /* ESC */ && this.show && !this.modal) {
+                this.show = false;
+            }
+        };
+        this._wrapperMousedownHandler = (evt) => {
+            if (this.modal || this.behavior === LightboxBehavior.ExplicitClose) {
+                stopPropagationHandler(evt);
+            }
+            else {
+                this.show = false;
+            }
+        };
+        this._slotchangeHandler = (evt) => {
+            this._resetLayout();
+        };
+        this._closeHandler = (evt) => {
+            this._close(evt);
+        };
+    }
+    _resetLayout() {
+        this._disposeButton();
+        const btn = this._ensureButton();
+        if (!Utils.isNull(btn)) {
+            btn.addEventListener('click', this._closeHandler, false);
+        }
+    }
+    _toggleCloseVisibility() {
+        const closer = this._closeWrapper;
+        if (!Utils.isNull(closer)) {
+            closer.hidden = this.modal;
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._toggleCloseVisibility();
+        var wrapper = this._wrapperElement;
+        var container = this._container;
+        wrapper.addEventListener('mousedown', this._wrapperMousedownHandler, false);
+        container.addEventListener('mousedown', stopPropagationHandler, false);
+        document.body.removeEventListener('scroll', avoidHandler, true);
+        window.addEventListener('keyup', this._keyupHandler, false);
+        this._resetLayout();
+        this._slot.addEventListener('slotchange', this._slotchangeHandler, false);
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (first) {
+            return;
+        }
+        switch (name) {
+            case 'show':
+                const wrap = this._wrapperElement;
+                const container = this._container;
+                if (!!val) {
+                    this.inert = false;
+                    this.dispatchEvent(new Event('open', { bubbles: true, cancelable: false }));
+                    wrap.style.display = '';
+                    wrap.hidden = false;
+                    window.requestAnimationFrame(() => {
+                        Utils.addPart(wrap, 'lightbox-wrapper-shown');
+                        Utils.addPart(container, 'lightbox-shown');
+                    });
+                    var scroller = this.querySelector('.' + PCSS + '-scrollable');
+                    if (scroller) {
+                        window.requestAnimationFrame(() => scroller.scrollTop = 0);
+                    }
+                }
+                else if (!!old) {
+                    this.inert = true;
+                    this.dispatchEvent(new Event('close', { bubbles: true, cancelable: false }));
+                    //
+                    Utils.removePart(wrap, 'lightbox-wrapper-shown');
+                    Utils.removePart(container, 'lightbox-shown');
+                    Utils.addAnimationEndCallback(wrap, (e) => {
+                        e.hidden = true;
+                        e.style.display = 'none';
+                    }, 500);
+                }
+                break;
+            case 'modal':
+                this._toggleCloseVisibility();
+                break;
+        }
+    }
+    disconnectedCallback() {
+        if (this.show) {
+            this._close();
+        }
+        var wrapper = this._wrapperElement;
+        var container = this._container;
+        document.body.removeEventListener('scroll', avoidHandler, true);
+        if (!Utils.isNull(wrapper)) {
+            wrapper.removeEventListener('mousedown', this._wrapperMousedownHandler, false);
+        }
+        if (!Utils.isNull(container)) {
+            container.removeEventListener('mousedown', stopPropagationHandler, false);
+        }
+        window.removeEventListener('keyup', this._keyupHandler, false);
+        this._disposeButton();
+        this._disposeSlot();
+        super.disconnectedCallback();
+    }
+    _disposeButton() {
+        this.#btn?.removeEventListener('click', this._closeHandler);
+        this.#btn = null;
+    }
+    _disposeSlot() {
+        this._slot?.removeEventListener('slotchange', this._slotchangeHandler, false);
+    }
+    _close(evt) {
+        if (!Utils.isNull(evt)) {
+            avoidHandler(evt);
+        }
+        this.show = false;
+    }
+    #btn;
+    _ensureButton() {
+        if (!Utils.isNull(this.#btn)) {
+            return this.#btn;
+        }
+        const btnSlot = this._slot;
+        if (Utils.isNull(btnSlot)) {
+            return null;
+        }
+        const found = this._lookForAButton();
+        if (!Utils.isNull(found)) {
+            return this.#btn = found;
+        }
+        const retval = new PacemButtonElement();
+        retval.setAttribute('slot', 'close');
+        retval.className = `${PCSS}-margin margin-0 ${PCSS}-rise rise--2 button-circle circle-smaller`;
+        retval.iconGlyph = 'close';
+        this.appendChild(retval);
+        return this.#btn = retval;
+    }
+    _lookForAButton() {
+        const btnSlot = this._slot;
+        if (Utils.isNull(btnSlot)) {
+            return null;
+        }
+        const buttons = btnSlot.assignedElements({ flatten: true });
+        if (Utils.isNullOrEmpty(buttons)) {
+            return null;
+        }
+        return buttons[0];
+    }
+};
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemLightboxElement.prototype, "show", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemLightboxElement.prototype, "modal", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemLightboxElement.prototype, "behavior", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-lightbox-wrapper')
+], PacemLightboxElement.prototype, "_wrapperElement", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-lightbox')
+], PacemLightboxElement.prototype, "_container", void 0);
+__decorate([
+    ViewChild('slot[name=close]')
+], PacemLightboxElement.prototype, "_slot", void 0);
+__decorate([
+    ViewChild('div[part=close]')
+], PacemLightboxElement.prototype, "_closeWrapper", void 0);
+PacemLightboxElement = __decorate([
+    CustomElement({
+        tagName: P + '-lightbox',
+        shadow: true,
+        template: `<div class="${PCSS}-lightbox-wrapper" part="lightbox-wrapper" hidden>
+        <div class="${PCSS}-lightbox" part="lightbox">
+            <div part="top"><slot name="top"></slot></div>
+            <div class="${PCSS}-scrollable" part="scrollable">
+                <slot></slot>
+            </div>
+            <div part="bottom"><slot name="bottom"></slot></div>
+            <div part="close">
+                <slot name="close"></slot>
+            </div>
+        </div>
+</div>`
+    })
+], PacemLightboxElement);
+export { PacemLightboxElement };
+//}

package/dist/esm/loader.js

@@ -0,0 +1,100 @@
+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, Utils, PropertyConverters, Components, Defaults } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+export var LoaderType;
+(function (LoaderType) {
+    LoaderType["Spinner"] = "spin";
+    LoaderType["Pacem"] = "pacem";
+    LoaderType["Custom"] = "custom";
+})(LoaderType || (LoaderType = {}));
+;
+let PacemLoaderElement = class PacemLoaderElement extends Components.PacemElement {
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        var id = '_' + Utils.uniqueCode();
+        this._svgSpinner.innerHTML = `<defs>
+                    <mask id="hole${id}">
+                        <rect width="100%" height="100%" fill="white" />
+                        <circle cx="36" cy="36" r="12"></circle>
+                        <path d="M18,0 L32,16 H40 L54,0 Z" fill="#000"></path>
+                        <g transform="rotate(120,36,36)">
+                            <path d="M18,0 L32,16 H40 L54,0 Z" fill="#000"></path>
+                        </g>
+                    </mask>
+                </defs>
+
+                <circle class="circle1" cx="36" cy="36" r="34" stroke-width="4" fill="none"></circle>
+                <g class="gear">
+                    <circle cx="36" cy="36" r="25" mask="url(#hole${id})"></circle>
+                </g>
+                <circle class="circle2" cx="36" cy="36" r="8" stroke-width="2" fill="none"></circle>
+
+                <g class="bounds">
+                    <path d="M8,0 H0 V8 M64,0 H71 V8 M71,63 V71 H64 M8,71 H0 V63" stroke-width="2"></path>
+                </g>`;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (!Utils.isNull(this._container)) {
+            switch (name) {
+                case 'active':
+                case 'disabled':
+                    if (this.active === true && !this.disabled) {
+                        Utils.addClass(this._container, 'active');
+                    }
+                    else {
+                        Utils.removeClass(this._container, 'active');
+                    }
+                    break;
+                case 'type':
+                    this._svgSpinner.setAttribute('hidden', 'hidden');
+                    this._spinner.setAttribute('hidden', 'hidden');
+                    switch (val) {
+                        case LoaderType.Pacem:
+                            this._svgSpinner.removeAttribute('hidden');
+                            break;
+                        default:
+                            this._spinner.removeAttribute('hidden');
+                            break;
+                    }
+                    break;
+            }
+        }
+    }
+};
+__decorate([
+    ViewChild('div.' + PCSS + '-spinner')
+], PacemLoaderElement.prototype, "_spinner", void 0);
+__decorate([
+    ViewChild('div.' + PCSS + '-loader')
+], PacemLoaderElement.prototype, "_container", void 0);
+__decorate([
+    ViewChild('svg')
+], PacemLoaderElement.prototype, "_svgSpinner", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemLoaderElement.prototype, "active", void 0);
+__decorate([
+    Watch({ converter: PropertyConverters.String })
+], PacemLoaderElement.prototype, "type", void 0);
+PacemLoaderElement = __decorate([
+    CustomElement({
+        tagName: P + '-loader', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<div class="${PCSS}-loader" pacem>
+            <div class="${PCSS}-spinner" pacem>
+                <div></div>
+                <div></div>
+            </div>
+            <svg class="${PCSS}-spinner" pacem hidden xmlns="http://www.w3.org/2000/svg" 
+                 xmlns:xlink="http://www.w3.org/1999/xlink"
+                 viewBox="-18,-18,108,108" preserveAspectRatio="xMidYMid">
+            </svg>
+        </div>`
+    })
+], PacemLoaderElement);
+export { PacemLoaderElement };