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

package/dist/cjs/ds-list.cjs.entry.js

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-CdD-TT_n.js');
-var tslib_es6 = require('./tslib.es6-BTi-SLnA.js');
-var validate_decorator = require('./validate.decorator-C9-9HA0Y.js');
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var type = require('./type-hmc4CJcO.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
 
 const listHostCss = () => `:host{display:block;margin:0;padding:0}:host ul,:host ol{display:block;margin:0;padding:0;list-style-type:none}`;
 
@@ -24,20 +25,13 @@ const List = class {
     createLogger(log) {
         this.log = log;
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
-    connectedCallback() {
-        validate_decorator.setupValidation(this);
-    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
         const ListTag = this.ordered ? 'ol' : 'ul';
-        return (index.h(index.Host, { key: '18629843f974b02e26afe29cd7d5278584edc245' }, index.h(ListTag, { key: '060b9f41ace665ea569587301490133ade7445f8', id: "list", part: "list" }, index.h("slot", { key: '97b6992fb146d134db8ade31bd580d9fd6955253' }))));
+        return (index.h(index.Host, { key: '915a10d31287e37f5c441d3717d724f654030415' }, index.h(ListTag, { key: '8d9813dde9199fc414bdc05878a4f6ba54553eb8', id: "list", part: "list" }, index.h("slot", { key: '523bc1c0172e9ed3af963610e417bc522672ded5' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -48,7 +42,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], List.prototype, "createLogger", null);
 tslib_es6.__decorate([
-    validate_decorator.ValidateType('boolean'),
+    type.Type('boolean'),
     tslib_es6.__metadata("design:type", Boolean)
 ], List.prototype, "ordered", void 0);
 List.style = listHostCss();

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

@@ -0,0 +1,34 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+
+const modalBodyHostCss = () => `:host{display:contents}`;
+
+const ModalBody = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'body';
+    }
+    render() {
+        return (index.h(index.Host, { key: '2e1c21ff62b36dc89b1589174b3ede2979eeb384' }, index.h("slot", { key: 'd1bb0237d1ac252c645da88b7375500b01c14ae1' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('modal-body'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], ModalBody.prototype, "createLogger", null);
+ModalBody.style = modalBodyHostCss();
+
+exports.ds_modal_body = ModalBody;

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

@@ -0,0 +1,31 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        this.el.slot = 'header';
+    }
+    render() {
+        return (index.h(index.Host, { key: '05b088ad50f8c43b72b855cb240d0c2ca2b9466c', style: { display: 'contents' } }, index.h("slot", { key: '729c1b5a1891548bb0fe4436ae3d04c7cc7f1c10' })));
+    }
+    get el() { return index.getElement(this); }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('modal-header'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], ModalHeader.prototype, "createLogger", null);
+
+exports.ds_modal_header = ModalHeader;

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

@@ -0,0 +1,201 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+'use strict';
+
+var index = require('./index-sC3JnTlJ.js');
+var tslib_es6 = require('./tslib.es6-CxyosZMg.js');
+var scroll = require('./scroll-CUuEh4xd.js');
+var type = require('./type-hmc4CJcO.js');
+var config_decorator = require('./config.decorator-ThGLtT-3.js');
+require('./create-validator-decorator-BIgFqrMJ.js');
+require('./config.utils-MhZvq4Qm.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) {
+        index.registerInstance(this, hostRef);
+        this.dsWillPresent = index.createEvent(this, "dsWillPresent");
+        this.dsDidPresent = index.createEvent(this, "dsDidPresent");
+        this.dsWillDismiss = index.createEvent(this, "dsWillDismiss");
+        this.dsDidDismiss = index.createEvent(this, "dsDidDismiss");
+        this.scrollHandler = new scroll.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 index.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 index.wait(300);
+        }
+        (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
+        this.scrollHandler.enable();
+        this.dsDidDismiss.emit();
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        return (index.h(index.Host, { key: '62b900eb4c6d645d6ed18838b6e5f5230f34d2ba', class: {
+                'is-open': this.isOpen,
+                'is-animated': this.animated,
+                'is-fullscreen': this.fullscreen,
+            }, style: { '--_modal-width': `${this.modalWidth}px` } }, index.h("dialog", { key: '744edb0cc3a0af3bdc01fbaf2acd9108f1ea6ecf', part: "dialog", ref: el => (this.dialogEl = el), "aria-labelledby": "modal-title", "aria-describedby": "modal-body", onClick: this.handleBackdropClick }, this.closable && index.h("ds-close", { key: 'e0328f19021f81ba7f1a4ccb4b9a7c444f623509', part: "close", onClick: () => (this.open = false) }), index.h("h2", { key: 'c9e8363bf136aa21fbaae2120a32847ef6189dee', id: "modal-title", part: "title" }, index.h("slot", { key: '3b061b840fd0b98c07ad22210c78a1d5390ec055', name: "header" })), index.h("div", { key: '9ca6ff7d5216ef7ee8f179ba73ed10531e6e3ccc', id: "modal-body", part: "body" }, index.h("slot", { key: 'dece7c125221ad7465f70ddd29bc47741b444b0a', name: "body" })), index.h("div", { key: 'dc1980a3c0b1da4d8a37d50e2a4ab3e2e45516c3', id: "modal-actions", part: "actions" }, index.h("slot", { key: 'a79074f106e57cb89d39354b46a82842493c0a0c', name: "actions" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "openChanged": 0
+            }]
+    }; }
+};
+tslib_es6.__decorate([
+    tslib_es6.Logger('modal'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Modal.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Modal.prototype, "open", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Modal.prototype, "closable", void 0);
+tslib_es6.__decorate([
+    type.Type('number'),
+    tslib_es6.__metadata("design:type", Number)
+], Modal.prototype, "modalWidth", void 0);
+tslib_es6.__decorate([
+    type.Type('boolean'),
+    tslib_es6.__metadata("design:type", Boolean)
+], Modal.prototype, "fullscreen", void 0);
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], Modal.prototype, "configChanged", null);
+Modal.style = modalHostCss();
+
+exports.ds_modal = Modal;