@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

package/dist/collection/components/card/card.js

@@ -1,410 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
-import { Logger, hasValue, OneOf, Type } from "../../utils/index";
-import { CARD_ALIGNMENTS, CARD_IMAGE_TEASERS, CARD_SPACES, CARD_COLORS, } from "./card.interfaces";
-/**
- * Card groups related content together in a contained, visually distinct container with optional header and footer.
- *
- * @slot - The main card content.
- * @slot header - Content displayed in the card header.
- * @slot footer - Content displayed in the card footer.
- * @part card - The card container element.
- */
-export class Card {
-    constructor() {
-        /**
-         * PUBLIC PROPERTY API
-         * ─────────────────────────────────────────────────────
-         */
-        /**
-         * If `true` the card loses its shadow.
-         */
-        this.flat = false;
-        /**
-         * If `true` the card gets a tile look, it has a brand icon on the left
-         */
-        this.tile = false;
-        /**
-         * If `true` the card gets a smaller padding.
-         */
-        this.dense = false;
-        /**
-         * If `true` the card image is displayed as a teaser, which means
-         * it is displayed with a large image.
-         */
-        this.imageTeaser = undefined;
-        /**
-         * If `true` the card background color becomes blue.
-         */
-        this.inverted = false;
-        /**
-         * If `true` the card has a hover effect.
-         */
-        this.clickable = false;
-        /**
-         * If `true` the card gets a light background to indicate a selection.
-         */
-        this.selected = false;
-        /**
-         * If `true` the card uses 100% of the available height.
-         */
-        this.fullheight = false;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    get colorTypeClass() {
-        const color = !hasValue(this.color) ? '' : `${this.inverted ? 'primary' : this.color}`;
-        const colorMap = {
-            'blue': 'primary',
-            'purple-1': 'purple-lighter',
-            'purple-2': 'purple-light',
-            'purple-3': 'purple',
-            'red-1': 'red-lighter',
-            'red-2': 'red-light',
-            'red-3': 'red',
-            'green-1': 'green-lighter',
-            'green-2': 'green-light',
-            'green-3': 'green',
-            'yellow-1': 'yellow-lighter',
-            'yellow-2': 'yellow-light',
-            'yellow-3': 'yellow',
-        };
-        return colorMap[color] || color;
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        const isImageTeaser = this.imageTeaser !== undefined && this.imageTeaser !== null;
-        return (h(Host, { key: 'e2ce9f4b51dcbedb62298188c7706b4df56cefb2', class: {
-                [`is-image-teaser`]: isImageTeaser,
-                [`is-image-teaser-${this.imageTeaser}`]: isImageTeaser,
-                [`is-dense`]: this.dense,
-                [`is-${this.colorTypeClass}`]: hasValue(this.color) && this.colorTypeClass !== 'white',
-                [`has-space-${this.space}`]: hasValue(this.space),
-                [`is-fullheight`]: this.fullheight,
-                [`is-flat`]: !!this.flat,
-                [`is-tile`]: !!this.tile,
-            } }, h("slot", { key: '6d20c2c8a8602948b24102a2702575442a688131', name: "picture" }), h("article", { key: '410b682d369bd9a22ca85b92f0a4033ddb4ce7d4', id: "card", class: {
-                [`is-fullheight`]: this.fullheight,
-                [`align-${this.align}`]: hasValue(this.align),
-            } }, h("slot", { key: 'c98a7257c121011883be5d2a0f5e1619fbc19404' }))));
-    }
-    static get is() { return "ds-card"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["card.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["card.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "flat": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card loses its shadow."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "flat",
-                "defaultValue": "false"
-            },
-            "tile": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card gets a tile look, it has a brand icon on the left"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "tile",
-                "defaultValue": "false"
-            },
-            "dense": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card gets a smaller padding."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "dense",
-                "defaultValue": "false"
-            },
-            "imageTeaser": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CardImageTeaser",
-                    "resolved": "\"wide-center\" | \"wide-left\" | \"wide-right\" | undefined",
-                    "references": {
-                        "CardImageTeaser": {
-                            "location": "import",
-                            "path": "./card.interfaces",
-                            "id": "src/components/card/card.interfaces.ts::CardImageTeaser",
-                            "referenceLocation": "CardImageTeaser"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card image is displayed as a teaser, which means\nit is displayed with a large image."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "image-teaser",
-                "defaultValue": "undefined"
-            },
-            "inverted": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card background color becomes blue."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "inverted",
-                "defaultValue": "false"
-            },
-            "clickable": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card has a hover effect."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "clickable",
-                "defaultValue": "false"
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card gets a light background to indicate a selection."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected",
-                "defaultValue": "false"
-            },
-            "fullheight": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the card uses 100% of the available height."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "fullheight",
-                "defaultValue": "false"
-            },
-            "align": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CardAlignment",
-                    "resolved": "\"center\" | \"left\" | undefined",
-                    "references": {
-                        "CardAlignment": {
-                            "location": "import",
-                            "path": "./card.interfaces",
-                            "id": "src/components/card/card.interfaces.ts::CardAlignment",
-                            "referenceLocation": "CardAlignment"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the text alignment of the card content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "align"
-            },
-            "space": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CardSpace",
-                    "resolved": "\"lg\" | \"sm\" | undefined",
-                    "references": {
-                        "CardSpace": {
-                            "location": "import",
-                            "path": "./card.interfaces",
-                            "id": "src/components/card/card.interfaces.ts::CardSpace",
-                            "referenceLocation": "CardSpace"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the space of the card content."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "space"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CardColor",
-                    "resolved": "\"dashed\" | \"green\" | \"green-dark\" | \"grey\" | \"primary\" | \"purple\" | \"purple-dark\" | \"red\" | \"red-dark\" | \"yellow\" | \"yellow-dark\" | undefined",
-                    "references": {
-                        "CardColor": {
-                            "location": "import",
-                            "path": "./card.interfaces",
-                            "id": "src/components/card/card.interfaces.ts::CardColor",
-                            "referenceLocation": "CardColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the color of the card."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-__decorate([
-    Logger('card'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], Card.prototype, "createLogger", null);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "flat", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "tile", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "dense", void 0);
-__decorate([
-    OneOf(CARD_IMAGE_TEASERS),
-    __metadata("design:type", String)
-], Card.prototype, "imageTeaser", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "inverted", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "clickable", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "selected", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], Card.prototype, "fullheight", void 0);
-__decorate([
-    OneOf(CARD_ALIGNMENTS),
-    __metadata("design:type", String)
-], Card.prototype, "align", void 0);
-__decorate([
-    OneOf(CARD_SPACES),
-    __metadata("design:type", String)
-], Card.prototype, "space", void 0);
-__decorate([
-    OneOf(CARD_COLORS),
-    __metadata("design:type", String)
-], Card.prototype, "color", void 0);

package/dist/collection/components/card/test/card.a11y.play.js

@@ -1,84 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { test } from "../../../../../../playwright/src/index";
-test('basic', async ({ page, a11y }) => {
-    await page.mount(`
-    <ds-card>
-      <ds-card-header>
-        <ds-card-title>Heading</ds-card-title>
-        <ds-close></ds-close>
-      </ds-card-header>
-      <ds-card-content>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui
-        odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
-      </ds-card-content>
-      <ds-card-actions>
-        <ds-button color="secondary">Button</ds-button>
-        <ds-button>Button</ds-button>
-      </ds-card-actions>
-    </ds-card>`);
-    await a11y('ds-card');
-});
-test('css-basic', async ({ page, a11y }) => {
-    await page.mount(`
-    <article class="card">
-      <header class="card-header">
-        <h3 class="title">Header</h3>
-        <ds-close></ds-close>
-      </header>
-      <div class="card-content">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae vero architecto rerum sed non eum qui
-        odio sint! Sunt ad numquam ducimus aut minus nihil, officiis quidem eum inventore eos?
-      </div>
-      <footer class="card-actions">
-        <button class="button is-secondary">Button</button>
-        <button class="button">Button</button>
-      </footer>
-    </article>`);
-    await a11y('article');
-});
-test.describe('colors', () => {
-    const COLORS = [
-        'white',
-        'primary',
-        'info',
-        'success',
-        'warning',
-        'danger',
-        '',
-        'grey',
-        'blue',
-        'red',
-        'yellow',
-        'purple',
-        'green',
-        'red-light',
-        'yellow-light',
-        'purple-light',
-        'green-light',
-        'grey-light',
-        'purple-1',
-        'purple-2',
-        'purple-3',
-        'green-1',
-        'green-2',
-        'green-3',
-        'red-1',
-        'red-2',
-        'red-3',
-        'yellow-1',
-        'yellow-2',
-        'yellow-3',
-    ];
-    COLORS.forEach(color => {
-        test(color, async ({ page, a11y }) => {
-            await page.mount(`<ds-card color="${color}">
-        <ds-card-header>
-          <ds-card-title>${color}</ds-card-title>
-        </ds-card-header>
-      </ds-card>`);
-            await a11y(`ds-card`);
-        });
-    });
-});

package/dist/collection/components/card/test/card.component.play.js

@@ -1,65 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { DsCard, DsCardActions, DsCardContent, DsCardHeader, DsCardSubtitle, DsCardTitle, test, } from "../../../../../../playwright/src/index";
-test.describe('component', () => {
-    test('should render ds-card with default slot', async ({ page }) => {
-        await page.mount(`
-      <ds-card>Card content</ds-card>
-    `);
-        const dsCard = new DsCard(page.locator('ds-card'));
-        await dsCard.assertToBeVisible();
-        await dsCard.assertToContainText('Card content');
-    });
-    test('should render ds-card-title', async ({ page }) => {
-        await page.mount(`
-      <ds-card>
-        <ds-card-title>My Title</ds-card-title>
-      </ds-card>
-    `);
-        const dsCardTitle = new DsCardTitle(page.locator('ds-card-title'));
-        await dsCardTitle.assertToBeVisible();
-        await dsCardTitle.assertToContainText('My Title');
-    });
-    test('should render ds-card-subtitle', async ({ page }) => {
-        await page.mount(`
-      <ds-card>
-        <ds-card-subtitle>My Subtitle</ds-card-subtitle>
-      </ds-card>
-    `);
-        const dsCardSubtitle = new DsCardSubtitle(page.locator('ds-card-subtitle'));
-        await dsCardSubtitle.assertToBeVisible();
-        await dsCardSubtitle.assertToContainText('My Subtitle');
-    });
-    test('should render ds-card-content', async ({ page }) => {
-        await page.mount(`
-      <ds-card>
-        <ds-card-content>My Content</ds-card-content>
-      </ds-card>
-    `);
-        const dsCardContent = new DsCardContent(page.locator('ds-card-content'));
-        await dsCardContent.assertToBeVisible();
-        await dsCardContent.assertToContainText('My Content');
-    });
-    test('should render ds-card-actions', async ({ page }) => {
-        await page.mount(`
-      <ds-card>
-        <ds-card-actions>
-          <ds-button>OK</ds-button>
-        </ds-card-actions>
-      </ds-card>
-    `);
-        const dsCardActions = new DsCardActions(page.locator('ds-card-actions'));
-        await dsCardActions.assertToBeVisible();
-    });
-    test('should render ds-card-header', async ({ page }) => {
-        await page.mount(`
-      <ds-card>
-        <ds-card-header>My Header</ds-card-header>
-      </ds-card>
-    `);
-        const dsCardHeader = new DsCardHeader(page.locator('ds-card-header'));
-        await dsCardHeader.assertToBeVisible();
-        await dsCardHeader.assertToContainText('My Header');
-    });
-});

package/dist/collection/components/card/test/card.visual.play.js

@@ -1,39 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { expectScreenshot, screenshot, test } from "../../../../../../playwright/src/index";
-const TAG = 'card';
-const VARIANTS = [
-    'basic',
-    'tile',
-    'centered',
-    'colors',
-    'spaces',
-    'combi-header',
-    'fullheight',
-    'images',
-    'image-teaser',
-];
-const image = screenshot(TAG);
-test.describe('style', () => {
-    test.beforeEach('Setup', async ({ page }) => {
-        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.style.html`);
-    });
-    VARIANTS.forEach(variant => {
-        test(variant, async ({ page }) => {
-            const el = page.getByTestId(variant);
-            await expectScreenshot(el, image(`style-${variant}`));
-        });
-    });
-});
-test.describe('host', () => {
-    test.beforeEach('Setup', async ({ page }) => {
-        await page.setupVisualTest(`/components/${TAG}/test/${TAG}.visual.html`);
-    });
-    VARIANTS.filter(variant => variant !== 'html-tags').forEach(variant => {
-        test(variant, async ({ page }) => {
-            const el = page.getByTestId(variant);
-            await expectScreenshot(el, image(variant));
-        });
-    });
-});