@baloise/ds-core 0.0.5-nightly.e56f740

package/dist/collection/components/bal-select/test/bal-select-utils.spec.js

@@ -0,0 +1,99 @@
+import { addValue, removeValue, validateAfterBlur, findLabelByValue, findOptionByLabel } from "../utils/utils";
+describe('bal-select', () => {
+    let optionA;
+    let optionB;
+    beforeEach(() => {
+        optionA = {
+            id: 'id-a',
+            value: '1',
+            disabled: false,
+            label: 'labelA',
+            textContent: 'labelA',
+            innerHTML: 'labelA',
+        };
+        optionB = {
+            id: 'id-b',
+            value: '2',
+            disabled: false,
+            label: 'labelB',
+            textContent: 'labelB',
+            innerHTML: 'labelB',
+        };
+    });
+    describe('addValue', () => {
+        test('should replace the current selection', () => {
+            const result = addValue(['1'], '3', false);
+            expect(result).toStrictEqual(['3']);
+        });
+        test('should add new value', () => {
+            const result = addValue(['1', '2'], '3', true);
+            expect(result).toStrictEqual(['1', '2', '3']);
+        });
+        test('should add new value', () => {
+            const result = addValue(['1', '2', '3'], '2', true);
+            expect(result).toStrictEqual(['1', '3']);
+        });
+    });
+    describe('removeValue', () => {
+        test('should remove only the given option', () => {
+            const result = removeValue(['1', '2'], '1');
+            expect(result).toStrictEqual(['2']);
+        });
+    });
+    describe('validateAfterBlur', () => {
+        let options = new Map();
+        beforeEach(() => {
+            options = new Map();
+            options.set(optionA.value, optionA);
+            options.set(optionB.value, optionB);
+        });
+        test('should keep the typed value', () => {
+            const result = validateAfterBlur(['1'], options, 'labelA');
+            expect(result).toStrictEqual(['1']);
+        });
+        test('should remove the value due to non existing label', () => {
+            const result = validateAfterBlur(['1'], options, 'invalid-label');
+            expect(result).toStrictEqual([]);
+        });
+        test('should set the value of the given label', () => {
+            const result = validateAfterBlur([], options, 'labelA');
+            expect(result).toStrictEqual(['1']);
+        });
+        test('should not set the value', () => {
+            const result = validateAfterBlur([], options, '');
+            expect(result).toStrictEqual([]);
+        });
+    });
+    describe('findLabelByValue', () => {
+        let options = new Map();
+        beforeEach(() => {
+            options = new Map();
+            options.set(optionA.value, optionA);
+            options.set(optionB.value, optionB);
+        });
+        test('should find option', () => {
+            const result = findLabelByValue(options, '2');
+            expect(result).toStrictEqual('labelB');
+        });
+        test('should return an empty string if the option does not exist', () => {
+            const result = findLabelByValue(options, '3');
+            expect(result).toStrictEqual('');
+        });
+    });
+    describe('findOptionByLabel', () => {
+        let options = new Map();
+        beforeEach(() => {
+            options = new Map();
+            options.set(optionA.value, optionA);
+            options.set(optionB.value, optionB);
+        });
+        test('should find option', () => {
+            const result = findOptionByLabel(options, 'labelA');
+            expect(result === null || result === void 0 ? void 0 : result.value).toStrictEqual('1');
+        });
+        test('should return an empty string if the option does not exist', () => {
+            const result = findOptionByLabel(options, '3');
+            expect(result === null || result === void 0 ? void 0 : result.value).toBeUndefined();
+        });
+    });
+});

package/dist/collection/components/bal-select/utils/bal-option.type.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/bal-select/utils/bal-option.util.js

@@ -0,0 +1,11 @@
+export const newBalOptionValue = (value, label, disabled = false, data) => {
+    return {
+        value,
+        label,
+        disabled,
+        data,
+    };
+};
+export const newBalSingleOptionValue = (valueAndLabel, disabled = false, data) => {
+    return newBalOptionValue(valueAndLabel, valueAndLabel, disabled, data);
+};

package/dist/collection/components/bal-select/utils/utils.js

@@ -0,0 +1,73 @@
+import isNil from "lodash.isnil";
+export function getValues(values) {
+    if (Array.isArray(values)) {
+        return values.filter(v => !isNil(v));
+    }
+    return [];
+}
+export function length(values) {
+    return getValues(values).length;
+}
+export function removeValue(values, valueToRemove) {
+    return getValues(values).filter(value => value !== valueToRemove);
+}
+export function addValue(values, valueToAdd, hasMultipleValue) {
+    const valuesArray = getValues(values);
+    if (hasMultipleValue) {
+        if (valuesArray.includes(valueToAdd)) {
+            return removeValue(values, valueToAdd);
+        }
+        return [...valuesArray, valueToAdd];
+    }
+    return [valueToAdd];
+}
+export function validateAfterBlur(values, options, typedLabel) {
+    const valuesArray = getValues(values);
+    if (valuesArray.length > 0) {
+        const valueOption = options.get(valuesArray[0]);
+        if (isNil(valueOption) || typedLabel !== valueOption.label) {
+            return [];
+        }
+    }
+    else {
+        const typedOption = findOptionByLabel(options, typedLabel);
+        if (!isNil(typedOption)) {
+            return addValue(values, typedOption.value, false);
+        }
+    }
+    return valuesArray;
+}
+function findOptionByLabelIterator(iterator, label) {
+    const { value, done } = iterator.next();
+    if (!isNil(value) && value.label === label) {
+        return value;
+    }
+    if (done) {
+        return undefined;
+    }
+    return findOptionByLabelIterator(iterator, label);
+}
+export function findOptionByLabel(options, label) {
+    return findOptionByLabelIterator(options.values(), label);
+}
+export function findLabelByValue(options, value) {
+    const option = options.get(value);
+    if (!isNil(option)) {
+        return option.label;
+    }
+    return '';
+}
+export function startsWith(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.startsWith(value);
+}
+export function includes(text, input) {
+    const content = text.trim().toLowerCase();
+    const value = input.trim().toLowerCase();
+    return content.includes(value);
+}
+export function preventDefault(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+}

package/dist/collection/components/bal-select/utils/watch-options.js

@@ -0,0 +1,19 @@
+export const watchForOptions = (containerEl, tagName, onChange) => {
+    /* tslint:disable-next-line */
+    if (typeof MutationObserver === 'undefined') {
+        return;
+    }
+    const mutation = new MutationObserver(mutationList => {
+        mutationList = mutationList.filter(record => record.target.nodeName === tagName.toUpperCase() || record.target.nodeName === 'bal-select'.toUpperCase());
+        if (mutationList.length > 0) {
+            onChange(undefined);
+        }
+    });
+    mutation.observe(containerEl, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+    });
+    return mutation;
+};

package/dist/collection/components/bal-shape/bal-shape.css

@@ -0,0 +1 @@
+.bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{transform:rotate(0deg)}.bal-shape--is-rotation-90{transform:rotate(90deg)}.bal-shape--is-rotation-180{transform:rotate(180deg)}.bal-shape--is-rotation-270{transform:rotate(270deg)}

package/dist/collection/components/bal-shape/bal-shape.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />

package/dist/collection/components/bal-shape/bal-shape.js

@@ -0,0 +1,136 @@
+import { h, Host } from "@stencil/core";
+import { BEM } from "../../utils/bem";
+import * as BaloiseDesignToken from "@baloise/ds-tokens";
+export class Shape {
+    constructor() {
+        this.getHex = () => {
+            let color;
+            switch (this.color) {
+                case 'green':
+                    color = BaloiseDesignToken.balColorGreen6;
+                    break;
+                case 'green-light':
+                    color = BaloiseDesignToken.balColorGreen3;
+                    break;
+                case 'red':
+                    color = BaloiseDesignToken.balColorRed5;
+                    break;
+                case 'red-light':
+                    color = BaloiseDesignToken.balColorRed3;
+                    break;
+                case 'purple':
+                    color = BaloiseDesignToken.balColorPurple6;
+                    break;
+                case 'purple-light':
+                    color = BaloiseDesignToken.balColorPurple3;
+                    break;
+                case 'yellow':
+                    color = BaloiseDesignToken.balColorYellow5;
+                    break;
+                case 'yellow-light':
+                    color = BaloiseDesignToken.balColorYellow3;
+                    break;
+                default:
+                    color = BaloiseDesignToken.balColorGrey4;
+            }
+            return color;
+        };
+        this.variation = '1';
+        this.color = 'green';
+        this.rotation = '0';
+    }
+    render() {
+        const block = BEM.block('shape');
+        const shapes = [
+            h("g", { id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            h("g", { id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            h("g", { id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+        ];
+        return (h(Host, { class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+    }
+    static get is() { return "bal-shape"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-shape.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-shape.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalShapeVariation",
+                    "resolved": "\"1\" | \"2\" | \"3\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape variation"
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "'1'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalShapeColor",
+                    "resolved": "\"green\" | \"green-light\" | \"purple\" | \"purple-light\" | \"red\" | \"red-light\" | \"yellow\" | \"yellow-light\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape color"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'green'"
+            },
+            "rotation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalShapeRotation",
+                    "resolved": "\"0\" | \"180\" | \"270\" | \"90\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The shape rotation"
+                },
+                "attribute": "rotation",
+                "reflect": false,
+                "defaultValue": "'0'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/bal-sheet/bal-sheet.css

@@ -0,0 +1 @@
+:root{--bal-sheet-radius: var(--bal-radius-large);--bal-sheet-background: var(--bal-color-white);--bal-sheet-shadow: var(--bal-shadow-normal);--bal-sheet-position-bottom: .5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}

package/dist/collection/components/bal-sheet/bal-sheet.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />

package/dist/collection/components/bal-sheet/bal-sheet.js

@@ -0,0 +1,52 @@
+import { h, Host } from "@stencil/core";
+import { BEM } from "../../utils/bem";
+export class Sheet {
+    constructor() {
+        this.containerSize = '';
+    }
+    render() {
+        const block = BEM.block('sheet');
+        const container = block.element('container');
+        const containerInner = container.element('inner');
+        const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
+        return (h(Host, { class: Object.assign({}, block.class()) }, h("div", { class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { class: Object.assign({}, containerInner.class()) }, h("slot", null)))));
+    }
+    static get is() { return "bal-sheet"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-sheet.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-sheet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "containerSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalSheetContainer",
+                    "resolved": "\"\" | \"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines content width of the stage"
+                },
+                "attribute": "container-size",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/components/bal-snackbar/bal-snackbar.controller.js

@@ -0,0 +1,12 @@
+import { BalNoticeController } from "../../utils/overlays/notice.controller";
+export class BalSnackbarController extends BalNoticeController {
+    constructor() {
+        super({
+            tag: 'bal-snackbar',
+        });
+    }
+    create(options) {
+        return super.create(options);
+    }
+}
+export const balSnackbarController = new BalSnackbarController();

package/dist/collection/components/bal-snackbar/bal-snackbar.css

@@ -0,0 +1 @@
+:root{--bal-snackbar-font-size: var(--bal-text-size-normal);--bal-snackbar-font-family: var(--bal-font-family-text);--bal-snackbar-background: var(--bal-color-white);--bal-snackbar-background-primary: var(--bal-color-white);--bal-snackbar-background-info: var(--bal-color-info-2);--bal-snackbar-background-success: var(--bal-color-success-2);--bal-snackbar-background-warning: var(--bal-color-warning-2);--bal-snackbar-background-danger: var(--bal-color-danger-2);--bal-snackbar-radius: var(--bal-radius-large);--bal-snackbar-color: var(--bal-color-text-primary);--bal-snackbar-color-primary: var(--bal-color-text-primary);--bal-snackbar-color-info: var(--bal-color-text-primary);--bal-snackbar-color-success: var(--bal-color-text-primary);--bal-snackbar-color-warning: var(--bal-color-text-primary);--bal-snackbar-color-danger: var(--bal-color-text-primary)}.bal-snackbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-flex;position:relative;flex-grow:0 !important;width:100%;justify-content:flex-end}@media screen and (max-width: 768px){.bal-snackbar{width:18rem}}@media screen and (min-width: 769px),print{.bal-snackbar{width:18rem}}@media screen and (min-width: 1024px){.bal-snackbar{width:27.5rem}}.bal-snackbar__inner{min-height:3.5rem;border-radius:var(--bal-snackbar-radius);font-size:var(--bal-snackbar-font-size);font-family:var(--bal-snackbar-font-family);background:var(--bal-snackbar-background);color:var(--bal-snackbar-color);hyphens:auto;position:relative;display:inline-flex;flex-grow:1;margin:.5rem 0 0 0;box-shadow:var(--bal-shadow-normal);align-self:flex-end;flex-direction:column !important;row-gap:1rem;padding:var(--bal-space-medium)}.bal-snackbar__inner--is-primary{background:var(--bal-snackbar-background-primary);color:var(--bal-snackbar-color-primary)}.bal-snackbar__inner--is-info{background:var(--bal-snackbar-background-info);color:var(--bal-snackbar-color-info)}.bal-snackbar__inner--is-danger{background:var(--bal-snackbar-background-danger);color:var(--bal-snackbar-color-danger)}.bal-snackbar__inner--is-warning{background:var(--bal-snackbar-background-warning);color:var(--bal-snackbar-color-warning)}.bal-snackbar__inner--is-success{background:var(--bal-snackbar-background-success);color:var(--bal-snackbar-color-success)}@media screen and (min-width: 769px),print{.bal-snackbar__inner{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-snackbar__inner{padding:var(--bal-space-medium-desktop)}}.bal-snackbar__header{display:flex;align-items:center;column-gap:.5rem}.bal-snackbar__header>span{font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-snackbar__header>span{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-snackbar__header>span{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-snackbar__footer{display:inline-flex;justify-content:flex-start;margin-top:.5rem}.bal-snackbar__close.bal-close{position:absolute;right:1.5rem;top:1.5rem}

package/dist/collection/components/bal-snackbar/bal-snackbar.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />