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
|
@@ -619,7 +619,7 @@ const AmbientDemoContainer = class {
|
|
|
619
619
|
registerInstance(this, hostRef);
|
|
620
620
|
}
|
|
621
621
|
render() {
|
|
622
|
-
return (h("div", { key: '
|
|
622
|
+
return (h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
|
|
623
623
|
}
|
|
624
624
|
};
|
|
625
625
|
AmbientDemoContainer.style = ambientDemoContainerCss;
|
|
@@ -4504,7 +4504,7 @@ const AppBar = class {
|
|
|
4504
4504
|
registerInstance(this, hostRef);
|
|
4505
4505
|
}
|
|
4506
4506
|
render() {
|
|
4507
|
-
return (h("div", { key: '
|
|
4507
|
+
return (h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), " "), h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
|
|
4508
4508
|
}
|
|
4509
4509
|
};
|
|
4510
4510
|
AppBar.style = appBarCss;
|
|
@@ -7610,7 +7610,7 @@ const DynamicContainerWithMenu = class {
|
|
|
7610
7610
|
this.udpChipClicked.emit(chipText);
|
|
7611
7611
|
}
|
|
7612
7612
|
render() {
|
|
7613
|
-
return (h("div", { key: '
|
|
7613
|
+
return (h("div", { key: '99a3ae39a56314eacb1cad4a8088f98acc52ef9d', class: "container" }, h("div", { key: 'cf6c29cc6fc435cadcc12f22b61246d03a3fa85b', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '6f06947570a2f227909060d9cbb0c282ed219eda', class: "overflow" }, h("udp-pop-over", { key: '11cf2f25c44d69075d24f622c03bdd7418f037af', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'c69c2e7eadedaaa70e63da5b7e636050660dd889', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
|
|
7614
7614
|
}
|
|
7615
7615
|
get el() { return getElement(this); }
|
|
7616
7616
|
static get watchers() { return {
|
|
@@ -8449,7 +8449,7 @@ const UdpSkeletonLoading = class {
|
|
|
8449
8449
|
};
|
|
8450
8450
|
UdpSkeletonLoading.style = udpSkeletonLoadingCss;
|
|
8451
8451
|
|
|
8452
|
-
const udpTabCss = ".tab-panel{display:none
|
|
8452
|
+
const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
|
|
8453
8453
|
|
|
8454
8454
|
const UdpTab = class {
|
|
8455
8455
|
constructor(hostRef) {
|
|
@@ -8481,11 +8481,12 @@ const UdpTab = class {
|
|
|
8481
8481
|
};
|
|
8482
8482
|
UdpTab.style = udpTabCss;
|
|
8483
8483
|
|
|
8484
|
-
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}.
|
|
8484
|
+
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}";
|
|
8485
8485
|
|
|
8486
8486
|
const UdpTabs = class {
|
|
8487
8487
|
constructor(hostRef) {
|
|
8488
8488
|
registerInstance(this, hostRef);
|
|
8489
|
+
this.udpTabChange = createEvent(this, "udpTabChange");
|
|
8489
8490
|
/**
|
|
8490
8491
|
* Specifies the layout variant of the tab header.
|
|
8491
8492
|
*
|
|
@@ -8493,18 +8494,46 @@ const UdpTabs = class {
|
|
|
8493
8494
|
* - `'fill'`: Tabs will stretch to fill the available horizontal space.
|
|
8494
8495
|
*/
|
|
8495
8496
|
this.variant = 'fill';
|
|
8496
|
-
|
|
8497
|
-
|
|
8497
|
+
/**
|
|
8498
|
+
* (Optional) An array of tab configuration objects.
|
|
8499
|
+
* If provided, this will be used to render tabs instead of slotted `<udp-tab>` components.
|
|
8500
|
+
* This mode is typically used with controlled tabs.
|
|
8501
|
+
*/
|
|
8502
|
+
this.tabs = [];
|
|
8503
|
+
this.internalActiveTab = 0; // For uncontrolled mode
|
|
8504
|
+
this.tabDetails = []; // Unified details from prop or slot
|
|
8498
8505
|
this.sliderStyle = {
|
|
8499
8506
|
width: '0',
|
|
8500
8507
|
transform: 'translateX(0)',
|
|
8501
8508
|
};
|
|
8502
8509
|
this.showScrollLeft = false;
|
|
8503
8510
|
this.showScrollRight = false;
|
|
8504
|
-
this.
|
|
8511
|
+
this.slottedTabs = []; // Renamed from `tabs`
|
|
8505
8512
|
this.buttonRefs = [];
|
|
8506
8513
|
}
|
|
8514
|
+
/**
|
|
8515
|
+
* Returns true if the component is in controlled mode.
|
|
8516
|
+
*/
|
|
8517
|
+
get isControlled() {
|
|
8518
|
+
return this.value != null;
|
|
8519
|
+
}
|
|
8520
|
+
/**
|
|
8521
|
+
* Returns true if tabs are being provided by the `tabs` prop.
|
|
8522
|
+
*/
|
|
8523
|
+
get useTabsProp() {
|
|
8524
|
+
return this.tabs && this.tabs.length > 0;
|
|
8525
|
+
}
|
|
8526
|
+
/**
|
|
8527
|
+
* Returns the currently active tab index,
|
|
8528
|
+
* respecting controlled or uncontrolled mode.
|
|
8529
|
+
*/
|
|
8530
|
+
get activeTab() {
|
|
8531
|
+
return this.isControlled ? this.value : this.internalActiveTab;
|
|
8532
|
+
}
|
|
8507
8533
|
handleSlotChange() {
|
|
8534
|
+
// If we're using the tabs prop, slot changes are irrelevant
|
|
8535
|
+
if (this.useTabsProp)
|
|
8536
|
+
return;
|
|
8508
8537
|
this.initializeTabs();
|
|
8509
8538
|
}
|
|
8510
8539
|
handleResize() {
|
|
@@ -8516,9 +8545,27 @@ const UdpTabs = class {
|
|
|
8516
8545
|
componentDidLoad() {
|
|
8517
8546
|
this.initializeTabs();
|
|
8518
8547
|
}
|
|
8519
|
-
|
|
8548
|
+
/**
|
|
8549
|
+
* Watcher for uncontrolled state changes.
|
|
8550
|
+
*/
|
|
8551
|
+
onActiveTabChange(newValue) {
|
|
8552
|
+
this.updateActiveTabs();
|
|
8553
|
+
this.updateSliderPosition();
|
|
8554
|
+
this.scrollTabIntoView(newValue);
|
|
8555
|
+
}
|
|
8556
|
+
/**
|
|
8557
|
+
* Watcher for controlled state changes.
|
|
8558
|
+
*/
|
|
8559
|
+
onValueChange(newValue) {
|
|
8520
8560
|
this.updateActiveTabs();
|
|
8521
8561
|
this.updateSliderPosition();
|
|
8562
|
+
this.scrollTabIntoView(newValue);
|
|
8563
|
+
}
|
|
8564
|
+
/**
|
|
8565
|
+
* Watcher for tabs prop changes.
|
|
8566
|
+
*/
|
|
8567
|
+
onTabsPropChange() {
|
|
8568
|
+
this.initializeTabs();
|
|
8522
8569
|
}
|
|
8523
8570
|
onVariantChange() {
|
|
8524
8571
|
requestAnimationFrame(() => {
|
|
@@ -8529,21 +8576,29 @@ const UdpTabs = class {
|
|
|
8529
8576
|
initializeTabs() {
|
|
8530
8577
|
var _a, _b;
|
|
8531
8578
|
this.buttonRefs = [];
|
|
8532
|
-
|
|
8533
|
-
|
|
8534
|
-
|
|
8535
|
-
|
|
8536
|
-
|
|
8537
|
-
|
|
8538
|
-
|
|
8539
|
-
|
|
8540
|
-
|
|
8541
|
-
|
|
8542
|
-
|
|
8543
|
-
|
|
8544
|
-
|
|
8545
|
-
|
|
8546
|
-
|
|
8579
|
+
if (this.useTabsProp) {
|
|
8580
|
+
// --- Prop-based ---
|
|
8581
|
+
this.tabDetails = this.tabs.map(t => (Object.assign({}, t))); // Use data from prop
|
|
8582
|
+
this.slottedTabs = []; // Ensure we're not tracking slotted tabs
|
|
8583
|
+
}
|
|
8584
|
+
else {
|
|
8585
|
+
// --- Slot-based ---
|
|
8586
|
+
this.slottedTabs = Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'udp-tab');
|
|
8587
|
+
this.tabDetails = this.slottedTabs.map(tab => ({
|
|
8588
|
+
label: tab.label,
|
|
8589
|
+
icon: tab.icon,
|
|
8590
|
+
iconPlacement: tab.iconPlacement,
|
|
8591
|
+
hidden: tab.hidden,
|
|
8592
|
+
disabled: tab.disabled,
|
|
8593
|
+
}));
|
|
8594
|
+
}
|
|
8595
|
+
// --- Common Logic ---
|
|
8596
|
+
// In uncontrolled mode, check if the default active tab is invalid.
|
|
8597
|
+
if (!this.isControlled) {
|
|
8598
|
+
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)) {
|
|
8599
|
+
const firstValidIndex = this.tabDetails.findIndex(tab => !tab.hidden && !tab.disabled);
|
|
8600
|
+
this.internalActiveTab = firstValidIndex > -1 ? firstValidIndex : 0;
|
|
8601
|
+
}
|
|
8547
8602
|
}
|
|
8548
8603
|
this.updateActiveTabs();
|
|
8549
8604
|
requestAnimationFrame(() => {
|
|
@@ -8552,12 +8607,17 @@ const UdpTabs = class {
|
|
|
8552
8607
|
});
|
|
8553
8608
|
}
|
|
8554
8609
|
updateActiveTabs() {
|
|
8555
|
-
|
|
8556
|
-
|
|
8557
|
-
|
|
8610
|
+
// Only update slotted tabs if we're in slot mode
|
|
8611
|
+
if (!this.useTabsProp) {
|
|
8612
|
+
const currentActiveTab = this.activeTab;
|
|
8613
|
+
this.slottedTabs.forEach((tab, index) => {
|
|
8614
|
+
tab.active = index === currentActiveTab;
|
|
8615
|
+
});
|
|
8616
|
+
}
|
|
8617
|
+
// If in prop mode, the <button> 'active' class is handled by render()
|
|
8558
8618
|
}
|
|
8559
8619
|
updateSliderPosition() {
|
|
8560
|
-
const activeButton = this.buttonRefs[this.activeTab];
|
|
8620
|
+
const activeButton = this.buttonRefs[this.activeTab]; // Use getter
|
|
8561
8621
|
if (!activeButton) {
|
|
8562
8622
|
this.sliderStyle = { width: '0px', transform: 'translateX(0px)' };
|
|
8563
8623
|
return;
|
|
@@ -8580,7 +8640,18 @@ const UdpTabs = class {
|
|
|
8580
8640
|
if ((_a = this.tabDetails[tabIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
|
|
8581
8641
|
return;
|
|
8582
8642
|
}
|
|
8583
|
-
this.
|
|
8643
|
+
if (this.isControlled) {
|
|
8644
|
+
// In controlled mode, emit the event for the parent to handle.
|
|
8645
|
+
// The `onValueChange` watcher will handle UI updates when the prop changes.
|
|
8646
|
+
this.udpTabChange.emit(tabIndex);
|
|
8647
|
+
}
|
|
8648
|
+
else {
|
|
8649
|
+
// In uncontrolled mode, update state directly.
|
|
8650
|
+
// The `onActiveTabChange` watcher will handle UI updates.
|
|
8651
|
+
this.internalActiveTab = tabIndex;
|
|
8652
|
+
}
|
|
8653
|
+
}
|
|
8654
|
+
scrollTabIntoView(tabIndex) {
|
|
8584
8655
|
const tabButton = this.buttonRefs[tabIndex];
|
|
8585
8656
|
const container = this.scrollContainerRef;
|
|
8586
8657
|
if (!tabButton || !container)
|
|
@@ -8591,20 +8662,16 @@ const UdpTabs = class {
|
|
|
8591
8662
|
const safeZonePadding = 70;
|
|
8592
8663
|
const safeZoneLeft = scrollLeft + safeZonePadding;
|
|
8593
8664
|
const safeZoneRight = scrollLeft + clientWidth - safeZonePadding;
|
|
8594
|
-
// Check if the tab's left edge is hidden by the left fade
|
|
8595
8665
|
if (tabLeft < safeZoneLeft) {
|
|
8596
|
-
// Scroll to position the tab's left edge at the start of the safe zone
|
|
8597
8666
|
container.scrollTo({
|
|
8598
8667
|
left: tabLeft - safeZonePadding,
|
|
8599
|
-
behavior: 'smooth'
|
|
8668
|
+
behavior: 'smooth',
|
|
8600
8669
|
});
|
|
8601
8670
|
}
|
|
8602
|
-
// Check if the tab's right edge is hidden by the right fade
|
|
8603
8671
|
else if (tabRight > safeZoneRight) {
|
|
8604
|
-
// Scroll to position the tab's right edge at the end of the safe zone
|
|
8605
8672
|
container.scrollTo({
|
|
8606
8673
|
left: tabRight - clientWidth + safeZonePadding,
|
|
8607
|
-
behavior: 'smooth'
|
|
8674
|
+
behavior: 'smooth',
|
|
8608
8675
|
});
|
|
8609
8676
|
}
|
|
8610
8677
|
}
|
|
@@ -8622,25 +8689,28 @@ const UdpTabs = class {
|
|
|
8622
8689
|
container.scrollTo({ left: maxScrollLeft, behavior: 'smooth' });
|
|
8623
8690
|
}
|
|
8624
8691
|
render() {
|
|
8625
|
-
|
|
8692
|
+
const currentActiveTab = this.activeTab; // Use getter
|
|
8693
|
+
return (h("div", { key: 'dd8ac7e3d101993b8df00c97bf561e2502e9f3c1', class: "tab-container" }, h("div", { key: '5f70a5c0da906152b130f6eaa98b81bf80485920', class: `tab-header ${this.variant}` }, this.showScrollLeft && (h("button", { key: 'e1a3a7d3650ae3703734a51b251600bf12dbed0c', class: "scroll-arrow left", onClick: () => this.scrollToStart(), "aria-label": "Scroll to first tab" }, h("udp-icon", { key: '36e6294b1a775a30906cc0236f8104ad03998c01', iconName: "chevronLeft16", color: "inherit" }))), this.showScrollLeft && h("div", { key: '8dca0bd111f13c1890fbc010efbabb2aa0440c13', class: "scroll-fade left" }), h("div", { key: '966f761c7f3cc45eb5b6737e8dbb63dc75a68325', class: "tab-scroll-container", ref: el => (this.scrollContainerRef = el), onScroll: () => this.checkScroll() }, this.tabDetails.map((tab, index) => {
|
|
8626
8694
|
if (tab.hidden) {
|
|
8627
8695
|
return null;
|
|
8628
8696
|
}
|
|
8629
8697
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
8630
8698
|
const iconEl = tab.icon ? h("udp-icon", { iconName: tab.icon, color: 'inherit' }) : null;
|
|
8631
8699
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
8632
|
-
const
|
|
8700
|
+
const labelEl = h("span", null, tab.label);
|
|
8633
8701
|
return (h("button", { class: {
|
|
8634
|
-
'active': index ===
|
|
8702
|
+
'active': index === currentActiveTab,
|
|
8635
8703
|
'has-icon': !!tab.icon,
|
|
8636
8704
|
[`icon-${tab.iconPlacement}`]: !!tab.icon,
|
|
8637
8705
|
'disabled': tab.disabled,
|
|
8638
|
-
}, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index ===
|
|
8639
|
-
}), h("div", { key: '
|
|
8706
|
+
}, disabled: tab.disabled, onClick: () => this.tabClicked(index), role: "tab", "aria-selected": index === currentActiveTab ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', ref: el => (this.buttonRefs[index] = el) }, iconEl, labelEl));
|
|
8707
|
+
}), h("div", { key: 'df383b17c3e36fc7f261ff6a6c1220a4f923477f', class: "slider", style: this.sliderStyle })), this.showScrollRight && h("div", { key: '7f8ae28f6662266a113adbb7ca40a4ef7d0b8427', class: "scroll-fade right" }), this.showScrollRight && (h("button", { key: '0ad034fb7dc24388476e0c37bc9cf4196f4145bc', class: "scroll-arrow right", onClick: () => this.scrollToEnd(), "aria-label": "Scroll to last tab" }, h("udp-icon", { key: '4cdbf5880b2e30dc6541228323a31e2dd34eabae', iconName: "chevronRight16", color: "inherit" })))), !this.isControlled && !this.useTabsProp && (h("div", { key: '2097c674562eb5acfdadda5a05e6f2eed8821f99' }, h("slot", { key: '375c96eb85f6581426f72bf1c544538df4c6fdd6' })))));
|
|
8640
8708
|
}
|
|
8641
8709
|
get el() { return getElement(this); }
|
|
8642
8710
|
static get watchers() { return {
|
|
8643
|
-
"
|
|
8711
|
+
"internalActiveTab": ["onActiveTabChange"],
|
|
8712
|
+
"value": ["onValueChange"],
|
|
8713
|
+
"tabs": ["onTabsPropChange"],
|
|
8644
8714
|
"variant": ["onVariantChange"]
|
|
8645
8715
|
}; }
|
|
8646
8716
|
};
|
|
@@ -1078,7 +1078,7 @@ const GhostRender = class {
|
|
|
1078
1078
|
// The <slot /> is necessary to prevent the Stencil compiler from
|
|
1079
1079
|
// overly optimizing this component's output and aliasing the
|
|
1080
1080
|
// defineCustomElement export, which breaks downstream wrappers.
|
|
1081
|
-
return (h(Host, { key: '
|
|
1081
|
+
return (h(Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
|
|
1082
1082
|
}
|
|
1083
1083
|
};
|
|
1084
1084
|
GhostRender.style = ":host {\n display: none;\n }";
|
|
@@ -98,13 +98,13 @@ const ChipSection = class {
|
|
|
98
98
|
}
|
|
99
99
|
render() {
|
|
100
100
|
console.log("Rendering ChipSection", this.visibleFilterChips);
|
|
101
|
-
return (h("div", { key: '
|
|
101
|
+
return (h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
|
|
102
102
|
if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
|
|
103
103
|
console.log('returning null...');
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
106
|
return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
|
|
107
|
-
})), h("div", { key: '
|
|
107
|
+
})), h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
|
|
108
108
|
}
|
|
109
109
|
get el() { return getElement(this); }
|
|
110
110
|
static get watchers() { return {
|
|
@@ -16,7 +16,7 @@ const ColorPreview = class {
|
|
|
16
16
|
return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), 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`))));
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
|
-
return (h("div", { key: '
|
|
19
|
+
return (h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), 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'))));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
ColorPreview.style = colorPreviewCss;
|
|
@@ -211,6 +211,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
|
|
|
211
211
|
return import(
|
|
212
212
|
/* webpackMode: "lazy" */
|
|
213
213
|
'./udp-split-screen.entry.js').then(processMod, consoleError);
|
|
214
|
+
case 'udp-tab-panel':
|
|
215
|
+
return import(
|
|
216
|
+
/* webpackMode: "lazy" */
|
|
217
|
+
'./udp-tab-panel.entry.js').then(processMod, consoleError);
|
|
214
218
|
case 'udp-vertical-spacer':
|
|
215
219
|
return import(
|
|
216
220
|
/* webpackMode: "lazy" */
|
|
@@ -86,7 +86,7 @@ const InputsExample = class {
|
|
|
86
86
|
};
|
|
87
87
|
}
|
|
88
88
|
render() {
|
|
89
|
-
return (h("div", { key: '
|
|
89
|
+
return (h("div", { key: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), 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) })), h("div", { key: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), 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) })), h("div", { key: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
|
|
90
90
|
formTextField: 'Initial form text',
|
|
91
91
|
formNumericField: '25',
|
|
92
92
|
formTextArea: 'Initial form description',
|
|
@@ -95,7 +95,7 @@ const InputsExample = class {
|
|
|
95
95
|
formDate: '2024-02-01',
|
|
96
96
|
formTime: '09:00',
|
|
97
97
|
formSelector: 'option1'
|
|
98
|
-
} }, h("div", { key: '
|
|
98
|
+
} }, h("div", { key: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), 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) })), h("div", { key: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), 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) })), h("div", { key: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
101
|
InputsExample.style = inputsExampleCss;
|