udp-stencil-component-library 25.18.1-beta.6 → 25.18.1-beta.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/advanced-search_50.cjs.entry.js +111 -41
- package/dist/cjs/ag-grid-base_5.cjs.entry.js +1 -1
- package/dist/cjs/chip-section.cjs.entry.js +2 -2
- package/dist/cjs/color-preview.cjs.entry.js +1 -1
- package/dist/cjs/index-DrMNAZCL.js +4 -0
- package/dist/cjs/inputs-example.cjs.entry.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/page-renderer.cjs.entry.js +1 -1
- package/dist/cjs/stencil-library.cjs.js +1 -1
- package/dist/cjs/udp-tab-panel.cjs.entry.js +22 -0
- package/dist/cjs/udp-tab-panel.entry.cjs.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.css +0 -5
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js +170 -37
- package/dist/collection/components/my-component/UI/tabs/tab/tabs/udp-tabs.js.map +1 -1
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.css +2 -4
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js +2 -2
- package/dist/collection/components/my-component/UI/tabs/tab/udp-tab.js.map +1 -1
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css +11 -0
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js +65 -0
- package/dist/collection/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.js.map +1 -0
- package/dist/collection/components/my-component/UI/toolbars/app-bar/app-bar.js +1 -1
- package/dist/collection/components/my-component/UI/util/ghost-render/ghost-render.js +1 -1
- package/dist/collection/components/my-component/demo/ambient-demo-container.js +1 -1
- package/dist/collection/components/test-component/inputs-example/inputs-example.js +2 -2
- package/dist/collection/page-renderer/page-renderer.js +1 -1
- package/dist/collection/theme/color-preview/color-preview.js +1 -1
- package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/chip-section/chip-section.js +2 -2
- package/dist/collection/udp-utilities/layout/udp-dynamic-container-with-menu/udp-dynamic-container-with-menu.js +1 -1
- package/dist/components/ambient-demo-container2.js +1 -1
- package/dist/components/app-bar2.js +1 -1
- package/dist/components/chip-section.js +2 -2
- package/dist/components/color-preview.js +1 -1
- package/dist/components/ghost-render2.js +1 -1
- package/dist/components/inputs-example.js +2 -2
- package/dist/components/page-renderer.js +1 -1
- package/dist/components/udp-dynamic-container-with-menu2.js +1 -1
- package/dist/components/udp-tab-panel.d.ts +11 -0
- package/dist/components/udp-tab-panel.js +45 -0
- package/dist/components/udp-tab-panel.js.map +1 -0
- package/dist/components/udp-tab2.js +2 -2
- package/dist/components/udp-tab2.js.map +1 -1
- package/dist/components/udp-tabs2.js +114 -40
- package/dist/components/udp-tabs2.js.map +1 -1
- package/dist/docs.json +141 -4
- package/dist/esm/advanced-search_50.entry.js +111 -41
- package/dist/esm/ag-grid-base_5.entry.js +1 -1
- package/dist/esm/chip-section.entry.js +2 -2
- package/dist/esm/color-preview.entry.js +1 -1
- package/dist/esm/index-n-1ZSeAs.js +4 -0
- package/dist/esm/inputs-example.entry.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/page-renderer.entry.js +1 -1
- package/dist/esm/stencil-library.js +1 -1
- package/dist/esm/udp-tab-panel.entry.js +20 -0
- package/dist/esm/udp-tab-panel.entry.js.map +1 -0
- package/dist/stencil-library/advanced-search_50.entry.js +1 -1
- package/dist/stencil-library/advanced-search_50.entry.js.map +1 -1
- package/dist/stencil-library/ag-grid-base_5.entry.js +1 -1
- package/dist/stencil-library/chip-section.entry.js +1 -1
- package/dist/stencil-library/color-preview.entry.js +1 -1
- package/dist/stencil-library/inputs-example.entry.js +1 -1
- package/dist/stencil-library/page-renderer.entry.js +1 -1
- package/dist/stencil-library/stencil-library.esm.js +1 -1
- package/dist/stencil-library/udp-tab-panel.entry.esm.js.map +1 -0
- package/dist/stencil-library/udp-tab-panel.entry.js +2 -0
- package/dist/stencil-library/udp-tab-panel.entry.js.map +1 -0
- package/dist/types/components/my-component/UI/tabs/tab/tabs/udp-tabs.d.ts +47 -4
- package/dist/types/components/my-component/UI/tabs/tab/udp-tab.d.ts +1 -1
- package/dist/types/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.d.ts +11 -0
- package/dist/types/components.d.ts +68 -2
- package/package.json +1 -1
|
@@ -91,7 +91,7 @@ export class InputsExample {
|
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
-
return (h("div", { key: '
|
|
94
|
+
return (h("div", { key: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), h("numeric-field", { key: 'f9e990f8a8b24fff7eda8513c0f33bb62c7a2522', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), h("text-area", { key: 'f89870ede0138fbd4c451de97b442a5eb440674d', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
|
|
95
95
|
formTextField: 'Initial form text',
|
|
96
96
|
formNumericField: '25',
|
|
97
97
|
formTextArea: 'Initial form description',
|
|
@@ -100,7 +100,7 @@ export class InputsExample {
|
|
|
100
100
|
formDate: '2024-02-01',
|
|
101
101
|
formTime: '09:00',
|
|
102
102
|
formSelector: 'option1'
|
|
103
|
-
} }, h("div", { key: '
|
|
103
|
+
} }, h("div", { key: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '0b79b2f43a252f631176f73403aac729f69c5af6', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), h("file-upload", { key: '7dff9c55cf4741c542c4aae3dc60e36e4a9caa3e', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
|
|
104
104
|
}
|
|
105
105
|
static get is() { return "inputs-example"; }
|
|
106
106
|
static get encapsulation() { return "shadow"; }
|
|
@@ -7,7 +7,7 @@ export class PageRenderer {
|
|
|
7
7
|
return (h("div", { style: { border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' } }, h("unity-typography", null, "Content currently unavailable ( ", h("span", { style: { fontWeight: '700' } }, componentName), " ). We're working to make this available to you soon!")));
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h("div", { key: '
|
|
10
|
+
return (h("div", { key: '4456997c11d8225a351000d17f3bab7270312a06' }, this.pageData.map((data) => {
|
|
11
11
|
// Prepare properties from metaData, ensuring any existing keys that
|
|
12
12
|
// match your direct props are overridden.
|
|
13
13
|
const gridProps = Object.assign(Object.assign({}, data.properties), {
|
|
@@ -10,7 +10,7 @@ export class ColorPreview {
|
|
|
10
10
|
return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h("div", { key: '
|
|
13
|
+
return (h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), h("div", { key: '15b1b26a27b44cef9da3de647dfed23c5744300f', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
|
|
14
14
|
}
|
|
15
15
|
static get is() { return "color-preview"; }
|
|
16
16
|
static get encapsulation() { return "scoped"; }
|
|
@@ -94,13 +94,13 @@ export class ChipSection {
|
|
|
94
94
|
}
|
|
95
95
|
render() {
|
|
96
96
|
console.log("Rendering ChipSection", this.visibleFilterChips);
|
|
97
|
-
return (h("div", { key: '
|
|
97
|
+
return (h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
|
|
98
98
|
if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
|
|
99
99
|
console.log('returning null...');
|
|
100
100
|
return null;
|
|
101
101
|
}
|
|
102
102
|
return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
|
|
103
|
-
})), h("div", { key: '
|
|
103
|
+
})), h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
|
|
104
104
|
}
|
|
105
105
|
static get is() { return "chip-section"; }
|
|
106
106
|
static get encapsulation() { return "shadow"; }
|
|
@@ -114,7 +114,7 @@ export class DynamicContainerWithMenu {
|
|
|
114
114
|
this.udpChipClicked.emit(chipText);
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
117
|
-
return (h("div", { key: '
|
|
117
|
+
return (h("div", { key: '99a3ae39a56314eacb1cad4a8088f98acc52ef9d', class: "container" }, h("div", { key: 'cf6c29cc6fc435cadcc12f22b61246d03a3fa85b', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '6f06947570a2f227909060d9cbb0c282ed219eda', class: "overflow" }, h("udp-pop-over", { key: '11cf2f25c44d69075d24f622c03bdd7418f037af', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'c69c2e7eadedaaa70e63da5b7e636050660dd889', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
|
|
118
118
|
}
|
|
119
119
|
static get is() { return "udp-dynamic-container-with-menu"; }
|
|
120
120
|
static get encapsulation() { return "shadow"; }
|
|
@@ -12,7 +12,7 @@ const AmbientDemoContainer = /*@__PURE__*/ proxyCustomElement(class AmbientDemoC
|
|
|
12
12
|
this.__attachShadow();
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { key: '
|
|
15
|
+
return (h("div", { key: 'aabd2db2a35785c49e8bce7f39ec3321814514b5', class: "container" }, h("div", { key: '104242d374cbb562dae2934c379384adcf689cc2', class: "title-container" }, " ", h("unity-typography", { key: 'ee84ba9c0176de8e4ed3a2f5521fcecf7602ebea', variant: "button" }, " ", this.title, " "), " "), h("slot", { key: 'f55df725728ccad67e8f191a09eff301fb26d394' })));
|
|
16
16
|
}
|
|
17
17
|
static get style() { return ambientDemoContainerCss; }
|
|
18
18
|
}, [257, "ambient-demo-container", {
|
|
@@ -18,7 +18,7 @@ const AppBar = /*@__PURE__*/ proxyCustomElement(class AppBar extends H {
|
|
|
18
18
|
this.__attachShadow();
|
|
19
19
|
}
|
|
20
20
|
render() {
|
|
21
|
-
return (h("div", { key: '
|
|
21
|
+
return (h("div", { key: '569816f25d9bdf9286623b9e2b7e86ecb3ddb785', class: "header" }, h("stencil-icon-button", { key: '2980f6a34b1321c23b709ccdc63a49b35262a41f', noBackground: true, darkIcon: false, icon: Menu24 }), h("unity-typography", { key: '916bf7f902e71fb62694a84ddabe0ffa9638424d', variant: 'data-display-one' }, " ", h("slot", { key: '5e792e8680f9e11ae8de27d9ccee20c004fe9cf4' }), " "), h("a", { key: '6eb956082f541a38807e29dc8c18c0e5ce0e7a99', class: "skip-to-content", href: "#main-content" }, "Skip to main content"), h("div", { key: 'ab60340a8b921edf0dc303de7558ab5b2dd473ce', class: "header__logo" }), h("div", { key: '64082fa1132e127acdb00f9e6876e39d53ed03ce', class: "header__nav", role: "navigation", "aria-label": "Carbon Design System" }), h("div", { key: '133b4ec8621d4a2d9fd0bb7b0c9f870741bba504', class: "header__global" }, h("udp-avatar", { key: 'a8a35852fee5cd30832266fa88cde579c5b9d2ad', username: this.username }))));
|
|
22
22
|
}
|
|
23
23
|
static get style() { return appBarCss; }
|
|
24
24
|
}, [257, "app-bar", {
|
|
@@ -106,13 +106,13 @@ const ChipSection$1 = /*@__PURE__*/ proxyCustomElement(class ChipSection extends
|
|
|
106
106
|
}
|
|
107
107
|
render() {
|
|
108
108
|
console.log("Rendering ChipSection", this.visibleFilterChips);
|
|
109
|
-
return (h("div", { key: '
|
|
109
|
+
return (h("div", { key: '567b5925fcedb62ecf4f0435b7a564da46e21465', class: "wrapper", id: "chipSectionContainer" }, h("div", { key: '41c9dfc9f98d2d2d42261d1a28a6755faea2def9', class: "chipHolder" }, h("div", { key: 'aef7cada00ecb04c01a80967a07871ced2f8fe29', id: "viewChipsContainer" }, this.viewChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('view', index), text: chip.label, class: "viewChip" })))), h("udp-dynamic-container-with-menu", { key: 'c82f515501ffdc2e33e4b147f370c3e88302afbb', id: "filterChipsContainer", menuItems: this.menuItems }, this.selectedFilterChip && (h("stencil-chip", { key: '760c303eb392690316ea61e466ea70f2e3c32c6c', onOnDelete: this.handleFilterChipUntoggle, text: this.selectedFilterChip.label, class: "viewChip" })), console.log('filtering here...', this.filterChips), this.filterChips.map((chip) => {
|
|
110
110
|
if (this.selectedFilterChip && chip.id === this.selectedFilterChip.id) {
|
|
111
111
|
console.log('returning null...');
|
|
112
112
|
return null;
|
|
113
113
|
}
|
|
114
114
|
return (h("stencil-chip", { text: `${chip.label} ${chip.value}`, class: "filterChip", onClick: () => this.handleFilterChipToggle(chip) }));
|
|
115
|
-
})), h("div", { key: '
|
|
115
|
+
})), h("div", { key: '3651cb76022e5b363edd49428df66638114b52dc', id: "additionalFilterChipsContainer" }, this.additionalFilterChips.map((chip, index) => (h("stencil-chip", { onOnDelete: () => this.handleDelete('additionalFilter', index), text: chip.label, class: "additionalFilterChip" })))), !this.hideKpiSection && (h("div", { key: '931110b82bf127b6a571a8b312e4d21a691423ef', class: "KPI", id: "kpiContainer" }, this.kpiValues.slice(0, this.maxKPIsDisplayed).map((kpi) => (h("div", { class: "kpiItem" }, h("span", { class: "kpiLabel" }, this.abbreviateLabel(kpi.label) || kpi.label), h("span", { class: "kpiValue" }, this.abbrNum(kpi.value, 1))))))))));
|
|
116
116
|
}
|
|
117
117
|
get el() { return this; }
|
|
118
118
|
static get watchers() { return {
|
|
@@ -20,7 +20,7 @@ const ColorPreview$1 = /*@__PURE__*/ proxyCustomElement(class ColorPreview exten
|
|
|
20
20
|
return (h("div", { class: "color-section" }, h("unity-typography", { variant: "h4" }, title), h("div", { class: "color-grid" }, this.renderColorBox(`--${prefix}-color-main`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-dark`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-light`, `--${prefix}-contrast-text`), this.renderColorBox(`--${prefix}-color-hint`, `--${prefix}-contrast-text`))));
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h("div", { key: '
|
|
23
|
+
return (h("div", { key: '98a80f4e8502dd50d6f8f76a74196d1306456ddb', class: "container" }, h("unity-typography", { key: '70dfefd7b9032e0bea9ac6bd1c38e737ece1e034', variant: "h2" }, "Unity Theme"), h("div", { key: 'cdd7efeb53f12d6363e1ff391708eaeeb2cd89ab', class: "theme-section" }, h("div", { key: 'c698420ae9fb2fa3ca1067aa12f388ddccf5a566', class: "unity-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: 'c2cadbc40e7a4d1af6395ee98c2021af275e5187', variant: "h2" }, "SAP Theme"), h("div", { key: 'ce4312afaedc584183c85e356dad6c050bd13164', class: "theme-section" }, h("div", { key: '7460ef49884a7dd3a7c4e5e4c46dbd65d367b44a', class: "sap-theme" }, this.renderColorSection('Primary Colors', 'primary'), this.renderColorSection('Secondary Colors', 'secondary'))), h("unity-typography", { key: '110cdc21e09f0089365989ba4f7af4a38225f7cb', variant: "h2" }, "Status Colors"), h("div", { key: '15b1b26a27b44cef9da3de647dfed23c5744300f', class: "status-section" }, this.renderStatusSection('Success', 'success'), this.renderStatusSection('Error', 'error'), this.renderStatusSection('Warning', 'warning'), this.renderStatusSection('Info', 'info'), this.renderStatusSection('Note', 'note'))));
|
|
24
24
|
}
|
|
25
25
|
static get style() { return colorPreviewCss; }
|
|
26
26
|
}, [258, "color-preview"]);
|
|
@@ -78,7 +78,7 @@ const GhostRender = /*@__PURE__*/ proxyCustomElement(class GhostRender extends H
|
|
|
78
78
|
// The <slot /> is necessary to prevent the Stencil compiler from
|
|
79
79
|
// overly optimizing this component's output and aliasing the
|
|
80
80
|
// defineCustomElement export, which breaks downstream wrappers.
|
|
81
|
-
return (h(Host, { key: '
|
|
81
|
+
return (h(Host, { key: '1e77fbfc7ab0bc5ca00ee2351f547ef3d752f7c9' }, h("slot", { key: '092e556509b9c77f9c54da22fd41ed35c2ce65b2' })));
|
|
82
82
|
}
|
|
83
83
|
static get style() { return ":host {\n display: none;\n }"; }
|
|
84
84
|
}, [257, "ghost-render"]);
|
|
@@ -107,7 +107,7 @@ const InputsExample$1 = /*@__PURE__*/ proxyCustomElement(class InputsExample ext
|
|
|
107
107
|
};
|
|
108
108
|
}
|
|
109
109
|
render() {
|
|
110
|
-
return (h("div", { key: '
|
|
110
|
+
return (h("div", { key: '2c9774c01a36f857e6433aba926627a1257791c7', class: "inputs-example" }, h("h1", { key: '5c19b71a3f023b51f0c34ed8e7c5f37434ad091b' }, "Input Components Examples"), h("section", { key: 'f2447d8dfe430b466c61a2574ca753b9d5319ee9', class: "example-section" }, h("h2", { key: '818dcaa4f4c7dc505cdcccc3ffc484f70a3fb071' }, "Controlled Components"), h("p", { key: 'ea4ef0d9251996f67b861638238de0ad0a940e81' }, "Parent component manages state and passes values to child components."), h("div", { key: 'ee6a1e5c706fdb5f944e83624337a01331cc8d95', class: "input-grid" }, h("div", { key: '3ea82c30422559f59d4a0e10dddd02d918077eca', class: "input-example" }, h("h3", { key: '6c5ae1f68f5fa8e43a2b93176e610d88936982dd' }, "Text Field"), h("text-field", { key: '72ee35e0669b46c6c1707c079e87205c99155b00', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '6c7607e7b5cd9e0d942d2a890e90a1c43d8b1089', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '4d1b4ee2ccdd1f1da7568de5c33c6180dbac9a73', class: "input-example" }, h("h3", { key: '378a2d4ae669e03703cc9296529812ca7f0e7afc' }, "Numeric Field"), h("numeric-field", { key: '8827d06eeb38b3658909dbbe20cbed16aef1ded7', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '11797ec1b07020faee2cf620597c29b7ec3c91e3', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'c49569a4b48b03d0ba2846acd84a20ee0474f9e5', class: "input-example" }, h("h3", { key: '655878f8956003849b894125c2fb876c4e787acb' }, "Text Area"), h("text-area", { key: '3e3045fed0d2e5230a84658a7d7acb2d3a6bc3c8', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: 'b6a093c2a16379f854f8ec1890aca57d6b841685', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'f00587ad5255ac95ca7ef73ad525c9f2b7ad2e32', class: "input-example" }, h("h3", { key: '9e0ff081e371c2877d432d2e5c99e9b3447e1d73' }, "Checkbox"), h("check-box", { key: '1b3039be849d1fc56ee1b3cb35fde57d90dbe9b2', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: 'a5a2487cb7a5ece6ef34cafd22886aa3bb180682', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '5297030b195b03b2a0406ee4578f458e787abf6a', class: "input-example" }, h("h3", { key: '58004f9d68fa3c844424b4f7365a0cca9479f968' }, "Toggle"), h("stencil-toggle", { key: '8b8f04ab81e681ab9520f89fa82e32a3d4250409', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: 'd2492200be23d7444fe71267e11c549f16d8bc9a', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '698863a621af9c58672847f4505aaa5e2482bd05', class: "input-example" }, h("h3", { key: '39e0bcc2b2f04b9730352bd305823d6b5a9f8e6a' }, "Date Selector"), h("udp-date-selector", { key: 'b3338f8cf609764338d6be2a7b87dbf1d2b70f7f', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '09904cafd32d18a5cd7f576e576c6269f47dab94', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '13ec4f54ac0fbbaa74c67b56a5cadd6a9fc45252', class: "input-example" }, h("h3", { key: '5b899dea25c2f3cad64165988817c9d78afd6049' }, "DateTime Selector"), h("udp-datetime-selector", { key: '531b20feccea342c3308a373bb920f4060179f0f', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '60d6d1e1e93897d5ff04fa269b8d79105e95e2fa', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '29fefc86c4645769ce32ef9312518dd681eeeaf6', class: "input-example" }, h("h3", { key: '3cc3d33c55281e80a2a447bf68412aec3f0ba527' }, "Time Selector"), h("udp-time-selector", { key: 'b7bf0408622231fc893f7f5c5a8746e95775c8a7', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '34234c591167b563554a6671ee294a1a3b426510', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: '6632d633fcdaf187024a726b95a4b67decb44126', class: "input-example" }, h("h3", { key: '6c35d09bda887f3128fe648392faffd00f8e2514' }, "UDP Selector"), h("udp-selector", { key: '03b8b44a84c3db73b74b0738e602d09e91f5f228', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '73d475e90a204b46a15383d0e6b74269f29e59e4', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: 'd470e5bd6e16be2a67bdba2fca5fe0f494dabc12', class: "input-example" }, h("h3", { key: '703cadb6d041bc560fd72c60bfd562d409c4b653' }, "File Upload"), h("file-upload", { key: '94b4d3a82bc92353d5ebb8f3c7bc8b321902eb59', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '1b9eaac708bbd6ea3a13b1f405e70c717de4361c', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '0a017099bef0d138db8311c2607aa96e829f2db9', class: "example-section" }, h("h2", { key: '3a299379ae5f9d8b66b723aaa151514c9664e147' }, "Uncontrolled Components"), h("p", { key: '62b6c718844eb84971a5e8533fe51ae4ce9185d7' }, "Components manage their own state with initial values."), h("div", { key: 'b0270fdf7b8d96560fc49c7830e6192d9b34c583', class: "input-grid" }, h("div", { key: '52af146f389abe67d9c6edf239b80dbb553f4b48', class: "input-example" }, h("h3", { key: '5f5e36b240ad4f7f5e952d91c7ab08d907180738' }, "Text Field"), h("text-field", { key: '779daef1e8f1f0184b7ed60e3432c4bbb6d78aa5', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '925845b446b549ae12d3f67f40153ff88c1237ec', class: "input-example" }, h("h3", { key: '7b6eb7dfac92fcef0972f61bed2cc14c65c35a1f' }, "Numeric Field"), h("numeric-field", { key: 'f9e990f8a8b24fff7eda8513c0f33bb62c7a2522', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'dc700898e6043c871e81ba4215775e0b8ad86e64', class: "input-example" }, h("h3", { key: '89025e16958ad38e0de9a4fd2784617a434bb7b4' }, "Text Area"), h("text-area", { key: 'f89870ede0138fbd4c451de97b442a5eb440674d', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '840cdd4c554cb6f30a9660136586744e4df8391b', class: "input-example" }, h("h3", { key: '4af04e761094cf33faeda3366718ed912caa7d74' }, "Checkbox"), h("check-box", { key: '9263a3e6db5684bf304111ff8e7b7b12a6ed247b', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'e2ee60bd202d614335a35ad0344c2117061f40ca', class: "input-example" }, h("h3", { key: 'e8af0e815f5a89de6ec1596c6f0b457c0a413bd7' }, "Toggle"), h("stencil-toggle", { key: 'f6231a4394eb6d0f6b35c48b8850b98139df413e', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: 'bc457a401665ddcd8761555d1e664448ae240029', class: "input-example" }, h("h3", { key: '27c031274e7b4eefb1f629c9499d1f9d028714f6' }, "Date Selector"), h("udp-date-selector", { key: '0d001fa6aea835854f59a5adce3f86e91ecedad9', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '2adb1279494c4bef294fc4cdfab08a1e9d5dd51f', class: "input-example" }, h("h3", { key: 'b345f7f9dd7613ae3c90af685c6d7363b1fa5694' }, "Time Selector"), h("udp-time-selector", { key: '0b81754404c91875178909823c51a77821ba713c', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'e612112a0cfbad0378ce23559301468bbab528dd', class: "input-example" }, h("h3", { key: '58e3be8c3091b4375728653aa1025dd0800dea3a' }, "DateTime Selector"), h("udp-datetime-selector", { key: 'a66319f6db6bc35756b3cf0ed3f224024eecf0c4', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '1b71ad2e2c0b7e8087202fa03abdd0ec68a3f397', class: "input-example" }, h("h3", { key: '1b4818d107d60a9fca534ccba3c858860078b371' }, "UDP Selector"), h("udp-selector", { key: 'b53bdbabed328bc79fb7ea4597ffe36a26474d93', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: 'beaa194b45bd4fac58599a4a5e0d373c8101a743', class: "example-section" }, h("h2", { key: '05164bd4b352c81513d5c4c41fdd8998e5426534' }, "Form-wrapped Components"), h("p", { key: '0c4485a9dacf1f32b9c80f17d2521bf50fab2029' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '05de0c6af9963c337286a07a7058dc19174dd69a', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
|
|
111
111
|
formTextField: 'Initial form text',
|
|
112
112
|
formNumericField: '25',
|
|
113
113
|
formTextArea: 'Initial form description',
|
|
@@ -116,7 +116,7 @@ const InputsExample$1 = /*@__PURE__*/ proxyCustomElement(class InputsExample ext
|
|
|
116
116
|
formDate: '2024-02-01',
|
|
117
117
|
formTime: '09:00',
|
|
118
118
|
formSelector: 'option1'
|
|
119
|
-
} }, h("div", { key: '
|
|
119
|
+
} }, h("div", { key: 'd35fe74a1e26cf0b8f398e9c894c8f1a5da45a48', class: "form-grid" }, h("stencil-field", { key: 'd77c0d4cc9d9cffb255eff419a5b0af8b561947e', name: "formTextField" }, h("text-field", { key: '0410f7248f9b229be53fcd674caeda0c65b05fe2', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '48fba9a081504e2a0bea41f27ce0325dc914991d', name: "formNumericField" }, h("numeric-field", { key: '7f9ec15a7f6f0dbe373edff972efb2c81e2b558d', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: '2825b9b6932a7d66869f9ec08c60dc86a7d913da', name: "formTextArea" }, h("text-area", { key: '34b58939f90b746909880b22902bd7329d236cf4', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '8ee8d90cf1c56d1a8f5f6d0dfd87fb8369a474e3', name: "formCheckbox" }, h("check-box", { key: 'f63e26765d059b3d950b06e00cb1e3f398247e9e', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9c3412c4e9b54d1ef35b53af12246e81af00ff1b', name: "formToggle" }, h("stencil-toggle", { key: '700b07f98704353b99c936b26eb0b4142ff6a62a', label: "Enable Notifications" })), h("stencil-field", { key: '1698b7eee1656bf216498f09f7817307b74666b8', name: "formDate" }, h("udp-date-selector", { key: '8e8fc86fa7d371fabc6bf9eb72fbdd6e5e798102', label: "Form Date", required: true })), h("stencil-field", { key: 'b38b2317b83b226d34c0dc9491b8357ea8db261c', name: "formTime" }, h("udp-time-selector", { key: '570831455cbdc786acb1c06cff4c0089364999a9', label: "Form Time" })), h("stencil-field", { key: '71fc5f623dc700cfe77456d012dfa6e53a9d169e', name: "formSelector" }, h("udp-selector", { key: '22573dcbcb86203b9fe3ba0e79679225ad93eed8', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '3455ddb62d6e341a58c78dd2a9820d2eb326399c', name: "formFiles" }, h("file-upload", { key: '2ca7724c7443075b94da339efdf7b23e404a72d8', label: "Form File Upload", allowMultiple: true }))), h("div", { key: '6d070a36e05b2bdf3928fce96d51a8e7bc42e9e0', class: "form-actions" }, h("button", { key: '7233a784011bd65fd5fe25105a4afa36cfad9bbd', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: 'b9b2382fa2f27d159a7e586479e2325b385b3163', class: "form-values" }, h("h3", { key: 'fc96b6c576f8198514a7c7aee5ae953eb8a752cd' }, "Current Form Values:"), h("pre", { key: '8fdc93279968950235a62a5b4022b0f578bbe993' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '2731e1a0beedccacb1bbb34efb3608855769bbcb', class: "example-section" }, h("h2", { key: 'bb06ef8c5593615f101046e448291d512d6b4375' }, "Additional Examples"), h("p", { key: 'ab93ddb0de3d6606cc6285a0ec2e397f453846b5' }, "More complex configurations and specialized use cases."), h("div", { key: 'b1d7de6e2daa82f758e147e93831f4c3a327756e', class: "input-grid" }, h("div", { key: 'a65e4e5ff0a7950743529e441eeb6c0c67d16774', class: "input-example" }, h("h3", { key: '787e43f64af484ea59ad6a860be0aae3ea8ec95d' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '0b79b2f43a252f631176f73403aac729f69c5af6', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: '270209ebf674a2c4ce1b8211e11254f92c581735', class: "input-example" }, h("h3", { key: '967bc8d45e1c62d6a019f179a957f8e496160ba3' }, "Large UDP Selector"), h("udp-selector", { key: 'dbcd9fb9acf787233a62c4ff3bba8fbdbc982a71', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: 'bc60bade3cb2b8b71f3cd7c55ce41faac4ad1d5f', class: "input-example" }, h("h3", { key: 'a9e11f6c997cd208d46f13e9aa7a74343d0c6e58' }, "File Upload with Type Restrictions"), h("file-upload", { key: '7dff9c55cf4741c542c4aae3dc60e36e4a9caa3e', label: "Image Upload Only", allowedFileTypes: ['jpg', 'jpeg', 'png', 'gif'], allowMultiple: false, browseFileMessage: "Select an Image", onChange: (e) => console.log('Image upload changed:', e.detail) })), h("div", { key: 'cc464aa2b13e6a7852c735279094097675f68a71', class: "input-example" }, h("h3", { key: 'd06ed109dc3967f56f369a2806514d4c3987c2ca' }, "Disabled Components"), h("div", { key: 'f7295d2fdd1a89191aba44a0948e74228a8f056b', class: "disabled-examples" }, h("text-field", { key: '9cafed2788920b6f772abb0cda0006f94c7f7076', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: 'f7189fc4fd08c68970c5d97a1cc6516eb927e75c', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: 'b34905240d9b8f957a32791f3cba99cdf1128eb9', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
|
|
120
120
|
}
|
|
121
121
|
static get style() { return inputsExampleCss; }
|
|
122
122
|
}, [257, "inputs-example", {
|
|
@@ -60,7 +60,7 @@ const PageRenderer$1 = /*@__PURE__*/ proxyCustomElement(class PageRenderer exten
|
|
|
60
60
|
return (h("div", { style: { border: '1px solid #ff6a00', padding: '10px', margin: '10px 0', borderRadius: '5px', color: '#ff6a00', backgroundColor: '#fff3e0' } }, h("unity-typography", null, "Content currently unavailable ( ", h("span", { style: { fontWeight: '700' } }, componentName), " ). We're working to make this available to you soon!")));
|
|
61
61
|
}
|
|
62
62
|
render() {
|
|
63
|
-
return (h("div", { key: '
|
|
63
|
+
return (h("div", { key: '4456997c11d8225a351000d17f3bab7270312a06' }, this.pageData.map((data) => {
|
|
64
64
|
// Prepare properties from metaData, ensuring any existing keys that
|
|
65
65
|
// match your direct props are overridden.
|
|
66
66
|
const gridProps = Object.assign(Object.assign({}, data.properties), {
|
|
@@ -126,7 +126,7 @@ const DynamicContainerWithMenu = /*@__PURE__*/ proxyCustomElement(class DynamicC
|
|
|
126
126
|
this.udpChipClicked.emit(chipText);
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (h("div", { key: '
|
|
129
|
+
return (h("div", { key: '99a3ae39a56314eacb1cad4a8088f98acc52ef9d', class: "container" }, h("div", { key: 'cf6c29cc6fc435cadcc12f22b61246d03a3fa85b', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '6f06947570a2f227909060d9cbb0c282ed219eda', class: "overflow" }, h("udp-pop-over", { key: '11cf2f25c44d69075d24f622c03bdd7418f037af', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'c69c2e7eadedaaa70e63da5b7e636050660dd889', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
|
|
130
130
|
}
|
|
131
131
|
get el() { return this; }
|
|
132
132
|
static get watchers() { return {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface UdpTabPanel extends Components.UdpTabPanel, HTMLElement {}
|
|
4
|
+
export const UdpTabPanel: {
|
|
5
|
+
prototype: UdpTabPanel;
|
|
6
|
+
new (): UdpTabPanel;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { p as proxyCustomElement, H, h } from './index2.js';
|
|
2
|
+
|
|
3
|
+
const udpTabPanelCss = ":host{display:block}.tab-panel{display:none}.tab-panel.active{display:block}";
|
|
4
|
+
|
|
5
|
+
const UdpTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class UdpTabPanel extends H {
|
|
6
|
+
constructor(registerHost) {
|
|
7
|
+
super();
|
|
8
|
+
if (registerHost !== false) {
|
|
9
|
+
this.__registerHost();
|
|
10
|
+
}
|
|
11
|
+
this.__attachShadow();
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
const isActive = this.value === this.index;
|
|
15
|
+
return (h("div", { key: '735bca81299145233b3e2e017eef05a840b0fb69', class: {
|
|
16
|
+
'tab-panel': true,
|
|
17
|
+
'active': isActive,
|
|
18
|
+
}, role: "tabpanel", "aria-hidden": !isActive ? 'true' : 'false' }, h("slot", { key: '68ad651e93008ca12c4d976ca71747a4f4cf4b39' })));
|
|
19
|
+
}
|
|
20
|
+
static get style() { return udpTabPanelCss; }
|
|
21
|
+
}, [257, "udp-tab-panel", {
|
|
22
|
+
"value": [2],
|
|
23
|
+
"index": [2]
|
|
24
|
+
}]);
|
|
25
|
+
function defineCustomElement$1() {
|
|
26
|
+
if (typeof customElements === "undefined") {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const components = ["udp-tab-panel"];
|
|
30
|
+
components.forEach(tagName => { switch (tagName) {
|
|
31
|
+
case "udp-tab-panel":
|
|
32
|
+
if (!customElements.get(tagName)) {
|
|
33
|
+
customElements.define(tagName, UdpTabPanel$1);
|
|
34
|
+
}
|
|
35
|
+
break;
|
|
36
|
+
} });
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const UdpTabPanel = UdpTabPanel$1;
|
|
40
|
+
const defineCustomElement = defineCustomElement$1;
|
|
41
|
+
|
|
42
|
+
export { UdpTabPanel, defineCustomElement };
|
|
43
|
+
//# sourceMappingURL=udp-tab-panel.js.map
|
|
44
|
+
|
|
45
|
+
//# sourceMappingURL=udp-tab-panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"udp-tab-panel.js","mappings":";;AAAA,MAAM,cAAc,GAAG,8EAA8E;;MCOxFA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IAWtB,MAAM,GAAA;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;QAE1C,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,WAAW,EAAE,IAAI;AACjB,gBAAA,QAAQ,EAAE,QAAQ;AACnB,aAAA,EACD,IAAI,EAAC,UAAU,EAAA,aAAA,EAEF,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAEzC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["UdpTabPanel","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.css?tag=udp-tab-panel&encapsulation=shadow","src/components/my-component/UI/tabs/udp-tab-panel/udp-tab-panel.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.tab-panel {\n display: none;\n}\n\n.tab-panel.active {\n display: block;\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'udp-tab-panel',\n styleUrl: 'udp-tab-panel.css',\n shadow: true,\n})\nexport class UdpTabPanel {\n /**\n * The active tab index, provided by the parent.\n */\n @Prop() value: number;\n\n /**\n * The index this panel corresponds to.\n */\n @Prop() index: number;\n\n render() {\n const isActive = this.value === this.index;\n\n return (\n <div\n class={{\n 'tab-panel': true,\n 'active': isActive,\n }}\n role=\"tabpanel\"\n // Use aria-hidden for accessibility and :host styling\n aria-hidden={!isActive ? 'true' : 'false'}\n >\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './index2.js';
|
|
2
2
|
|
|
3
|
-
const udpTabCss = ".tab-panel{display:none
|
|
3
|
+
const udpTabCss = ".tab-panel{display:none}.tab-panel.active{display:block}";
|
|
4
4
|
|
|
5
5
|
const UdpTab = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
|
|
6
6
|
constructor(registerHost) {
|
|
@@ -34,7 +34,7 @@ const UdpTab = /*@__PURE__*/ proxyCustomElement(class UdpTab extends H {
|
|
|
34
34
|
}
|
|
35
35
|
static get style() { return udpTabCss; }
|
|
36
36
|
}, [260, "udp-tab", {
|
|
37
|
-
"
|
|
37
|
+
"label": [1],
|
|
38
38
|
"active": [516],
|
|
39
39
|
"icon": [1],
|
|
40
40
|
"iconPlacement": [1, "icon-placement"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,
|
|
1
|
+
{"file":"udp-tab2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0DAA0D;;MCM/D,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AAJnB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;AAUE;;;AAGG;AACsB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOhD;;;AAGG;AACK,QAAA,IAAa,CAAA,aAAA,GAAwC,OAAO;AACpE;;;AAGG;AACK,QAAA,IAAM,CAAA,MAAA,GAAa,KAAK;AAEhC;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AASnC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EACvE,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/tabs/tab/udp-tab.css?tag=udp-tab","src/components/my-component/UI/tabs/tab/udp-tab.tsx"],"sourcesContent":[".tab-panel {\n display: none;\n }\n\n .tab-panel.active {\n display: block;\n }\n\n\n","import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'udp-tab',\n styleUrl: 'udp-tab.css',\n})\nexport class UdpTab {\n /**\n * The title of the tab, displayed in the tab-header.\n */\n @Prop() label: string;\n\n /**\n * True if this is the active tab.\n * This is set by the parent <udp-tabs> component.\n */\n @Prop({ reflect: true }) active: boolean = false;\n\n /**\n * Optional icon to display in the tab.\n */\n @Prop() icon?: string;\n\n /**\n * Placement of the icon relative to the title.\n * @default 'start'\n */\n @Prop() iconPlacement?: 'start' | 'end' | 'top' | 'bottom' = 'start';\n /**\n * If true, the tab will be hidden from the tab list.\n * @default false\n */\n @Prop() hidden?: boolean = false;\n\n /**\n * If true, the tab will be unselectable.\n * @default false\n */\n @Prop() disabled?: boolean = false;\n\n render() {\n return (\n <div class={{ 'tab-panel': true, 'active': this.active }} role=\"tabpanel\">\n <slot></slot>\n </div>\n );\n }\n}\n"],"version":3}
|