ux4g-components-web 1.4.0 → 1.5.0

package/dist/__tests__/css-bundle.phase10.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 0: CSS bundle contains all Phase 10 component selectors
+ * Tag: Feature: ux4g-phase10-components, Property 0
+ * Validates: Requirements 1.12, 2.14, 3.16, 6.1–6.6
+ *
+ * For each Phase 10 component, assert a representative selector from that
+ * component's CSS file is present in the built styles/ux4g.css bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase10.property.test.js

@@ -0,0 +1,64 @@
+/**
+ * Property 0: CSS bundle contains all Phase 10 component selectors
+ * Tag: Feature: ux4g-phase10-components, Property 0
+ * Validates: Requirements 1.12, 2.14, 3.16, 6.1–6.6
+ *
+ * For each Phase 10 component, assert a representative selector from that
+ * component's CSS file is present in the built styles/ux4g.css bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each of the 3 new Phase 10 CSS files
+const PHASE10_SELECTORS = [
+    // time-slot.css
+    '.ux4g-time-slot-weekly-container',
+    '.ux4g-time-slot-compact-container',
+    // footer.css
+    '.ux4g-footer-primary',
+    '.ux4g-footer-dark',
+    // result-list.css
+    '.ux4g-result-list',
+    '.ux4g-result-list-v1',
+];
+/**
+ * Property 0: CSS bundle contains all Phase 10 component selectors
+ * Tag: Feature: ux4g-phase10-components, Property 0
+ * Validates: Requirements 1.12, 2.14, 3.16, 6.1–6.6
+ */
+describe('Property 0: CSS bundle contains all Phase 10 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Phase 10 selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * Uses fc.constant(true) as the trivial arbitrary since the CSS bundle is a
+     * static file read from disk on each run — the property holds unconditionally
+     * on every run.
+     *
+     * **Validates: Requirements 1.12, 2.14, 3.16, 6.1–6.6**
+     */
+    it('Feature: ux4g-phase10-components, Property 0 — CSS bundle contains all Phase 10 component selectors', () => {
+        fc.assert(fc.property(fc.constant(true), (_) => {
+            for (const selector of PHASE10_SELECTORS) {
+                if (!cssContent.includes(selector)) {
+                    return false;
+                }
+            }
+            return true;
+        }), { numRuns: 5 });
+    });
+});

package/dist/__tests__/css-bundle.phase5.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 10: CSS bundle contains all new Phase 5 component selectors
+ * Tag: Feature: ux4g-phase5-components, Property 10
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ *
+ * For each Phase 5 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase5.property.test.js

@@ -0,0 +1,126 @@
+/**
+ * Property 10: CSS bundle contains all new Phase 5 component selectors
+ * Tag: Feature: ux4g-phase5-components, Property 10
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ *
+ * For each Phase 5 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each Phase 5 component
+const CHECKBOX_SELECTORS = [
+    '.ux4g-checkbox',
+    '.ux4g-checkbox-sm',
+    '.ux4g-checkbox-md',
+    '.ux4g-checkbox-lg',
+    '.ux4g-checkbox-error',
+];
+const RADIO_SELECTORS = [
+    '.ux4g-radio',
+    '.ux4g-radio-sm',
+    '.ux4g-radio-md',
+    '.ux4g-radio-lg',
+    '.ux4g-radio-error',
+];
+const SWITCH_SELECTORS = [
+    '.ux4g-switch',
+    '.ux4g-switch-sm',
+    '.ux4g-switch-md',
+    '.ux4g-switch-lg',
+];
+const CARD_SELECTORS = [
+    '.ux4g-card',
+    '.ux4g-card-solid',
+    '.ux4g-card-outline',
+    '.ux4g-card-vertical',
+    '.ux4g-card-horizontal',
+];
+const INPUT_SELECTORS = [
+    '.ux4g-input-container',
+    '.ux4g-input-sm',
+    '.ux4g-input-md',
+    '.ux4g-input-lg',
+    '.ux4g-input-xl',
+    '.ux4g-input-default',
+    '.ux4g-input-error',
+    '.ux4g-input-success',
+    '.ux4g-input-warning',
+];
+/**
+ * Property 10: CSS bundle contains all new Phase 5 component selectors
+ * Tag: Feature: ux4g-phase5-components, Property 10
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ */
+describe('Property 10: CSS bundle contains all new Phase 5 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Checkbox selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase5-components, Property 10 — CSS bundle contains Checkbox selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...CHECKBOX_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+    /**
+     * For any selector from the Radio selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase5-components, Property 10 — CSS bundle contains Radio selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...RADIO_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+    /**
+     * For any selector from the Switch selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase5-components, Property 10 — CSS bundle contains Switch selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...SWITCH_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+    /**
+     * For any selector from the Card selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase5-components, Property 10 — CSS bundle contains Card selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...CARD_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+    /**
+     * For any selector from the Input selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase5-components, Property 10 — CSS bundle contains Input selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...INPUT_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+});

package/dist/__tests__/css-bundle.phase6.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 6 component selectors
+ * Tag: Feature: ux4g-phase6-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ *
+ * For each Phase 6 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase6.property.test.js

@@ -0,0 +1,73 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 6 component selectors
+ * Tag: Feature: ux4g-phase6-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ *
+ * For each Phase 6 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each Phase 6 component
+// Note: .ux4g-dropdown-selection does NOT exist as a standalone class in the vendor CSS —
+// the selection type is styled implicitly via :not(.ux4g-dropdown-button):not(.ux4g-dropdown-overflow).
+// We use .ux4g-dropdown-button as the representative dropdown type selector instead.
+const PHASE6_SELECTORS = [
+    // List
+    '.ux4g-list',
+    '.ux4g-list-default',
+    '.ux4g-list-m',
+    // Dropdown
+    '.ux4g-dropdown',
+    '.ux4g-dropdown-button',
+    '.ux4g-dropdown-md',
+    // Combobox
+    '.ux4g-combobox',
+    '.ux4g-combobox-single',
+    '.ux4g-combobox-md',
+    // Modal
+    '.ux4g-modal-backdrop',
+    '.ux4g-modal-m',
+    '.ux4g-modal-backdrop-50',
+    // Alert / Toast
+    '.ux4g-alert',
+    '.ux4g-alert-info',
+    '.ux4g-context-alert',
+    '.ux4g-alert-container',
+    // Search
+    '.ux4g-search-container',
+    '.ux4g-search-m',
+];
+/**
+ * Property 0: CSS bundle contains all new Phase 6 component selectors
+ * Tag: Feature: ux4g-phase6-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ */
+describe('Property 0: CSS bundle contains all new Phase 6 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Phase 6 selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6**
+     */
+    it('Feature: ux4g-phase6-components, Property 0 — CSS bundle contains all Phase 6 component selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...PHASE6_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+});

package/dist/__tests__/css-bundle.phase7.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 7 component selectors
+ * Tag: Feature: ux4g-phase7-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ *
+ * For each Phase 7 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase7.property.test.js

@@ -0,0 +1,76 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 7 component selectors
+ * Tag: Feature: ux4g-phase7-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ *
+ * For each Phase 7 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each Phase 7 component
+const PHASE7_SELECTORS = [
+    // Pagination
+    '.ux4g-pagination',
+    '.ux4g-pagination-dotted',
+    '.ux4g-pagination-solid',
+    '.ux4g-pagination-translucent',
+    // Table
+    '.ux4g-table',
+    '.ux4g-table-m',
+    '.ux4g-table-column-dividers',
+    '.ux4g-table-zebra-rows',
+    '.ux4g-table-interactive',
+    // Popover
+    '.ux4g-popover',
+    '.ux4g-popover-bottom',
+    '.ux4g-popover-top-start',
+    // Tooltip
+    '.ux4g-tooltip-wrapper',
+    '.ux4g-tooltip',
+    '.ux4g-tooltip-top-center',
+    '.ux4g-tooltip-s',
+    // Tab
+    '.ux4g-tab',
+    '.ux4g-tab-underline',
+    '.ux4g-tab-md',
+    '.ux4g-tab-vertical',
+    // Icon Button
+    '.ux4g-icon-btn',
+    '.ux4g-icon-btn-primary',
+    '.ux4g-icon-btn-md',
+    '.ux4g-icon-btn-pill',
+];
+/**
+ * Property 0: CSS bundle contains all new Phase 7 component selectors
+ * Tag: Feature: ux4g-phase7-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6
+ */
+describe('Property 0: CSS bundle contains all new Phase 7 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Phase 7 selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5, 2.6**
+     */
+    it('Feature: ux4g-phase7-components, Property 0 — CSS bundle contains all Phase 7 component selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...PHASE7_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+});

package/dist/__tests__/css-bundle.phase8.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 8 component selectors
+ * Tag: Feature: ux4g-phase8-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ *
+ * For each Phase 8 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase8.property.test.js

@@ -0,0 +1,67 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 8 component selectors
+ * Tag: Feature: ux4g-phase8-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ *
+ * For each Phase 8 component, generate a representative selector from that
+ * component's set and assert it is present in the CSS bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each Phase 8 component
+const PHASE8_SELECTORS = [
+    // Accessibility Bar
+    '.ux4g-topbar',
+    '.ux4g-topbar__wrap',
+    '.ux4g-topbar__skip',
+    // Accordion
+    '.ux4g-accordion',
+    '.ux4g-accordion-arrow-left',
+    '.ux4g-accordion-bordered',
+    // Stepper
+    '.ux4g-stepper',
+    '.ux4g-stepper-vertical',
+    '.ux4g-stepper-horizontal',
+    '.ux4g-stepper-center',
+    '.ux4g-stepper-bottom-line',
+    // Slider
+    '.ux4g-slider-field',
+    '.ux4g-slider-md',
+    // Drawer
+    '.ux4g-drawer',
+    '.ux4g-drawer-right',
+    '.ux4g-drawer-open',
+];
+/**
+ * Property 0: CSS bundle contains all new Phase 8 component selectors
+ * Tag: Feature: ux4g-phase8-components, Property 0
+ * Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5
+ */
+describe('Property 0: CSS bundle contains all new Phase 8 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Phase 8 selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * **Validates: Requirements 2.1, 2.2, 2.3, 2.4, 2.5**
+     */
+    it('Feature: ux4g-phase8-components, Property 0 — CSS bundle contains all Phase 8 component selectors', () => {
+        fc.assert(fc.property(fc.constantFrom(...PHASE8_SELECTORS), (selector) => {
+            return cssContent.includes(selector);
+        }), { numRuns: 20 });
+    });
+});

package/dist/__tests__/css-bundle.phase9.property.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 9 component selectors
+ * Tag: Feature: ux4g-phase9-components, Property 0
+ * Validates: Requirements 16.5-16.18
+ *
+ * For each Phase 9 component, assert a representative selector from that
+ * component's CSS file is present in the built styles/ux4g.css bundle.
+ */
+export {};

package/dist/__tests__/css-bundle.phase9.property.test.js

@@ -0,0 +1,93 @@
+/**
+ * Property 0: CSS bundle contains all new Phase 9 component selectors
+ * Tag: Feature: ux4g-phase9-components, Property 0
+ * Validates: Requirements 16.5-16.18
+ *
+ * For each Phase 9 component, assert a representative selector from that
+ * component's CSS file is present in the built styles/ux4g.css bundle.
+ */
+import * as fc from 'fast-check';
+import * as fs from 'fs';
+import * as path from 'path';
+// Resolve path to styles/ux4g.css relative to this test file
+const CSS_BUNDLE_PATH = path.resolve(__dirname, '../../styles/ux4g.css');
+// Representative selectors for each of the 14 new Phase 9 CSS files
+const PHASE9_SELECTORS = [
+    // date-time.css
+    '.ux4g-date-picker-container',
+    '.ux4g-time-picker-container',
+    // status-pipeline.css
+    '.ux4g-status-pipeline-stepper',
+    '.ux4g-status-pipeline-vertical',
+    // journey-timeline.css
+    '.ux4g-journey-timeline',
+    '.ux4g-journey-timeline--vertical',
+    // form-field-group.css
+    '.ux4g-form-group',
+    // otp.css
+    '.ux4g-otp',
+    '.ux4g-otp-success',
+    // upload.css
+    '.ux4g-upload',
+    '.ux4g-upload-state-error',
+    // progress-indicator.css
+    '.ux4g-progress-bar',
+    '.ux4g-progress-circle',
+    // feedback.css
+    '.ux4g-feedback',
+    // draft-status-bar.css
+    '.ux4g-draft-status-bar',
+    '.ux4g-auto-draft-status-bar',
+    '.ux4g-success-draft-status-bar',
+    // sla-progress-indicator.css
+    '.ux4g-sla-circle',
+    '.ux4g-sla-linear',
+    '.ux4g-sla-badge',
+    // carousel.css
+    '.ux4g-carousel',
+    // empty-state.css
+    '.ux4g-empty-state',
+    // chips-group.css
+    '.ux4g-filter-chip-group',
+    '.ux4g-choice-chip-group',
+    // navbar.css
+    '.ux4g-navbar',
+];
+/**
+ * Property 0: CSS bundle contains all new Phase 9 component selectors
+ * Tag: Feature: ux4g-phase9-components, Property 0
+ * Validates: Requirements 16.5-16.18
+ */
+describe('Property 0: CSS bundle contains all new Phase 9 component selectors', () => {
+    let cssContent;
+    beforeAll(() => {
+        if (fs.existsSync(CSS_BUNDLE_PATH)) {
+            cssContent = fs.readFileSync(CSS_BUNDLE_PATH, 'utf8');
+        }
+        else {
+            cssContent = '';
+        }
+    });
+    it('styles/ux4g.css exists', () => {
+        expect(fs.existsSync(CSS_BUNDLE_PATH)).toBe(true);
+    });
+    /**
+     * For any selector from the Phase 9 selector set,
+     * that selector SHALL appear in styles/ux4g.css.
+     *
+     * Uses fc.constant(null) as the trivial arbitrary since the CSS bundle is a
+     * static file — the property holds unconditionally on every run.
+     *
+     * **Validates: Requirements 16.5-16.18**
+     */
+    it('Feature: ux4g-phase9-components, Property 0 — CSS bundle contains all Phase 9 component selectors', () => {
+        fc.assert(fc.property(fc.constant(null), (_) => {
+            for (const selector of PHASE9_SELECTORS) {
+                if (!cssContent.includes(selector)) {
+                    return false;
+                }
+            }
+            return true;
+        }), { numRuns: 20 });
+    });
+});

package/dist/__tests__/css-bundle.property.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Property 1: CSS bundle contains all button class names
+ * Tag: Feature: ux4g-button-npm-package, Property 1
+ * Validates: Requirements 2.3, 2.5, 2.6
+ *
+ * Property 2: CSS class names are ux4g-prefixed
+ * Tag: Feature: ux4g-button-npm-package, Property 2
+ * Validates: Requirements 2.8
+ *
+ * Property 3: CSS bundle preserves layer ordering
+ * Tag: Feature: ux4g-button-npm-package, Property 3
+ * Validates: Requirements 2.1
+ */
+export {};