udp-stencil-component-library 25.18.1-beta.5 → 25.18.1-beta.6

package/dist/components/inputs-example.js

@@ -107,7 +107,7 @@ const InputsExample$1 = /*@__PURE__*/ proxyCustomElement(class InputsExample ext
         };
     }
     render() {
-        return (h("div", { key: '0efd3f4460ea20ff10f2aaf00ca70770237da618', class: "inputs-example" }, h("h1", { key: '006277abe860f17193251d59d60008947ca2bf77' }, "Input Components Examples"), h("section", { key: '252130c2af84ca1c16251db183209c1651d3ca71', class: "example-section" }, h("h2", { key: '589f7b01a7de725ace061f317bb054c99f278c18' }, "Controlled Components"), h("p", { key: '5275e91ce1928c7db447882ecc648069870b93e4' }, "Parent component manages state and passes values to child components."), h("div", { key: '551f424a12c6dc3bcc141ea0cc6c7a0b3be0c96d', class: "input-grid" }, h("div", { key: '55de1d2ad83636052b2a5f49544f3c416eb969b6', class: "input-example" }, h("h3", { key: '5d8184f1650a3f13cba35ba894a3fb68ed5f943b' }, "Text Field"), h("text-field", { key: '8bd05080a978920bde77bccffc53368e26369d22', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '9f931a1a2e6a94f879d440902fc1ce304337b3a1', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '3a71f26e7ef8b27ef987fab993f9f68d8a74dd25', class: "input-example" }, h("h3", { key: '3c4869186abcf344b1f098092ec75c7084fa28e0' }, "Numeric Field"), h("numeric-field", { key: '4a94e0557e2524b918b9b9c712758b8b2705078d', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '26344fd447d79233dd3d176fad21b4d736325475', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: '2c35fe41a275c18c18e4340e00589d95c9240af0', class: "input-example" }, h("h3", { key: '8a7ac8119188ba1d0681196d7207147eb76501d2' }, "Text Area"), h("text-area", { key: 'fb554b6b21bb51901013981d3b2bd9360839dce9', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '5622e978387b0a8c31b24173f4839b2d9b9a088b', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'd957c4002d97bd3cee3fca6e734260098504ecb0', class: "input-example" }, h("h3", { key: 'a51d7312e52943c3b21e2d99881b73e7858ef36e' }, "Checkbox"), h("check-box", { key: 'a76b891c6ec232a20f3ba7053db0cf02e48831c9', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '54866fd5d3b00875f5b763a80cc78556b2d719fd', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: '4d4ce6273c9f75b95a27fd60c10c8c1bfbc6dde5', class: "input-example" }, h("h3", { key: 'cdce4e97bb3577a77509fa9c7ef28c65a1056992' }, "Toggle"), h("stencil-toggle", { key: 'bb9c014216ec1d4573f03fed25cc82344baac92e', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '1019191b0934529d856bf4f4114c5733fd01424b', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '95ed43eede6b66422a906c4a5c055c956bf537f1', class: "input-example" }, h("h3", { key: '6b0c3368be18c6c328572b027ccfc08006c3e4ef' }, "Date Selector"), h("udp-date-selector", { key: '45a9903e034e034add2500f4374cebb9b098cffc', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '25b075ba6a748e19cf060258947d1b69b0865e9a', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '041b10ba312b9c0b595201687e034e169e8c502b', class: "input-example" }, h("h3", { key: '8df015893dc9d297c8fdd1acb2673c3541637c94' }, "DateTime Selector"), h("udp-datetime-selector", { key: '562e3908a61c3739732b51bf9711426b89bcaef0', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: 'e46ad5ca14b6038d5f2470fba4f5ccf6bac23a5c', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '7d1a01e4d73932cfc26c9782bd19388e4650971e', class: "input-example" }, h("h3", { key: '76e4b9a5dde26015293c54f06ea84cae0408c630' }, "Time Selector"), h("udp-time-selector", { key: 'f5ceb2da3facc5f268da85891e1f3b0bd5e8b061', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '8e061f37c0a0ecd7eba9496a9a441cc2d0397e18', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: 'eb8d7f5e9d6e11eda3fa33f4c35671c8146816ed', class: "input-example" }, h("h3", { key: 'bc4f419f561d4ea816331ce4e922fc7e7ce25b18' }, "UDP Selector"), h("udp-selector", { key: 'c6a2153a88b7470d799bf9ef1df6c858f19dc78d', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '7a653cec33c7202ea2468eaad37da12746f11d82', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '9a4836a07e6f0f9c69d9e76515003ea993411ec4', class: "input-example" }, h("h3", { key: 'fc06320104a8d51ca49638933371a77083ac20bf' }, "File Upload"), h("file-upload", { key: '2821b6f36940ddc513dd89e233f4afb6a98b07d2', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '823341c790042bf0a2df0fde691eb715478f86d9', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '400893e3266665c8a63a286ddaad6bb64ad9efd6', class: "example-section" }, h("h2", { key: 'a11bc8c2ea72e3394a32ef537f064d1d027b7567' }, "Uncontrolled Components"), h("p", { key: '6faec1e2ceb7d17c4f7e21226dc0ffdeed3ae039' }, "Components manage their own state with initial values."), h("div", { key: '72b6fc67bfcae5d60b41d87a8dbcafb9fd4bc982', class: "input-grid" }, h("div", { key: '0e5d40d18c610b8dcdc8c90944892d8179b726e3', class: "input-example" }, h("h3", { key: '3f01b543c41d0dc276caaeb67be4e66a39dded4e' }, "Text Field"), h("text-field", { key: 'f9c7ca2d4b98af3fb67f3ae74d7e936d87ef9c3c', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '55db82562b3c1e5371784f4aa052741e5edf9607', class: "input-example" }, h("h3", { key: 'bd8b8ab64beb7523966d21e0cacd5afa60f3105a' }, "Numeric Field"), h("numeric-field", { key: '116da3d99fe20151b37e77068dce0f2cb9ae0917', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: 'fdddde6cdf4ff4285fa067720be6925cdc1e3830', class: "input-example" }, h("h3", { key: '40acfb74b91565f64072dbe13975d96c945b5a8e' }, "Text Area"), h("text-area", { key: '7d0da30788f2b76c50767296a4de85691c83c170', 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: '3f843afb917770a01e6291f50f20fac007821e0a', class: "input-example" }, h("h3", { key: '6ad479fa8bd9cee5dc5f67aecfd6018a27953877' }, "Checkbox"), h("check-box", { key: '0ad746a68cbdae97e953073bea1dfc4574b1da43', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: '5c2d036874db447f8cf058a5a511e0272bedc1a7', class: "input-example" }, h("h3", { key: 'dac3a19d667510cd27cc55ff5e466a1f4469e007' }, "Toggle"), h("stencil-toggle", { key: '90603832ed57ea3fa5b0a7115868343003d1d084', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '49af9584417e30c4c82821eb5d0261a45577c83e', class: "input-example" }, h("h3", { key: 'ed380270ff7aa432c482c5d3f9239982c1222776' }, "Date Selector"), h("udp-date-selector", { key: '5ff1824a24a6c89939218c2283ca80f399b90198', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: 'bd352b08b5a9249939748f6a93aa4ead16d8db6a', class: "input-example" }, h("h3", { key: '0962ed467ab9357aa073d222f33d5eeb11c892d5' }, "Time Selector"), h("udp-time-selector", { key: '4a7bfb3d1f6c6a118034c0bddff26978f5836c1d', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: '748568382a7d6144b2e0d878b06d46eaa82977ac', class: "input-example" }, h("h3", { key: '0750049de540a9a0d659af161e1b14d3f294eb40' }, "DateTime Selector"), h("udp-datetime-selector", { key: '778a0408dd43ea048171596a4eb0de6353a470ff', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: '593afaf38ef12585cf35998f6684590e683872f5', class: "input-example" }, h("h3", { key: '1cfe0ba353fee26bfd2216b1da8a297aebfb83fb' }, "UDP Selector"), h("udp-selector", { key: '5b0a4ed94f3998482572fd9351544e03f3ddd964', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '8cdecea2dff7eeacae58ef8a00f28fe1ae0be3ca', class: "example-section" }, h("h2", { key: '85929c1cc99ba5379c49ba6479df2e3f17d4c7dc' }, "Form-wrapped Components"), h("p", { key: '0596694a262ab286ac612339279df96b391e4104' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '0cad6aef3d8738a1bf4b2d944152e591fa185b08', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
+        return (h("div", { key: '568318c42e44cab4a6a750a4c5819953328887dd', class: "inputs-example" }, h("h1", { key: '5637becd6a248192914e63c9c6e8dfc3714f3a15' }, "Input Components Examples"), h("section", { key: 'e9dc7d661c548210421400385a404b952d9f1956', class: "example-section" }, h("h2", { key: '1577a2c0eae0bcaa0bbfefea1bf186403162c407' }, "Controlled Components"), h("p", { key: '3c98d8f5a0c50d3180edf77c89b14b58df9f5d7c' }, "Parent component manages state and passes values to child components."), h("div", { key: '93c0227504b3e7b41fa17674883796401951f7e0', class: "input-grid" }, h("div", { key: '299b926df1c5146758d10ad3ffc9400b9ee45539', class: "input-example" }, h("h3", { key: 'f20a59ab4a449e86c9c2608819bdb548437a361a' }, "Text Field"), h("text-field", { key: '8d73d9be252b05655a321a25a1faf13d51087158', label: "Controlled Text Input", placeholder: "Enter text...", value: this.controlledTextValue }), h("p", { key: '74ebcbc54fb2892e31709485bf4ec754fbcf0838', class: "value-display" }, "Value: ", this.controlledTextValue)), h("div", { key: '572728243b33fae1872160456ea22230450f98d0', class: "input-example" }, h("h3", { key: 'd82edbf3ddca5e0ea1cba3a335c7bc7b0bf47e37' }, "Numeric Field"), h("numeric-field", { key: '54c858e75aaea42ef52580f31e89e6cfb2872e58', label: "Controlled Numeric Input", placeholder: "Enter number...", value: this.controlledNumericValue, min: "0", max: "100", step: "1", onChange: this.handleControlledNumericChange }), h("p", { key: '0fb607f8d5d2890c9d777792ec86eaf47aa8d467', class: "value-display" }, "Value: ", this.controlledNumericValue)), h("div", { key: 'a7f8e537d6c769129a66d98ad88306ebcda48da6', class: "input-example" }, h("h3", { key: '43cac26cb5a7c97e81d6cb079c853df67b93bc32' }, "Text Area"), h("text-area", { key: 'bf6fa1b6edc51798d6db4c8261c3114b62f922e1', label: "Controlled Text Area", placeholder: "Enter description...", value: this.controlledTextAreaValue, minRows: 3, maxRows: 6 }), h("p", { key: '4eab773e3ff0faec1bed1b7f06437fc44b370f70', class: "value-display" }, "Value: ", this.controlledTextAreaValue)), h("div", { key: 'b046957511aead089862c702264ba0e742f1b68d', class: "input-example" }, h("h3", { key: 'ff62fc57987c3bdbd727bce422df26c4d3bbda8a' }, "Checkbox"), h("check-box", { key: '4b4fe082b6215c11575f5cabc385ef45ca4e7bd6', label: "Controlled Checkbox", checked: this.controlledCheckboxValue, onChange: this.handleControlledCheckboxChange }), h("p", { key: '4c65f141f2a8a7477205f6084d69200346bb0755', class: "value-display" }, "Checked: ", this.controlledCheckboxValue.toString())), h("div", { key: 'a48006413538b9981670434ae6c944e7e58271f9', class: "input-example" }, h("h3", { key: '45383efba3e427ff11d43044fa01e57ed471fdc5' }, "Toggle"), h("stencil-toggle", { key: '44848de53876d025aec88a2860eb9e60b579f568', label: "Controlled Toggle", checked: this.controlledToggleValue, onChange: this.handleControlledToggleChange }), h("p", { key: '3d629c545ba9202e853093ee999ce4eec10601f6', class: "value-display" }, "Toggled: ", this.controlledToggleValue.toString())), h("div", { key: '4241e9b1fd8664e728d04f3b17ce76b08ccce7b8', class: "input-example" }, h("h3", { key: 'd83a696d7301047672071daa973056c379aa174c' }, "Date Selector"), h("udp-date-selector", { key: 'd1fdf59f30ad9b4640f614078f718e2e37957f50', label: "Controlled Date", value: this.controlledDateValue, onChange: this.handleControlledDateChange }), h("p", { key: '109f4a7821a45bb4f9e63807db0f456d71bb79e5', class: "value-display" }, "Date: ", this.controlledDateValue)), h("div", { key: '38844d4720ddc7c7ffcf3611ec264aaf82771ef9', class: "input-example" }, h("h3", { key: '40479e7e8704d9672a55642806d5d9adf76ad5b5' }, "DateTime Selector"), h("udp-datetime-selector", { key: '88028b3e9499217f4df97f5fc6186891bcd95b18', label: "Controlled DateTime", value: this.controlledDateTimeValue, onChange: this.handleControlledDateTimeChange }), h("p", { key: '41f26787189f9e38213ab5c12d5e23090e4b73fc', class: "value-display" }, "DateTime: ", this.controlledDateTimeValue)), h("div", { key: '72d82de355d314169aa1786dba5e314a4a3c2780', class: "input-example" }, h("h3", { key: '13d248566f080175992873afbce91e0776425351' }, "Time Selector"), h("udp-time-selector", { key: '4eef41d123a13fed720ddb5d6f1ff502d12b3382', label: "Controlled Time", value: this.controlledTimeValue, onChange: this.handleControlledTimeChange }), h("p", { key: '09b646081621e5bbc0ea04e1a6082e2aeecb8ce2', class: "value-display" }, "Time: ", this.controlledTimeValue)), h("div", { key: 'ebed47a9e2ff7fe2f88726c433e2b9a581dbac2c', class: "input-example" }, h("h3", { key: '9a294a5894d1e29b036bc6b773acad0091a7b98b' }, "UDP Selector"), h("udp-selector", { key: 'd3a6adf65d0d4a93677b2fa887fda79c726ef819', label: "Controlled Selector", options: this.selectorOptions, value: this.controlledSelectorValue, onChange: this.handleControlledSelectorChange }), h("p", { key: '68a33dabe7906580dbc91deab34595aaa6439903', class: "value-display" }, "Selected: ", this.controlledSelectorValue)), h("div", { key: '3319c740db491c5eb68011418cac7c7c8551123c', class: "input-example" }, h("h3", { key: 'e6d760ebd7e941267da381e1b763d4529a0940ea' }, "File Upload"), h("file-upload", { key: 'a1726d26e4d3de052646de14cd9fdaf4d6cc2a34', label: "Controlled File Upload", allowMultiple: true, onChange: this.handleControlledFileChange }), h("p", { key: '286df59dbec522a45bb0498b0274c9d5b60da51d', class: "value-display" }, "Files: ", this.controlledFileValue.length, " selected")))), h("section", { key: '92e1995b075a1d6a8b08d7121df729b676e0f254', class: "example-section" }, h("h2", { key: '99b8b95638ee6289736fe31c9f92de4fc915ab66' }, "Uncontrolled Components"), h("p", { key: 'ce0ec4155a0d4e0c578cf310a36054b898046e12' }, "Components manage their own state with initial values."), h("div", { key: 'b6be0f3f1de8e43d7d2e3176c9bd0fa80fe41839', class: "input-grid" }, h("div", { key: 'f863c9c473e10a46118792f3b1d4f90c0468f312', class: "input-example" }, h("h3", { key: '76c13a12b2cf46b786a5c6fd6e7ab09a114422ce' }, "Text Field"), h("text-field", { key: '2f002aa2965ba1592614e19cdaf41685eff27a74', label: "Uncontrolled Text Input", placeholder: "Enter text...", initialValue: "Initial text value", onChange: (e) => console.log('Text changed:', e.detail) })), h("div", { key: '7a72540333aa14e138b0776a037c9499218b48a1', class: "input-example" }, h("h3", { key: 'fe756740f658a568b6b025f801472c88d5a2ff69' }, "Numeric Field"), h("numeric-field", { key: '5602a4cfb1439d79b323e7e990c77701fad43c1e', label: "Uncontrolled Numeric Input", placeholder: "Enter number...", initialValue: "42", min: "0", max: "100", onChange: (e) => console.log('Number changed:', e.detail) })), h("div", { key: '8b01079941128dc419490ae9268f3de12f64bbec', class: "input-example" }, h("h3", { key: 'f3bb19ebe3f1eb7860c8670fa05e56100083100c' }, "Text Area"), h("text-area", { key: '77b84fd065898b3f53b4f29d49175ca69d0e9a0c', label: "Uncontrolled Text Area", placeholder: "Enter description...", initialValue: "Initial description text", minRows: 3, onChange: (e) => console.log('Text area changed:', e.detail) })), h("div", { key: '18108e76b0d3cba4d17cb240d991e557e45a4cf0', class: "input-example" }, h("h3", { key: 'd7a8665af975ccfc51fdd6637c65cf090b3e64ee' }, "Checkbox"), h("check-box", { key: '51c64943d73cae575b8354e63a723ce42a4da7a8', label: "Uncontrolled Checkbox", initialValue: "true", onChange: (e) => console.log('Checkbox changed:', e.detail) })), h("div", { key: 'd850416de27eb55f014f91245ab38658f645ec5e', class: "input-example" }, h("h3", { key: '1181811e2e29035b7ebdca214c77fe6994f0f85a' }, "Toggle"), h("stencil-toggle", { key: 'f1f911a89e6a325fa136cfef4a8706bf6f7ca0bf', label: "Uncontrolled Toggle", initialValue: "false", onChange: (e) => console.log('Toggle changed:', e.detail) })), h("div", { key: '78138f2afb3865b8b726c871d5b66c0a765fdc3b', class: "input-example" }, h("h3", { key: '737ebb728f6dc1c3667ee4797470f2b4253ac531' }, "Date Selector"), h("udp-date-selector", { key: '46794fcb28892c784028b112e23017f68688fe71', label: "Uncontrolled Date", initialValue: "2024-01-15", onChange: (e) => console.log('Date changed:', e.detail) })), h("div", { key: '7d4321f22573a578f3c97f42ff909c8dba89c239', class: "input-example" }, h("h3", { key: 'f5bea7039842c10d1d18c12dbf148a7e4406aaf0' }, "Time Selector"), h("udp-time-selector", { key: '59bc40ac5ff2cb5ce2d5cac649456761e4acd024', label: "Uncontrolled Time", initialValue: "14:30", onChange: (e) => console.log('Time changed:', e.detail) })), h("div", { key: 'd38663af248b165fd945b435d139645778dd15a6', class: "input-example" }, h("h3", { key: '4a71a7d7ab4fc85b882a7ad510f106ef8af845e2' }, "DateTime Selector"), h("udp-datetime-selector", { key: '0e50bb043a1e29c1b1196099182f2cfbe4d5780e', label: "Uncontrolled DateTime", initialValue: "2024-01-15T14:30", onChange: (e) => console.log('DateTime changed:', e.detail) })), h("div", { key: 'b0018485ce72a2e345e4324df645c167d605e270', class: "input-example" }, h("h3", { key: 'a476c75bee67f99b8190c2eee40bcf3f3681e0f5' }, "UDP Selector"), h("udp-selector", { key: '8734d212c8e57b566331ce9a5a3658673979e496', label: "Uncontrolled Selector", options: this.selectorOptions, initialValue: "option2", onChange: (e) => console.log('Selector changed:', e.detail) })))), h("section", { key: '182dc382da022fea80addb395b7e73d0e686db75', class: "example-section" }, h("h2", { key: '0e74791316e43917b64aa88437d3195c7e01d518' }, "Form-wrapped Components"), h("p", { key: '22f0b0ad471b5a64e6f1e2dd560c4591381deb1d' }, "Components integrated with stencil-form and stencil-field for validation and state management."), h("stencil-form", { key: '7d6510a9ac5a7f4b3ff67d6e23d6a61a803cfefa', handleSubmit: this.handleFormSubmit, handleChange: this.handleFormChange, handleValidate: this.validateForm, initialValues: {
                 formTextField: 'Initial form text',
                 formNumericField: '25',
                 formTextArea: 'Initial form description',
@@ -116,7 +116,7 @@ const InputsExample$1 = /*@__PURE__*/ proxyCustomElement(class InputsExample ext
                 formDate: '2024-02-01',
                 formTime: '09:00',
                 formSelector: 'option1'
-            } }, h("div", { key: 'efcf2196b2603a552bfedd3591b3ca6b1b5a71f1', class: "form-grid" }, h("stencil-field", { key: '5231c6f402747272e1e89b26d110ff86f0aa7a3b', name: "formTextField" }, h("text-field", { key: 'c8e245f52997e27f27f93454ab24cbff224cc583', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: 'ca91becfc791148116d60d0e905b1a3daa5b9db3', name: "formNumericField" }, h("numeric-field", { key: '44347c0895f0f8b501a421cf761cadacd0932c6f', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: 'c7b4b216d3106c9af75392e54725e8a21f8ca3b3', name: "formTextArea" }, h("text-area", { key: '9de49a3341b5987f0bde64ce14c3ebc7e88cc74a', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: '56d39f44ea989beed99ad8d7c5bdd645e5c817aa', name: "formCheckbox" }, h("check-box", { key: 'ef7c6aafba7e06b2774088c4f5ac98edbf367a7c', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '54e05f275558330b2c37afa140a8f6926e726180', name: "formToggle" }, h("stencil-toggle", { key: '8c8b1925bd17463429b5badcac307857bc84cec2', label: "Enable Notifications" })), h("stencil-field", { key: '1415837b1d0fa0e092fc40b40929b87cddf47410', name: "formDate" }, h("udp-date-selector", { key: '9ebbe59d298c8648c10b9e7f6ed39de46715b6b2', label: "Form Date", required: true })), h("stencil-field", { key: 'f48570db700715597bf2e45fd9c2892d023e6897', name: "formTime" }, h("udp-time-selector", { key: 'edbdbff32cc3c225ed56c3b94c613005dfdcde39', label: "Form Time" })), h("stencil-field", { key: '8437d71e061aa088e4cba83225a521c44a4ca3d2', name: "formSelector" }, h("udp-selector", { key: '6d1983d097f69466060cd3278d6ec58e220e8d77', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: '41ab83071b303dfd1c8763a46895c792344a0f1e', name: "formFiles" }, h("file-upload", { key: '7d9a05439319655c232bd27ab6961c1f6db8d883', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'ca241b12f04441dbf884d57d13e84f0dbccb7f65', class: "form-actions" }, h("button", { key: '9ab10fa33f12f8c376e95c97732b40717dd2b0b5', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '0c80c817538bd6bd0f00c6197cb3c2793daaf910', class: "form-values" }, h("h3", { key: 'dfd5d67e510aa606c99450d4f4f08342a0661319' }, "Current Form Values:"), h("pre", { key: 'a10e287b7066a43cc69130830ded4da6aa0c1556' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: 'd099ca8f995aa1f7262af5338873bf94754811f3', class: "example-section" }, h("h2", { key: '7cb065039260f3e516133e32d6253240aece1a35' }, "Additional Examples"), h("p", { key: '62617e685432dde1d659eca861b554f064ec24fa' }, "More complex configurations and specialized use cases."), h("div", { key: 'c533b992028051734003b0be0bd5d0985806358a', class: "input-grid" }, h("div", { key: 'fce996f18ec7e4bc7f159047c97fd1066f45a8a9', class: "input-example" }, h("h3", { key: 'c94a1ba5d9cd5156cfd7ef1f4015a057d710e0a5' }, "Multi-Select UDP Selector"), h("udp-selector", { key: '53b28993b382889d27919e3a7d9405a5fd32aaf8', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: 'ce2255624cb7db841d30dda4cca5af6f1024cd7d', class: "input-example" }, h("h3", { key: '69d19bcd69cf2bebff41c872eb582a32a594900a' }, "Large UDP Selector"), h("udp-selector", { key: '559044cb64b37d8e08effe91bb1950990085e82b', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '0947306acbc6628996b3ad444fe0b2849590bb3b', class: "input-example" }, h("h3", { key: 'da9050afe5f7be2d078fcf3d5f7e0987cc26cda5' }, "File Upload with Type Restrictions"), h("file-upload", { key: '3f57ad462161a807e56cba39d3b68f8cb287e851', 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: '16217dff92f04c11145583b6c3879828bb63de18', class: "input-example" }, h("h3", { key: 'ad5625e7ffb1ef843f8831be4e4a5b65be32ba76' }, "Disabled Components"), h("div", { key: '22f9b761b49d601000d39a64ea698115ded20a17', class: "disabled-examples" }, h("text-field", { key: '35b8b2c6e57f555633c523a09db515666af3178f', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '73df91016a0cecb031e4d6b4c82b7b8bbd320589', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '42cd089facfb8bd98e2ec5419ff5d32d18055bb7', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
+            } }, h("div", { key: '4c3acd2264ca5a61bbf40917e742d55be678c5da', class: "form-grid" }, h("stencil-field", { key: 'b4ca78596d2aef8cc0f2c5a85adfa8df147f9bef', name: "formTextField" }, h("text-field", { key: '2728029a47760daa7a67d4144b6c1647e2934dd7', label: "Form Text Field", placeholder: "Enter text...", required: true })), h("stencil-field", { key: '28a17c16e33499b7ec208cc0459e075ec5a76c9b', name: "formNumericField" }, h("numeric-field", { key: '7c6edb230784665a312c82901bda77fc876697a1', label: "Form Numeric Field", placeholder: "Enter number...", min: "0", max: "100", required: true })), h("stencil-field", { key: 'eb5947f21056c3cbbc53d063340527d8dae96365', name: "formTextArea" }, h("text-area", { key: '760c3553c309f2c132179d4bc6323fc6492c3837', label: "Form Text Area", placeholder: "Enter description...", required: true, minRows: 3 })), h("stencil-field", { key: 'e31f53fbbce59a7d49fa99f321888bc874b01972', name: "formCheckbox" }, h("check-box", { key: '3771e81b0f4430f9cca07f1457ec0b75f1031eff', label: "Accept Terms and Conditions", required: true })), h("stencil-field", { key: '9ca02ff8c5c067a3288ce13bcb9347359f9195f3', name: "formToggle" }, h("stencil-toggle", { key: '10f7bde9a8edde29d638a5592787c415654e6368', label: "Enable Notifications" })), h("stencil-field", { key: 'd30d821fedd9f94a5c816203522db312e5861bc6', name: "formDate" }, h("udp-date-selector", { key: 'e73f814ec0bc86dbd3538af31306c797479c476d', label: "Form Date", required: true })), h("stencil-field", { key: 'f8180949e6d0c3aec19b0c4b206f004f9aa2e258', name: "formTime" }, h("udp-time-selector", { key: '59c0e0bbcec7e0c59f7bfe43d4571507926d08f5', label: "Form Time" })), h("stencil-field", { key: 'ddb1f59940d2ffb2cdd02ddd64593be6923bf4b7', name: "formSelector" }, h("udp-selector", { key: '09e82dda4fe421b68b12848ac162240104e4dd6a', label: "Form Selector", options: this.selectorOptions, required: true })), h("stencil-field", { key: 'b836ed682cb45ec90b78821cb82f10ca5ea676c3', name: "formFiles" }, h("file-upload", { key: 'a8337a623851b31c4acf2f294828ed9ec76b4739', label: "Form File Upload", allowMultiple: true }))), h("div", { key: 'e6b81aecf417b8077197a2925a57275eb2407764', class: "form-actions" }, h("button", { key: 'bc47fe7038b8f224745ae1ce101da82e5772b4b3', type: "submit", class: "submit-button" }, "Submit Form"))), h("div", { key: '752745e88a81808a7874bea7dcf13070d964761f', class: "form-values" }, h("h3", { key: 'ba70a02c4f3c4c5840e89dce5c8333e3f98027e6' }, "Current Form Values:"), h("pre", { key: '5bfc90a17f885e7e41b47e73eaf2a0d01ba8e9e2' }, JSON.stringify(this.formValues, null, 2)))), h("section", { key: '1778db0713a491b61b75293f6ee57b90c6fecf20', class: "example-section" }, h("h2", { key: '94d8d772e3f49e0cbc43796f67505f01494ba890' }, "Additional Examples"), h("p", { key: 'ef4ce8b2bebb9fa6a94b965066fe2b7d6703e96f' }, "More complex configurations and specialized use cases."), h("div", { key: 'f45dd83e6894913b7cc22da8730f3bc9abada5a5', class: "input-grid" }, h("div", { key: '92c270c05d1747340f2cb2b6a0bce7adade5baef', class: "input-example" }, h("h3", { key: '3ff494f9ccd9f1df461927f4b58d39c71e07171d' }, "Multi-Select UDP Selector"), h("udp-selector", { key: 'f9d5d28836a2a0e0694775655f07f2cd1b17cd06', label: "Multi-Select Selector", options: this.selectorOptions, multiSelect: true, initialValue: "option1,option3", onChange: (e) => console.log('Multi-select changed:', e.detail) })), h("div", { key: 'cdc145e98cf83ae5ff4a5b1599eb0ac5c5cfe04a', class: "input-example" }, h("h3", { key: 'c8321fbcb13460216d415b6f6086c01fc837faf9' }, "Large UDP Selector"), h("udp-selector", { key: '30daad81514fcbc8cd1ae7b8ca4ebe57f19b33b0', label: "Large Selector", options: this.selectorOptions, large: true, initialValue: "option2", onChange: (e) => console.log('Large selector changed:', e.detail) })), h("div", { key: '7d703caa09925ac7221296422c6bfe7415187646', class: "input-example" }, h("h3", { key: '7a7b5e085594c15dc11bb01e786e18c4edafbd64' }, "File Upload with Type Restrictions"), h("file-upload", { key: 'e2941cb3e03bc86696bbce3146b77fd5a311e6c6', 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: '216b5c93bb960345ac62770a8bda5c85c527f1fa', class: "input-example" }, h("h3", { key: '91faff234095fdbf962c39b8101c1d2e89f0f8d3' }, "Disabled Components"), h("div", { key: 'f1b1e093a0cebf1999d5c2332ca95fe7748b9d6a', class: "disabled-examples" }, h("text-field", { key: '225dca34033c0b6c3dd86461cb8b2e64cee24a2b', label: "Disabled Text Field", value: "Cannot edit this", disabled: true }), h("check-box", { key: '64dcf3f40a5b1abe44fb32a29059469c89128bba', label: "Disabled Checkbox", checked: true, disabled: true }), h("udp-selector", { key: '86827b73670a641b2eba08196c54f2051a696911', label: "Disabled Selector", options: this.selectorOptions, value: "option1", disabled: true })))))));
     }
     static get style() { return inputsExampleCss; }
 }, [257, "inputs-example", {

package/dist/components/page-renderer.js

@@ -60,7 +60,7 @@ const PageRenderer$1 = /*@__PURE__*/ proxyCustomElement(class PageRenderer exten
         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!")));
     }
     render() {
-        return (h("div", { key: '1c24e76c6dc3ff76df88d2203d6b5bf762d6b20f' }, this.pageData.map((data) => {
+        return (h("div", { key: '7300d352c088dfd4796240bddf641f3491fc0e3d' }, this.pageData.map((data) => {
             // Prepare properties from metaData, ensuring any existing keys that
             // match your direct props are overridden.
             const gridProps = Object.assign(Object.assign({}, data.properties), {

package/dist/components/primary-action-header2.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
-import { i as iconMapping } from './iconMapping.js';
-import { d as defineCustomElement$6 } from './stencil-icon-button2.js';
-import { d as defineCustomElement$5 } from './udp-ambient-tool-tip2.js';
-import { d as defineCustomElement$4 } from './udp-badge2.js';
-import { d as defineCustomElement$3 } from './udp-button2.js';
+import { i as iconMapping, d as defineCustomElement$3 } from './udp-icon2.js';
+import { d as defineCustomElement$7 } from './stencil-icon-button2.js';
+import { d as defineCustomElement$6 } from './udp-ambient-tool-tip2.js';
+import { d as defineCustomElement$5 } from './udp-badge2.js';
+import { d as defineCustomElement$4 } from './udp-button2.js';
 import { d as defineCustomElement$2 } from './udp-tabs2.js';
 import { d as defineCustomElement$1 } from './unity-typography2.js';
 
@@ -89,7 +89,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["primary-action-header", "stencil-icon-button", "udp-ambient-tool-tip", "udp-badge", "udp-button", "udp-tabs", "unity-typography"];
+    const components = ["primary-action-header", "stencil-icon-button", "udp-ambient-tool-tip", "udp-badge", "udp-button", "udp-icon", "udp-tabs", "unity-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "primary-action-header":
             if (!customElements.get(tagName)) {
@@ -98,20 +98,25 @@ function defineCustomElement() {
             break;
         case "stencil-icon-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "udp-ambient-tool-tip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "udp-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "udp-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "udp-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/primary-action-header2.js.map

@@ -1 +1 @@
-{"file":"primary-action-header2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/primary-action-header/primary-action-header.css?tag=primary-action-header&encapsulation=shadow","src/components/my-component/UI/data-display/primary-action-header/primary-action-header.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n:host {\n  display: block;\n  font-family: var(--font-family-base, sans-serif); \n  background-color: var(--primary-action-header-background, #ffffff);\n  color: var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));\n  box-shadow: var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));\n  height: var(--primary-action-header-height, 48px);\n  padding: var(--primary-action-header-padding, 0 var(--spacing-04));\n  box-sizing: border-box;\n}\n\n.header-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.title-section {\n  flex-shrink: 0;\n  margin-right: var(--spacing-md, 16px);\n}\n\n/* Tabs are not fully supported yet - this is leftover from work Greg did with Mindscope */\n.tabs {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  min-width: 0;\n}\n\n.tabs udp-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.tabs udp-tabs::part(tab-list) {\n  /* This rule targets the 'tab-list' part within the udp-tabs component's shadow DOM. */\n  /* It's a placeholder for any specific styling needed for the tab list container itself. */\n  /* For example: display: flex; align-items: stretch; height: 100%; */\n}\n\n.tabs udp-tabs button {\n  padding: 0 16px;\n  margin: 0 var(--spacing-xxs, 4px);\n  height: 100%;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-color-secondary, rgba(0, 0, 0, 0.6));\n  text-transform: uppercase;\n  font-weight: var(--font-weight-medium, 500);\n  border-bottom: 2px solid transparent;\n  transition: color 0.3s ease, border-bottom-color 0.3s ease;\n}\n\n.tabs udp-tabs button:hover {\n  color: var(--primary-color-hover, var(--primary-color, #1976d2));\n}\n\n.tabs udp-tabs button.active {\n  color: var(--primary-color, #1976d2);\n  border-bottom: 2px solid var(--primary-color, #1976d2);\n}\n\n.button-section {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--spacing-sm, 8px);\n}\n\n.button-section stencil-icon-button {\n  color: var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)));\n}\n\n.button-section stencil-icon-button:hover {\n  background-color: rgba(0,0,0,0.04);\n}\n\n\n.button-section custom-button {\n  /* Styles for the primary action button */\n  /* You might want to use your design system's button styles here */\n  /* Example: margin-left: var(--spacing-sm, 8px); */\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport iconMapping from '../icons/iconMapping';\n\n@Component({\n  tag: 'primary-action-header',\n  styleUrl: 'primary-action-header.css',\n  shadow: true,\n})\nexport class PrimaryActionHeader {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() defaultActionButtons: any[] = [];\n  @Prop() customSaveViewClick?: (event?: MouseEvent) => void;\n  @Prop() customSizeToFitClick?: (event?: MouseEvent) => void;\n  @Prop() customExportClick?: (event?: MouseEvent) => void;\n  @Prop() primaryActionClick?: (event?: MouseEvent) => void;\n  @Prop() customColumnViewClick?: (event?: MouseEvent) => void;\n  @Prop() customFitColumnClick?: (event?: MouseEvent) => void;\n  @Prop() customFilterViewClick?: (event?: MouseEvent) => void;\n  @Prop() customClearClick?: (event?: MouseEvent) => void;\n  @Prop() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() activeTabIndex: number;\n  @Prop() selectTab: (index: number) => void;\n  @Prop() tabs: boolean = true;\n  @Prop() actionButtonLabel: string = '';\n  //   @State() activeTabIndex: number = 0;\n\n  getIconComponent(icon: string | Function, customIcon: Function) {\n    if (customIcon) {\n      return customIcon;\n    }\n\n    if (typeof icon === 'string') {\n      return iconMapping[icon];\n    }\n\n    return icon;\n  }\n\n  renderIcon(ActualIcon: any) {\n    if (ActualIcon && ActualIcon.elem === 'svg') {\n      return (\n        <svg {...ActualIcon.attrs}>\n          {ActualIcon.content.map((content: any, index: number) => {\n            return <path key={index} {...content.attrs} />;\n          })}\n        </svg>\n      );\n    }\n    return null;\n  }\n\n  //   selectTab(index: number) {\n  //     this.activeTabIndex = index;\n  //   }\n\n  render() {\n    console.log('active tab', this.activeTabIndex);\n\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <unity-typography variant=\"h4\">{this.title}</unity-typography>\n        </div>\n\n        {/* IMPORTANT: NEED TO ADD A TABS COMPONENT SUPPORT - This is from work Greg did for mindscope demo */}\n        {this.tabs && (\n          <div class=\"tabs\">\n            <udp-tabs>\n              <button class={this.activeTabIndex === 0 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(0)}>\n                Demo Grid\n              </button>\n              <button class={this.activeTabIndex === 1 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(1)}>\n                Other Content\n              </button>\n            </udp-tabs>\n          </div>\n        )}\n\n        <div class=\"button-section\">\n          {this.defaultActionButtons.map(btn => {\n            // Determine the actual icon to use\n            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);\n\n            const clickHandler = (event?: MouseEvent) => {\n              if (btn.clickHandler) {\n                btn.clickHandler(event);\n              } else {\n                console.log(`${btn.label} Clicked but no custom handler defined`);\n              }\n            };\n\n            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {\n              return (\n                <stencil-icon-button secondary={btn.secondary} onClick={clickHandler} tooltip={btn.tooltip}>\n                  {/* Render icon directly */}\n                  {this.renderIcon(ActualIcon)}\n\n                  {/* Show label if it's not hidden and should be shown */}\n                  {!this.hiddenLabels.includes(btn.label) && btn.showLabel && <span>{btn.label}</span>}\n                </stencil-icon-button>\n              );\n            }\n            return null;\n          })}\n          {!this.actionButtonLabel && <div class=\"right-margin\" />}\n\n          {this.actionButtonLabel && (\n            <udp-button variant=\"contained\" color=\"secondary\" onClick={event => this.primaryActionClick(event)}>\n              {this.actionButtonLabel}\n            </udp-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"primary-action-header2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/primary-action-header/primary-action-header.css?tag=primary-action-header&encapsulation=shadow","src/components/my-component/UI/data-display/primary-action-header/primary-action-header.tsx"],"sourcesContent":["/* grid-primary-bar.css */\n:host {\n  display: block;\n  font-family: var(--font-family-base, sans-serif); \n  background-color: var(--primary-action-header-background, #ffffff);\n  color: var(--primary-action-header-text-color, rgba(0, 0, 0, 0.87));\n  box-shadow: var(--primary-action-header-shadow, 0px 2px 4px -1px rgba(0,0,0,0.2));\n  height: var(--primary-action-header-height, 48px);\n  padding: var(--primary-action-header-padding, 0 var(--spacing-04));\n  box-sizing: border-box;\n}\n\n.header-bar {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.title-section {\n  flex-shrink: 0;\n  margin-right: var(--spacing-md, 16px);\n}\n\n/* Tabs are not fully supported yet - this is leftover from work Greg did with Mindscope */\n.tabs {\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n  align-items: stretch;\n  min-width: 0;\n}\n\n.tabs udp-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.tabs udp-tabs::part(tab-list) {\n  /* This rule targets the 'tab-list' part within the udp-tabs component's shadow DOM. */\n  /* It's a placeholder for any specific styling needed for the tab list container itself. */\n  /* For example: display: flex; align-items: stretch; height: 100%; */\n}\n\n.tabs udp-tabs button {\n  padding: 0 16px;\n  margin: 0 var(--spacing-xxs, 4px);\n  height: 100%;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--font-size-sm, 0.875rem);\n  color: var(--text-color-secondary, rgba(0, 0, 0, 0.6));\n  text-transform: uppercase;\n  font-weight: var(--font-weight-medium, 500);\n  border-bottom: 2px solid transparent;\n  transition: color 0.3s ease, border-bottom-color 0.3s ease;\n}\n\n.tabs udp-tabs button:hover {\n  color: var(--primary-color-hover, var(--primary-color, #1976d2));\n}\n\n.tabs udp-tabs button.active {\n  color: var(--primary-color, #1976d2);\n  border-bottom: 2px solid var(--primary-color, #1976d2);\n}\n\n.button-section {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--spacing-sm, 8px);\n}\n\n.button-section stencil-icon-button {\n  color: var(--primary-action-header-icon-color, var(--text-color-primary, rgba(0, 0, 0, 0.54)));\n}\n\n.button-section stencil-icon-button:hover {\n  background-color: rgba(0,0,0,0.04);\n}\n\n\n.button-section custom-button {\n  /* Styles for the primary action button */\n  /* You might want to use your design system's button styles here */\n  /* Example: margin-left: var(--spacing-sm, 8px); */\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport iconMapping from '../icons/iconMapping';\n\n@Component({\n  tag: 'primary-action-header',\n  styleUrl: 'primary-action-header.css',\n  shadow: true,\n})\nexport class PrimaryActionHeader {\n  @Prop() title: string;\n  @Prop() hiddenActionButtons: string[] = [];\n  @Prop() hiddenLabels: string[] = [];\n  @Prop() actionButtons: any[] = [];\n  @Prop() defaultActionButtons: any[] = [];\n  @Prop() customSaveViewClick?: (event?: MouseEvent) => void;\n  @Prop() customSizeToFitClick?: (event?: MouseEvent) => void;\n  @Prop() customExportClick?: (event?: MouseEvent) => void;\n  @Prop() primaryActionClick?: (event?: MouseEvent) => void;\n  @Prop() customColumnViewClick?: (event?: MouseEvent) => void;\n  @Prop() customFitColumnClick?: (event?: MouseEvent) => void;\n  @Prop() customFilterViewClick?: (event?: MouseEvent) => void;\n  @Prop() customClearClick?: (event?: MouseEvent) => void;\n  @Prop() customExpandClick?: (event?: MouseEvent) => void;\n  @Prop() customShowViewClick?: (event?: MouseEvent) => void;\n  @Prop() activeTabIndex: number;\n  @Prop() selectTab: (index: number) => void;\n  @Prop() tabs: boolean = true;\n  @Prop() actionButtonLabel: string = '';\n  //   @State() activeTabIndex: number = 0;\n\n  getIconComponent(icon: string | Function, customIcon: Function) {\n    if (customIcon) {\n      return customIcon;\n    }\n\n    if (typeof icon === 'string') {\n      return iconMapping[icon];\n    }\n\n    return icon;\n  }\n\n  renderIcon(ActualIcon: any) {\n    if (ActualIcon && ActualIcon.elem === 'svg') {\n      return (\n        <svg {...ActualIcon.attrs}>\n          {ActualIcon.content.map((content: any, index: number) => {\n            return <path key={index} {...content.attrs} />;\n          })}\n        </svg>\n      );\n    }\n    return null;\n  }\n\n  //   selectTab(index: number) {\n  //     this.activeTabIndex = index;\n  //   }\n\n  render() {\n    console.log('active tab', this.activeTabIndex);\n\n    return (\n      <div class=\"header-bar\">\n        <div class=\"title-section\">\n          <unity-typography variant=\"h4\">{this.title}</unity-typography>\n        </div>\n\n        {/* IMPORTANT: NEED TO ADD A TABS COMPONENT SUPPORT - This is from work Greg did for mindscope demo */}\n        {this.tabs && (\n          <div class=\"tabs\">\n            <udp-tabs>\n              <button class={this.activeTabIndex === 0 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(0)}>\n                Demo Grid\n              </button>\n              <button class={this.activeTabIndex === 1 ? 'active' : ''} slot=\"tab-title\" onClick={() => this.selectTab(1)}>\n                Other Content\n              </button>\n            </udp-tabs>\n          </div>\n        )}\n\n        <div class=\"button-section\">\n          {this.defaultActionButtons.map(btn => {\n            // Determine the actual icon to use\n            const ActualIcon = this.getIconComponent(btn.icon, btn.customIcon);\n\n            const clickHandler = (event?: MouseEvent) => {\n              if (btn.clickHandler) {\n                btn.clickHandler(event);\n              } else {\n                console.log(`${btn.label} Clicked but no custom handler defined`);\n              }\n            };\n\n            if (!this.hiddenActionButtons.includes(btn.label) && btn.visible) {\n              return (\n                <stencil-icon-button secondary={btn.secondary} onClick={clickHandler} tooltip={btn.tooltip}>\n                  {/* Render icon directly */}\n                  {this.renderIcon(ActualIcon)}\n\n                  {/* Show label if it's not hidden and should be shown */}\n                  {!this.hiddenLabels.includes(btn.label) && btn.showLabel && <span>{btn.label}</span>}\n                </stencil-icon-button>\n              );\n            }\n            return null;\n          })}\n          {!this.actionButtonLabel && <div class=\"right-margin\" />}\n\n          {this.actionButtonLabel && (\n            <udp-button variant=\"contained\" color=\"secondary\" onClick={event => this.primaryActionClick(event)}>\n              {this.actionButtonLabel}\n            </udp-button>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-card2.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$3 } from './udp-card-media2.js';
 import { d as defineCustomElement$2 } from './udp-link2.js';
 import { d as defineCustomElement$1 } from './unity-typography2.js';
 
-const udpCardCss = ":host{display:block;background:var(--udp-card-background, #fff);overflow:hidden;color:var(--text-main);font-family:var(--font-family);font-size:var(--body2-font-size);font-weight:var(--body2-font-weight);line-height:var(--body2-line-height);position:relative;}:host udp-adornment{position:absolute;top:0;left:0;bottom:0;width:4px;z-index:1}:host udp-card-content{position:relative;z-index:0}:host udp-card-action-area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:transparent;transition:background-color 0.3s ease}:host udp-card-action-area:hover{background:rgba(0, 0, 0, 0.04)}:host udp-card-actions{position:relative;z-index:2}:host udp-card-actions ::slotted(*){pointer-events:auto !important}:host(.outlined){border:1px solid var(--divider-color, 'red')}:host(.elevation-1){box-shadow:var(--elevation-01)}:host(.elevation-2){box-shadow:var(--elevation-02)}:host(.elevation-3){box-shadow:var(--elevation-03)}:host(.elevation-4){box-shadow:var(--elevation-04)}:host(.elevation-5){box-shadow:var(--elevation-05)}:host(.elevation-6){box-shadow:var(--elevation-06)}:host(.elevation-7){box-shadow:var(--elevation-07)}:host(.elevation-8){box-shadow:var(--elevation-08)}";
+const udpCardCss = ":host{display:block;background:var(--udp-card-background, #fff);overflow:hidden;color:var(--text-main);font-family:var(--font-family);font-size:var(--body2-font-size);font-weight:var(--body2-font-weight);line-height:var(--body2-line-height);position:relative;border-radius:var(--border-radius)}:host udp-adornment{position:absolute;top:0;left:0;bottom:0;width:4px;z-index:1}:host udp-card-content{position:relative;z-index:0}:host udp-card-action-area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:transparent;transition:background-color 0.3s ease}:host udp-card-action-area:hover{background:rgba(0, 0, 0, 0.04)}:host udp-card-actions{position:relative;z-index:2}:host udp-card-actions ::slotted(*){pointer-events:auto !important}:host(.outlined){border:1px solid var(--divider-color)}:host(.elevation-1){box-shadow:var(--elevation-01)}:host(.elevation-2){box-shadow:var(--elevation-02)}:host(.elevation-3){box-shadow:var(--elevation-03)}:host(.elevation-4){box-shadow:var(--elevation-04)}:host(.elevation-5){box-shadow:var(--elevation-05)}:host(.elevation-6){box-shadow:var(--elevation-06)}:host(.elevation-7){box-shadow:var(--elevation-07)}:host(.elevation-8){box-shadow:var(--elevation-08)}";
 
 const UdpCard = /*@__PURE__*/ proxyCustomElement(class UdpCard extends H {
     constructor(registerHost) {
@@ -19,11 +19,7 @@ const UdpCard = /*@__PURE__*/ proxyCustomElement(class UdpCard extends H {
         /**
          * The variant to use.
          */
-        this.variant = 'elevated';
-        /**
-         * The adornmentStatus of the card.
-         */
-        this.adornmentStatus = 'success';
+        this.variant = 'outlined';
         /**
          * If true, the header title and subheader won't be wrapped by Typography component
          */
@@ -45,10 +41,11 @@ const UdpCard = /*@__PURE__*/ proxyCustomElement(class UdpCard extends H {
         const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);
         const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;
         // const hasDefaultContent = !!this.el.querySelector(':not([slot])');
-        const mainContent = (h(Fragment, { key: '1a13594f0eaa3194038e3681b0edd3b1623d035b' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: '7750ed102abd94ee3fe4c19e2274dee87b86dbc6', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '7c2d8419bad5a9d2aca603973839603465faceac' }))));
-        return (h(Host, { key: 'bd68bde73553f6e24fc488b69245f84150dfa3cb', class: {
-                [this.variant]: true,
-            } }, this.adornmentStatus && h("udp-adornment", { key: '63f16cfc648b2e218be705e32b64cfca5c5cee01', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: 'a9e4d0ef869a7b5d264a15b53b15077482b9fff5' }, this.actions)));
+        const mainContent = (h(Fragment, { key: 'b7fc40fddaccf8e1f7b065a1f10759a2f4395d84' }, renderMedia ? h("udp-card-media", { image: this.mediaImage, title: this.mediaTitle }) : h("slot", { name: "media" }), renderHeader ? (h("udp-card-header", { cardTitle: this.cardTitle, subheader: this.subheader, avatar: this.avatar, action: this.headerAction, disableTypography: this.disableHeaderTypography, onTitleClick: this.onTitleClick })) : (h("slot", { name: "header" })), h("udp-card-content", { key: 'a7380ff44692ad0123dc52def8b9b49e7b8c4617', disableGutter: this.disableContentGutter, disablePadding: this.disableContentPadding }, h("slot", { key: '156cfbd696987a827f44a6cd5e5be838592c242f' }))));
+        return (h(Host, { key: 'b2fcc1723f6cd77e67bd5280fef6ae935626afb5', class: {
+                [this.variant]: true, // This adds 'elevated' or 'outlined'
+                'elevation-1': this.variant === 'elevated', // This adds a default shadow
+            } }, this.adornmentStatus && h("udp-adornment", { key: '6355f98f462f2b8a7a300d52cc1d002834b00dae', status: this.adornmentStatus }), mainContent, this.actions && h("udp-card-actions", { key: '9843f998eae158c58e1c2fe04e6f0049f3034ff3' }, this.actions)));
     }
     get el() { return this; }
     static get style() { return udpCardCss; }

package/dist/components/udp-card2.js.map

@@ -1 +1 @@
-{"file":"udp-card2.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,6qCAA6qC;;MCOnrC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,UAAU;AAErD;;AAEG;AACK,QAAA,IAAe,CAAA,eAAA,GAA6C,SAAS;AAsB7E;;AAEG;AACK,QAAA,IAAuB,CAAA,uBAAA,GAAa,KAAK;AAiBjD;;AAEG;AACK,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAqB,CAAA,qBAAA,GAAY,KAAK;AAiE/C;AA9CS,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AACxC,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CAAU,OAAA,EAAA,QAAQ,CAAI,EAAA,CAAA,CAAC;;IAGxD,MAAM,GAAA;;QAGJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC;AAChI,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU;;AAGvE,QAAA,MAAM,WAAW,IACf,CAAA,CAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACN,WAAW,GAAG,CAAA,CAAA,gBAAA,EAAA,EAAgB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAA,CAAmB,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC5H,YAAY,IACX,uBACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,CAAA,KAEF,YAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAC5B,EACD,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAAA,EACpG,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACV,CACZ;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;aACrB,EAAA,EAEA,IAAI,CAAC,eAAe,IAAI,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAE,IAAI,CAAC,eAAe,EAAI,CAAA,EACvE,WAAW,EAGX,IAAI,CAAC,OAAO,IAAI,CAAmB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,OAAO,CAAoB,CAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/cards/udp-card/udp-card.css?tag=udp-card&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card.tsx"],"sourcesContent":[":host {\n  display: block;\n  background: var(--udp-card-background, #fff);\n  overflow: hidden;\n  color: var(--text-main);\n  font-family: var(--font-family);\n  font-size: var(--body2-font-size);\n  font-weight: var(--body2-font-weight);\n  line-height: var(--body2-line-height);\n  position: relative; /* For absolute positioning of adornment */\n}\n\n/* Position adornment as a border */\n:host udp-adornment {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px; /* Match the width in udp-adornment.tsx */\n  z-index: 1;\n}\n\n/* Ensure card content doesn't overlap with adornment */\n:host udp-card-content {\n  position: relative;\n  z-index: 0;\n}\n\n/* Action area styles - positioned as overlay */\n:host udp-card-action-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background: transparent;\n  transition: background-color 0.3s ease;\n}\n\n:host udp-card-action-area:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n/* Keep actions above the action area */\n:host udp-card-actions {\n  position: relative;\n  z-index: 2;\n}\n\n/* Ensure buttons and interactive elements within actions are clickable */\n:host udp-card-actions ::slotted(*) {\n  pointer-events: auto !important;\n}\n\n:host(.outlined) {\n  border: 1px solid var(--divider-color, 'red');\n}\n\n:host(.elevation-1) { box-shadow: var(--elevation-01); }\n:host(.elevation-2) { box-shadow: var(--elevation-02); }\n:host(.elevation-3) { box-shadow: var(--elevation-03); }\n:host(.elevation-4) { box-shadow: var(--elevation-04); }\n:host(.elevation-5) { box-shadow: var(--elevation-05); }\n:host(.elevation-6) { box-shadow: var(--elevation-06); }\n:host(.elevation-7) { box-shadow: var(--elevation-07); }\n:host(.elevation-8) { box-shadow: var(--elevation-08); } ","import { Component, Host, h, Prop, Fragment, VNode, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card',\n  styleUrl: 'udp-card.css',\n  shadow: true,\n})\nexport class UdpCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   */\n  @Prop() variant: 'elevated' | 'outlined' = 'elevated';\n\n  /**\n   * The adornmentStatus of the card.\n   */\n  @Prop() adornmentStatus: 'success' | 'error' | 'warning' | 'info' = 'success';\n\n  /**\n   * The title for the card header\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader for the card header\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * The avatar element to display in the card header\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The action to display in the card header\n   */\n  @Prop() headerAction?: any;\n\n  /**\n   * If true, the header title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableHeaderTypography?: boolean = false;\n\n  /**\n   * The image URL for the card media.\n   */\n  @Prop() mediaImage: string;\n\n  /**\n   * The title for the card media image, used for accessibility.\n   */\n  @Prop() mediaTitle: string;\n\n  /**\n   * The actions to display in the card footer\n   */\n  @Prop() actions?: any;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentGutter: boolean = false;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentPadding: boolean = false;\n\n  /**\n   * If `true`, the main content area of the card becomes a clickable action area.\n   * Not implemented yet.\n   */\n  // @Prop() actionArea: boolean = false;\n\n  /**\n   * Click handler for when actionArea is true\n   * Not implemented yet.\n   */\n  // @Prop() onClick?: (e: MouseEvent) => void;\n\n  /**\n   * Optional handler for when the title is clicked\n   */\n  @Prop() onTitleClick?: (e: CustomEvent) => void;\n\n  private hasSlottedContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`);\n  }\n\n  render() {\n    // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;\n\n    const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);\n    const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;\n    // const hasDefaultContent = !!this.el.querySelector(':not([slot])');\n\n    const mainContent = (\n      <Fragment>\n        {renderMedia ? <udp-card-media image={this.mediaImage} title={this.mediaTitle}></udp-card-media> : <slot name=\"media\"></slot>}\n        {renderHeader ? (\n          <udp-card-header\n            cardTitle={this.cardTitle}\n            subheader={this.subheader}\n            avatar={this.avatar}\n            action={this.headerAction}\n            disableTypography={this.disableHeaderTypography}\n            onTitleClick={this.onTitleClick}\n          />\n        ) : (\n          <slot name=\"header\"></slot>\n        )}\n        <udp-card-content disableGutter={this.disableContentGutter} disablePadding={this.disableContentPadding}>\n          <slot></slot>\n        </udp-card-content>\n      </Fragment>\n    );\n\n    return (\n      <Host\n        class={{\n          [this.variant]: true,\n        }}\n      >\n        {this.adornmentStatus && <udp-adornment status={this.adornmentStatus} />}\n        {mainContent}\n        {/* TODO: Needs to be tested more before uncommenting */}\n        {/* {this.actionArea && <udp-card-action-area onClick={this.onClick} style={{ cursor: 'pointer' }} />} */}\n        {this.actions && <udp-card-actions>{this.actions}</udp-card-actions>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"udp-card2.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,wsCAAwsC;;MCO9sC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,UAAU;AA2BrD;;AAEG;AACK,QAAA,IAAuB,CAAA,uBAAA,GAAa,KAAK;AAiBjD;;AAEG;AACK,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;AAE7C;;AAEG;AACK,QAAA,IAAqB,CAAA,qBAAA,GAAY,KAAK;AAkE/C;AA/CS,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AACxC,QAAA,OAAO,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,CAAU,OAAA,EAAA,QAAQ,CAAI,EAAA,CAAA,CAAC;;IAGxD,MAAM,GAAA;;QAGJ,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC;AAChI,QAAA,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU;;AAGvE,QAAA,MAAM,WAAW,IACf,CAAA,CAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACN,WAAW,GAAG,CAAA,CAAA,gBAAA,EAAA,EAAgB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAA,CAAmB,GAAG,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,OAAO,EAAQ,CAAA,EAC5H,YAAY,IACX,uBACE,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,iBAAiB,EAAE,IAAI,CAAC,uBAAuB,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,CAAA,KAEF,YAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAC5B,EACD,CAAkB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAa,EAAE,IAAI,CAAC,oBAAoB,EAAE,cAAc,EAAE,IAAI,CAAC,qBAAqB,EAAA,EACpG,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACV,CACZ;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACP,gBAAA,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI;AACpB,gBAAA,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;aAC3C,EAAA,EAEE,IAAI,CAAC,eAAe,IAAI,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAE,IAAI,CAAC,eAAe,EAAI,CAAA,EACvE,WAAW,EAGX,IAAI,CAAC,OAAO,IAAI,CAAmB,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,OAAO,CAAoB,CAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/cards/udp-card/udp-card.css?tag=udp-card&encapsulation=shadow","src/components/my-component/UI/data-display/cards/udp-card/udp-card.tsx"],"sourcesContent":[":host {\n  display: block;\n  background: var(--udp-card-background, #fff);\n  overflow: hidden;\n  color: var(--text-main);\n  font-family: var(--font-family);\n  font-size: var(--body2-font-size);\n  font-weight: var(--body2-font-weight);\n  line-height: var(--body2-line-height);\n  position: relative;\n  border-radius: var(--border-radius);\n}\n\n:host udp-adornment {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 4px;\n  z-index: 1;\n}\n\n:host udp-card-content {\n  position: relative;\n  z-index: 0;\n}\n\n:host udp-card-action-area {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background: transparent;\n  transition: background-color 0.3s ease;\n}\n\n:host udp-card-action-area:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n:host udp-card-actions {\n  position: relative;\n  z-index: 2;\n}\n\n:host udp-card-actions ::slotted(*) {\n  pointer-events: auto !important;\n}\n\n:host(.outlined) {\n  border: 1px solid var(--divider-color);\n}\n\n:host(.elevation-1) { box-shadow: var(--elevation-01); }\n:host(.elevation-2) { box-shadow: var(--elevation-02); }\n:host(.elevation-3) { box-shadow: var(--elevation-03); }\n:host(.elevation-4) { box-shadow: var(--elevation-04); }\n:host(.elevation-5) { box-shadow: var(--elevation-05); }\n:host(.elevation-6) { box-shadow: var(--elevation-06); }\n:host(.elevation-7) { box-shadow: var(--elevation-07); }\n:host(.elevation-8) { box-shadow: var(--elevation-08); }\n","import { Component, Host, h, Prop, Fragment, VNode, Element } from '@stencil/core';\n\n@Component({\n  tag: 'udp-card',\n  styleUrl: 'udp-card.css',\n  shadow: true,\n})\nexport class UdpCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * The variant to use.\n   */\n  @Prop() variant: 'elevated' | 'outlined' = 'outlined';\n\n  /**\n   * The adornmentStatus of the card.\n   */\n  @Prop() adornmentStatus: 'success' | 'error' | 'warning' | 'info';\n\n  /**\n   * The title for the card header\n   */\n  @Prop() cardTitle?: string;\n\n  /**\n   * The subheader for the card header\n   */\n  @Prop() subheader?: string | VNode | VNode[];\n\n  /**\n   * The avatar element to display in the card header\n   */\n  @Prop() avatar?: any;\n\n  /**\n   * The action to display in the card header\n   */\n  @Prop() headerAction?: any;\n\n  /**\n   * If true, the header title and subheader won't be wrapped by Typography component\n   */\n  @Prop() disableHeaderTypography?: boolean = false;\n\n  /**\n   * The image URL for the card media.\n   */\n  @Prop() mediaImage: string;\n\n  /**\n   * The title for the card media image, used for accessibility.\n   */\n  @Prop() mediaTitle: string;\n\n  /**\n   * The actions to display in the card footer\n   */\n  @Prop() actions?: any;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentGutter: boolean = false;\n\n  /**\n   * If `true`, the card content area will not have padding.\n   */\n  @Prop() disableContentPadding: boolean = false;\n\n  /**\n   * If `true`, the main content area of the card becomes a clickable action area.\n   * Not implemented yet.\n   */\n  // @Prop() actionArea: boolean = false;\n\n  /**\n   * Click handler for when actionArea is true\n   * Not implemented yet.\n   */\n  // @Prop() onClick?: (e: MouseEvent) => void;\n\n  /**\n   * Optional handler for when the title is clicked\n   */\n  @Prop() onTitleClick?: (e: CustomEvent) => void;\n\n  private hasSlottedContent(slotName: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${slotName}\"]`);\n  }\n\n  render() {\n    // const elevationClass = this.variant === 'elevation' && this.elevation >= 1 && this.elevation <= 8 ? `elevation-${this.elevation}` : null;\n\n    const renderHeader = !this.hasSlottedContent('header') && (this.cardTitle || this.subheader || this.avatar || this.headerAction);\n    const renderMedia = !this.hasSlottedContent('media') && this.mediaImage;\n    // const hasDefaultContent = !!this.el.querySelector(':not([slot])');\n\n    const mainContent = (\n      <Fragment>\n        {renderMedia ? <udp-card-media image={this.mediaImage} title={this.mediaTitle}></udp-card-media> : <slot name=\"media\"></slot>}\n        {renderHeader ? (\n          <udp-card-header\n            cardTitle={this.cardTitle}\n            subheader={this.subheader}\n            avatar={this.avatar}\n            action={this.headerAction}\n            disableTypography={this.disableHeaderTypography}\n            onTitleClick={this.onTitleClick}\n          />\n        ) : (\n          <slot name=\"header\"></slot>\n        )}\n        <udp-card-content disableGutter={this.disableContentGutter} disablePadding={this.disableContentPadding}>\n          <slot></slot>\n        </udp-card-content>\n      </Fragment>\n    );\n\n    return (\n      <Host\n        class={{\n        [this.variant]: true, // This adds 'elevated' or 'outlined'\n        'elevation-1': this.variant === 'elevated', // This adds a default shadow\n      }}\n      >\n        {this.adornmentStatus && <udp-adornment status={this.adornmentStatus} />}\n        {mainContent}\n        {/* TODO: Needs to be tested more before uncommenting */}\n        {/* {this.actionArea && <udp-card-action-area onClick={this.onClick} style={{ cursor: 'pointer' }} />} */}\n        {this.actions && <udp-card-actions>{this.actions}</udp-card-actions>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/udp-dynamic-container-with-menu2.js

@@ -126,7 +126,7 @@ const DynamicContainerWithMenu = /*@__PURE__*/ proxyCustomElement(class DynamicC
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: '71f418211a987ee241e9037c29c4bd3204cb1836', class: "container" }, h("div", { key: '5da39f24ea892e4176fbedd85b3a3a6f1ee17aa4', 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: 'af27dfc93010680c2617a7da6fb6cf6c51bb8727', class: "overflow" }, h("udp-pop-over", { key: '4c2a5beda6b819e7e452aecf384a82719c4a1eb7', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: 'd4cf442f4ee12e97517e69b883fd6c52d11c4837', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: '3dbaff6a6f132f9a88d1e20be8b2bd6addfe29e1', class: "container" }, h("div", { key: '19612cdc163703220caf60859a78cf05a2bc6f2a', 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: 'f5311d566d4ee2f3e5f3000de81dbb85bf62f6bb', class: "overflow" }, h("udp-pop-over", { key: 'df064bb0a2757b1452aad74d80413113cf56016e', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '1ea5b82d8578de30740af913f9f3109b971b3ef1', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/udp-icon2.js

@@ -1,5 +1,179 @@
 import { p as proxyCustomElement, H, h } from './index2.js';
-import { i as iconMapping } from './iconMapping.js';
+import AddIcon16 from '@carbon/icons/es/add/16';
+import Add32 from '@carbon/icons/es/add/32';
+import AddAlt16 from '@carbon/icons/es/add--alt/16';
+import AddFilled16 from '@carbon/icons/es/add--filled/16';
+import ArrowsHorizontal16 from '@carbon/icons/es/arrows--horizontal/16';
+import Attachment16 from '@carbon/icons/es/attachment/16';
+import Batchjob16 from '@carbon/icons/es/batch-job/16';
+import Box16 from '@carbon/icons/es/box/16';
+import Close16 from '@carbon/icons/es/close/16';
+import Close24 from '@carbon/icons/es/close/24';
+import Close32 from '@carbon/icons/es/close/32';
+import CloseFilled16 from '@carbon/icons/es/close--filled/16';
+import CloseOutlined16 from '@carbon/icons/es/close--outline/16';
+import CheckMark16 from '@carbon/icons/es/checkmark/16';
+import CheckMark24 from '@carbon/icons/es/checkmark/24';
+import CheckMark32 from '@carbon/icons/es/checkmark/32';
+import ChevronLeft16 from '@carbon/icons/es/chevron--left/16';
+import ChevronRight24 from '@carbon/icons/es/chevron--right/16';
+import ChevronDownIcon24 from '@carbon/icons/es/chevron--down/16';
+import Dataenrichment from '@carbon/icons/es/data-enrichment/16';
+import Document16 from '@carbon/icons/es/document/16';
+import DocumentAdd16 from '@carbon/icons/es/document--add/16';
+import DocumentAttachment16 from '@carbon/icons/es/document--attachment/16';
+import DocumentPDF16 from '@carbon/icons/es/document--pdf/16';
+import Draggable16 from '@carbon/icons/es/draggable/16';
+import Edit16 from '@carbon/icons/es/edit/16';
+import Export16 from '@carbon/icons/es/export/16';
+import Flag16 from '@carbon/icons/es/flag/16';
+import Information16 from '@carbon/icons/es/information/16';
+import Information32 from '@carbon/icons/es/information/32';
+import Link16 from '@carbon/icons/es/link/16';
+import OverflowMenuVertical24 from '@carbon/icons/es/overflow-menu--vertical/16';
+import OverflowMenuVertical32 from '@carbon/icons/es/overflow-menu--vertical/32';
+import Return16 from '@carbon/icons/es/return/16';
+import Save16 from '@carbon/icons/es/save/16';
+import Settings16 from '@carbon/icons/es/settings/16';
+import Subtract16 from '@carbon/icons/es/subtract/16';
+import SubtractAlt16 from '@carbon/icons/es/subtract--alt/16';
+import SubtractFilled16 from '@carbon/icons/es/subtract--filled/16';
+import TrashCan16 from '@carbon/icons/es/trash-can/16';
+import User16 from '@carbon/icons/es/user/16';
+import View16 from '@carbon/icons/es/view/16';
+import Warning16 from '@carbon/icons/es/warning/16';
+import Warning32 from '@carbon/icons/es/warning/32';
+import WarningAlt16 from '@carbon/icons/es/warning--alt/16';
+import WarningAlt32 from '@carbon/icons/es/warning--alt/32';
+import Wizard16 from '@carbon/icons/es/product/16';
+import Workspace16 from '@carbon/icons/es/workspace/16';
+import ArrowUp16 from '@carbon/icons/es/arrow--up/16';
+import ArrowDown16 from '@carbon/icons/es/arrow--down/16';
+import ArrowRight16 from '@carbon/icons/es/arrow--right/16';
+import ArrowLeft16 from '@carbon/icons/es/arrow--left/16';
+import Copy16 from '@carbon/icons/es/copy/16';
+import Star16 from '@carbon/icons/es/star/16';
+import DataTable16 from '@carbon/icons/es/data-table/16';
+import FitToWidth16 from '@carbon/icons/es/fit-to-width/16';
+import Search16 from '@carbon/icons/es/search--advanced/16';
+import Reset16 from '@carbon/icons/es/reset/16';
+import Column from '@carbon/icons/es/column/16';
+import HideColumn from '@carbon/icons/es/column--delete/16';
+import Rotate from '@carbon/icons/es/watson-health/rotate--360/16';
+import Filter from '@carbon/icons/es/filter/16';
+import RelationshipDiagram from '@carbon/icons/es/app-connectivity/16';
+import TextFont16 from '@carbon/icons/es/text--font/16';
+import TextLongParagraph16 from '@carbon/icons/es/text--long-paragraph/16';
+import CharacterWholeNumber16 from '@carbon/icons/es/character--whole-number/16';
+import CheckboxChecked16 from '@carbon/icons/es/checkbox--checked/16';
+import RadioButtonChecked16 from '@carbon/icons/es/radio-button--checked/16';
+import EventSchedule16 from '@carbon/icons/es/event--schedule/16';
+import ViewOff16 from '@carbon/icons/es/view--off/16';
+import Time16 from '@carbon/icons/es/time/16';
+import Calendar16 from '@carbon/icons/es/calendar/16';
+import ListChecked16 from '@carbon/icons/es/list--checked/16';
+import ListBulleted16 from '@carbon/icons/es/list--bulleted/16';
+import CloudUpload16 from '@carbon/icons/es/cloud--upload/16';
+import Locked16 from '@carbon/icons/es/locked/16';
+import Pause from '@carbon/icons/es/pause/16';
+import Unlocked16 from '@carbon/icons/es/unlocked/16';
+import Send16 from '@carbon/icons/es/send/16';
+import Email16 from '@carbon/icons/es/email/16';
+import CheckMarkOutlined16 from '@carbon/icons/es/checkmark--outline/16';
+import MigrateAlt16 from '@carbon/icons/es/migrate--alt/16';
+import CheckboxCheckedFilled16 from '@carbon/icons/es/checkbox--checked--filled/16';
+import Checkbox from '@carbon/icons/es/checkbox/16';
+
+const iconMapping = {
+    add: AddIcon16,
+    add32: Add32,
+    addAlt: AddAlt16,
+    addFilled: AddFilled16,
+    arrowsHorizontal16: ArrowsHorizontal16,
+    arrowRight16: ArrowRight16,
+    arrowLeft16: ArrowLeft16,
+    attachment: Attachment16,
+    box: Box16,
+    close16: Close16,
+    close24: Close24,
+    close32: Close32,
+    closeFilled16: CloseFilled16,
+    closeOutlined16: CloseOutlined16,
+    checkMark: CheckMark16,
+    checkMark24: CheckMark24,
+    checkMark32: CheckMark32,
+    checkMarkOutlined: CheckMarkOutlined16,
+    chevronLeft16: ChevronLeft16,
+    chevronRight16: ChevronRight24,
+    chevronDown: ChevronDownIcon24,
+    dashboard: Workspace16,
+    document: Document16,
+    documentAdd: DocumentAdd16,
+    documentAttachment: DocumentAttachment16,
+    documentPdf: DocumentPDF16,
+    draggable: Draggable16,
+    edit: Edit16,
+    export: Export16,
+    flag: Flag16,
+    information: Information16,
+    information32: Information32,
+    link: Link16,
+    opportunities: Dataenrichment,
+    overflowMenuVertical: OverflowMenuVertical24,
+    overflowMenuVertical32: OverflowMenuVertical32,
+    return16: Return16,
+    save: Save16,
+    settings: Settings16,
+    subtract: Subtract16,
+    subtractAlt: SubtractAlt16,
+    subtractFilled: SubtractFilled16,
+    trashCan: TrashCan16,
+    user: User16,
+    view: View16,
+    wizard: Wizard16,
+    workorder: Batchjob16,
+    arrowUp: ArrowUp16,
+    arrowDown: ArrowDown16,
+    copy: Copy16,
+    star: Star16,
+    warning: Warning16,
+    warning32: Warning32,
+    warningAlt: WarningAlt16,
+    warningAlt32: WarningAlt32,
+    time: Time16,
+    text: TextLongParagraph16,
+    list: ListBulleted16,
+    calendar: Calendar16,
+    formTextField: TextFont16,
+    formTextArea: TextLongParagraph16,
+    formNumberField: CharacterWholeNumber16,
+    formDateField: Calendar16,
+    formCheckbox: CheckboxChecked16,
+    formFileUpload: CloudUpload16,
+    formRadioButton: RadioButtonChecked16,
+    formHiddenField: ViewOff16,
+    formTimeField: Time16,
+    formDateTimeField: EventSchedule16,
+    formMultiSelectField: ListChecked16,
+    formSingleSelectField: ListBulleted16,
+    dataTable: DataTable16,
+    fitToWidth: FitToWidth16,
+    search: Search16,
+    reset: Reset16,
+    column: Column,
+    hideColumn: HideColumn,
+    rotate: Rotate,
+    lock: Locked16,
+    pause: Pause,
+    filter: Filter,
+    relationshipDiagram: RelationshipDiagram,
+    unlock: Unlocked16,
+    send: Send16,
+    email: Email16,
+    migrateAlt: MigrateAlt16,
+    checkboxCheckedFilled: CheckboxCheckedFilled16,
+    checkbox: Checkbox,
+};
 
 const getIconFromName = (iconName, iconType = 'carbon') => {
     var _a;
@@ -89,7 +263,7 @@ function defineCustomElement() {
     } });
 }
 
-export { UdpIcon as U, defineCustomElement as d, getIconFromName as g };
+export { UdpIcon as U, defineCustomElement as d, getIconFromName as g, iconMapping as i };
 //# sourceMappingURL=udp-icon2.js.map
 
 //# sourceMappingURL=udp-icon2.js.map

package/dist/components/udp-icon2.js.map

@@ -1 +1 @@
-{"file":"udp-icon2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/icons/iconUtils.ts","src/components/my-component/UI/data-display/icons/udp-icon.css?tag=udp-icon&encapsulation=shadow","src/components/my-component/UI/data-display/icons/udp-icon.tsx"],"sourcesContent":["import iconMapping from './iconMapping';\n\nexport const getIconFromName = (iconName: string, iconType: string = 'carbon') => {\n  if (!iconName || iconName?.trim()?.length === 0) return;\n\n  if (iconType === 'carbon') {\n    return iconMapping[iconName];\n  }\n  return null;\n};\n",".icon-container{\n    height: 100%;\n    display: flex;\n    align-items: center;\n    color: inherit;\n}","import { Component, h, Prop } from '@stencil/core';\nimport { getIconFromName } from './iconUtils';\n\n@Component({\n  tag: 'udp-icon',\n  styleUrl: 'udp-icon.css',\n  shadow: true,\n})\nexport class UdpIcon {\n  @Prop() iconName: string;\n  @Prop() iconType: string = 'carbon';\n  /**\n   * @deprecated Use color prop instead\n   */\n  @Prop() darkIcon: boolean = true;\n  @Prop() color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'inherit' | string;\n\n  render() {\n    const iconData = getIconFromName(this.iconName, this.iconType);\n    let iconColor: string;\n\n    if (this.color) {\n      switch (this.color) {\n        case 'primary':\n          iconColor = 'var(--primary-color)';\n          break;\n        case 'secondary':\n          iconColor = 'var(--secondary-color)';\n          break;\n        case 'error':\n          iconColor = 'var(--error-color-main)';\n          break;\n        case 'info':\n          iconColor = 'var(--info-color-main)';\n          break;\n        case 'success':\n          iconColor = 'var(--success-color-main)';\n          break;\n        case 'inherit':\n          iconColor = 'currentColor';\n          break;\n        default:\n          iconColor = this.color;\n      }\n    } else {\n      iconColor = this.darkIcon ? 'black' : 'white';\n    }\n\n    return (\n      <div class=\"icon-container\">\n        <svg {...(iconData?.attrs ?? {})} fill={iconColor}>\n          {iconData?.content?.map((item, index) => {\n            if (item?.elem === 'path') {\n              return <path {...(item?.attrs ?? {})} key={index} />;\n            } else if (item?.elem === 'circle') {\n              return <circle {...(item?.attrs ?? {})} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"udp-icon2.js","mappings":"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","names":["Add16","ChevronRight16","ChevronDown","OverflowMenuVertical16","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/my-component/UI/data-display/icons/iconMapping.ts","src/components/my-component/UI/data-display/icons/iconUtils.ts","src/components/my-component/UI/data-display/icons/udp-icon.css?tag=udp-icon&encapsulation=shadow","src/components/my-component/UI/data-display/icons/udp-icon.tsx"],"sourcesContent":["import Add16 from '@carbon/icons/es/add/16';\nimport Add32 from '@carbon/icons/es/add/32';\nimport AddAlt16 from '@carbon/icons/es/add--alt/16';\nimport AddFilled16 from '@carbon/icons/es/add--filled/16';\nimport ArrowsHorizontal16 from '@carbon/icons/es/arrows--horizontal/16';\nimport Attachment16 from '@carbon/icons/es/attachment/16';\nimport Batchjob16 from '@carbon/icons/es/batch-job/16';\nimport Box16 from '@carbon/icons/es/box/16';\nimport Close16 from '@carbon/icons/es/close/16';\nimport Close24 from '@carbon/icons/es/close/24';\nimport Close32 from '@carbon/icons/es/close/32';\nimport CloseFilled16 from '@carbon/icons/es/close--filled/16';\nimport CloseOutlined16 from '@carbon/icons/es/close--outline/16';\nimport CheckMark16 from '@carbon/icons/es/checkmark/16';\nimport CheckMark24 from '@carbon/icons/es/checkmark/24';\nimport CheckMark32 from '@carbon/icons/es/checkmark/32';\nimport ChevronLeft16 from '@carbon/icons/es/chevron--left/16';\nimport ChevronRight16 from '@carbon/icons/es/chevron--right/16';\nimport ChevronDown from '@carbon/icons/es/chevron--down/16';\nimport Dataenrichment from '@carbon/icons/es/data-enrichment/16';\nimport Document16 from '@carbon/icons/es/document/16';\nimport DocumentAdd16 from '@carbon/icons/es/document--add/16';\nimport DocumentAttachment16 from '@carbon/icons/es/document--attachment/16';\nimport DocumentPDF16 from '@carbon/icons/es/document--pdf/16';\nimport Draggable16 from '@carbon/icons/es/draggable/16';\nimport Edit16 from '@carbon/icons/es/edit/16';\nimport Export16 from '@carbon/icons/es/export/16';\nimport Flag16 from '@carbon/icons/es/flag/16';\nimport Information16 from '@carbon/icons/es/information/16';\nimport Information32 from '@carbon/icons/es/information/32';\nimport Link16 from '@carbon/icons/es/link/16';\nimport OverflowMenuVertical16 from '@carbon/icons/es/overflow-menu--vertical/16';\nimport OverflowMenuVertical32 from '@carbon/icons/es/overflow-menu--vertical/32';\nimport Return16 from '@carbon/icons/es/return/16';\nimport Save16 from '@carbon/icons/es/save/16';\nimport Settings16 from '@carbon/icons/es/settings/16';\nimport Subtract16 from '@carbon/icons/es/subtract/16';\nimport SubtractAlt16 from '@carbon/icons/es/subtract--alt/16';\nimport SubtractFilled16 from '@carbon/icons/es/subtract--filled/16';\nimport TrashCan16 from '@carbon/icons/es/trash-can/16';\nimport User16 from '@carbon/icons/es/user/16';\nimport View16 from '@carbon/icons/es/view/16';\nimport Warning16 from '@carbon/icons/es/warning/16';\nimport Warning32 from '@carbon/icons/es/warning/32';\nimport WarningAlt16 from '@carbon/icons/es/warning--alt/16';\nimport WarningAlt32 from '@carbon/icons/es/warning--alt/32';\nimport Wizard16 from '@carbon/icons/es/product/16';\nimport Workspace16 from '@carbon/icons/es/workspace/16';\nimport ArrowUp16 from '@carbon/icons/es/arrow--up/16';\nimport ArrowDown16 from '@carbon/icons/es/arrow--down/16';\nimport ArrowRight16 from '@carbon/icons/es/arrow--right/16';\nimport ArrowLeft16 from '@carbon/icons/es/arrow--left/16';\nimport Copy16 from '@carbon/icons/es/copy/16';\nimport Star16 from '@carbon/icons/es/star/16';\nimport DataTable16 from '@carbon/icons/es/data-table/16';\nimport FitToWidth16 from '@carbon/icons/es/fit-to-width/16';\nimport Search16 from '@carbon/icons/es/search--advanced/16';\nimport Reset16 from '@carbon/icons/es/reset/16';\nimport Column from '@carbon/icons/es/column/16';\nimport HideColumn from '@carbon/icons/es/column--delete/16';\nimport Rotate from '@carbon/icons/es/watson-health/rotate--360/16';\nimport Filter from '@carbon/icons/es/filter/16';\nimport RelationshipDiagram from '@carbon/icons/es/app-connectivity/16';\n// Editor icons\nimport TextFont16 from '@carbon/icons/es/text--font/16';\nimport TextLongParagraph16 from '@carbon/icons/es/text--long-paragraph/16';\nimport CharacterWholeNumber16 from '@carbon/icons/es/character--whole-number/16';\nimport CheckboxChecked16 from '@carbon/icons/es/checkbox--checked/16';\nimport RadioButtonChecked16 from '@carbon/icons/es/radio-button--checked/16';\nimport EventSchedule16 from '@carbon/icons/es/event--schedule/16';\nimport ViewOff16 from '@carbon/icons/es/view--off/16';\nimport Time16 from '@carbon/icons/es/time/16';\nimport Calendar16 from '@carbon/icons/es/calendar/16';\nimport ListChecked16 from '@carbon/icons/es/list--checked/16';\nimport ListBulleted16 from '@carbon/icons/es/list--bulleted/16';\nimport CloudUpload16 from '@carbon/icons/es/cloud--upload/16';\nimport Locked16 from '@carbon/icons/es/locked/16';\nimport Pause from '@carbon/icons/es/pause/16';\n\nimport Unlocked16 from '@carbon/icons/es/unlocked/16';\nimport Send16 from '@carbon/icons/es/send/16';\nimport Email16 from '@carbon/icons/es/email/16';\nimport CheckMarkOutlined16 from '@carbon/icons/es/checkmark--outline/16';\nimport MigrateAlt16 from '@carbon/icons/es/migrate--alt/16';\nimport CheckboxCheckedFilled16 from '@carbon/icons/es/checkbox--checked--filled/16';\nimport Checkbox from '@carbon/icons/es/checkbox/16';\n\nimport { CarbonIcon } from './CarbonIcon';\n\nexport const iconMapping: Record<string, CarbonIcon> = {\n  add: Add16 as CarbonIcon,\n  add32: Add32 as CarbonIcon,\n  addAlt: AddAlt16 as CarbonIcon,\n  addFilled: AddFilled16 as CarbonIcon,\n  arrowsHorizontal16: ArrowsHorizontal16 as CarbonIcon,\n  arrowRight16: ArrowRight16 as CarbonIcon,\n  arrowLeft16: ArrowLeft16 as CarbonIcon,\n  attachment: Attachment16 as CarbonIcon,\n  box: Box16 as CarbonIcon,\n  close16: Close16 as CarbonIcon,\n  close24: Close24 as CarbonIcon,\n  close32: Close32 as CarbonIcon,\n  closeFilled16: CloseFilled16 as CarbonIcon,\n  closeOutlined16: CloseOutlined16 as CarbonIcon,\n  checkMark: CheckMark16 as CarbonIcon,\n  checkMark24: CheckMark24 as CarbonIcon,\n  checkMark32: CheckMark32 as CarbonIcon,\n  checkMarkOutlined: CheckMarkOutlined16 as CarbonIcon,\n  chevronLeft16: ChevronLeft16 as CarbonIcon,\n  chevronRight16: ChevronRight16 as CarbonIcon,\n  chevronDown: ChevronDown as CarbonIcon,\n  dashboard: Workspace16 as CarbonIcon,\n  document: Document16 as CarbonIcon,\n  documentAdd: DocumentAdd16 as CarbonIcon,\n  documentAttachment: DocumentAttachment16 as CarbonIcon,\n  documentPdf: DocumentPDF16 as CarbonIcon,\n  draggable: Draggable16 as CarbonIcon,\n  edit: Edit16 as CarbonIcon,\n  export: Export16 as CarbonIcon,\n  flag: Flag16 as CarbonIcon,\n  information: Information16 as CarbonIcon,\n  information32: Information32 as CarbonIcon,\n  link: Link16 as CarbonIcon,\n  opportunities: Dataenrichment as CarbonIcon,\n  overflowMenuVertical: OverflowMenuVertical16 as CarbonIcon,\n  overflowMenuVertical32: OverflowMenuVertical32 as CarbonIcon,\n  return16: Return16 as CarbonIcon,\n  save: Save16 as CarbonIcon,\n  settings: Settings16 as CarbonIcon,\n  subtract: Subtract16 as CarbonIcon,\n  subtractAlt: SubtractAlt16 as CarbonIcon,\n  subtractFilled: SubtractFilled16 as CarbonIcon,\n  trashCan: TrashCan16 as CarbonIcon,\n  user: User16 as CarbonIcon,\n  view: View16 as CarbonIcon,\n  wizard: Wizard16 as CarbonIcon,\n  workorder: Batchjob16 as CarbonIcon,\n  arrowUp: ArrowUp16 as CarbonIcon,\n  arrowDown: ArrowDown16 as CarbonIcon,\n  copy: Copy16 as CarbonIcon,\n  star: Star16 as CarbonIcon,\n  warning: Warning16 as CarbonIcon,\n  warning32: Warning32 as CarbonIcon,\n  warningAlt: WarningAlt16 as CarbonIcon,\n  warningAlt32: WarningAlt32 as CarbonIcon,\n  time: Time16 as CarbonIcon,\n  text: TextLongParagraph16 as CarbonIcon,\n  list: ListBulleted16 as CarbonIcon,\n  calendar: Calendar16 as CarbonIcon,\n  formTextField: TextFont16 as CarbonIcon,\n  formTextArea: TextLongParagraph16 as CarbonIcon,\n  formNumberField: CharacterWholeNumber16 as CarbonIcon,\n  formDateField: Calendar16 as CarbonIcon,\n  formCheckbox: CheckboxChecked16 as CarbonIcon,\n  formFileUpload: CloudUpload16 as CarbonIcon,\n  formRadioButton: RadioButtonChecked16 as CarbonIcon,\n  formHiddenField: ViewOff16 as CarbonIcon,\n  formTimeField: Time16 as CarbonIcon,\n  formDateTimeField: EventSchedule16 as CarbonIcon,\n  formMultiSelectField: ListChecked16 as CarbonIcon,\n  formSingleSelectField: ListBulleted16 as CarbonIcon,\n  dataTable: DataTable16 as CarbonIcon,\n  fitToWidth: FitToWidth16 as CarbonIcon,\n  search: Search16 as CarbonIcon,\n  reset: Reset16 as CarbonIcon,\n  column: Column as CarbonIcon,\n  hideColumn: HideColumn as CarbonIcon,\n  rotate: Rotate as CarbonIcon,\n  lock: Locked16 as CarbonIcon,\n  pause: Pause as CarbonIcon,\n  filter: Filter as CarbonIcon,\n  relationshipDiagram: RelationshipDiagram as CarbonIcon,\n  unlock: Unlocked16 as CarbonIcon,\n  send: Send16 as CarbonIcon,\n  email: Email16 as CarbonIcon,\n  migrateAlt: MigrateAlt16 as CarbonIcon,\n  checkboxCheckedFilled: CheckboxCheckedFilled16 as CarbonIcon,\n  checkbox: Checkbox as CarbonIcon,\n};\n\nexport default iconMapping;\n","import iconMapping from './iconMapping';\n\nexport const getIconFromName = (iconName: string, iconType: string = 'carbon') => {\n  if (!iconName || iconName?.trim()?.length === 0) return;\n\n  if (iconType === 'carbon') {\n    return iconMapping[iconName];\n  }\n  return null;\n};\n",".icon-container{\n    height: 100%;\n    display: flex;\n    align-items: center;\n    color: inherit;\n}","import { Component, h, Prop } from '@stencil/core';\nimport { getIconFromName } from './iconUtils';\n\n@Component({\n  tag: 'udp-icon',\n  styleUrl: 'udp-icon.css',\n  shadow: true,\n})\nexport class UdpIcon {\n  @Prop() iconName: string;\n  @Prop() iconType: string = 'carbon';\n  /**\n   * @deprecated Use color prop instead\n   */\n  @Prop() darkIcon: boolean = true;\n  @Prop() color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'inherit' | string;\n\n  render() {\n    const iconData = getIconFromName(this.iconName, this.iconType);\n    let iconColor: string;\n\n    if (this.color) {\n      switch (this.color) {\n        case 'primary':\n          iconColor = 'var(--primary-color)';\n          break;\n        case 'secondary':\n          iconColor = 'var(--secondary-color)';\n          break;\n        case 'error':\n          iconColor = 'var(--error-color-main)';\n          break;\n        case 'info':\n          iconColor = 'var(--info-color-main)';\n          break;\n        case 'success':\n          iconColor = 'var(--success-color-main)';\n          break;\n        case 'inherit':\n          iconColor = 'currentColor';\n          break;\n        default:\n          iconColor = this.color;\n      }\n    } else {\n      iconColor = this.darkIcon ? 'black' : 'white';\n    }\n\n    return (\n      <div class=\"icon-container\">\n        <svg {...(iconData?.attrs ?? {})} fill={iconColor}>\n          {iconData?.content?.map((item, index) => {\n            if (item?.elem === 'path') {\n              return <path {...(item?.attrs ?? {})} key={index} />;\n            } else if (item?.elem === 'circle') {\n              return <circle {...(item?.attrs ?? {})} key={index} />;\n            }\n            return null;\n          })}\n        </svg>\n      </div>\n    );\n  }\n}\n"],"version":3}