udp-stencil-component-library 26.0.0-beta.37 → 26.0.0
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/ag-grid-base_63.cjs.entry.js +83 -68
- package/dist/cjs/{fluent-icons-CVRtI2P-.js → fluent-icons-CC4xCXnn.js} +63 -1
- package/dist/cjs/icon-grid.cjs.entry.js +1 -1
- package/dist/cjs/index.cjs.js +3 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stencil-library.cjs.js +1 -1
- package/dist/cjs/udp-duration-input.cjs.entry.js +2 -1
- package/dist/cjs/udp-list.cjs.entry.js +2 -2
- package/dist/collection/__mocks__/fluentui-web-components.js +100 -0
- package/dist/collection/__mocks__/jest-setup.js +51 -0
- package/dist/collection/__mocks__/svg-mock.js +5 -0
- package/dist/collection/components/fluent-ui/accordion/udp-accordion.css +3 -0
- package/dist/collection/components/fluent-ui/accordion/udp-accordion.js +11 -1
- package/dist/collection/components/fluent-ui/autocomplete/udp-autocomplete.js +6 -6
- package/dist/collection/components/fluent-ui/badge/udp-fluent-badge.css +13 -11
- package/dist/collection/components/fluent-ui/counter-badge/udp-fluent-counter-badge.css +18 -3
- package/dist/collection/components/fluent-ui/drawer/udp-fluent-drawer.js +4 -3
- package/dist/collection/components/fluent-ui/dropdown/udp-fluent-dropdown.js +14 -11
- package/dist/collection/components/fluent-ui/duration-input/udp-duration-input.js +2 -1
- package/dist/collection/components/fluent-ui/list/udp-list.js +2 -2
- package/dist/collection/components/fluent-ui/menu/udp-fluent-menu.js +3 -2
- package/dist/collection/components/fluent-ui/popover/udp-popover.css +5 -2
- package/dist/collection/components/fluent-ui/radio-group/udp-fluent-radio-group.js +2 -1
- package/dist/collection/components/fluent-ui/search-input/udp-search-input.css +1 -0
- package/dist/collection/components/fluent-ui/slider/udp-slider.css +4 -0
- package/dist/collection/components/fluent-ui/tablist/udp-fluent-tablist.js +20 -13
- package/dist/collection/components/fluent-ui/time-input/udp-time-input.js +2 -1
- package/dist/collection/icons/__mocks__/fluent-icons.js +24 -0
- package/dist/collection/icons/fluent-icons.js +47 -1
- package/dist/collection/test-pages/test-components-page.js +29 -29
- package/dist/collection/theme/fluent-theme-bridge.js +3 -0
- package/dist/components/index.js +1 -1
- package/dist/components/test-components-page.js +1 -1
- package/dist/components/udp-accordion2.js +1 -1
- package/dist/components/udp-autocomplete2.js +1 -1
- package/dist/components/udp-duration-input.js +1 -1
- package/dist/components/udp-fluent-badge2.js +1 -1
- package/dist/components/udp-fluent-counter-badge2.js +1 -1
- package/dist/components/udp-fluent-drawer2.js +1 -1
- package/dist/components/udp-fluent-dropdown2.js +1 -1
- package/dist/components/udp-fluent-icon2.js +1 -1
- package/dist/components/udp-fluent-menu2.js +1 -1
- package/dist/components/udp-fluent-radio-group2.js +1 -1
- package/dist/components/udp-fluent-tablist2.js +1 -1
- package/dist/components/udp-list.js +1 -1
- package/dist/components/udp-popover2.js +1 -1
- package/dist/components/udp-search-input2.js +1 -1
- package/dist/components/udp-slider2.js +1 -1
- package/dist/components/udp-time-input2.js +1 -1
- package/dist/docs.json +11 -8
- package/dist/esm/ag-grid-base_63.entry.js +83 -68
- package/dist/esm/{fluent-icons-ecoeMEr8.js → fluent-icons-BhVUFS_q.js} +63 -1
- package/dist/esm/icon-grid.entry.js +1 -1
- package/dist/esm/index.js +3 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stencil-library.js +1 -1
- package/dist/esm/udp-duration-input.entry.js +2 -1
- package/dist/esm/udp-list.entry.js +2 -2
- package/dist/stencil-library/ag-grid-base_63.entry.js +1 -1
- package/dist/stencil-library/{fluent-icons-ecoeMEr8.js → fluent-icons-BhVUFS_q.js} +1 -1
- package/dist/stencil-library/icon-grid.entry.js +1 -1
- package/dist/stencil-library/index.esm.js +1 -1
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/stencil-library/udp-duration-input.entry.js +1 -1
- package/dist/stencil-library/udp-list.entry.js +1 -1
- package/dist/types/__mocks__/fluentui-web-components.d.ts +98 -0
- package/dist/types/__mocks__/jest-setup.d.ts +1 -0
- package/dist/types/__mocks__/svg-mock.d.ts +6 -0
- package/dist/types/components/fluent-ui/duration-input/udp-duration-input.d.ts +1 -0
- package/dist/types/components/fluent-ui/menu/udp-fluent-menu.d.ts +1 -0
- package/dist/types/components/fluent-ui/tablist/udp-fluent-tablist.d.ts +3 -3
- package/dist/types/components/fluent-ui/time-input/udp-time-input.d.ts +1 -0
- package/dist/types/components.d.ts +4 -4
- package/dist/types/icons/__mocks__/fluent-icons.d.ts +9 -0
- package/dist/types/icons/fluent-icons.d.ts +1 -1
- package/package.json +8 -4
|
@@ -32,7 +32,7 @@ require('@fluentui/web-components/dialog-body.js');
|
|
|
32
32
|
require('@fluentui/web-components/divider.js');
|
|
33
33
|
require('@fluentui/web-components/drawer.js');
|
|
34
34
|
require('@fluentui/web-components/drawer-body.js');
|
|
35
|
-
var fluentIcons = require('./fluent-icons-
|
|
35
|
+
var fluentIcons = require('./fluent-icons-CC4xCXnn.js');
|
|
36
36
|
require('@fluentui/web-components/menu.js');
|
|
37
37
|
require('@fluentui/web-components/menu-item.js');
|
|
38
38
|
require('@fluentui/web-components/menu-button.js');
|
|
@@ -1997,7 +1997,7 @@ const TestComponentsPage = class {
|
|
|
1997
1997
|
console.log('Form submitted with values:', values);
|
|
1998
1998
|
};
|
|
1999
1999
|
this.handleTabChange = (event) => {
|
|
2000
|
-
this.currentTab = event.detail;
|
|
2000
|
+
this.currentTab = String(event.detail);
|
|
2001
2001
|
};
|
|
2002
2002
|
this.handleManualFormReady = (event) => {
|
|
2003
2003
|
this.manualFormInstance = event.detail;
|
|
@@ -2354,51 +2354,51 @@ const TestComponentsPage = class {
|
|
|
2354
2354
|
}
|
|
2355
2355
|
render() {
|
|
2356
2356
|
var _a;
|
|
2357
|
-
return (index.h("div", { key: '
|
|
2357
|
+
return (index.h("div", { key: '6a80e6b239fb01a56615675d0066727492bf3529', style: { display: 'flex', flexDirection: 'column' } }, index.h("div", { key: 'b18bcf950fce0181b4a1a97b571df86e3fc9f1ae', style: { display: 'flex', gap: '1rem', marginTop: '1rem' } }, index.h("udp-fluent-button", { key: '465464da40affb8a061d989c42fc552c149ec902', onClick: () => (this.formDrawerOpen = true) }, "Open Form Drawer"), index.h("udp-fluent-button", { key: '6f07f3663b3e387f4f5a1d9b66abc466dd66d03e', onClick: () => (this.drawerOpen = true) }, "Open Grid Drawer")), index.h("div", { key: '4c33e42f02d20a6355564b178111c67fe4a00271', style: { display: 'flex', flexDirection: 'column', gap: '1rem', marginTop: '2rem' } }, index.h("h4", { key: 'f58e6d7e8600b4e6effafbb6cef9077fcb21facb' }, "Scroll Overflow Strategy"), index.h("udp-fluent-tablist", { key: '3b74ab22f38f6a8f72fd75c6ebf296dad246fd4f', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "transparent", size: "small", orientation: "horizontal", overflowStrategy: "scroll" }, index.h("span", { key: '0fd8ef756ea35143216512eea2612aa90281d686', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), index.h("h4", { key: 'bc8218b6ecb9bc0dd2abf36fd8c29e7d8f33fa43' }, "Collapse Overflow Strategy"), index.h("udp-fluent-tablist", { key: 'acb7302f99f4e2de410d0364d1ef2e55bea69ebc', tabList: this.tabs, onTabChange: this.handleTabChange, appearance: "contained", size: "small", orientation: "horizontal", overflowStrategy: "collapse" }, index.h("span", { key: 'c471b17a6273b0f83beedb2c58f57541930bbece', slot: "grids-start", style: { color: 'red', fontWeight: 'bold' } }, "!")), index.h("div", { key: '13f2be528abb95f398dca9c5fd9447f3e330f58a', style: { padding: '1rem', border: '1px solid #ccc' } }, index.h("udp-tab-panel", { key: '9e79be38082b7041a6794b4668cbd01eff2f78f1', id: "buttons-inputs", activeTabId: this.currentTab }, index.h("div", { key: '0f7533868d6942d79f217b733ee053bcdde17727', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, index.h("h3", { key: '8d438db6a883c22c2ea9ef269579cdf1ee29357d' }, "Buttons & Inputs"), index.h("div", { key: '3b959296747ee4335c384adb752a48224b26d3e1', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-switch", { key: '35b256a4b3287b2b59ccd663792bf357950d4338', label: "Toggle Loading", checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }), index.h("udp-fluent-button", { key: '71c45614bf38fc81387e41a591f9ff6734bc0086', loading: this.isButtonLoading, size: "medium" }, index.h("udp-fluent-icon", { key: '0ba85929a3971b123e76055650c058de53537d12', name: "calendar", size: "sm", slot: "start" }), "Loading Button")), index.h("div", { key: '42957ba92cc71d2f1f2cb3c7677c01098d307d36' }, index.h("udp-fluent-button", { key: '71a2612eec6735b3fdaa8a4fe25b4c6e2cb353f1', onClick: () => console.log('Click Me Clicked') }, "Click Me")), index.h("div", { key: '7a08bd54ac1f9b6fdf2523325db853774bc9d64b' }, index.h("h4", { key: 'd9c5bea8de8bf71f9f41750ec4928f2520bd5f20' }, "New Icon Props"), index.h("div", { key: 'd0621ec2cfd58c6a9841c812913276d13703be30', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-button", { key: '82f00b6d0687488916dd53545d08d8781d2756de', startIconName: "checkmark", onClick: () => console.log('Start Icon Clicked') }, "Start Icon"), index.h("udp-fluent-button", { key: 'bfd3e387ad9c03bb23c7315e5458a12843d1e187', size: "large", onClick: () => console.log('End Icon Clicked'), endIconName: "home" }, "End Icon"), index.h("udp-fluent-button", { key: 'c08a31d2e91e63de5bbe9f0aa63b76528fb0bb8a', appearance: "primary", onClick: () => console.log('Primary Clicked') }, "Delete"), index.h("udp-fluent-button", { key: 'bc51a9918e9e341dd68da9b1b22a2b1d0dbe68cb', startIconName: "checkmark", onClick: () => console.log('Override Icon Clicked') }, index.h("span", { key: 'bd2e3d2e4e6a40b3fe230601bd7c3bddd3afc8ff', slot: "start" }, index.h("udp-fluent-icon", { key: '15d829333ebe8e75c6d8847c6511b5ced44bb76c', name: "home", size: "md" })), "Slotted icon override"))), index.h("div", { key: 'c43d543e0b9a4f2cccda5b52896909a886347632' }, index.h("h4", { key: 'e39b2afe74b643bf4bb789b0a4e711056718de7e' }, "Compound Buttons"), index.h("div", { key: '84d6f34f346db3a6cc94e24a66860cad362e03ab', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-compound-button", { key: '8ed598bec473587da68ecd68de1b3de4509a0bd1', description: "Hello World", startIconName: "calendar" }, "Compound Button"), index.h("udp-compound-button", { key: '8e7079452ab88dadade903bc28f39f4fc5496f8f', appearance: "primary", description: "With End Icon", endIconName: "delete" }, "Primary"), index.h("udp-compound-button", { key: '273e070ff9946fbbecf4eb21b751f51dd2035730', description: "Custom Slot", size: "small", startIconName: "add", onClick: () => console.log('Compound Button Clicked') }, index.h("span", { key: 'c39753bc8b653b9ae3349abf1ecac781951dfd30', slot: "description" }, "Slotted Description"), "Compound")), index.h("div", { key: '3bb6759f92cb24e900e28ed080357493f4fd3b4d', style: {
|
|
2358
2358
|
marginTop: '1rem',
|
|
2359
2359
|
display: 'flex',
|
|
2360
2360
|
gap: '1rem',
|
|
2361
2361
|
alignItems: 'center',
|
|
2362
|
-
} }, index.h("udp-fluent-switch", { key: '
|
|
2362
|
+
} }, index.h("udp-fluent-switch", { key: '17b194f0851d019e8cb0dcbfac0336b74c5c7eb2', checked: this.isButtonLoading, onValueChanged: e => (this.isButtonLoading = e.detail) }, "Toggle Loading"), index.h("udp-compound-button", { key: 'c491e2e16bdfa662c96e087fa90fbb9fc397f4f1', description: "Click switch to load", endIconName: "add", loading: this.isButtonLoading, onClick: () => console.log('Compound Button Clicked') }, "Loading Test"))), index.h("div", { key: '5ec6e0a387792c21b68d2a5f9213fa47fe6ed116' }, index.h("h4", { key: '1eed4626b673610db557182991cb6e1de52ae7a3' }, "Toggle Buttons"), index.h("div", { key: '9e9633b23b95bb312282ece54b7fa858a56556fa', style: { display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' } }, index.h("udp-fluent-toggle-button", { key: '77a54d94b90a047bc70cb24a027ddc97d608857f' }, "Toggle Me"), index.h("udp-fluent-toggle-button", { key: '1409342858adde5ff001be8eb4ca428570083e7b', pressed: true, disabled: true }, "Disabled Pressed"), index.h("udp-fluent-toggle-button", { key: '045f5d1bf8eaa6309fe7efd596495309b8712d03' }, index.h("udp-fluent-icon", { key: 'e99436c4bdd0baa94ef20c2b31f9b2031207bf23', name: "add", size: "sm", slot: "start" }), "Slotted icon"), index.h("udp-fluent-toggle-button", { key: '945e5d2e55a56e7b17effafb973504984e6db840', endIconName: "settings" }, "End Icon Prop"), index.h("udp-fluent-toggle-button", { key: '5d82c500e825bfee0f7d310b529bd4e0184b1c6b', size: "small", startIconName: "add" }, "Small"), index.h("udp-fluent-toggle-button", { key: '81115d7b1c019c3a1bc1bc468fe4fa5d5c6512f0', size: "large", endIconName: "delete" }, "Large"))), index.h("div", { key: '5f0b50f8e09b57687b88a609c17e9047beb3dfa9' }, index.h("h4", { key: '73d5fd95f828439c6d6b93ccfac938d80e59a1d4' }, "Icon Buttons (Dynamic Sizing)"), index.h("div", { key: '83ed343679423d5cc74213c2fb7043195219a16a', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("div", { key: '61ab879c7269153029c6e1b5f1a97f049441f534', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, index.h("udp-fluent-icon-button", { key: 'c8ce56e3389ee2b10f37d1347c8948bd4e26aca2', iconName: "settings", size: "small", appearance: "primary", ariaLabel: "Edit" }), index.h("span", { key: '5a57325e6647bad561754e9f55677e8a9f838c91', style: { fontSize: '12px' } }, "Small (Subtle)")), index.h("div", { key: '4850e2ddd7206410ea4b2ccf2953b0b17b8d9e6d', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, index.h("udp-fluent-icon-button", { key: '50f8867145c60c3119487850904fb9b085cec970', iconName: "settings", size: "medium",
|
|
2363
2363
|
//appearance="primary"
|
|
2364
|
-
ariaLabel: "Delete" }), index.h("span", { key: '
|
|
2364
|
+
ariaLabel: "Delete" }), index.h("span", { key: 'b68213d466b88babb997bd2f79c3a72e4dbfcc01', style: { fontSize: '12px' } }, "Medium (Outline)")), index.h("div", { key: 'fbc1604c8bbcc591e6511719650e14d6841e29f3', style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, index.h("udp-fluent-icon-button", { key: 'ead217a98a65f7247b2309d78d47751c89da6598', iconName: "settings", size: "large", appearance: "primary", ariaLabel: "Settings" }), index.h("span", { key: 'fb5375f1849fa79b20a134e3633d04ce0b0cc3a8', style: { fontSize: '12px' } }, "Large (Transparent)")))), index.h("div", { key: 'b556f02d20765d607751e5c4c5681f4dbd98f52c' }, index.h("udp-loading-spinner", { key: 'fa3351438cc4e515438fa79d7e33b32dc5b596f2', size: "tiny", appearance: "primary" })))), index.h("udp-tab-panel", { key: '7b3145002b88b98447b8e35dae03aae5c0bf4f38', id: "inputs", activeTabId: this.currentTab }, index.h("div", { key: 'e2694a42497750b6c950f91c68e9a1db16458465', style: { display: 'flex', gap: '1rem', flexDirection: 'column' } }, index.h("div", { key: '41122071b4f09a3cf248c15371e50c08a148d2ef', style: {
|
|
2365
2365
|
padding: '1rem',
|
|
2366
2366
|
backgroundColor: 'var(--colorNeutralBackground3, #f5f5f5)',
|
|
2367
2367
|
borderRadius: '8px',
|
|
2368
2368
|
marginBottom: '1rem',
|
|
2369
|
-
} }, index.h("h3", { key: '
|
|
2369
|
+
} }, index.h("h3", { key: '73a688d430412ba4265da4bd4240c9ee98c555fb', style: { margin: '0 0 1rem 0', fontSize: '16px', fontWeight: '600' } }, "Global Property Controls"), index.h("div", { key: '00ef859412aa8b63b54160c840f298d712cc4821', style: {
|
|
2370
2370
|
display: 'flex',
|
|
2371
2371
|
gap: '2rem',
|
|
2372
2372
|
flexWrap: 'wrap',
|
|
2373
2373
|
alignItems: 'flex-end',
|
|
2374
|
-
} }, index.h("udp-fluent-dropdown", { key: '
|
|
2374
|
+
} }, index.h("udp-fluent-dropdown", { key: 'f4ffaa09fc22cfbe21d627a40cbc38717eb57964', label: "Appearance", value: this.inputControlAppearance, options: [
|
|
2375
2375
|
{ label: 'Outline', value: 'outline' },
|
|
2376
2376
|
{ label: 'Underline', value: 'underline' },
|
|
2377
2377
|
{ label: 'Filled Lighter', value: 'filled-lighter' },
|
|
2378
2378
|
{ label: 'Filled Darker', value: 'filled-darker' },
|
|
2379
|
-
], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), index.h("udp-fluent-dropdown", { key: '
|
|
2379
|
+
], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlAppearance = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '150px' } }), index.h("udp-fluent-dropdown", { key: '4eb58cf1b0a0eda00b42a39ab37fe19d8cfde940', label: "Control Size", value: this.inputControlSize, options: [
|
|
2380
2380
|
{ label: 'Small', value: 'small' },
|
|
2381
2381
|
{ label: 'Medium', value: 'medium' },
|
|
2382
2382
|
{ label: 'Large', value: 'large' },
|
|
2383
|
-
], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), index.h("udp-fluent-switch", { key: '
|
|
2383
|
+
], optionValue: "value", optionLabel: "label", onValueChanged: (e) => { var _a; return (this.inputControlSize = ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) || e.detail); }, style: { minWidth: '120px' } }), index.h("udp-fluent-switch", { key: 'ed98e504f0632b290b3ad6f5fec3741fc82f9d06', label: "Required", labelPosition: "after", checked: this.inputControlRequired, onValueChanged: (e) => (this.inputControlRequired = e.detail) }), index.h("udp-fluent-switch", { key: '98392fef92695838f063a83c2db2283cf01e29a7', label: "Disabled", labelPosition: "after", checked: this.inputControlDisabled, onValueChanged: (e) => (this.inputControlDisabled = e.detail) }), index.h("udp-fluent-switch", { key: '1c900f77f3b2bc254987ac191192370cba46fee1', label: "Readonly", labelPosition: "after", checked: this.inputControlReadonly, onValueChanged: (e) => (this.inputControlReadonly = e.detail) })), index.h("p", { key: '170f0a46ca8652534afff36b342b3174ec098dee', style: {
|
|
2384
2384
|
margin: '0.75rem 0 0',
|
|
2385
2385
|
fontSize: '12px',
|
|
2386
2386
|
color: 'var(--colorNeutralForeground3)',
|
|
2387
|
-
} }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), index.h("udp-fluent-text-input", { key: '
|
|
2387
|
+
} }, "Note: Not all props apply to all components. readonly only applies to text inputs.")), index.h("udp-fluent-text-input", { key: 'd9b9bf9d4625e423c87bee20e71bd3e714905502', label: "Text Input", placeholder: "Enter text...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test" }), index.h("udp-fluent-text-input", { key: 'c244a16cb97151c25811500a70cb1b38d46281dd', label: "Email Input", type: "email", placeholder: "Enter email...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: "test@gmail.com" }), index.h("udp-fluent-text-input", { key: 'cd0e015f80a3556c111b59c7c8b1745923e41600', label: "Number Input", type: "number", placeholder: "Enter number...", required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '123' }), index.h("udp-date-input", { key: '43ba427444d3f090f87d1f9fc03a53128a0dbb78', label: "Date Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30' }), index.h("udp-date-time-input", { key: '7ff6a7fb8bc2a226ea8f3a1b8698b72b3cfcdfa4', label: "Date Time Input", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '2026-01-30T12:00:00' }), index.h("udp-time-input", { key: '751b9afe0e237653c8942ef40f26edfbe5a2f485', label: "Time Input", placeholder: "e.g. 2:30pm", hint: "Type any time or select from list", required: this.inputControlRequired, disabled: this.inputControlDisabled, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: '12:00' }), index.h("udp-textarea", { key: '2ce88d10023fae97c9eb21504833203a05149d8c', label: "Textarea", placeholder: "Tell us about yourself...", autoResize: true, required: this.inputControlRequired, disabled: this.inputControlDisabled, readonly: this.inputControlReadonly, appearance: this.inputControlAppearance, controlSize: this.inputControlSize, value: 'test' }), index.h("udp-fluent-dropdown", { key: '46047e1b2635b65cad774c33532bfec5ed7ef578', label: "Dropdown", placeholder: "Select an option...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
|
|
2388
2388
|
{ label: 'Option 1', value: 'option1' },
|
|
2389
2389
|
{ label: 'Option 2', value: 'option2' },
|
|
2390
2390
|
{ label: 'Option 3', value: 'option3' },
|
|
2391
|
-
], controlSize: this.inputControlSize, multiple: true }), index.h("udp-autocomplete", { key: '
|
|
2391
|
+
], controlSize: this.inputControlSize, multiple: true }), index.h("udp-autocomplete", { key: 'f7d911c605a6b64fc0ae24d6d7ba16b3ca2ae002', label: "Autocomplete", placeholder: "Type to search...", appearance: this.inputControlAppearance, disabled: this.inputControlDisabled, optionValue: "value", optionLabel: "label", options: [
|
|
2392
2392
|
{ label: 'Apple', value: 'apple' },
|
|
2393
2393
|
{ label: 'Banana', value: 'banana' },
|
|
2394
2394
|
{ label: 'Cherry', value: 'cherry' },
|
|
2395
2395
|
{ label: 'Date', value: 'date' },
|
|
2396
2396
|
{ label: 'Elderberry', value: 'elderberry' },
|
|
2397
|
-
], controlSize: this.inputControlSize }), index.h("udp-fluent-checkbox", { key: '
|
|
2397
|
+
], controlSize: this.inputControlSize }), index.h("udp-fluent-checkbox", { key: '89da301754f54fbddc38312772c963044931b88a', label: "Checkbox", hint: "Check me!", disabled: this.inputControlDisabled, controlSize: this.inputControlSize, checked: true }), index.h("udp-fluent-switch", { key: 'be62d295ceeb988c9a488661f0d6e2f3ed8bc732', label: "Switch", labelPosition: "after", disabled: this.inputControlDisabled, checked: true }), index.h("udp-slider", { key: '3d30853047f090b7e0fb309ab9fe5c64da39e58f', label: "Slider", min: "0", max: "100", hint: "Slide to adjust value", disabled: this.inputControlDisabled, value: '50' }), index.h("udp-fluent-radio-group", { key: '029ab93d40c3cb514b4457bb5c9affb0674a9d5a', label: "Radio Group", disabled: this.inputControlDisabled, items: [
|
|
2398
2398
|
{ label: 'Option A', value: 'a' },
|
|
2399
2399
|
{ label: 'Option B', value: 'b' },
|
|
2400
2400
|
{ label: 'Option C', value: 'c' },
|
|
2401
|
-
], value: "a" }))), index.h("udp-tab-panel", { key: '
|
|
2401
|
+
], value: "a" }))), index.h("udp-tab-panel", { key: 'bc33902a7ff63fb1da9690c6efa1b7dc4eba7e6b', id: "data-display", activeTabId: this.currentTab }, index.h("div", { key: '5c3d5f31acace2ffbe36e2fb6864dc8e51766b7f', style: { display: 'flex', flexDirection: 'column', gap: '3rem' } }, index.h("div", { key: 'f09e12b639db0ba9cef53e979704f5f8a366235d' }, index.h("h3", { key: 'e3313ad0f7be4e1672db1eed977eb7862167e467' }, "Tree Example - Animal Kingdom (Conservation Status)"), index.h("p", { key: 'cc5b860879087af9e83033dbea19755f98cdeda9', style: { fontSize: '14px', color: '#6b7280', marginBottom: '1rem' } }, "Explore the animal kingdom with conservation status, population data, and more."), index.h("udp-tree", { key: '045a325857001e9e87e924a4341d837b8bebfeb6', treeItems: this.animals, itemContent: "name", itemStart: "emoji", itemEnd: this.getStatusBadge, itemAside: this.getItemAside, size: "medium", appearance: "subtle" })), index.h("div", { key: 'df69a3b3accfe87e5a152cccee0b940c7481caf1' }, index.h("h3", { key: 'b3812ce97a7feceb46c398eebe346736668966f7' }, "Accordion Example"), index.h("udp-accordion", { key: '822dbfe34b998a6fc28b3248fd1d4847b5c7bb7a', items: [
|
|
2402
2402
|
{
|
|
2403
2403
|
id: 'simple',
|
|
2404
2404
|
label: 'Simple Item (Default)',
|
|
@@ -2433,29 +2433,29 @@ const TestComponentsPage = class {
|
|
|
2433
2433
|
id: 'complex-slotted',
|
|
2434
2434
|
// complex content provided via slots below
|
|
2435
2435
|
},
|
|
2436
|
-
] }, index.h("span", { key: '
|
|
2436
|
+
] }, index.h("span", { key: 'c3859a5333d4d332d1737c09f76a2d46db2021b1', slot: "complex-slotted-heading" }, index.h("div", { key: 'e86f3d7920ff43a5e59c83a346d55ed62a02f033', style: { display: 'flex', alignItems: 'center', gap: '8px' } }, index.h("udp-fluent-icon", { key: 'd9c1a239861e1732494433a48fc2bf49e103a9fd', name: "star", size: "md" }), index.h("span", { key: 'b7b6f8dfaf3b45680f9c5ec1df710764eef8e947' }, "Complex Slotted Header"), index.h("udp-chip", { key: '6c48b2cc12a38328a244c200debf2bbf5b2f5684', label: "New", color: "success", size: "small", variant: "filled" }))), index.h("div", { key: '995b6d297fa6072e1d53c78210878aefd7e40b1e', slot: "complex-slotted-content" }, index.h("p", { key: '01db7b65da7c0b9113f5f17b3fa9c5191311ef38' }, "This content uses slots for complete control.", index.h("br", { key: '7a02a65d44573c3c2e769343d09a0d3bc12ff52e' }), index.h("span", { key: '4325a17495a000eb463359e6646875e2995b9f77', style: { fontSize: '12px', color: 'gray' } }, "(Try adding buttons, forms, or any component here)")), index.h("div", { key: '0c89528d3c16a1f00ac293930e7fd13c5922458d', style: { marginTop: '8px' } }, index.h("udp-fluent-button", { key: '990da37bb40fc7c36e6524b32c818dac6f2f0408', size: "small" }, "Action A"), index.h("udp-fluent-button", { key: '261cc6b2cc26cfc622c0fb49a3d43e38e0d06d7c', size: "small", appearance: "outline" }, "Action B"))))), index.h("div", { key: '0249cfa189ceaa2ac3d11d91260801336664d53f' }, index.h("h3", { key: '7ae084528b32019af7445e14c10693b02df91b0b' }, "Auto-Wrapping Tooltip"), index.h("udp-tooltip", { key: 'd38124bd70ede2d547a95322037ad8887f17fcbb', positioning: "above", content: "This works with Shadow DOM!" }, index.h("udp-fluent-button", { key: '3b9312463a296d8b44fb78ed32e3bbf8db44c268' }, "Hover me"))), index.h("div", { key: 'ddd187365308d97207d09b7169db1784ed152c15' }, index.h("h3", { key: '7f39f546194912b32d8354cc87de18f14576c7bf' }, "Message Bar Example"), index.h("div", { key: '79efaf32e410e3b9fc5d2209422b66be71566f9b', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, index.h("udp-message-bar", { key: '782fa3493daa22e099aff53ca5c33b7b4e1c31cc', intent: "info" }, "This is an informational message bar."), index.h("udp-message-bar", { key: '1cd1dc77a8b79491cbd512a7f2644493de1bb6e8', intent: "warning" }, "This is a warning message bar."), index.h("udp-message-bar", { key: '0ac7cca6061571851a76f290f35607348302c77e', intent: "error" }, "This is an error message bar with actions.", index.h("udp-fluent-button", { key: '3a00147843f497b73aa8b6dd67c9045f637e46ee', slot: "actions", appearance: "outline", size: "small" }, "Resolve")), this.showMessageBar && (index.h("udp-message-bar", { key: 'c4625a304fa6b18fba3acb8421a00313e1905da7', intent: "success", shape: "square" }, "This is a success message bar (square).", index.h("udp-icon", { key: '041061e99bc858c2bc2e04f0e729bc713f89121f', iconName: "add", slot: "icon" }), index.h("udp-fluent-icon-button", { key: '2597080bff4247dff9b8b0712e69ae7dff4a48f4', iconName: "dismiss", shape: "circular", appearance: "subtle", ariaLabel: "Close drawer", onClick: () => (this.showMessageBar = false), slot: "dismiss" }))))), index.h("div", { key: 'e95c5426ac0ab3c50f476bb5022d4c4e7dcb5612' }, index.h("h3", { key: '5247b2def3632eacb19ad249f8b72f083e064125' }, "Progress Bar Examples"), index.h("h4", { key: '45b16ab4811b4d4ae6119eaa2bc941a785dc6b56' }, "Indeterminate"), index.h("udp-progress-bar", { key: '13a1f0ed61dd240c006e25b750b83d8de4e87b71', thickness: "large" }), index.h("h4", { key: '0acf478ee08814e0a9d7f7ca349d7bb13e9adc19' }, "Determinate (Success)"), index.h("udp-progress-bar", { key: '1f35bfa447e2e15a507e1bcd3d52cfed383bc26c', value: 75, validationState: "success", shape: "square" }), index.h("h4", { key: 'e47678caf11d98c01b870086f2fdedd8e900ec7c' }, "Interactive"), index.h("div", { key: 'bcad42d13b9bdeea78d629cb2b29ad77141a3753', style: {
|
|
2437
2437
|
display: 'flex',
|
|
2438
2438
|
gap: '1rem',
|
|
2439
2439
|
alignItems: 'center',
|
|
2440
2440
|
marginBottom: '1rem',
|
|
2441
|
-
} }, index.h("udp-fluent-text-input", { key: '
|
|
2441
|
+
} }, index.h("udp-fluent-text-input", { key: '43aec580873f965aaf1b41ea18ddb6f58c1449ca', label: "Set Progress", type: "number", value: (_a = this.progressValue) === null || _a === void 0 ? void 0 : _a.toString(), onValueChanged: e => (this.progressValue = parseInt(e.detail)) })), index.h("udp-progress-bar", { key: 'c5657eec79697f5107d7f8ba7ec21521cd6bf0bd', value: this.progressValue, min: 0, max: 100, shape: "square" })), index.h("div", { key: '010fe8b267c4b887be4f4fe8c6fa2ab03bf244b7' }, index.h("h3", { key: 'f7b96de2ef50c84f55581e129b658083573b43e6' }, "Divider Examples"), index.h("p", { key: 'b33c6618b6b58cd7f114fa7ed37cc43a8ca165c9' }, "Default Divider:"), index.h("udp-fluent-divider", { key: 'da4448c7f13ba08450f2c9360481174396b1f165' }), index.h("p", { key: 'b4423116d5cf7b1233ac02819940826e9cae9bb1' }, "Align Content:"), index.h("udp-fluent-divider", { key: '30eb143bc4618d62dece2dc7731c60c793cefd74', "align-content": "start" }, "Start"), index.h("udp-fluent-divider", { key: '11943a5202c26e9ce1b3514d138eb5576bede292', "align-content": "center" }, "Center"), index.h("udp-fluent-divider", { key: '4fcb997690eb06cc819b3cbe5daa2a1162447ca0', "align-content": "end" }, "End"), index.h("p", { key: 'c577d3f9875b6ecee0f4dc2f668be17b70150ef1' }, "Appearance:"), index.h("udp-fluent-divider", { key: '31351c2b91333a63c4653fb6a89af3424a9556ac', appearance: "strong" }, index.h("udp-icon", { key: '37b4f4156b29ee8d068547349fdb5fce0c577116', iconName: "add" })), index.h("div", { key: 'aa93e350b1951af56d4f60b6b62eff6aa4e50721', style: { height: '10px' } }), index.h("udp-fluent-divider", { key: 'a485501f0eabaf5f3b3cfd873edcc4b6a494f19d', appearance: "brand" }, "Brand"), index.h("div", { key: 'db8213c443a528811b400cd70f49d264f242ebc3', style: { height: '10px' } }), index.h("udp-fluent-divider", { key: '11641e9705d707197b76ae370bd41e1c065bd9f4', appearance: "subtle" }, "Subtle"), index.h("p", { key: 'ffb268caec9b99606163d7e6ea4c380ea5324d0a' }, "Vertical Divider (inside flex container):"), index.h("div", { key: '5d9e783e1aaa96424800869512c7ea0d53598594', style: {
|
|
2442
2442
|
display: 'flex',
|
|
2443
2443
|
height: '50px',
|
|
2444
2444
|
alignItems: 'center',
|
|
2445
2445
|
border: '1px solid #ccc',
|
|
2446
2446
|
padding: '10px',
|
|
2447
|
-
} }, index.h("span", { key: '7c88df852172d7beb96f863a317dc3ef0cfe8a3b' }, "Item 1"), index.h("udp-fluent-divider", { key: 'e6b97c2be164b400c76612473238b851285b053a', orientation: "vertical" }), index.h("span", { key: '09afcf53296e25125179c318bf6b110f69662ce9' }, "Item 2"), index.h("udp-fluent-divider", { key: '849a0d10fa3078ae7eb5127db5a0a9d7312ea913', orientation: "vertical", appearance: "brand" }), index.h("span", { key: '21ec8df25829f6faf6f9baf09cce73136c3cf9bb' }, "Item 3"))), index.h("div", { key: 'c7034f6418fcad2ae6162a5170b7351f9019118c' }, index.h("h3", { key: 'e15cf07fd7cb77d5d390dc91ab7318a637cdff58' }, "Fluent Icon Examples"), index.h("p", { key: 'd69a338e0af071488e699b5ceaa44b21efcef3a6' }, "Basic usage (new simplified API):"), index.h("div", { key: 'b2c326ec99f5ea793d2e5f26ed786a766dc8900e', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: '2ec2860878dd50c150060951aaea211a2291d479', name: "add" }), index.h("udp-fluent-icon", { key: '164681ba7d1dfbe7fd0ef3e733d6aaa15a175c3e', name: "home" }), index.h("udp-fluent-icon", { key: 'abe3215c27b843406620f71a9fcd666d4c398254', name: "settings" })), index.h("p", { key: 'eae0b137cbce52289df07f23f1d99d27d8c9b90c' }, "Colored:"), index.h("div", { key: '3243fb5ade83092b2f86b6bf9a048a7a5c5dfcb2', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: 'c8cc74456f13ee4b527245282aa6e20eb57b2199', name: "add", variant: "filled", color: "green" }), index.h("udp-fluent-icon", { key: 'ff6b496aaeebbfd0a7ce1e01dcb581e3e146e91c', name: "delete", color: "red" })), index.h("p", { key: '0202eb1aede67f68fdb39075b5508b9401cdc8d7' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), index.h("div", { key: 'c30afbf2b868983275ed0f7dcd4a6adbb0faa04f', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: 'f1b0e194e7344d3312d66a7257cbb55cb62fbd60', name: "home", size: "xs" }), index.h("udp-fluent-icon", { key: '95d41ccc3cdb0511bc4e2d9d0525df35ef7dd58e', name: "home", size: "sm" }), index.h("udp-fluent-icon", { key: '38e28bd3350347c49e3790de5f6a38ef9577c731', name: "home", size: "md" }), index.h("udp-fluent-icon", { key: 'e6c9e26662484d4c3147358bcfdc164c2bd0f645', name: "home", size: "lg" })), index.h("p", { key: 'bf69fec2ee732e0eee0cc7e14bb47002a9143c67' }, "Variants (regular vs filled):"), index.h("div", { key: '29f27b3bd92dba53c6d91947fbf601e75e685ecc', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: 'b39182601cb962e1be905fcfc4a4fe019eae6059', name: "star", variant: "regular", size: "lg" }), index.h("udp-fluent-icon", { key: '2a3a2c479e33cf5434ec6ce19691383dd3e9ef7f', name: "star", variant: "filled", size: "lg", color: "gold" }))))), index.h("udp-tab-panel", { key: '2214383cf37e9d449c5f14952607bfcb6d769bfb', id: "text", activeTabId: this.currentTab }, index.h("div", { key: '01eed979961a10733fa764b89a92fd9fe8beb7ac', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, index.h("h3", { key: '64cec2f347bad0a7df1b5ce9aeaf32d83829df1d' }, "Text Component - All Variants"), index.h("div", { key: '64560c73c83f2b1cf5dcd90e857dd076acffeaaa' }, index.h("h4", { key: 'a4d7920a0eb09d1b93f683337d76fcf25ef9cb5a' }, "Display Variant"), index.h("udp-text", { key: '052e9e1041a9f2ef325a17bd14c89f3b3ed97aba', variant: "display" }, "Display Text (h1)")), index.h("div", { key: '3f8c2174caa0d55c2a730562fb41e24daa0b10b6' }, index.h("h4", { key: '3e12ecfb83a89de8e048865a1d0221ed53bebca8' }, "Large Title Variant"), index.h("udp-text", { key: 'e0d6c446a8cf98d3fe1b609a139b6f82d62e5e76', variant: "largeTitle" }, "Large Title Text (h2)")), index.h("div", { key: '8920ed64832933672cbc37491bc0234e49b02a37' }, index.h("h4", { key: 'e1709e4b9d7492eb5f26782e7989fae3b7a82a78' }, "Title Variants"), index.h("udp-text", { key: 'f9e09b1837934d3d8231f904e1b34114a74d5b18', variant: "title1" }, "Title 1 Text (h3)"), index.h("udp-text", { key: '6783204c66b1ec9c0a327a0348775a1cff59d0a2', variant: "title2" }, "Title 2 Text (h4)"), index.h("udp-text", { key: '932e2d9c4df21bf19da4cb8d2acf889adfac8c3d', variant: "title3" }, "Title 3 Text (h5)")), index.h("div", { key: 'd7621f753282fc5e61794f9bb75505bbd990dc25' }, index.h("h4", { key: 'd80331b3e5d8f0d69cf38870fc2fdcf6ad32d487' }, "Subtitle Variants"), index.h("udp-text", { key: '4e2c2d6f936c6efe98fdc02fda790aebee327930', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), index.h("udp-text", { key: '65747f643e3ceeefab16d0ea7fc5eac8d0423565', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), index.h("div", { key: '085ef198a65d6d83902bc4ac1efdb954e2d3275f' }, index.h("h4", { key: 'dc2d9429e9115490f67e4ed477fb716ae958ca02' }, "Body Variants"), index.h("udp-text", { key: '94fbff44b53823b034a6d5b028b44c4b9615c7b7', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), index.h("udp-text", { key: '8a6c6f60bb758c770deb329cbdad667e5f0aa059', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), index.h("udp-text", { key: '99a8f9ed4ba29fb6f90d9cd7b2c1f780f3c0baff', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), index.h("udp-text", { key: '3a67e5fecb242833bfe421f108edf39e23b5c34d', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), index.h("div", { key: 'a45a30b272175f042c8c6a01aef70f54ed308e57' }, index.h("h4", { key: '77b9ff74b9038eb07a6f4821f17e87dd6d145740' }, "Caption Variants"), index.h("udp-text", { key: '3600c0d4fc6dfdfc654a48b6801e176b9c05239d', variant: "caption1" }, "Caption 1 Text (span, inline)"), index.h("br", { key: 'db4f4f54cae63fd7a3370be895aa7bc21248a8cd' }), index.h("udp-text", { key: '1464999b9092053feebdced09fca345468e8e28b', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), index.h("br", { key: 'dd389d84d85347005f746c623c1a8c555905724b' }), index.h("udp-text", { key: '99d554e4d8f7c089a127b8a4dce7333867549a36', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), index.h("br", { key: '8581f28f69e7f9bff03445d21279382f543fa3f8' }), index.h("udp-text", { key: 'bdf3e91eb0dc4fe1ae5f5ae59e77121d37dc1201', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), index.h("br", { key: '346e4a3891596ac5b3b99ce30d1b8761bb804798' }), index.h("udp-text", { key: 'f5931f083eb0ab9490ba70d705dc9b36afde0f7d', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), index.h("div", { key: 'e31ecfc92134be1506ec4236c9d6f60b0df52f6d' }, index.h("h4", { key: '642734e5ea08bf93b200297c329058185ef0cd14' }, "Text Alignment"), index.h("udp-text", { key: 'a8df154fc72bc146a0a7668840a80341590d7685', variant: "body1", align: "start" }, "Aligned to start"), index.h("udp-text", { key: '09a7b980dabf6229440f270a3b1787374917851d', variant: "body1", align: "center" }, "Centered text"), index.h("udp-text", { key: 'f551a86ef240ab02c2e3c8ceddbfc1817486f6b3', variant: "body1", align: "end" }, "Aligned to end")), index.h("div", { key: '4d49a0e29f65c027753ea60e3322fe76a7e1cf79' }, index.h("h4", { key: '07553fa414c5d1fe2f4e8928e51913074c7d337c' }, "Text Styling"), index.h("udp-text", { key: 'e702d9af9f5459b36b3626bd52a61f907e5c8042', variant: "body1", italic: true }, "Italic text"), index.h("udp-text", { key: 'f95375afff2a062c9ef3e1ed19d19352c2d342dd', variant: "body1", underline: true }, "Underlined text"), index.h("udp-text", { key: '3b00389569ddbffb1a061fa1c86ee63a9ea36e35', variant: "body1", strikethrough: true }, "Strikethrough text"), index.h("udp-text", { key: 'ad999d9cbf1d7e4897b4fd4bbb3d2c6a9e11be7b', variant: "body1", weight: "bold" }, "Bold text")), index.h("div", { key: 'dcea9ca1b5800820bdb5b52a1181b850a16fd199' }, index.h("h4", { key: 'f821a4922cdfd5fdc36f056d3d99438b1ea47d6e' }, "Custom Semantic Tags"), index.h("udp-text", { key: '26eee527be4b3bfa60c23405c9604d13b205c144', as: "h1" }, "text as h1 element"), index.h("udp-text", { key: 'ee7de041cf02f1338a20cd6d54698c065f909759', variant: "caption1", as: "p" }, "Caption text as paragraph")), index.h("div", { key: 'dd5d9320636f6807a355a64b1b99766d54e17ee9' }, index.h("h4", { key: '7656ed914dc2d3aeb3300ef164c9a04ddeaf4718' }, "Font Variants"), index.h("udp-text", { key: '6f6f1d029b98e168e6b882354ad43e0e0a959c26', variant: "body1", font: "base" }, "Base font (default)"), index.h("udp-text", { key: '2861f14412f83b76677604b229909cc5c4dfad81', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), index.h("udp-text", { key: 'ca301485e3ace9c7c31614f89ff899504f08da97', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), index.h("div", { key: '9ad2cf900c86eed04cd69e57c07265db3604d31d' }, index.h("h4", { key: '2bebfb7057a74427ea1d14eea1a30bd91afa7b0e' }, "Size Override"), index.h("udp-text", { key: 'eaed0316794e2cff45a0e050c7aec1f96f2eb708', variant: "body1", size: "200" }, "Body variant with size 200"), index.h("udp-text", { key: '3a7565b996a4aae34236cabb23ab92d85c660250', variant: "body1", size: "600" }, "Body variant with size 600"), index.h("udp-text", { key: '96ded3e203f49130a359c504b635977df446ddee', variant: "body1", size: "1000" }, "Body variant with size 1000")), index.h("div", { key: '5acabb923faa949afff349a7354b096673271937' }, index.h("h4", { key: '224c71a69855ff1b31d4a975a5604cef5ac6ac8d' }, "Lists"), index.h("udp-text", { key: 'd5c03633650a0fa1caf871ac9e64a4e065053d32', variant: "body1", as: "ul" }, index.h("li", { key: '002f366c1be25ad16d7c3233c162b2e158faa701' }, "First list item"), index.h("li", { key: '8110de32060896571fbdaa054298ca7b7f3d1f7e' }, "Second list item"), index.h("li", { key: '6c92a1808599fb529c7be447bf95b6d7d008fe73' }, "Third list item")), index.h("udp-text", { key: '0f2c02772f1d51c99476a5c039d910e104d7b13f', variant: "body1", as: "ol" }, index.h("li", { key: '50e458117dffd6e9ba56ce0cbfe50891de5b8147' }, "First ordered item"), index.h("li", { key: '3b63c33b8f25966189be30103e17883578becdaa' }, "Second ordered item"), index.h("li", { key: 'd78f697263cbcfff377ce0784aeba6d709f941e1' }, "Third ordered item"))))), index.h("udp-tab-panel", { key: '4a03505b3b8ef6f0b051c160ef0df605222d4cfa', id: "menus", activeTabId: this.currentTab }, index.h("div", { key: '81c3336ef8f09919c26794d13fc57ed88faa8197', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, index.h("div", { key: '448f6c88865e282f01a723d59d35ad26b1078066' }, index.h("udp-fluent-menu", { key: 'bf055a64b8b80e31866166d260e46fe726c9f73f', items: this.nestedMenuItems, label: "Nested Menu" })), index.h("div", { key: '5c06d0d8b5068a3ed8b423a9a1113d6d0f1b171d' }, index.h("udp-fluent-menu", { key: '1a37e346358e3b4c6d845e0efabe9729af300934', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), index.h("div", { key: 'cc2e5ef2dbe67caba147fca40fd383c1e58d9c0f' }, index.h("udp-fluent-menu", { key: '777c0cf2d074d6f1b3d1481e6189b93c14700c86', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, index.h("div", { key: 'ac6507b3a1f5839ecf4a1e784fabf60e2be20814', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), index.h("span", { key: 'c9a444ad57a09238aca3af461ffdb2c91ec447cc', slot: "slot-test-end", style: {
|
|
2447
|
+
} }, index.h("span", { key: '01eeee251b82fb6d192f4f555027c8d4996b1192' }, "Item 1"), index.h("udp-fluent-divider", { key: '6efba44c6b791cd9ad088b990e50557eb8635585', orientation: "vertical" }), index.h("span", { key: '9cc5241f997346652026e92a0ef2aae4b6d40418' }, "Item 2"), index.h("udp-fluent-divider", { key: 'c6029ef09260dceabc9daaf520a976ca77fcc01f', orientation: "vertical", appearance: "brand" }), index.h("span", { key: '46ec359cebd79232829bc84e8887a97eef95d1a7' }, "Item 3"))), index.h("div", { key: '2c9fcea99d9f37796ef4d07f8c68ecd3f7ce823e' }, index.h("h3", { key: 'fa6b5e0d1f107d9084ffc091e8dca5722ed0fb97' }, "Fluent Icon Examples"), index.h("p", { key: '4a2011ed6245f29ac62920eaf4480fb474a3d3b4' }, "Basic usage (new simplified API):"), index.h("div", { key: '64d15fe41fb8a8e3b36b44d6dbe2daaa2b1f766a', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: 'bbb579bdc8010f831d9891bed79ccd0503f2c2eb', name: "add" }), index.h("udp-fluent-icon", { key: 'cba49aef6e446db580b95fc774669ff247095ffb', name: "home" }), index.h("udp-fluent-icon", { key: '4e1e30b8ee8ea9149a14a3105bf3c906701f6be8', name: "settings" })), index.h("p", { key: 'ab9461414da3c2d77efb153a9c25c72cd9be5fe7' }, "Colored:"), index.h("div", { key: '05e6113f3178297be8f18b704506da39d87e6f7f', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: '5dee87905073ce246debc149df97b871e84f3844', name: "add", variant: "filled", color: "green" }), index.h("udp-fluent-icon", { key: '7dc0777eb6f7fb80db9b3d25c3692a37dcdc79c8', name: "delete", color: "red" })), index.h("p", { key: '419ffa3e0848bc32993fab7e5f701249c849eae7' }, "Sizes (xs=16px, sm=20px, md=24px, lg=28px):"), index.h("div", { key: '5011efb4c55283920c2abdffc28f8b67c2ff373c', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: '78b8f897aa11f2d661a6584d14d2c8604c2a46c0', name: "home", size: "xs" }), index.h("udp-fluent-icon", { key: '5553cda608d6a1291017b1807792dbfabc1f51fc', name: "home", size: "sm" }), index.h("udp-fluent-icon", { key: '767e3153a7948bb0a5b3c990fe57f1a3e798bcfc', name: "home", size: "md" }), index.h("udp-fluent-icon", { key: '43a74e8ae3ee13c912494558d40b4fb9f7d9cc59', name: "home", size: "lg" })), index.h("p", { key: '6f6193c823f474597087ed4122e39f95a8d144f9' }, "Variants (regular vs filled):"), index.h("div", { key: '6ad23a1b5aaf9829d277b7f12096cd80d7906b5e', style: { display: 'flex', gap: '1rem', alignItems: 'center' } }, index.h("udp-fluent-icon", { key: 'c84151e3d630ed944582105a8a93c717bbe21494', name: "star", variant: "regular", size: "lg" }), index.h("udp-fluent-icon", { key: 'c456a9c7a3102da95eb1cab00f1dc84b49f727f5', name: "star", variant: "filled", size: "lg", color: "gold" }))))), index.h("udp-tab-panel", { key: 'c1e18ac39c6b3a2ddebe0c58b4180fe18ff1ab24', id: "text", activeTabId: this.currentTab }, index.h("div", { key: '3f98facbf76a84bcc7c0de6026fcb03cefc9439d', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, index.h("h3", { key: 'c1bd34a2295d258be06d47b36042b1ed04bc4def' }, "Text Component - All Variants"), index.h("div", { key: '39bd6befe6c705478088522c4d3c8b87e4f16d78' }, index.h("h4", { key: 'ea6a28e464aa71152422494472fcb1728f004bd6' }, "Display Variant"), index.h("udp-text", { key: '1555ff6cc0c973ce3072b262de457189296af3a5', variant: "display" }, "Display Text (h1)")), index.h("div", { key: '96638896a71a2f24dae8fad5577dcfb303bac667' }, index.h("h4", { key: 'bdabd653dd91ec51f5fc0963eb1d4cfcc5fa0455' }, "Large Title Variant"), index.h("udp-text", { key: 'b471c16a63937ef15a3c88fd162e6e922f1b4e3f', variant: "largeTitle" }, "Large Title Text (h2)")), index.h("div", { key: '41bc3fcffe9133067e907681cc1eb50767bd7dcf' }, index.h("h4", { key: '9f17379008f286e85e5bfa22cab3abae16ec842f' }, "Title Variants"), index.h("udp-text", { key: 'dee3f871c0c842508e86a085dff09a2e333d602e', variant: "title1" }, "Title 1 Text (h3)"), index.h("udp-text", { key: '39af3ef41600cef8232ee450bde4b708c0528dfd', variant: "title2" }, "Title 2 Text (h4)"), index.h("udp-text", { key: '4dc15ff581bf0607156a42b5417f2f2c05b14577', variant: "title3" }, "Title 3 Text (h5)")), index.h("div", { key: 'df0bd3a485d4ec980c730e113704f28ab96729d5' }, index.h("h4", { key: '8d57e17c8300b895b06ffe1f891ac1ccb6e8790b' }, "Subtitle Variants"), index.h("udp-text", { key: '434d0b05ac32eb27c67a4110fcc15c8789a99c67', variant: "subtitle1" }, "Subtitle 1 Text (h6, medium weight)"), index.h("udp-text", { key: 'd57b0cf0ccd5281f2fb0a9566359272fe20ed1cb', variant: "subtitle2" }, "Subtitle 2 Text (h6, semibold weight)")), index.h("div", { key: 'fa46cde711ca2abebbb1d5cbee83a73c97c29b5a' }, index.h("h4", { key: '7230d6f269e09442bca92e084cbb3f841e0fd5b7' }, "Body Variants"), index.h("udp-text", { key: 'c64cecde5e7dd84ebded125795245f19e2680a79', variant: "body1" }, "Body 1 Text (p) - This is the default variant. Lorem ipsum dolor sit amet, consectetur adipiscing elit."), index.h("udp-text", { key: 'c7765156399a0dfdebf91e2c819b90a4af99844a', variant: "body1Strong" }, "Body 1 Strong - Semibold weight for emphasis."), index.h("udp-text", { key: '5015cc4c8a39cbfcf00d1a09ba7efe3286dadda5', variant: "body1Stronger" }, "Body 1 Stronger - Bold weight for strong emphasis."), index.h("udp-text", { key: '24be572f7372b7667845123588559253555538ad', variant: "body2" }, "Body 2 Text - Slightly larger than body1.")), index.h("div", { key: 'ed3f4836fa99044b6c755360e2f207bb4ad42129' }, index.h("h4", { key: 'ab302ae405a8f3092759a3f7121bf04df6f9c21c' }, "Caption Variants"), index.h("udp-text", { key: 'e24230daa7e1f10dcb9dd959abef50b90d64da95', variant: "caption1" }, "Caption 1 Text (span, inline)"), index.h("br", { key: 'd23897990e074f49b7b1b2d82ae7cff86f45586b' }), index.h("udp-text", { key: '60b40961646f016f62dd7959155194c615388303', variant: "caption1Strong" }, "Caption 1 Strong (semibold)"), index.h("br", { key: 'b6ad1b4c23db38adc47079c4a866f81c0ccc9ba6' }), index.h("udp-text", { key: '41b702f44f355d9f2bb15be0a567e2d49b96e17e', variant: "caption1Stronger" }, "Caption 1 Stronger (bold)"), index.h("br", { key: 'ed51520c0efcdba08ff3e5e241db982fc8d2d9b2' }), index.h("udp-text", { key: '6317193cd56e7fd42d51c49ac45b1c125386b78b', variant: "caption2" }, "Caption 2 Text (span, inline, smaller)"), index.h("br", { key: 'a73443801f61c3075933bb33584a93e9976c0580' }), index.h("udp-text", { key: '6299c8cfba3c0f89977b95f0a4b9d894b9dab84b', variant: "caption2Strong" }, "Caption 2 Strong (semibold)")), index.h("div", { key: '48bf9e7327ba3a1308e088ef890957a0c190c72f' }, index.h("h4", { key: '67fa03437223dea20a0dfbb1267de2589e9caf07' }, "Text Alignment"), index.h("udp-text", { key: '98b7dbd03f53bd076f87a3c39a5dc3178a8f3aec', variant: "body1", align: "start" }, "Aligned to start"), index.h("udp-text", { key: '474af509b72d6f7636106e56a97a7d27506a4eaf', variant: "body1", align: "center" }, "Centered text"), index.h("udp-text", { key: '4805febc1d4129ef3890aa9ce2a314c3b33570d5', variant: "body1", align: "end" }, "Aligned to end")), index.h("div", { key: 'efd356eec800ffe60c05b30a6741c9744bd3da45' }, index.h("h4", { key: 'a48f7b510087192db3bf495e0f5dc0f543a7054a' }, "Text Styling"), index.h("udp-text", { key: '6c9f254b5c841f482b93d3d790e12350b857956c', variant: "body1", italic: true }, "Italic text"), index.h("udp-text", { key: '481a2796a04d5119e2f352f4ec682ecfb980e8b6', variant: "body1", underline: true }, "Underlined text"), index.h("udp-text", { key: 'a12770d6311710da3b5975ec0fd3dd9580dd9719', variant: "body1", strikethrough: true }, "Strikethrough text"), index.h("udp-text", { key: '3c626152de9e9687a1414cf02b4f8a08e60f8417', variant: "body1", weight: "bold" }, "Bold text")), index.h("div", { key: '1cb644d1f7f1168e01b10a5aacbd56cc6d2d251d' }, index.h("h4", { key: '6b7150b22c51a846e1fbc7b5b76ffa3b25c7604e' }, "Custom Semantic Tags"), index.h("udp-text", { key: '5265119c7967e714660556febf85244b41ffc3b9', as: "h1" }, "text as h1 element"), index.h("udp-text", { key: '7b41dedd5ff7e9986abf76205b454b727865d76c', variant: "caption1", as: "p" }, "Caption text as paragraph")), index.h("div", { key: '6a53163df222459062bfdad15edc3ddfd95a40fb' }, index.h("h4", { key: '8037a35ad5423779ab806c9c6585d00b949ff5d3' }, "Font Variants"), index.h("udp-text", { key: 'f555355b20fda9d692c9377fbf5a433e1ce201e9', variant: "body1", font: "base" }, "Base font (default)"), index.h("udp-text", { key: '958d7a1991f5dcc25cf735bcfe272acc606af1be', variant: "body1", font: "numeric" }, "Numeric font: 1234567890"), index.h("udp-text", { key: 'd5980208f955bddd3bdd8ea95364cd8d40bf6055', variant: "body1", font: "monospace" }, "Monospace font: const x = 42;")), index.h("div", { key: 'c52e1491dc3abf3ba2485013ea54b1bb90b1465a' }, index.h("h4", { key: '6c01746d0ab43443b623926e039b536a3cfac93a' }, "Size Override"), index.h("udp-text", { key: '79951b8a88cced20aea25fc169c70b248645c4c8', variant: "body1", size: "200" }, "Body variant with size 200"), index.h("udp-text", { key: '9b025a6edc6fe9b2671291c25c4fbf66d0746b98', variant: "body1", size: "600" }, "Body variant with size 600"), index.h("udp-text", { key: '352335eb8470d26c91f13df116869410f4c64c8b', variant: "body1", size: "1000" }, "Body variant with size 1000")), index.h("div", { key: 'a23537dff22be2e0b3930ace1082ef43a11ce5b2' }, index.h("h4", { key: 'b7967c335762d6c1f7005a9e3ab03e5e9a43c054' }, "Lists"), index.h("udp-text", { key: 'b93766359e1afa74b288117ec5c0b61ca4dde71c', variant: "body1", as: "ul" }, index.h("li", { key: 'bc1fa582a96f26fccce717d224fcb4576a65f1c5' }, "First list item"), index.h("li", { key: 'fecdcbdaf4de3c958e415c0cbaca35b14aa0383f' }, "Second list item"), index.h("li", { key: 'e697521fff802a5813cd86e9bd47be3b03dd3a3b' }, "Third list item")), index.h("udp-text", { key: '7bda3c21a8f33d1010ed788ee353ad5e64fc7aec', variant: "body1", as: "ol" }, index.h("li", { key: '740f6ed2d0cc971a32132ba8c82e3b751b7c247d' }, "First ordered item"), index.h("li", { key: '6c95cac969dc6e4e37ff49206690cd235ccc32f7' }, "Second ordered item"), index.h("li", { key: '33d44b148072e394959475a43797e0ad6cf8e9f9' }, "Third ordered item"))))), index.h("udp-tab-panel", { key: '5163424139eb53260f83faa9a663a1061bea1f42', id: "menus", activeTabId: this.currentTab }, index.h("div", { key: 'abbe4459436a9b3e001fcb09eccd345b95ae9c3f', style: { display: 'flex', flexDirection: 'column', gap: '2rem' } }, index.h("div", { key: 'c26d4211463ac011b08d105bc57660d68aa1774c' }, index.h("udp-fluent-menu", { key: 'fa904bf7d0475fee3723803394b5f27dd0e107b4', items: this.nestedMenuItems, label: "Nested Menu" })), index.h("div", { key: '517b97841336ecc93ba009c5d6c43eeabf6ef92d' }, index.h("udp-fluent-menu", { key: '3a521a6a9565aafe683ff90f238d99d793d9525f', items: this.sectionedMenuItems, label: "Sectioned Menu", endIconName: "add" })), index.h("div", { key: '8051c2bd6b175cf6cd7566c7e06556ad548ac2ad' }, index.h("udp-fluent-menu", { key: '269ca7ce4a7faafebb350c9fb40e9cb6d43590b6', items: this.iconMenuItems, label: "Icons & Slots", startIconName: "grid_20_regular" }, index.h("div", { key: '542f209f81b2ea8f569396913699f9b4812b1ca4', slot: "slot-test-start", style: { color: 'magenta', fontSize: '20px' } }, "\u2605"), index.h("span", { key: 'b4c35ff048d560fd376d85d928d770168a17c0ae', slot: "slot-test-end", style: {
|
|
2448
2448
|
backgroundColor: 'red',
|
|
2449
2449
|
color: 'white',
|
|
2450
2450
|
borderRadius: '4px',
|
|
2451
2451
|
padding: '2px 6px',
|
|
2452
2452
|
fontSize: '10px',
|
|
2453
|
-
} }, "NEW"), index.h("span", { key: '
|
|
2453
|
+
} }, "NEW"), index.h("span", { key: '518e3c11c6fd0403d6afcbb94bde66715911a64d', slot: "end-slot-item-end", style: { color: 'magenta', fontSize: '12px' } }, "Custom"))), index.h("div", { key: '8ed34cfcbd9ac5f35d7062dcd8375323f5e1dc05', style: {
|
|
2454
2454
|
display: 'flex',
|
|
2455
2455
|
justifyContent: 'flex-end',
|
|
2456
2456
|
border: '1px dashed #ccc',
|
|
2457
2457
|
padding: '1rem',
|
|
2458
|
-
} }, index.h("span", { key: '
|
|
2458
|
+
} }, index.h("span", { key: '8d16d17761b53df38e7cb50bd728b1839b4a357f', style: { marginRight: 'auto' } }, "Menu Overflow Test (far right):"), index.h("udp-tooltip", { key: '0e06c622656d7c7a79282a76e23047b0c5b42f48', positioning: "before", content: "More Options" }, index.h("udp-fluent-menu", { key: '9652a2cbf51ff5ae0e24c9bc58bb28ff72047141', items: this.radioMenuItems, onCheckedChange: e => console.log('Radio item changed:', e.detail), label: "Radio Groups", buttonType: "icon", endIconName: "more_horizontal_20_regular", shape: "circular", appearance: "transparent", openOnContext: true }))), index.h("div", { key: 'd2e7fec2827257898055583a151daf5910ac8471' }, index.h("h3", { key: '5129fb861c97e4170b59f9191524fe8fcabdce84' }, "New Radio Group Example"), index.h("udp-fluent-menu", { key: '3e1bd2a52072782fd197f12c98fcbeafd0796995', items: this.newRadioGroupItems, label: "Select Option", onCheckedChange: e => console.log('New Radio Group Change:', e.detail) })), index.h("div", { key: 'b85f566fef50909b250efc8342f6cce25c25fe01', style: { padding: '1rem', border: '1px dashed #ccc' } }, index.h("h3", { key: '259af106ddac6ce4247f3f3e5c923d8bff863af2' }, "Menu at Bottom (Testing onClick handlers)"), index.h("udp-fluent-menu", { key: '9e46f12ae4f0a83e70689fdcaae1528cdea2988d', items: this.checkboxMenuItems, onCheckedChange: e => console.log('Checked changed:', e.detail), label: "Checkbox Groups", buttonType: "split", onPrimaryClick: () => console.log('Primary clicked'), shape: "circular" }, index.h("udp-icon", { key: '6e368710b4f543a5b578ba06c043fe8e2d8d827b', slot: "start", iconName: "add" }))))), index.h("udp-tab-panel", { key: 'dd7d1525817df33d8583628bb37c2da13428540b', id: "grids", activeTabId: this.currentTab }, index.h("udp-lazy-loader", { key: '0e77d2d6a030dfc0aa841f3ab3b7744bd9882743', if: this.currentTab === 'grids', content: () => (index.h("client-side-grid", { columnDefs: [
|
|
2459
2459
|
{ field: 'make' },
|
|
2460
2460
|
{ field: 'model' },
|
|
2461
2461
|
{ field: 'price' },
|
|
@@ -2466,7 +2466,7 @@ const TestComponentsPage = class {
|
|
|
2466
2466
|
{ make: 'Toyota', model: 'Celica', price: 35000 },
|
|
2467
2467
|
{ make: 'Ford', model: 'Mondeo', price: 32000 },
|
|
2468
2468
|
{ make: 'Porsche', model: 'Boxster', price: 72000 },
|
|
2469
|
-
] })) })), index.h("udp-tab-panel", { key: '
|
|
2469
|
+
] })) })), index.h("udp-tab-panel", { key: 'd0a3536323fe78ec8688f5533f3320b980aeb137', id: "dialogs", activeTabId: this.currentTab }, index.h("div", { key: '611eb280d2e23be5e392b243c98fcd5ab8f4fd3a' }, index.h("udp-fluent-button", { key: 'e1510787519d0684d167a73f3be9633004daf24f', onClick: () => (this.dialogOpen = true) }, "Open Dialog"), index.h("udp-fluent-dialog", { key: '0ef26794aae59123482b097f52c4ee0974aba531', open: this.dialogOpen, dialogTitle: "Example Dialog", onDialogClose: () => (this.dialogOpen = false) }, index.h("div", { key: '0754b5ae10f5c281c4e21dc7eff1cd07c3214deb' }, "This is a simple dialog example."), index.h("udp-fluent-button", { key: 'a1c40d398d1caf25aa1e31bc63a423b9e20f0192', slot: "action", onClick: () => (this.dialogOpen = false) }, "Custom Close"), index.h("udp-fluent-button", { key: 'df7c342d6bff19d1f41351ad400b62326d2e44f9', appearance: "primary", slot: "action" }, "Confirm")))), index.h("udp-tab-panel", { key: '909b59d5e411423f265e9c0773fc8e5b13474a20', id: "cards", activeTabId: this.currentTab }, index.h("div", { key: '92f5f8fde798b7e17ed343ba8d48e1261235e3f7', style: { display: 'flex', flexDirection: 'column', gap: '2rem', padding: '1rem' } }, index.h("h3", { key: '9cc991d121e0b323c07748cc5da214d84812da55' }, "Cards"), index.h("h4", { key: 'e247a5b053d8efb694e46eb95eac8cffa37c5456' }, "Basic & Outlined (Default)"), index.h("div", { key: 'f4fdfcb7539a5ec82ab8a728839bf55da3edd74d', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, index.h("udp-fluent-card", { key: '804ca9ab02c16978f9d27b665e86e0e5e47a66da', appearance: "filled" }, index.h("div", { key: 'b8cff3e5811f45d4c718ec05cb78b3e6be8c977d', slot: "header" }, index.h("h3", { key: 'e94013c2eb58972dc511bb64515e87fbcba2d80f', style: { margin: '0' } }, "Basic Card"), index.h("span", { key: '9d4f5849f0ac197b04babb8dba4b648328017c23', style: { fontSize: '12px', color: 'var(--colorNeutralForeground2)' } }, "This is a basic outlined card")), index.h("span", { key: '3e932c23f99d05055aa4640fe23dcd9c89bc4bf6' }, "Card content goes here. The card handles its own slots for header, preview, and footer."))), index.h("h4", { key: '6909265418f7f6084266a86cc8ccee15e1217107' }, "Elevated & Media"), index.h("div", { key: '443703a6ff034a1c772592f03c78f990f3391492', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, index.h("udp-fluent-card", { key: '79e2187aab2df15c971310615cfc32a914a09976', appearance: "filled", interactive: true, label: "With shadow & interactive", subtitle: "This card uses the filled appearance and has a preview image." }, index.h("img", { key: '7b7ca476886f252cf472d4704e864a37f760833f', slot: "preview", src: "https://images.unsplash.com/photo-1557683316-973673baf926?w=600&h=400&fit=crop", alt: "Abstract gradient preview" }), index.h("span", { key: '77d550b6446a9d885c80edcf075e5a4df7bfb132' }, "Card content"), index.h("div", { key: 'bd1dd6c4f4b8f17f1cb03cfbe361b0bd22124bc9', slot: "footer", style: { display: 'flex', gap: '8px' } }, index.h("udp-fluent-button", { key: '7c9e7da53a83b81bde8a5a43adc59366f13fdac8', size: "small" }, "Action 1"), index.h("udp-fluent-button", { key: '9a087b396db5895a82937804d0d521442ab5d164', size: "small", appearance: "outline" }, "Action 2"))), index.h("udp-fluent-card", { key: 'b6ea36afbcbc0842293aca5a927239eb54a1eca2', appearance: "subtle", label: "Prop provided title", subtitle: "Prop provided subtitle" }, index.h("span", { key: '9a46634af27480d1945ff3e90bdf15feed34832e' }, "This card uses the subtle appearance. Good for lists or less emphasized content."), index.h("div", { key: 'b01fcafe2927524dc5acde9bcdbf62c95891c465', slot: "footer" }, index.h("udp-fluent-button", { key: '1b8323033d13275f52a925728705cb1359f5b4c1', appearance: "primary" }, "Dismiss"))), index.h("udp-fluent-card", { key: '3119d763a70890c0fc9878181b45c6f064df3839', appearance: "outline", label: "Card with Action", subtitle: "Header action example", width: "320px" }, index.h("udp-fluent-icon-button", { key: 'a76634627327521d81ad7687bb8ef9eca07c08cd', slot: "header-action", iconName: "more_horizontal_20_regular", appearance: "subtle", ariaLabel: "More options", onClick: () => console.log('More clicked') }), index.h("span", { key: '522733ab4240087bf38bfea91248f92d559aa0e7' }, "This card demonstrates the header-action slot with an icon button.")), index.h("udp-fluent-card", { key: 'b8ea4c3918e2d12b53c71e685fcaa561aebd78e7', appearance: "muted" }, index.h("h4", { key: '303d440ff3c0f2130c3536ea2e6ef4dcf72608f0', slot: "header", style: { margin: '0' } }, "Muted Card"), index.h("span", { key: 'e24148be4c3d0e8d436f2c97e142445cdeee2c69' }, "Flat with subtle grey shading."))), index.h("h4", { key: '71f78cf84a0b7d744912290648795345795d0a72' }, "Horizontal & Sized"), index.h("div", { key: '950c860d615c53095841945e4cdba79d57398d0b', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, index.h("udp-fluent-card", { key: 'b979d6082f9ed163a9d74dad1edc97bcd733b923', orientation: "horizontal", width: "400px" }, index.h("div", { key: '5dea4c6e7936c3c55faea691578969e4b1a0d6c6', slot: "preview", style: {
|
|
2470
2470
|
width: '80px',
|
|
2471
2471
|
height: '100%',
|
|
2472
2472
|
backgroundColor: 'var(--colorNeutralBackground3)',
|
|
@@ -2474,7 +2474,7 @@ const TestComponentsPage = class {
|
|
|
2474
2474
|
alignItems: 'center',
|
|
2475
2475
|
justifyContent: 'center',
|
|
2476
2476
|
fontSize: '24px',
|
|
2477
|
-
} }, "\uD83D\uDCF7"), index.h("div", { key: '
|
|
2477
|
+
} }, "\uD83D\uDCF7"), index.h("div", { key: 'af365986dddc77ca60069d418f6297a2941d71c6', style: { display: 'flex', flexDirection: 'column', width: '100%' } }, index.h("div", { key: '56b6e713841c2e0a2121a6f0b4b23e336d3dff03', slot: "header" }, index.h("h4", { key: 'c5bb5e19aa242fc3cda7c0dff032090b43635d09', style: { margin: '0' } }, "Horizontal Card")), index.h("span", { key: 'eca9026ed5c2dc5c24768a753b2fa044a8b0b7b2' }, "Fixed 400px width."))), index.h("udp-fluent-card", { key: 'a2e04422e7141c167a370504f3450ed7dc6b25d8', width: "300px", appearance: "filled" }, index.h("div", { key: '376090fd9358b38c34abd5d065a8b7ad29fda9c6', slot: "header", style: { display: 'flex', justifyContent: 'space-between' } }, index.h("span", { key: 'f8c2255cf7faa5eca70bc8df243478a4592339db', style: { fontWeight: '600' } }, "Fixed Width User"), index.h("udp-fluent-icon", { key: '11f34726a77cf1e23443d074f35fcbca14314a8e', name: "person_20_regular" })), index.h("span", { key: '34ec0c7808743a5a021776fa8591b7e25b434e4d' }, "Fixed width (300px), auto height. Reduced padding is no longer controlled by a prop."))), index.h("h4", { key: '8b69d7b781f077c0d74052cba945cba3382cba21' }, "Complex Interaction"), index.h("div", { key: '5c825dbd2d9c47b392b00c3e454d38d7ac85e7d2', style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, index.h("udp-fluent-card", { key: '13bc4cf4d4daa7d4b4f2448c99bf091b385426fd', interactive: true, appearance: "outline", onClick: () => console.log('Card clicked'), style: { width: '280px' }, label: "John Doe", subtitle: "Software Engineer" }, index.h("div", { key: 'b6f32859cea67463434baee96f5f513ad7da370a', style: {
|
|
2478
2478
|
width: '32px',
|
|
2479
2479
|
height: '32px',
|
|
2480
2480
|
borderRadius: '50%',
|
|
@@ -2483,39 +2483,39 @@ const TestComponentsPage = class {
|
|
|
2483
2483
|
display: 'flex',
|
|
2484
2484
|
alignItems: 'center',
|
|
2485
2485
|
justifyContent: 'center',
|
|
2486
|
-
}, slot: "header-start" }, "JD"), index.h("udp-fluent-icon-button", { key: '
|
|
2486
|
+
}, slot: "header-start" }, "JD"), index.h("udp-fluent-icon-button", { key: 'd9aa7a4482eaa5b90c9a71b7fbc8fd8b65062765', iconName: "more", slot: "header-action", shape: "circular" }), index.h("udp-fluent-icon-button", { key: '0a1682aad7f0c22bc3ed7ed5fe636a23b318c9b8', iconName: "dismiss", slot: "header-action", shape: "circular" }), index.h("div", { key: 'c1a3eb080b1e1420f8184ff47a36e33e86c48c0f' }, "(div) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), index.h("udp-typography", { key: '8a6001d3223d37ac0bd3942b8d0b604bc78c8253', variant: "body1" }, "(body1) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), index.h("udp-typography", { key: '394e5fed1aebb74dd595718b24ba9599d1fccb9b', variant: "body2" }, "(body2) Responsible for maintaining the core design system and ensuring accessibility compliance across all products."), index.h("udp-fluent-button", { key: '551221251daf7d8b95c6fc516a38c672ad849e8d', slot: "footer", appearance: "primary", size: "small", onClick: () => console.log('Profile clicked') }, "View Profile"), index.h("udp-fluent-button", { key: '5c5da8794e3616752cc55c02e27056e98eff6172', slot: "footer", appearance: "outline", size: "small", onClick: () => console.log('Help clicked') }, "Help Center"))), index.h("h4", { key: 'c16c523960153e5174b163a2f1de3db801701795' }, "Flex Layout (Grid System)"), index.h("div", { key: '56b6beb1558010165d3dce4504d6fea6a619f50c', style: { display: 'flex', flexDirection: 'column', gap: '1rem' } }, index.h("div", { key: '8616a289410dde07828f47edee5bc37d96826e8f', style: { display: 'flex', gap: '1rem' } }, index.h("div", { key: 'e2b2a9efbb37544a71da5abbaa78441ee8b00b2c', style: { flex: '1' } }, index.h("udp-fluent-card", { key: '1b89f5ce6101fccbc5017b30d8f51407ae940dc4', width: "100%" }, index.h("div", { key: 'eb587fa1e2a420cf1ef0b359ce5fd41bb10d386d', slot: "header" }, index.h("h3", { key: '3ee97d8d534c028489783f8d35e7f679ef1d8aa8' }, "Card 1 (50%)")), index.h("span", { key: '177cec810d9f9a34b04f37284a4d2ddaf83b82e0' }, "Flex item 1"))), index.h("div", { key: '3bb03fedbd99020833b45fb4106b3da3ea789f79', style: { flex: '1' } }, index.h("udp-fluent-card", { key: '91e29504038b4adfec08f94306896e39c779788f', width: "100%" }, index.h("div", { key: 'cdd3d836f207408cf5521b995a4e553a0d849283', slot: "header" }, index.h("h3", { key: '47a95b3e7b4c8dd0707c354d53b1b09a7785b284' }, "Card 2 (50%)")), index.h("span", { key: '286b60ddcbde00164f832d9558495ce920201ab0' }, "Flex item 2")))), index.h("div", { key: 'ef8343b0b30c1d1bac3915cc8ce745b07096530c', style: { display: 'flex', gap: '1rem' } }, index.h("div", { key: '40c130e72f1fc87232f47b0bbe69318b6be1bdc7', style: { flex: '1' } }, index.h("udp-fluent-card", { key: '1f8e55d5eeaa4d16f4d36ab7f26d2aaba2c2ad3b', width: "100%" }, index.h("div", { key: '008aecc6fc692a5c9f2e6e24d5c1f050af1e32d5', slot: "header" }, index.h("h3", { key: 'ee52f16b3a81c8fc2620b8cd7570e4da51adfe73' }, "Card 3 (33%)")), index.h("span", { key: 'baf8f8a74dd1711f7d30800a7a8121a5796e5fb0' }, "Flex item 3"))), index.h("div", { key: '12a63d4d2dc5b1208e8af14ecc631067c6ed13ed', style: { flex: '1' } }, index.h("udp-fluent-card", { key: '19da61207b4780540c5bd31cc9f605577c16cc2c', width: "100%" }, index.h("div", { key: '2f07c73468ae90aa203e38ffae0f0924837145bc', slot: "header" }, index.h("h3", { key: '785b6799daa987b01956d28c3c0fb878b817b4ff' }, "Card 4 (33%)")), index.h("span", { key: 'e7d53eb0ab31cbca533ad399c72c760e7229e90d' }, "Flex item 4"))), index.h("div", { key: 'e2da8bea6c70b21208df501bf35ea2f2b24bef63', style: { flex: '1' } }, index.h("udp-fluent-card", { key: '5126e1c80ede37972e30f1530983c9bdf82f1778', width: "100%" }, index.h("div", { key: '5d54ef2dcff63889d81647dbb75a11949edacf28', slot: "header" }, index.h("h3", { key: 'db4635804f40d757a14728c25b93a72944091fe0' }, "Card 5 (33%)")), index.h("span", { key: 'afde4e9b8fe232b5105fb9ac5c9aa2ea7e1a9c9f' }, "Flex item 5"))))))), index.h("udp-tab-panel", { key: '21255dc1ea802b2667880e90f8f4fb5da9fb592f', id: "chips", activeTabId: this.currentTab }, index.h("div", { key: '12cccc71ed47912271a3065b480cf30cbe975af5', style: { padding: '24px', display: 'flex', flexDirection: 'column', gap: '24px' } }, index.h("h4", { key: '986dcda9183d91176dda4e2fc0e5264c3ba34a3b' }, "Filled Chips"), index.h("div", { key: '609864185b3315731aee56e2d2949e7a940538d2', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-chip", { key: 'df33079df6aa0aea8b727b1aecf0939a7a90f6dc', label: "Basic Chip", variant: "filled", color: "gray" }), index.h("udp-chip", { key: '7fa61d187d904114feca9e1165e327a0d46b35e7', label: "Primary", variant: "filled", color: "primary" }), index.h("udp-chip", { key: '5e313035ac2f768fba4c824d817e0e982f0e59f9', label: "Success", variant: "filled", color: "success" }), index.h("udp-chip", { key: '24724121081ba8e2e3635b9eb5db01a32c039361', label: "Warning", variant: "filled", color: "warning" }), index.h("udp-chip", { key: '0d26627767a0e6146e7cefe1d04eb943b004b52d', label: "Error", variant: "filled", color: "error" })), index.h("h4", { key: '4e7eccfe0cc054c7cc12072e5b4ab6b182b4501b' }, "Outlined Chips"), index.h("div", { key: '078ec194f9629e2a070b350265fcad02f5ec787d', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-chip", { key: '977780ce7d83f9e8f1f38ebb8d7f8c4df2f4ed79', label: "Basic Chip", variant: "outlined", color: "gray" }), index.h("udp-chip", { key: 'd4ecc4da13b1251788eec303598ea9b1fa26d1e9', label: "Primary", variant: "outlined", color: "primary" }), index.h("udp-chip", { key: '6c3f32d93f2088b55ddf5c81ca531b3f4709ba5b', label: "Success", variant: "outlined", color: "success" }), index.h("udp-chip", { key: '8e6db7bfbebdeffd3f4c5b02a4926ef228ca9fe5', label: "Warning", variant: "outlined", color: "warning" }), index.h("udp-chip", { key: 'fb86bc37ceb82d925d5923a08c4b64a834308b82', label: "Error", variant: "outlined", color: "error" })), index.h("h4", { key: '0277c213fad34906d39dee3fbbc50da7567b03d5' }, "With Icons & Deletable"), index.h("div", { key: '747c94473f9b77f3dda1e4dc7efb516ed3facce2', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-chip", { key: '62956fca4a62517fe7b4e5c1dff30f64bdfb424f', label: "Person", startIcon: "person_20_regular", variant: "filled", color: "primary" }), index.h("udp-chip", { key: '13d14dc4eeb829eaaaecda32466fb323da781bd9', label: "Deletable", variant: "filled", color: "gray", deleteButton: true, onChipDelete: e => console.log('Delete:', e.detail) })), index.h("h4", { key: 'ce8b24ef81806cc1f00f8fe1ca36aa22e8b8398c' }, "Sizes"), index.h("div", { key: 'a659f2cf1a8fec041437ef2b04423c1bce4e1a5f', style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } }, index.h("udp-chip", { key: '193cf283ad2a75fc52c919dd4759db2465492391', label: "Medium (Default)", size: "medium" }), index.h("udp-chip", { key: '704e2107b2cf0b2fe41abc884df002715ae88700', label: "Small", size: "small" })))), index.h("udp-tab-panel", { key: 'b44631aff998c4fb96f3f6291168b19c179aff7e', id: "forms", activeTabId: this.currentTab }, index.h("div", { key: '78673948efd7a6b6f733c280a565124fccee237d', style: {
|
|
2487
2487
|
padding: '24px',
|
|
2488
2488
|
display: 'flex',
|
|
2489
2489
|
flexDirection: 'column',
|
|
2490
2490
|
gap: '40px',
|
|
2491
|
-
} }, index.h("div", { key: '
|
|
2491
|
+
} }, index.h("div", { key: 'd4826a4a796fa326ace82ebd3c7d54623a1c544e' }, index.h("h3", { key: 'b9418e6415bb882c0d54fb4d1528e96bff4b45fa' }, "1. Registry Pattern (Sidesheet)"), index.h("p", { key: '25af99807b5640788cf33f36e58f2d869f44ee2b' }, "Button in drawer footer auto-connects to form via ", index.h("code", { key: 'd4db9ac082e0aff72f75d56e240d4617dee37773' }, "formId"), "."), index.h("div", { key: 'd70d5b5b60d8e6eaf97611e979b7168271e628a7', style: { marginTop: '16px' } }, index.h("udp-fluent-button", { key: '0265941772815f66cb2f30dc7183b0d1dae56bf3', appearance: "primary", onClick: () => (this.formDrawerOpen = true) }, "Open Registry Form Drawer"))), index.h("hr", { key: 'bea465a1312273bfe716d27bbd8130b8f98faebc', style: { width: '100%', borderColor: '#eee' } }), index.h("div", { key: '41e785410c90ac235b7a18afd0150af77a520a1a' }, index.h("h3", { key: '62a09e151d6b2ac36797a64cbbd1579d457f5d51' }, "2. Legacy Manual Wiring (Sidesheet)"), index.h("p", { key: '5de4c705d0d0fac90ef53a4aba4b66e8f9e4a1b6' }, "Parent component manually listens to ", index.h("code", { key: 'ae12aefff04e93a14cd337e637d3b46b468b157a' }, "formReady"), ", tracks validity state, and calls ", index.h("code", { key: 'ad8c80f8b8f66b017fc11706bc72da909faa108b' }, "submit()"), "."), index.h("div", { key: '200754e8b4e244933a7dfb4db6aa11348ac038cb', style: { marginTop: '16px' } }, index.h("udp-fluent-button", { key: '81e892a6c1f8e38fa218994893d122f7a1b448b5', appearance: "outline", onClick: () => (this.manualDrawerOpen = true) }, "Open Manual Form Drawer"))), index.h("hr", { key: 'dc41c08b435987d541880938eaab29afd62739b0', style: { width: '100%', borderColor: '#eee' } }), index.h("div", { key: '52b3c848aa8135629a2fe3221dfd1104159ae077' }, index.h("h3", { key: '4a61f3f99a528464c9a3f75fc9c96f8e02ac11ff' }, "3. Inline Form"), index.h("p", { key: 'abaf989bd93570c59fece47c3b45b6df26f95df1' }, "Form embedded directly in the page. Uses registry pattern for the external submit button."), index.h("div", { key: '2711f984bb0c842282ab190c6d8e632e3afc539c', style: { border: '1px solid #e0e0e0', padding: '24px', borderRadius: '8px' } }, index.h("div", { key: 'a724b3916508ea44eb826b3e02066299cb9816ed', style: { marginTop: '16px', display: 'flex', justifyContent: 'flex-end' } }, index.h("udp-fluent-button", { key: 'e01ba66e046e30bf207d71eaccc9025ae76d5fca', appearance: "primary", form: "inline-form", type: "reset" }, "Inline Reset")))))), index.h("udp-tab-panel", { key: 'c6764817c48ef852b30b538c24206b514064bfad', id: "calendar", activeTabId: this.currentTab }, index.h("div", { key: 'db7b2f52b7661be9c628d2903a30c549ad7fc3d4', style: {
|
|
2492
2492
|
padding: '24px',
|
|
2493
2493
|
display: 'flex',
|
|
2494
2494
|
flexDirection: 'column',
|
|
2495
2495
|
gap: '32px',
|
|
2496
|
-
} }, index.h("div", { key: '
|
|
2496
|
+
} }, index.h("div", { key: '171c9bb0465599f98bc569f313c23d9a7c96068a' }, index.h("h3", { key: '371af60a43526a54bfe9d2886505aca67b96c8ca' }, "Date Range Selector (Fluent2 Styled)"), index.h("p", { key: '22c84283c07f6036b06147924a12f343901e31a7', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Calendar component with month/year view navigation. Click the header to switch views.")), index.h("div", { key: '678a767533462806e1f7836440d7db7e48aa7659', style: { display: 'flex', gap: '48px', flexWrap: 'wrap' } }, index.h("div", { key: '87be8167d1c52ec8edd4e31e2d30b7c4075c8c5b' }, index.h("h4", { key: '17dec9e007bba2deb889f00f85aeebb92b0db400', style: { marginBottom: '8px' } }, "Single Date (sm)"), index.h("udp-date-range-selector", { key: '519cc88d6aeaac2897ae2a7fb79ffb34f94ff30a', variant: "single", monthsToDisplay: 1, size: "sm", onChange: (e) => (this.singleDateValue = e.detail) }), index.h("p", { key: 'bd4eeab16461f99fe1426a203fcbd17fe4418351', style: {
|
|
2497
2497
|
fontSize: '12px',
|
|
2498
2498
|
color: 'var(--colorNeutralForeground3)',
|
|
2499
2499
|
marginTop: '8px',
|
|
2500
|
-
} }, "Value: ", index.h("code", { key: '
|
|
2500
|
+
} }, "Value: ", index.h("code", { key: '2aff37bf102610c69f39e1e1551c235d2b4b1bf1' }, this.singleDateValue || '(none)'))), index.h("div", { key: 'f7de73b40f417f7bcfaef871f6e3b4bc204cfefb' }, index.h("h4", { key: '115ec190f7698b270a87c828cb11d76c647ca54e', style: { marginBottom: '8px' } }, "Multi-Select (md)"), index.h("udp-date-range-selector", { key: '4aa1a034e5b7a7c00031e3cc9ce6dcdef017a253', variant: "multi", monthsToDisplay: 1, size: "md", onChange: (e) => (this.multiDateValue = e.detail) }), index.h("p", { key: '838d1f549ccb14c9c21ed180657117f4bb0b6fcc', style: {
|
|
2501
2501
|
fontSize: '12px',
|
|
2502
2502
|
color: 'var(--colorNeutralForeground3)',
|
|
2503
2503
|
marginTop: '8px',
|
|
2504
|
-
} }, "Value: ", index.h("code", { key: '
|
|
2504
|
+
} }, "Value: ", index.h("code", { key: '780f9a3fdbc2c3b6fa6ba99d17f2c1b2b3c51b40' }, this.multiDateValue || '(none)')))), index.h("div", { key: 'ef262e8bdc0d8cdcb444171827281a32578785e9' }, index.h("h4", { key: 'afdab93b83ef4cfe556944910aede40d8f4562c4', style: { marginBottom: '8px' } }, "Date Range (lg, 2 months)"), index.h("udp-date-range-selector", { key: '3b78f655ae29a4cd0a0850150a086336a6a45bc7', variant: "range", monthsToDisplay: 2, size: "lg", orientation: "horizontal", onChange: (e) => (this.rangeDateValue = e.detail) }), index.h("p", { key: '790238e61fcbc094828c2b723b18e69db136fcd7', style: {
|
|
2505
2505
|
fontSize: '12px',
|
|
2506
2506
|
color: 'var(--colorNeutralForeground3)',
|
|
2507
2507
|
marginTop: '8px',
|
|
2508
|
-
} }, "Value: ", index.h("code", { key: '
|
|
2508
|
+
} }, "Value: ", index.h("code", { key: 'b22a83a98c1967a0ad7759dbed149ef217797a91' }, this.rangeDateValue || '(none)'))), index.h("div", { key: '02f01666793d2629781dcf34ddc19f833c33a9c3' }, index.h("h3", { key: '87b49b7af09c3c81d9a612e39174cf33c3a55ee2', style: { marginTop: '16px' } }, "Date Picker (Native)"), index.h("p", { key: '5f354fe1c8bb259c4add4b16c36821d0cfd45a11', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "For simple single date selection, the native date input provides quick month/year navigation."), index.h("div", { key: '7265a2d305119269541cb410ee0a2af40686368e', style: { display: 'flex', gap: '24px', flexWrap: 'wrap' } }, index.h("udp-date-input", { key: '25264d59cac6f3e9a397a8aa9c927a7a3d31c2e7', label: "Date", appearance: "outline" }), index.h("udp-date-input", { key: '443840a8f90c417227864e92262e8cff49a2b723', label: "Date & Time", appearance: "outline" }))), index.h("div", { key: 'a17ad98b4d20606ced5cefd4cbc90997810f924f' }, index.h("h3", { key: 'ef31163aac920d8752e54d6b46b42012bb125430', style: { marginTop: '24px' } }, "Popover Component"), index.h("p", { key: '6349434bea25873f3ee5ceba9eda17cbec1afdbe', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '16px' } }, "Generic popover using native Popover API and CSS Anchor Positioning."), index.h("div", { key: '1d2b802e71556e70ba34bde974d65f9beb2dc0aa', style: {
|
|
2509
2509
|
display: 'flex',
|
|
2510
2510
|
gap: '24px',
|
|
2511
2511
|
flexWrap: 'wrap',
|
|
2512
2512
|
alignItems: 'flex-start',
|
|
2513
|
-
} }, index.h("udp-popover", { key: '
|
|
2513
|
+
} }, index.h("udp-popover", { key: '59d850a3cf41a3c23e12583e6a4e0929cf42851d', position: "bottom-start" }, index.h("udp-fluent-button", { key: '196d47f17633470e5b6b30fe45b877e24d2d951d', slot: "trigger", appearance: "outline" }, "Open Popover"), index.h("div", { key: '49c63511a2668702b7ce709b62f0495b779c7dd8', slot: "content", style: { padding: '16px', minWidth: '200px' } }, index.h("p", { key: '8d9eb6954f15478ed8144d84387fd198d5e980c1', style: { margin: '0 0 8px 0', fontWeight: '600' } }, "Popover Title"), index.h("p", { key: '121866176635ca508601265af21b36af40c1e62c', style: { margin: '0', color: 'var(--colorNeutralForeground2)' } }, "This is popover content. Click outside to close."))), index.h("udp-popover", { key: '2ddb88e27daa70302c918efb00d08836bdaf6609', position: "bottom-start" }, index.h("udp-fluent-button", { key: '8847f0fae997ef3e3b75d8bdde51ee6dc7dfe4d7', slot: "trigger", appearance: "primary", startIconName: "calendar" }, "Date Picker Popover"), index.h("div", { key: '254e20ffc8bb6c55b4c0fb9c02b2044a022d440c', slot: "content", style: { padding: '8px' } }, index.h("udp-date-range-selector", { key: 'fa2e83752681a3522620ceea6928930d499faeca', variant: "single", monthsToDisplay: 1, size: "sm" }))), index.h("udp-popover", { key: '7e038e8e36243bc8300b5f73ba29a6d3e32bb262', position: "right" }, index.h("udp-fluent-button", { key: '20852f30705cf2e4be357e475c80ae4c865e74a6', slot: "trigger", appearance: "subtle" }, "Right Position"), index.h("div", { key: 'ef21dee97b37cfcc2c8cf5bc5c517157f9d586e7', slot: "content", style: { padding: '12px', minWidth: '150px' } }, "Positioned to the right")))))), index.h("udp-tab-panel", { key: 'beb3b23bf1e4a0117fc8d93b1a1c56c9bd430c41', id: "popover", activeTabId: this.currentTab }, index.h("div", { key: '44ed56a41506b2f2f27ecd1c1596f9c69fec540f', style: {
|
|
2514
2514
|
padding: '24px',
|
|
2515
2515
|
display: 'flex',
|
|
2516
2516
|
flexDirection: 'column',
|
|
2517
2517
|
gap: '32px',
|
|
2518
|
-
} }, index.h("div", { key: '
|
|
2518
|
+
} }, index.h("div", { key: '5bb61367f3d56b00d8a14378d218bb4cc4110cc7' }, index.h("h3", { key: 'd9319313ffababcce6b7e9d08dceff9c26b6086f' }, "Popover Component"), index.h("p", { key: '7659666293e9a6ec619f680408f57e64c4edb4a2', style: { color: 'var(--colorNeutralForeground2)', marginBottom: '8px' } }, "Generic popover using native Popover API with JavaScript positioning. Follows Fluent 2 Design System guidelines.")), index.h("div", { key: '82ee243153a16a7e6fb41801a2ebe55c9a353e29' }, index.h("h4", { key: 'a17f0722b617dd47ad2e4cabb460771daea33445' }, "Basic Usage"), index.h("div", { key: '8f2050d85a41263c62ddceeba3934518799bc81b', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, index.h("udp-popover", { key: '82cd2f19d33f4ec10d98c59f7858d91c8410c9c7' }, index.h("udp-fluent-button", { key: '70938e645f731f434a56bde4092c287a2350df24', slot: "trigger" }, "Default Popover"), index.h("div", { key: 'b0c48e892ae1f520357adea6129c163c24de15c3', slot: "content" }, index.h("h4", { key: '25f35d6b026ddf6fff8604f54ad4b05b8b7e52a1', style: { marginTop: '0px' } }, "Popover Title"), index.h("p", { key: 'a8f102484b3c39db98f324cd14b1c5b0a7b832fc', style: { marginBottom: '0px' } }, "This is popover content. Click outside to close."))), index.h("udp-popover", { key: '4be258ea22800042adfa354e3f32092629e2f005', position: "top" }, index.h("udp-fluent-button", { key: 'b6b9f4bef02ce51fce0598766a4452024cc29053', slot: "trigger", appearance: "outline" }, "Top Position"), index.h("div", { key: '905ccd6d9f9bb9cdf84d9154c9b49c888913273e', slot: "content" }, index.h("p", { key: 'ff1378100be12dfd2c47d545450d491c366ab9ea', style: { margin: '0px' } }, "Positioned above the trigger"))), index.h("udp-popover", { key: '425bf618352d9f9f529230d7caf15f4539b15315', position: "right" }, index.h("udp-fluent-button", { key: '7717d88a7a011efef29c5c107cca316adadb209f', slot: "trigger", appearance: "subtle" }, "Right Position"), index.h("div", { key: '1877207987cb480a8d2900b2523ee1301a0b51b7', slot: "content" }, index.h("p", { key: '356ae04590c48c6a4855df0cf6376e6cd696bf9e', style: { margin: '0px' } }, "Positioned to the right"))))), index.h("div", { key: 'a0fed7625ead30f431e10c9fd0d93489d2266c09' }, index.h("h4", { key: 'c2c8d34e7402b85acc11ba4363c6f9d788aeaee2' }, "With Arrow"), index.h("p", { key: '56ab12d1ee2c3d608932eab5353ca820b41e1bf8', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Display an arrow pointing from the popover to the trigger."), index.h("div", { key: '9df360cbe4eacf82f30eacc50a8f70f7e1c541e3', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, index.h("udp-popover", { key: '86ca74387434c727a2dbcc8d391f9d1cfa9323ec', "with-arrow": true }, index.h("udp-fluent-button", { key: '9af81ca82b5eb6884e6b0638a803d9986ae38a46', slot: "trigger" }, "Default Arrow"), index.h("div", { key: '628da9b0764e95b0d3ae1853d6cf69311518eb17', slot: "content" }, index.h("p", { key: '9297b83fa7a362e0525fe334e2cb416316d12002', style: { margin: '0px' } }, "Popover with arrow"))), index.h("udp-popover", { key: '8a646ad3138856f6e58bbe62c2f11b868a57ff4a', "with-arrow": true }, index.h("udp-fluent-button", { key: '13edc6456bcc0c21ba5155ec9d3aaa66c0451e1d', slot: "trigger", appearance: "primary" }, "Brand Arrow"), index.h("div", { key: 'ff0ae254dd7c5ab54d0543a452b78fb3d974caf6', slot: "content" }, index.h("p", { key: 'c7c19426ee470cae472b12c3aab79326c5bac1ca', style: { margin: '0px' } }, "Brand popover with arrow"))), index.h("udp-popover", { key: '0d7d9d69f3929c776c602e92e223d04c434d8a44', "with-arrow": true, position: "top" }, index.h("udp-fluent-button", { key: '2b94bfc6aca3f6347d63a0bea9be03a31d92456c', slot: "trigger", appearance: "outline" }, "Top Arrow"), index.h("div", { key: 'fbbddfc913372f02df9bc5457d91ad6c1320fb23', slot: "content" }, index.h("p", { key: '322ad996b84b52b823dc538a42e06664f0dc6e04', style: { margin: '0px' } }, "Arrow on top position"))))), index.h("div", { key: '974aafb53bab6e533017f3324c38e90d315c7fde' }, index.h("h4", { key: 'c395a04b388e9a70d93c331e26322eca0d42a574' }, "Size Constraints"), index.h("p", { key: 'df96344939665236d1869531e3bfeecb5646d888', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "Optional max-width constraints. Without size, popover grows to fit content."), index.h("div", { key: '985cf50c2b420764626aabd935eb6dfd2fbccdfd', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, index.h("udp-popover", { key: 'e387881fbc027947872ddfff239b6c2bd8820b4d', size: "small" }, index.h("udp-fluent-button", { key: 'f93fd3c6dd637fce109153cba0bbfaa08247163e', slot: "trigger" }, "Small (320px)"), index.h("div", { key: '5e2bab0a1d62d677330e266081bf379cb1ad4617', slot: "content" }, index.h("p", { key: '49968264ba71cfbeaedc309201f6a754ca8f33ab', style: { margin: '0px' } }, "This is a small popover with max-width of 320px. The content will wrap if it exceeds this width."))), index.h("udp-popover", { key: 'ed3f3804c775386d865dcf2a46965ad82e7d3f2c', size: "medium" }, index.h("udp-fluent-button", { key: '7f264d4602f2b9cdc02deb3ec1e36d2ac66b983e', slot: "trigger" }, "Medium (480px)"), index.h("div", { key: 'bd6f07135b19b06ae00f96b61ada8121e9ee4b95', slot: "content" }, index.h("p", { key: '3064c3128fb0e12c6c05341daa1d1569d03c35c8', style: { margin: '0px' } }, "This is a medium popover with max-width of 480px. The content will wrap if it exceeds this width. This gives you more room for content."))), index.h("udp-popover", { key: 'a96a1905a8fa467070a81215a2e9deb3cc02f32b', size: "large" }, index.h("udp-fluent-button", { key: '21378d28edaa0c166ede5f1cfab0147a9ee197cb', slot: "trigger" }, "Large (640px)"), index.h("div", { key: 'c3d7d91c92bdae43c88509d76c49889a06a44f0d', slot: "content" }, index.h("p", { key: 'd2edf7da02b3a990fd1f7dec54cf90becde83109', style: { margin: '0px' } }, "This is a large popover with max-width of 640px. This size is suitable for more complex content that needs additional space while still maintaining good readability and layout."))))), index.h("div", { key: '0c70e6d125b134d03a38e7dd72bb9dbe8def414e' }, index.h("h4", { key: '3e440366334b0b80c2a07ba4c5f11f49ab968a96' }, "Trap Focus (Accessibility)"), index.h("p", { key: '579603c3d729d6b5f6c93e66b70a0da3c2fc168e', style: { fontSize: '14px', color: 'var(--colorNeutralForeground3)' } }, "When trapFocus is enabled, keyboard navigation is restricted to the popover."), index.h("div", { key: '6545b7c19a9d273ce265d1cb761f87788140cd74', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, index.h("udp-popover", { key: '7ef00625af075436e6df8279f2bb623125749afc', trapFocus: true }, index.h("udp-fluent-button", { key: 'f3d77deb65f5cf14383db50890f1b7cbc7d65b3c', slot: "trigger" }, "Trap Focus"), index.h("div", { key: '1da110f5cb3f30bca4d2383a370a09b7910a864b', slot: "content" }, index.h("h4", { key: 'b9cc3020e2917bcfad8782261fc09b491b52db14', style: { marginTop: '0px' } }, "Modal Popover"), index.h("p", { key: '99fba8577bfc015177b719b8a40debae8f8f6b8f' }, "This popover traps focus. Press Escape to close."), index.h("div", { key: '2563429b38a5caec9b9f0e601649207d44a2768d', style: { display: 'flex', gap: '8px' } }, index.h("udp-fluent-button", { key: '70644cb0bdc159f334e0f903002f7a045ac9974e', size: "small" }, "Action 1"), index.h("udp-fluent-button", { key: '2797d9323e0fa49c26a3d7809b2a982abd852f59', size: "small", appearance: "outline" }, "Action 2")))))), index.h("div", { key: 'd6cc189677f39006ba66e8d971999a58a915ab54' }, index.h("h4", { key: '0ab4fce958a0f85cd4c5028f02e4865e0becdaa4' }, "Advanced Examples"), index.h("div", { key: '4150d4e03a869f3a7a381bd4478594c72ebfc5e6', style: { display: 'flex', gap: '16px', flexWrap: 'wrap' } }, index.h("udp-popover", { key: 'ec03845f06f374516b8b6494dce18141dc17611c', position: "bottom-start", "with-arrow": true }, index.h("udp-fluent-button", { key: '0c0990610e5a68e1ca87091dfbd94a1c0fdecba4', slot: "trigger", startIconName: "calendar" }, "Date Picker"), index.h("div", { key: 'ecc0178fda08dedb47d2b0b8435122a4e7d0655c', slot: "content", style: { padding: '8px' } }, index.h("udp-date-range-selector", { key: '76bc2ee06a1cf72d60e8f9deef35a746dbfe4d6c', variant: "single", monthsToDisplay: 1, size: "sm" }))), index.h("udp-popover", { key: '0d4479fb3d9dfc5dd743f7f8d66f38eeda1a502d', size: "medium", "with-arrow": true }, index.h("udp-fluent-button", { key: '89718b3220b807fd82cd6f2d65ca93541e517cb7', slot: "trigger" }, "Rich Content"), index.h("div", { key: 'ce36ffdb4dc5b6e05d46885e16c63b8cb431cb42', slot: "content" }, index.h("h4", { key: 'e69f12de0eed13dfc67cd5daa094724b60a50679', style: { marginTop: '0px' } }, "Feature Update"), index.h("p", { key: '1487146c6e8ad1aa4535e6949710107aca96ea93', style: { fontSize: '14px' } }, "New features are now available! Check out the latest updates to improve your workflow."), index.h("udp-fluent-button", { key: 'c5b3e162646ae1a6ec26910daf6d097d00cf095c', size: "small" }, "Learn More"))), index.h("udp-popover", { key: '0ef07b455449823935608d291462fd398dc20cee', "close-on-scroll": true }, index.h("udp-fluent-button", { key: '42559edfa9c6805e2d374cb3783e985b9f919db5', slot: "trigger" }, "Closes on Scroll"), index.h("div", { key: '78767bb9d8a91e8f0539584a6e43b1e125d8d0b2', slot: "content" }, index.h("p", { key: '068caaa72a050ea240c778e33e6819b7b445efbe', style: { margin: '0px' } }, "This popover will close when you scroll the page."))))))))), index.h("udp-fluent-drawer", { key: '8e7a7964815ec4c78d58823bc3c704125f490670', open: this.drawerOpen, onDrawerClose: () => (this.drawerOpen = false), drawerTitle: "Drawer Title" }, index.h("udp-lazy-loader", { key: '254f72956a9f3db512bb62718f5763975e83a662', if: this.drawerOpen, content: () => (index.h("div", null, index.h("client-side-grid", { columnDefs: [
|
|
2519
2519
|
{ field: 'name' },
|
|
2520
2520
|
{ field: 'age' },
|
|
2521
2521
|
{ field: 'name' },
|
|
@@ -2526,10 +2526,10 @@ const TestComponentsPage = class {
|
|
|
2526
2526
|
], rowData: [
|
|
2527
2527
|
{ name: 'John', age: 30 },
|
|
2528
2528
|
{ name: 'Jane', age: 25 },
|
|
2529
|
-
] }), index.h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), index.h("udp-fluent-drawer", { key: '
|
|
2529
|
+
] }), index.h("udp-fluent-button", { onClick: () => (this.drawerOpen = false) }, "Close Drawer"))) })), index.h("udp-fluent-drawer", { key: 'c99030a635c27fb78f9b1d4938231f59f20d2123', open: this.formDrawerOpen, onDrawerClose: () => (this.formDrawerOpen = false), drawerTitle: "Sample Form", size: "large" }, index.h("udp-lazy-loader", { key: 'b14a832c9a900a72125c177effa4c7e539dc1bc3', if: this.formDrawerOpen, content: () => (index.h("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px' } }, index.h("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-fluent-button", { appearance: "outline", onClick: () => (this.secondDrawerOpen = true) }, "Open Second Drawer")), index.h("test-form", { handleSubmit: this.handleSubmit, formId: "registry-drawer-form" }))) }), index.h("udp-fluent-button", { key: 'c0d3e97740f692f3332a2ff18f993595ed36be14', appearance: "primary", slot: "footer", form: "registry-drawer-form", type: "submit" }, "Submit Form"), index.h("udp-fluent-button", { key: '4e5028de90adf4f54036779c37bc7f54cbf12c05', slot: "footer", form: "registry-drawer-form", type: "reset" }, "Reset Form")), index.h("udp-fluent-drawer", { key: 'eff850783c483e55b7c3757dcec277cb8f39163a', open: this.manualDrawerOpen, onDrawerClose: () => (this.manualDrawerOpen = false), drawerTitle: "Form (Manual Wiring)" }, index.h("udp-lazy-loader", { key: 'a00a3990df21bcf360fb8557d00d551a60421f75', if: this.manualDrawerOpen, content: () => (index.h("test-form", { handleSubmit: this.handleSubmit, onFormReady: this.handleManualFormReady })) }), index.h("udp-fluent-button", { key: 'e465623672b0946066f232482bd22811df51b50d', appearance: "primary", slot: "footer", disabled: !this.manualCanSubmit, onClick: () => {
|
|
2530
2530
|
var _a;
|
|
2531
2531
|
void ((_a = this.manualFormInstance) === null || _a === void 0 ? void 0 : _a.submit());
|
|
2532
|
-
} }, "Submit (Manual)")), index.h("udp-fluent-dialog", { key: 'fea999be65951bf49e73fcccfcd58670bd1af93b', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, index.h("div", { key: '121cb57d1a2a43891ef0e44088d2390b33a35e60' }, "This dialog was opened from inside the drawer!"), index.h("div", { key: '3bcdbea48de66c725702f626ee07900ebe10bfed' }, index.h("p", { key: '1efde12ec4175764a95c6eb9fb08bd967384efcb' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '8cd413abeb0c26ee5d71dd6a4650cc7b85ae510a' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: '28a86deb85b876842358c774084ce1fd9c95af31' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), index.h("udp-fluent-button", { key: 'a17eee3214cc13eda9f0023370ee6db8c66d0e03', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), index.h("udp-fluent-button", { key: '688399a55f3c6f319a4356ad8d364d6543b61468', appearance: "primary", slot: "action" }, "Confirm")), index.h("udp-fluent-drawer", { key: '8b198ab5a85f6817bd97054db35eaf0bdcdb02c5', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, index.h("div", { key: 'edc8bacdafe6a16a447fc4646bd4c851cabc5c95', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, index.h("p", { key: 'cdb8edc24ec60b2a4815141de709881a42c20ce6' }, "This is the second drawer opened from within the first drawer."), index.h("div", { key: '0cb5ee9586b868f38e53e6df0d98477bb8261add', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-fluent-button", { key: '8a0b5e49fa80a5c4c04110036eb5366c9e6a4499', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), index.h("udp-fluent-button", { key: '41534c5841e44960c908c6ecad2b7345888c1d41', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), index.h("p", { key: 'f5c2f10eba2456bd9994fbe4600fd04b6756665e' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: 'd635477592788b2d7efa0f8ba7e27d5b82557fd8' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: 'e7e84a3052ae50945ffcf02137b4b99a96b5809d' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), index.h("p", { key: 'b5dd2baf9b29b8420f7e12ab445f9975dfab2117' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), index.h("p", { key: 'e3db4f2065dcc495a0f50963ed31ba96e88d1884' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), index.h("udp-fluent-button", { key: '04ed97e65fbd468ebcf865830295e727d2707535', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), index.h("udp-fluent-drawer", { key: 'da27d08e3d6c30de92f2d1fc0a732100850e2cd4', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, index.h("div", { key: '9c45a4a250f32c5033ee968132c01dca92e4a6b6', style: { padding: '16px' } }, index.h("p", { key: '49bc77a31cc77bb5c3a65256c8d7eec9470cdcad' }, "This is the third drawer! Three levels deep."), index.h("p", { key: '5d33a0380f08003b13927f81ce2265a99546e2a5', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), index.h("p", { key: 'eb58604eaaeb2f374578f8d33c0d3322f9e04760' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '04c1e834f3d89802c989b363cd2c02b2ea31a1e3' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), index.h("p", { key: '2a59d2bf2920f0b854224e703fa636f3d77af755' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), index.h("p", { key: 'bb494f4e26ca11f0c561fc8fda7df62b7c7d685f' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), index.h("p", { key: '54a9693d28de7ad10e02e7e5c4cea5c7f71da2fb' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), index.h("udp-fluent-button", { key: '71b92275b8d51e5731bd8b8cb466363c24855cce', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), index.h("udp-fluent-dialog", { key: '66e895c7420cb16ea2484c459d2925c4922188ff', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, index.h("div", { key: '89878adcaaa449d19f093e05830c469e54680c67' }, "This dialog was opened from the second drawer!"), index.h("p", { key: '230383f73876d060017c1508d7035c5c97ab7918' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '1830a32d18e1bb269a45dc4fa58c2d4ac9c2a6c6' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: '2b0281f194b80412575a78c6a026bf17df6cbe97' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), index.h("udp-fluent-button", { key: '8989364c9972d8ee4ecb8b89d7deb24fd0daef19', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), index.h("udp-fluent-button", { key: '0cee9f7e2ce27a2bf9b88ac4082524e935a413c1', appearance: "primary", slot: "action" }, "Confirm"))));
|
|
2532
|
+
} }, "Submit (Manual)")), index.h("udp-fluent-dialog", { key: 'c507e9abd5626e134cd3087f7c687c2d567cbffc', open: this.drawerDialogOpen, dialogTitle: "Dialog from Drawer", onDialogClose: () => (this.drawerDialogOpen = false) }, index.h("div", { key: 'd8c444d698c70b461fb41d059cde5c4a3af31bd9' }, "This dialog was opened from inside the drawer!"), index.h("div", { key: '708aaa82890debed6201e02fe5319e6fdfaea0ca' }, index.h("p", { key: '4a71bc1bed88dcf4419ba5f84acd786a888cf5d4' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '586acece1106fca239db4e69ef6c095d39446e19' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: 'ea14f7e294c8aaf64a968b5d4d49188963e6b156' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")), index.h("udp-fluent-button", { key: '49f3d1c851cd6c0914317021964cce5ab1307930', slot: "action", onClick: () => (this.drawerDialogOpen = false) }, "Close"), index.h("udp-fluent-button", { key: '396c35cba4e649c450f619775b4082ec3e084cd4', appearance: "primary", slot: "action" }, "Confirm")), index.h("udp-fluent-drawer", { key: 'de25548c890b79d147a1faf38739181716192a53', open: this.secondDrawerOpen, onDrawerClose: () => (this.secondDrawerOpen = false), drawerTitle: "Second Drawer (Nested)", size: "medium" }, index.h("div", { key: '14bd4e67c0ca80b7e7f22765deb79a8e4708af55', style: { display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px' } }, index.h("p", { key: 'ae5152449b3ea85378d957747a959f3d9eee1dbc' }, "This is the second drawer opened from within the first drawer."), index.h("div", { key: '425989eced4f8c820e4beba1180ad939d24d9ca9', style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } }, index.h("udp-fluent-button", { key: '02af4fbd0e5499eb61c3a869a32881a5e967ff3f', onClick: () => (this.secondDrawerDialogOpen = true) }, "Open Dialog from Second Drawer"), index.h("udp-fluent-button", { key: '44cd6bf0fce575df90712b9d89bb19cf1b85f2be', appearance: "outline", onClick: () => (this.thirdDrawerOpen = true) }, "Open Third Drawer")), index.h("p", { key: '755c9540d2339ed767395a140be34de80061922b' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '33b5d2fde7e40ef889bd3314514aa387899295e9' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: 'd880231a4b6381c8393fd1faeb501feb1a0e11be' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), index.h("p", { key: '9815fcb9aff9589f35146be52cd3ad44a1a923a8' }, "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus."), index.h("p", { key: 'e8ca6303917d8312d48fd87eef0565d531c8edf9' }, "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")), index.h("udp-fluent-button", { key: 'b608c6490dcd11509d37f97ca5da80b74e86bdb6', appearance: "primary", slot: "footer", onClick: () => (this.secondDrawerOpen = false) }, "Close Second Drawer")), index.h("udp-fluent-drawer", { key: '2425d8ff6bf5fb570882fcc348c71173896f295a', open: this.thirdDrawerOpen, onDrawerClose: () => (this.thirdDrawerOpen = false), drawerTitle: "Third Drawer (Deeply Nested)", size: "small" }, index.h("div", { key: '2ecf0bd39e6a764b28049efcfb1115378099f218', style: { padding: '16px' } }, index.h("p", { key: '35be9047d47054d535301f3a49a4732a04b83c9c' }, "This is the third drawer! Three levels deep."), index.h("p", { key: 'c7edfeeae10ee110c32aa26e36ea30777275c94d', style: { fontSize: '14px', color: 'var(--colorNeutralForeground2)' } }, "Testing the drawer stacking and body scroll lock mechanism with multiple drawers."), index.h("p", { key: 'e6c657404f5a0b0d102525adee214fdb4b6dbb3c' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: 'd2dea79f28056aad668189d6b49dbc94c11084ed' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."), index.h("p", { key: '07bc8737c12d93947285e23c6c969f5bc8a5321c' }, "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?"), index.h("p", { key: '2ff807b7afbda856cd87138bac450b4848087e24' }, "Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident."), index.h("p", { key: '94b9014b6fb0aec62007a112ee33f2af2a95a4c7' }, "Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.")), index.h("udp-fluent-button", { key: '649ce9aa7b307f021add8c477b80d0a1c8977def', appearance: "primary", slot: "footer", onClick: () => (this.thirdDrawerOpen = false) }, "Close Third Drawer")), index.h("udp-fluent-dialog", { key: '20ad44cd878815d5e06ac163c3ce1e6c9c6cb674', open: this.secondDrawerDialogOpen, dialogTitle: "Dialog from Second Drawer", onDialogClose: () => (this.secondDrawerDialogOpen = false) }, index.h("div", { key: 'c62a935bd41a08e9daf8a80eb8d8575a360dd4d7' }, "This dialog was opened from the second drawer!"), index.h("p", { key: '407389f4fd093ca0f6b46b4c77ab5ee8c7abe5b0' }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), index.h("p", { key: '75230a8a1d9439751166451d47d0b60671554244' }, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem."), index.h("p", { key: 'f7bb96f352496b543790371ab0436f368483e7d7' }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"), index.h("udp-fluent-button", { key: '89a13c6b4e928fce4c3702aad2046ec1fee0d657', slot: "action", onClick: () => (this.secondDrawerDialogOpen = false) }, "Close"), index.h("udp-fluent-button", { key: '445dfdc525f2979b4f305325f90c0f45da1ccf05', appearance: "primary", slot: "action" }, "Confirm"))));
|
|
2533
2533
|
}
|
|
2534
2534
|
};
|
|
2535
2535
|
|
|
@@ -2666,6 +2666,8 @@ const TestForm = class {
|
|
|
2666
2666
|
}
|
|
2667
2667
|
};
|
|
2668
2668
|
|
|
2669
|
+
const udpAccordionCss = () => `:host{color:var(--colorNeutralForeground1)}`;
|
|
2670
|
+
|
|
2669
2671
|
const UdpAccordion = class {
|
|
2670
2672
|
constructor(hostRef) {
|
|
2671
2673
|
index.registerInstance(this, hostRef);
|
|
@@ -2684,12 +2686,13 @@ const UdpAccordion = class {
|
|
|
2684
2686
|
};
|
|
2685
2687
|
}
|
|
2686
2688
|
render() {
|
|
2687
|
-
return (index.h(index.Host, { key: '
|
|
2689
|
+
return (index.h(index.Host, { key: 'bf2b8db6b5cc8f621689d7d88c5ea02fbddfbae7' }, index.h("fluent-accordion", { key: '5e0437c19196b99bd089baece019e910437cee8a', "expand-mode": this.expandmode, onChange: this.handleChange }, this.items
|
|
2688
2690
|
.filter(item => !item.hide)
|
|
2689
2691
|
.map(item => (index.h("fluent-accordion-item", { key: item.id, value: item.id, "heading-level": item.headinglevel, expanded: item.expanded, disabled: item.disabled, size: item.size, block: item.block }, item.label && index.h("span", { slot: "heading" }, item.label), index.h("slot", { name: `${item.id}-heading`, slot: "heading" }), item.content && index.h("div", null, item.content), index.h("slot", { name: `${item.id}-content` })))))));
|
|
2690
2692
|
}
|
|
2691
2693
|
get el() { return index.getElement(this); }
|
|
2692
2694
|
};
|
|
2695
|
+
UdpAccordion.style = udpAccordionCss();
|
|
2693
2696
|
|
|
2694
2697
|
const udpAmbientToolTipCss = () => `.tooltip-wrapper{display:inline-block}`;
|
|
2695
2698
|
|
|
@@ -3268,11 +3271,11 @@ const UdpAutocomplete = class {
|
|
|
3268
3271
|
return (index.h(index.Host, { key: '28feaccd268be87fb9f34dfbe1c8b79126464281', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '3db4e2f74cb12fbf3c9f0b57b32924714b7e7e6d' }, index.h("div", { key: 'a71a8d573efa81285c9d1cdc4aee5a595ea31225', class: "label-content", onClick: () => this.handleTogglePopover(false), slot: "label" }, this.label && (index.h("fluent-label", { key: '3be0e5b6c9da814544afb230f6ce232c87ed0e2c', disabled: this.disabled }, this.label, this.popupHint && (index.h("udp-tooltip", { key: 'e2103bfcbf8393c1e5e8abaa06d285eb261f1be7', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'd684d0bd47a280186c1cb26a5f3d9618a6c85ebf', name: "info", size: "xs", class: "popup-hint-icon" }))))), this.multiple && (index.h("div", { key: '1a8418caefd9a9f4435e7c9d5b9046d1f7fe8878', class: {
|
|
3269
3272
|
'selected-items': true,
|
|
3270
3273
|
'has-items': selectedItems.length > 0,
|
|
3271
|
-
} }, selectedItems.map(item => (index.h("udp-chip", { label: this.resolveProp(item, this.optionLabel), deleteButton: !this.disabled, onChipDelete: () => this.handleChipDelete(item), variant: "filled", color: "primary", size: "small" })))))), index.h("fluent-dropdown", { key: '
|
|
3274
|
+
} }, selectedItems.map(item => (index.h("udp-chip", { label: this.resolveProp(item, this.optionLabel), deleteButton: !this.disabled, onChipDelete: () => this.handleChipDelete(item), variant: "filled", color: "primary", size: "small" })))))), index.h("fluent-dropdown", { key: '078df523e2f33e7bbccd38e83f36c441d01d036d', slot: "input", type: "combobox", name: this.name, appearance: mappedAppearance, size: this.controlSize, disabled: this.disabled, required: this.required, placeholder: this.placeholder, multiple: this.multiple,
|
|
3272
3275
|
// Events
|
|
3273
|
-
onInput: this.handleInput, onChange: this.handleChange, onFocusout: this.handleBlur,
|
|
3276
|
+
onInput: this.handleInput, onChange: this.handleChange, onFocusout: this.handleBlur, onFocusin: () => this.inputFocus.emit(),
|
|
3274
3277
|
// Suppress native invalid popup
|
|
3275
|
-
onInvalid: (e) => e.preventDefault(), exportparts: "control, listbox", ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '
|
|
3278
|
+
onInvalid: (e) => e.preventDefault(), exportparts: "control, listbox", ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '2769b4a7fe1a2b106d6b0362f2c0b84189e97a9e' }, (this.loading || this.internalLoading) && (index.h("fluent-option", { key: 'a712892c7daf0ee4d19084d080143bdd2070b612', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: '8faea3d28da62b2ea92743f6c5d5279019d35cec' }, "Loading..."), index.h("span", { key: '139eb24d870ea43d39734e9ca96bd78299c5be63', slot: "indicator" }))), !this.loading && !this.internalLoading && visibleCount === 0 && !this.freeForm && (index.h("fluent-option", { key: '77616d6a29ef579090c2562babc74b093afa5864', disabled: true, value: "empty", ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, "No options available")), !this.loading &&
|
|
3276
3279
|
!this.internalLoading &&
|
|
3277
3280
|
(displayOptions === null || displayOptions === void 0 ? void 0 : displayOptions.length) > 0 &&
|
|
3278
3281
|
displayOptions.map(option => {
|
|
@@ -3289,13 +3292,13 @@ const UdpAutocomplete = class {
|
|
|
3289
3292
|
el.toggleAttribute('disabled', !!optDisabled); //update disabled attribute
|
|
3290
3293
|
}
|
|
3291
3294
|
} }, optIcon && this.iconPosition === 'start' && (index.h("span", { slot: "start", class: "option-icon-slot" }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), optLabel, optIcon && this.iconPosition === 'end' && (index.h("span", { class: "option-icon-end", style: { pointerEvents: 'none', marginLeft: '4px' } }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" })))));
|
|
3292
|
-
}), this.freeForm && index.h("fluent-option", { key: '
|
|
3295
|
+
}), this.freeForm && index.h("fluent-option", { key: '9beaec414ada4969ddb6144686353614a554158d', freeform: true }, index.h("output", { key: '56d5ba1e16b7daf00e42162a6d804894d22979ce' }))), index.h("div", { key: '2761ab7de5abedbec9a655aa0218a2f5311631a7', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: 'ae68b6f4eb8c010792dad9e0d9aea0d0883691d4', class: {
|
|
3293
3296
|
'clear-button': true,
|
|
3294
3297
|
'is-visible': !this.disabled && this.filterText !== '',
|
|
3295
|
-
}, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: '
|
|
3298
|
+
}, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: 'ed4ac5ac5b9b0bbf357a6250094e2f7a980c30a0', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), index.h("div", { key: '8c457794e3a5ecd8697b0e5a5d2699dcc852211d', class: {
|
|
3296
3299
|
'message-wrapper': true,
|
|
3297
3300
|
'includeErrorPadding': this.includeErrorPadding,
|
|
3298
|
-
}, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '
|
|
3301
|
+
}, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '1c318258f0f0f4a331119876ce721c53be76a60b', variant: "caption1", class: {
|
|
3299
3302
|
message: true,
|
|
3300
3303
|
error: hasError,
|
|
3301
3304
|
} }, message)))));
|
|
@@ -5194,7 +5197,7 @@ const UdpFluentAvatar = class {
|
|
|
5194
5197
|
}
|
|
5195
5198
|
};
|
|
5196
5199
|
|
|
5197
|
-
const udpFluentBadgeCss = () => `:host{
|
|
5200
|
+
const udpFluentBadgeCss = () => `:host{display:flex;align-items:center}fluent-badge:not([color='important']){--colorNeutralBackground1:transparent}:host(:not(.ready)){opacity:0}.slot-wrapper{display:inline-flex;align-items:center}fluent-badge{gap:var(--spacingHorizontalXXS)}fluent-badge[color='informative']:not([appearance='filled']){--colorNeutralForeground3:color-mix(in srgb, var(--colorPaletteBlueForeground2) 85%, transparent);--colorNeutralStroke2:color-mix(in srgb, var(--colorPaletteBlueBorderActive) 40%, transparent);--colorNeutralBackground4:color-mix(in srgb, var(--colorPaletteBlueBackground2) 20%, transparent)}fluent-badge[color='informative'][appearance='filled']{--colorNeutralBackground5:var(--colorPaletteBlueForeground2);--colorNeutralForeground3:#ffffff}fluent-badge[color='important'][appearance='tint']{--colorNeutralForeground3:color-mix(in srgb, var(--colorNeutralForeground1) 20%, transparent);--colorNeutralBackground1:var(--colorNeutralForeground1);--colorTransparentStroke:var(--colorNeutralStrokeAccessible)}fluent-badge[color='subtle'][appearance='ghost']{--colorNeutralForegroundInverted:var(--colorNeutralForeground2)}fluent-badge[color='subtle'][appearance='outline']{--colorNeutralForegroundStaticInverted:var(--colorNeutralForeground2)}fluent-badge[color='success'][appearance='tint']{--colorPaletteGreenBorder2:color-mix(in srgb, var(--colorPaletteGreenBorder1) 90%, transparent)}fluent-badge[color='warning'][appearance='tint']{--colorPaletteYellowBorder1:var(--colorPaletteYellowBorderActive)}fluent-badge[appearance='ghost'],fluent-badge[appearance='outline']{background-color:transparent}`;
|
|
5198
5201
|
|
|
5199
5202
|
const UdpFluentBadge = class {
|
|
5200
5203
|
constructor(hostRef) {
|
|
@@ -5442,7 +5445,7 @@ const UdpFluentCheckbox = class {
|
|
|
5442
5445
|
};
|
|
5443
5446
|
UdpFluentCheckbox.style = udpFluentCheckboxCss();
|
|
5444
5447
|
|
|
5445
|
-
const udpFluentCounterBadgeCss = () => `:host{
|
|
5448
|
+
const udpFluentCounterBadgeCss = () => `:host{display:flex;align-items:center;color:var(--colorNeutralForeground1)}fluent-counter-badge:not([color='subtle']){--colorNeutralBackground1:transparent}fluent-counter-badge[color='subtle'][appearance='ghost']{--colorNeutralForegroundInverted:var(--colorNeutralForeground2)}`;
|
|
5446
5449
|
|
|
5447
5450
|
const UdpFluentCounterBadge = class {
|
|
5448
5451
|
constructor(hostRef) {
|
|
@@ -5628,10 +5631,11 @@ const UdpFluentDrawer = class {
|
|
|
5628
5631
|
};
|
|
5629
5632
|
}
|
|
5630
5633
|
handleOpenChange(newValue) {
|
|
5634
|
+
var _a, _b;
|
|
5631
5635
|
// Clear any previous fallback timer to prevent race conditions
|
|
5632
5636
|
clearTimeout(this.lockFallbackTimer);
|
|
5633
5637
|
if (newValue) {
|
|
5634
|
-
if (this.drawerRef && !this.drawerRef.dialog.open) {
|
|
5638
|
+
if (((_a = this.drawerRef) === null || _a === void 0 ? void 0 : _a.dialog) && !this.drawerRef.dialog.open) {
|
|
5635
5639
|
this.drawerRef.show();
|
|
5636
5640
|
}
|
|
5637
5641
|
// Fallback: if toggle event doesn't fire, lock anyway after a brief delay
|
|
@@ -5643,7 +5647,7 @@ const UdpFluentDrawer = class {
|
|
|
5643
5647
|
}, 50);
|
|
5644
5648
|
}
|
|
5645
5649
|
else {
|
|
5646
|
-
if (this.drawerRef && this.drawerRef.dialog.open) {
|
|
5650
|
+
if (((_b = this.drawerRef) === null || _b === void 0 ? void 0 : _b.dialog) && this.drawerRef.dialog.open) {
|
|
5647
5651
|
this.drawerRef.hide();
|
|
5648
5652
|
}
|
|
5649
5653
|
}
|
|
@@ -5883,7 +5887,7 @@ const UdpFluentDrawer = class {
|
|
|
5883
5887
|
}
|
|
5884
5888
|
}
|
|
5885
5889
|
render() {
|
|
5886
|
-
return (index.h(index.Host, { key: '
|
|
5890
|
+
return (index.h(index.Host, { key: 'df247384be3eaed29976098a7455f3a7b0760592', class: { 'has-footer': this.hasFooter } }, index.h("fluent-drawer", { key: '1e063be563993d754ab96262488e728fe2f13cab', ref: this.setDrawerRef, onToggle: this.handleToggle, type: "modal", position: this.position, size: this.effectiveSize }, index.h("fluent-drawer-body", { key: '5b02f9d532bde5a9363a0dc51a375381896e937d' }, index.h("udp-text", { key: 'b5314fa544d9fb8b5d969be425287ca49c273408', variant: "subtitle1", slot: "title" }, this.drawerTitle), index.h("udp-fluent-icon-button", { key: '4b26a8fa0392312968d65a0726fc73e6775bffe3', slot: "close", appearance: "subtle", iconName: "dismiss", "aria-label": "close" }), this.hasToolbar && (index.h("udp-flexbox", { key: '44389db2e558d09369af9d12782a90a52c3edf97', class: "drawer-toolbar", direction: "row", width: "100%" }, index.h("slot", { key: '1fab0a8db93ea2997a839f90c716a0cffd3cc316', name: "toolbar" }))), index.h("div", { key: '66ec417b87b6953c8c5ab04ab0841c1df1f6aad0', class: "drawer-scroll-container", ref: el => (this.contentRef = el), onScroll: this.handleScroll }, index.h("div", { key: '29693aa3c7ecdc26f9ce610bb7936ba169e82c86', class: `scroll-shadow top ${this.showTopShadow ? 'visible' : ''}` }), index.h("div", { key: '6ada8f34391a68f5b6003031a2aa6e3653d730ac', class: `drawer-content-inner${this.excludeVerticalPadding ? '' : ' vertical-padding'}` }, index.h("slot", { key: 'b46cbf21d9ee44890567f56b4942312071301dd3' })), index.h("div", { key: '5a92abf213a3336cde0397d2f6c715c59f98af4a', class: `scroll-shadow bottom ${this.showBottomShadow ? 'visible' : ''}` })), this.hasFooter && (index.h("udp-flexbox", { key: '38c454f275bbbca5459fd9389f7dbd0581758eb9', slot: "footer", direction: "row" }, index.h("slot", { key: '2819a2d0388b73bfdacea7ef7afdeed550c7471d', name: "footer" })))))));
|
|
5887
5891
|
}
|
|
5888
5892
|
get el() { return index.getElement(this); }
|
|
5889
5893
|
static get watchers() { return {
|
|
@@ -6001,7 +6005,7 @@ const UdpFluentDropdown = class {
|
|
|
6001
6005
|
};
|
|
6002
6006
|
//keyboard overrides
|
|
6003
6007
|
this.handleKeyDown = (ev) => {
|
|
6004
|
-
var _a, _b;
|
|
6008
|
+
var _a, _b, _c;
|
|
6005
6009
|
if (this.disabled || this.loading)
|
|
6006
6010
|
return;
|
|
6007
6011
|
//overrides enter key to allow for multiple selection without closing the dropdown
|
|
@@ -6055,7 +6059,7 @@ const UdpFluentDropdown = class {
|
|
|
6055
6059
|
return;
|
|
6056
6060
|
clearTimeout(this.typeaheadTimeout);
|
|
6057
6061
|
this.typeaheadBuffer += ev.key;
|
|
6058
|
-
const matchIndex = this.options.findIndex(option => {
|
|
6062
|
+
const matchIndex = (_c = this.options) === null || _c === void 0 ? void 0 : _c.findIndex(option => {
|
|
6059
6063
|
const label = this.resolveProp(option, this.optionLabel);
|
|
6060
6064
|
const optDisabled = this.resolveProp(option, this.optionDisabled);
|
|
6061
6065
|
return (label &&
|
|
@@ -6173,7 +6177,8 @@ const UdpFluentDropdown = class {
|
|
|
6173
6177
|
return val !== undefined && val !== null ? String(val) : '';
|
|
6174
6178
|
}
|
|
6175
6179
|
findOptionByValue(value) {
|
|
6176
|
-
|
|
6180
|
+
var _a;
|
|
6181
|
+
return (_a = this.options) === null || _a === void 0 ? void 0 : _a.find(opt => this.getOptionValue(opt) === value);
|
|
6177
6182
|
}
|
|
6178
6183
|
getValuesAsArray() {
|
|
6179
6184
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
|
@@ -6184,19 +6189,21 @@ const UdpFluentDropdown = class {
|
|
|
6184
6189
|
return [];
|
|
6185
6190
|
}
|
|
6186
6191
|
hasAnyIcon() {
|
|
6187
|
-
|
|
6192
|
+
var _a, _b;
|
|
6193
|
+
return (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.some(option => !!this.resolveProp(option, this.optionIcon))) !== null && _b !== void 0 ? _b : false;
|
|
6188
6194
|
}
|
|
6189
6195
|
render() {
|
|
6196
|
+
var _a, _b, _c;
|
|
6190
6197
|
const hasError = !!this.error;
|
|
6191
6198
|
const message = this.error || this.hint;
|
|
6192
6199
|
const hasIconsInOptions = this.hasAnyIcon();
|
|
6193
6200
|
// Map 'underline' to 'transparent' for fluent-dropdown
|
|
6194
6201
|
const mappedAppearance = this.appearance === 'underline' ? 'transparent' : this.appearance;
|
|
6195
|
-
return (index.h(index.Host, { key: '
|
|
6202
|
+
return (index.h(index.Host, { key: '43d0d92982c537e05bb774f59387d00725299ee6', class: { 'has-error': hasError } }, index.h("fluent-field", { key: '0c2191e228b15c1ee3e099440f92580a72cccf77' }, this.label && (index.h("fluent-label", { key: 'fa56a5a8db9092c2b11733bc74efe7e4fc50c05d', slot: "label", disabled: this.disabled, onClick: () => this.handleTogglePopover(false) }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '773832f53a7706e772b41aa4b9e3a980cf65ee03', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: '09d7a540f6d8b6b8322b55865ce2fa7e5adb8141', name: "info", size: "xs", class: "popup-hint-icon" }))))), index.h("fluent-dropdown", { key: 'f2d2cf1e32846872121a0cbe84cf9eb85ded4d1d', slot: "input", class: { 'no-label': !this.label }, type: "dropdown", name: this.name, appearance: mappedAppearance, size: this.controlSize, required: this.required, disabled: this.disabled, placeholder: this.placeholder, multiple: this.multiple, onChange: this.handleChange, onKeyDown: this.handleKeyDown, onFocusout: () => this.inputBlur.emit(), onFocusin: () => this.inputFocus.emit(),
|
|
6196
6203
|
// Suppress native invalid popup
|
|
6197
|
-
onInvalid: (e) => e.preventDefault(), ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '
|
|
6198
|
-
this.options.length > 0 &&
|
|
6199
|
-
this.options.map((option, index$1) => {
|
|
6204
|
+
onInvalid: (e) => e.preventDefault(), ref: el => (this.dropdownRef = el) }, index.h("fluent-listbox", { key: '42e1b18a6a560a9d0886311d2c01a9f80c0f21a9' }, this.loading && (index.h("fluent-option", { key: 'ac238e12f53f2eae7d800949ce7f493e05ade490', disabled: true, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, index.h("span", { key: 'bb79f7b2aeacf774e4b1a1c6f276401c2e349cc2' }, "Loading..."), index.h("span", { key: '6a019912bead255172823a084af61da02efac82c', slot: "indicator" }))), !this.loading && ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) === 0 && (index.h("fluent-option", { key: 'cbe2fef5e953d8af7c6d8311532c07dbc7d50263', disabled: true, value: "empty", ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', true) }, "No options available")), !this.loading &&
|
|
6205
|
+
((_b = this.options) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
|
|
6206
|
+
((_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option, index$1) => {
|
|
6200
6207
|
const optLabel = this.resolveProp(option, this.optionLabel);
|
|
6201
6208
|
const optValue = this.resolveProp(option, this.optionValue);
|
|
6202
6209
|
const optDisabled = this.resolveProp(option, this.optionDisabled);
|
|
@@ -6204,13 +6211,13 @@ const UdpFluentDropdown = class {
|
|
|
6204
6211
|
// Ensure value is a string for the DOM attribute
|
|
6205
6212
|
const safeValue = optValue !== undefined && optValue !== null ? String(optValue) : '';
|
|
6206
6213
|
return (index.h("fluent-option", { key: index$1, disabled: !!optDisabled, value: safeValue, ref: (el) => el === null || el === void 0 ? void 0 : el.toggleAttribute('disabled', !!optDisabled) }, hasIconsInOptions && optIcon && this.iconPosition === 'start' && (index.h("span", { slot: "start", class: "option-icon-slot" }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" }))), optLabel, hasIconsInOptions && optIcon && this.iconPosition === 'end' && (index.h("span", { class: "option-icon-end", style: { pointerEvents: 'none', marginLeft: '4px' } }, index.h("udp-fluent-icon", { name: optIcon, size: "sm" })))));
|
|
6207
|
-
})), index.h("div", { key: '
|
|
6214
|
+
}))), index.h("div", { key: '9854d2c9224285f0fbfab421be40cd8ea6b6d489', slot: "indicator", class: "indicator-wrapper" }, index.h("udp-fluent-icon-button", { key: '15c02c3bf53e510eb09c0aeff628185400d1f46a', class: {
|
|
6208
6215
|
'clear-button': true,
|
|
6209
6216
|
'is-visible': this.showClearButton && this.multiple && !this.disabled,
|
|
6210
|
-
}, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: '
|
|
6217
|
+
}, slot: "indicator", iconName: "dismiss", appearance: "transparent", size: "small", onClick: this.handleClear, onMouseDown: e => e.preventDefault(), ariaLabel: "Clear", tabIndex: -1 }), index.h("udp-fluent-icon", { key: '0185eff62d06046b1155fda3cc9b567fd6f0a276', name: "chevron-down", size: "sm", class: "chevron-down", onClick: () => this.handleTogglePopover(false) }))), index.h("div", { key: '87998c19ee351fa000d605a1ec3ce82b2e01a6ec', class: {
|
|
6211
6218
|
'message-wrapper': true,
|
|
6212
6219
|
'includeErrorPadding': this.includeErrorPadding,
|
|
6213
|
-
}, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '
|
|
6220
|
+
}, slot: "message", onClick: () => this.handleTogglePopover(true) }, index.h("udp-text", { key: '203b618fc581ae5fd05402da825be8da8c33dae1', variant: "caption1", class: {
|
|
6214
6221
|
message: true,
|
|
6215
6222
|
error: hasError,
|
|
6216
6223
|
} }, message)))));
|
|
@@ -6682,8 +6689,8 @@ const UdpFluentMenu = class {
|
|
|
6682
6689
|
}
|
|
6683
6690
|
render() {
|
|
6684
6691
|
const isIconOrSplit = this.buttonType === 'icon' || this.buttonType === 'split';
|
|
6685
|
-
return (index.h(index.Host, { key: '
|
|
6686
|
-
this.buttonType !== 'split' && (index.h("span", { key: '
|
|
6692
|
+
return (index.h(index.Host, { key: '8352f4a655086a09cec6eb440793fbfe688758a9', exportparts: "trigger" }, index.h("fluent-menu", { key: 'b2b10de366d6f3b912e05f18332735beca75fa4a', "open-on-hover": this.openOnHover, "close-on-scroll": this.closeOnScroll, split: this.buttonType === 'split', "persist-on-item-click": this.persistOnMenuClick, "open-on-context": this.openOnContext }, this.buttonType === 'split' && (index.h("fluent-button", { key: '1c28f3bbc4a3486265907230574a23094f07c21a', slot: "primary-action", onClick: this.handlePrimaryClick, appearance: this.appearance, shape: this.shape, size: this.size }, (this.startIconName || hasSlotContent(this.el, 'start')) && (index.h("span", { key: 'd4df319623ca47ec60fac7a8cdfdf11e8aa2491c', class: "slot-wrapper", slot: "start" }, index.h("slot", { key: 'dbf730397f3d6e0eb1ea3dd21ab58c54c38dce08', name: "start" }, this.startIconName && (index.h("udp-fluent-icon", { key: '7e81093bb951c7223a66512a450b03a4e26256fb', name: this.startIconName, size: getIconSize(this.size) }))))), this.label)), index.h("fluent-menu-button", { key: '1cf85f03b4a1186ec0d9a1995f3b5f6ca12dcb0a', part: "trigger", slot: "trigger", "icon-only": isIconOrSplit, appearance: this.appearance, shape: this.shape, size: this.size, disabled: this.disabled }, (this.startIconName || hasSlotContent(this.el, 'start')) &&
|
|
6693
|
+
this.buttonType !== 'split' && (index.h("span", { key: '04577537dd81b578c6ccc78ec44dc83dab1857b4', class: "slot-wrapper", slot: "start" }, index.h("slot", { key: 'de0020b72963f63ebb4a4e645f5a706ff0a93ef0', name: "start" }, this.startIconName && (index.h("udp-fluent-icon", { key: 'ee03719564f2aca3a9c3ad63a09091c5b7aa53a1', name: this.startIconName, size: getIconSize(this.size) }))))), !isIconOrSplit && this.label, (hasSlotContent(this.el, 'end') || this.endIconName) && (index.h("span", { key: 'ee2489c4d4b9853bff420698c3a0e9f7de1d8de0', class: "slot-wrapper", slot: "end" }, this.endIconName ? (index.h("udp-fluent-icon", { name: this.endIconName, size: getIconSize(this.size, 'standard') })) : (index.h("slot", { name: "end" }))))), index.h("fluent-menu-list", { key: '627cf00fb62c94e2d5ceef351dbf85cf32f589e2' }, this.renderItems(this._items)))));
|
|
6687
6694
|
}
|
|
6688
6695
|
get el() { return index.getElement(this); }
|
|
6689
6696
|
static get watchers() { return {
|
|
@@ -6750,9 +6757,10 @@ const UdpFluentRadioGroup = class {
|
|
|
6750
6757
|
});
|
|
6751
6758
|
}
|
|
6752
6759
|
render() {
|
|
6760
|
+
var _a;
|
|
6753
6761
|
const hasError = !!this.error;
|
|
6754
6762
|
const message = this.error || this.hint;
|
|
6755
|
-
return (index.h(index.Host, { key: 'ac9d69e97279509f2c3c5b7efab55656a5a41be6' }, index.h("fluent-field", { key: 'a8265ca99b6a13b6f272536d1410e103ca61c123', "label-position": "above" }, index.h("fluent-label", { key: 'cce3ca7c4c32d7f47375feb2d9641e74d2cb9bb7', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '5308c1c33a4851d4214b3e2b3adf98e666720484', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'dda6fd494e63b3776dd87c5a568f980cfbd8cfba', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("fluent-radio-group", { key: '39d30a690b84765ddcd3976bcfe64444c8926987', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, this.items.map(item => (index.h("fluent-field", { "label-position": "after" }, index.h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), index.h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), index.h("udp-text", { key: '
|
|
6763
|
+
return (index.h(index.Host, { key: 'ac9d69e97279509f2c3c5b7efab55656a5a41be6' }, index.h("fluent-field", { key: 'a8265ca99b6a13b6f272536d1410e103ca61c123', "label-position": "above" }, index.h("fluent-label", { key: 'cce3ca7c4c32d7f47375feb2d9641e74d2cb9bb7', slot: "label", disabled: this.disabled }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '5308c1c33a4851d4214b3e2b3adf98e666720484', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'dda6fd494e63b3776dd87c5a568f980cfbd8cfba', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("fluent-radio-group", { key: '39d30a690b84765ddcd3976bcfe64444c8926987', ref: el => (this.internalInput = el), slot: "input", name: this.name, disabled: this.disabled, orientation: this.orientation, onChange: this.handleChange }, (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(item => (index.h("fluent-field", { "label-position": "after" }, index.h("fluent-label", { slot: "label", onClick: () => this.handleLabelClick(item.value, item.disabled) }, item.label), index.h("fluent-radio", { slot: "input", value: item.value, disabled: item.disabled, ref: (el) => this.radioRefs.set(item.value, el) }))))), index.h("udp-text", { key: '66cc75dd3623ca64e66ab5f4b6dbfabf0ddfc015', slot: "message", variant: "caption1", class: {
|
|
6756
6764
|
message: true,
|
|
6757
6765
|
error: hasError,
|
|
6758
6766
|
includeErrorPadding: this.includeErrorPadding,
|
|
@@ -6969,9 +6977,16 @@ const UdpFluentTablist = class {
|
|
|
6969
6977
|
// Create a map of tab widths for quick lookup
|
|
6970
6978
|
const tabWidths = new Map();
|
|
6971
6979
|
tabs.forEach(tab => tabWidths.set(tab.id, tab.offsetWidth));
|
|
6972
|
-
// Get active tab info - prefer internal tablist state over prop
|
|
6980
|
+
// Get active tab info - prefer internal tablist state over prop.
|
|
6981
|
+
// Normalize to string since DOM .id is always a string, but activeId prop may be numeric.
|
|
6982
|
+
// Validate against tabWidths to guard against ID mismatches (e.g. fluent-tablist transforming IDs).
|
|
6973
6983
|
const internalActiveId = (_c = this.tablistEl) === null || _c === void 0 ? void 0 : _c.activeid;
|
|
6974
|
-
const
|
|
6984
|
+
const rawActiveId = internalActiveId
|
|
6985
|
+
? String(internalActiveId)
|
|
6986
|
+
: this.activeId != null
|
|
6987
|
+
? String(this.activeId)
|
|
6988
|
+
: undefined;
|
|
6989
|
+
const activeTabId = rawActiveId && tabWidths.has(rawActiveId) ? rawActiveId : (_d = tabs[0]) === null || _d === void 0 ? void 0 : _d.id;
|
|
6975
6990
|
const activeTabWidth = activeTabId ? ((_e = tabWidths.get(activeTabId)) !== null && _e !== void 0 ? _e : 0) : 0;
|
|
6976
6991
|
// Calculate total width of all tabs
|
|
6977
6992
|
let totalWidth = 0;
|
|
@@ -7015,9 +7030,9 @@ const UdpFluentTablist = class {
|
|
|
7015
7030
|
buildMenuItems() {
|
|
7016
7031
|
// Filter items that are NOT visible and NOT hidden
|
|
7017
7032
|
return this.tabList
|
|
7018
|
-
.filter(t => !t.hide && !this.visibleTabIds.includes(t.id))
|
|
7033
|
+
.filter(t => !t.hide && !this.visibleTabIds.includes(String(t.id)))
|
|
7019
7034
|
.map(item => ({
|
|
7020
|
-
id: item.id,
|
|
7035
|
+
id: String(item.id),
|
|
7021
7036
|
text: item.label,
|
|
7022
7037
|
startIconName: item.startIconName,
|
|
7023
7038
|
endIconName: item.endIconName,
|
|
@@ -7044,7 +7059,7 @@ const UdpFluentTablist = class {
|
|
|
7044
7059
|
handleMenuItemClick(id) {
|
|
7045
7060
|
// 1. Update internal tablist's activeid immediately so calculations see it
|
|
7046
7061
|
if (this.tablistEl) {
|
|
7047
|
-
this.tablistEl.activeid = id;
|
|
7062
|
+
this.tablistEl.activeid = String(id);
|
|
7048
7063
|
}
|
|
7049
7064
|
// 2. Perform full overflow check.
|
|
7050
7065
|
// This is necessary because the new active tab might have a different width
|
|
@@ -7055,7 +7070,7 @@ const UdpFluentTablist = class {
|
|
|
7055
7070
|
// 4. Focus the tab and update roving tabindex (after a brief delay to allow DOM update)
|
|
7056
7071
|
requestAnimationFrame(() => {
|
|
7057
7072
|
var _a;
|
|
7058
|
-
const tab = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(id);
|
|
7073
|
+
const tab = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(String(id));
|
|
7059
7074
|
if (tab) {
|
|
7060
7075
|
tab.focus();
|
|
7061
7076
|
}
|
|
@@ -7084,7 +7099,7 @@ const UdpFluentTablist = class {
|
|
|
7084
7099
|
render() {
|
|
7085
7100
|
// Standard rendering for vertical (no scroll behavior needed typically)
|
|
7086
7101
|
if (this.orientation === 'vertical') {
|
|
7087
|
-
return (index.h("fluent-tablist", { appearance: this.appearance === 'contained' ? 'subtle' : this.appearance, disabled: this.disabled, size: this.size, orientation: this.orientation, activeid: this.activeId, onChange: this.handleTabChange }, this.orderedTabs.map(tab => this.renderTab(tab))));
|
|
7102
|
+
return (index.h("fluent-tablist", { appearance: this.appearance === 'contained' ? 'subtle' : this.appearance, disabled: this.disabled, size: this.size, orientation: this.orientation, activeid: this.activeId != null ? String(this.activeId) : undefined, onChange: this.handleTabChange }, this.orderedTabs.map(tab => this.renderTab(tab))));
|
|
7088
7103
|
}
|
|
7089
7104
|
// Horizontal rendering with scroll container and shadow indicators
|
|
7090
7105
|
return (index.h("div", { class: {
|
|
@@ -7096,7 +7111,7 @@ const UdpFluentTablist = class {
|
|
|
7096
7111
|
} }, index.h("div", { class: "scroll-button-container start" }, index.h("udp-fluent-icon-button", { iconName: "chevron-left", size: "small", shape: "circular", onClick: this.handleScrollStart, ariaLabel: "Scroll to start", tabIndex: this.showStartShadow ? 0 : -1 }))), index.h("div", { class: {
|
|
7097
7112
|
'tablist-scroll-container': true,
|
|
7098
7113
|
'collapse-mode': this.overflowStrategy === 'collapse',
|
|
7099
|
-
}, ref: el => (this.scrollContainer = el) }, index.h("fluent-tablist", { ref: el => (this.tablistEl = el), class: "tablist-inner", appearance: 'subtle', disabled: this.disabled, size: this.size, orientation: this.orientation, activeid: this.activeId, onChange: this.handleTabChange }, this.orderedTabs.map(tab => this.renderTab(tab))), this.overflowStrategy === 'collapse' && (index.h("div", { class: {
|
|
7114
|
+
}, ref: el => (this.scrollContainer = el) }, index.h("fluent-tablist", { ref: el => (this.tablistEl = el), class: "tablist-inner", appearance: 'subtle', disabled: this.disabled, size: this.size, orientation: this.orientation, activeid: this.activeId != null ? String(this.activeId) : undefined, onChange: this.handleTabChange }, this.orderedTabs.map(tab => this.renderTab(tab))), this.overflowStrategy === 'collapse' && (index.h("div", { class: {
|
|
7100
7115
|
'overflow-menu-container': true,
|
|
7101
7116
|
'is-hidden': this.overflowTabs.length === 0,
|
|
7102
7117
|
} }, index.h("udp-fluent-menu", { buttonType: "icon", endIconName: "more", appearance: "outline", shape: "circular", size: "small", items: this.overflowTabs }), this.showCounter && (index.h("udp-fluent-counter-badge", { size: "small", color: "brand" }, this.overflowTabs.length))))), this.overflowStrategy === 'scroll' && (index.h("div", { class: {
|
|
@@ -7697,7 +7712,7 @@ const UdpPopOver = class {
|
|
|
7697
7712
|
};
|
|
7698
7713
|
UdpPopOver.style = udpPopOverCss();
|
|
7699
7714
|
|
|
7700
|
-
const udpPopoverCss = () => `:host{display:contents}::slotted([slot='trigger']){anchor-name:var(--udp-internal-anchor-name)}.popover-shell{position:
|
|
7715
|
+
const udpPopoverCss = () => `:host{display:contents}::slotted([slot='trigger']){anchor-name:var(--udp-internal-anchor-name)}.popover-shell{position:fixed;inset:auto;border:none;padding:0;margin:0;background:transparent;overflow:visible;outline:none;position-try-fallbacks:flip-block, flip-inline}.popover-shell.position-top{margin-block-end:2px}.popover-shell.position-bottom{margin-block-start:2px}.popover-shell.position-left{margin-inline-end:3px}.popover-shell.position-right{margin-inline-start:3px}:host(.has-arrow) .popover-shell.position-top{margin-block-end:8px}:host(.has-arrow) .popover-shell.position-bottom{margin-block-start:8px}:host(.has-arrow) .popover-shell.position-left{margin-inline-end:8px}:host(.has-arrow) .popover-shell.position-right{margin-inline-start:8px}@supports not (anchor-name: --test){.popover-shell{position:fixed;margin:0}}.popover-content{position:relative;background-color:var(--colorNeutralBackground1, #ffffff);border:1px solid var(--colorTransparentStroke, transparent);border-radius:var(--borderRadiusMedium, 4px);color:var(--colorNeutralForeground1, #242424);padding:var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);box-sizing:border-box;box-shadow:var(--shadow16, 0px 8px 16px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12));width:max-content;min-width:160px;max-width:300px}.size-small{max-width:320px}.size-medium{max-width:480px}.size-large{max-width:640px}.popover-arrow{position:absolute;width:10px;height:10px;background-color:inherit;border:inherit;border-bottom:none;border-right:none;z-index:1;transform:rotate(45deg)}.position-bottom .popover-arrow{top:-6px;bottom:auto;left:50%;right:auto;margin-left:-5px;transform:rotate(45deg)}.position-top .popover-arrow{top:auto;bottom:-6px;left:50%;right:auto;margin-left:-5px;transform:rotate(225deg)}.position-left .popover-arrow{top:50%;bottom:auto;left:auto;right:-6px;margin-top:-5px;margin-left:0;transform:rotate(135deg)}.position-right .popover-arrow{top:50%;bottom:auto;left:-6px;right:auto;margin-top:-5px;margin-left:0;transform:rotate(-45deg)}.popover-shell:popover-open{display:block;animation:udp-popover-fade-in 0.15s ease-out}.popover-shell:not(:popover-open){display:none}@keyframes udp-popover-fade-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}`;
|
|
7701
7716
|
|
|
7702
7717
|
// Feature detection for CSS Anchor Positioning
|
|
7703
7718
|
const AnchorPositioningSupported = 'anchorName' in document.documentElement.style;
|
|
@@ -8309,7 +8324,7 @@ const UdpProgressBar = class {
|
|
|
8309
8324
|
}
|
|
8310
8325
|
};
|
|
8311
8326
|
|
|
8312
|
-
const udpSearchInputCss = () => `fluent-text-input.no-label::part(label){display:none}fluent-text-input[disabled]::part(control){color:var(--colorNeutralForegroundDisabled);-webkit-text-fill-color:var(--colorNeutralForegroundDisabled)}fluent-text-input[disabled]::part(root){background-color:var(--colorNeutralBackgroundDisabled)}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-text-input::part(control):-webkit-autofill,fluent-text-input::part(control):-webkit-autofill:hover,fluent-text-input::part(control):-webkit-autofill:focus,fluent-text-input::part(control):-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--colorNeutralBackground1) inset !important;-webkit-text-fill-color:var(--colorNeutralForeground1) !important;transition:background-color 5000s ease-in-out 0s}:host{display:block;width:100
|
|
8327
|
+
const udpSearchInputCss = () => `fluent-text-input.no-label::part(label){display:none}fluent-text-input[disabled]::part(control){color:var(--colorNeutralForegroundDisabled);-webkit-text-fill-color:var(--colorNeutralForegroundDisabled)}fluent-text-input[disabled]::part(root){background-color:var(--colorNeutralBackgroundDisabled)}fluent-label[disabled]{color:var(--colorNeutralForeground1)}fluent-text-input::part(control):-webkit-autofill,fluent-text-input::part(control):-webkit-autofill:hover,fluent-text-input::part(control):-webkit-autofill:focus,fluent-text-input::part(control):-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px var(--colorNeutralBackground1) inset !important;-webkit-text-fill-color:var(--colorNeutralForeground1) !important;transition:background-color 5000s ease-in-out 0s}:host{display:block;width:100%;color:var(--colorNeutralForeground1)}fluent-field{width:100%}fluent-text-input{width:100%;max-width:100%}.message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}:host(.has-error) fluent-text-input::part(root){border-color:var(--colorPaletteRedBorder2)}:host(.has-error:focus-within) fluent-text-input::part(root){border-color:var(--colorNeutralStroke1)}.clear-button{display:none}.clear-button.is-visible{display:inline-flex}`;
|
|
8313
8328
|
|
|
8314
8329
|
const UdpSearchInput = class {
|
|
8315
8330
|
constructor(hostRef) {
|
|
@@ -8664,7 +8679,7 @@ const UdpSideSheet = class {
|
|
|
8664
8679
|
};
|
|
8665
8680
|
UdpSideSheet.style = udpSideSheetCss();
|
|
8666
8681
|
|
|
8667
|
-
const udpSliderCss = () =>
|
|
8682
|
+
const udpSliderCss = () => `:host{color:var(--colorNeutralForeground1)}.message{color:var(--colorNeutralForeground3)}.message.includeErrorPadding{min-height:var(--lineHeightBase200)}.message.error{color:var(--colorPaletteRedForeground1)}.popup-hint-icon{margin-left:2px}fluent-label[disabled]{color:var(--colorNeutralForeground1)}`;
|
|
8668
8683
|
|
|
8669
8684
|
const UdpSlider = class {
|
|
8670
8685
|
constructor(hostRef) {
|
|
@@ -9586,7 +9601,7 @@ const UdpTimeInput = class {
|
|
|
9586
9601
|
const effectiveError = this.internalError || this.error;
|
|
9587
9602
|
const hasError = !!effectiveError;
|
|
9588
9603
|
const message = effectiveError || this.hint;
|
|
9589
|
-
return (index.h(index.Host, { key: '
|
|
9604
|
+
return (index.h(index.Host, { key: '83420419765dc69e9ba61b736fd762bdd4fec822', class: { 'has-error': hasError } }, index.h("fluent-field", { key: 'e5394c63c47a15029f0a6fc28cd5565e4333479b' }, index.h("udp-popover", { key: '5190a1670e28cea6b272452ae4025228537926ea', slot: "input", open: this.isOpen, position: "bottom-start", toggleOnTriggerClick: false, onPopoverClose: this.handlePopoverClose }, index.h("fluent-text-input", { key: 'a5104441027ae18f12484fb725e30613cae0e44b', slot: "trigger", ref: el => (this.internalInput = el), value: this.inputValue, name: this.name, autocomplete: "off", placeholder: this.placeholder, disabled: this.disabled, appearance: this.appearance, controlSize: this.controlSize, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onClick: this.handleInputClick }, index.h("fluent-label", { key: '16aee062b481c1568d646e073688432cfe08c069', required: this.required, disabled: this.disabled, onMouseDown: this.handleLabelMouseDown }, this.label, this.popupHint && (index.h("udp-tooltip", { key: '1b914f6afabf9735f821c734500fea56949c0308', content: this.popupHint, positioning: "above" }, index.h("udp-fluent-icon", { key: 'fec99d31cbf4cdc4855626ccd6505dbd8ffd21f3', name: "info", size: "xs", class: "popup-hint-icon" })))), index.h("div", { key: '30d6d44315a0dbe332d796aeed4eee4dc47a2891', slot: "end" }, index.h("udp-fluent-icon-button", { key: 'cee1c4405ee5a0119a219f54669a4441ab80d836', appearance: "transparent", iconName: "clock", disabled: this.disabled, tabindex: -1, onMouseDown: this.handleIconMouseDown, onClick: this.handleIconClick }))), index.h("div", { key: '58383d322e0812ef72497cbbff7ec5a808e52164', slot: "content", class: "listbox-container" }, index.h("fluent-listbox", { key: '55eb7f240721c24197b16b4872ca617cd6abcdf0' }, this.timeOptions.map((option, index$1) => (index.h("fluent-option", { key: option.value, value: option.value, class: { active: index$1 === this.activeIndex }, onClick: () => this.handleOptionClick(option) }, index.h("span", { slot: "checked-indicator" }), option.label)))))), index.h("udp-text", { key: '1667941fc874a811777a80f2e8cc2a15ac636b43', slot: "message", variant: "caption1", class: {
|
|
9590
9605
|
message: true,
|
|
9591
9606
|
error: hasError,
|
|
9592
9607
|
includeErrorPadding: this.includeErrorPadding,
|