@pacem/pacem-ui 1.0.0-abel

package/dist/esm/adapter.js

@@ -0,0 +1,360 @@
+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, Defaults, CustomElement, ViewChild, Watch, Utils, PropertyConverters, Debounce, avoidHandler, Throttle } from '@pacem/pacem-core';
+import { Components, UI } from '@pacem/pacem-core';
+const { PacemElement, RepeaterItemCreateEventName, ItemRegisterEventName, ItemUnregisterEventName } = Components;
+//namespace Pacem.Components.UI {
+export var AdapterOrientation;
+(function (AdapterOrientation) {
+    AdapterOrientation["Vertical"] = "vertical";
+    AdapterOrientation["Horizontal"] = "horizontal";
+})(AdapterOrientation || (AdapterOrientation = {}));
+export const AdapterPageButtonRefreshEventName = 'pagerefresh';
+export class AdapterPageButtonRefreshEvent extends CustomEvent {
+    constructor(args) {
+        super(AdapterPageButtonRefreshEventName, { detail: args, bubbles: false, cancelable: false });
+    }
+}
+let PacemAdapterElement = class PacemAdapterElement extends Components.PacemAdapter {
+    constructor() {
+        super(...arguments);
+        this._itemCreatedHandler = (evt) => {
+            const index = evt.detail.index;
+            this._pageMap.set(index, evt.detail.dom[0].firstElementChild);
+            this._fireAdapterPageRefreshCallback(index, evt.detail.item);
+        };
+        this._pageMap = new Map();
+        this.interactive = true;
+        /** Gets or sets whether swipe gesture is enabled for navigation (also depends on the 'interactive' flag being set to 'true') */
+        this.swipeEnabled = true;
+        this.loop = true;
+        this.labelCallback = (item, index) => (index + 1).toString();
+        this._itemRegisterHandler = (evt) => {
+            let item = evt.detail;
+            if (!Utils.isNull(this._swiper) && item instanceof PacemElement && item.behaviors.indexOf(this._swiper) == -1)
+                item.behaviors.push(this._swiper);
+        };
+        this._itemUnregisterHandler = (evt) => {
+            let item = evt.detail, index;
+            if (!Utils.isNull(this._swiper) && item instanceof PacemElement && (index = item.behaviors.indexOf(this._swiper)) >= 0)
+                item.behaviors.splice(index, 1);
+        };
+        this._keydownHandler = (evt) => {
+            if (!this.interactive) {
+                return;
+            }
+            switch (this.orientation) {
+                case AdapterOrientation.Vertical:
+                    switch (evt.keyCode) {
+                        case 40: // down
+                            this._next(evt);
+                            break;
+                        case 38: // up
+                            this._previous(evt);
+                            break;
+                    }
+                    break;
+                default:
+                    // horizontal
+                    switch (evt.keyCode) {
+                        case 39: // right
+                            this._next(evt);
+                            break;
+                        case 37: // left
+                            this._previous(evt);
+                            break;
+                    }
+                    break;
+            }
+        };
+    }
+    masterPropertyChangedCallback(name, old, val, first) {
+        super.masterPropertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'items':
+                this._syncViewWithItems();
+                break;
+            case 'index':
+                this._index = val;
+                break;
+        }
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._repeater.addEventListener(RepeaterItemCreateEventName, this._itemCreatedHandler, false);
+        this._syncViewWithItems();
+    }
+    disconnectedCallback() {
+        if (this._repeater) {
+            this._repeater.removeEventListener(RepeaterItemCreateEventName, this._itemCreatedHandler, false);
+        }
+        super.disconnectedCallback();
+    }
+    initializeCallback() {
+        super.initializeCallback();
+        this.addEventListener('keydown', this._keydownHandler, false);
+        const el = this.master;
+        //
+        if (!Utils.isNull(el)) {
+            const tab = this._previousTabIndex = el.tabIndex;
+            if (!tab || tab < 0)
+                el.tabIndex = 0;
+            el.addEventListener('keydown', this._keydownHandler, false);
+            el.addEventListener(ItemRegisterEventName, this._itemRegisterHandler, false);
+            el.addEventListener(ItemUnregisterEventName, this._itemUnregisterHandler, false);
+        }
+        //
+        this._syncViewWithItems();
+    }
+    destroyCallback() {
+        this.removeEventListener('keydown', this._keydownHandler, false);
+        const el = this.master;
+        if (!Utils.isNull(el)) {
+            el.removeEventListener('keydown', this._keydownHandler, false);
+            el.removeEventListener(ItemRegisterEventName, this._itemRegisterHandler, false);
+            el.removeEventListener(ItemUnregisterEventName, this._itemUnregisterHandler, false);
+            if (!Utils.isNullOrEmpty(el.items)) {
+                for (let item of el.items) {
+                    const behaviors = item.behaviors, ndx = behaviors.indexOf(this._swiper);
+                    if (ndx >= 0) {
+                        behaviors.splice(ndx, 1);
+                    }
+                }
+            }
+            el.tabIndex = this._previousTabIndex;
+        }
+        super.destroyCallback();
+    }
+    itemPropertyChangedCallback(index, name, old, val, first) {
+        super.itemPropertyChangedCallback(index, name, old, val, first);
+        // tick overall version
+        this._tickVersion();
+        this._fireAdapterPageRefreshCallback(index);
+    }
+    _fireAdapterPageRefreshCallback(index, item) {
+        item = item || this.master.items[index];
+        var hide = item.hide || false, disable = item.disabled || false, caption = this._labelCallback(item, index);
+        const evt = new AdapterPageButtonRefreshEvent({ index: index, hide: hide, disabled: disable, content: caption });
+        this.dispatchEvent(evt);
+        // receive/accept changes
+        hide = this._isHidden(item, index, evt.detail.hide);
+        disable = this._isDisabled(item, index, evt.detail.disabled);
+        caption = evt.detail.content;
+        // pick target button
+        const pagers = this._pageMap;
+        if (pagers.has(index)) {
+            const pager = pagers.get(index), span = pager.firstElementChild;
+            let fn = (e) => {
+                if (e) {
+                    pager.removeEventListener('load', fn, false);
+                }
+                pager.hide = hide;
+                pager.disabled = disable;
+                span.content = caption;
+            };
+            // *careful here*: TODO: TO BE STUDIED
+            // if setting the property before it's connected
+            // the @Watch configuration and the get+set injection gets lost!
+            if (pager.isReady) {
+                // does not work for properties(?)...
+                fn();
+            }
+            else {
+                pager.addEventListener('load', fn, false);
+            }
+        }
+    }
+    _tickVersion() {
+        this._v = Date.now();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'interval':
+                this._resetTimer(val);
+                break;
+            case 'swipeEnabled':
+                this._swiper.disabled = !val || !this.interactive;
+                break;
+            case 'interactive':
+                this.hidden = !val;
+                this._swiper.disabled = !val || !this.swipeEnabled;
+                break;
+            case 'pausable':
+                if (val == true)
+                    this._liPause.removeAttribute('hidden');
+                else
+                    this._liPause.setAttribute('hidden', 'hidden');
+                break;
+        }
+    }
+    _syncViewWithItems() {
+        if (!this.isReady
+            || Utils.isNull(this.master)
+            || Utils.isNull(this._prevBtn)
+            || Utils.isNull(this._nextBtn)
+            || Utils.isNull(this._repeater))
+            return;
+        var val = this.master.items;
+        this._prevBtn.hide = this._nextBtn.hide = this._panel.hide = !(val && val.length > 1);
+        this._panel.hide = Utils.isNullOrEmpty(val);
+        this._repeater.datasource = val;
+        this._index = this.master.index;
+        if (!Utils.isNullOrEmpty(val)) {
+            for (let item of val) {
+                if (item instanceof PacemElement && item.behaviors.indexOf(this._swiper) == -1)
+                    item.behaviors.push(this._swiper);
+            }
+        }
+    }
+    _toggle(evt) {
+        const p = this._paused = !this._paused;
+        if (p) {
+            avoidHandler(evt);
+            this._resetTimer(0);
+        }
+        else {
+            this._next(evt);
+        }
+    }
+    _resetTimer(val) {
+        clearInterval(this._handle);
+        if (val > 0)
+            this._handle = window.setInterval(() => {
+                super.next();
+            }, val);
+    }
+    _next(evt) {
+        if (evt.type !== UI.SwipeEventType.SwipeLeft)
+            avoidHandler(evt);
+        this._resetTimer(this.interval);
+        super.next(this.loop);
+    }
+    _previous(evt) {
+        if (evt.type !== UI.SwipeEventType.SwipeRight)
+            avoidHandler(evt);
+        this._resetTimer(this.interval);
+        super.previous(this.loop);
+    }
+    _select(ndx, evt) {
+        avoidHandler(evt);
+        this._resetTimer(this.interval);
+        if (!this.deselectable || ndx !== this._index) {
+            super.select(ndx);
+        }
+        else {
+            this.master.index = this._index = -1;
+        }
+    }
+    _isDisabled(item, index, disabled, v) {
+        return this._disableOrHide(item, index, disabled);
+    }
+    _isHidden(item, index, hide, v) {
+        return this._disableOrHide(item, index, hide);
+    }
+    _disableOrHide(item, index, disabledOrHidden) {
+        const retval = item instanceof PacemElement && disabledOrHidden === true;
+        if ((this._index === -1 && retval === false) || (retval === true && index === this._index)) {
+            if (this.deselectable) {
+                this.master.index = this._index = -1;
+            }
+            else {
+                super.select(index);
+            }
+        }
+        return retval;
+    }
+    _labelCallback(item, index, v) {
+        return this.labelCallback(item, index);
+    }
+};
+__decorate([
+    ViewChild(P + '-repeater')
+], PacemAdapterElement.prototype, "_repeater", void 0);
+__decorate([
+    ViewChild(P + '-button.' + PCSS + '-adapter-previous')
+], PacemAdapterElement.prototype, "_prevBtn", void 0);
+__decorate([
+    ViewChild(P + '-button.' + PCSS + '-adapter-next')
+], PacemAdapterElement.prototype, "_nextBtn", void 0);
+__decorate([
+    ViewChild(P + '-panel')
+], PacemAdapterElement.prototype, "_panel", void 0);
+__decorate([
+    ViewChild(P + '-swipe')
+], PacemAdapterElement.prototype, "_swiper", void 0);
+__decorate([
+    ViewChild('.' + PCSS + '-adapter-dashboard > li[pacem]')
+], PacemAdapterElement.prototype, "_liPause", void 0);
+__decorate([
+    Debounce()
+], PacemAdapterElement.prototype, "_tickVersion", null);
+__decorate([
+    Watch({ converter: PropertyConverters.Boolean })
+], PacemAdapterElement.prototype, "pausable", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Number })
+], PacemAdapterElement.prototype, "interval", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemAdapterElement.prototype, "orientation", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemAdapterElement.prototype, "interactive", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemAdapterElement.prototype, "swipeEnabled", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemAdapterElement.prototype, "deselectable", void 0);
+__decorate([
+    Watch({ emit: false, reflectBack: true, converter: PropertyConverters.Boolean })
+], PacemAdapterElement.prototype, "loop", void 0);
+__decorate([
+    Watch({ emit: false })
+], PacemAdapterElement.prototype, "labelCallback", void 0);
+__decorate([
+    Watch()
+], PacemAdapterElement.prototype, "_index", void 0);
+__decorate([
+    Watch()
+], PacemAdapterElement.prototype, "_paused", void 0);
+__decorate([
+    Watch()
+], PacemAdapterElement.prototype, "_v", void 0);
+__decorate([
+    Throttle(333)
+], PacemAdapterElement.prototype, "_next", null);
+__decorate([
+    Throttle(333)
+], PacemAdapterElement.prototype, "_previous", null);
+PacemAdapterElement = __decorate([
+    CustomElement({
+        tagName: P + '-adapter', shadow: Defaults.USE_SHADOW_ROOT,
+        template: `<${P}-button class="${PCSS}-adapter-previous" on-click=":host._previous($event)">&lt;</${P}-button>
+    <${P}-button class="${PCSS}-adapter-next" on-click=":host._next($event)">&gt;</${P}-button>
+    <${P}-swipe on-swipeleft=":host._next($event)" on-swiperight=":host._previous($event)"></${P}-swipe>
+    <${P}-panel tabindex="0">
+    <${P}-repeater>
+    <ol class="${PCSS}-adapter-dashboard">
+        <li pacem hidden>
+            <${P}-button class="${PCSS}-play-pause"
+                          css-class="{{ {'paused' : :host._paused, 'playing': !:host._paused } }}" 
+                          disabled="{{ !:host.pausable }}" on-click=":host._toggle($event)"></${P}-button>
+        </li>
+        <template>
+        <li>
+            <${P}-button on-click=":host._select(^index, $event)" class="${PCSS}-adapter-page" css-class="{{ { '${PCSS}-adapter-active': ^index === :host._index } }}">
+                <${P}-span></${P}-span>
+            </${P}-button>
+        </li>
+        </template>
+    </ol></${P}-repeater></${P}-panel>`
+    })
+], PacemAdapterElement);
+export { PacemAdapterElement };
+//}

package/dist/esm/anchor.js

@@ -0,0 +1,149 @@
+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, PropertyChangeEvent } from '@pacem/pacem-core';
+//namespace Pacem.Components.UI {
+// TODO: shadow-ize and reuse native <a> element.
+let PacemAnchorElement = class PacemAnchorElement extends Components.PacemElement {
+    constructor() {
+        super('link');
+        this._fetching = false;
+    }
+    ///
+    get fetching() {
+        return this._fetching;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('tab-order')) {
+            this.tabOrder = 0;
+        }
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'target':
+                (Utils.isNullOrEmpty(val) ? Utils.removeClass : Utils.addClass)(this, 'a-target');
+                break;
+            case 'href':
+                (Utils.isNull(val) ? Utils.removeClass : Utils.addClass)(this, 'a-url');
+                break;
+            case 'download':
+                (Utils.isNullOrEmpty(val) ? Utils.removeClass : Utils.addClass)(this, 'a-download');
+                break;
+        }
+    }
+    emit(evt) {
+        super.emit(evt);
+        if (this.disabled) {
+            return;
+        }
+        switch (evt.type) {
+            case 'mousedown':
+                Utils.addClass(this, PCSS + '-active');
+                break;
+            case 'keydown':
+                if (evt.key === 'Enter') {
+                    evt.preventDefault();
+                    Utils.addClass(this, PCSS + '-active');
+                }
+                break;
+            case 'blur':
+            case 'mouseup':
+                Utils.removeClass(this, PCSS + '-active');
+                break;
+            case 'keyup':
+                if (evt.key === 'Enter') {
+                    this.click();
+                    Utils.removeClass(this, PCSS + '-active');
+                }
+                break;
+        }
+        const href = this.href, target = this.target, router = this.router, filename = this.download;
+        const url = () => {
+            return Utils.isNull(router) ? href : Utils.URIs.format(href, router.state);
+        };
+        if (!Utils.isNull(href) && !evt.defaultPrevented) {
+            if ((evt.type === 'click' && evt.ctrlKey) || (evt.type === 'mousedown' && evt.button === 1)) {
+                // 1. middle-click or ctrl+click
+                window.open(url(), '_blank');
+            }
+            else if (evt.type === 'click') {
+                // 2. download
+                if (filename === true) {
+                    this._download(url());
+                }
+                else if (typeof filename === 'string' && !Utils.isNullOrEmpty(filename)) {
+                    this._download(url(), filename);
+                }
+                // 3. targeting other window
+                else if (!Utils.isNullOrEmpty(target)) {
+                    window.open(url(), target);
+                }
+                // 4. routed navigation
+                else if (!Utils.isNull(router)) {
+                    // old implementation memento: Pacem.preventDefaultHandler(evt);
+                    // trigger router `navigate()`
+                    router.path = href;
+                }
+                // 5. standard behavior
+                else {
+                    location.assign(href);
+                }
+            }
+        }
+    }
+    async _download(url, filename) {
+        this.dispatchEvent(new PropertyChangeEvent({
+            propertyName: 'fetching', oldValue: this._fetching, currentValue: this._fetching = true
+        }));
+        try {
+            await Utils.download(url, { credentials: this.fetchCredentials, headers: this.fetchHeaders, filename: filename });
+        }
+        finally {
+            this.dispatchEvent(new PropertyChangeEvent({
+                propertyName: 'fetching', oldValue: this._fetching, currentValue: this._fetching = false
+            }));
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemAnchorElement.prototype, "fetchCredentials", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemAnchorElement.prototype, "fetchHeaders", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemAnchorElement.prototype, "href", void 0);
+__decorate([
+    Watch({ reflectBack: true, converter: PropertyConverters.String })
+], PacemAnchorElement.prototype, "target", void 0);
+__decorate([
+    Watch({
+        reflectBack: false, converter: {
+            convert: (attr) => {
+                switch (attr) {
+                    case 'true':
+                        return true;
+                    case 'false':
+                        return false;
+                    default:
+                        return attr;
+                }
+            }, convertBack: (prop) => prop
+        }
+    })
+], PacemAnchorElement.prototype, "download", void 0);
+__decorate([
+    Watch({ reflectBack: false, converter: PropertyConverters.Element })
+], PacemAnchorElement.prototype, "router", void 0);
+PacemAnchorElement = __decorate([
+    CustomElement({
+        tagName: P + '-a'
+    })
+], PacemAnchorElement);
+export { PacemAnchorElement };