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

package/components/bal-button-group2.js

@@ -1,52 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { B as BEM } from './bem.js';
-
-const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * The value of the button, which is submitted with the form data.
-         */
-        this.position = '';
-        /**
-         * `auto` will position the button items vertical and full width.
-         * `row` will force that the buttons are also horizontal on mobile.
-         */
-        this.direction = 'auto';
-        /**
-         * If `true` the flex direction is used in reverse on mobile.
-         */
-        this.reverse = false;
-    }
-    render() {
-        const block = BEM.block('button-group');
-        return (h(Host, { key: 'a41720ea16a458ae915bece1adf109d2f20ea8ec', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { key: '03f0d65f12c0ac0e14f4854ef85e845fe51f9e62', class: {
-                'field': true,
-                'is-grouped': true,
-                'is-reverse': this.reverse,
-                [`has-direction-${this.direction}`]: true,
-            } }, h("slot", { key: 'a65f6a5a52b522c600c4df6c0963cdd59ad07462' }))));
-    }
-}, [260, "bal-button-group", {
-        "position": [1],
-        "direction": [1],
-        "reverse": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-button-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-button-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ButtonGroup);
-            }
-            break;
-    } });
-}
-
-export { ButtonGroup as B, defineCustomElement as d };

package/components/bal-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalButton extends Components.BalButton, HTMLElement {}
-export const BalButton: {
-    prototype: BalButton;
-    new (): BalButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/bal-button.js

@@ -1,6 +0,0 @@
-import { B as Button, d as defineCustomElement$1 } from './bal-button2.js';
-
-const BalButton = Button;
-const defineCustomElement = defineCustomElement$1;
-
-export { BalButton, defineCustomElement };

package/components/bal-button2.js

@@ -1,315 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as ariaBooleanToString } from './aria.js';
-import { i as inheritAttributes } from './attributes.js';
-import { n as rOnLoad } from './helpers.js';
-import { d as defineCustomElement$2 } from './bal-icon2.js';
-import { d as defineCustomElement$1 } from './bal-spinner2.js';
-
-const balButtonCss = "bal-button,.bal-button{display:inline-block;position:static}bal-button.is-fullwidth,.bal-button.is-fullwidth{width:100%;-ms-flex:1 1 100%;flex:1 1 100%}bal-button[disabled] bal-icon,.bal-button[disabled] bal-icon{pointer-events:none}.bal-button .button-label.has-no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-button-group{display:-ms-flexbox;display:flex}.bal-button-group--position-center{-ms-flex-pack:center;justify-content:center}.bal-button-group--position-left{-ms-flex-pack:start;justify-content:flex-start}.bal-button-group--position-right{-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width: 768px){.bal-button-group--direction-auto .field.is-grouped,.bal-button-group--direction-auto .bal-button,.bal-button-group--direction-auto .bal-button .button{width:100% !important}}@media screen and (max-width: 768px){.bal-button-group--direction-column .field.is-grouped,.bal-button-group--direction-column .bal-button,.bal-button-group--direction-column .bal-button .button{width:100% !important}}";
-
-const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.balClick = createEvent(this, "balClick", 7);
-        this.balNavigate = createEvent(this, "balNavigate", 7);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
-        this.balDidRender = createEvent(this, "balDidRender", 7);
-        this.inheritAttributes = {};
-        this.isLargestContentPaintDone = false;
-        /**
-         * The color to use from your application's color palette.
-         */
-        this.color = 'primary';
-        /**
-         * The type of button.
-         */
-        this.elementType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * Size of the button
-         */
-        this.size = '';
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-        /**
-         * If `true` adds a box shadow to improve readability on image background
-         * */
-        this.shadow = false;
-        /**
-         * If `true` the width of the buttons is limited
-         */
-        this.square = false;
-        /**
-         * If `true` the button has a active theme
-         */
-        this.isActive = false;
-        /**
-         * If `true` the button has a full width
-         */
-        this.expanded = false;
-        /**
-         * If `true` the button has no padding and a reduced height
-         */
-        this.flat = false;
-        /**
-         * If `true` the button is outlined
-         */
-        this.outlined = false;
-        /**
-         * If `true` the button is inverted
-         */
-        this.inverted = false;
-        /**
-         * If `true` the label is hidden and a loading spinner is shown instead.
-         */
-        this.loading = false;
-        /**
-         * If `true` the button is rounded.
-         */
-        this.rounded = false;
-        /**
-         * If `true` the button is a popup.
-         */
-        this.balPopup = undefined;
-        /**
-         * Name of the left button icon
-         */
-        this.icon = '';
-        /**
-         * If `true` the icon turns
-         */
-        this.iconTurn = false;
-        /**
-         * Name of the right button icon
-         */
-        this.iconRight = '';
-        /**
-         * The label of the button will not break
-         */
-        this.noWrap = false;
-        /**
-         * The name of the button, which is submitted with the form data.
-         */
-        this.name = '';
-        /**
-         * The value of the button, which is submitted with the form data.
-         */
-        this.value = '';
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yControls = undefined;
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yTitle = undefined;
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yLabel = undefined;
-        /**
-         * A11y attributes for the native button element.
-         */
-        this.a11yHaspopup = undefined;
-        this.onFocus = () => {
-            this.balFocus.emit();
-        };
-        this.onBlur = () => {
-            this.balBlur.emit();
-        };
-        this.onClick = (ev) => {
-            if (!this.disabled) {
-                this.balClick.emit(ev);
-                if (this.href !== undefined) {
-                    this.balNavigate.emit(ev);
-                }
-            }
-        };
-    }
-    listenOnClick(ev) {
-        if (this.disabled && ev.target && ev.target === this.el) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-    componentDidLoad() {
-        rOnLoad(() => (this.isLargestContentPaintDone = true));
-    }
-    componentWillLoad() {
-        this.inheritAttributes = inheritAttributes(this.el, [
-            'title',
-            'aria-label',
-            'aria-controls',
-            'aria-hidden',
-            'tabindex',
-            'aria-haspopup',
-        ]);
-        if (this.el.hasAttribute('bal-popup') && !this.a11yHaspopup) {
-            this.a11yHaspopup = 'true';
-        }
-    }
-    componentDidRender() {
-        this.balDidRender.emit();
-    }
-    get isIconInverted() {
-        return this.inverted;
-    }
-    get buttonCssClass() {
-        return {
-            'button': true,
-            [`is-${this.color}`]: true,
-            'is-flat': this.flat,
-            'is-square': this.square,
-            'is-small': this.size === 'small',
-            'is-inverted': this.inverted,
-            'is-active': this.isActive,
-            'is-outlined': this.outlined,
-            'is-fullwidth': this.expanded,
-            'is-disabled': this.disabled,
-            'is-loading': this.loading,
-            'is-rounded': this.rounded === true,
-            'has-blur-shadow': this.shadow === true,
-        };
-    }
-    get leftIconAttrs() {
-        if (!this.icon || this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {};
-    }
-    get leftRightAttrs() {
-        if (!this.iconRight || this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {};
-    }
-    get loadingAttrs() {
-        if (!this.loading) {
-            return {
-                style: { display: 'none' },
-            };
-        }
-        return {
-            style: { position: 'absolute' },
-        };
-    }
-    handleClick(ev) {
-        if (this.disabled) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    }
-    render() {
-        const { elementType, download, href, rel, target, name, value } = this;
-        const TagType = this.href === undefined ? 'button' : 'a';
-        const attrs = TagType === 'button'
-            ? { type: elementType, name, value }
-            : {
-                download,
-                href,
-                rel,
-                target,
-            };
-        const spinnerColor = () => {
-            if (this.disabled) {
-                return 'blue';
-            }
-            switch (this.color) {
-                case 'primary':
-                case 'success':
-                case 'warning':
-                case 'danger':
-                    return this.inverted ? 'blue' : 'white';
-                default:
-                    return this.inverted ? 'white' : 'blue';
-            }
-        };
-        const ariaAttributes = {
-            'title': this.a11yTitle || this.inheritAttributes['title'],
-            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
-            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
-            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
-        };
-        return (h(Host, { onClick: this.handleClick, class: {
-                'bal-button': true,
-                'control': true,
-                'is-fullwidth': this.expanded,
-                'is-disabled': this.disabled,
-            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-button" }, ariaAttributes), this.isLargestContentPaintDone && this.loading ? (h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading }))) : (''), this.isLargestContentPaintDone && this.icon ? (h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''), h("span", { class: {
-                'button-label': true,
-                'has-no-wrap': this.noWrap,
-                'is-small': this.size === 'small',
-            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), this.isLargestContentPaintDone && this.iconRight ? (h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
-    }
-    get el() { return this; }
-    static get style() { return balButtonCss; }
-}, [260, "bal-button", {
-        "color": [1],
-        "elementType": [1, "element-type"],
-        "disabled": [516],
-        "size": [513],
-        "href": [1],
-        "target": [1],
-        "rel": [1],
-        "download": [1],
-        "shadow": [4],
-        "square": [4],
-        "isActive": [4, "is-active"],
-        "expanded": [4],
-        "flat": [4],
-        "outlined": [4],
-        "inverted": [4],
-        "loading": [4],
-        "rounded": [4],
-        "balPopup": [8, "bal-popup"],
-        "icon": [1],
-        "iconTurn": [4, "icon-turn"],
-        "iconRight": [1, "icon-right"],
-        "noWrap": [4, "no-wrap"],
-        "name": [1],
-        "value": [8],
-        "a11yControls": [1, "a-1-1y-controls"],
-        "a11yTitle": [1, "a-1-1y-title"],
-        "a11yLabel": [1, "a-1-1y-label"],
-        "a11yHaspopup": [1, "a-1-1y-haspopup"],
-        "isLargestContentPaintDone": [32]
-    }, [[6, "click", "listenOnClick"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-button", "bal-icon", "bal-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Button);
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "bal-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Button as B, defineCustomElement as d };

package/components/bal-card-actions.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalCardActions extends Components.BalCardActions, HTMLElement {}
-export const BalCardActions: {
-    prototype: BalCardActions;
-    new (): BalCardActions;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/bal-card-actions.js

@@ -1,43 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './bal-button-group2.js';
-
-const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * The value of the button, which is submitted with the form data.
-         */
-        this.position = '';
-    }
-    render() {
-        return (h(Host, { key: 'a7cfd2bf8e431e2bd0fb357e11ab28391f3a76c1', class: "bal-card-actions" }, h("bal-button-group", { key: '15606e2e6831e3d3e7977b948bd9b14582c71d5d', class: "m-none", position: this.position }, h("slot", { key: '384f7646c468defca583a7ef7cbe2edf93ea74fa' }))));
-    }
-}, [260, "bal-card-actions", {
-        "position": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-card-actions", "bal-button-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-card-actions":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardActions);
-            }
-            break;
-        case "bal-button-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const BalCardActions = CardActions;
-const defineCustomElement = defineCustomElement$1;
-
-export { BalCardActions, defineCustomElement };

package/components/bal-card-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalCardButton extends Components.BalCardButton, HTMLElement {}
-export const BalCardButton: {
-    prototype: BalCardButton;
-    new (): BalCardButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/bal-card-button.js

@@ -1,83 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './bal-button2.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
-import { d as defineCustomElement$2 } from './bal-spinner2.js';
-
-const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * Name of the icon like `edit`.
-         */
-        this.icon = '';
-        /**
-         * The type of button.
-         */
-        this.elementType = 'button';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
-        this.target = '_self';
-        /**
-         * Name of the right button icon
-         */
-        this.iconRight = '';
-        /**
-         * If `true` the label is hidden and a loading spinner is shown instead.
-         */
-        this.loading = false;
-    }
-    render() {
-        return (h(Host, { key: '3088f94353d94bf69767bcae3e714d5e3b3928d6', class: "bal-card-button" }, h("bal-button", { key: '8684146c87ae36da730bd7934d6a16e0ec00fda5', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, rel: this.rel, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: 'e325e51c8d30285fc03b6991f8d42d957721a8e1' }))));
-    }
-}, [260, "bal-card-button", {
-        "icon": [1],
-        "elementType": [1, "element-type"],
-        "disabled": [516],
-        "href": [1],
-        "target": [1],
-        "rel": [1],
-        "iconRight": [1, "icon-right"],
-        "loading": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-card-button", "bal-button", "bal-icon", "bal-spinner"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-card-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardButton);
-            }
-            break;
-        case "bal-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const BalCardButton = CardButton;
-const defineCustomElement = defineCustomElement$1;
-
-export { BalCardButton, defineCustomElement };

package/components/bal-card-content.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalCardContent extends Components.BalCardContent, HTMLElement {}
-export const BalCardContent: {
-    prototype: BalCardContent;
-    new (): BalCardContent;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/bal-card-content.js

@@ -1,6 +0,0 @@
-import { C as CardContent, d as defineCustomElement$1 } from './bal-card-content2.js';
-
-const BalCardContent = CardContent;
-const defineCustomElement = defineCustomElement$1;
-
-export { BalCardContent, defineCustomElement };

package/components/bal-card-content2.js

@@ -1,28 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-    }
-    render() {
-        return (h(Host, { key: '63fb6b5e72ad6c3fa30ba68f6d9bdf0e1833df76', class: "bal-card-content" }, h("slot", { key: '851ba08103e95a1c0536523a449d1f317543092c' })));
-    }
-}, [260, "bal-card-content"]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-card-content"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-card-content":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardContent);
-            }
-            break;
-    } });
-}
-
-export { CardContent as C, defineCustomElement as d };

package/components/bal-card-subtitle.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalCardSubtitle extends Components.BalCardSubtitle, HTMLElement {}
-export const BalCardSubtitle: {
-    prototype: BalCardSubtitle;
-    new (): BalCardSubtitle;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/components/bal-card-subtitle.js

@@ -1,49 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { B as BEM } from './bem.js';
-
-const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * If `true` the card text color becomes white.
-         */
-        this.inverted = false;
-        /**
-         * If `true` the card text color is bold.
-         */
-        this.bold = false;
-        /**
-         * If `true` the card text color becomes white.
-         */
-        this.color = '';
-    }
-    render() {
-        const block = BEM.block('card-subtitle');
-        return (h(Host, { key: '8cdde0f96f513fa303e73fb6934ea31b8e081b70', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('bold').class(this.bold)), block.modifier(`color-${this.color}`).class(!this.inverted)), block.modifier('inverted').class(this.inverted)) }, h("span", { key: '0706b14cbe256d54016e492de7be29adef5badb5' }, h("slot", { key: '22e5a11111f7b663e15e1ab1ebba3f3cafbecd01' }))));
-    }
-}, [260, "bal-card-subtitle", {
-        "inverted": [4],
-        "bold": [4],
-        "color": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-card-subtitle"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-card-subtitle":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CardSubtitle);
-            }
-            break;
-    } });
-}
-
-const BalCardSubtitle = CardSubtitle;
-const defineCustomElement = defineCustomElement$1;
-
-export { BalCardSubtitle, defineCustomElement };

package/components/bal-card-title.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../dist/types/components";
-
-interface BalCardTitle extends Components.BalCardTitle, HTMLElement {}
-export const BalCardTitle: {
-    prototype: BalCardTitle;
-    new (): BalCardTitle;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;