@dubai-design-system/components-js 3.9.15 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dda-breadcrumb.cjs.entry.js +2 -1
- package/dist/cjs/dda-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-header-menu_3.cjs.entry.js +27 -7
- package/dist/cjs/dda-header-menu_3.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-header.cjs.entry.js +25 -23
- package/dist/cjs/dda-header.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-image-card.cjs.entry.js +8 -10
- package/dist/cjs/dda-image-card.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-information-card.cjs.entry.js +8 -10
- package/dist/cjs/dda-information-card.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-pagination.cjs.entry.js +4 -2
- package/dist/cjs/dda-pagination.cjs.entry.js.map +1 -1
- package/dist/cjs/dda-teamsection-card.cjs.entry.js +18 -13
- package/dist/cjs/dda-teamsection-card.cjs.entry.js.map +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/components/cards/dda-image-card/dda-image-card.js +45 -10
- package/dist/collection/components/cards/dda-image-card/dda-image-card.js.map +1 -1
- package/dist/collection/components/cards/dda-information-card/dda-information-card.js +45 -10
- package/dist/collection/components/cards/dda-information-card/dda-information-card.js.map +1 -1
- package/dist/collection/components/dda-breadcrumb/dda-breadcrumb.js +22 -1
- package/dist/collection/components/dda-breadcrumb/dda-breadcrumb.js.map +1 -1
- package/dist/collection/components/dda-cards/dda-team-section-cards/dda-teamsection-card-variant-one/dda-teamsection-card-variant-one.js +55 -13
- package/dist/collection/components/dda-cards/dda-team-section-cards/dda-teamsection-card-variant-one/dda-teamsection-card-variant-one.js.map +1 -1
- package/dist/collection/components/dda-header/dda-header.js +59 -23
- package/dist/collection/components/dda-header/dda-header.js.map +1 -1
- package/dist/collection/components/dda-header/dda-header.stories.js +8 -0
- package/dist/collection/components/dda-header/dda-header.stories.js.map +1 -1
- package/dist/collection/components/dda-header-menu/dda-header-menu.js +63 -6
- package/dist/collection/components/dda-header-menu/dda-header-menu.js.map +1 -1
- package/dist/collection/components/dda-input/dda-input.js +1 -1
- package/dist/collection/components/dda-input/dda-input.js.map +1 -1
- package/dist/collection/components/dda-pagination/dda-pagination.js +21 -2
- package/dist/collection/components/dda-pagination/dda-pagination.js.map +1 -1
- package/dist/collection/components/dda-slider/dda-slider.js +1 -1
- package/dist/components/dda-breadcrumb.js +4 -2
- package/dist/components/dda-breadcrumb.js.map +1 -1
- package/dist/components/dda-header-menu.js +1 -1
- package/dist/components/dda-header.js +28 -25
- package/dist/components/dda-header.js.map +1 -1
- package/dist/components/dda-image-card.js +11 -12
- package/dist/components/dda-image-card.js.map +1 -1
- package/dist/components/dda-information-card.js +11 -12
- package/dist/components/dda-information-card.js.map +1 -1
- package/dist/components/dda-input.js +1 -1
- package/dist/components/dda-pagination.js +5 -3
- package/dist/components/dda-pagination.js.map +1 -1
- package/dist/components/dda-teamsection-card.js +20 -14
- package/dist/components/dda-teamsection-card.js.map +1 -1
- package/dist/components/{p-359c3483.js → p-2f1766a5.js} +2 -2
- package/dist/components/p-2f1766a5.js.map +1 -0
- package/dist/components/{p-b7cfca52.js → p-923d3716.js} +29 -8
- package/dist/components/p-923d3716.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-057d1267.entry.js +2 -0
- package/dist/dda/p-057d1267.entry.js.map +1 -0
- package/{www/build/p-9a324a3e.entry.js → dist/dda/p-41d6b9ac.entry.js} +2 -2
- package/dist/dda/p-41d6b9ac.entry.js.map +1 -0
- package/{www/build/p-af82ab21.entry.js → dist/dda/p-4fe70ce0.entry.js} +2 -2
- package/dist/dda/p-4fe70ce0.entry.js.map +1 -0
- package/dist/dda/p-5f012377.entry.js +2 -0
- package/dist/dda/p-5f012377.entry.js.map +1 -0
- package/dist/dda/p-902659c3.entry.js +2 -0
- package/dist/dda/p-902659c3.entry.js.map +1 -0
- package/dist/dda/p-91f118b4.entry.js +2 -0
- package/dist/dda/p-91f118b4.entry.js.map +1 -0
- package/dist/dda/p-ffee072d.entry.js +2 -0
- package/dist/dda/p-ffee072d.entry.js.map +1 -0
- package/dist/esm/dda-breadcrumb.entry.js +2 -1
- package/dist/esm/dda-breadcrumb.entry.js.map +1 -1
- package/dist/esm/dda-header-menu_3.entry.js +28 -8
- package/dist/esm/dda-header-menu_3.entry.js.map +1 -1
- package/dist/esm/dda-header.entry.js +25 -23
- package/dist/esm/dda-header.entry.js.map +1 -1
- package/dist/esm/dda-image-card.entry.js +9 -11
- package/dist/esm/dda-image-card.entry.js.map +1 -1
- package/dist/esm/dda-information-card.entry.js +9 -11
- package/dist/esm/dda-information-card.entry.js.map +1 -1
- package/dist/esm/dda-pagination.entry.js +5 -3
- package/dist/esm/dda-pagination.entry.js.map +1 -1
- package/dist/esm/dda-teamsection-card.entry.js +19 -14
- package/dist/esm/dda-teamsection-card.entry.js.map +1 -1
- package/dist/esm/dda.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cards/dda-image-card/dda-image-card.d.ts +3 -0
- package/dist/types/components/cards/dda-information-card/dda-information-card.d.ts +3 -0
- package/dist/types/components/dda-breadcrumb/dda-breadcrumb.d.ts +1 -0
- package/dist/types/components/dda-cards/dda-team-section-cards/dda-teamsection-card-variant-one/dda-teamsection-card-variant-one.d.ts +3 -0
- package/dist/types/components/dda-header/dda-header.d.ts +2 -0
- package/dist/types/components/dda-header-menu/dda-header-menu.d.ts +4 -1
- package/dist/types/components/dda-pagination/dda-pagination.d.ts +2 -0
- package/dist/types/components.d.ts +94 -0
- package/package.json +2 -2
- package/readme.md +10 -0
- package/www/build/dda.esm.js +1 -1
- package/www/build/dda.esm.js.map +1 -1
- package/www/build/p-057d1267.entry.js +2 -0
- package/www/build/p-057d1267.entry.js.map +1 -0
- package/{dist/dda/p-9a324a3e.entry.js → www/build/p-41d6b9ac.entry.js} +2 -2
- package/www/build/p-41d6b9ac.entry.js.map +1 -0
- package/{dist/dda/p-af82ab21.entry.js → www/build/p-4fe70ce0.entry.js} +2 -2
- package/www/build/p-4fe70ce0.entry.js.map +1 -0
- package/www/build/p-5f012377.entry.js +2 -0
- package/www/build/p-5f012377.entry.js.map +1 -0
- package/www/build/p-902659c3.entry.js +2 -0
- package/www/build/p-902659c3.entry.js.map +1 -0
- package/www/build/p-91f118b4.entry.js +2 -0
- package/www/build/p-91f118b4.entry.js.map +1 -0
- package/www/build/p-ffee072d.entry.js +2 -0
- package/www/build/p-ffee072d.entry.js.map +1 -0
- package/dist/components/p-359c3483.js.map +0 -1
- package/dist/components/p-b7cfca52.js.map +0 -1
- package/dist/dda/p-7dc8f091.entry.js +0 -2
- package/dist/dda/p-7dc8f091.entry.js.map +0 -1
- package/dist/dda/p-86c330a1.entry.js +0 -2
- package/dist/dda/p-86c330a1.entry.js.map +0 -1
- package/dist/dda/p-99cef84d.entry.js +0 -2
- package/dist/dda/p-99cef84d.entry.js.map +0 -1
- package/dist/dda/p-9a324a3e.entry.js.map +0 -1
- package/dist/dda/p-af82ab21.entry.js.map +0 -1
- package/dist/dda/p-d971b523.entry.js +0 -2
- package/dist/dda/p-d971b523.entry.js.map +0 -1
- package/dist/dda/p-d993427b.entry.js +0 -2
- package/dist/dda/p-d993427b.entry.js.map +0 -1
- package/www/build/p-7dc8f091.entry.js +0 -2
- package/www/build/p-7dc8f091.entry.js.map +0 -1
- package/www/build/p-86c330a1.entry.js +0 -2
- package/www/build/p-86c330a1.entry.js.map +0 -1
- package/www/build/p-99cef84d.entry.js +0 -2
- package/www/build/p-99cef84d.entry.js.map +0 -1
- package/www/build/p-9a324a3e.entry.js.map +0 -1
- package/www/build/p-af82ab21.entry.js.map +0 -1
- package/www/build/p-d971b523.entry.js +0 -2
- package/www/build/p-d971b523.entry.js.map +0 -1
- package/www/build/p-d993427b.entry.js +0 -2
- package/www/build/p-d993427b.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dda-image-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q5qDAAq5qD,CAAC;AACx6qD,2BAAe,SAAS;;MCMX,YAAY;IALzB;;QAiBU,2BAAsB,GAAW,EAAE,CAAC;QACpC,yBAAoB,GAAW,EAAE,CAAC;QAClC,uBAAkB,GAAW,EAAE,CAAC;QAQhC,4BAAuB,GAAW,EAAE,CAAC;QACrC,0BAAqB,GAAW,EAAE,CAAC;QACnC,wBAAmB,GAAW,EAAE,CAAC;QAKjC,iBAAY,GAAY,EAAE,CAAC;QAI3B,cAAS,GAAW,EAAE,CAAC;QACvB,cAAS,GAAW,EAAE,CAAC;KA8ChC;IA5CC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,UAAU;YACV,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,SAAS,GAAIA,iBAAK,KAAK,EAAC,yBAAyB,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,GAAI,IAAI,EAC7GA,kEAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,SAAS,IAAIA,gEAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAK,EACxEA,gEAAG,KAAK,EAAC,wBAAwB,IAC9B,IAAI,CAAC,WAAW,CACf,EACH,IAAI,CAAC,SAAS,IAAIA,gEAAG,KAAK,EAAC,uBAAuB,IAChD,IAAI,CAAC,SAAS,CACb,EAEH,IAAI,CAAC,SAAS,GAAGA,eAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAK,GAAG,IAAI,EAC7E,IAAI,CAAC,SAAS,GAAGA,eAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAK,GAAG,IAAI,EAC9EA,oEAAa,CACT,EACNA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,gBAAgB;YACtBA,iBAAK,KAAK,EAAC,uCAAuC,IAC7CA,6BAAiB,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,UAAU,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,GAAqB,CACzW;cACJ,IAAI,EAEL,IAAI,CAAC,iBAAiB;YACvBA,iBAAK,KAAK,EAAC,uCAAuC,IAC9CA,6BAAiB,YAAY,EAAE,IAAI,CAAC,kBAAkB,EAAE,UAAU,EAAE,IAAI,CAAC,uBAAuB,EAAE,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,mBAAmB,GAAqB,CAC/W;cACH,IAAI,CACH,CACF,CAEF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/global.css?tag=dda-image-card","src/components/cards/dda-image-card/dda-image-card.tsx"],"sourcesContent":["@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-image-card',\r\n styleUrls: ['../../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaImageCard {\r\n @Prop() image_src: string;\r\n @Prop() image_alt: string;\r\n @Prop() header_text: string;\r\n @Prop() body_text: string;\r\n @Prop() date_text: string;\r\n\r\n @Prop() left_button_color: string;\r\n @Prop() left_button_name: string;\r\n @Prop() left_button_href?: string;\r\n @Prop() left_button_rel?: string;\r\n @Prop() left_button_data_fancybox: string;\r\n @Prop() left_button_start_icon: string = '';\r\n @Prop() left_button_end_icon: string = '';\r\n @Prop() left_button_target: string = '';\r\n\r\n\r\n @Prop() right_button_color: string;\r\n @Prop() right_button_name: string;\r\n @Prop() right_button_href?: string;\r\n @Prop() right_button_rel?: string;\r\n @Prop() right_button_data_fancybox: string;\r\n @Prop() right_button_start_icon: string = '';\r\n @Prop() right_button_end_icon: string = '';\r\n @Prop() right_button_target: string = '';\r\n\r\n\r\n @Prop() left_button: string;\r\n @Prop() right_button: string;\r\n @Prop() custom_class?: string = ''; \r\n @Prop() component_mode?: string;\r\n \r\n \r\n @Prop() file_size: string = '';\r\n @Prop() file_type: string = '';\r\n\r\n render() {\r\n const cardClass = [\r\n 'dda-card',\r\n this.custom_class ? `${this.custom_class}` : \"\",\r\n this.component_mode,\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={cardClass}>\r\n {this.image_src ? <img class=\"dda-card-img image-card\" src={this.image_src} alt={this.header_text}/> : null}\r\n <div class=\"dda-p-3 dda-image-card-content\">\r\n {this.date_text && <p class=\"dda-card-text dda-m-0\">{this.date_text}</p>}\r\n <p class=\"dda-card-title dda-m-0\">\r\n {this.header_text}\r\n </p>\r\n {this.body_text && <p class=\"dda-card-text dda-m-0\">\r\n {this.body_text}\r\n </p>}\r\n \r\n {this.file_size ? <p class=\"dda-card-text dda-m-0\">{this.file_size}</p> : null}\r\n {this.file_type ? <p class=\"dda-card-text dda-m-0\">{this.file_type}</p> : null}\r\n <slot></slot>\r\n </div>\r\n <div class=\"dda-container-fluid\">\r\n <div class=\"dda-row\">\r\n {this.left_button_name ?\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button button_color={this.left_button_color} start_icon={this.left_button_start_icon} end_icon={this.left_button_end_icon} custom_class=\"dda-w-100\" href={this.left_button_href || ''} rel={this.left_button_rel} button_id=\"link-button\" aria_label=\"link-Button\" link_button_text={this.left_button_name} target={this.left_button_target} ></dda-link-button>\r\n </div>\r\n : null}\r\n\r\n {this.right_button_name ? \r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button button_color={this.right_button_color} start_icon={this.right_button_start_icon} end_icon={this.right_button_end_icon} custom_class=\"dda-w-100\" href={this.right_button_href || ''} rel={this.right_button_rel} button_id=\"link-button\" aria_label=\"link-Button\" link_button_text={this.right_button_name} target={this.right_button_target} ></dda-link-button>\r\n </div>\r\n : null}\r\n </div>\r\n </div>\r\n \r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dda-image-card.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/global/global.css?tag=dda-image-card","src/components/cards/dda-image-card/dda-image-card.tsx"],"sourcesContent":["@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-image-card',\r\n styleUrls: ['../../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaImageCard {\r\n @Prop() image_src: string;\r\n @Prop() image_alt: string;\r\n @Prop() header_text: string;\r\n @Prop() body_text: string;\r\n @Prop() date_text: string;\r\n\r\n @Prop() left_button_color: string;\r\n @Prop() left_button_name: string;\r\n @Prop() left_button_href?: string;\r\n @Prop() left_button_rel?: string;\r\n @Prop() left_button_data_fancybox: string;\r\n @Prop() left_button_start_icon: string = '';\r\n @Prop() left_button_end_icon: string = '';\r\n @Prop() left_button_target: string = '';\r\n\r\n @Prop() right_button_color: string;\r\n @Prop() right_button_name: string;\r\n @Prop() right_button_href?: string;\r\n @Prop() right_button_rel?: string;\r\n @Prop() right_button_data_fancybox: string;\r\n @Prop() right_button_start_icon: string = '';\r\n @Prop() right_button_end_icon: string = '';\r\n @Prop() right_button_target: string = '';\r\n\r\n @Prop() left_button: string;\r\n @Prop() right_button: string;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n\r\n @Prop() file_size: string = '';\r\n @Prop() file_type: string = '';\r\n\r\n @Event() navigatorClick?: EventEmitter<string>;\r\n @Prop() useNavigator: 'true' | 'false' = 'false';\r\n\r\n render() {\r\n const cardClass = ['dda-card', this.custom_class ? `${this.custom_class}` : '', this.component_mode].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={cardClass}>\r\n {this.image_src ? <img class=\"dda-card-img image-card\" src={this.image_src} alt={this.header_text} /> : null}\r\n <div class=\"dda-p-3 dda-image-card-content\">\r\n {this.date_text && <p class=\"dda-card-text dda-m-0\">{this.date_text}</p>}\r\n <p class=\"dda-card-title dda-m-0\">{this.header_text}</p>\r\n {this.body_text && <p class=\"dda-card-text dda-m-0\">{this.body_text}</p>}\r\n\r\n {this.file_size ? <p class=\"dda-card-text dda-m-0\">{this.file_size}</p> : null}\r\n {this.file_type ? <p class=\"dda-card-text dda-m-0\">{this.file_type}</p> : null}\r\n <slot></slot>\r\n </div>\r\n <div class=\"dda-container-fluid\">\r\n <div class=\"dda-row\">\r\n {this.left_button_name ? (\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button\r\n button_color={this.left_button_color}\r\n start_icon={this.left_button_start_icon}\r\n end_icon={this.left_button_end_icon}\r\n custom_class=\"dda-w-100\"\r\n // href={this.left_button_href || ''}\r\n href={this.useNavigator == 'true' ? 'javascript:void(0)' : this.left_button_href}\r\n onClick={() => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.left_button_href) : '')}\r\n rel={this.left_button_rel}\r\n button_id=\"link-button\"\r\n aria_label=\"link-Button\"\r\n link_button_text={this.left_button_name}\r\n target={this.left_button_target}\r\n ></dda-link-button>\r\n </div>\r\n ) : null}\r\n\r\n {this.right_button_name ? (\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button\r\n button_color={this.right_button_color}\r\n start_icon={this.right_button_start_icon}\r\n end_icon={this.right_button_end_icon}\r\n custom_class=\"dda-w-100\"\r\n // href={this.right_button_href || ''}\r\n href={this.useNavigator == 'true' ? 'javascript:void(0)' : this.right_button_href}\r\n onClick={() => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.right_button_href) : '')}\r\n rel={this.right_button_rel}\r\n button_id=\"link-button\"\r\n aria_label=\"link-Button\"\r\n link_button_text={this.right_button_name}\r\n target={this.right_button_target}\r\n ></dda-link-button>\r\n </div>\r\n ) : null}\r\n </div>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -10,6 +10,7 @@ const DdaInformationCardStyle0 = globalCss;
|
|
|
10
10
|
const DdaInformationCard = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
+
this.navigatorClick = index.createEvent(this, "navigatorClick", 7);
|
|
13
14
|
this.left_button_start_icon = '';
|
|
14
15
|
this.left_button_end_icon = '';
|
|
15
16
|
this.left_button_target = '';
|
|
@@ -17,18 +18,15 @@ const DdaInformationCard = class {
|
|
|
17
18
|
this.right_button_end_icon = '';
|
|
18
19
|
this.right_button_target = '';
|
|
19
20
|
this.custom_class = '';
|
|
21
|
+
this.useNavigator = 'false';
|
|
20
22
|
}
|
|
21
23
|
render() {
|
|
22
|
-
const cardClass = [
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
this.
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
index.h("div", { class: "dda-col dda-py-3 dda-card-button-wrap" }, index.h("dda-link-button", { button_color: "default-tertiary", start_icon: this.left_button_start_icon, end_icon: this.left_button_end_icon, custom_class: "dda-w-100", href: this.left_button_href || '', rel: this.left_button_rel, button_id: "link-button", aria_label: "link-Button", link_button_text: this.left_button_name, target: this.left_button_target }))
|
|
29
|
-
: null, this.right_button_name ?
|
|
30
|
-
index.h("div", { class: "dda-col dda-py-3 dda-card-button-wrap" }, index.h("dda-link-button", { button_color: "default-primary", start_icon: this.right_button_start_icon, end_icon: this.right_button_end_icon, custom_class: "dda-w-100", href: this.right_button_href || '', rel: this.right_button_rel, button_id: "link-button", aria_label: "link-Button", link_button_text: this.right_button_name, target: this.right_button_target }))
|
|
31
|
-
: null)), index.h("slot", { key: 'c4c07b37a60dc79d726b2702e79fdff1c69580a6' }))));
|
|
24
|
+
const cardClass = ['dda-card', this.custom_class ? `${this.custom_class}` : '', this.component_mode].filter(Boolean).join(' ');
|
|
25
|
+
return (index.h(index.Host, { key: '4d14d03cc8e9d2a50d9b72b46358ca034b93468c' }, index.h("div", { key: 'a6af852918c027caa99c76c77a2aea0eccbce2a5', class: cardClass }, index.h("div", { key: '9423b2c286a34fbd1f8c2a670d1326e9f9712360', class: "dda-py-4 dda-px-3 " }, this.image_src ? index.h("img", { class: "dda-information-card-image", src: this.image_src, alt: this.image_alt }) : null, index.h("p", { key: '5cf97066fdf4ff1f3596cd24af3400d63a4b776a', class: "dda-card-title dda-m-0" }, this.header_text), this.body_text && index.h("p", { key: '3ff97f925d35dfd6cbe0b962648da7a1faca38c1', class: "dda-card-text dda-m-0" }, this.body_text)), index.h("div", { key: '7e002ac27f4007e42e8bf9fb2d59379822eaca9d', class: "dda-container-fluid" }, index.h("div", { key: '1ad6dbdd624b2521c1656d3a438662210fb2c462', class: "dda-row" }, this.left_button_name ? (index.h("div", { class: "dda-col dda-py-3 dda-card-button-wrap" }, index.h("dda-link-button", { button_color: "default-tertiary", start_icon: this.left_button_start_icon, end_icon: this.left_button_end_icon, custom_class: "dda-w-100", href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.left_button_href, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.left_button_href) : ''),
|
|
26
|
+
// href={this.left_button_href || ''}
|
|
27
|
+
rel: this.left_button_rel, button_id: "link-button", aria_label: "link-Button", link_button_text: this.left_button_name, target: this.left_button_target }))) : null, this.right_button_name ? (index.h("div", { class: "dda-col dda-py-3 dda-card-button-wrap" }, index.h("dda-link-button", { button_color: "default-primary", start_icon: this.right_button_start_icon, end_icon: this.right_button_end_icon, custom_class: "dda-w-100",
|
|
28
|
+
// href={this.right_button_href || ''}
|
|
29
|
+
href: this.useNavigator == 'true' ? 'javascript:void(0)' : this.right_button_href, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.right_button_href) : ''), rel: this.right_button_rel, button_id: "link-button", aria_label: "link-Button", link_button_text: this.right_button_name, target: this.right_button_target }))) : null)), index.h("slot", { key: '5b1dc7d22fecdf01c5395c8df2ff0b1fbe6e4789' }))));
|
|
32
30
|
}
|
|
33
31
|
};
|
|
34
32
|
DdaInformationCard.style = DdaInformationCardStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dda-information-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q5qDAAq5qD,CAAC;AACx6qD,iCAAe,SAAS;;MCMX,kBAAkB;IAL/B;;QAgBU,2BAAsB,GAAW,EAAE,CAAC;QACpC,yBAAoB,GAAW,EAAE,CAAC;QAClC,uBAAkB,GAAW,EAAE,CAAC;QAOhC,4BAAuB,GAAW,EAAE,CAAC;QACrC,0BAAqB,GAAW,EAAE,CAAC;QACnC,wBAAmB,GAAW,EAAE,CAAC;QAMjC,iBAAY,GAAY,EAAE,CAAC;KA4CpC;IAxCC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,UAAU;YACV,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,IACnBA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,SAAS,GAAIA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC9GA,gEAAG,KAAK,EAAC,wBAAwB,IAC9B,IAAI,CAAC,WAAW,CACf,EACH,IAAI,CAAC,SAAS,IAAIA,gEAAG,KAAK,EAAC,uBAAuB,IAChD,IAAI,CAAC,SAAS,CACb,CACA,EAENA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,gBAAgB;YACtBA,iBAAK,KAAK,EAAC,uCAAuC,IAC7CA,6BAAiB,YAAY,EAAC,kBAAkB,EAAC,UAAU,EAAE,IAAI,CAAC,sBAAsB,EAAE,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EAAE,YAAY,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,gBAAgB,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,GAAqB,CACnW;cACJ,IAAI,EAEL,IAAI,CAAC,iBAAiB;YACvBA,iBAAK,KAAK,EAAC,uCAAuC,IAC9CA,6BAAiB,YAAY,EAAC,iBAAiB,EAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,EAAE,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EAAE,YAAY,EAAC,WAAW,EAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,IAAI,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAAE,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE,IAAI,CAAC,mBAAmB,GAAqB,CACvW;cACH,IAAI,CACH,CACF,EACNA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/global.css?tag=dda-information-card","src/components/cards/dda-information-card/dda-information-card.tsx"],"sourcesContent":["@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-information-card',\r\n styleUrls: ['../../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaInformationCard {\r\n @Prop() image_src: string;\r\n @Prop() image_alt: string;\r\n @Prop() header_text: string;\r\n @Prop() body_text: string;\r\n\r\n\r\n @Prop() left_button_name: string;\r\n @Prop() left_button_href?: string;\r\n @Prop() left_button_rel?: string;\r\n @Prop() left_button_data_fancybox: string;\r\n @Prop() left_button_start_icon: string = '';\r\n @Prop() left_button_end_icon: string = '';\r\n @Prop() left_button_target: string = '';\r\n \r\n \r\n @Prop() right_button_name: string;\r\n @Prop() right_button_href?: string;\r\n @Prop() right_button_rel?: string;\r\n @Prop() right_button_data_fancybox: string;\r\n @Prop() right_button_start_icon: string = '';\r\n @Prop() right_button_end_icon: string = '';\r\n @Prop() right_button_target: string = '';\r\n\r\n @Prop() left_button: string;\r\n @Prop() right_button: string;\r\n @Prop() single_button: boolean;\r\n\r\n @Prop() custom_class?: string = ''; \r\n @Prop() component_mode?: string; \r\n\r\n\r\n render() {\r\n const cardClass = [\r\n 'dda-card',\r\n this.custom_class ? `${this.custom_class}` : \"\",\r\n this.component_mode,\r\n ].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={cardClass}>\r\n <div class=\"dda-py-4 dda-px-3 \">\r\n {this.image_src ? <img class=\"dda-information-card-image\" src={this.image_src} alt={this.image_alt} /> : null}\r\n <p class=\"dda-card-title dda-m-0\">\r\n {this.header_text}\r\n </p>\r\n {this.body_text && <p class=\"dda-card-text dda-m-0\">\r\n {this.body_text}\r\n </p>}\r\n </div>\r\n \r\n <div class=\"dda-container-fluid\">\r\n <div class=\"dda-row\">\r\n {this.left_button_name ?\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button button_color=\"default-tertiary\" start_icon={this.left_button_start_icon} end_icon={this.left_button_end_icon} custom_class=\"dda-w-100\" href={this.left_button_href || ''} rel={this.left_button_rel} button_id=\"link-button\" aria_label=\"link-Button\" link_button_text={this.left_button_name} target={this.left_button_target} ></dda-link-button>\r\n </div>\r\n : null}\r\n\r\n {this.right_button_name ? \r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button button_color=\"default-primary\" start_icon={this.right_button_start_icon} end_icon={this.right_button_end_icon} custom_class=\"dda-w-100\" href={this.right_button_href || ''} rel={this.right_button_rel} button_id=\"link-button\" aria_label=\"link-Button\" link_button_text={this.right_button_name} target={this.right_button_target} ></dda-link-button>\r\n </div>\r\n : null}\r\n </div>\r\n </div>\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dda-information-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q5qDAAq5qD,CAAC;AACx6qD,iCAAe,SAAS;;MCMX,kBAAkB;IAL/B;;;QAeU,2BAAsB,GAAW,EAAE,CAAC;QACpC,yBAAoB,GAAW,EAAE,CAAC;QAClC,uBAAkB,GAAW,EAAE,CAAC;QAMhC,4BAAuB,GAAW,EAAE,CAAC;QACrC,0BAAqB,GAAW,EAAE,CAAC;QACnC,wBAAmB,GAAW,EAAE,CAAC;QAMjC,iBAAY,GAAY,EAAE,CAAC;QAI3B,iBAAY,GAAqB,OAAO,CAAC;KA4DlD;IA1DC,MAAM;QACJ,MAAM,SAAS,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE/H,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,SAAS,IACnBA,kEAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,SAAS,GAAGA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAI,GAAG,IAAI,EAC7GA,gEAAG,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,WAAW,CAAK,EACvD,IAAI,CAAC,SAAS,IAAIA,gEAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,SAAS,CAAK,CACpE,EAENA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,kEAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,gBAAgB,IACpBA,iBAAK,KAAK,EAAC,uCAAuC,IAChDA,6BACE,YAAY,EAAC,kBAAkB,EAC/B,UAAU,EAAE,IAAI,CAAC,sBAAsB,EACvC,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,YAAY,EAAC,WAAW,EACxB,IAAI,EAAE,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAAC,gBAAgB,EAChF,OAAO,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,CAAC;;YAEnG,GAAG,EAAE,IAAI,CAAC,eAAe,EACzB,SAAS,EAAC,aAAa,EACvB,UAAU,EAAC,aAAa,EACxB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,MAAM,EAAE,IAAI,CAAC,kBAAkB,GACd,CACf,IACJ,IAAI,EAEP,IAAI,CAAC,iBAAiB,IACrBA,iBAAK,KAAK,EAAC,uCAAuC,IAChDA,6BACE,YAAY,EAAC,iBAAiB,EAC9B,UAAU,EAAE,IAAI,CAAC,uBAAuB,EACxC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,YAAY,EAAC,WAAW;;YAExB,IAAI,EAAE,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EACjF,OAAO,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,EAAE,CAAC,EACpG,GAAG,EAAE,IAAI,CAAC,gBAAgB,EAC1B,SAAS,EAAC,aAAa,EACvB,UAAU,EAAC,aAAa,EACxB,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,EACxC,MAAM,EAAE,IAAI,CAAC,mBAAmB,GACf,CACf,IACJ,IAAI,CACJ,CACF,EACNA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/global.css?tag=dda-information-card","src/components/cards/dda-information-card/dda-information-card.tsx"],"sourcesContent":["@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-information-card',\r\n styleUrls: ['../../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaInformationCard {\r\n @Prop() image_src: string;\r\n @Prop() image_alt: string;\r\n @Prop() header_text: string;\r\n @Prop() body_text: string;\r\n\r\n @Prop() left_button_name: string;\r\n @Prop() left_button_href?: string;\r\n @Prop() left_button_rel?: string;\r\n @Prop() left_button_data_fancybox: string;\r\n @Prop() left_button_start_icon: string = '';\r\n @Prop() left_button_end_icon: string = '';\r\n @Prop() left_button_target: string = '';\r\n\r\n @Prop() right_button_name: string;\r\n @Prop() right_button_href?: string;\r\n @Prop() right_button_rel?: string;\r\n @Prop() right_button_data_fancybox: string;\r\n @Prop() right_button_start_icon: string = '';\r\n @Prop() right_button_end_icon: string = '';\r\n @Prop() right_button_target: string = '';\r\n\r\n @Prop() left_button: string;\r\n @Prop() right_button: string;\r\n @Prop() single_button: boolean;\r\n\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n\r\n @Event() navigatorClick?: EventEmitter<string>;\r\n @Prop() useNavigator: 'true' | 'false' = 'false';\r\n\r\n render() {\r\n const cardClass = ['dda-card', this.custom_class ? `${this.custom_class}` : '', this.component_mode].filter(Boolean).join(' ');\r\n\r\n return (\r\n <Host>\r\n <div class={cardClass}>\r\n <div class=\"dda-py-4 dda-px-3 \">\r\n {this.image_src ? <img class=\"dda-information-card-image\" src={this.image_src} alt={this.image_alt} /> : null}\r\n <p class=\"dda-card-title dda-m-0\">{this.header_text}</p>\r\n {this.body_text && <p class=\"dda-card-text dda-m-0\">{this.body_text}</p>}\r\n </div>\r\n\r\n <div class=\"dda-container-fluid\">\r\n <div class=\"dda-row\">\r\n {this.left_button_name ? (\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button\r\n button_color=\"default-tertiary\"\r\n start_icon={this.left_button_start_icon}\r\n end_icon={this.left_button_end_icon}\r\n custom_class=\"dda-w-100\"\r\n href={this.useNavigator == 'true' ? 'javascript:void(0)' : this.left_button_href}\r\n onClick={() => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.left_button_href) : '')}\r\n // href={this.left_button_href || ''}\r\n rel={this.left_button_rel}\r\n button_id=\"link-button\"\r\n aria_label=\"link-Button\"\r\n link_button_text={this.left_button_name}\r\n target={this.left_button_target}\r\n ></dda-link-button>\r\n </div>\r\n ) : null}\r\n\r\n {this.right_button_name ? (\r\n <div class=\"dda-col dda-py-3 dda-card-button-wrap\">\r\n <dda-link-button\r\n button_color=\"default-primary\"\r\n start_icon={this.right_button_start_icon}\r\n end_icon={this.right_button_end_icon}\r\n custom_class=\"dda-w-100\"\r\n // href={this.right_button_href || ''}\r\n href={this.useNavigator == 'true' ? 'javascript:void(0)' : this.right_button_href}\r\n onClick={() => (this.useNavigator == 'true' ? this.navigatorClick.emit(this.right_button_href) : '')}\r\n rel={this.right_button_rel}\r\n button_id=\"link-button\"\r\n aria_label=\"link-Button\"\r\n link_button_text={this.right_button_name}\r\n target={this.right_button_target}\r\n ></dda-link-button>\r\n </div>\r\n ) : null}\r\n </div>\r\n </div>\r\n <slot></slot>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -13,6 +13,7 @@ const DdaPaginationStyle1 = globalCss;
|
|
|
13
13
|
const DdaPagination = class {
|
|
14
14
|
constructor(hostRef) {
|
|
15
15
|
index.registerInstance(this, hostRef);
|
|
16
|
+
this.paginateClick = index.createEvent(this, "paginateClick", 7);
|
|
16
17
|
this.total_pages = 8;
|
|
17
18
|
this.current_page = 1;
|
|
18
19
|
this.type = 'simple-slider';
|
|
@@ -62,12 +63,13 @@ const DdaPagination = class {
|
|
|
62
63
|
}
|
|
63
64
|
setcurrentpage(page) {
|
|
64
65
|
if (page >= 1 && page <= this.total_pages) {
|
|
65
|
-
console.log('Pagination button clicked, page:', page); // <-- Log here
|
|
66
|
+
console.log('Pagination button clicked, page:', page, this.paginateClick); // <-- Log here
|
|
66
67
|
this.current_page = page;
|
|
68
|
+
this.paginateClick.emit(page);
|
|
67
69
|
}
|
|
68
70
|
}
|
|
69
71
|
render() {
|
|
70
|
-
return (index.h(index.Host, { key: '
|
|
72
|
+
return (index.h(index.Host, { key: 'f08d87f23e4340a71945346cf983606aef96dd6b' }, index.h("div", { key: '9e82c5bcfc4bbe3c689e4ba993cbeda2c6246d6b', class: `dda-pagination-container` }, this.renderPagination())));
|
|
71
73
|
}
|
|
72
74
|
static get watchers() { return {
|
|
73
75
|
"total_pages": ["validateTotalPages"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"dda-pagination.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dda-pagination/dda-pagination.css?tag=dda-pagination","src/global/global.css?tag=dda-pagination","src/components/dda-pagination/dda-pagination.tsx"],"sourcesContent":[".dda-pagination-container {\r\n min-width: 380px;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n}\r\n\r\n.dda-pagination {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.dda-pagination button {\r\n height: 40px;\r\n min-width: 40px;\r\n border: transparent;\r\n border-radius: 5px;\r\n background-color: var(--dda-surface-100);\r\n font-size: 16px;\r\n color: var(--dda-on-surface-variant-30);\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.light-mode.dda-pagination button{\r\n background-color: var(--dda-neutral-100);\r\n color: var(--dda-neutral-variant-30);\r\n} \r\n\r\n.dda-pagination span{\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-pagination span {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-pagination-simple-slider {\r\n width: 100%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.dda-pagination-simple-slider button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-simple-slider span {\r\n padding: 0 20px;\r\n}\r\n\r\n.dda-pagination-buttons button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-buttons button.active {\r\n background-color: transparent;\r\n color: var(--dda-color-primary-40)\r\n}\r\n.light-mode.dda-pagination-buttons button.active {\r\n color: var(--dda-primary-40)\r\n}\r\n\r\n.dda-pagination-text {\r\n width: 100%;\r\n justify-content: space-between;\r\n}\r\n.dda-pagination-text button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages {\r\n width: 100%;\r\n justify-content: space-between;\r\n gap: 8px;\r\n}\r\n.dda-pagination-text-pages button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-color-primary-40);\r\n color: var(--dda-surface-100)\r\n}\r\n.light-mode.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-primary-40);\r\n color: var(--dda-neutral-100)\r\n}\r\n.dda-pagination-button-text {\r\n width: 100%;\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n\r\n.dda-pagination-button-text button {\r\n min-width: 50px;\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-button-text button.active {\r\n color: var(--dda-color-primary-40);\r\n font-weight: var(--dda-fw-700);\r\n}\r\n.light-mode.dda-pagination-button-text button.active {\r\n color: var(--dda-primary-40);\r\n}\r\n.dda-pagination-button-text button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-button-text button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n.dda-pagination-buttons-pages{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-buttons-pages button {\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n\r\n.dda-pagination-full {\r\n gap: 8px;\r\n}\r\n\r\n.dda-pagination-full button {\r\n min-width: auto;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 10px;\r\n padding: 0px;\r\n overflow: hidden;\r\n text-indent: -100px;\r\n border: solid 1px var(--dda-surface-90);\r\n}\r\n.light-mode.dda-pagination-full button{\r\n border: solid 1px var(--dda-neutral-90);\r\n}\r\n.dda-pagination-full button.active {\r\n background-color: var(--dda-color-primary-40);\r\n border: transparent;\r\n}\r\n.light-mode.dda-pagination-full button.active {\r\n background-color: var(--dda-primary-40);\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-pagination',\r\n styleUrls: ['dda-pagination.css', '../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaPagination {\r\n @Prop() total_pages: number = 8;\r\n @Prop({ mutable: true }) current_page: number = 1;\r\n @Prop() type: 'simple-slider' | 'buttons' | 'text' | 'text-pages' | 'button-text' | 'buttons-pages' | 'full' = 'simple-slider';\r\n @Prop() custom_class: string = '';\r\n @Prop() component_mode?: string; \r\n @Prop() simple_slider_prev_button: string;\r\n @Prop() simple_slider_next_button: string;\r\n @Prop() buttons_prev_button: string;\r\n @Prop() buttons_next_button: string;\r\n @Prop() text_prev_button: string;\r\n @Prop() text_next_button: string;\r\n @Prop() text_pages_prev_button: string;\r\n @Prop() text_pages_next_button: string;\r\n @Prop() button_text_prev_button: string;\r\n @Prop() button_text_next_button: string;\r\n @Prop() buttons_pages_prev_button: string;\r\n @Prop() buttons_pages_next_button: string;\r\n @Prop() buttons_pages_id: string;\r\n\r\n @Watch('total_pages')\r\n validateTotalPages(newValue: number) {\r\n if (newValue < 1) {\r\n this.total_pages = 1;\r\n }\r\n }\r\n\r\n @Watch('current_page')\r\n validateCurrentPage(newValue: number) {\r\n if (newValue < 1) {\r\n this.current_page = 1;\r\n } else if (newValue > this.total_pages) {\r\n this.current_page = this.total_pages;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.validateTotalPages(this.total_pages);\r\n this.validateCurrentPage(this.current_page);\r\n }\r\n\r\n private renderPagination() {\r\n switch (this.type) {\r\n case 'simple-slider':\r\n return (\r\n <div class={`dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.simple_slider_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i> Prev\r\n </button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button\r\n name={this.simple_slider_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n Next <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'buttons':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.buttons_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i> Prev\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.buttons_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n Next <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.text_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button\r\n name={this.text_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'text-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.text_pages_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.text_pages_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'button-text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.button_text_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.button_text_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'buttons-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.buttons_pages_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n <button\r\n name={this.buttons_pages_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'full':\r\n return (\r\n <div class={`dda-pagination dda-pagination-full ${this.custom_class} ${this.component_mode}`}>\r\n {this.renderPageButtons()}\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n private renderPageButtons() {\r\n const buttons = [];\r\n for (let i = 1; i <= this.total_pages; i++) {\r\n buttons.push(\r\n <button\r\n class={i === this.current_page ? 'active' : ''}\r\n onClick={() => this.setcurrentpage(i)}\r\n >\r\n {i}\r\n </button>\r\n );\r\n }\r\n return buttons;\r\n }\r\n\r\n private setcurrentpage(page: number) {\r\n if (page >= 1 && page <= this.total_pages) {\r\n console.log('Pagination button clicked, page:', page); // <-- Log here\r\n this.current_page = page;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`dda-pagination-container`}>\r\n {this.renderPagination()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
1
|
+
{"file":"dda-pagination.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dda-pagination/dda-pagination.css?tag=dda-pagination","src/global/global.css?tag=dda-pagination","src/components/dda-pagination/dda-pagination.tsx"],"sourcesContent":[".dda-pagination-container {\r\n min-width: 380px;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n}\r\n\r\n.dda-pagination {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.dda-pagination button {\r\n height: 40px;\r\n min-width: 40px;\r\n border: transparent;\r\n border-radius: 5px;\r\n background-color: var(--dda-surface-100);\r\n font-size: 16px;\r\n color: var(--dda-on-surface-variant-30);\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.light-mode.dda-pagination button{\r\n background-color: var(--dda-neutral-100);\r\n color: var(--dda-neutral-variant-30);\r\n} \r\n\r\n.dda-pagination span{\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-pagination span {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-pagination-simple-slider {\r\n width: 100%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.dda-pagination-simple-slider button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-simple-slider span {\r\n padding: 0 20px;\r\n}\r\n\r\n.dda-pagination-buttons button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-buttons button.active {\r\n background-color: transparent;\r\n color: var(--dda-color-primary-40)\r\n}\r\n.light-mode.dda-pagination-buttons button.active {\r\n color: var(--dda-primary-40)\r\n}\r\n\r\n.dda-pagination-text {\r\n width: 100%;\r\n justify-content: space-between;\r\n}\r\n.dda-pagination-text button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages {\r\n width: 100%;\r\n justify-content: space-between;\r\n gap: 8px;\r\n}\r\n.dda-pagination-text-pages button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-color-primary-40);\r\n color: var(--dda-surface-100)\r\n}\r\n.light-mode.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-primary-40);\r\n color: var(--dda-neutral-100)\r\n}\r\n.dda-pagination-button-text {\r\n width: 100%;\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n\r\n.dda-pagination-button-text button {\r\n min-width: 50px;\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-button-text button.active {\r\n color: var(--dda-color-primary-40);\r\n font-weight: var(--dda-fw-700);\r\n}\r\n.light-mode.dda-pagination-button-text button.active {\r\n color: var(--dda-primary-40);\r\n}\r\n.dda-pagination-button-text button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-button-text button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n.dda-pagination-buttons-pages{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-buttons-pages button {\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n\r\n.dda-pagination-full {\r\n gap: 8px;\r\n}\r\n\r\n.dda-pagination-full button {\r\n min-width: auto;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 10px;\r\n padding: 0px;\r\n overflow: hidden;\r\n text-indent: -100px;\r\n border: solid 1px var(--dda-surface-90);\r\n}\r\n.light-mode.dda-pagination-full button{\r\n border: solid 1px var(--dda-neutral-90);\r\n}\r\n.dda-pagination-full button.active {\r\n background-color: var(--dda-color-primary-40);\r\n border: transparent;\r\n}\r\n.light-mode.dda-pagination-full button.active {\r\n background-color: var(--dda-primary-40);\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n font-weight: 300;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n font-weight: 400;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n font-weight: 500;\r\n font-style: normal;\r\n}\r\n\r\n@font-face {\r\n font-family: \"Dubai\";\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n font-weight: 700;\r\n font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Event, EventEmitter } from '@stencil/core';\r\nimport { Component, Prop, h, Host, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-pagination',\r\n styleUrls: ['dda-pagination.css', '../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaPagination {\r\n @Prop() total_pages: number = 8;\r\n @Prop({ mutable: true }) current_page: number = 1;\r\n @Prop() type: 'simple-slider' | 'buttons' | 'text' | 'text-pages' | 'button-text' | 'buttons-pages' | 'full' = 'simple-slider';\r\n @Prop() custom_class: string = '';\r\n @Prop() component_mode?: string; \r\n @Prop() simple_slider_prev_button: string;\r\n @Prop() simple_slider_next_button: string;\r\n @Prop() buttons_prev_button: string;\r\n @Prop() buttons_next_button: string;\r\n @Prop() text_prev_button: string;\r\n @Prop() text_next_button: string;\r\n @Prop() text_pages_prev_button: string;\r\n @Prop() text_pages_next_button: string;\r\n @Prop() button_text_prev_button: string;\r\n @Prop() button_text_next_button: string;\r\n @Prop() buttons_pages_prev_button: string;\r\n @Prop() buttons_pages_next_button: string;\r\n @Prop() buttons_pages_id: string;\r\n @Event() paginateClick?: EventEmitter<number>;\r\n\r\n @Watch('total_pages')\r\n validateTotalPages(newValue: number) {\r\n if (newValue < 1) {\r\n this.total_pages = 1;\r\n }\r\n }\r\n\r\n @Watch('current_page')\r\n validateCurrentPage(newValue: number) {\r\n if (newValue < 1) {\r\n this.current_page = 1;\r\n } else if (newValue > this.total_pages) {\r\n this.current_page = this.total_pages;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.validateTotalPages(this.total_pages);\r\n this.validateCurrentPage(this.current_page);\r\n }\r\n\r\n private renderPagination() {\r\n switch (this.type) {\r\n case 'simple-slider':\r\n return (\r\n <div class={`dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.simple_slider_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i> Prev\r\n </button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button\r\n name={this.simple_slider_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n Next <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'buttons':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.buttons_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i> Prev\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.buttons_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n Next <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.text_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button\r\n name={this.text_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'text-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.text_pages_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.text_pages_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'button-text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.button_text_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n {this.renderPageButtons()}\r\n <button\r\n name={this.button_text_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'buttons-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button\r\n name={this.buttons_pages_prev_button}\r\n class=\"prev\"\r\n disabled={this.current_page === 1}\r\n onClick={() => this.setcurrentpage(this.current_page - 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_back</i>\r\n </button>\r\n <button\r\n name={this.buttons_pages_next_button}\r\n class=\"next\"\r\n disabled={this.current_page === this.total_pages}\r\n onClick={() => this.setcurrentpage(this.current_page + 1)}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">arrow_forward</i>\r\n </button>\r\n </div>\r\n );\r\n case 'full':\r\n return (\r\n <div class={`dda-pagination dda-pagination-full ${this.custom_class} ${this.component_mode}`}>\r\n {this.renderPageButtons()}\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n private renderPageButtons() {\r\n const buttons = [];\r\n for (let i = 1; i <= this.total_pages; i++) {\r\n buttons.push(\r\n <button\r\n class={i === this.current_page ? 'active' : ''}\r\n onClick={() => this.setcurrentpage(i)}\r\n >\r\n {i}\r\n </button>\r\n );\r\n }\r\n return buttons;\r\n }\r\n\r\n private setcurrentpage(page: number) {\r\n if (page >= 1 && page <= this.total_pages) {\r\n console.log('Pagination button clicked, page:', page, this.paginateClick); // <-- Log here\r\n this.current_page = page;\r\n this.paginateClick.emit(page)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`dda-pagination-container`}>\r\n {this.renderPagination()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
|
@@ -10,8 +10,10 @@ const DdaTeamsectionCardStyle0 = globalCss;
|
|
|
10
10
|
const DdaImageCard = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
|
+
this.navigatorClick = index.createEvent(this, "navigatorClick", 7);
|
|
13
14
|
this.custom_class = '';
|
|
14
15
|
this.card_type = 'variant-one';
|
|
16
|
+
this.useNavigator = 'false';
|
|
15
17
|
this.social_icons = [];
|
|
16
18
|
this.parsedSocialIcons = [];
|
|
17
19
|
}
|
|
@@ -53,30 +55,33 @@ const DdaImageCard = class {
|
|
|
53
55
|
// </div>
|
|
54
56
|
// )}
|
|
55
57
|
// </div>
|
|
56
|
-
index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src && (index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile picture` : 'Team member profile picture', class: "team-member-image" })), this.header_text && (index.h("div", { class: "dda-p-3 teamsection-type-one-body" }, index.h("div", { class: "teamsection-type-one-content" }, index.h("h5", { class: "h5 Regular" }, this.header_text), this.body_text &&
|
|
58
|
+
index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src && (index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile picture` : 'Team member profile picture', class: "team-member-image" })), this.header_text && (index.h("div", { class: "dda-p-3 teamsection-type-one-body" }, index.h("div", { class: "teamsection-type-one-content" }, index.h("h5", { class: "h5 Regular" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text))))));
|
|
57
59
|
case 'variant-two':
|
|
58
|
-
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src &&
|
|
60
|
+
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src && index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile picture` : 'Team member profile picture' }), this.header_text && (index.h("div", { class: "dda-pt-3" }, index.h("h5", { class: "h5 Regular" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text)))));
|
|
59
61
|
case 'variant-three':
|
|
60
|
-
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src &&
|
|
62
|
+
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": this.header_text || 'Team member card' }, this.image_src && index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile picture` : 'Team member profile picture' }), this.header_text && (index.h("div", { class: "dda-pt-3 dda-mb-3" }, index.h("h5", { class: "h5 Regular" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text))), ((_a = this.parsedSocialIcons) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("ul", { class: "dda-social-icons-card", "aria-label": `${this.header_text} Social media links` }, this.parsedSocialIcons.map((item, index$1) => (index.h("li", { key: index$1 }, index.h("a", {
|
|
63
|
+
// href={item.SocialLink}
|
|
64
|
+
href: this.useNavigator == 'true' ? 'javascript:void(0)' : item.SocialLink, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(item.SocialLink) : ''), title: item.SocialLinkTitle || item.SocialIconText || 'Social media link', target: "_blank", rel: "noopener noreferrer", "aria-label": item.SocialIconText || item.SocialLinkTitle || 'Social media link'
|
|
65
|
+
}, item.SocialIconSrc && index.h("img", { src: item.SocialIconSrc, alt: item.SocialIconAlt || item.SocialIconText || '', class: "social-icon" }), item.SocialIconText && index.h("span", { class: "visually-hidden" }, item.SocialIconText)))))))));
|
|
61
66
|
case 'variant-four':
|
|
62
|
-
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, index.h("div", { class: "dda-row no-gutters" }, index.h("div", { class: "dda-col-sm-4 dda-p-0" }, index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' })), index.h("div", { class: "dda-col-sm-8" }, index.h("div", { class: "dda-h-100 dda-d-flex dda-align-items-center" }, index.h("div", { class: "dda-teamsection-variant-four-body dda-py-4 dda-d-flex dda-flex-column dda-gap-4" }, index.h("div", null, this.header_text && (index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text)), this.profession && (index.h("p", { class: "body Regular dda-color-primary", "aria-label": "Profession" }, this.profession))), this.body_text &&
|
|
67
|
+
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, index.h("div", { class: "dda-row no-gutters" }, index.h("div", { class: "dda-col-sm-4 dda-p-0" }, index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' })), index.h("div", { class: "dda-col-sm-8" }, index.h("div", { class: "dda-h-100 dda-d-flex dda-align-items-center" }, index.h("div", { class: "dda-teamsection-variant-four-body dda-py-4 dda-d-flex dda-flex-column dda-gap-4" }, index.h("div", null, this.header_text && (index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text)), this.profession && (index.h("p", { class: "body Regular dda-color-primary", "aria-label": "Profession" }, this.profession))), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text), ((_b = this.parsedSocialIcons) === null || _b === void 0 ? void 0 : _b.length) > 0 && (index.h("ul", { class: "dda-social-icons-card", "aria-label": `${this.header_text} Social media links` }, this.parsedSocialIcons.map((item, index$1) => (index.h("li", { key: index$1 }, index.h("a", {
|
|
68
|
+
// href={item.SocialLink}
|
|
69
|
+
href: this.useNavigator == 'true' ? 'javascript:void(0)' : item.SocialLink, onClick: () => (this.useNavigator == 'true' ? this.navigatorClick.emit(item.SocialLink) : ''), title: item.SocialLinkTitle || item.SocialIconText || 'Social media link', "aria-label": item.SocialIconText || item.SocialLinkTitle || 'Social media link', target: "_blank", rel: "noopener noreferrer"
|
|
70
|
+
}, item.SocialIconSrc && index.h("img", { src: item.SocialIconSrc, alt: item.SocialIconAlt || item.SocialIconText || 'Social media icon' }), item.SocialIconText && index.h("span", { class: "visually-hidden" }, item.SocialIconText)))))))))))));
|
|
63
71
|
case 'variant-five':
|
|
64
|
-
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src &&
|
|
72
|
+
return (index.h("div", { class: `${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src && index.h("img", { src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' }), this.header_text && (index.h("div", { class: "dda-p-3 teamsection-type-five-body" }, index.h("div", null, index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text))))));
|
|
65
73
|
case 'variant-six':
|
|
66
|
-
return (index.h("div", { class: `dda-teamsection-variant-six ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src &&
|
|
74
|
+
return (index.h("div", { class: `dda-teamsection-variant-six ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src && index.h("img", { class: "dda-rounded-circle", src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' }), this.header_text && (index.h("div", { class: "dda-col" }, index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text)))));
|
|
67
75
|
case 'variant-seven':
|
|
68
|
-
return (index.h("div", { class: `dda-teamsection-variant-seven ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src &&
|
|
76
|
+
return (index.h("div", { class: `dda-teamsection-variant-seven ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src && index.h("img", { class: "", src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' }), this.header_text && (index.h("div", null, index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text)))));
|
|
69
77
|
case 'variant-eight':
|
|
70
|
-
return (index.h("div", { class: `dda-teamsection-variant-eight ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src &&
|
|
78
|
+
return (index.h("div", { class: `dda-teamsection-variant-eight ${this.component_mode}`, role: "group", "aria-label": `Team member card${this.header_text ? ` for ${this.header_text}` : ''}` }, this.image_src && index.h("img", { class: "", src: this.image_src, alt: this.header_text ? `${this.header_text}'s profile photo` : 'Team member profile photo' }), index.h("div", null, this.header_text && (index.h("h5", { class: "h5 Regular", "aria-label": "Team member name" }, this.header_text)), this.body_text && index.h("p", { class: "body-text body Regular" }, this.body_text)), this.body_text_two && index.h("p", { class: "body-text body Regular" }, this.body_text_two)));
|
|
71
79
|
// Add 'full' case if needed later.
|
|
72
80
|
}
|
|
73
81
|
}
|
|
74
82
|
render() {
|
|
75
|
-
const cardClass = [
|
|
76
|
-
|
|
77
|
-
this.custom_class,
|
|
78
|
-
].filter(Boolean).join(' ');
|
|
79
|
-
return (index.h(index.Host, { key: 'c1c1c638ea305d82acfc619d6a824ad01603e547' }, index.h("div", { key: 'abe271e2669750f18e245c651ad2baa075bf8467', class: cardClass }, this.renderCards())));
|
|
83
|
+
const cardClass = ['dda-teamsection-card', this.custom_class].filter(Boolean).join(' ');
|
|
84
|
+
return (index.h(index.Host, { key: '46a1513dcf4e312c29d97098d058ab1a0279681e' }, index.h("div", { key: '4ebf1e12a7c77022d258233805286bfc95a7ad0d', class: cardClass }, this.renderCards())));
|
|
80
85
|
}
|
|
81
86
|
static get watchers() { return {
|
|
82
87
|
"social_icons": ["parseSocialIcons"]
|