udp-stencil-component-library 25.18.1-beta.6 → 25.18.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/advanced-search_50.cjs.entry.js +111 -41
- package/dist/cjs/ag-grid-base_5.cjs.entry.js +1 -1
- package/dist/cjs/chip-section.cjs.entry.js +2 -2
- package/dist/cjs/color-preview.cjs.entry.js +1 -1
- package/dist/cjs/index-DrMNAZCL.js +4 -0
- package/dist/cjs/inputs-example.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/page-renderer.cjs.entry.js +1 -1
- package/dist/cjs/stencil-library.cjs.js +1 -1
- package/dist/cjs/udp-tab-panel.cjs.entry.js +22 -0
- package/dist/cjs/udp-tab-panel.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.css +0 -5
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js +170 -37
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js.map +1 -1
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.css +2 -4
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js +2 -2
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js.map +1 -1
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css +11 -0
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js +65 -0
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js.map +1 -0
- package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js +1 -1
- package/dist/collection/components/my-component/UI/util/ghost-render/ghost-render.js +1 -1
- package/dist/collection/components/my-component/demo/ambient-demo-container.js +1 -1
- package/dist/collection/components/test-component/inputs-example/inputs-example.js +2 -2
- package/dist/collection/page-renderer/page-renderer.js +1 -1
- package/dist/collection/theme/color-preview/color-preview.js +1 -1
- package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.js +2 -2
- package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/udp-dynamic-container-with-menu.js +1 -1
- package/dist/components/ambient-demo-container2.js +1 -1
- package/dist/components/app-bar2.js +1 -1
- package/dist/components/chip-section.js +2 -2
- package/dist/components/color-preview.js +1 -1
- package/dist/components/ghost-render2.js +1 -1
- package/dist/components/inputs-example.js +2 -2
- package/dist/components/page-renderer.js +1 -1
- package/dist/components/udp-dynamic-container-with-menu2.js +1 -1
- package/dist/components/udp-tab-panel.d.ts +11 -0
- package/dist/components/udp-tab-panel.js +45 -0
- package/dist/components/udp-tab-panel.js.map +1 -0
- package/dist/components/udp-tab2.js +2 -2
- package/dist/components/udp-tab2.js.map +1 -1
- package/dist/components/udp-tabs2.js +114 -40
- package/dist/components/udp-tabs2.js.map +1 -1
- package/dist/docs.json +141 -4
- package/dist/esm/advanced-search_50.entry.js +111 -41
- package/dist/esm/ag-grid-base_5.entry.js +1 -1
- package/dist/esm/chip-section.entry.js +2 -2
- package/dist/esm/color-preview.entry.js +1 -1
- package/dist/esm/index-n-1ZSeAs.js +4 -0
- package/dist/esm/inputs-example.entry.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/page-renderer.entry.js +1 -1
- package/dist/esm/stencil-library.js +1 -1
- package/dist/esm/udp-tab-panel.entry.js +20 -0
- package/dist/esm/udp-tab-panel.entry.js.map +1 -0
- package/dist/stencil-library/advanced-search_50.entry.js +1 -1
- package/dist/stencil-library/advanced-search_50.entry.js.map +1 -1
- package/dist/stencil-library/ag-grid-base_5.entry.js +1 -1
- package/dist/stencil-library/chip-section.entry.js +1 -1
- package/dist/stencil-library/color-preview.entry.js +1 -1
- package/dist/stencil-library/inputs-example.entry.js +1 -1
- package/dist/stencil-library/page-renderer.entry.js +1 -1
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/stencil-library/udp-tab-panel.entry.esm.js.map +1 -0
- package/dist/stencil-library/udp-tab-panel.entry.js +2 -0
- package/dist/stencil-library/udp-tab-panel.entry.js.map +1 -0
- package/dist/types/components/my-component/UI/tabs/tab/tabs/udp-tabs.d.ts +47 -4
- package/dist/types/components/my-component/UI/tabs/tab/udp-tab.d.ts +1 -1
- package/dist/types/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.d.ts +11 -0
- package/dist/types/components.d.ts +68 -2
- package/package.json +1 -1
|
@@ -662,7 +662,7 @@ const AmbientDemoContainer = class {
|
|
|
662
662
|
index.registerInstance(this, hostRef);
|
|
663
663
|
}
|
|
664
664
|
render() {
|
|
665
|
-
return (index.h("div", { key: '
|
|
665
|
+
return (index.h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, index.h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", index.h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), index.h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
|
|
666
666
|
}
|
|
667
667
|
};
|
|
668
668
|
AmbientDemoContainer.style = ambientDemoContainerCss;
|
|
@@ -4547,7 +4547,7 @@ const AppBar = class {
|
|
|
4547
4547
|
index.registerInstance(this, hostRef);
|
|
4548
4548
|
}
|
|
4549
4549
|
render() {
|
|
4550
|
-
return (index.h("div", { key: '
|
|
4550
|
+
return (index.h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, index.h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24__default.default }), index.h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", index.h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), " "), index.h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), index.h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), index.h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), index.h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, index.h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
|
|
4551
4551
|
}
|
|
4552
4552
|
};
|
|
4553
4553
|
AppBar.style = appBarCss;
|
|
@@ -7653,7 +7653,7 @@ const DynamicContainerWithMenu = class {
|
|
|
7653
7653
|
this.udpChipClicked.emit(chipText);
|
|
7654
7654
|
}
|
|
7655
7655
|
render() {
|
|
7656
|
-
return (index.h("div", { key: '
|
|
7656
|
+
return (index.h("div", { key: '99a3ae39a56314eacb1cad4a8088f98acc52ef9d', class: "container" }, index.h("div", { key: 'cf6c29cc6fc435cadcc12f22b61246d03a3fa85b', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index$1) => (index.h("stencil-chip", { color: "secondary", key: index$1, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), index.h("div", { key: '6f06947570a2f227909060d9cbb0c282ed219eda', class: "overflow" }, index.h("udp-pop-over", { key: '11cf2f25c44d69075d24f622c03bdd7418f037af', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, index.h("div", { key: 'c69c2e7eadedaaa70e63da5b7e636050660dd889', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index$1) => (index.h("stencil-chip", { key: index$1, text: child.label, "show-delete": "false" }, " "))))))));
|
|
7657
7657
|
}
|
|
7658
7658
|
get el() { return index.getElement(this); }
|
|
7659
7659
|
static get watchers() { return {
|
|
@@ -8492,7 +8492,7 @@ const UdpSkeletonLoading = class {
|
|
|
8492
8492
|
};
|
|
8493
8493
|
UdpSkeletonLoading.style = udpSkeletonLoadingCss;
|
|
8494
8494
|
|
|
8495
|
-
const udpTabCss = ".tab-panel{display:none
|
|
8495
|
+
const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
|
|
8496
8496
|
|
|
8497
8497
|
const UdpTab = class {
|
|
8498
8498
|
constructor(hostRef) {
|
|
@@ -8524,11 +8524,12 @@ const UdpTab = class {
|
|
|
8524
8524
|
};
|
|
8525
8525
|
UdpTab.style = udpTabCss;
|
|
8526
8526
|
|
|
8527
|
-
const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n to right,\n #ffffff,\n rgba(255, 255, 255, 0)\n )}.scroll-fade.right{right:40px;background:linear-gradient(\n to left,\n #ffffff,\n rgba(255, 255, 255, 0)\n )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.
|
|
8527
|
+
const udpTabsCss = ".tab-container{display:flex;flex-direction:column}.tab-header{background-color:#ffffff;position:relative;display:flex;align-items:center}.tab-scroll-container{display:flex;position:relative;overflow-x:auto;overflow-y:hidden;flex:1;min-width:0}.tab-scroll-container::-webkit-scrollbar{height:4px}.tab-scroll-container::-webkit-scrollbar-track{background:transparent}.tab-scroll-container::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:4px}.tab-scroll-container::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}.tab-header::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:var(--divider-color, #e0e0e0)}.tab-header button{padding:16px;font-size:14px;text-align:center;border:none;background:none;cursor:pointer;outline:none;transition:all 0.22s ease;color:#555555;font-weight:600;opacity:0.9;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:8px}.tab-header.fill .tab-scroll-container{width:100%}.tab-header.fill .tab-scroll-container button{flex-grow:1}.tab-header button.active{color:var(--secondary-color, #344861);opacity:1.0}.tab-header button.scroll-arrow{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;width:40px;padding:0;background:#ffffff;cursor:pointer;font-size:16px;font-weight:bold;color:#757575;z-index:2;transition:color 0.2s ease;flex-shrink:0;opacity:1;gap:0}.tab-header button.scroll-arrow:hover{color:#000}.tab-header button.scroll-arrow.left{left:0}.tab-header button.scroll-arrow.right{right:0}.scroll-fade{position:absolute;top:0;bottom:0;width:30px;z-index:1;pointer-events:none}.scroll-fade.left{left:40px;background:linear-gradient(\n to right,\n #ffffff,\n rgba(255, 255, 255, 0)\n )}.scroll-fade.right{right:40px;background:linear-gradient(\n to left,\n #ffffff,\n rgba(255, 255, 255, 0)\n )}.tab-header button udp-icon{font-size:1.2em;line-height:1}.tab-header button.icon-start{flex-direction:row}.tab-header button.icon-end{flex-direction:row-reverse}.tab-header button.icon-top{flex-direction:column;gap:4px}.tab-header button.icon-bottom{flex-direction:column-reverse;gap:4px}.slider{position:absolute;bottom:0;left:0;height:2px;background-color:var(--secondary-color, #344861);transition:transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),\n width 0.22s cubic-bezier(0.4, 0, 0.2, 1);z-index:1}.tab-header button.disabled{opacity:0.5;cursor:not-allowed}.tab-header button.disabled.active{color:#757575;opacity:0.5}";
|
|
8528
8528
|
|
|
8529
8529
|
const UdpTabs = class {
|
|
8530
8530
|
constructor(hostRef) {
|
|
8531
8531
|
index.registerInstance(this, hostRef);
|
|
8532
|
+
this.udpTabChange = index.createEvent(this, "udpTabChange");
|
|
8532
8533
|
/**
|
|
8533
8534
|
* Specifies the layout variant of the tab header.
|
|
8534
8535
|
*
|
|
@@ -8536,18 +8537,46 @@ const UdpTabs = class {
|
|
|
8536
8537
|
* - `'fill'`: Tabs will stretch to fill the available horizontal space.
|
|
8537
8538
|
*/
|
|
8538
8539
|
this.variant = 'fill';
|
|
8539
|
-
|
|
8540
|
-
|
|
8540
|
+
/**
|
|
8541
|
+
* (Optional) An array of tab configuration objects.
|
|
8542
|
+
* If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
|
|
8543
|
+
* This mode is typically used with controlled tabs.
|
|
8544
|
+
*/
|
|
8545
|
+
this.tabs = [];
|
|
8546
|
+
this.internalActiveTab = 0; // For uncontrolled mode
|
|
8547
|
+
this.tabDetails = []; // Unified details from prop or slot
|
|
8541
8548
|
this.sliderStyle = {
|
|
8542
8549
|
width: '0',
|
|
8543
8550
|
transform: 'translateX(0)',
|
|
8544
8551
|
};
|
|
8545
8552
|
this.showScrollLeft = false;
|
|
8546
8553
|
this.showScrollRight = false;
|
|
8547
|
-
this.
|
|
8554
|
+
this.slottedTabs = []; // Renamed from `tabs`
|
|
8548
8555
|
this.buttonRefs = [];
|
|
8549
8556
|
}
|
|
8557
|
+
/**
|
|
8558
|
+
* Returns true if the component is in controlled mode.
|
|
8559
|
+
*/
|
|
8560
|
+
get isControlled() {
|
|
8561
|
+
return this.value != null;
|
|
8562
|
+
}
|
|
8563
|
+
/**
|
|
8564
|
+
* Returns true if tabs are being provided by the `tabs` prop.
|
|
8565
|
+
*/
|
|
8566
|
+
get useTabsProp() {
|
|
8567
|
+
return this.tabs && this.tabs.length > 0;
|
|
8568
|
+
}
|
|
8569
|
+
/**
|
|
8570
|
+
* Returns the currently active tab index,
|
|
8571
|
+
* respecting controlled or uncontrolled mode.
|
|
8572
|
+
*/
|
|
8573
|
+
get activeTab() {
|
|
8574
|
+
return this.isControlled ? this.value : this.internalActiveTab;
|
|
8575
|
+
}
|
|
8550
8576
|
handleSlotChange() {
|
|
8577
|
+
// If we're using the tabs prop, slot changes are irrelevant
|
|
8578
|
+
if (this.useTabsProp)
|
|
8579
|
+
return;
|
|
8551
8580
|
this.initializeTabs();
|
|
8552
8581
|
}
|
|
8553
8582
|
handleResize() {
|
|
@@ -8559,9 +8588,27 @@ const UdpTabs = class {
|
|
|
8559
8588
|
componentDidLoad() {
|
|
8560
8589
|
this.initializeTabs();
|
|
8561
8590
|
}
|
|
8562
|
-
|
|
8591
|
+
/**
|
|
8592
|
+
* Watcher for uncontrolled state changes.
|
|
8593
|
+
*/
|
|
8594
|
+
onActiveTabChange(newValue) {
|
|
8595
|
+
this.updateActiveTabs();
|
|
8596
|
+
this.updateSliderPosition();
|
|
8597
|
+
this.scrollTabIntoView(newValue);
|
|
8598
|
+
}
|
|
8599
|
+
/**
|
|
8600
|
+
* Watcher for controlled state changes.
|
|
8601
|
+
*/
|
|
8602
|
+
onValueChange(newValue) {
|
|
8563
8603
|
this.updateActiveTabs();
|
|
8564
8604
|
this.updateSliderPosition();
|
|
8605
|
+
this.scrollTabIntoView(newValue);
|
|
8606
|
+
}
|
|
8607
|
+
/**
|
|
8608
|
+
* Watcher for tabs prop changes.
|
|
8609
|
+
*/
|
|
8610
|
+
onTabsPropChange() {
|
|
8611
|
+
this.initializeTabs();
|
|
8565
8612
|
}
|
|
8566
8613
|
onVariantChange() {
|
|
8567
8614
|
requestAnimationFrame(() => {
|
|
@@ -8572,21 +8619,29 @@ const UdpTabs = class {
|
|
|
8572
8619
|
initializeTabs() {
|
|
8573
8620
|
var _a, _b;
|
|
8574
8621
|
this.buttonRefs = [];
|
|
8575
|
-
|
|
8576
|
-
|
|
8577
|
-
|
|
8578
|
-
|
|
8579
|
-
|
|
8580
|
-
|
|
8581
|
-
|
|
8582
|
-
|
|
8583
|
-
|
|
8584
|
-
|
|
8585
|
-
|
|
8586
|
-
|
|
8587
|
-
|
|
8588
|
-
|
|
8589
|
-
|
|
8622
|
+
if (this.useTabsProp) {
|
|
8623
|
+
// --- Prop-based ---
|
|
8624
|
+
this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
|
|
8625
|
+
this.slottedTabs = []; // Ensure we're not tracking slotted tabs
|
|
8626
|
+
}
|
|
8627
|
+
else {
|
|
8628
|
+
// --- Slot-based ---
|
|
8629
|
+
this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
|
|
8630
|
+
this.tabDetails = this.slottedTabs.map(tab => ({
|
|
8631
|
+
label: tab.label,
|
|
8632
|
+
icon: tab.icon,
|
|
8633
|
+
iconPlacement: tab.iconPlacement,
|
|
8634
|
+
hidden: tab.hidden,
|
|
8635
|
+
disabled: tab.disabled,
|
|
8636
|
+
}));
|
|
8637
|
+
}
|
|
8638
|
+
// --- Common Logic ---
|
|
8639
|
+
// In uncontrolled mode, check if the default active tab is invalid.
|
|
8640
|
+
if (!this.isControlled) {
|
|
8641
|
+
if (((_a = this.tabDetails[this.internalActiveTab]) === null || _a === void 0 ? void 0 : _a.hidden) || ((_b = this.tabDetails[this.internalActiveTab]) === null || _b === void 0 ? void 0 : _b.disabled)) {
|
|
8642
|
+
const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
|
|
8643
|
+
this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
|
|
8644
|
+
}
|
|
8590
8645
|
}
|
|
8591
8646
|
this.updateActiveTabs();
|
|
8592
8647
|
requestAnimationFrame(() => {
|
|
@@ -8595,12 +8650,17 @@ const UdpTabs = class {
|
|
|
8595
8650
|
});
|
|
8596
8651
|
}
|
|
8597
8652
|
updateActiveTabs() {
|
|
8598
|
-
|
|
8599
|
-
|
|
8600
|
-
|
|
8653
|
+
// Only update slotted tabs if we're in slot mode
|
|
8654
|
+
if (!this.useTabsProp) {
|
|
8655
|
+
const currentActiveTab = this.activeTab;
|
|
8656
|
+
this.slottedTabs.forEach((tab, index) => {
|
|
8657
|
+
tab.active = index === currentActiveTab;
|
|
8658
|
+
});
|
|
8659
|
+
}
|
|
8660
|
+
// If in prop mode, the <button> 'active' class is handled by render()
|
|
8601
8661
|
}
|
|
8602
8662
|
updateSliderPosition() {
|
|
8603
|
-
const activeButton = this.buttonRefs[this.activeTab];
|
|
8663
|
+
const activeButton = this.buttonRefs[this.activeTab]; // Use getter
|
|
8604
8664
|
if (!activeButton) {
|
|
8605
8665
|
this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
|
|
8606
8666
|
return;
|
|
@@ -8623,7 +8683,18 @@ const UdpTabs = class {
|
|
|
8623
8683
|
if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
|
|
8624
8684
|
return;
|
|
8625
8685
|
}
|
|
8626
|
-
this.
|
|
8686
|
+
if (this.isControlled) {
|
|
8687
|
+
// In controlled mode, emit the event for the parent to handle.
|
|
8688
|
+
// The `onValueChange` watcher will handle UI updates when the prop changes.
|
|
8689
|
+
this.udpTabChange.emit(tabIndex);
|
|
8690
|
+
}
|
|
8691
|
+
else {
|
|
8692
|
+
// In uncontrolled mode, update state directly.
|
|
8693
|
+
// The `onActiveTabChange` watcher will handle UI updates.
|
|
8694
|
+
this.internalActiveTab = tabIndex;
|
|
8695
|
+
}
|
|
8696
|
+
}
|
|
8697
|
+
scrollTabIntoView(tabIndex) {
|
|
8627
8698
|
const tabButton = this.buttonRefs[tabIndex];
|
|
8628
8699
|
const container = this.scrollContainerRef;
|
|
8629
8700
|
if (!tabButton || !container)
|
|
@@ -8634,20 +8705,16 @@ const UdpTabs = class {
|
|
|
8634
8705
|
const safeZonePadding = 70;
|
|
8635
8706
|
const safeZoneLeft = scrollLeft + safeZonePadding;
|
|
8636
8707
|
const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
|
|
8637
|
-
// Check if the tab's left edge is hidden by the left fade
|
|
8638
8708
|
if (tabLeft < safeZoneLeft) {
|
|
8639
|
-
// Scroll to position the tab's left edge at the start of the safe zone
|
|
8640
8709
|
container.scrollTo({
|
|
8641
8710
|
left: tabLeft - safeZonePadding,
|
|
8642
|
-
behavior: 'smooth'
|
|
8711
|
+
behavior: 'smooth',
|
|
8643
8712
|
});
|
|
8644
8713
|
}
|
|
8645
|
-
// Check if the tab's right edge is hidden by the right fade
|
|
8646
8714
|
else if (tabRight > safeZoneRight) {
|
|
8647
|
-
// Scroll to position the tab's right edge at the end of the safe zone
|
|
8648
8715
|
container.scrollTo({
|
|
8649
8716
|
left: tabRight - clientWidth + safeZonePadding,
|
|
8650
|
-
behavior: 'smooth'
|
|
8717
|
+
behavior: 'smooth',
|
|
8651
8718
|
});
|
|
8652
8719
|
}
|
|
8653
8720
|
}
|
|
@@ -8665,25 +8732,28 @@ const UdpTabs = class {
|
|
|
8665
8732
|
container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
|
|
8666
8733
|
}
|
|
8667
8734
|
render() {
|
|
8668
|
-
|
|
8735
|
+
const currentActiveTab = this.activeTab; // Use getter
|
|
8736
|
+
return (index.h("div", { key: 'dd8ac7e3d101993b8df00c97bf561e2502e9f3c1', class: "tab-container" }, index.h("div", { key: '5f70a5c0da906152b130f6eaa98b81bf80485920', class: `tab-header ${this.variant}` }, this.showScrollLeft && (index.h("button", { key: 'e1a3a7d3650ae3703734a51b251600bf12dbed0c', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, index.h("udp-icon", { key: '36e6294b1a775a30906cc0236f8104ad03998c01', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && index.h("div", { key: '8dca0bd111f13c1890fbc010efbabb2aa0440c13', class: "scroll-fade left" }), index.h("div", { key: '966f761c7f3cc45eb5b6737e8dbb63dc75a68325', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index$1) => {
|
|
8669
8737
|
if (tab.hidden) {
|
|
8670
8738
|
return null;
|
|
8671
8739
|
}
|
|
8672
8740
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
8673
8741
|
const iconEl = tab.icon ? index.h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
|
|
8674
8742
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
8675
|
-
const
|
|
8743
|
+
const labelEl = index.h("span", null, tab.label);
|
|
8676
8744
|
return (index.h("button", { class: {
|
|
8677
|
-
'active': index$1 ===
|
|
8745
|
+
'active': index$1 === currentActiveTab,
|
|
8678
8746
|
'has-icon': !!tab.icon,
|
|
8679
8747
|
[`icon-${tab.iconPlacement}`]: !!tab.icon,
|
|
8680
8748
|
'disabled': tab.disabled,
|
|
8681
|
-
}, disabled: tab.disabled, onClick: () => this.tabClicked(index$1), role: "tab", "aria-selected": index$1 ===
|
|
8682
|
-
}), index.h("div", { key: '
|
|
8749
|
+
}, disabled: tab.disabled, onClick: () => this.tabClicked(index$1), role: "tab", "aria-selected": index$1 === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index$1] = el) }, iconEl, labelEl));
|
|
8750
|
+
}), index.h("div", { key: 'df383b17c3e36fc7f261ff6a6c1220a4f923477f', class: "slider", style: this.sliderStyle })), this.showScrollRight && index.h("div", { key: '7f8ae28f6662266a113adbb7ca40a4ef7d0b8427', class: "scroll-fade right" }), this.showScrollRight && (index.h("button", { key: '0ad034fb7dc24388476e0c37bc9cf4196f4145bc', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, index.h("udp-icon", { key: '4cdbf5880b2e30dc6541228323a31e2dd34eabae', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (index.h("div", { key: '2097c674562eb5acfdadda5a05e6f2eed8821f99' }, index.h("slot", { key: '375c96eb85f6581426f72bf1c544538df4c6fdd6' })))));
|
|
8683
8751
|
}
|
|
8684
8752
|
get el() { return index.getElement(this); }
|
|
8685
8753
|
static get watchers() { return {
|
|
8686
|
-
"
|
|
8754
|
+
"internalActiveTab": ["onActiveTabChange"],
|
|
8755
|
+
"value": ["onValueChange"],
|
|
8756
|
+
"tabs": ["onTabsPropChange"],
|
|
8687
8757
|
"variant": ["onVariantChange"]
|
|
8688
8758
|
}; }
|
|
8689
8759
|
};
|
|
@@ -1084,7 +1084,7 @@ const GhostRender = class {
|
|
|
1084
1084
|
// The <slot /> is necessary to prevent the Stencil compiler from
|
|
1085
1085
|
// overly optimizing this component's output and aliasing the
|
|
1086
1086
|
// defineCustomElement export, which breaks downstream wrappers.
|
|
1087
|
-
return (index.h(index.Host, { key: '
|
|
1087
|
+
return (index.h(index.Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, index.h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
|
|
1088
1088
|
}
|
|
1089
1089
|
};
|
|
1090
1090
|
GhostRender.style = ":host {\n display: none;\n }";
|
|
@@ -100,13 +100,13 @@ const ChipSection = class {
|
|
|
100
100
|
}
|
|
101
101
|
render() {
|
|
102
102
|
console.log("Rendering ChipSection", this.visibleFilterChips);
|
|
103
|
-
return (index.h("div", { key: '
|
|
103
|
+
return (index.h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, index.h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, index.h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index$1) => (index.h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index$1), text: chip.label, class: "viewChip" })))), index.h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (index.h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
|
|
104
104
|
if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
|
|
105
105
|
console.log('returning null...');
|
|
106
106
|
return null;
|
|
107
107
|
}
|
|
108
108
|
return (index.h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
|
|
109
|
-
})), index.h("div", { key: '
|
|
109
|
+
})), index.h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index$1) => (index.h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index$1), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (index.h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (index.h("div", { class: "kpiItem" }, index.h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), index.h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
|
|
110
110
|
}
|
|
111
111
|
get el() { return index.getElement(this); }
|
|
112
112
|
static get watchers() { return {
|
|
@@ -18,7 +18,7 @@ const ColorPreview = class {
|
|
|
18
18
|
return (index.h("div", { class: "color-section" }, index.h("unity-typography", { variant: "h4" }, title), index.h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (index.h("div", { key: '
|
|
21
|
+
return (index.h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, index.h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), index.h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, index.h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), index.h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), index.h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, index.h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), index.h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), index.h("div", { key: '15b1b26a27b44cef9da3de647dfed23c5744300f', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
ColorPreview.style = colorPreviewCss;
|
|
@@ -231,6 +231,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
231
231
|
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
232
232
|
/* webpackMode: "lazy" */
|
|
233
233
|
'./udp-split-screen.cjs.entry.js')); }).then(processMod, consoleError);
|
|
234
|
+
case 'udp-tab-panel.cjs':
|
|
235
|
+
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
236
|
+
/* webpackMode: "lazy" */
|
|
237
|
+
'./udp-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
|
|
234
238
|
case 'udp-vertical-spacer.cjs':
|
|
235
239
|
return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
|
|
236
240
|
/* webpackMode: "lazy" */
|
|
@@ -88,7 +88,7 @@ const InputsExample = class {
|
|
|
88
88
|
};
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
|
-
return (index.h("div", { key: '568318c42e44cab4a6a750a4c5819953328887dd', class: "inputs-example" }, index.h("h1", { key: '5637becd6a248192914e63c9c6e8dfc3714f3a15' }, "Input Components Examples"), index.h("section", { key: 'e9dc7d661c548210421400385a404b952d9f1956', class: "example-section" }, index.h("h2", { key: '1577a2c0eae0bcaa0bbfefea1bf186403162c407' }, "Controlled Components"), index.h("p", { key: '3c98d8f5a0c50d3180edf77c89b14b58df9f5d7c' }, "Parent component manages state and passes values to child components."), index.h("div", { key: '93c0227504b3e7b41fa17674883796401951f7e0', class: "input-grid" }, index.h("div", { key: '299b926df1c5146758d10ad3ffc9400b9ee45539', class: "input-example" }, index.h("h3", { key: 'f20a59ab4a449e86c9c2608819bdb548437a361a' }, "Text Field"), index.h("text-field", { key: '8d73d9be252b05655a321a25a1faf13d51087158', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: '74ebcbc54fb2892e31709485bf4ec754fbcf0838', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '572728243b33fae1872160456ea22230450f98d0', class: "input-example" }, index.h("h3", { key: 'd82edbf3ddca5e0ea1cba3a335c7bc7b0bf47e37' }, "Numeric Field"), index.h("numeric-field", { key: '54c858e75aaea42ef52580f31e89e6cfb2872e58', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '0fb607f8d5d2890c9d777792ec86eaf47aa8d467', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: 'a7f8e537d6c769129a66d98ad88306ebcda48da6', class: "input-example" }, index.h("h3", { key: '43cac26cb5a7c97e81d6cb079c853df67b93bc32' }, "Text Area"), index.h("text-area", { key: 'bf6fa1b6edc51798d6db4c8261c3114b62f922e1', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: '4eab773e3ff0faec1bed1b7f06437fc44b370f70', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'b046957511aead089862c702264ba0e742f1b68d', class: "input-example" }, index.h("h3", { key: 'ff62fc57987c3bdbd727bce422df26c4d3bbda8a' }, "Checkbox"), index.h("check-box", { key: '4b4fe082b6215c11575f5cabc385ef45ca4e7bd6', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: '4c65f141f2a8a7477205f6084d69200346bb0755', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: 'a48006413538b9981670434ae6c944e7e58271f9', class: "input-example" }, index.h("h3", { key: '45383efba3e427ff11d43044fa01e57ed471fdc5' }, "Toggle"), index.h("stencil-toggle", { key: '44848de53876d025aec88a2860eb9e60b579f568', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: '3d629c545ba9202e853093ee999ce4eec10601f6', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '4241e9b1fd8664e728d04f3b17ce76b08ccce7b8', class: "input-example" }, index.h("h3", { key: 'd83a696d7301047672071daa973056c379aa174c' }, "Date Selector"), index.h("udp-date-selector", { key: 'd1fdf59f30ad9b4640f614078f718e2e37957f50', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '109f4a7821a45bb4f9e63807db0f456d71bb79e5', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: '38844d4720ddc7c7ffcf3611ec264aaf82771ef9', class: "input-example" }, index.h("h3", { key: '40479e7e8704d9672a55642806d5d9adf76ad5b5' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '88028b3e9499217f4df97f5fc6186891bcd95b18', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '41f26787189f9e38213ab5c12d5e23090e4b73fc', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: '72d82de355d314169aa1786dba5e314a4a3c2780', class: "input-example" }, index.h("h3", { key: '13d248566f080175992873afbce91e0776425351' }, "Time Selector"), index.h("udp-time-selector", { key: '4eef41d123a13fed720ddb5d6f1ff502d12b3382', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '09b646081621e5bbc0ea04e1a6082e2aeecb8ce2', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: 'ebed47a9e2ff7fe2f88726c433e2b9a581dbac2c', class: "input-example" }, index.h("h3", { key: '9a294a5894d1e29b036bc6b773acad0091a7b98b' }, "UDP Selector"), index.h("udp-selector", { key: 'd3a6adf65d0d4a93677b2fa887fda79c726ef819', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '68a33dabe7906580dbc91deab34595aaa6439903', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: '3319c740db491c5eb68011418cac7c7c8551123c', class: "input-example" }, index.h("h3", { key: 'e6d760ebd7e941267da381e1b763d4529a0940ea' }, "File Upload"), index.h("file-upload", { key: 'a1726d26e4d3de052646de14cd9fdaf4d6cc2a34', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '286df59dbec522a45bb0498b0274c9d5b60da51d', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '92e1995b075a1d6a8b08d7121df729b676e0f254', class: "example-section" }, index.h("h2", { key: '99b8b95638ee6289736fe31c9f92de4fc915ab66' }, "Uncontrolled Components"), index.h("p", { key: 'ce0ec4155a0d4e0c578cf310a36054b898046e12' }, "Components manage their own state with initial values."), index.h("div", { key: 'b6be0f3f1de8e43d7d2e3176c9bd0fa80fe41839', class: "input-grid" }, index.h("div", { key: 'f863c9c473e10a46118792f3b1d4f90c0468f312', class: "input-example" }, index.h("h3", { key: '76c13a12b2cf46b786a5c6fd6e7ab09a114422ce' }, "Text Field"), index.h("text-field", { key: '2f002aa2965ba1592614e19cdaf41685eff27a74', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '7a72540333aa14e138b0776a037c9499218b48a1', class: "input-example" }, index.h("h3", { key: 'fe756740f658a568b6b025f801472c88d5a2ff69' }, "Numeric Field"), index.h("numeric-field", { key: '5602a4cfb1439d79b323e7e990c77701fad43c1e', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), index.h("div", { key: '8b01079941128dc419490ae9268f3de12f64bbec', class: "input-example" }, index.h("h3", { key: 'f3bb19ebe3f1eb7860c8670fa05e56100083100c' }, "Text Area"), index.h("text-area", { key: '77b84fd065898b3f53b4f29d49175ca69d0e9a0c', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), index.h("div", { key: '18108e76b0d3cba4d17cb240d991e557e45a4cf0', class: "input-example" }, index.h("h3", { key: 'd7a8665af975ccfc51fdd6637c65cf090b3e64ee' }, "Checkbox"), index.h("check-box", { key: '51c64943d73cae575b8354e63a723ce42a4da7a8', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: 'd850416de27eb55f014f91245ab38658f645ec5e', class: "input-example" }, index.h("h3", { key: '1181811e2e29035b7ebdca214c77fe6994f0f85a' }, "Toggle"), index.h("stencil-toggle", { key: 'f1f911a89e6a325fa136cfef4a8706bf6f7ca0bf', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: '78138f2afb3865b8b726c871d5b66c0a765fdc3b', class: "input-example" }, index.h("h3", { key: '737ebb728f6dc1c3667ee4797470f2b4253ac531' }, "Date Selector"), index.h("udp-date-selector", { key: '46794fcb28892c784028b112e23017f68688fe71', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '7d4321f22573a578f3c97f42ff909c8dba89c239', class: "input-example" }, index.h("h3", { key: 'f5bea7039842c10d1d18c12dbf148a7e4406aaf0' }, "Time Selector"), index.h("udp-time-selector", { key: '59bc40ac5ff2cb5ce2d5cac649456761e4acd024', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: 'd38663af248b165fd945b435d139645778dd15a6', class: "input-example" }, index.h("h3", { key: '4a71a7d7ab4fc85b882a7ad510f106ef8af845e2' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '0e50bb043a1e29c1b1196099182f2cfbe4d5780e', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: 'b0018485ce72a2e345e4324df645c167d605e270', class: "input-example" }, index.h("h3", { key: 'a476c75bee67f99b8190c2eee40bcf3f3681e0f5' }, "UDP Selector"), index.h("udp-selector", { key: '8734d212c8e57b566331ce9a5a3658673979e496', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: '182dc382da022fea80addb395b7e73d0e686db75', class: "example-section" }, index.h("h2", { key: '0e74791316e43917b64aa88437d3195c7e01d518' }, "Form-wrapped Components"), index.h("p", { key: '22f0b0ad471b5a64e6f1e2dd560c4591381deb1d' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: '7d6510a9ac5a7f4b3ff67d6e23d6a61a803cfefa', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
|
|
91
|
+
return (index.h("div", { key: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, index.h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), index.h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, index.h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), index.h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), index.h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, index.h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, index.h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), index.h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), index.h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), index.h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, index.h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), index.h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), index.h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), index.h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, index.h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), index.h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), index.h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), index.h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, index.h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), index.h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), index.h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), index.h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, index.h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), index.h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), index.h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), index.h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, index.h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), index.h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), index.h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), index.h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, index.h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), index.h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), index.h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, index.h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), index.h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), index.h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), index.h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, index.h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), index.h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), index.h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), index.h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, index.h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), index.h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), index.h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), index.h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, index.h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), index.h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), index.h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, index.h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, index.h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), index.h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), index.h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, index.h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), index.h("numeric-field", { key: 'f9e990f8a8b24fff7eda8513c0f33bb62c7a2522', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), index.h("div", { key: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, index.h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), index.h("text-area", { key: 'f89870ede0138fbd4c451de97b442a5eb440674d', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), index.h("div", { key: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, index.h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), index.h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), index.h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, index.h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), index.h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), index.h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, index.h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), index.h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), index.h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, index.h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), index.h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), index.h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, index.h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), index.h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), index.h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, index.h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), index.h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), index.h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, index.h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), index.h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), index.h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
|
|
92
92
|
formTextField: 'Initial form text',
|
|
93
93
|
formNumericField: '25',
|
|
94
94
|
formTextArea: 'Initial form description',
|
|
@@ -97,7 +97,7 @@ const InputsExample = class {
|
|
|
97
97
|
formDate: '2024-02-01',
|
|
98
98
|
formTime: '09:00',
|
|
99
99
|
formSelector: 'option1'
|
|
100
|
-
} }, index.h("div", { key: '
|
|
100
|
+
} }, index.h("div", { key: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, index.h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, index.h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), index.h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, index.h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), index.h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, index.h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), index.h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, index.h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), index.h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, index.h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), index.h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, index.h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), index.h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, index.h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), index.h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, index.h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), index.h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, index.h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), index.h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, index.h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), index.h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, index.h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), index.h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), index.h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, index.h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), index.h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), index.h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, index.h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, index.h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), index.h("udp-selector", { key: '0b79b2f43a252f631176f73403aac729f69c5af6', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), index.h("div", { key: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, index.h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), index.h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), index.h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, index.h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), index.h("file-upload", { key: '7dff9c55cf4741c542c4aae3dc60e36e4a9caa3e', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), index.h("div", { key: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, index.h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), index.h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, index.h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), index.h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), index.h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
|
|
101
101
|
}
|
|
102
102
|
};
|
|
103
103
|
InputsExample.style = inputsExampleCss;
|