@dubai-design-system/components-js 3.12.5 → 3.12.7

package/dist/collection/components/dda-split-button/dda-split-button.css

@@ -1,607 +0,0 @@
-.dda-btn {
-  height: 44px;
-  font-family: var(--font-family-main);
-  font-size: var(--font-body);
-  font-weight: var(--font-weight-regular);
-  padding: 8px 12px;
-  border-radius: 8px;
-  outline: 0;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
- }
-/**/
-.btn-color-default-primary{
-  background-color: var(--dda-color-primary-40);
-  border: solid 1px var(--dda-color-primary-40);
-  color: var(--dda-on-primary-100);
-}
-.btn-color-default-primary:hover {
-  background-color: var(--dda-on-primary-variant-30);
-  border: solid 1px var(--dda-on-primary-variant-30);
-}
-.btn-color-default-primary:focus {
-  background-color: var(--dda-on-primary-variant-20);
-  outline: var(--dda-on-primary-variant-20);
-}
-/*light*/
-.light-mode.btn-color-default-primary,
-.light-mode .btn-color-default-primary{
-  background-color: var(--dda-primary-40);
-  border: solid 1px var(--dda-primary-40);
-  color: var(--dda-primary-100);
-}
-.light-mode.btn-color-default-primary:hover,
-.light-mode .btn-color-default-primary:hover {
-  background-color: var(--dda-primary-30);
-  border: solid 1px var(--dda-primary-30);
-}
-.light-mode.btn-color-default-primary:focus,
-.light-mode .btn-color-default-primary:focus {
-  background-color: var(--dda-primary-20);
-  outline: var(--dda-primary-20);
-}
-/**/
-
-
-.btn-color-default-secondary {
-  background-color: var(--dda-on-primary-98);
-  border: solid 1px var(--dda-on-primary-98);
-  color: var(--dda-color-primary-40);
-}
-.btn-color-default-secondary:hover {
-  background-color: var(--dda-on-primary-94);
-  border: solid 1px var(--dda-on-primary-94);
-}
-.btn-color-default-secondary:focus {
-  background-color: var(--dda-primary-variant-92);
-  outline: var(--dda-primary-variant-92);
-}
-/*light*/
-.light-mode.btn-color-default-secondary {
-  background-color: var(--dda-primary-98);
-  border: solid 1px var(--dda-primary-98);
-  color: var(--dda-primary-40);
-}
-.light-mode.btn-color-default-secondary:hover {
-  background-color: var(--dda-primary-94);
-  border: solid 1px var(--dda-primary-94);
-}
-.light-mode.btn-color-default-secondary:focus {
-  background-color: var(--dda-primary-92);
-  outline: var(--dda-primary-92);
-}
-/**/
-
-
-.btn-color-default-tertiary {
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-90);
-  color: var(--dda-color-primary-40)
-}
-.btn-color-default-tertiary:hover {
-  background-color: var(--dda-on-primary-98);
-}
-.btn-color-default-tertiary:focus {
-  background-color: var(--dda-on-primary-96);
-}
-/*light*/
-.light-mode.btn-color-default-tertiary {
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-primary-40)
-}
-.light-mode.btn-color-default-tertiary:hover {
-  background-color: var(--dda-primary-98);
-}
-.light-mode.btn-color-default-tertiary:focus {
-  background-color: var(--dda-primary-96);
-}
-/**/
-
-
-.btn-color-default-link {
-  height: auto !important;
-  background-color: transparent !important;
-  border: transparent !important;
-  color: var(--dda-color-primary-40);
-  padding: 0px !important;
-}
-.light-mode.btn-color-default-link {
-  color: var(--dda-primary-40);
-}
-.btn-color-default-link:focus{
-  outline: auto;
-}
-/**/
-
-
-.btn-color-error-primary {
-  background-color: var(--dda-color-error-40);
-  border: solid 1px var(--dda-color-error-40);
-  color: var(--dda-on-primary-100);
-}
-.btn-color-error-primary:hover {
-  background-color: var(--dda-color-error-40);
-  border: solid 1px var(--dda-color-error-40);
-}
-.btn-color-error-primary:focus {
-  background-color: var(--dda-color-error-30);
-  border: solid 1px var(--dda-color-error-30);
-  outline: var(--dda-color-error-30);
-}
-/*light*/
-.light-mode.btn-color-error-primary {
-  background-color: var(--dda-error-40);
-  border: solid 1px var(--dda-error-40);
-  color: var(--dda-primary-100);
-}
-.light-mode.btn-color-error-primary:hover {
-  background-color: var(--dda-error-40);
-  border: solid 1px var(--dda-error-40);
-}
-.light-mode.btn-color-error-primary:focus {
-  background-color: var(--dda-error-30);
-  border: solid 1px var(--dda-error-30);
-  outline: var(--dda-error-30);
-}
-/**/
-
-
-.btn-color-error-secondary {
-  background-color: var(--dda-error-variant-95);
-  border: solid 1px var(--dda-error-variant-95);
-  color: var(--dda-color-error-40);
-}
-.btn-color-error-secondary:hover {
-  background-color: var(--dda-on-error-98);
-  border: solid 1px var(--dda-on-error-98);
-}
-.btn-color-error-secondary:focus {
-  background-color: var(--dda-on-error-96);
-  border: solid 1px var(--dda-on-error-96);
-}
-/*light*/
-.light-mode.btn-color-error-secondary {
-  background-color: var(--dda-error-95);
-  border: solid 1px var(--dda-error-95);
-  color: var(--dda-error-40);
-}
-.light-mode.btn-color-error-secondary:hover {
-  background-color: var(--dda-error-98);
-  border: solid 1px var(--dda-error-98);
-}
-.light-mode.btn-color-error-secondary:focus {
-  background-color: var(--dda-error-96);
-  border: solid 1px var(--dda-error-96);
-}
-/**/
-
-
-.btn-color-error-tertiary {
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-90);
-  color: var(--dda-color-error-40);
-}
-.btn-color-error-tertiary:hover {
-  background-color: var(--dda-on-error-98);
-}
-.btn-color-error-tertiary:focus {
-  background-color: var(--dda-on-error-96);
-}
-/*light*/
-.light-mode.btn-color-error-tertiary {
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-error-40);
-}
-.light-mode.btn-color-error-tertiary:hover {
-  background-color: var(--dda-error-98);
-}
-.light-mode.btn-color-error-tertiary:focus {
-  background-color: var(--dda-error-96);
-}
-/**/
-
-
-.btn-color-error-link {
-  height: auto !important;
-  background-color: transparent !important;
-  border: transparent !important;
-  color: var(--dda-color-error-40);
-  padding: 0px !important;
-}
-.light-mode.btn-color-error-link {
-  color: var(--dda-error-40);
-}
-.btn-color-error-link:focus{
-  outline: auto;
-}
-/**/
-
-
-.btn-color-onsurface-primary {
-  background-color: var(--dda-on-surface-0);
-  border: solid 1px var(--dda-on-surface-0);
-  color: var(--dda-surface-100);
-}
-.btn-color-onsurface-primary:hover {
-  background-color: var(--dda-on-surface-20);
-  border: solid 1px var(--dda-on-surface-20);
-}
-.btn-color-onsurface-primary:focus {
-  background-color: var(--dda-on-surface-30);
-  border: solid 1px var(--dda-on-surface-30);
-}
-/*light*/
-.light-mode.btn-color-onsurface-primary {
-  background-color: var(--dda-neutral-0);
-  border: solid 1px var(--dda-neutral-0);
-  color: var(--dda-neutral-100);
-}
-.light-mode.btn-color-onsurface-primary:hover {
-  background-color: var(--dda-neutral-20);
-  border: solid 1px var(--dda-neutral-20);
-}
-.light-mode.btn-color-onsurface-primary:focus {
-  background-color: var(--dda-neutral-30);
-  border: solid 1px var(--dda-neutral-30);
-}
-/**/
-
-.btn-color-onsurface-secondary {
-  background-color: var(--dda-surface-96);
-  border: solid 1px var(--dda-surface-96);
-  color: var(--dda-on-surface-0);
-}
-.btn-color-onsurface-secondary:hover {
-  background-color: var(--dda-surface-94);
-  border: solid 1px var(--dda-surface-94);
-}
-.btn-color-onsurface-secondary:focus {
-  background-color: var(--dda-surface-92);
-  border: solid 1px var(--dda-surface-92);
-}
-/*light*/
-.light-mode.btn-color-onsurface-secondary {
-  background-color: var(--dda-neutral-96);
-  border: solid 1px var(--dda-neutral-96);
-  color: var(--dda-neutral-0);
-}
-.light-mode.btn-color-onsurface-secondary:hover {
-  background-color: var(--dda-neutral-94);
-  border: solid 1px var(--dda-neutral-94);
-}
-.light-mode.btn-color-onsurface-secondary:focus {
-  background-color: var(--dda-neutral-92);
-  border: solid 1px var(--dda-neutral-92);
-}
-/**/
-
-.btn-color-onsurface-tertiary {
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-90);
-  color: var(--dda-on-surface-0);
-}
-.btn-color-onsurface-tertiary:hover {
-  background-color: var(--dda-surface-94);
-}
-.btn-color-onsurface-tertiary:focus {
-  background-color: var(--dda-surface-90);
-}
-/*light*/
-.light-mode.btn-color-onsurface-tertiary {
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-90);
-  color: var(--dda-neutral-0);
-}
-.light-mode.btn-color-onsurface-tertiary:hover {
-  background-color: var(--dda-neutral-94);
-}
-.light-mode.btn-color-onsurface-tertiary:focus {
-  background-color: var(--dda-neutral-90);
-}
-/**/
-
-.btn-color-onsurface-link {
-  height: auto !important;
-  background-color: transparent !important;
-  border: transparent !important;
-  color: var(--dda-on-surface-0);
-  padding: 0px !important;
-}
-.light-mode.btn-color-onsurface-link {
-  color: var(--dda-neutral-0);
-}
-.btn-color-onsurface-link:focus{
-  outline: auto;
-}
-/**/
-
-.btn-color-secondary {
-  background-color: var(--dda-color-secondary-40);
-  border: solid 1px var(--dda-color-secondary-40);
-  color: var(--dda-on-secondary-100);
-}
-.btn-color-secondary:hover {
-  background-color: var(--dda-color-secondary-30);
-  border: solid 1px var(--dda-color-secondary-30);
-}
-.btn-color-secondary:focus {
-  background-color: var(--dda-color-secondary-20);
-  border: solid 1px var(--dda-color-secondary-20);
-  outline: var(--dda-color-secondary-20);
-}
-/*light*/
-.light-mode.btn-color-secondary {
-  background-color: var(--dda-secondary-40);
-  border: solid 1px var(--dda-secondary-40);
-  color: var(--dda-secondary-100);
-}
-.light-mode.btn-color-secondary:hover {
-  background-color: var(--dda-secondary-30);
-  border: solid 1px var(--dda-secondary-30);
-}
-.light-mode.btn-color-secondary:focus {
-  background-color: var(--dda-secondary-20);
-  border: solid 1px var(--dda-secondary-20);
-  outline: var(--dda-secondary-20);
-}
-/**/
-
-.btn-color-success {
-  background-color: var(--dda-color-success-50);
-  border: solid 1px var(--dda-color-success-50);
-  color: var(--dda-on-success-100);
-}
-.btn-color-success:hover {
-  background-color: var(--dda-color-success-40);
-  border: solid 1px var(--dda-color-success-40);
-}
-.btn-color-success:focus {
-  background-color: var(--dda-color-success-30);
-  border: solid 1px var(--dda-color-success-30);
-  outline: var(--dda-color-success-30);
-}
-/*light*/
-.light-mode.btn-color-success {
-  background-color: var(--dda-success-50);
-  border: solid 1px var(--dda-success-50);
-  color: var(--dda-success-100);
-}
-.light-mode.btn-color-success:hover {
-  background-color: var(--dda-success-40);
-  border: solid 1px var(--dda-success-40);
-}
-.light-mode.btn-color-success:focus {
-  background-color: var(--dda-success-30);
-  border: solid 1px var(--dda-success-30);
-  outline: var(--dda-success-30);
-}
-/**/
-
-.btn-color-warning {
-  background-color: var(--dda-color-warning-50);
-  border: solid 1px var(--dda-color-warning-50);
-  color: var(--dda-on-warning-100);
-}
-.btn-color-warning:hover {
-  background-color: var(--dda-color-warning-40);
-  border: solid 1px var(--dda-color-warning-40);
-  border-color: var(--dda-color-warning-40);
-}
-.btn-color-warning:focus {
-  background-color: var(--dda-color-warning-30);
-  border: solid 1px var(--dda-color-warning-30);
-  outline: var(--dda-color-warning-30);
-}
-/*light*/
-.light-mode.btn-color-warning {
-  background-color: var(--dda-warning-50);
-  border: solid 1px var(--dda-warning-50);
-  color: var(--dda-warning-100);
-}
-.light-mode.btn-color-warning:hover {
-  background-color: var(--dda-warning-40);
-  border: solid 1px var(--dda-warning-40);
-  border-color: var(--dda-warning-40);
-}
-.light-mode.btn-color-warning:focus {
-  background-color: var(--dda-warning-30);
-  border: solid 1px var(--dda-warning-30);
-  outline: var(--dda-warning-30);
-}
-/**/
-
-.btn-color-surface {
-  background-color: var(--dda-surface-100);
-  border: solid 1px var(--dda-surface-100);
-  color: var(--dda-on-surface-0);
-}
-.btn-color-surface:hover {
-  background-color: var(--dda-surface-94);
-  border: solid 1px var(--dda-surface-94);
-}
-.btn-color-surface:focus {
-  background-color: var(--dda-surface-92);
-  border: solid 1px var(--dda-surface-92);
-  outline: var(--dda-on-surface-20);
-}
-/*light*/
-.light-mode.btn-color-surface {
-  background-color: var(--dda-neutral-100);
-  border: solid 1px var(--dda-neutral-100);
-  color: var(--dda-neutral-0);
-}
-.light-mode.btn-color-surface:hover {
-  background-color: var(--dda-neutral-94);
-  border: solid 1px var(--dda-neutral-94);
-}
-.light-mode.btn-color-surface:focus {
-  background-color: var(--dda-neutral-92);
-  border: solid 1px var(--dda-neutral-92);
-  outline: var(--dda-neutral-20);
-}
-/**/
-
-.btn-color-surface-variant {
-  background-color: var(--dda-on-surface-variant-30);
-  border: solid 1px var(--dda-on-surface-variant-30);
-  color: var(--dda-surface-variant-90);
-}
-.btn-color-surface-variant:hover {
-  background-color: var(--dda-on-surface-variant-25);
-  border: solid 1px var(--dda-on-surface-variant-25);
-}
-.btn-color-surface-variant:focus {
-  background-color: var(--dda-on-surface-variant-20);
-  border: solid 1px var(--dda-on-surface-variant-20);
-  outline: var(--dda-on-surface-variant-20);
-}
-/*light*/
-.light-mode.btn-color-surface-variant {
-  background-color: var(--dda-neutral-variant-30);
-  border: solid 1px var(--dda-neutral-variant-30);
-  color: var(--dda-neutral-variant-90);
-}
-.light-mode.btn-color-surface-variant:hover {
-  background-color: var(--dda-neutral-variant-25);
-  border: solid 1px var(--dda-neutral-variant-25);
-}
-.light-mode.btn-color-surface-variant:focus {
-  background-color: var(--dda-neutral-variant-20);
-  border: solid 1px var(--dda-neutral-variant-20);
-  outline: var(--dda-neutral-variant-20);
-}
-/**/
-
-.btn-color-disabled {
-  background-color: var(--dda-surface-92) !important;
-  border: solid 1px var(--dda-surface-92) !important;
-  color: var(--dda-neutral-60) !important;
-  cursor: not-allowed;
-}
-.light-mode.btn-color-disabled {
-  background-color: var(--dda-neutral-92) !important;
-  border: solid 1px var(--dda-neutral-92) !important;
-  color: var(--dda-neutral-60) !important;
-  cursor: not-allowed;
-}
-/**/
-
-.btn-size-sm {
-  height: 32px;
-  padding: 12px;
-  font-size: var(--font-caption);
-  gap: 4px;
-}
-
-.btn-size-md {
-  height: 40px;
-  padding: 8px 12px;
-  font-size: var(--font-body);
-  gap: 4px;
-}
-
-.btn-size-lg {
-  height: 48px;
-  padding: 10px 16px;
-  font-size: var(--font-h6);
-  gap: 8px;
-}
-
-.btn-size-xl {
-  height: 56px;
-  padding: 10px 24px;
-  font-size: var(--font-h6);
-  gap: 8px;
-}
-
-.icon-btn-default {
-  height: 44px;
-  min-width: 44px;
-  padding: 8px 0;
-  border-radius: 4px;
-}
-
-.icon-btn-circle {
-  height: 44px;
-  min-width: 44px;
-  padding: 8px 0;
-  border-radius: 100px;
-}
-
-.btn-shape-default {
-  border-radius: 4px;
-}
-
-.btn-shape-circle {
-  border-radius: 100px;
-}
-
-.icon-btn-default.btn-size-sm,
-.icon-btn-circle.btn-size-sm {
-  height: 40px;
-  min-width: 40px;
-  padding: 8px 0;
-}
-
-.icon-btn-default.btn-size-md,
-.icon-btn-circle.btn-size-md {
-  height: 44px;
-  min-width: 44px;
-  padding: 10px 0;
-}
-
-.icon-btn-default.btn-size-lg,
-.icon-btn-circle.btn-size-lg {
-  height: 48px;
-  min-width: 48px;
-  padding: 12px 0;
-}
-
-.icon-btn-default.btn-size-xl,
-.icon-btn-circle.btn-size-xl {
-  height: 56px;
-  min-width: 56px;
-  padding: 16px 0;
-}
-
-.dda-btn-icon i,
-.dda-btn-icon svg {
-  font-size: var(--font-h6);
-}
-
-.dda-btn.btn-size-sm i,
-.dda-btn.btn-size-sm svg{
-  font-size: var(--font-body);
-}
-
-
-/********Split Button********/
-.dda-split-btn {
-  height: 44px;
-  font-family: var(--font-family-main);
-  font-size: var(--font-body);
-  font-weight: var(--font-weight-regular);
-  padding: 8px 12px;
-  border-radius: 8px;
-  outline: 0;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-.split-btn-shape-default {
-  border-radius: 0px;
-  border-end-start-radius: 8px;
-  border-start-start-radius: 8px;
-}
-.split-btn-shape-circle {
-  border-radius: 0px;
-  border-end-start-radius: 100px;
-  border-start-start-radius: 100px;
-}

package/dist/dda/p-16812c63.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as t,g as o}from"./p-1b339a0a.js";const r='.dda-home-carousel{width:100%;overflow:hidden;position:relative}.dda-home-carousel-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.dda-home-carousel-track::-webkit-scrollbar{display:none}.dda-home-carousel-item{scroll-snap-align:start;flex-shrink:0;padding:0px 2px;padding-top:30px;overflow:hidden;}@media (max-width: 1200px){.dda-home-carousel-item{flex:0 0 24% !important}}@media (max-width: 1024px){.dda-home-carousel-item{flex:0 0 32% !important}}@media (max-width: 768px){.dda-home-carousel-item{flex:0 0 48% !important}}@media (max-width: 576px){.dda-home-carousel-item{flex:0 0 97% !important}}.dda-home-carousel .dda-banner-card{height:100%;transform:translate(0, 0px);padding-bottom:24px}.dda-home-carousel .dda-banner-card::after{content:"";width:20px;height:20px;background-color:var(--dda-surface-100);border-radius:0px 0px 5px 0px;position:absolute;bottom:0px;transform:rotate(45deg);left:50%;margin-left:-10px;}.dda-home-carousel .dda-banner-card:hover::after{bottom:-9px}@media (min-width: 1024px){.dda-home-carousel-item:hover .dda-banner-card{transform:translate(0, -25px)}}@media (max-width: 1024px){.dda-home-carousel-item .dda-banner-card{border-radius:16px}}.dda-home-quick-links-wrap{width:100%;z-index:1;position:absolute;bottom:50px}.dda-home-quick-links{width:90vw;margin:0 auto;gap:8px;padding:0 20px}@media screen and (max-width: 1024px){.dda-home-quick-links-wrap{bottom:100px;padding-bottom:0px}.dda-home-quick-links{width:100vw}}@media (prefers-reduced-motion: no-preference){.dda-home-carousel .dda-banner-card::after{transition:0.3s}}';const d=r;const i=class{constructor(a){e(this,a);this.custom_class="";this.items_in_view=5;this.bannercardlist=[];this.parsedCardList=[];this.handleMouseMove=e=>{if(!this.containerRef)return;const a=this.containerRef.getBoundingClientRect();const t=e.clientX-a.left;const o=t/a.width;const r=this.containerRef.scrollWidth-this.containerRef.clientWidth;const d=getComputedStyle(this.containerRef).direction==="rtl";const i=d?r-o*r:o*r;this.containerRef.scrollLeft=d?-i:i};this.handleMouseLeave=()=>{const e=this.containerRef.scrollWidth/this.parsedCardList.length;const a=Math.round(this.containerRef.scrollLeft/e);this.containerRef.scrollTo({left:a*e,behavior:"smooth"})}}parseBannerCardList(e){if(typeof e==="string"){try{this.parsedCardList=JSON.parse(e)}catch(e){console.error("Invalid JSON for bannercardlist:",e);this.parsedCardList=[]}}else if(Array.isArray(e)){this.parsedCardList=e}else{this.parsedCardList=[]}}componentWillLoad(){this.parseBannerCardList(this.bannercardlist)}componentDidLoad(){this.containerRef=this.el.querySelector(".dda-home-carousel-track");this.containerRef.addEventListener("mousemove",this.handleMouseMove);this.containerRef.addEventListener("mouseleave",this.handleMouseLeave);this.containerRef.querySelectorAll("img").forEach((e=>{e.addEventListener("dragstart",(e=>e.preventDefault()))}))}disconnectedCallback(){var e,a;(e=this.containerRef)===null||e===void 0?void 0:e.removeEventListener("mousemove",this.handleMouseMove);(a=this.containerRef)===null||a===void 0?void 0:a.removeEventListener("mouseleave",this.handleMouseLeave)}handleCardClick(e){console.log("Card clicked from carousel:",e);this.el.dispatchEvent(new CustomEvent("cardClick",{detail:e,bubbles:true,composed:true}))}render(){const e=["dda-home-carousel",this.custom_class,this.component_mode].filter(Boolean).join(" ");const o=100/this.items_in_view;return a(t,{key:"7bb946882d9d406a933091c202fed37046a03c63"},a("div",{key:"f3f3edf9dc72ce44f4a3b353b04a9abcd38e6e05",class:e,role:"region","aria-roledescription":"carousel","aria-label":"Banner cards carousel"},a("div",{key:"bb6514c726cb1b1ca88fd2ca635467d2aed7fea2",class:"dda-home-carousel-track",ref:e=>this.containerRef=e,role:"list",tabIndex:0,"aria-live":"polite"},this.parsedCardList.map(((e,t)=>a("div",{class:"dda-home-carousel-item",key:e.banner_card_id||t,style:{flex:`0 0 ${o}%`},role:"listitem",tabIndex:-1,"aria-label":`${e.banner_card_title||"Carousel item"} ${t+1} of ${this.parsedCardList.length}`},a("dda-banner-card",{image_src:e.image_src,image_alt:e.image_alt,banner_card_title:e.banner_card_title,banner_card_description:e.banner_card_description,banner_card_id:e.banner_card_id||`card-${t}`,banner_card_value:e.banner_card_value,banner_card_name:e.banner_card_name,custom_class:e.custom_class||"",component_mode:e.component_mode||"",onClick:()=>this.handleCardClick(e)})))))))}get el(){return o(this)}static get watchers(){return{bannercardlist:["parseBannerCardList"]}}};i.style=d;export{i as dda_home_carousel};
-//# sourceMappingURL=p-16812c63.entry.js.map

package/dist/dda/p-16812c63.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ddaHomeCarouselCss","DdaHomeCarouselStyle0","DdaHomeCarousel","constructor","hostRef","this","custom_class","items_in_view","bannercardlist","parsedCardList","handleMouseMove","e","containerRef","rect","getBoundingClientRect","mouseX","clientX","left","percentage","width","maxScroll","scrollWidth","clientWidth","isRTL","getComputedStyle","direction","targetScroll","scrollLeft","handleMouseLeave","itemWidth","length","index","Math","round","scrollTo","behavior","parseBannerCardList","newValue","JSON","parse","console","error","Array","isArray","componentWillLoad","componentDidLoad","el","querySelector","addEventListener","querySelectorAll","forEach","img","preventDefault","disconnectedCallback","_a","removeEventListener","_b","handleCardClick","item","log","dispatchEvent","CustomEvent","detail","bubbles","composed","render","cardClass","component_mode","filter","Boolean","join","h","Host","key","class","role","ref","tabIndex","map","banner_card_id","style","flex","banner_card_title","image_src","image_alt","banner_card_description","banner_card_value","banner_card_name","onClick"],"sources":["src/components/dda-home-carousel/dda-home-carousel.css?tag=dda-home-carousel","src/components/dda-home-carousel/dda-home-carousel.tsx"],"sourcesContent":[".dda-home-carousel {\r\n  width: 100%;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n.dda-home-carousel-track {\r\n  display: flex;\r\n  overflow-x: auto;\r\n  scroll-snap-type: x mandatory;\r\n  scroll-behavior: smooth;\r\n  -webkit-overflow-scrolling: touch;\r\n  scrollbar-width: none;\r\n  -ms-overflow-style: none;\r\n}\r\n\r\n\r\n.dda-home-carousel-track::-webkit-scrollbar {\r\n  display: none;\r\n}\r\n\r\n\r\n/* Default (Desktop) - using items_in_view via inline style (already applied in component) */\r\n.dda-home-carousel-item {\r\n  scroll-snap-align: start;\r\n  flex-shrink: 0;\r\n  padding: 0px 2px;\r\n  padding-top: 30px;\r\n  overflow: hidden;\r\n  /* width set via inline style like: style={{ flex: `0 0 ${itemWidth}%` }} */\r\n}\r\n\r\n\r\n@media (max-width: 1200px) {\r\n  .dda-home-carousel-item {\r\n    flex: 0 0 24% !important; \r\n  }\r\n}\r\n\r\n\r\n@media (max-width: 1024px) {\r\n  .dda-home-carousel-item {\r\n    flex: 0 0 32% !important;\r\n  }\r\n}\r\n\r\n\r\n@media (max-width: 768px) {\r\n  .dda-home-carousel-item {\r\n    flex: 0 0 48% !important;\r\n  }\r\n}\r\n\r\n@media (max-width: 576px) {\r\n  .dda-home-carousel-item {\r\n    flex: 0 0 97% !important;\r\n  }\r\n}\r\n\r\n\r\n.dda-home-carousel .dda-banner-card {\r\n    height: 100%;\r\n    transform: translate(0, 0px);\r\n    padding-bottom: 24px;\r\n}\r\n.dda-home-carousel .dda-banner-card::after{\r\n  content: \"\";\r\n  width: 20px;\r\n  height: 20px;\r\n  background-color: var(--dda-surface-100);\r\n  border-radius: 0px 0px 5px 0px;\r\n  position: absolute;\r\n  bottom: 0px;\r\n  transform: rotate(45deg);\r\n  left: 50%;\r\n  margin-left: -10px;\r\n  /* transition: 0.3s; */\r\n}\r\n.dda-home-carousel .dda-banner-card:hover::after{\r\n  bottom: -9px;\r\n}\r\n@media (min-width: 1024px) {\r\n  .dda-home-carousel-item:hover .dda-banner-card {\r\n      transform: translate(0, -25px);\r\n  }\r\n}\r\n@media (max-width: 1024px) {\r\n  .dda-home-carousel-item .dda-banner-card {\r\n    border-radius: 16px;\r\n  }\r\n}\r\n\r\n/*********************Placing style on the home page*************************/\r\n.dda-home-quick-links-wrap {\r\n    width: 100%;\r\n    z-index: 1;\r\n    position: absolute;\r\n    bottom: 50px;\r\n}\r\n.dda-home-quick-links {\r\n  width: 90vw;\r\n  margin: 0 auto;\r\n  gap: 8px;\r\n  padding: 0 20px;\r\n}\r\n@media screen and (max-width: 1024px) {\r\n    .dda-home-quick-links-wrap{\r\n        bottom: 100px;\r\n        padding-bottom: 0px;\r\n    }\r\n    .dda-home-quick-links{\r\n      width: 100vw;\r\n    }\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n  .dda-home-carousel .dda-banner-card::after{\r\n    transition: 0.3s;\r\n  }\r\n}\r\n\r\n","import { Component, Prop, h, Host, Element, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-home-carousel',\r\n  styleUrls: ['dda-home-carousel.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHomeCarousel {\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() items_in_view: number = 5;\r\n  @Prop() bannercardlist: string | any[] = [];\r\n\r\n  @Element() el: HTMLElement;\r\n\r\n  private containerRef: HTMLElement;\r\n  private parsedCardList: any[] = [];\r\n\r\n  @Watch('bannercardlist')\r\n  parseBannerCardList(newValue: string | any[]) {\r\n    if (typeof newValue === 'string') {\r\n      try {\r\n        this.parsedCardList = JSON.parse(newValue);\r\n      } catch (e) {\r\n        console.error('Invalid JSON for bannercardlist:', e);\r\n        this.parsedCardList = [];\r\n      }\r\n    } else if (Array.isArray(newValue)) {\r\n      this.parsedCardList = newValue;\r\n    } else {\r\n      this.parsedCardList = [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.parseBannerCardList(this.bannercardlist);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.containerRef = this.el.querySelector('.dda-home-carousel-track');\r\n    this.containerRef.addEventListener('mousemove', this.handleMouseMove);\r\n    this.containerRef.addEventListener('mouseleave', this.handleMouseLeave);\r\n    this.containerRef.querySelectorAll('img').forEach((img) => {\r\n      img.addEventListener('dragstart', (e) => e.preventDefault());\r\n    });\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.containerRef?.removeEventListener('mousemove', this.handleMouseMove);\r\n    this.containerRef?.removeEventListener('mouseleave', this.handleMouseLeave);\r\n  }\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.containerRef) return;\r\n\r\n    const rect = this.containerRef.getBoundingClientRect();\r\n    const mouseX = e.clientX - rect.left;\r\n    const percentage = mouseX / rect.width;\r\n    const maxScroll = this.containerRef.scrollWidth - this.containerRef.clientWidth;\r\n    const isRTL = getComputedStyle(this.containerRef).direction === 'rtl';\r\n\r\n    const targetScroll = isRTL\r\n      ? maxScroll - percentage * maxScroll\r\n      : percentage * maxScroll;\r\n\r\n    this.containerRef.scrollLeft = isRTL ? -targetScroll : targetScroll;\r\n  };\r\n\r\n  handleMouseLeave = () => {\r\n    const itemWidth = this.containerRef.scrollWidth / this.parsedCardList.length;\r\n    const index = Math.round(this.containerRef.scrollLeft / itemWidth);\r\n    this.containerRef.scrollTo({ left: index * itemWidth, behavior: 'smooth' });\r\n  };\r\n\r\n  handleCardClick(item: any) {\r\n    console.log('Card clicked from carousel:', item);\r\n\r\n    this.el.dispatchEvent(\r\n      new CustomEvent('cardClick', {\r\n        detail: item,\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const cardClass = ['dda-home-carousel', this.custom_class, this.component_mode]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n    const itemWidth = 100 / this.items_in_view;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={cardClass}\r\n          role=\"region\"\r\n          aria-roledescription=\"carousel\"\r\n          aria-label=\"Banner cards carousel\"\r\n        >\r\n          <div\r\n            class=\"dda-home-carousel-track\"\r\n            ref={(el) => (this.containerRef = el)}\r\n            role=\"list\"\r\n            tabIndex={0}\r\n            aria-live=\"polite\"\r\n          >\r\n            {this.parsedCardList.map((item, index) => (\r\n              <div\r\n                class=\"dda-home-carousel-item\"\r\n                key={item.banner_card_id || index}\r\n                style={{ flex: `0 0 ${itemWidth}%` }}\r\n                role=\"listitem\"\r\n                tabIndex={-1}\r\n                aria-label={`${item.banner_card_title || 'Carousel item'} ${index + 1} of ${this.parsedCardList.length}`}\r\n              >\r\n                <dda-banner-card\r\n                  image_src={item.image_src}\r\n                  image_alt={item.image_alt}\r\n                  banner_card_title={item.banner_card_title}\r\n                  banner_card_description={item.banner_card_description}\r\n                  banner_card_id={item.banner_card_id || `card-${index}`}\r\n                  banner_card_value={item.banner_card_value}\r\n                  banner_card_name={item.banner_card_name}\r\n                  custom_class={item.custom_class || ''}\r\n                  component_mode={item.component_mode || ''}\r\n                  onClick={() => this.handleCardClick(item)}\r\n                ></dda-banner-card>\r\n              </div>\r\n            ))}\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/dda/p-24da4601.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as e,H as i,g as a}from"./p-1b339a0a.js";const h=class{constructor(e){t(this,e);this.selectChanged=s(this,"selectChanged",7);this.onChanged=s(this,"onChanged",7);this.selectBlurred=s(this,"selectBlurred",7);this.onBlurred=s(this,"onBlurred",7);this.disabled=false;this.validation_id="text";this.custom_class="";this.placeholder="";this.main_aria_label="";this.input_name="";this.is_open=false;this.handleClickOutside=t=>{if(this.is_open&&!this.el.contains(t.target)){this.is_open=false}};this.handleBlur=()=>{this.selectBlurred.emit({name:this.input_name||this.button_id,value:this.selectedText||""});this.onBlurred.emit(this.selectedId);this.el.dispatchEvent(new FocusEvent("blur",{bubbles:true,composed:true}))}}get parsedOptions(){try{return JSON.parse(this.options)}catch(t){return[]}}componentWillLoad(){const t=this.parsedOptions.find((t=>t.id.toString()===this.selected||t.text===this.selected));if(t){this.selectedId=t.id;this.selectedText=t.text}if(this.selected){this.watchSelected(this.selected)}}toggleSelect(){if(!this.disabled){this.is_open=!this.is_open}}selectOption(t){if(!this.disabled){this.selectedId=t.id;this.selectedText=t.text;this.is_open=false;this.selectChanged.emit(t);this.onChanged.emit(t.id);this.el.dispatchEvent(new InputEvent("input",{bubbles:true,composed:true,data:t.id,inputType:"select"}))}}connectedCallback(){document.addEventListener("click",this.handleClickOutside)}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside)}async setSelected(t){const s=this.parsedOptions.find((s=>s.id.toString()===t.toString()||s.text===t));if(s){this.selectedId=s.id;this.selectedText=s.text;this.selected=s.id.toString()}else{this.selectedId=undefined;this.selectedText="";this.selected=""}}async setValue(t){const s=this.parsedOptions.find((s=>s.id.toString()===t.toString()||s.text===t));if(s){this.selectedId=s.id;this.selectedText=s.text;this.selected=s.id.toString()}else{this.selectedId=undefined;this.selectedText="";this.selected=""}}async getSelectedText(){return this.selectedText}async getValue(){return this.selectedText||""}watchSelected(t){const s=this.parsedOptions.find((s=>s.id.toString()===t||s.text===t));if(s){this.selectedId=s.id;this.selectedText=s.text}else{this.selectedId=undefined;this.selectedText=""}}numberToWord(t){const s=["One","Two","Three","Four","Five"];return s[t-1]||t.toString()}render(){const t=`${this.button_id}-label`;const s=`${this.button_id}-value`;return e(i,{key:"ecf43cd602ef0f98974d1c76cfd50ac7357b6a08"},e("div",{key:"4c15c3048ad62d235b7259cbf3f39921909ce5e5",class:`\n            dda-input-container ${this.custom_class} \n            ${this.component_mode} \n            ${this.disabled?"dda-input-disabled":""} \n            dda-input-size-${this.size} dda-validation-${this.validation_type}\n          `},this.label&&e("span",{key:"e58cda1941ef732a951dc06f7c01f7d904a1c8c3",id:t,class:"dda-input-label"},this.label),e("div",{key:"6885ef524717d3b8f9850b3995f56ae5194e748a",class:"dda-dropdown-container"},e("button",{key:"a4e6e30acdf55e12aa4742f9dc824c9e1eec0b57",name:this.toggle_button_name,id:this.button_id,type:"button",class:"dda-input-field dda-select-header","aria-labelledby":`${t} ${this.button_id}`,disabled:this.disabled,onClick:()=>this.toggleSelect(),onBlur:this.handleBlur},e("span",{key:"8f67e50593affdb2b558200091c2aecd53e9c387",id:s,class:"dda-select-button-label"},this.selectedText||this.placeholder),e("i",{key:"423ca7dcd2b51118ffa5e5cddaa86d05ae981e5d",class:"material-icons","aria-hidden":"true"},this.is_open?"keyboard_arrow_up":"keyboard_arrow_down")),this.is_open&&e("div",{key:"ffcefb669f4400f26ffff871092cf22ac977a2d4",class:"dda-input-dropdown-list dda-select-list"},this.parsedOptions.length>0?this.parsedOptions.map(((t,s)=>e("button",{name:`option${this.numberToWord(s+1)}`,type:"button",class:`dda-input-dropdown-item ${this.selectedId===t.id?"selected":""}`,role:"option","aria-selected":this.selectedId===t.id?"true":"false",onClick:()=>this.selectOption(t)},t.text))):e("div",{class:"dda-input-dropdown-item"},"No options available"))),this.validation_type==="error"&&this.error_message?e("span",{class:"dda-error-message",id:this.validation_id,role:"alert"},this.error_message):this.helper_text&&e("span",{class:"dda-helper-text",id:this.validation_id},this.helper_text)))}get el(){return a(this)}static get watchers(){return{selected:["watchSelected"]}}};export{h as dda_select};
-//# sourceMappingURL=p-24da4601.entry.js.map

package/dist/dda/p-24da4601.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Ddaselect","constructor","hostRef","this","disabled","validation_id","custom_class","placeholder","main_aria_label","input_name","is_open","handleClickOutside","event","el","contains","target","handleBlur","selectBlurred","emit","name","button_id","value","selectedText","onBlurred","selectedId","dispatchEvent","FocusEvent","bubbles","composed","parsedOptions","JSON","parse","options","_a","componentWillLoad","selectedOption","find","opt","id","toString","selected","text","watchSelected","toggleSelect","selectOption","option","selectChanged","onChanged","InputEvent","data","inputType","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","setSelected","undefined","setValue","getSelectedText","getValue","newVal","numberToWord","num","words","render","labelId","valueId","h","Host","key","class","component_mode","size","validation_type","label","toggle_button_name","type","onClick","onBlur","length","map","index","role","error_message","helper_text"],"sources":["src/components/dda-select/dda-select.tsx"],"sourcesContent":["import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-select',\r\n  // styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() options: string;\r\n  @Prop() selected: string; // can be id or text\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  @Prop() toggle_button_name: string;\r\n  @Prop() option_select_button_name: string;\r\n  @Prop() placeholder: string = '';\r\n  @Prop() main_aria_label: string = '';\r\n  @Prop() input_name: string = '';\r\n\r\n  @State() is_open: boolean = false;\r\n  @State() selectedId: number;\r\n  @State() selectedText: string;\r\n\r\n  @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n  @Event() onChanged: EventEmitter<any>;\r\n\r\n  @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n  @Event() onBlurred: EventEmitter<any>;\r\n\r\n  private get parsedOptions(): { id: number; text: string }[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    }\r\n    if (this.selected) {\r\n      this.watchSelected(this.selected);\r\n    }\r\n  }\r\n\r\n  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: { id: any; text: string }) {\r\n    if (!this.disabled) {\r\n      this.selectedId = option.id;\r\n      this.selectedText = option.text;\r\n      this.is_open = false;\r\n      this.selectChanged.emit(option);\r\n      this.onChanged.emit(option.id);\r\n\r\n      this.el.dispatchEvent(\r\n        new InputEvent('input', {\r\n          bubbles: true,\r\n          composed: true,\r\n          data: option.id,\r\n          inputType: 'select',\r\n        }),\r\n      );\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    if (this.is_open && !this.el.contains(event.target as Node)) {\r\n      this.is_open = false;\r\n    }\r\n  };\r\n\r\n  handleBlur = () => {\r\n    this.selectBlurred.emit({\r\n      name: this.input_name || this.button_id,\r\n      value: this.selectedText || '',\r\n    });\r\n    this.onBlurred.emit(this.selectedId);\r\n\r\n    this.el.dispatchEvent(\r\n      new FocusEvent('blur', {\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Method()\r\n  async setSelected(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  async setValue(value: string | number) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n      this.selected = selectedOption.id.toString();\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n      this.selected = '';\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async getSelectedText() {\r\n    return this.selectedText;\r\n  }\r\n\r\n  async getValue() {\r\n    return this.selectedText || '';\r\n  }\r\n\r\n  @Watch('selected')\r\n  watchSelected(newVal: string) {\r\n    const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n    if (selectedOption) {\r\n      this.selectedId = selectedOption.id;\r\n      this.selectedText = selectedOption.text;\r\n    } else {\r\n      this.selectedId = undefined;\r\n      this.selectedText = '';\r\n    }\r\n  }\r\n\r\n  private numberToWord(num: number): string {\r\n    const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n    return words[num - 1] || num.toString();\r\n  }\r\n\r\n  render() {\r\n    const labelId = `${this.button_id}-label`;\r\n    const valueId = `${this.button_id}-value`;\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={`\r\n            dda-input-container ${this.custom_class} \r\n            ${this.component_mode} \r\n            ${this.disabled ? 'dda-input-disabled' : ''} \r\n            dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n          `}\r\n        >\r\n          {this.label && (\r\n            <span id={labelId} class=\"dda-input-label\">\r\n              {this.label}\r\n            </span>\r\n          )}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button\r\n              name={this.toggle_button_name}\r\n              id={this.button_id}\r\n              type=\"button\"\r\n              class=\"dda-input-field dda-select-header\"\r\n              aria-labelledby={`${labelId} ${this.button_id}`}\r\n              disabled={this.disabled}\r\n              onClick={() => this.toggleSelect()}\r\n              onBlur={this.handleBlur}\r\n            >\r\n              <span id={valueId} class=\"dda-select-button-label\">\r\n                {this.selectedText || this.placeholder}\r\n              </span>\r\n              <i class=\"material-icons\" aria-hidden=\"true\">\r\n                {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n              </i>\r\n            </button>\r\n\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map((option, index) => (\r\n                    <button\r\n                      name={`option${this.numberToWord(index + 1)}`}\r\n                      type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n                      role=\"option\"\r\n                      aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n                      onClick={() => this.selectOption(option)}\r\n                    >\r\n                      {option.text}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}