@dubai-design-system/components-js 3.12.3 → 3.12.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dda-attach-file.cjs.entry.js +5 -2
- package/dist/cjs/dda-attach-file.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-header-menu_3.cjs.entry.js +6 -2
- package/dist/cjs/dda-header-menu_3.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-header.cjs.entry.js +21 -9
- package/dist/cjs/dda-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-horizontal-stepper.cjs.entry.js +1 -1
- package/dist/cjs/dda-segmented-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dda-select.cjs.entry.js +2 -2
- package/dist/cjs/dda-select.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-split-button.cjs.entry.js +56 -0
- package/dist/cjs/dda-split-button.cjs.entry.js.map +1 -0
- package/dist/cjs/dda-sticky-footer.cjs.entry.js +1 -1
- package/dist/cjs/dda-tabs.cjs.entry.js +1 -1
- package/dist/cjs/dda-textarea.cjs.entry.js +1 -1
- package/dist/cjs/dda-toggle.cjs.entry.js +2 -2
- package/dist/cjs/dda-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/dda-vertical-stepper.cjs.entry.js +1 -1
- package/dist/cjs/dda.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/assets/img/Team-Section-Card-1.svg +9 -9
- package/dist/collection/assets/img/icn/icn-Config.svg +9 -9
- package/dist/collection/assets/img/icn/icn-card-facebook.svg +11 -11
- package/dist/collection/assets/img/icn/icn-card-linkdin.svg +4 -4
- package/dist/collection/assets/img/icn/icn-card-telegram.svg +11 -11
- package/dist/collection/assets/img/icn/icn-card-twitter-x.svg +10 -10
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/dda-attach-file/dda-attach-file.js +24 -2
- package/dist/collection/components/dda-attach-file/dda-attach-file.js.map +1 -1
- package/dist/collection/components/dda-attach-file/dda-attach-file.stories.js +3 -0
- package/dist/collection/components/dda-attach-file/dda-attach-file.stories.js.map +1 -1
- package/dist/collection/components/dda-header/dda-header-main.css +1 -0
- package/dist/collection/components/dda-header/dda-header.js +20 -8
- package/dist/collection/components/dda-header/dda-header.js.map +1 -1
- package/dist/collection/components/dda-header/dda-header.stories.js +3 -3
- package/dist/collection/components/dda-header/dda-header.stories.js.map +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.js +7 -3
- package/dist/collection/components/dda-header-menu/dda-header-menu.js.map +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.stories.js +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.stories.js.map +1 -1
- package/dist/collection/components/dda-select/dda-select.js +2 -2
- package/dist/collection/components/dda-select/dda-select.js.map +1 -1
- package/dist/collection/components/dda-select/dda-select.stories.js +4 -3
- package/dist/collection/components/dda-select/dda-select.stories.js.map +1 -1
- package/dist/collection/components/dda-slider/dda-slider.js +1 -1
- package/dist/collection/components/dda-split-button/dda-split-button.css +607 -0
- package/dist/collection/components/dda-split-button/dda-split-button.js +395 -0
- package/dist/collection/components/dda-split-button/dda-split-button.js.map +1 -0
- package/dist/collection/components/dda-split-button/dda-split-button.stories.js +125 -0
- package/dist/collection/components/dda-split-button/dda-split-button.stories.js.map +1 -0
- package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.js +1 -1
- package/dist/collection/components/dda-tabs/dda-tabs.js +1 -1
- package/dist/collection/components/dda-textarea/dda-textarea.js +1 -1
- package/dist/collection/components/dda-toggle/dda-toggle.js +2 -2
- package/dist/collection/components/dda-tooltip/dda-tooltip.js +1 -1
- package/dist/collection/components/segmented-groups/dda-segmented-tabs/dda-segmented-tabs.js +1 -1
- package/dist/collection/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.js +1 -1
- package/dist/collection/components/stepper/dda-vertical-stepper/dda-vertical-stepper.js +1 -1
- package/dist/components/dda-attach-file.js +6 -2
- package/dist/components/dda-attach-file.js.map +1 -1
- package/dist/components/dda-header-menu.js +1 -1
- package/dist/components/dda-header.js +23 -11
- package/dist/components/dda-header.js.map +1 -1
- package/dist/components/dda-horizontal-stepper.js +1 -1
- package/dist/components/dda-segmented-tabs.js +1 -1
- package/dist/components/dda-select.js +2 -2
- package/dist/components/dda-select.js.map +1 -1
- package/dist/components/dda-split-button.d.ts +11 -0
- package/dist/components/dda-split-button.js +87 -0
- package/dist/components/dda-split-button.js.map +1 -0
- package/dist/components/dda-sticky-footer.js +2 -2
- package/dist/components/dda-tabs.js +1 -1
- package/dist/components/dda-textarea.js +1 -1
- package/dist/components/dda-toggle.js +2 -2
- package/dist/components/dda-tooltip.js +1 -1
- package/dist/components/dda-vertical-stepper.js +1 -1
- package/dist/components/{p-e5df7bea.js → p-426c4cde.js} +2 -2
- package/dist/components/{p-e5df7bea.js.map → p-426c4cde.js.map} +1 -1
- package/dist/components/{p-f0f752d2.js → p-857c1ac9.js} +7 -3
- package/dist/components/p-857c1ac9.js.map +1 -0
- package/dist/dda/dda.esm.js +1 -1
- package/dist/dda/dda.esm.js.map +1 -1
- package/dist/dda/{p-1cf47f82.entry.js → p-11b79158.entry.js} +2 -2
- package/dist/dda/p-1fa27da3.entry.js +2 -0
- package/dist/dda/p-1fa27da3.entry.js.map +1 -0
- package/dist/dda/{p-210d62fb.entry.js → p-24da4601.entry.js} +2 -2
- package/dist/dda/p-24da4601.entry.js.map +1 -0
- package/dist/dda/p-2525597b.entry.js +2 -0
- package/dist/dda/p-2525597b.entry.js.map +1 -0
- package/dist/dda/{p-6907700e.entry.js → p-27c798b5.entry.js} +2 -2
- package/dist/dda/{p-bdaee99c.entry.js → p-4a2eeccb.entry.js} +2 -2
- package/dist/dda/{p-448d72f4.entry.js → p-5c5aeda7.entry.js} +2 -2
- package/dist/dda/p-5c5aeda7.entry.js.map +1 -0
- package/dist/dda/{p-3e36c414.entry.js → p-78b3487b.entry.js} +2 -2
- package/dist/dda/p-9c090bc6.entry.js +2 -0
- package/dist/dda/p-9c090bc6.entry.js.map +1 -0
- package/{www/build/p-f60d6c1f.entry.js → dist/dda/p-af2345fb.entry.js} +2 -2
- package/dist/dda/{p-a42f8db6.entry.js → p-b0185c4d.entry.js} +2 -2
- package/dist/dda/{p-e5783b18.entry.js → p-ca2e33b9.entry.js} +2 -2
- package/dist/dda/{p-90c3c3b3.entry.js → p-ca50cf49.entry.js} +2 -2
- package/dist/esm/dda-attach-file.entry.js +5 -2
- package/dist/esm/dda-attach-file.entry.js.map +1 -1
- package/dist/esm/dda-header-menu_3.entry.js +6 -2
- package/dist/esm/dda-header-menu_3.entry.js.map +1 -1
- package/dist/esm/dda-header.entry.js +21 -9
- package/dist/esm/dda-header.entry.js.map +1 -1
- package/dist/esm/dda-horizontal-stepper.entry.js +1 -1
- package/dist/esm/dda-segmented-tabs.entry.js +1 -1
- package/dist/esm/dda-select.entry.js +2 -2
- package/dist/esm/dda-select.entry.js.map +1 -1
- package/dist/esm/dda-split-button.entry.js +52 -0
- package/dist/esm/dda-split-button.entry.js.map +1 -0
- package/dist/esm/dda-sticky-footer.entry.js +1 -1
- package/dist/esm/dda-tabs.entry.js +1 -1
- package/dist/esm/dda-textarea.entry.js +1 -1
- package/dist/esm/dda-toggle.entry.js +2 -2
- package/dist/esm/dda-tooltip.entry.js +1 -1
- package/dist/esm/dda-vertical-stepper.entry.js +1 -1
- package/dist/esm/dda.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/dda-attach-file/dda-attach-file.d.ts +1 -0
- package/dist/types/components/dda-attach-file/dda-attach-file.stories.d.ts +4 -0
- package/dist/types/components/dda-split-button/dda-split-button.d.ts +27 -0
- package/dist/types/components/dda-split-button/dda-split-button.stories.d.ts +77 -0
- package/dist/types/components.d.ts +79 -16
- package/package.json +2 -2
- package/readme.md +11 -0
- package/www/build/dda.esm.js +1 -1
- package/www/build/dda.esm.js.map +1 -1
- package/www/build/{p-1cf47f82.entry.js → p-11b79158.entry.js} +2 -2
- package/www/build/p-1fa27da3.entry.js +2 -0
- package/www/build/p-1fa27da3.entry.js.map +1 -0
- package/www/build/{p-210d62fb.entry.js → p-24da4601.entry.js} +2 -2
- package/www/build/p-24da4601.entry.js.map +1 -0
- package/www/build/p-2525597b.entry.js +2 -0
- package/www/build/p-2525597b.entry.js.map +1 -0
- package/www/build/{p-6907700e.entry.js → p-27c798b5.entry.js} +2 -2
- package/www/build/{p-bdaee99c.entry.js → p-4a2eeccb.entry.js} +2 -2
- package/www/build/{p-448d72f4.entry.js → p-5c5aeda7.entry.js} +2 -2
- package/www/build/p-5c5aeda7.entry.js.map +1 -0
- package/www/build/{p-3e36c414.entry.js → p-78b3487b.entry.js} +2 -2
- package/www/build/p-9c090bc6.entry.js +2 -0
- package/www/build/p-9c090bc6.entry.js.map +1 -0
- package/{dist/dda/p-f60d6c1f.entry.js → www/build/p-af2345fb.entry.js} +2 -2
- package/www/build/{p-a42f8db6.entry.js → p-b0185c4d.entry.js} +2 -2
- package/www/build/{p-e5783b18.entry.js → p-ca2e33b9.entry.js} +2 -2
- package/www/build/{p-90c3c3b3.entry.js → p-ca50cf49.entry.js} +2 -2
- package/dist/components/p-f0f752d2.js.map +0 -1
- package/dist/dda/p-210d62fb.entry.js.map +0 -1
- package/dist/dda/p-448d72f4.entry.js.map +0 -1
- package/dist/dda/p-a9da1c36.entry.js +0 -2
- package/dist/dda/p-a9da1c36.entry.js.map +0 -1
- package/dist/dda/p-ce9b7aeb.entry.js +0 -2
- package/dist/dda/p-ce9b7aeb.entry.js.map +0 -1
- package/www/build/p-210d62fb.entry.js.map +0 -1
- package/www/build/p-448d72f4.entry.js.map +0 -1
- package/www/build/p-a9da1c36.entry.js +0 -2
- package/www/build/p-a9da1c36.entry.js.map +0 -1
- package/www/build/p-ce9b7aeb.entry.js +0 -2
- package/www/build/p-ce9b7aeb.entry.js.map +0 -1
- /package/dist/dda/{p-1cf47f82.entry.js.map → p-11b79158.entry.js.map} +0 -0
- /package/dist/dda/{p-6907700e.entry.js.map → p-27c798b5.entry.js.map} +0 -0
- /package/dist/dda/{p-bdaee99c.entry.js.map → p-4a2eeccb.entry.js.map} +0 -0
- /package/dist/dda/{p-3e36c414.entry.js.map → p-78b3487b.entry.js.map} +0 -0
- /package/dist/dda/{p-f60d6c1f.entry.js.map → p-af2345fb.entry.js.map} +0 -0
- /package/dist/dda/{p-a42f8db6.entry.js.map → p-b0185c4d.entry.js.map} +0 -0
- /package/dist/dda/{p-e5783b18.entry.js.map → p-ca2e33b9.entry.js.map} +0 -0
- /package/dist/dda/{p-90c3c3b3.entry.js.map → p-ca50cf49.entry.js.map} +0 -0
- /package/www/build/{p-1cf47f82.entry.js.map → p-11b79158.entry.js.map} +0 -0
- /package/www/build/{p-6907700e.entry.js.map → p-27c798b5.entry.js.map} +0 -0
- /package/www/build/{p-bdaee99c.entry.js.map → p-4a2eeccb.entry.js.map} +0 -0
- /package/www/build/{p-3e36c414.entry.js.map → p-78b3487b.entry.js.map} +0 -0
- /package/www/build/{p-f60d6c1f.entry.js.map → p-af2345fb.entry.js.map} +0 -0
- /package/www/build/{p-a42f8db6.entry.js.map → p-b0185c4d.entry.js.map} +0 -0
- /package/www/build/{p-e5783b18.entry.js.map → p-ca2e33b9.entry.js.map} +0 -0
- /package/www/build/{p-90c3c3b3.entry.js.map → p-ca50cf49.entry.js.map} +0 -0
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_15250_281)">
|
|
3
|
-
<path d="M20 10C20 4.47715 15.5229 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9912 3.65684 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3084 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.3334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3432 19.1283 20 14.9912 20 10Z" fill="black"/>
|
|
4
|
-
<path d="M13.8926 12.8906L14.3359 10H11.5625V8.125C11.5625 7.33418 11.95 6.5625 13.1922 6.5625H14.4531V4.10156C14.4531 4.10156 13.3088 3.90625 12.2146 3.90625C9.93047 3.90625 8.4375 5.29063 8.4375 7.79688V10H5.89844V12.8906H8.4375V19.8785C9.47287 20.0405 10.5271 20.0405 11.5625 19.8785V12.8906H13.8926Z" fill="white"/>
|
|
5
|
-
</g>
|
|
6
|
-
<defs>
|
|
7
|
-
<clipPath id="clip0_15250_281">
|
|
8
|
-
<rect width="20" height="20" fill="white"/>
|
|
9
|
-
</clipPath>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_15250_281)">
|
|
3
|
+
<path d="M20 10C20 4.47715 15.5229 0 10 0C4.47715 0 0 4.47715 0 10C0 14.9912 3.65684 19.1283 8.4375 19.8785V12.8906H5.89844V10H8.4375V7.79688C8.4375 5.29063 9.93047 3.90625 12.2146 3.90625C13.3084 3.90625 14.4531 4.10156 14.4531 4.10156V6.5625H13.1922C11.95 6.5625 11.5625 7.3334 11.5625 8.125V10H14.3359L13.8926 12.8906H11.5625V19.8785C16.3432 19.1283 20 14.9912 20 10Z" fill="black"/>
|
|
4
|
+
<path d="M13.8926 12.8906L14.3359 10H11.5625V8.125C11.5625 7.33418 11.95 6.5625 13.1922 6.5625H14.4531V4.10156C14.4531 4.10156 13.3088 3.90625 12.2146 3.90625C9.93047 3.90625 8.4375 5.29063 8.4375 7.79688V10H5.89844V12.8906H8.4375V19.8785C9.47287 20.0405 10.5271 20.0405 11.5625 19.8785V12.8906H13.8926Z" fill="white"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_15250_281">
|
|
8
|
+
<rect width="20" height="20" fill="white"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path d="M-0.00012207 1.43266C-0.00012207 0.641875 0.661909 0 1.478 0H18.5218C19.3382 0 19.9999 0.641875 19.9999 1.43266V18.5676C19.9999 19.3586 19.3382 20 18.5218 20H1.478C0.661987 20 -0.00012207 19.3587 -0.00012207 18.5678V1.43242V1.43266Z" fill="black"/>
|
|
3
|
-
<path d="M6.07767 16.7374V7.73329H3.08485V16.7374H6.07798H6.07767ZM4.58188 6.50415C5.62532 6.50415 6.27493 5.81274 6.27493 4.94868C6.2554 4.06493 5.62532 3.39282 4.60173 3.39282C3.57743 3.39282 2.90845 4.06493 2.90845 4.9486C2.90845 5.81267 3.55782 6.50407 4.56228 6.50407H4.58165L4.58188 6.50415ZM7.73423 16.7374H10.7268V11.7096C10.7268 11.4409 10.7463 11.1714 10.8254 10.9795C11.0416 10.4416 11.5341 9.88478 12.361 9.88478C13.4437 9.88478 13.877 10.7104 13.877 11.9209V16.7374H16.8695V11.5747C16.8695 8.80915 15.3933 7.5222 13.4243 7.5222C11.81 7.5222 11.101 8.42446 10.7071 9.03899H10.727V7.7336H7.73438C7.77345 8.57829 7.73415 16.7377 7.73415 16.7377L7.73423 16.7374Z" fill="white"/>
|
|
4
|
-
</svg>
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M-0.00012207 1.43266C-0.00012207 0.641875 0.661909 0 1.478 0H18.5218C19.3382 0 19.9999 0.641875 19.9999 1.43266V18.5676C19.9999 19.3586 19.3382 20 18.5218 20H1.478C0.661987 20 -0.00012207 19.3587 -0.00012207 18.5678V1.43242V1.43266Z" fill="black"/>
|
|
3
|
+
<path d="M6.07767 16.7374V7.73329H3.08485V16.7374H6.07798H6.07767ZM4.58188 6.50415C5.62532 6.50415 6.27493 5.81274 6.27493 4.94868C6.2554 4.06493 5.62532 3.39282 4.60173 3.39282C3.57743 3.39282 2.90845 4.06493 2.90845 4.9486C2.90845 5.81267 3.55782 6.50407 4.56228 6.50407H4.58165L4.58188 6.50415ZM7.73423 16.7374H10.7268V11.7096C10.7268 11.4409 10.7463 11.1714 10.8254 10.9795C11.0416 10.4416 11.5341 9.88478 12.361 9.88478C13.4437 9.88478 13.877 10.7104 13.877 11.9209V16.7374H16.8695V11.5747C16.8695 8.80915 15.3933 7.5222 13.4243 7.5222C11.81 7.5222 11.101 8.42446 10.7071 9.03899H10.727V7.7336H7.73438C7.77345 8.57829 7.73415 16.7377 7.73415 16.7377L7.73423 16.7374Z" fill="white"/>
|
|
4
|
+
</svg>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_15250_290)">
|
|
3
|
-
<path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="black"/>
|
|
4
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.52666 9.89446C7.44186 8.62435 9.38579 7.78702 10.3584 7.38246C13.1355 6.22737 13.7126 6.02672 14.0887 6.02009C14.1714 6.01863 14.3564 6.03913 14.4762 6.13635C14.5774 6.21844 14.6052 6.32934 14.6185 6.40717C14.6319 6.485 14.6484 6.6623 14.6353 6.80083C14.4848 8.38207 13.8336 12.2193 13.5023 13.9903C13.3621 14.7397 13.0861 14.991 12.8189 15.0155C12.2382 15.069 11.7972 14.6318 11.2348 14.2631C10.3546 13.6861 9.85741 13.327 9.00309 12.764C8.01578 12.1134 8.65581 11.7558 9.21848 11.1714C9.36573 11.0184 11.9244 8.69115 11.9739 8.48002C11.9801 8.45362 11.9859 8.3552 11.9274 8.30323C11.8689 8.25125 11.7826 8.26903 11.7203 8.28316C11.6321 8.3032 10.226 9.23252 7.50228 11.0711C7.10319 11.3452 6.7417 11.4787 6.41782 11.4717C6.06077 11.464 5.37395 11.2698 4.86336 11.1039C4.23711 10.9003 3.73938 10.7927 3.78272 10.4469C3.8053 10.2669 4.05328 10.0827 4.52666 9.89446Z" fill="white"/>
|
|
5
|
-
</g>
|
|
6
|
-
<defs>
|
|
7
|
-
<clipPath id="clip0_15250_290">
|
|
8
|
-
<rect width="20" height="20" fill="white"/>
|
|
9
|
-
</clipPath>
|
|
10
|
-
</defs>
|
|
11
|
-
</svg>
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_15250_290)">
|
|
3
|
+
<path d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="black"/>
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.52666 9.89446C7.44186 8.62435 9.38579 7.78702 10.3584 7.38246C13.1355 6.22737 13.7126 6.02672 14.0887 6.02009C14.1714 6.01863 14.3564 6.03913 14.4762 6.13635C14.5774 6.21844 14.6052 6.32934 14.6185 6.40717C14.6319 6.485 14.6484 6.6623 14.6353 6.80083C14.4848 8.38207 13.8336 12.2193 13.5023 13.9903C13.3621 14.7397 13.0861 14.991 12.8189 15.0155C12.2382 15.069 11.7972 14.6318 11.2348 14.2631C10.3546 13.6861 9.85741 13.327 9.00309 12.764C8.01578 12.1134 8.65581 11.7558 9.21848 11.1714C9.36573 11.0184 11.9244 8.69115 11.9739 8.48002C11.9801 8.45362 11.9859 8.3552 11.9274 8.30323C11.8689 8.25125 11.7826 8.26903 11.7203 8.28316C11.6321 8.3032 10.226 9.23252 7.50228 11.0711C7.10319 11.3452 6.7417 11.4787 6.41782 11.4717C6.06077 11.464 5.37395 11.2698 4.86336 11.1039C4.23711 10.9003 3.73938 10.7927 3.78272 10.4469C3.8053 10.2669 4.05328 10.0827 4.52666 9.89446Z" fill="white"/>
|
|
5
|
+
</g>
|
|
6
|
+
<defs>
|
|
7
|
+
<clipPath id="clip0_15250_290">
|
|
8
|
+
<rect width="20" height="20" fill="white"/>
|
|
9
|
+
</clipPath>
|
|
10
|
+
</defs>
|
|
11
|
+
</svg>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<g clip-path="url(#clip0_15250_277)">
|
|
3
|
-
<path d="M10 0C15.5228 5.15406e-07 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 5.15422e-07 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM8.62012 10.5977L3.80957 15.7939H4.89258L9.10352 11.2441L12.5059 15.7939H16.1904L11.1416 9.04297L15.6182 4.20605H14.5361L10.6572 8.39648L7.52441 4.20605H3.83984L8.62012 10.5977ZM14.5977 14.9961H12.9053L5.43164 5.00391H7.12402L14.5977 14.9961Z" fill="#40484F"/>
|
|
4
|
-
</g>
|
|
5
|
-
<defs>
|
|
6
|
-
<clipPath id="clip0_15250_277">
|
|
7
|
-
<rect width="20" height="20" fill="white"/>
|
|
8
|
-
</clipPath>
|
|
9
|
-
</defs>
|
|
10
|
-
</svg>
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_15250_277)">
|
|
3
|
+
<path d="M10 0C15.5228 5.15406e-07 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 5.15422e-07 15.5228 0 10C0 4.47715 4.47715 0 10 0ZM8.62012 10.5977L3.80957 15.7939H4.89258L9.10352 11.2441L12.5059 15.7939H16.1904L11.1416 9.04297L15.6182 4.20605H14.5361L10.6572 8.39648L7.52441 4.20605H3.83984L8.62012 10.5977ZM14.5977 14.9961H12.9053L5.43164 5.00391H7.12402L14.5977 14.9961Z" fill="#40484F"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_15250_277">
|
|
7
|
+
<rect width="20" height="20" fill="white"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"components/dda-scroll-icon/dda-scroll-icon.js",
|
|
38
38
|
"components/dda-search-input/dda-search-input.js",
|
|
39
39
|
"components/dda-select/dda-select.js",
|
|
40
|
+
"components/dda-split-button/dda-split-button.js",
|
|
40
41
|
"components/dda-sticky-footer/dda-sticky-footer.js",
|
|
41
42
|
"components/dda-tabs/dda-tabs.js",
|
|
42
43
|
"components/dda-textarea/dda-textarea.js",
|
|
@@ -37,6 +37,7 @@ export class DdaAttachFile {
|
|
|
37
37
|
}
|
|
38
38
|
handleFileInput(event) {
|
|
39
39
|
var _a;
|
|
40
|
+
console.log(this.fileInputRef.value);
|
|
40
41
|
const files = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
|
|
41
42
|
if (files && files.length > 0) {
|
|
42
43
|
const selectedFile = files[0];
|
|
@@ -66,7 +67,9 @@ export class DdaAttachFile {
|
|
|
66
67
|
removeFile() {
|
|
67
68
|
this.file = null;
|
|
68
69
|
this.isFileUploaded = false;
|
|
69
|
-
this.fileInputRef
|
|
70
|
+
if (this.fileInputRef) {
|
|
71
|
+
this.fileInputRef.value = null;
|
|
72
|
+
}
|
|
70
73
|
this.internalErrorMessage = '';
|
|
71
74
|
this.validation_type = 'normal';
|
|
72
75
|
this.fileChanged.emit(null);
|
|
@@ -86,7 +89,7 @@ export class DdaAttachFile {
|
|
|
86
89
|
this.component_mode,
|
|
87
90
|
].filter(Boolean).join(' ');
|
|
88
91
|
const shouldShowError = this.validation_type === 'error' && (this.internalErrorMessage || this.error_message);
|
|
89
|
-
return (h(Host, { key: '
|
|
92
|
+
return (h(Host, { key: 'a3af07f7c3cf84bbddd821adeb10c409dd00d049' }, h("div", { key: '08e612545cd7728e2c022b36e6b30334d5d8e07c', class: inputClass }, this.label && (h("span", { key: '95739b39f9672aac5bfdda980cafa85771c51d5a', class: "dda-input-label", id: `${this.input_id}-label` }, this.label)), h("div", { key: '167789dcacf1bdccb85148168f63d81785e780c9', class: "dda-input-field-group dda-attach-file" }, this.file ? (h("div", { class: "dda-file-details" }, h("div", { class: "dda-items" }, h("img", { src: this.getFileIcon(this.file.name), alt: "File Icon", class: "dda-file-icon" }), h("span", { class: "dda-file-name" }, this.file.name)), h("button", { type: "button", class: "remove-file", name: this.button_name, id: this.delete_button_id, role: "button", tabIndex: 0, "aria-label": this.button_aria_label || 'Remove file', onClick: () => this.removeFile(), disabled: this.disabled }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")))) : (h("div", { class: "dda-file-input" }, h("span", null, this.place_holder || 'No File Selected'), h("button", { type: "button", class: "dda-file-choose", name: this.button_name, id: this.button_id, tabIndex: 0, "aria-labelledby": `${this.button_id}-label`, onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); }, disabled: this.disabled }, this.upload_button_text || 'Choose File'), h("span", { id: `${this.button_id}-label`, class: "visually-hidden" }, this.upload_button_text || 'Choose File'), h("label", { htmlFor: this.input_id, class: "visually-hidden" }, this.label), h("input", { id: this.input_id, name: this.input_name, type: "file", accept: this.accept, disabled: this.disabled, hidden: true, ref: (el) => (this.fileInputRef = el), onInput: (event) => this.handleFileInput(event) })))), shouldShowError ? (h("span", { class: "dda-error-message", id: this.validation_id, role: "alert", "aria-live": "assertive" }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info"), h("span", null, this.internalErrorMessage || this.error_message)))) : this.isFileUploaded && this.success_text ? (h("span", { class: "dda-success-text", id: this.validation_id, role: "status", "aria-live": "polite" }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "check"), h("span", null, this.success_text)))) : this.helper_text ? (h("span", { class: "dda-helper-text", id: this.validation_id }, h("span", { class: "dda-d-flex dda-align-items-start dda-gap-2" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "info"), h("span", null, this.helper_text)))) : null)));
|
|
90
93
|
}
|
|
91
94
|
static get is() { return "dda-attach-file"; }
|
|
92
95
|
static get properties() {
|
|
@@ -418,6 +421,25 @@ export class DdaAttachFile {
|
|
|
418
421
|
"attribute": "button_id",
|
|
419
422
|
"reflect": false
|
|
420
423
|
},
|
|
424
|
+
"delete_button_id": {
|
|
425
|
+
"type": "string",
|
|
426
|
+
"mutable": false,
|
|
427
|
+
"complexType": {
|
|
428
|
+
"original": "string",
|
|
429
|
+
"resolved": "string",
|
|
430
|
+
"references": {}
|
|
431
|
+
},
|
|
432
|
+
"required": false,
|
|
433
|
+
"optional": false,
|
|
434
|
+
"docs": {
|
|
435
|
+
"tags": [],
|
|
436
|
+
"text": ""
|
|
437
|
+
},
|
|
438
|
+
"getter": false,
|
|
439
|
+
"setter": false,
|
|
440
|
+
"attribute": "delete_button_id",
|
|
441
|
+
"reflect": false
|
|
442
|
+
},
|
|
421
443
|
"button_name": {
|
|
422
444
|
"type": "string",
|
|
423
445
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dda-attach-file.js","sourceRoot":"","sources":["../../../src/components/dda-attach-file/dda-attach-file.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Method, h, Host } from '@stencil/core';\r\nimport pdfIcon from '../../assets/img/icn/file_icons/icn-PDF.svg';\r\nimport pptIcon from '../../assets/img/icn/file_icons/icn-PowerPoint.svg';\r\nimport wordIcon from '../../assets/img/icn/file_icons/icn-Word.svg';\r\nimport excelIcon from '../../assets/img/icn/file_icons/icn-Excel.svg';\r\nimport imageIcon from '../../assets/img/icn/file_icons/icn-Image.svg';\r\nimport videoIcon from '../../assets/img/icn/file_icons/icn-Video.svg';\r\nimport onenoteIcon from '../../assets/img/icn/file_icons/icn-OneNote.svg';\r\nimport defaultIcon from '../../assets/img/icn/file_icons/icn-default.svg';\r\n\r\n@Component({\r\n tag: 'dda-attach-file',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaAttachFile {\r\n @Prop() label: string;\r\n @Prop() place_holder: string;\r\n @Prop() upload_button_text: string;\r\n @Prop() helper_text: string;\r\n @Prop() success_text: string;\r\n @Prop() error_message: string;\r\n @Prop() size?: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string = 'text';\r\n @Prop() input_type?: string;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_aria_label?: string = '';\r\n @Prop() input_id: string;\r\n @Prop() input_name?: string;\r\n @Prop() button_id: string;\r\n @Prop() button_name?: string;\r\n @Prop() accept?: string;\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() max_file_size: number = 5; // in MB\r\n @Prop() file_size_error_message: string = 'File size should not exceed {max} MB';\r\n \r\n @State() file: File | null = null;\r\n @State() isFileUploaded: boolean = false;\r\n @State() internalErrorMessage: string = '';\r\n\r\n private fileInputRef: HTMLInputElement;\r\n\r\n @Event() fileChanged: EventEmitter<File | null>;\r\n\r\n @Method()\r\n async getFile(): Promise<File | null> {\r\n return this.file;\r\n }\r\n\r\n private fileIcons = {\r\n pdf: pdfIcon,\r\n pptx: pptIcon,\r\n docx: wordIcon,\r\n xlsx: excelIcon,\r\n png: imageIcon,\r\n jpg: imageIcon,\r\n jpeg: imageIcon,\r\n mp4: videoIcon,\r\n mkv: videoIcon,\r\n one: onenoteIcon,\r\n };\r\n\r\n handleFileInput(event: Event) {\r\n const files = (event.target as HTMLInputElement)?.files;\r\n if (files && files.length > 0) {\r\n const selectedFile = files[0];\r\n const fileSizeInMB = selectedFile.size / (1024 * 1024);\r\n\r\n if (this.max_file_size && fileSizeInMB > this.max_file_size) {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = this.file_size_error_message.replace('{max}', this.max_file_size.toString());\r\n this.validation_type = 'error';\r\n this.fileChanged.emit(null);\r\n return;\r\n }\r\n\r\n this.file = selectedFile;\r\n this.isFileUploaded = true;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(this.file);\r\n } else {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n }\r\n\r\n removeFile() {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.fileInputRef.value = '';\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n\r\n getFileIcon(fileName: string) {\r\n const extension = fileName.split('.').pop()?.toLowerCase();\r\n return this.fileIcons[extension] || defaultIcon;\r\n }\r\n\r\n render() {\r\n const inputClass = [\r\n 'dda-input-container',\r\n this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n this.size ? `dda-input-size-${this.size}` : '',\r\n this.input_type ? `dda-input-${this.input_type}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ].filter(Boolean).join(' ');\r\n\r\n const shouldShowError = this.validation_type === 'error' && (this.internalErrorMessage || this.error_message);\r\n\r\n return (\r\n <Host>\r\n <div class={inputClass}>\r\n {this.label && (\r\n <span class=\"dda-input-label\" id={`${this.input_id}-label`}>\r\n {this.label}\r\n </span>\r\n )}\r\n\r\n <div class=\"dda-input-field-group dda-attach-file\">\r\n {this.file ? (\r\n <div class=\"dda-file-details\">\r\n <div class=\"dda-items\">\r\n <img src={this.getFileIcon(this.file.name)} alt=\"File Icon\" class=\"dda-file-icon\" />\r\n <span class=\"dda-file-name\">{this.file.name}</span>\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"remove-file\"\r\n name={this.button_name}\r\n id={this.button_id}\r\n role=\"button\"\r\n tabIndex={0}\r\n aria-label={this.button_aria_label || 'Remove file'}\r\n onClick={() => this.removeFile()}\r\n disabled={this.disabled}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">close</i>\r\n </button>\r\n </div>\r\n ) : (\r\n <div class=\"dda-file-input\">\r\n <span>{this.place_holder || 'No File Selected'}</span>\r\n <button\r\n type=\"button\"\r\n class=\"dda-file-choose\"\r\n name={this.button_name}\r\n id={this.button_id}\r\n tabIndex={0}\r\n aria-labelledby={`${this.button_id}-label`}\r\n onClick={() => this.fileInputRef?.click()}\r\n disabled={this.disabled}\r\n >\r\n {this.upload_button_text || 'Choose File'}\r\n </button>\r\n <span id={`${this.button_id}-label`} class=\"visually-hidden\">\r\n {this.upload_button_text || 'Choose File'}\r\n </span>\r\n\r\n <label htmlFor={this.input_id} class=\"visually-hidden\">\r\n {this.label}\r\n </label>\r\n <input\r\n id={this.input_id}\r\n name={this.input_name}\r\n type=\"file\"\r\n accept={this.accept}\r\n disabled={this.disabled}\r\n hidden\r\n ref={(el) => (this.fileInputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleFileInput(event)}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {shouldShowError ? (\r\n <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\" aria-live=\"assertive\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.internalErrorMessage || this.error_message}</span>\r\n </span>\r\n </span>\r\n ) : this.isFileUploaded && this.success_text ? (\r\n <span class=\"dda-success-text\" id={this.validation_id} role=\"status\" aria-live=\"polite\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">check</i>\r\n <span>{this.success_text}</span>\r\n </span>\r\n </span>\r\n ) : this.helper_text ? (\r\n <span class=\"dda-helper-text\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.helper_text}</span>\r\n </span>\r\n </span>\r\n ) : null}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"dda-attach-file.js","sourceRoot":"","sources":["../../../src/components/dda-attach-file/dda-attach-file.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,OAAO,MAAM,6CAA6C,CAAC;AAClE,OAAO,OAAO,MAAM,oDAAoD,CAAC;AACzE,OAAO,QAAQ,MAAM,8CAA8C,CAAC;AACpE,OAAO,SAAS,MAAM,+CAA+C,CAAC;AACtE,OAAO,SAAS,MAAM,+CAA+C,CAAC;AACtE,OAAO,SAAS,MAAM,+CAA+C,CAAC;AACtE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAO1E,MAAM,OAAO,aAAa;IAL1B;QAcU,kBAAa,GAAW,MAAM,CAAC;QAE/B,iBAAY,GAAY,EAAE,CAAC;QAE3B,eAAU,GAAY,EAAE,CAAC;QACzB,sBAAiB,GAAY,EAAE,CAAC;QAOhC,aAAQ,GAAY,KAAK,CAAC;QAE1B,kBAAa,GAAW,CAAC,CAAC,CAAC,QAAQ;QACnC,4BAAuB,GAAW,sCAAsC,CAAC;QAExE,SAAI,GAAgB,IAAI,CAAC;QACzB,mBAAc,GAAY,KAAK,CAAC;QAChC,yBAAoB,GAAW,EAAE,CAAC;QAWnC,cAAS,GAAG;YAClB,GAAG,EAAE,OAAO;YACZ,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,SAAS;YACf,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,SAAS;YACd,GAAG,EAAE,WAAW;SACjB,CAAC;KAyJH;IAxKC,KAAK,CAAC,OAAO;QACX,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAeD,eAAe,CAAC,KAAY;;QAC1B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAErC,MAAM,KAAK,GAAG,MAAC,KAAK,CAAC,MAA2B,0CAAE,KAAK,CAAC;QACxD,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC9B,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;YAEvD,IAAI,IAAI,CAAC,aAAa,IAAI,YAAY,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC5D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC5B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACzG,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;gBAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,OAAO;YACT,CAAC;YAED,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;YACzB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC;QACjC,CAAC;QACG,IAAI,CAAC,oBAAoB,GAAG,EAAE,CAAC;QAC/B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,WAAW,CAAC,QAAgB;;QAC1B,MAAM,SAAS,GAAG,MAAA,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,0CAAE,WAAW,EAAE,CAAC;QAC3D,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,qBAAqB;YACrB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE;YACpE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;YAC9C,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;YACrD,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,KAAK,OAAO,IAAI,CAAC,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9G,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,UAAU;gBACnB,IAAI,CAAC,KAAK,IAAI,CACb,6DAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,QAAQ,QAAQ,IACvD,IAAI,CAAC,KAAK,CACN,CACR;gBAED,4DAAK,KAAK,EAAC,uCAAuC,IAC/C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,WAAK,KAAK,EAAC,kBAAkB;oBAC3B,WAAK,KAAK,EAAC,WAAW;wBACpB,WAAK,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,eAAe,GAAG;wBACpF,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAQ,CAC/C;oBACN,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,aAAa,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,EAAE,EAAE,IAAI,CAAC,gBAAgB,EACzB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,IAAI,CAAC,iBAAiB,IAAI,aAAa,EACnD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBAEvB,SAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,YAAU,CACzE,CACL,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,gBAAgB;oBACzB,gBAAO,IAAI,CAAC,YAAY,IAAI,kBAAkB,CAAQ;oBACtD,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,QAAQ,EAAE,CAAC,qBACM,GAAG,IAAI,CAAC,SAAS,QAAQ,EAC1C,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAA,EAAA,EACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEtB,IAAI,CAAC,kBAAkB,IAAI,aAAa,CAClC;oBACT,YAAM,EAAE,EAAE,GAAG,IAAI,CAAC,SAAS,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IACzD,IAAI,CAAC,kBAAkB,IAAI,aAAa,CACpC;oBAEP,aAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IACnD,IAAI,CAAC,KAAK,CACL;oBACR,aACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,QACN,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAC/C,CACE,CACP,CACG;gBAEL,eAAe,CAAC,CAAC,CAAC,CACjB,YAAM,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,EAAC,OAAO,eAAW,WAAW;oBACxF,YAAM,KAAK,EAAC,4CAA4C;wBACtD,SAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,WAAS;wBAC/E,gBAAO,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,aAAa,CAAQ,CACzD,CACF,CACR,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAC7C,YAAM,KAAK,EAAC,kBAAkB,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,eAAW,QAAQ;oBACrF,YAAM,KAAK,EAAC,4CAA4C;wBACtD,SAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,YAAU;wBAChF,gBAAO,IAAI,CAAC,YAAY,CAAQ,CAC3B,CACF,CACR,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACrB,YAAM,KAAK,EAAC,iBAAiB,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa;oBAClD,YAAM,KAAK,EAAC,4CAA4C;wBACtD,SAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,WAAS;wBAC/E,gBAAO,IAAI,CAAC,WAAW,CAAQ,CAC1B,CACF,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, Method, h, Host } from '@stencil/core';\r\nimport pdfIcon from '../../assets/img/icn/file_icons/icn-PDF.svg';\r\nimport pptIcon from '../../assets/img/icn/file_icons/icn-PowerPoint.svg';\r\nimport wordIcon from '../../assets/img/icn/file_icons/icn-Word.svg';\r\nimport excelIcon from '../../assets/img/icn/file_icons/icn-Excel.svg';\r\nimport imageIcon from '../../assets/img/icn/file_icons/icn-Image.svg';\r\nimport videoIcon from '../../assets/img/icn/file_icons/icn-Video.svg';\r\nimport onenoteIcon from '../../assets/img/icn/file_icons/icn-OneNote.svg';\r\nimport defaultIcon from '../../assets/img/icn/file_icons/icn-default.svg';\r\n\r\n@Component({\r\n tag: 'dda-attach-file',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaAttachFile {\r\n @Prop() label: string;\r\n @Prop() place_holder: string;\r\n @Prop() upload_button_text: string;\r\n @Prop() helper_text: string;\r\n @Prop() success_text: string;\r\n @Prop() error_message: string;\r\n @Prop() size?: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string = 'text';\r\n @Prop() input_type?: string;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_aria_label?: string = '';\r\n @Prop() input_id: string;\r\n @Prop() input_name?: string;\r\n @Prop() button_id: string;\r\n @Prop() delete_button_id: string;\r\n @Prop() button_name?: string;\r\n @Prop() accept?: string;\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() max_file_size: number = 5; // in MB\r\n @Prop() file_size_error_message: string = 'File size should not exceed {max} MB';\r\n \r\n @State() file: File | null = null;\r\n @State() isFileUploaded: boolean = false;\r\n @State() internalErrorMessage: string = '';\r\n\r\n private fileInputRef: HTMLInputElement;\r\n\r\n @Event() fileChanged: EventEmitter<File | null>;\r\n\r\n @Method()\r\n async getFile(): Promise<File | null> {\r\n return this.file;\r\n }\r\n\r\n private fileIcons = {\r\n pdf: pdfIcon,\r\n pptx: pptIcon,\r\n docx: wordIcon,\r\n xlsx: excelIcon,\r\n png: imageIcon,\r\n jpg: imageIcon,\r\n jpeg: imageIcon,\r\n mp4: videoIcon,\r\n mkv: videoIcon,\r\n one: onenoteIcon,\r\n };\r\n\r\n handleFileInput(event: Event) {\r\n console.log(this.fileInputRef.value);\r\n \r\n const files = (event.target as HTMLInputElement)?.files;\r\n if (files && files.length > 0) {\r\n const selectedFile = files[0];\r\n const fileSizeInMB = selectedFile.size / (1024 * 1024);\r\n\r\n if (this.max_file_size && fileSizeInMB > this.max_file_size) {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = this.file_size_error_message.replace('{max}', this.max_file_size.toString());\r\n this.validation_type = 'error';\r\n this.fileChanged.emit(null);\r\n return;\r\n }\r\n\r\n this.file = selectedFile;\r\n this.isFileUploaded = true;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(this.file);\r\n } else {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n }\r\n\r\n removeFile() {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n if (this.fileInputRef) {\r\n this.fileInputRef.value = null;\r\n}\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n\r\n getFileIcon(fileName: string) {\r\n const extension = fileName.split('.').pop()?.toLowerCase();\r\n return this.fileIcons[extension] || defaultIcon;\r\n }\r\n\r\n render() {\r\n const inputClass = [\r\n 'dda-input-container',\r\n this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n this.size ? `dda-input-size-${this.size}` : '',\r\n this.input_type ? `dda-input-${this.input_type}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ].filter(Boolean).join(' ');\r\n\r\n const shouldShowError = this.validation_type === 'error' && (this.internalErrorMessage || this.error_message);\r\n\r\n return (\r\n <Host>\r\n <div class={inputClass}>\r\n {this.label && (\r\n <span class=\"dda-input-label\" id={`${this.input_id}-label`}>\r\n {this.label}\r\n </span>\r\n )}\r\n\r\n <div class=\"dda-input-field-group dda-attach-file\">\r\n {this.file ? (\r\n <div class=\"dda-file-details\">\r\n <div class=\"dda-items\">\r\n <img src={this.getFileIcon(this.file.name)} alt=\"File Icon\" class=\"dda-file-icon\" />\r\n <span class=\"dda-file-name\">{this.file.name}</span>\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"remove-file\"\r\n name={this.button_name}\r\n id={this.delete_button_id}\r\n role=\"button\"\r\n tabIndex={0}\r\n aria-label={this.button_aria_label || 'Remove file'}\r\n onClick={() => this.removeFile()}\r\n disabled={this.disabled}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">close</i>\r\n </button>\r\n </div>\r\n ) : (\r\n <div class=\"dda-file-input\">\r\n <span>{this.place_holder || 'No File Selected'}</span>\r\n <button\r\n type=\"button\"\r\n class=\"dda-file-choose\"\r\n name={this.button_name}\r\n id={this.button_id}\r\n tabIndex={0}\r\n aria-labelledby={`${this.button_id}-label`}\r\n onClick={() => this.fileInputRef?.click()}\r\n disabled={this.disabled}\r\n >\r\n {this.upload_button_text || 'Choose File'}\r\n </button>\r\n <span id={`${this.button_id}-label`} class=\"visually-hidden\">\r\n {this.upload_button_text || 'Choose File'}\r\n </span>\r\n\r\n <label htmlFor={this.input_id} class=\"visually-hidden\">\r\n {this.label}\r\n </label>\r\n <input\r\n id={this.input_id}\r\n name={this.input_name}\r\n type=\"file\"\r\n accept={this.accept}\r\n disabled={this.disabled}\r\n hidden\r\n ref={(el) => (this.fileInputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleFileInput(event)}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {shouldShowError ? (\r\n <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\" aria-live=\"assertive\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.internalErrorMessage || this.error_message}</span>\r\n </span>\r\n </span>\r\n ) : this.isFileUploaded && this.success_text ? (\r\n <span class=\"dda-success-text\" id={this.validation_id} role=\"status\" aria-live=\"polite\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">check</i>\r\n <span>{this.success_text}</span>\r\n </span>\r\n </span>\r\n ) : this.helper_text ? (\r\n <span class=\"dda-helper-text\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.helper_text}</span>\r\n </span>\r\n </span>\r\n ) : null}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -24,6 +24,7 @@ To use the \`dda-attach-file\` component, pass the following props:
|
|
|
24
24
|
component_mode=""
|
|
25
25
|
input_id="input"
|
|
26
26
|
button_id="button"
|
|
27
|
+
delete_button_id="deleteFile"
|
|
27
28
|
aria_label="input"
|
|
28
29
|
button_aria_label="button"
|
|
29
30
|
button_name="button"
|
|
@@ -69,6 +70,7 @@ The component emits a \`fileChanged\` event when a file is selected or removed.
|
|
|
69
70
|
},
|
|
70
71
|
input_id: { control: 'text', description: 'Input id for file input' },
|
|
71
72
|
button_id: { control: 'text', description: 'Button id for file upload button' },
|
|
73
|
+
delete_button_id: { control: 'text', description: 'Button id for file delete button' },
|
|
72
74
|
aria_label: { control: 'text', description: 'ARIA label for input' },
|
|
73
75
|
button_aria_label: { control: 'text', description: 'ARIA label for upload button' },
|
|
74
76
|
button_name: { control: 'text', description: 'Name for the upload button' },
|
|
@@ -113,6 +115,7 @@ Default.args = {
|
|
|
113
115
|
input_type: 'normal',
|
|
114
116
|
input_id: 'choose-File',
|
|
115
117
|
button_id: 'choose-File-button',
|
|
118
|
+
delete_button_id: 'delete-File-button',
|
|
116
119
|
aria_label: 'input',
|
|
117
120
|
button_aria_label: 'button',
|
|
118
121
|
button_name: 'button',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dda-attach-file.stories.js","sourceRoot":"","sources":["../../../src/components/dda-attach-file/dda-attach-file.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE
|
|
1
|
+
{"version":3,"file":"dda-attach-file.stories.js","sourceRoot":"","sources":["../../../src/components/dda-attach-file/dda-attach-file.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["export default {\r\n title: 'Components/Attach File',\r\n tags: ['autodocs'],\r\n parameters: {\r\n docs: {\r\n description: {\r\n component: `\r\nTo use the \\`dda-attach-file\\` component, pass the following props:\r\n\r\n\\`\\`\\`html\r\n<dda-attach-file\r\n label=\"Attach File\"\r\n place_holder=\"No File Selected\"\r\n upload_button_text=\"Choose File\"\r\n helper_text=\"Helper or footer text\"\r\n success_text=\"Successfully uploaded\"\r\n error_message=\"Error message\"\r\n file_size_error_message=\"File size should not exceed {max} MB\"\r\n max_file_size=\"2\"\r\n size=\"default\"\r\n validation_type=\"normal\"\r\n input_type=\"normal\"\r\n custom_class=\"\"\r\n component_mode=\"\"\r\n input_id=\"input\"\r\n button_id=\"button\"\r\n delete_button_id=\"deleteFile\"\r\n aria_label=\"input\"\r\n button_aria_label=\"button\"\r\n button_name=\"button\"\r\n input_name=\"input\"\r\n accept=\".pdf,.docx\"\r\n></dda-attach-file>\r\n\\`\\`\\`\r\n\r\nThe component emits a \\`fileChanged\\` event when a file is selected or removed.\r\n `,\r\n },\r\n },\r\n },\r\n\r\n argTypes: {\r\n label: { control: 'text', description: 'Label for the attach file component' },\r\n place_holder: { control: 'text', description: 'Default place holder text' },\r\n upload_button_text: { control: 'text', description: 'Button text for upload file' },\r\n helper_text: { control: 'text', description: 'Helper text for the attach file component' },\r\n success_text: { control: 'text', description: 'Success message text' },\r\n error_message: { control: 'text', description: 'Error message displayed below the component' },\r\n file_size_error_message: { control: 'text', description: 'File size limit exceed warning message. Use {max} as a placeholder for max size' },\r\n validation_id: { control: 'text', description: 'ID used for error/helper message' },\r\n size: {\r\n control: { type: 'select' },\r\n options: ['default', 'small'],\r\n description: 'Size of the attach file component',\r\n },\r\n validation_type: {\r\n control: { type: 'select' },\r\n options: ['normal', 'error'],\r\n description: 'Validation type of the component',\r\n },\r\n input_type: {\r\n control: { type: 'select' },\r\n options: ['normal', 'disabled'],\r\n description: 'Input type (used for visual class only)',\r\n },\r\n custom_class: { control: 'text', description: 'Custom class to be applied' },\r\n component_mode: {\r\n control: { type: 'check' },\r\n options: ['light-mode'],\r\n description: 'Mode of the attach file component',\r\n },\r\n input_id: { control: 'text', description: 'Input id for file input' },\r\n button_id: { control: 'text', description: 'Button id for file upload button' },\r\n delete_button_id: { control: 'text', description: 'Button id for file delete button' },\r\n aria_label: { control: 'text', description: 'ARIA label for input' },\r\n button_aria_label: { control: 'text', description: 'ARIA label for upload button' },\r\n button_name: { control: 'text', description: 'Name for the upload button' },\r\n input_name: { control: 'text', description: 'Name for the input field' },\r\n accept: { control: 'text', description: 'Accept attribute for file types (e.g., .pdf,.docx)' },\r\n max_file_size: { control: 'number', description: 'Maximum file size allowed in MB' },\r\n },\r\n};\r\n\r\nconst Template = (args) => {\r\n const attributes = Object.entries(args)\r\n .filter(([key, value]) => value !== undefined && key !== 'text')\r\n .map(([key, value]) => {\r\n if (typeof value === 'boolean') return value ? key : '';\r\n return `${key}=\"${value}\"`;\r\n })\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return `\r\n <dda-attach-file ${attributes}></dda-attach-file>\r\n <script>\r\n const fileComponent = document.querySelector('dda-attach-file');\r\n fileComponent?.addEventListener('fileChanged', (e) => {\r\n console.log('fileChanged:', e.detail);\r\n });\r\n </script>\r\n `;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n label: 'Attach File',\r\n place_holder: 'No File Selected',\r\n upload_button_text: 'Choose File',\r\n helper_text: 'Helper or footer text',\r\n success_text: 'Successfully uploaded',\r\n error_message: 'Error Message',\r\n validation_id: 'validationId',\r\n file_size_error_message: 'File size should not exceed {max} MB',\r\n max_file_size: 200,\r\n size: 'default',\r\n validation_type: 'normal',\r\n input_type: 'normal',\r\n input_id: 'choose-File',\r\n button_id: 'choose-File-button',\r\n delete_button_id: 'delete-File-button',\r\n aria_label: 'input',\r\n button_aria_label: 'button',\r\n button_name: 'button',\r\n input_name: 'input',\r\n accept: '.pdf,.docx',\r\n custom_class: '',\r\n component_mode: '',\r\n onInput: '',\r\n};\r\n\r\nexport const Small = Template.bind({});\r\nSmall.args = {\r\n ...Default.args,\r\n size: 'small',\r\n};\r\n\r\nexport const ErrorState = Template.bind({});\r\nErrorState.args = {\r\n ...Default.args,\r\n validation_type: 'error',\r\n};\r\n\r\nexport const Disabled = Template.bind({});\r\nDisabled.args = {\r\n ...Default.args,\r\n input_type: 'disabled',\r\n};\r\n"]}
|
|
@@ -306,11 +306,18 @@ export class DdaHeader {
|
|
|
306
306
|
}
|
|
307
307
|
render() {
|
|
308
308
|
const sideMenuItems = this.parseJsonArray(this.sideMenuItems);
|
|
309
|
-
return (h("header", { key: '
|
|
309
|
+
return (h("header", { key: '320bb6c50e7b88b6b4cb21ecfef032d191b1ceaf', class: 'dda-header' }, h("div", { key: 'b9dc390cf2f78361c907587076afa6a280b965c4', class: "dda-head-logo" }, h("a", { key: 'cec2479d2cfa6ca99d23db53bc98a466b1d2f9b4', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo" }, h("img", { key: '7f54c29ceee32fd999579f348af0c65c435da84d', class: "logo-white", src: this.firstLogoWhiteSrc, alt: `${this.firstLogoAlt} White` }), h("img", { key: '76edcbdb5ea1f87d34b6542c57245722aa5ca3ff', class: "logo-colored", src: this.firstLogoSrc, alt: this.firstLogoAlt })), h("a", { key: 'c7b14f22807d07889ee5f5a535dc53c4ad6bc39c', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: 'f0a94fe0c472e9b07e80d8b798279de859dfa849', class: "logo-white", src: this.secondLogoWhiteSrc, alt: `${this.secondLogoAlt} White` }), h("img", { key: 'd0fe3ae7fae1b52fe722d4b4918c66f878ca9d47', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }))), h("div", { key: '1f99a3635cdd4b5a0e237636c8d9c1de7866575b', class: "dda-menu-container" }, h("div", { key: '61b2f9fa7fa7b785c7b704ecefe3fc25810330b0', class: "dda-main-navigation" }, h("div", { key: 'a806db8b53d7656cc3443149f472695fcf4d4dd2', class: `dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`, onClick: this.toggleMenu }), h("div", { key: '13ef90fd6e160587806b8c71f52bae47b9d4ced3', class: "hamburger-menu", onClick: this.toggleMenu }, h("dda-tooltip", { key: 'bd5df176d359039da5a796de55cf31d35debf56b', title_text: this.hamburger_menu_button_name, position: "top", class: "dda-d-block" }, h("button", { key: 'c6b26754e52e8b96cf848c05d19b3ad8dfe6f9cf', type: "button", class: "hamburger-menu-btn", name: this.hamburger_menu_button_name }, h("span", { key: '823258e0d23f138541f5efd7770f299dcded3e96', class: "hamburger-line" }), h("span", { key: '10b6deed2384e7140a4d745da369f1f1fbca1f23', class: "hamburger-menu-text" }, this.hamburger_menu_button_name)))), h("div", { key: '96fa55ffff63de37635cd0cfc739b4d882326206', class: "dda-sidemenu", style: { display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' } }, h("div", { key: '65f7729f0b2d7a826bdd68befb12e7b343dfb99f', class: "dda-sidemenu-content" }, h("h6", { key: '5f95515ab2d4c2da0902b0f567e14cef37c24d9f', class: "dda-side-nav-title" }, this.sideMainMenuTitle), h("ul", { key: '06fa6cfc285874ca162518a9d2d82a7d70be9858', class: "main_side_menu" }, sideMenuItems.map((menu, index) => {
|
|
310
310
|
const currentIndex = `menu-${index}`;
|
|
311
311
|
return (h("li", { key: currentIndex, id: `header_${menu.label}` }, h("a", {
|
|
312
312
|
// href={menu.href}
|
|
313
|
-
href: this.useNavigator == 'true' ? 'javascript:void(0)' : menu.href,
|
|
313
|
+
href: this.useNavigator == 'true' ? 'javascript:void(0)' : menu.href,
|
|
314
|
+
// class={menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : ''}
|
|
315
|
+
class: [
|
|
316
|
+
menu.subMenu && menu.subMenu.length > 0 ? 'showSub' : '',
|
|
317
|
+
menu.active === 'true' ? 'active' : ''
|
|
318
|
+
]
|
|
319
|
+
.filter(Boolean)
|
|
320
|
+
.join(' '), onClick: e => {
|
|
314
321
|
if (menu.subMenu && menu.subMenu.length > 0) {
|
|
315
322
|
e.preventDefault();
|
|
316
323
|
const current = e.currentTarget;
|
|
@@ -335,15 +342,20 @@ export class DdaHeader {
|
|
|
335
342
|
}
|
|
336
343
|
}
|
|
337
344
|
}, menu.label), this.renderSubMenu(menu.subMenu, currentIndex)));
|
|
338
|
-
})), this.hideOtherMenu == false && h("h6", { key: '
|
|
345
|
+
})), this.hideOtherMenu == false && h("h6", { key: '741a87ec2773bfd4599d9dbdf8b7bbfc66644f80', class: "dda-side-nav-title" }, this.sideOtherMenuTitle), !this.hideOtherMenu && (h("ul", { key: 'ad3037fc41ad60202e38f38d08b113368326f698', class: "main_side_menu" }, this.parsedOtherMenuItems.map((itemlist, index) => (h("li", { key: `other-${index}` }, h("a", { href: this.useNavigator == 'true' ? 'javascript:void(0)' : itemlist.href, class: {
|
|
346
|
+
active: itemlist['active'] === 'true',
|
|
347
|
+
}, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(itemlist.href) : '') }, itemlist.label))))))), h("div", { key: 'b4a6bad345a6c30469714a12c1ac0e08a36d0232', class: "dda-sidemenu-bottom" }, h("div", { key: '89d304f277b2fdb2477d9a57080c094ae9d92265', class: "dda-sidemenu-gov-logo" }, h("a", { key: '827000661949876ee2ef140665243ee3e5cd3571', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.firstLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.firstLogoHref) : ''), class: "govt-logo dda-mb-2" }, h("img", { key: '420d364a247b50cbeb590338bde2203e54797ee4', class: "", src: this.firstLogoSrc, alt: this.firstLogoAlt }))), h("div", { key: 'c791779a7b204b807c9ed497717a3e91c1835439', class: "dda-toolbar-menu-sidemenu" }, h("ul", { key: '91cb1fd161897559a85eb632d2d77c7d5ca49c7d' }, this.accessibility_button_id && (h("li", { key: '927a4045d6ee032c3b95d0c7a19e300cadf0c6b9' }, h("button", { key: '4af8d8eed00a40ed281b8efc81281ea62baaa3f6', name: this.toggle_accessibility_button_name, class: "tool-btn accessibility-btn", type: "button", onClick: this.toggleMobileAccessibilty, id: this.accessibility_button_id }, h("i", { key: '0bd5daf86009b0a6f895b1a56974e5c36a50ec7e', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'd702a07e54f3ba8800880b5883a457a39ab081f6', class: "visually-hidden" }, this.accessibility_button_text)))), this.language_text && (h("li", { key: '93f6a4161a7a960ee94144bb5474f5f76d4b28d0' }, h("button", { key: '3cd59d02e08967a810b4cc9b20a76ec1b4ead1ba', name: this.language_button_name, class: "tool-btn", type: "button", onClick: this.languagehandler }, this.language_text))), this.loginText && (h("li", { key: '2d93126df5228944ce934ab3b06e396cb4699b69' }, h("dda-link-button", { key: '19c32bb297878743d379bfebb2972d3888e854bc', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
|
|
339
348
|
// href={this.loginLink}
|
|
340
|
-
href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '
|
|
341
|
-
|
|
342
|
-
|
|
349
|
+
href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), h("button", { key: '1f2df4dc3905ddb948e8bb55abb764238e131298', type: "button", name: this.close_menu_button_name, class: "close-btn side-nav-close-btn", "aria-label": "Close Sidebar", onClick: this.toggleMenu }, h("i", { key: 'ba70e57cb7cffa77ee5dad748611f8e204ca943f', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility hide-accessibility mobile-accessibility", style: { display: this.isMobileAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "mobile-accessibility-content" }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == 'normal', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalThemeMobile", group_name: "themeselectionMobile", input_id: "NormalThemeMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "hydrated" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == 'colorblind', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlindMobile", group_name: "themeselectionMobile", input_id: "ColoursBlindMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == 'redweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeaknessMobile", group_name: "themeselectionMobile", input_id: "RedWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == 'greenweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeaknessMobile", group_name: "themeselectionMobile", input_id: "GreenWeaknessMobile", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == 'normal' ? 'default-primary' : 'default-secondary', button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'large' ? 'default-primary' : 'default-secondary', button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'small' ? 'default-primary' : 'default-secondary', button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler }))))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Accessibility", onClick: this.toggleMobileAccessibilty }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close")))) : null), this.quickLinks && (h("dda-header-menu", { key: '8ce70c1329af918f148a721b446749f95726466c', "use-navigator": this.useNavigator, "navigator-click": this.navigatorClick, "show-Quick-Links-Icon": this.showQuickLinksIcon, "quick-links": typeof this.quickLinks === 'string' ? this.quickLinks : JSON.stringify(this.quickLinks) }))), h("div", { key: '6ade94ce121e760e02dbc7b3c9f95b9b055d4c62', class: "dda-mobile-entt-logo" }, h("a", { key: 'd6dbcd698634f25bcfe7a5797caa52db31ece40b', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.secondLogoHref, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.secondLogoHref) : ''), class: "entt-logo" }, h("img", { key: '5247234ab6d0e4ef3e725bb6fb8e681d796da37b', class: "logo-colored", src: this.secondLogoSrc, alt: this.secondLogoAlt }), h("img", { key: '2adc2e0fecae54e51a825d83883c728ed6d33d64', class: "logo-white", src: this.secondLogoWhiteSrc, alt: this.secondLogoAlt }))), h("div", { key: '6188b81b90ee5d93334862fb5657b4b2bb50472b', class: "dda-mobile-search" }, this.mobileMenuSearchId && (h("a", { key: '563bfd7e62ca7249cff9363451afa622d21e7ec7', href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.mobileMenuSearchUrl, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.mobileMenuSearchUrl) : ''), class: "tool-btn", id: this.mobileMenuSearchId }, h("span", { key: '98773ae4ea5cc8b14e526013114f5a2daf329cbd', class: "visualy-hidden" }, this.searchText || 'Search'), h("i", { key: 'c3ece4911b5d9342544c5a7a815cdf6b0dc7828f', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "search")))), h("div", { key: '9e4a5228941be09ae4c18dfe0507ef213a8ae7ff', class: "dda-toolbar-menu" }, h("ul", { key: 'ae73001a8659b0dcee9c6c3e461bd4503f31ee3e' }, this.search_input_name && (h("li", { key: '301c3ca831b60722f8a37f9fbdf45a6b34bd6af8' }, h("dda-tooltip", { key: 'c7422723142be2307bb5de6c9081fb85037be4fa', title_text: this.search_tooltip || 'Search', description: "", position: "top" }, h("div", { key: '6ef5d28bb31736f71de9d84948723a30242082bb', class: "dda-search dda-header-search" }, h("label", { key: 'e548283a91365210457a77267c6962f7857bc1c6', id: "ddaSearch-label", class: "visualy-hidden", "aria-hidden": "true" }, this.searchText || 'Search'), h("i", { key: '1e4df1482d119718cb0f6b14ebadec67e6972ce9', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "search"), h("dda-input", { key: '981a10ddb29d5a42633c05f40dfff5e6e482105a', placeholder: this.search_input_placeholder || 'Search', type: "text", input_id: "ddaSearch", value: this.search_value, input_name: this.search_input_name, aria_label: "input", input_role: "search", error_message: "Error text", validation_type: "normal", validation_id: "validationId", input_status: "normal", size: "default", custom_class: "dda-header-search-input tool-btn", component_mode: "", onInputChanged: (e) => {
|
|
350
|
+
this.searchhandler(e.detail.target.value);
|
|
351
|
+
console.log(e.detail.target.value);
|
|
352
|
+
}, onKeyPress: e => {
|
|
343
353
|
if (e.key === 'Enter') {
|
|
344
|
-
this.searchhandler(e.target.value);
|
|
354
|
+
this.searchhandler(e.target.value);
|
|
355
|
+
console.log(e.target.value);
|
|
356
|
+
// Pass the value to the searchhandler
|
|
345
357
|
}
|
|
346
|
-
} }), h("span", { key: '
|
|
358
|
+
} }), h("span", { key: '0de101ccc8ccebb8a0d8d356f6d94f0bf108dd80', id: "validationId", class: "visually-hidden" }, "Enter keywords to search the site."))))), this.accessibility_button_id && (h("li", { key: 'c705eb3deb4523c13f32d951fba22f970c03ab96' }, h("dda-tooltip", { key: '2083496f38241f8f69f3c652fdfba2c85d30841a', title_text: this.accessibility_tooltip, position: "top" }, h("button", { key: '3ddf04f54d8bacfee1c2a917cdee10b7a8744c9e', name: this.toggle_accessibility_button_name, class: "tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn", type: "button", onClick: this.toggleAccessibilty, id: this.accessibility_button_id }, h("i", { key: 'a98e5c2278a528fa888a42132a6c2b83587847b2', class: this.accessibility_button_icon_family }, this.accessibility_button_icon_name), h("span", { key: 'da98b2ffe669c369ba2cc25a4114000aadd3a94e', class: "visually-hidden" }, this.accessibility_button_text))), this.usePredesignedAccessibilityMenu ? (h("div", { class: "dda-accessibility-wrap" }, h("div", { class: "dda-accessibility hide-accessibility", style: { display: this.isAccessibiltyOpen ? 'block' : 'none' } }, h("div", { class: "dda-row" }, h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.contrast_title), h("form", null, h("fieldset", { class: "dda-theme-list" }, h("legend", null, h("p", { class: "body Regular dda-mb-3" }, this.contrast_description)), this.contrast_noraml_text ? (h("dda-radiobutton", { title_text: this.contrast_noraml_text, checked: this.selected_contrast == 'normal', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "NormalTheme", group_name: "themeselection", input_id: "NormalTheme", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.normalContrasthandler, class: "" })) : null, this.contrast_color_blind_text ? (h("dda-radiobutton", { title_text: this.contrast_color_blind_text, checked: this.selected_contrast == 'colorblind', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "ColoursBlind", group_name: "themeselection", input_id: "ColoursBlind", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.blindContrasthandler, class: "hydrated" })) : null, this.contrast_red_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_red_weakness_text, checked: this.selected_contrast == 'redweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "RedWeakness", group_name: "themeselection", input_id: "RedWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.redContrasthandler, class: "hydrated" })) : null, this.contrast_green_weakness_text ? (h("dda-radiobutton", { title_text: this.contrast_green_weakness_text, checked: this.selected_contrast == 'greenweakness', size: "default", variants: "normal", supporting: "", error_message: "", validation_id: "GreenWeakness", group_name: "themeselection", input_id: "GreenWeakness", custom_class: "", component_mode: "", aria_label: "radio-button", validation_type: "normal", onChange: this.greenContrasthandler, class: "hydrated" })) : null))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.screen_reader_title), h("p", { class: "body Regular dda-mb-3" }, this.screen_reader_description), h("div", { class: "rs_skip rsbtn rs_preserve rs_mobile", id: "readspeaker_button1" }, h("a", { rel: "nofollow", href: this.read_speaker_link, role: "button", class: "rsbtn_play circle readspeaker", accessKey: "L", "aria-label": "Listen to this page using ReadSpeaker", "data-rsshortcut": "play", "aria-haspopup": "menu", "data-rs-lang": "en_uk" }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "volume_up")))), h("div", { class: "dda-col-md-4 dda-accessibility-item" }, h("h6", { class: "h6 Regular dda-mb-1" }, this.text_size_title), h("p", { class: "body Regular dda-mb-3" }, this.text_size_description), h("div", { class: "dda-d-flex dda-gap-4" }, h("dda-button", { button_color: this.selected_text_size == 'normal' ? 'default-primary' : 'default-secondary', button_text: "A", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.baseTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'large' ? 'default-primary' : 'default-secondary', button_text: "A+", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.lgTexthandler }), h("dda-button", { button_color: this.selected_text_size == 'small' ? 'default-primary' : 'default-secondary', button_text: "A-", icon_button_shape: "circle", custom_class: "", size: "lg", onClick: this.smTexthandler })))), h("button", { type: "button", name: this.close_accessibility_button_name, class: "close-btn close_accessibility", "aria-label": "Close Sidebar", onClick: this.toggleAccessibilty }, h("i", { class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, "close"))))) : null)), this.language_text && (h("li", { key: '15eddf34c2eb73a72b6d633530aa2edc249f9512' }, h("dda-tooltip", { key: '21ce610efc413d210398a2ea5c4b0482b754a470', title_text: this.language_tooltip, position: "top" }, h("dda-button", { key: '503cf5a80aea409f1967dc1ffd86eaf2dd7d95f5', button_color: "onsurface-secondary", custom_class: "tool-btn", button_text: this.language_text, button_shape: "circle", size: "sm", onClick: this.languagehandler })))), this.loginText && (h("li", { key: 'ee9a43754dc37c468dbe2a99d18a347fa8306de4' }, h("dda-tooltip", { key: 'fdff803e1f99c328381dd7ae8a63b739c511440e', title_text: this.login_tooltip, position: "top" }, h("dda-link-button", { key: 'c80994085de187ad14e594eb60c442e3c5fe5e43', button_color: "onsurface-secondary", start_icon: this.loginIcon, custom_class: "tool-btn login-button", link_button_text: this.loginText, onClick: this.toggleLogin,
|
|
347
359
|
// href={this.loginLink}
|
|
348
360
|
href: this.useLoginPopup ? 'javascript:void(0)' : this.loginLink, button_shape: "circle", size: "sm" })))))), this.useLoginPopup ? (h("div", { class: "dda-login-popup desktop", style: { display: this.isDesktopLoginPopupOpen ? 'block' : 'none' } }, this.renderLoginPopup())) : null, this.useLoginPopup ? (h("div", { class: "dda-login-popup mobile", style: { display: this.isMobileLoginPopupOpen ? 'block' : 'none' } }, this.renderLoginPopup())) : null)));
|
|
349
361
|
}
|