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

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-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":[]}

package/dist/dda/p-2525597b.entry.js

@@ -1,2 +0,0 @@
-import{r,c as o,h as a,H as d}from"./p-1b339a0a.js";const n=".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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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}";const c=n;const e=class{constructor(a){r(this,a);this.buttonClick=o(this,"buttonClick",7);this.button_type="button";this.disabled=false;this.start_icon_family="";this.start_icon="";this.button_text="";this.aria_label="";this.button_color="primary";this.button_shape="";this.icon_button_shape="";this.custom_class="";this.button_name="";this.handleClick=r=>{if(this.disabled)return;this.buttonClick.emit({event:r,id:this.button_id,value:this.value,name:this.button_name})}}render(){const r=["dda-split-btn",`btn-color-${this.button_color}`,this.size?`btn-size-${this.size}`:"",this.button_shape?`split-btn-shape-${this.button_shape}`:"",this.icon_button_shape?`icon-btn-${this.icon_button_shape}`:"",this.gap?`dda-gap-${this.gap}`:"",this.custom_class,this.component_mode].filter(Boolean).join(" ");return a(d,{key:"4fa9e3147d92b59ff992c70abe60cc4e6cff2d8c"},a("div",{key:"d2151cf6cfbfa221e179f99fe1ab8cd3d7176388",class:"split-btn-container"},a("button",{key:"cfa584ca0cb7518a42b025b50c0966eb848922af",id:this.button_id,type:this.button_type,class:r,disabled:this.disabled,"aria-label":this.aria_label||this.button_text,name:this.button_name,value:this.value,onClick:this.handleClick},this.start_icon&&a("i",{key:"ce0e7e51be1d34a8beb6e0433591c4686302fa5b",class:"material-icons material-symbols-outlined","aria-hidden":"true"},this.start_icon),this.button_text),a("button",{key:"deffec49b0b519f81bab94322ae834849dbdc65e",class:"split-btn-arrow"})))}};e.style=c;export{e as dda_split_button};
-//# sourceMappingURL=p-2525597b.entry.js.map