@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

package/dist/esm/ds-modal-body.entry.js

@@ -0,0 +1,32 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+
+const modalBodyHostCss = () => `:host{display:contents}`;
+
+const ModalBody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'body';
+    }
+    render() {
+        return (h(Host, { key: '2e1c21ff62b36dc89b1589174b3ede2979eeb384' }, h("slot", { key: 'd1bb0237d1ac252c645da88b7375500b01c14ae1' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('modal-body'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], ModalBody.prototype, "createLogger", null);
+ModalBody.style = modalBodyHostCss();
+
+export { ModalBody as ds_modal_body };

package/dist/esm/ds-modal-header.entry.js

@@ -0,0 +1,29 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'header';
+    }
+    render() {
+        return (h(Host, { key: '05b088ad50f8c43b72b855cb240d0c2ca2b9466c', style: { display: 'contents' } }, h("slot", { key: '729c1b5a1891548bb0fe4436ae3d04c7cc7f1c10' })));
+    }
+    get el() { return getElement(this); }
+};
+__decorate([
+    Logger('modal-header'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], ModalHeader.prototype, "createLogger", null);
+
+export { ModalHeader as ds_modal_header };

package/dist/esm/ds-modal.entry.js

@@ -0,0 +1,199 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { B as registerInstance, I as createEvent, w as wait, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { S as ScrollHandler } from './scroll-CsH7NHo5.js';
+import { T as Type } from './type-DzkhLOG_.js';
+import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import './create-validator-decorator-DovxquEu.js';
+import './config.utils-D9o7rffC.js';
+
+const modalHostCss = () => `:host{--_modal-background:var(--modal-background, var(--mod-modal-background, var(--ds-modal-color-base-background)));--_modal-radius:var(--modal-radius, var(--mod-modal-radius, var(--ds-modal-radius-base)));--_modal-backdrop-opacity:var(--modal-backdrop-opacity, var(--mod-modal-backdrop-opacity, var(--ds-backdrop-opacity)));--_modal-heading-family:var(--modal-heading-family, var(--mod-modal-heading-family, var(--ds-modal-heading-family)));--_modal-heading-weight:var(--modal-heading-weight, var(--mod-modal-heading-weight, var(--ds-modal-heading-weight)));--_modal-heading-size:var(--modal-heading-size, var(--mod-modal-heading-size, var(--ds-modal-heading-size-device)));--_modal-heading-line-height:var(--modal-heading-line-height, var(--mod-modal-heading-line-height, var(--ds-modal-heading-line-height)));--_modal-width:var(--modal-width, var(--mod-modal-width, var(--ds-modal-width)));display:contents}:host dialog{all:unset;-webkit-box-sizing:border-box;box-sizing:border-box;position:fixed;top:50%;left:50%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:calc(100% - 1rem);max-height:calc(100vh - 1rem);overflow:hidden;background:var(--_modal-background);border-radius:var(--_modal-radius);padding:1rem;opacity:0;-webkit-transform:translate(-50%, calc(-50% - 1rem));transform:translate(-50%, calc(-50% - 1rem));pointer-events:none}@media screen and (min-width: 769px){:host dialog{width:var(--_modal-width);max-height:calc(100vh - 6rem);padding:1.5rem}}@media screen and (min-width: 1024px){:host dialog{padding:2.5rem}}:host(.is-open) dialog{opacity:1;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);pointer-events:auto}:host(.is-animated) dialog{-webkit-transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,-webkit-transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease;transition:opacity 300ms ease,transform 300ms ease,-webkit-transform 300ms ease}@media (prefers-reduced-motion: reduce){:host dialog{-webkit-transition:none !important;transition:none !important}}:host dialog::-webkit-backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host dialog::-ms-backdrop{background-color:rgba(0,7,57,.5);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host dialog::backdrop{background-color:rgba(0,7,57,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:var(--_modal-backdrop-opacity)}:host(.is-fullscreen) dialog{top:0;left:0;width:100%;max-height:100%;height:100%;border-radius:0;-webkit-transform:translateY(1rem);transform:translateY(1rem)}:host(.is-fullscreen.is-open) dialog{-webkit-transform:translateY(0);transform:translateY(0)}:host ds-close{position:absolute;top:1rem;right:1rem}@media screen and (min-width: 769px){:host ds-close{top:1.5rem;right:1.5rem}}@media screen and (min-width: 1024px){:host ds-close{top:2.5rem;right:2.5rem}}:host #modal-title{padding-right:3rem;margin:0 0 1rem;font-family:var(--_modal-heading-family);font-weight:var(--_modal-heading-weight);font-size:var(--_modal-heading-size);line-height:var(--_modal-heading-line-height)}@media screen and (min-width: 769px){:host #modal-title{padding-right:3.5rem;margin-bottom:1.5rem}}@media screen and (min-width: 1024px){:host #modal-title{padding-right:4.5rem;margin-bottom:2.5rem}}:host #modal-body{-ms-flex:1;flex:1;min-height:0;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px){:host #modal-body{margin-left:-1.5rem;margin-right:-1.5rem;padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){:host #modal-body{margin-left:-2.5rem;margin-right:-2.5rem;padding-left:2.5rem;padding-right:2.5rem}}:host #modal-actions{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;gap:.5rem;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:1rem}@media screen and (min-width: 769px){:host #modal-actions{margin-top:1.5rem}}@media screen and (min-width: 1024px){:host #modal-actions{margin-top:2.5rem}}:host #modal-actions:empty{display:none}::slotted(*){display:block}`;
+
+const Modal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.dsWillPresent = createEvent(this, "dsWillPresent");
+        this.dsDidPresent = createEvent(this, "dsDidPresent");
+        this.dsWillDismiss = createEvent(this, "dsWillDismiss");
+        this.dsDidDismiss = createEvent(this, "dsDidDismiss");
+        this.scrollHandler = new ScrollHandler();
+        this.animated = true;
+        this.isOpen = false;
+        this.transitionQueue = Promise.resolve();
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true` the modal is open.
+         */
+        this.open = false;
+        /**
+         * If `true`, the modal can be dismissed via Escape key, close button, and backdrop click.
+         */
+        this.closable = true;
+        /**
+         * Width of the modal in pixels.
+         */
+        this.modalWidth = 640;
+        /**
+         * If `true`, the modal covers the full viewport.
+         */
+        this.fullscreen = false;
+        this.handleCancel = (ev) => {
+            ev.preventDefault();
+            if (this.closable) {
+                this.open = false;
+            }
+        };
+        this.handleNativeClose = () => {
+            var _a;
+            // If the browser closed the dialog despite preventDefault (browser quirk),
+            // re-enter the top layer so the backdrop is restored.
+            if (this.open) {
+                (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.showModal();
+            }
+        };
+        this.handleBackdropClick = (ev) => {
+            if (this.closable && ev.target === this.dialogEl) {
+                this.open = false;
+            }
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    openChanged(newValue) {
+        if (newValue) {
+            this.runOpen();
+        }
+        else {
+            this.runClose();
+        }
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.scrollHandler.connect();
+    }
+    componentDidLoad() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.addEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.addEventListener('close', this.handleNativeClose);
+        if (this.open) {
+            this.runOpen();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('cancel', this.handleCancel);
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('close', this.handleNativeClose);
+        this.scrollHandler.disconnect();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** Opens the modal. */
+    async present() {
+        this.open = true;
+    }
+    /** Closes the modal. */
+    async dismiss() {
+        this.open = false;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.animated = state.animated;
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    runOpen() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doOpen()).catch(() => undefined);
+    }
+    runClose() {
+        this.transitionQueue = this.transitionQueue.then(() => this.doClose()).catch(() => undefined);
+    }
+    async doOpen() {
+        var _a, _b;
+        if ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open)
+            return;
+        this.dsWillPresent.emit();
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.showModal();
+        this.scrollHandler.disable();
+        this.isOpen = true;
+        if (this.animated) {
+            await wait(300);
+        }
+        this.dsDidPresent.emit();
+    }
+    async doClose() {
+        var _a, _b;
+        if (!((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.open))
+            return;
+        this.dsWillDismiss.emit();
+        this.isOpen = false;
+        if (this.animated) {
+            await wait(300);
+        }
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
+        this.scrollHandler.enable();
+        this.dsDidDismiss.emit();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (h(Host, { key: '62b900eb4c6d645d6ed18838b6e5f5230f34d2ba', class: {
+                'is-open': this.isOpen,
+                'is-animated': this.animated,
+                'is-fullscreen': this.fullscreen,
+            }, style: { '--_modal-width': `${this.modalWidth}px` } }, h("dialog", { key: '744edb0cc3a0af3bdc01fbaf2acd9108f1ea6ecf', part: "dialog", ref: el => (this.dialogEl = el), "aria-labelledby": "modal-title", "aria-describedby": "modal-body", onClick: this.handleBackdropClick }, this.closable && h("ds-close", { key: 'e0328f19021f81ba7f1a4ccb4b9a7c444f623509', part: "close", onClick: () => (this.open = false) }), h("h2", { key: 'c9e8363bf136aa21fbaae2120a32847ef6189dee', id: "modal-title", part: "title" }, h("slot", { key: '3b061b840fd0b98c07ad22210c78a1d5390ec055', name: "header" })), h("div", { key: '9ca6ff7d5216ef7ee8f179ba73ed10531e6e3ccc', id: "modal-body", part: "body" }, h("slot", { key: 'dece7c125221ad7465f70ddd29bc47741b444b0a', name: "body" })), h("div", { key: 'dc1980a3c0b1da4d8a37d50e2a4ab3e2e45516c3', id: "modal-actions", part: "actions" }, h("slot", { key: 'a79074f106e57cb89d39354b46a82842493c0a0c', name: "actions" })))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+__decorate([
+    Logger('modal'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Modal.prototype, "createLogger", null);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "open", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "closable", void 0);
+__decorate([
+    Type('number'),
+    __metadata("design:type", Number)
+], Modal.prototype, "modalWidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Modal.prototype, "fullscreen", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Modal.prototype, "configChanged", null);
+Modal.style = modalHostCss();
+
+export { Modal as ds_modal };