@pacem/pacem-ui 1.0.0-abel

package/dist/esm/blade.js

@@ -0,0 +1,31 @@
+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, Utils, PropertyConverters, Components } from '@pacem/pacem-core';
+// namespace Pacem.Components.UI {
+const OPEN_CSSCLASS = 'blade-open';
+let PacemBladeElement = class PacemBladeElement extends Components.PacemElement {
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (name === 'open') {
+            this._toggle(val);
+        }
+    }
+    _toggle(open = this.open) {
+        const fn = open ? Utils.addClass : Utils.removeClass;
+        fn(this, OPEN_CSSCLASS);
+        const eventName = open ? 'open' : 'close';
+        this.dispatchEvent(new Event(eventName));
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemBladeElement.prototype, "open", void 0);
+PacemBladeElement = __decorate([
+    CustomElement({ tagName: P + '-blade', shadow: true })
+], PacemBladeElement);
+export { PacemBladeElement };
+//}

package/dist/esm/bottom-sheet.js

@@ -0,0 +1,277 @@
+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, preventDefaultHandler, ViewChild, CustomElementUtils, UI } from '@pacem/pacem-core';
+// namespace Pacem.Components.UI {
+const OPEN_CSSCLASS = 'bottom-sheet-open';
+let PacemBottomSheetHandleElement = class PacemBottomSheetHandleElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._clickHandler = (evt) => {
+            const bs = this.#bottomSheet;
+            bs.open = !bs.open;
+        };
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._setIcon();
+        this._toggleHandle();
+        this.#bottomSheet = CustomElementUtils.findAncestorOfType(this, PacemBottomSheetElement);
+        this._bindToBottomSheet();
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (first) {
+            return;
+        }
+        switch (name) {
+            case 'iconGlyph':
+                this._setIcon(val);
+                break;
+            case 'disabled':
+                this._toggleHandle(val);
+                break;
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._clickHandler);
+        const bs = this.#bottomSheet;
+        if (!Utils.isNull(bs)) {
+            bs._setHandle(null);
+        }
+        this.#bottomSheet = null;
+        super.disconnectedCallback();
+    }
+    #bottomSheet;
+    _bindToBottomSheet() {
+        const bs = this.#bottomSheet;
+        if (Utils.isNull(bs)) {
+            return;
+        }
+        const id = Utils.isNullOrEmpty(this.id) ? (this.id = ('handle_' + Utils.uniqueCode())) : this.id;
+        bs._setHandle(this);
+        this.addEventListener('click', this._clickHandler, false);
+    }
+    _toggleHandle(disabled = this.disabled) {
+        this.style.pointerEvents = disabled ? 'none' : '';
+    }
+    _setIcon(icon = this.iconGlyph) {
+        const ic = this._icon;
+        if (!Utils.isNull(ic)) {
+            ic.icon = icon ?? 'horizontal_rule';
+        }
+    }
+};
+__decorate([
+    ViewChild(P + '-icon')
+], PacemBottomSheetHandleElement.prototype, "_icon", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemBottomSheetHandleElement.prototype, "iconGlyph", void 0);
+PacemBottomSheetHandleElement = __decorate([
+    CustomElement({
+        tagName: P + '-bottom-sheet-handle', shadow: false, template: `<div class="bottom-sheet-handle">
+        <${P}-icon class="icon-size icon-size-6"></${P}-icon>
+        </div>`
+    })
+], PacemBottomSheetHandleElement);
+export { PacemBottomSheetHandleElement };
+let PacemBottomSheetElement = class PacemBottomSheetElement extends Components.PacemElement {
+    constructor() {
+        super(...arguments);
+        this._resizeHandler = (evt) => {
+            this._rebuildSwiperSnaps();
+            this._setPosition();
+        };
+        this._panHandler = (e) => {
+            const snap = this._swiper.snaps.find(s => s != 0);
+            const { delta } = e.detail;
+            let pct = (snap < 0 ? delta.clamp(snap, 0) : delta.clamp(0, snap)) / snap;
+            if (snap > 0) {
+                pct = 1 - pct;
+            }
+            // console.log(`snap ${snap} - delta ${delta} - pct: ${pct * 100}%`);
+            const sqr = 6 * (pct ** 2);
+            this.style.backdropFilter = `blur(${sqr.toFixed(2)}px)`;
+        };
+        this._swipeHandler = (e) => {
+            preventDefaultHandler(e);
+            switch (e.type) {
+                case UI.SwipeEventType.SwipeAnimationEnd:
+                    this.style.backdropFilter = '';
+                    return;
+                case UI.SwipeEventType.SwipeUpAnimationEnd:
+                    this.open = true;
+                    break;
+                case UI.SwipeEventType.SwipeDownAnimationEnd:
+                    this.open = false;
+                    break;
+            }
+            this._setPosition();
+        };
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        if (first) {
+            return;
+        }
+        switch (name) {
+            case 'open':
+                this._toggle(val);
+                this._rebuildSwiperSnaps(val);
+                break;
+            case 'logger':
+                this._assignLogger(val);
+                break;
+            case 'disabled':
+                this._toggleSwiper(val);
+                break;
+        }
+    }
+    _toggleSwiper(disabled = this.disabled) {
+        const swiper = this._swiper;
+        if (!Utils.isNull(swiper)) {
+            swiper.disabled = disabled;
+        }
+    }
+    /** @internal */
+    _setHandle(handle) {
+        if (Utils.isNull(handle)) {
+            this._swiper.handleSelector = null;
+        }
+        else {
+            this._swiper.handleSelector = `#${handle.id}`;
+        }
+        this._handleResizer.target = handle;
+    }
+    _assignLogger(v = this.logger) {
+        this._swiper.logger = v;
+    }
+    _rebuildSwiperSnaps(open = this.open) {
+        const swiper = this._swiper;
+        const snap = this._getSnap(open);
+        swiper.snaps = [0, snap].sort();
+    }
+    viewActivatedCallback() {
+        super.viewActivatedCallback();
+        this._assignLogger();
+        this._resizer.addEventListener(Components.ResizeEventName, this._resizeHandler);
+        this._handleResizer.addEventListener(Components.ResizeEventName, this._resizeHandler);
+        const swiper = this._swiper;
+        swiper.addEventListener(UI.SwipeEventType.Pan, this._panHandler, false);
+        swiper.addEventListener(UI.SwipeEventType.SwipeAnimationEnd, this._swipeHandler, false);
+        swiper.addEventListener(UI.SwipeEventType.SwipeUpAnimationEnd, this._swipeHandler, false);
+        swiper.addEventListener(UI.SwipeEventType.SwipeDownAnimationEnd, this._swipeHandler, false);
+        this._toggle();
+        this._rebuildSwiperSnaps();
+        this._toggleSwiper();
+    }
+    disconnectedCallback() {
+        const resizer = this._resizer;
+        if (!Utils.isNull(resizer)) {
+            resizer.removeEventListener(Components.ResizeEventName, this._resizeHandler);
+        }
+        const handleResizer = this._handleResizer;
+        if (!Utils.isNull(resizer)) {
+            handleResizer.removeEventListener(Components.ResizeEventName, this._resizeHandler);
+        }
+        const swiper = this._swiper;
+        if (!Utils.isNull(swiper)) {
+            swiper.removeEventListener(UI.SwipeEventType.Pan, this._panHandler);
+            swiper.removeEventListener(UI.SwipeEventType.SwipeAnimationEnd, this._swipeHandler);
+            swiper.removeEventListener(UI.SwipeEventType.SwipeUpAnimationEnd, this._swipeHandler);
+            swiper.removeEventListener(UI.SwipeEventType.SwipeDownAnimationEnd, this._swipeHandler);
+        }
+        super.disconnectedCallback();
+    }
+    /**
+     * Snap (other than 0 := current position) given the current state.
+     * Anchor point for sheet is the top of the page, so snap is computed accordingly.
+     * @param ope
+     * @returns
+     */
+    _getSnap(open = this.open) {
+        const resizer = this._resizer;
+        const handleResizer = this._handleResizer;
+        if (Utils.isNull(resizer) || Utils.isNull(handleResizer)) {
+            return 0;
+        }
+        const { top: y } = Utils.naturalOffset(resizer.target), { top: hY } = Utils.naturalOffset(handleResizer.target);
+        const { height } = resizer.currentSize;
+        const { height: hHeight } = handleResizer.currentSize;
+        const { height: wHeight } = Utils.windowSize;
+        const openSnap /* target to open state */ = Math.max(parseInt(Utils.Css.getVariableValue(`--${PCSS}-layout-header-height`)), wHeight - (height ?? 0)), closedSnap /* target to closed state */ = (wHeight - ((y ?? 0) - (hY ?? 0) + (hHeight ?? 0)));
+        const sign = open ? 1 : -1;
+        return sign * Math.abs(openSnap - closedSnap);
+    }
+    /**
+     * Css transform to be applied to the sheet in order to have UI consistent with open state.
+     * Anchor point for sheet is the bottom of the page, so CSS transform is applied accordingly.
+     * @param open
+     * @returns
+     */
+    _getCssTransform(open = this.open) {
+        const resizer = this._resizer;
+        const handleResizer = this._handleResizer;
+        if (Utils.isNull(resizer) || Utils.isNull(handleResizer)) {
+            return '';
+        }
+        if (open) {
+            const retval = `translate3d(0, max(var(--${PCSS}-layout-header-height), calc(100vh - 100%)), 0)`;
+            return retval;
+        }
+        else {
+            const { top: y } = Utils.naturalOffset(resizer.target), { top: hY, height: hHeight } = Utils.naturalOffset(handleResizer.target);
+            const gap = (-(y ?? 0) + (hY ?? 0)) + (hHeight ?? 0);
+            const retval = `translate3d(0, calc(100vh - ${gap}px), 0)`;
+            // console.log(retval);
+            return retval;
+        }
+    }
+    _setPosition(open = this.open) {
+        const sheet = this._sheet;
+        const transform = this._getCssTransform(open);
+        sheet.style.transform = transform;
+        //this.style.setProperty(`--${PCSS}-bottom-sheet-transform`, transform);
+    }
+    _toggle(open = this.open) {
+        const fn = open ? Utils.addClass : Utils.removeClass;
+        fn(this, OPEN_CSSCLASS);
+        //this._sheet.style.animation = '';
+        this._sheet.style.transform = '';
+        //this.style.setProperty(`--${PCSS}-bottom-sheet-transform`, '');
+        const eventName = open ? 'open' : 'close';
+        this.dispatchEvent(new Event(eventName));
+    }
+};
+__decorate([
+    ViewChild(P + '-swipe')
+], PacemBottomSheetElement.prototype, "_swiper", void 0);
+__decorate([
+    ViewChild(P + '-resize')
+], PacemBottomSheetElement.prototype, "_resizer", void 0);
+__decorate([
+    ViewChild(P + '-resize[handle]')
+], PacemBottomSheetElement.prototype, "_handleResizer", void 0);
+__decorate([
+    ViewChild(P + '-panel.bottom-sheet')
+], PacemBottomSheetElement.prototype, "_sheet", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Boolean })
+], PacemBottomSheetElement.prototype, "open", void 0);
+PacemBottomSheetElement = __decorate([
+    CustomElement({
+        tagName: P + '-bottom-sheet', shadow: false /* css priority would be a mess otherwise */, template: `
+        <${P}-swipe direction="vertical" options='{ "bouncy": false }'></${P}-swipe>
+        <${P}-resize target="{{ ::_sheet }}"></${P}-resize>
+        <${P}-resize handle></${P}-resize>
+    <${P}-panel class="bottom-sheet" behaviors="{{ [::_swiper] }}">
+        <${P}-content></${P}-content>
+    </${P}-panel>`
+    })
+], PacemBottomSheetElement);
+export { PacemBottomSheetElement };
+//}

package/dist/esm/button.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, Utils, PropertyConverters, Components, CommandEvent } from '@pacem/pacem-core';
+import { DialogButton } from './dialog-abstractions';
+//namespace Pacem.Components.UI {
+let PacemButtonElement = class PacemButtonElement extends Components.PacemIterableElement {
+    constructor() {
+        super('button');
+    }
+    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 'iconGlyph':
+            // suppose ligatures enabled
+            case 'iconUrl':
+                // handle this via css attr(), considering that it's the proper way to access and modify pseudo::before content
+                this.dataset[name] = val;
+                break;
+        }
+    }
+    emit(evt) {
+        let fn = (ev) => {
+            super.emit(ev);
+            if (!ev.defaultPrevented) {
+                if (ev.type === 'click' && !Utils.isNullOrEmpty(this.commandName)) {
+                    this.dispatchEvent(new CommandEvent({ commandName: this.commandName, commandArgument: this.commandArgument }));
+                }
+                else {
+                    switch (ev.type) {
+                        case 'mousedown':
+                            if (evt.button === 0) {
+                                Utils.addClass(this, PCSS + '-active');
+                            }
+                            break;
+                        case 'keydown':
+                            if (ev.keyCode === 32 || ev.keyCode === 13) {
+                                evt.preventDefault();
+                                Utils.addClass(this, PCSS + '-active');
+                            }
+                            break;
+                        case 'blur':
+                        case 'mouseup':
+                            Utils.removeClass(this, PCSS + '-active');
+                            break;
+                        case 'keyup':
+                            if (ev.keyCode === 32 || ev.keyCode === 13) {
+                                this.click();
+                                Utils.removeClass(this, PCSS + '-active');
+                            }
+                            break;
+                    }
+                }
+            }
+        };
+        if (!this.disabled && evt.type === 'click' && !Utils.isNull(this.confirmationDialog)) {
+            this.confirmationDialog.open(this.confirmationMessage).then(r => {
+                if (r.button === DialogButton.Yes || r.button === DialogButton.Ok)
+                    fn(evt);
+            });
+        }
+        else if (!(evt instanceof MouseEvent) || evt.button === 0) {
+            fn(evt);
+        }
+    }
+};
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemButtonElement.prototype, "iconGlyph", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemButtonElement.prototype, "iconUrl", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemButtonElement.prototype, "commandName", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Json })
+], PacemButtonElement.prototype, "commandArgument", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.String })
+], PacemButtonElement.prototype, "confirmationMessage", void 0);
+__decorate([
+    Watch({ emit: false, converter: PropertyConverters.Element })
+], PacemButtonElement.prototype, "confirmationDialog", void 0);
+PacemButtonElement = __decorate([
+    CustomElement({
+        tagName: P + '-button'
+    })
+], PacemButtonElement);
+export { PacemButtonElement };
+//}

package/dist/esm/buttonset.js

@@ -0,0 +1,41 @@
+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, Components } from '@pacem/pacem-core';
+import { PacemButtonElement } from './button';
+//namespace Pacem.Components.UI {
+let PacemButtonsetElement = class PacemButtonsetElement extends Components.PacemIterativeElement {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!('tabindex' in this.attributes))
+            this.tabIndex = 0;
+    }
+    propertyChangedCallback(name, old, val, first) {
+        super.propertyChangedCallback(name, old, val, first);
+        switch (name) {
+            case 'index':
+                let ndx = 0;
+                for (var btn of this.items) {
+                    if (ndx == val) {
+                        btn.focus();
+                        break;
+                    }
+                    ndx++;
+                }
+                break;
+        }
+    }
+    validate(item) {
+        return item instanceof PacemButtonElement;
+    }
+};
+PacemButtonsetElement = __decorate([
+    CustomElement({
+        tagName: P + '-buttonset'
+    })
+], PacemButtonsetElement);
+export { PacemButtonsetElement };
+//}