@dubai-design-system/components-js 3.1.8 → 3.1.13

package/dist/dda/p-d874a7e1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["homeBannerCss","DdaHomeBannerStyle0","globalCss","DdaHomeBannerStyle1","DdaHomeBanner","constructor","hostRef","this","currentSlide","slides","componentDidLoad","updateSlides","slot","el","querySelector","addEventListener","Array","from","querySelectorAll","length","nextSlide","prevSlide","setSlide","index","render","h","Host","key","class","style","innerWidth","left","onClick","map","_"],"sources":["src/components/dda-home-banner/home-banner.css?tag=dda-home-banner","src/global/global.css?tag=dda-home-banner","src/components/dda-home-banner/dda-home-banner.tsx"],"sourcesContent":[".home-slider {\r\n  position: relative;\r\n  max-width: 100%;\r\n  overflow: hidden;\r\n  display: block;\r\n}\r\n\r\n.home-slider::before {\r\n  content: '';\r\n  width: 100%;\r\n  height: 80%;\r\n  position: absolute;\r\n  bottom: 0;\r\n  background: rgb(0, 0, 0);\r\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\r\n  z-index: 1;\r\n}\r\n\r\n.home-slider img,\r\n.home-slider video {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n\r\n.slider-item {\r\n  display: none;\r\n  width: 100%;\r\n  transition: opacity 0.5s ease-in-out;\r\n}\r\n\r\n.slider-item.active {\r\n  display: block;\r\n}\r\n\r\n.slider-item img {\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 8px;\r\n}\r\n\r\n.home-slider slide {\r\n  position: relative;\r\n  width: 100vw;\r\n  height: 100vh;\r\n}\r\n\r\n.home-slider .slide-wrap {\r\n  position: relative;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.home-slider .dda-slider-container {\r\n  width: 100vw;\r\n  height: 100vh;\r\n  position: relative;\r\n}\r\n\r\n.home-slider .dda-slides {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  height: 100vh;\r\n  display: flex;\r\n  transition: all 0.7s ease-in-out;\r\n}\r\n\r\n.slide-content {\r\n  width: 90vw;\r\n  margin: 0 auto;\r\n  padding: 0 20px;\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n.slide-content h2 {\r\n  font-size: var(--dda-fs-display-sm);\r\n  color: #fff;\r\n  font-weight: var(--dda-fw-700);\r\n}\r\n.slide-content p {\r\n  font-size: var(--dda-fs-headline-sm);\r\n  color: #fff;\r\n  font-weight: var(--dda-fw-300);\r\n}\r\n.slider-nav {\r\n  width: 100%;\r\n  text-align: center;\r\n  position: absolute;\r\n  bottom: 250px;\r\n  left: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 15px;\r\n  height: 30px;\r\n  z-index: 3;\r\n}\r\n.slider-nav .prev,\r\n.slider-nav .next {\r\n  height: 28px;\r\n  width: 28px;\r\n  padding: 0;\r\n  margin: 0;\r\n  border: 0;\r\n  background: none;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #ffffff;\r\n  background: rgba(0, 0, 0, 0);\r\n  border-radius: 50%;\r\n  font-size: 25px;\r\n  transition: all 0.2s linear;\r\n}\r\n.slider-nav .prev:hover,\r\n.slider-nav .next:hover {\r\n  background: rgba(0, 0, 0, 0.45);\r\n}\r\n.slider-nav ul {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 15px;\r\n}\r\n.slider-nav .dots {\r\n  display: block;\r\n  width: 10px;\r\n  height: 10px;\r\n  background: rgba(256,256,256,0.2);\r\n  overflow: hidden;\r\n  text-indent: -100px;\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0px;\r\n  border-radius: 20px;\r\n  cursor: pointer;\r\n  transition: all 0.2s linear;\r\n}\r\n\r\n.slider-nav .dots.active {\r\n  background: rgba(256,256,256,0.85);\r\n}\r\n\r\n\r\n@media screen and (max-width:992px) {\r\n  .slider-nav {\r\n    bottom: 100px;\r\n  }\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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: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(--dda-fs-body-lg) !important;\r\n  font-weight: var(--dda-fw-400) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n.dda-d-none{\r\n  display: none;\r\n}\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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 { Host, Component, h, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-home-banner',\r\n  styleUrls: ['home-banner.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHomeBanner {\r\n  @Element() el: HTMLElement;\r\n  @State() currentSlide: number = 0;\r\n  slides: HTMLElement[] = [];\r\n\r\n  componentDidLoad() {\r\n    this.updateSlides();\r\n    // Listen for slot changes\r\n    const slot = this.el.querySelector('slot');\r\n    slot?.addEventListener('slotchange', () => this.updateSlides());\r\n  }\r\n\r\n  updateSlides() {\r\n    this.slides = Array.from(this.el.querySelectorAll('slide'));\r\n    if (this.slides.length > 0) {\r\n      this.currentSlide = 0; // Reset slide index if slides are updated\r\n    }\r\n  }\r\n\r\n  nextSlide() {\r\n    this.currentSlide = (this.currentSlide + 1) % this.slides.length;\r\n  }\r\n\r\n  prevSlide() {\r\n    this.currentSlide = (this.currentSlide - 1 + this.slides.length) % this.slides.length;\r\n  }\r\n\r\n  setSlide(index) {\r\n    this.currentSlide = index;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"dda-slider-container\">\r\n          <div class=\"dda-slides\" style={{ innerWidth: this.slides.length * 100 + 'vw', left: this.currentSlide * -100 + '%' }}>\r\n            <slot></slot>\r\n          </div>\r\n          <div class={'slider-nav'}>\r\n            <button class=\"prev\" onClick={() => this.prevSlide()}>\r\n              <i class=\"material-icons\">chevron_left</i>\r\n            </button>\r\n            <ul>\r\n              {this.slides.map((_, index) => {\r\n                return <div class={this.currentSlide == index ? 'dots active' : 'dots'} onClick={() => this.setSlide(index)}></div>;\r\n              })}\r\n            </ul>\r\n            <button class=\"next\" onClick={() => this.nextSlide()}>\r\n              <i class=\"material-icons\">chevron_right</i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAgB,ihEACtB,MAAAC,EAAeD,ECDf,MAAME,EAAY,sh1DAClB,MAAAC,EAAeD,E,MCMFE,EAAa,MAL1B,WAAAC,CAAAC,G,UAOWC,KAAAC,aAAuB,EAChCD,KAAAE,OAAwB,E,CAExB,gBAAAC,GACEH,KAAKI,eAEL,MAAMC,EAAOL,KAAKM,GAAGC,cAAc,QACnCF,IAAI,MAAJA,SAAI,SAAJA,EAAMG,iBAAiB,cAAc,IAAMR,KAAKI,gB,CAGlD,YAAAA,GACEJ,KAAKE,OAASO,MAAMC,KAAKV,KAAKM,GAAGK,iBAAiB,UAClD,GAAIX,KAAKE,OAAOU,OAAS,EAAG,CAC1BZ,KAAKC,aAAe,C,EAIxB,SAAAY,GACEb,KAAKC,cAAgBD,KAAKC,aAAe,GAAKD,KAAKE,OAAOU,M,CAG5D,SAAAE,GACEd,KAAKC,cAAgBD,KAAKC,aAAe,EAAID,KAAKE,OAAOU,QAAUZ,KAAKE,OAAOU,M,CAGjF,QAAAG,CAASC,GACPhB,KAAKC,aAAee,C,CAGtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aAAaC,MAAO,CAAEC,WAAYvB,KAAKE,OAAOU,OAAS,IAAM,KAAMY,KAAMxB,KAAKC,cAAgB,IAAM,MAC7GiB,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CAAKC,MAAO,cACVH,EAAA,UAAAE,IAAA,2CAAQC,MAAM,OAAOI,QAAS,IAAMzB,KAAKc,aACvCI,EAAA,KAAAE,IAAA,2CAAGC,MAAM,kBAAgB,iBAE3BH,EAAA,MAAAE,IAAA,4CACGpB,KAAKE,OAAOwB,KAAI,CAACC,EAAGX,IACZE,EAAA,OAAKG,MAAOrB,KAAKC,cAAgBe,EAAQ,cAAgB,OAAQS,QAAS,IAAMzB,KAAKe,SAASC,QAGzGE,EAAA,UAAAE,IAAA,2CAAQC,MAAM,OAAOI,QAAS,IAAMzB,KAAKa,aACvCK,EAAA,KAAAE,IAAA,2CAAGC,MAAM,kBAAgB,oB","ignoreList":[]}

package/dist/dda/p-f229bbfa.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as d,h as s,H as c}from"./p-111a24ea.js";const e=":host{display:block}";const t=e;const b=class{constructor(s){a(this,s);this.linkClick=d(this,"linkClick",7);this.type="default";this.icon="";this.image="";this.maintitle="";this.subtitle="";this.link="";this.linktext="";this.linkicon="arrow_forward"}render(){return s(c,{key:"7ea6b8229bfcb3363a3088cd68aae19fc1005f17"},s("div",{key:"8e5ec8ddb655908b8ae70c991ae80a5371ae63c2",class:"dda-card"},s("div",{key:"2722a0c83ab35b86798b75c5dc37b34b2a316b3a",class:"dda-card-body"},this.type!=="custom"&&s("div",{key:"4bb904d880bf0408322eb05153931680cdc67ab7"},!!this.icon&&s("span",{key:"c245a6dcad401f752ca33aaa9bf59175966aca77",class:"dda-card-icon"},s("i",{key:"e4616e47ea466d774b4380eb658dd2f25d0e1fb0",class:"material-icons"},this.icon)),!!this.image&&s("span",{key:"c8dedba463a55dcbbd06d435ead4044ba0a720f9",class:"dda-card-icon"},s("img",{key:"2f2b4d61d28699f3bb2485a815a9a1759d8134d2",src:this.image,alt:this.maintitle})),!!this.maintitle&&s("h1",{key:"6dfec472bf46ce73ceb724cfa3c4a0c63dff9c57",class:"dda-card-title"},this.maintitle),!!this.subtitle&&s("p",{key:"ae954467233c5914131ffd4485d33181aef7c7b6",class:"dda-card-text-muted"},this.subtitle),!!this.link&&s("a",{key:"e6e60155fad34770a377014b33600628615435ff",href:this.link,class:"dda-card-link"},this.linktext," ",this.linkicon&&s("span",{key:"4a4eaedb88ad7ce8b952195f50b23a7849644c1c"},s("i",{key:"1f4d19f117b4ba5c0993684c5f4efdfb1e9a2062",class:"material-icons"},this.linkicon)))),s("slot",{key:"b0b0eb8faa4081dd611fb7f8bbdfd4866d85145a"}))))}};b.style=t;export{b as dda_ui_card};
-//# sourceMappingURL=p-f229bbfa.entry.js.map