@tet/tet-components 1.3.157-testing → 1.4.0-production

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tet/tet-components",
-  "version": "v1.3.157-testing",
+  "version": "v1.4.0-production",
   "description": "A Stencil-based Web Components library for reusable UI elements.",
   "homepage": "https://tet.lv",
   "main": "dist/index.cjs.js",
@@ -37,7 +37,7 @@
     "stencil-storybook": "concurrently --kill-others \"npm run start\" \"npm run storybook\""
   },
   "dependencies": {
-    "@stencil/core": "^4.17.1",
+    "@stencil/core": "^4.19.2",
     "@tet/tet-web-components": "1.45.0",
     "glob": "^11.0.1",
     "query-selector-shadow-dom": "^1.0.1"
@@ -47,20 +47,14 @@
     "@stencil/angular-output-target": "^0.8.4",
     "@stencil/sass": "^3.0.11",
     "@stencil/store": "^2.0.15",
-    "@storybook/addon-essentials": "^8.6.3",
-    "@storybook/addon-storysource": "^8.6.3",
-    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^8.6.3",
-    "@storybook/manager-api": "^8.6.3",
-    "@storybook/source-loader": "^8.6.3",
-    "@storybook/theming": "^8.6.3",
-    "@storybook/web-components": "^8.6.3",
-    "@storybook/web-components-webpack5": "^8.6.3",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/web-components-vite": "^9.1.17",
     "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
+    "eslint-plugin-storybook": "^9.1.17",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -69,7 +63,7 @@
     "prettier": "^3.2.5",
     "process": "^0.11.10",
     "pusher-js": "^8.3.0",
-    "storybook": "^8.6.3",
+    "storybook": "^9.1.17",
     "typescript": "^5.4.5"
   },
   "license": "MIT",

package/dist/cjs/compare-cards-tab-products-filters-58410792.js

@@ -1,99 +0,0 @@
-'use strict';
-
-class CompareCardsTabProductsFilters {
-    constructor(onFilterSelect) {
-        this.onFilterSelect = onFilterSelect;
-        this.availableTvFilters = [];
-        this.allFilters = [];
-        this.currentProducts = {};
-        this.initialize = (productCodes) => {
-            const products = productCodes['products'];
-            const productTags = productCodes['productTags'];
-            this.currentProducts = products;
-            this.availableTvFilters = this.resolveFilters(products, productTags);
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds());
-        };
-        this.getAvailableFilters = () => {
-            return [...this.availableTvFilters];
-        };
-        this.clearFilters = () => {
-            this.availableTvFilters.forEach(filter => {
-                filter.active = false;
-                filter.showIcon = false;
-            });
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], [], this.getFilteredProductIds());
-        };
-        this.resolveFilters = (products, productTags) => {
-            const productCodeSet = new Set(Object.values(products).map(product => product.productCode));
-            return (productTags || [])
-                .map(tag => {
-                const localProducts = (tag.products || []).filter(productCode => productCodeSet.has(productCode));
-                return {
-                    id: tag.tag,
-                    title: tag.title,
-                    products: localProducts,
-                    active: false,
-                    disabled: false,
-                    clickAction: this.filterClickAction.bind(this),
-                };
-            })
-                .filter(filter => filter.products.length > 0);
-        };
-        this.filterClickAction = (filter) => {
-            const availableFilter = this.availableTvFilters.find(({ id }) => id === filter.id);
-            if (!availableFilter)
-                return;
-            if (availableFilter.disabled)
-                return;
-            availableFilter.active = !availableFilter.active;
-            availableFilter.showIcon = !availableFilter.showIcon;
-            this.updateDisabledFilters();
-            this.onFilterSelect([...this.availableTvFilters], this.getActiveFilterIds(), this.getFilteredProductIds());
-        };
-        this.updateDisabledFilters = () => {
-            const activeFilters = this.availableTvFilters.filter(f => f.active);
-            const activeCount = activeFilters.length;
-            let intersection = null;
-            if (activeCount > 0) {
-                intersection = new Set(activeFilters[0].products);
-                for (let i = 1; i < activeFilters.length; i++) {
-                    intersection = new Set([...intersection].filter(productCode => activeFilters[i].products.includes(productCode)));
-                }
-            }
-            for (const filter of this.availableTvFilters) {
-                if (filter.active || activeCount === 0) {
-                    filter.disabled = false;
-                }
-                else {
-                    let simulatedIntersection = intersection ? [...intersection] : filter.products;
-                    if (intersection) {
-                        simulatedIntersection = simulatedIntersection.filter(code => filter.products.includes(code));
-                    }
-                    filter.disabled = simulatedIntersection.length <= 0;
-                    filter.showIcon = false;
-                }
-            }
-        };
-        this.getActiveFilterIds = () => {
-            return this.availableTvFilters.filter(filter => filter.active).map(filter => filter.id);
-        };
-        this.getFilteredProductIds = () => {
-            const activeTags = this.availableTvFilters.filter(tag => tag.active);
-            const allProductCodes = Object.values(this.currentProducts).map(p => p.productCode);
-            if (activeTags.length === 0) {
-                return allProductCodes;
-            }
-            let intersection = [...activeTags[0].products];
-            for (let i = 1; i < activeTags.length; i++) {
-                intersection = intersection.filter(productCode => activeTags[i].products.includes(productCode));
-            }
-            const validSet = new Set(allProductCodes);
-            intersection = intersection.filter(code => validSet.has(code));
-            return intersection;
-        };
-    }
-}
-
-exports.CompareCardsTabProductsFilters = CompareCardsTabProductsFilters;

package/dist/collection/components/advanced/address/tet-address-offers-filters/address-offers-filters.spec.js

@@ -1,105 +0,0 @@
-import { AddressOffersFilters } from "./address-offers-filters";
-const serviceAvailabilityData = {
-    categories: [
-        {
-            products: [],
-            tag: 'internet',
-            subgroups: [
-                {
-                    products: [],
-                    tag: 'internet',
-                    subgroups: []
-                },
-                {
-                    products: ['product_0'],
-                    tag: 'internet',
-                    subgroups: []
-                },
-                {
-                    products: ['product_2', 'product_1'],
-                    tag: 'internet',
-                    subgroups: []
-                },
-                {
-                    products: ['product_that_does_not_exist'],
-                    tag: 'internet',
-                    subgroups: []
-                }
-            ]
-        },
-        {
-            products: [],
-            tag: null,
-            subgroups: [
-                {
-                    products: ['product_3'],
-                    tag: 'bundle',
-                    subgroups: []
-                }
-            ]
-        }
-    ],
-    products: {
-        product_0: {
-            productCode: 'product_0',
-            contractTerms: [
-                {
-                    promotionCode: 'test-promotion-code'
-                }
-            ]
-        },
-        product_1: {
-            productCode: 'product_1',
-            contractTerms: [
-                {
-                    promotionCode: null
-                }
-            ]
-        },
-        product_2: {
-            productCode: 'product_2',
-            contractTerms: [
-                {
-                    promotionCode: 'test-promotion-code-2'
-                }
-            ]
-        },
-        product_3: {
-            productCode: 'product_3',
-            contractTerms: null
-        }
-    }
-};
-describe('address-offers-filters', () => {
-    it.skip('should correctly build filters array', () => {
-        const filters = new AddressOffersFilters(jasmine.createSpy());
-        filters.initialize(serviceAvailabilityData);
-        const result = filters.getAvailableFilters();
-        // "all", "promotions", "internet", "bundle"
-        expect(result.length).toBe(4);
-        expect(result[0]).toEqual(expect.objectContaining({
-            active: true,
-            count: 4,
-            id: 'all',
-            title: 'components-address-offers-tag-all',
-        }));
-        expect(result[1]).toEqual(expect.objectContaining({
-            active: false,
-            count: 2,
-            id: 'promotions',
-            title: 'components-address-offers-tag-promotions',
-        }));
-        expect(result[2]).toEqual(expect.objectContaining({
-            active: false,
-            count: 3,
-            id: 'internet',
-            title: 'components-address-offers-tag-internet',
-        }));
-        expect(result[3]).toEqual(expect.objectContaining({
-            active: false,
-            count: 1,
-            id: 'bundle',
-            title: 'components-address-offers-tag-bundle',
-        }));
-    });
-});

package/dist/collection/components/advanced/address/tet-address-offers-filters/test/tet-address-offers-filters.spec.js

@@ -1,23 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetAddressOffersFilters } from "../tet-address-offers-filters";
-describe('tet-address-offers-filters', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetAddressOffersFilters],
-            html: `<tet-address-offers-filters></tet-address-offers-filters>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-address-offers-filters>
-        <mock:shadow-root>
-          <div class="loader">
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-          </div>
-         <tet-tag-group language="lv" theme="light"></tet-tag-group>
-        </mock:shadow-root>
-      </tet-address-offers-filters>
-    `);
-    });
-});

package/dist/collection/components/advanced/address/tet-address-offers-filters-products/test/tet-address-offers-filters-products.spec.js

@@ -1,23 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TetAddressOffersFiltersProducts } from "../tet-address-offers-filters-products";
-describe('tet-address-offers-filters-products', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetAddressOffersFiltersProducts],
-            html: `<tet-address-offers-filters-products></tet-address-offers-filters-products>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-address-offers-filters-products>
-        <mock:shadow-root>
-          <div class="loader">
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-            <tet-placeholder class="tag-placeholder" height="2rem" width="8rem"></tet-placeholder>
-          </div>
-         <tet-tag-group language="lv" theme="light"></tet-tag-group>
-        </mock:shadow-root>
-      </tet-address-offers-filters-products>
-    `);
-    });
-});

package/dist/collection/components/advanced/address/tet-autocomplete/test/tet-autocomplete.spec.js

@@ -1,110 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetAutocomplete } from "../tet-autocomplete";
-import * as random from "../../../../../services/utils/random";
-jest.spyOn(random, 'randomString').mockReturnValue('randomString');
-describe('tet-autocomplete', () => {
-    it('renders empty', async () => {
-        const page = await newSpecPage({
-            components: [TetAutocomplete],
-            html: `<tet-autocomplete></tet-autocomplete>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-autocomplete class="autocomplete">
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </tet-autocomplete>
-    `);
-    });
-    it('renders slot content', async () => {
-        const page = await newSpecPage({
-            components: [TetAutocomplete],
-            html: `
-        <tet-autocomplete>
-          <input type="text" class="autocomplete-input"/>
-        </tet-autocomplete>`
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-autocomplete class="autocomplete">
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-        <input type="text" class="autocomplete-input"/>
-      </tet-autocomplete>
-    `);
-    });
-    it('renders should not render autocomplete options before interaction', async () => {
-        const filterAction = jest.fn();
-        filterAction.mockReturnValue([
-            { label: 'Test Value', value: null },
-            { label: 'test value', value: null }
-        ]);
-        const page = await newSpecPage({
-            components: [TetAutocomplete],
-            template: () => (h("tet-autocomplete", { optionsFilterAction: filterAction }, h("input", { type: "text", class: "autocomplete-input", value: "any value" })))
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-autocomplete class="autocomplete">
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-        <input type="text" class="autocomplete-input" value="any value"/>
-      </tet-autocomplete>
-    `);
-    });
-    it('renders autocomplete options on first click on the element', async () => {
-        const filterAction = jest.fn();
-        filterAction.mockReturnValue([
-            { label: 'Test Value', value: null },
-            { label: 'test value', value: null }
-        ]);
-        const page = await newSpecPage({
-            components: [TetAutocomplete],
-            template: () => (h("tet-autocomplete", { optionsFilterAction: filterAction }, h("input", { type: "text", class: "autocomplete-input", value: "any value" })))
-        });
-        page.root.querySelector('input').focus();
-        await page.waitForChanges();
-        expect(page.root).toEqualHtml(`
-      <tet-autocomplete class="autocomplete">
-        <mock:shadow-root>
-          <slot></slot>
-          <div class="autocomplete-options-container" role="combobox" aria-expanded part="autocomplete-options-container">
-            <ul class="autocomplete-options" role="listbox" tabindex="-1">
-              <li class="autocomplete-options-item" id="randomString-0" role="option"><span>Test Value</span></li>
-              <li class="autocomplete-options-item" id="randomString-1" role="option"><span>test value</span></li>
-            </ul>
-          </div>
-        </mock:shadow-root>
-        <input type="text" class="autocomplete-input" value="any value"/>
-      </tet-autocomplete>
-    `);
-    });
-    it('highlights parts of the options based on the keywords', async () => {
-        const filterAction = jest.fn();
-        filterAction.mockReturnValue([
-            { label: 'This is the first label', value: null },
-            { label: 'THIS IS ALSO A LABEL', value: null }
-        ]);
-        const page = await newSpecPage({
-            components: [TetAutocomplete],
-            template: () => (h("tet-autocomplete", { optionsFilterAction: filterAction }, h("input", { type: "text", class: "autocomplete-input", value: "this label" })))
-        });
-        page.root.querySelector('input').focus();
-        await page.waitForChanges();
-        expect(page.root).toEqualHtml(`
-      <tet-autocomplete class="autocomplete">
-        <mock:shadow-root>
-          <slot></slot>
-          <div class="autocomplete-options-container" role="combobox" aria-expanded part="autocomplete-options-container">
-            <ul class="autocomplete-options" role="listbox" tabindex="-1">
-              <li class="autocomplete-options-item" id="randomString-0" role="option"><span>This is the first label</span></li>
-              <li class="autocomplete-options-item" id="randomString-1" role="option"><span>THIS IS ALSO A LABEL</span></li>
-            </ul>
-          </div>
-        </mock:shadow-root>
-        <input type="text" class="autocomplete-input" value="this label"/>
-      </tet-autocomplete>
-    `);
-    });
-});

package/dist/collection/components/advanced/cards/tet-b2b-compare-card/test/tet-b2b-compare-card.spec.js

@@ -1,86 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetB2bCompareCard } from "../tet-b2b-compare-card";
-const options = {
-    id: 'BUSINESS_M365_PACKAGE_BASIC',
-    title: 'Zelts',
-    subtitle: `Līdz 300 Mbit/s `,
-    isBestChoice: true,
-    price: 15.99,
-    discountPrice: 9.99,
-    benefits: [
-        'Tiešsaistes Office programmatūra',
-        'Versija ar e-pastu un videokonferencēm',
-        'Iespēja izvēlēties licenci ar/bez MS Teams'
-    ],
-    contract: 'https://cdn.tet.lv/webplatform-metastore-sit/products/uKwgx9g6Sv.php',
-    counterOptions: {
-        minValue: 2,
-        maxValue: 15,
-        label: 'components-b2b-calculator-computer-count',
-        defaultValue: 7
-    }
-};
-describe('tet-b2b-compare-card', () => {
-    it('renders', async () => {
-        const page = await newSpecPage({
-            components: [TetB2bCompareCard],
-            template: () => h("tet-b2b-compare-card", { options: options })
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-b2b-compare-card>
-        <mock:shadow-root>
-        <div class="card__wrapper">
-          <div class="card__badge">
-            components-b2b-configurator-best-choice
-          </div>
-          <div 
-            aria-labelledby="title-BUSINESS_M365_PACKAGE_BASIC" 
-            class="card light" role="button" 
-            tabindex="0"
-          >
-            <section class="offer">
-              <div class="offer__header">
-                <div class="offer__top-info">
-                  <h3 class="offer__title" id="title-BUSINESS_M365_PACKAGE_BASIC">
-                    Zelts
-                  </h3>
-                  <div class="offer__price">
-                    9.99
-                    <span class="offer__price-suffix">
-                      <span>€/mēn.</span>
-                    </span>
-                  </div>
-                </div>
-                <p class="offer__subtitle">
-                  Līdz 300 Mbit/s
-                </p>
-              </div>
-              <hr class="divider divider--slim">
-              <tet-text-list class="offer__benefits" listicon="tc-check" theme="light" withicon="">
-                <span>
-                  Tiešsaistes Office programmatūra
-                </span>
-                <span>
-                  Versija ar e-pastu un videokonferencēm
-                </span>
-                <span>
-                  Iespēja izvēlēties licenci ar/bez MS Teams
-                </span>
-              </tet-text-list>
-              <div class="offer__contract-link">
-                <a class="light tet-link" href="https://cdn.tet.lv/webplatform-metastore-sit/products/uKwgx9g6Sv.php" rel="noopener noreferrer" target="_blank">
-                  components-b2b-configurator-contract-link-label
-                  <span class="sr-only">
-                    components-a11y-open-link-in-new-window
-                  </span>
-                </a>
-              </div>
-            </section>
-          </div>
-        </div>
-        </mock:shadow-root>
-      </tet-b2b-compare-card>
-    `);
-    });
-});

package/dist/collection/components/advanced/cards/tet-card-list/test/tet-card-list.spec.js

@@ -1,69 +0,0 @@
-import { h } from "@stencil/core";
-import { newSpecPage } from "@stencil/core/testing";
-import { TetCardList } from "../tet-card-list";
-describe('tet-card-list', () => {
-    it('renders empty', async () => {
-        const page = await newSpecPage({
-            components: [TetCardList],
-            template: () => h("tet-card-list", { withScrollbar: false, withMouseDrag: false }),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-card-list>
-        <mock:shadow-root>
-          <div class="tet-card-list__container light" part="card-list-container">
-            <div class="tet-card-list__scroll-container">
-              <div part="card-list" style="display: grid; grid-auto-flow: column; position: relative; overflow: hidden; width: 100%; height: 100%;">
-                <div part="scroll-container" class="tet-card-list"
-                     style="overflow: visible; position: relative; left: 0px; display: grid; grid-auto-flow: column;">
-                  <slot></slot>
-                </div>
-              </div>
-            </div>
-            <tet-button class="tet-card-list__control tet-card-list__control--left" iconmode="" theme="light">
-              <tet-icon class="tet-card-list__control__icon" name="chevron-left"></tet-icon>
-            </tet-button>
-            <tet-button class="tet-card-list__control tet-card-list__control--right" iconmode="" theme="light">
-              <tet-icon class="tet-card-list__control__icon" name="chevron-right"></tet-icon>
-            </tet-button>
-            <div class="tet-card-list--hidden tet-card-list__scroll">
-              <div class="tet-card-list__scroll--thumb"></div>
-            </div>
-          </div>
-        </mock:shadow-root>
-      </tet-card-list>
-    `);
-    });
-    it('renders a list with items in dark theme', async () => {
-        const page = await newSpecPage({
-            components: [TetCardList],
-            template: () => (h("tet-card-list", { withScrollbar: false, withMouseDrag: false, theme: "dark" }, h("div", { id: "item0" }), h("div", { id: "item1" }))),
-        });
-        expect(page.root).toEqualHtml(`
-      <tet-card-list>
-        <mock:shadow-root>
-        <div class="tet-card-list__container dark" part="card-list-container">
-          <div class="tet-card-list__scroll-container">
-            <div part="card-list" style="display: grid; grid-auto-flow: column; position: relative; overflow: hidden; width: 100%; height: 100%;">
-              <div part="scroll-container" class="tet-card-list"
-                   style="overflow: visible; position: relative; left: 0px; display: grid; grid-auto-flow: column;">
-                <slot></slot>
-              </div>
-            </div>
-          </div>
-          <tet-button class="tet-card-list__control tet-card-list__control--left" iconmode="" theme="dark">
-            <tet-icon class="tet-card-list__control__icon" name="chevron-left"></tet-icon>
-          </tet-button>
-          <tet-button class="tet-card-list__control tet-card-list__control--right" iconmode="" theme="dark">
-            <tet-icon class="tet-card-list__control__icon" name="chevron-right"></tet-icon>
-          </tet-button>
-          <div class="tet-card-list--hidden tet-card-list__scroll">
-            <div class="tet-card-list__scroll--thumb"></div>
-          </div>
-        </div>
-        </mock:shadow-root>
-        <div id="item0"></div>
-        <div id="item1"></div>
-      </tet-card-list>
-    `);
-    });
-});