npm - @dubai-design-system/components-js - Versions diffs - 3.12.10 → 3.12.12 - Mend

@dubai-design-system/components-js 3.12.10 → 3.12.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (926) hide show

package/readme.md CHANGED Viewed

@@ -1,260 +1,78 @@
-<p align="center">
-  <a href="#">
-    <img alt="dda-logo" src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg" width="60">
-  </a>
-</p>
-#### Change Log
-Version: (3.12.10)
-- The slider navigation is now hidden when there is only one slide. [(https://designsystem.dubai.ae/components/interactive-banner)].
-#### Change Log
-Version: (3.12.9)
-- Submenu inside the sidemenu re-positioned dynamically using its parent’s screen position. [(https://designsystem.dubai.ae/components/header)].
-- File name text overflow issue is fixed [(https://designsystem.dubai.ae/components/attach-file)].
-#### Change Log
-Version: (3.12.8)
-- Added a new target_blank props for the Government of Dubai logo in the header. [(https://designsystem.dubai.ae/components/header)].
-#### Change Log
-Version: (3.12.7)
-- Added an "active" class to the Home Banner Card button to highlight the selected item once it clicked [(https://designsystem.dubai.ae/components/home-carousel)].
-#### Change Log
-Version: (3.12.6)
-- Added new component split-button [(https://designsystem.dubai.ae/components/buttons/split-button)].
-- Added dropdown menu to the login button in Header [(https://designsystem.dubai.ae/components/header)].
-#### Change Log
-Version: (3.12.5)
-- Select Input Field error function updated [https://designsystem.dubai.ae/components/select-input-field].
-- Added onClick function to the delete button of Attach File [(https://designsystem.dubai.ae/components/attach-file)].
-- Added event property to the search in Header [(https://designsystem.dubai.ae/components/header)].
-#### Change Log
-Version: (3.12.4)
-- Introduced `active` prop support in Header Menu component for menu items. [https://designsystem.dubai.ae/components/header].
-- Supports initial active state via JSON configuration (`"active": "true"`).
-#### Change Log
-Version: (3.12.3)
-- Added Unified Methods and Events to Form Components (Refer to Documentation for guides on using them) [https://designsystem.dubai.ae/developers/input-interactions].
-#### Change Log
-Version: (alpha)
-#### This change is not meant to be adapted on production evironments
-- Added Unified Methods and Events to Form Components (Refer to Documentation for guides on using them)
-#### Change Log
-Version: (3.11.9)
-- Revert for Search Event on Change event
-#### Change Log
-Version: (3.11.8)
-- Added Set/Reset Methods to Form Inputs
-#### Change Log
-Version: (3.11.7)
-- Support for disabling and changing icons in Quicklinks Mega Menu
-- Added Horizontal Scroll for Header Quicklinks drop downs and Mega Menu
-#### Change Log
-Version: (3.11.6)
-Published on: 01-september-2025
-- Header (Added Dropdown support for login button)
-- Breadcrumbs (Added Router support)
-- Sticky Bar (Added behaviour for hide on scroll)
-#### Change Log
-Version: (3.11.5)
-Published on: 25-august-2025
-- Search Input events added
-#### Change Log
-Version: (3.11.4)
-Published on: 25-august-2025
-- Search & Toggle Input events added
-#### Change Log
-Version: (3.11.3)
-Published on: 22-august-2025
-- Accessibility Fixes
-#### Change Log - Breaking Change
-Version: (3.11.2)
-Published on: 20-august-2025
-- Fix for Default Font.
-- The default font in the library is now changed to system-ui, sans-serif instead of Dubai Font.
-- The users will now need to define their own font family even if they intend to use Dubai Font.
-#### Change Log - Breaking Change
-Version: (3.11.1)
-Published on: 18-august-2025
-- Added fix for performance issue, seperated CSS injections from components (Kindly refer to documentation on how to import the css)
-- Accessibility Fixes
-#### Change Log
-Version: (3.10.0)
-Published on: 13-august-2025
-Added Support for event Listeners as an alternative for href in Header and Cards for SPA router support
-Updated Components:
-- DDA Header - [https://designsystem.dubai.ae/components/header)
-- Cards - [https://designsystem.dubai.ae/components/cards]
-#### Change Log
-Version: (3.9.14)
-Published on: 28-july-2025
-Overall Accessibility Improvements:
-Updated Components:
-- Team Member Card - [https://designsystem.dubai.ae/components/cards/team-member-card](https://designsystem.dubai.ae/components/cards/team-member-card)
-#### Change Log
-Version: (3.9.7)
-Published on: 28-july-2025
-Updated Components:(Accessibility)
-- Attach File - [https://designsystem.dubai.ae/components/attach-file](https://designsystem.dubai.ae/components/attach-file)
-- Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input)
-- Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field)
-- Text Area Field – [https://designsystem.dubai.ae/components/text-area-field](https://designsystem.dubai.ae/components/text-area-field)
-- Pagination – [https://designsystem.dubai.ae/components/pagination](https://designsystem.dubai.ae/components/pagination)
-- Phone Number Field – [https://designsystem.dubai.ae/components/phone-number-field](https://designsystem.dubai.ae/components/phone-number-field)
-- video-card – [https://designsystem.dubai.ae/components/cards/video-card](https://designsystem.dubai.ae/components/cards/video-card)
-- Button – [https://designsystem.dubai.ae/components/buttons/button](https://designsystem.dubai.ae/components/buttons/button)
-- Phone Number Field – [https://designsystem.dubai.ae/components/phone-number-field](https://designsystem.dubai.ae/components/phone-number-field)
-- Select Input Field – [https://designsystem.dubai.ae/components/select-input-field](https://designsystem.dubai.ae/components/select-input-field)
-- Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs)
-- New Component:
-- Custom Card – [https://designsystem.dubai.ae/components/cards/custom-cards](https://designsystem.dubai.ae/components/cards/custom-cards)
-#### Change Log
-Version: (3.9.6)
-Published on: 11-july-2025
-Updated Components:(Accessibility)
-- Button - [https://designsystem.dubai.ae/components/buttons/button](https://designsystem.dubai.ae/components/buttons/button)
-- Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input)
-- Header – [https://designsystem.dubai.ae/components/header](https://designsystem.dubai.ae/components/header)
-- Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field)
-- Home Carousel – [https://designsystem.dubai.ae/components/home-carousel](https://designsystem.dubai.ae/components/home-carousel)
-- Search Input Field – [https://designsystem.dubai.ae/components/search-input-field](https://designsystem.dubai.ae/components/search-input-field)
-- Sticky Bar – [https://designsystem.dubai.ae/components/sticky-bar](https://designsystem.dubai.ae/components/sticky-bar)
-- Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs)
-#### Change Log
-Version: (3.9.5)
-Published on: 9-july-2025
-Accessibility Updated
-#### Change Log
-Version: (3.9.4)
-Published on: 8-july-2025
-Updated Components:
-- Alert - [https://designsystem.dubai.ae/components/alert](https://designsystem.dubai.ae/components/alert)
-- Avatar - [https://designsystem.dubai.ae/components/avatar](https://designsystem.dubai.ae/components/avatar)
-- Banner Card – [https://designsystem.dubai.ae/components/cards/banner-cards](https://designsystem.dubai.ae/components/cards/banner-cards)
-- Checkbox – [https://designsystem.dubai.ae/components/checkbox/checkbox-input](https://designsystem.dubai.ae/components/checkbox/checkbox-input)
-- Header – [https://designsystem.dubai.ae/components/header](https://designsystem.dubai.ae/components/header)
-- Interactive Banner – [https://designsystem.dubai.ae/components/interactive-banner](https://designsystem.dubai.ae/components/interactive-banner)
-- Home Carousel – [https://designsystem.dubai.ae/components/home-carousel](https://designsystem.dubai.ae/components/home-carousel)
-- Event Card – [https://designsystem.dubai.ae/components/cards/image-cards/event-card](https://designsystem.dubai.ae/components/cards/image-cards/event-card)
-- Pricing Card – [https://designsystem.dubai.ae/components/cards/image-cards/pricing-card](https://designsystem.dubai.ae/components/cards/image-cards/pricing-card)
-- Text Field – [https://designsystem.dubai.ae/components/text-field](https://designsystem.dubai.ae/components/text-field)
-- Sticky Bar – [https://designsystem.dubai.ae/components/sticky-bar](https://designsystem.dubai.ae/components/sticky-bar)
-- Tabs – [https://designsystem.dubai.ae/components/tabs](https://designsystem.dubai.ae/components/tabs)
-- Team Section Card – [https://designsystem.dubai.ae/components/cards/team-section-cards/team-section-card](https://designsystem.dubai.ae/components/cards/team-section-cards/team-section-card)
-#### Key Features
-Lightweight & Fast: Uses native Web Components for optimal performance.
-Customizable: Designed to align with Dubai Design System branding.
-Framework-Agnostic: Works with any HTML, JavaScript, or TypeScript-based project.
-Accessible & Scalable: Follows best practices for accessibility and responsive design.
-#### Usage
-1. Include the Web Components Library
-Next, add the material-icons package which is the icon package used by DDA:
-Start by adding the material-icons package inside the `<head>` tag
-```jsx
-<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-Add the following script to your HTML to load the library:
-<script type="module">
- import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js/loader/index.es2017.js";
- defineCustomElements();
-</script>
-```
-#### Add DDA Components in Your HTML
-Now you can use DDA components directly in your HTML files:
-```jsx
-<dda-button
-        button_color="default-primary"
-        start_icon="sentiment_satisfied"
-        end_icon="arrow_forward"
-        custom_class=""
-        component_mode=""
-        button_id="button"
-        aria_label="button"
-        onclick="console.log('clicked')"
->Button</dda-button>
-```
-#### Available Components
-<dda-button> - Customizable button component
-<dda-dropdown> - Dropdown component with various options
-<dda-modal> - Accessible modal dialog
-<dda-card> - Card layout with structured content
-And more...
-#### Contributing
-This project is built with a focus on Dubai’s digital transformation and welcomes contributions from the community. Feel free to submit issues, feedback, or feature requests.
-#### License
-This package is licensed under the Dubai Digital Authority regulations. For more details, refer to the official documentation.
+<p align="center">
+  <a href="#">
+    <img alt="dda-logo" src="https://www.digitaldubai.ae/ResourcePackages/Theme/assets/dist/images/logo.svg" width="60">
+  </a>
+</p>
+This package provides web components built using StencilJS as part of the Dubai Design System (DDA), ensuring consistency, reusability, and performance across modern web applications. These components are framework-agnostic and can be used in custom websites without dependency on React, Angular, or Vue.
+#### Key Features
+Lightweight & Fast: Uses native Web Components for optimal performance.
+Customizable: Designed to align with Dubai Design System branding.
+Framework-Agnostic: Works with any HTML, JavaScript, or TypeScript-based project.
+Accessible & Scalable: Follows best practices for accessibility and responsive design.
+#### Usage
+1. Include the Web Components Library
+Next, add the material-icons package which is the icon package used by DDA:
+Start by adding the material-icons package inside the `<head>` tag
+```jsx
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+Add the following script to your HTML to load the library:
+<script type="module">
+ import { defineCustomElements } from "https://cdn.jsdelivr.net/npm/@dubai-design-system/components-js/loader/index.es2017.js";
+ defineCustomElements();
+</script>
+```
+#### Add DDA Components in Your HTML
+Now you can use DDA components directly in your HTML files:
+```jsx
+<dda-button
+        button_color="default-primary"
+        start_icon="sentiment_satisfied"
+        end_icon="arrow_forward"
+        custom_class=""
+        component_mode=""
+        button_id="button"
+        aria_label="button"
+        onclick="console.log('clicked')"
+>Button</dda-button>
+```
+#### Available Components
+<dda-button> - Customizable button component
+<dda-dropdown> - Dropdown component with various options
+<dda-modal> - Accessible modal dialog
+<dda-card> - Card layout with structured content
+And more...
+#### Contributing
+This project is built with a focus on Dubai’s digital transformation and welcomes contributions from the community. Feel free to submit issues, feedback, or feature requests.
+#### License
+This package is licensed under the Dubai Digital Authority regulations. For more details, refer to the official documentation.

package/dist/cjs/app-globals-3a1e7e63.js.map DELETED Viewed

	@@ -1 +0,0 @@
1	- {"file":"app-globals-3a1e7e63.js","mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;","names":[],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\n"],"version":3}

package/dist/cjs/dda-accordion.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-accordion.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dda-accordion/dda-accordion.css?tag=dda-accordion","src/components/dda-accordion/dda-accordion.tsx"],"sourcesContent":[".accordion-container{\r\n display: grid;\r\n gap: 20px;\r\n}\r\n.accordion-container.bg-border {\r\n background-color: var(--dda-surface-100);\r\n border: 1px solid var(--dda-surface-90);\r\n border-radius: 5px;\r\n padding: 16px 20px;\r\n}\r\n.light-mode.accordion-container.bg-border{\r\n background-color: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n}\r\n.accordion-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n.accordion-header .header-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.header-content i,\r\n.header-content svg{\r\n font-size: 25px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .header-content i,\r\n.light-mode .header-content svg{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.header-content svg path{\r\n fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .header-content svg path{\r\n fill: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-header .header-text {\r\n font-size: var(--font-h6);\r\n color: var(--dda-on-surface-0);\r\n font-weight: var(--font-weight-regular);\r\n display: flex;\r\n align-items: center;\r\n gap: 5px\r\n}\r\n.light-mode .accordion-header .header-text{\r\n color: var(--dda-neutral-0);\r\n}\r\n\r\n.accordion-header .arrow-icon {\r\n font-size: 25px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n .accordion-header .arrow-icon {\r\n transition: transform 0.2s ease-in-out;\r\n }\r\n}\r\n\r\n\r\n.light-mode .accordion-header .arrow-icon{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-header.active .arrow-icon{\r\n transform: rotate(180deg);\r\n}\r\n.accordion-body {\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .accordion-body{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.accordion-body .subtitle{\r\n font: var(--font-body);\r\n font-weight: var(--font-weight-regular);\r\n color: var(--dda-on-surface-0);\r\n}\r\n.accordion-body .body-description {\r\n margin: 0;\r\n font: var(--font-body);\r\n font-weight: var(--font-weight-regular);\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.accordion-container.no-border {\r\n border: 1px solid transparent;\r\n gap: 12px\r\n}\r\n","import { Component, Prop, State, h, Host, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-accordion',\r\n styleUrls: ['dda-accordion.css'],\r\n shadow: false,\r\n})\r\nexport class DdaAccordion {\r\n @Prop() design: 'bg-border' | 'no-border' = 'bg-border';\r\n @Prop() header_text: string = 'Accordion Header';\r\n @Prop() sub_title: string = '';\r\n @Prop() body_description: string = '';\r\n @Prop() custom_class?: string = '';\r\n @Prop() link_button_text?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() accordion_icon_class?: string = '';\r\n @Prop() accordion_icon_text: string = '';\r\n @Prop() accordion_header_end_icon: string = '';\r\n @Prop() accordion_id: string = '';\r\n\r\n @Prop() default_open: boolean = false;\r\n\r\n @State() isOpen: boolean;\r\n\r\n componentWillLoad() {\r\n this.isOpen = this.default_open;\r\n }\r\n\r\n toggleAccordion() {\r\n this.isOpen = !this.isOpen;\r\n }\r\n\r\n @Method() async openAccordion() {\r\n this.isOpen = true;\r\n }\r\n\r\n @Method() async closeAccordion() {\r\n this.isOpen = false;\r\n }\r\n\r\n @Method() async getIsOpen() {\r\n return this.isOpen;\r\n }\r\n\r\n onHeaderEndIconClick(event: Event) {\r\n event.stopPropagation();\r\n console.log('Header end icon clicked');\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`accordion-container ${this.design} ${this.custom_class} ${this.component_mode}`}>\r\n <div class=\"accordion-header\" id={this.accordion_id} onClick={() => this.toggleAccordion()}>\r\n <div class=\"header-content\">\r\n {this.accordion_icon_text ? <i class={this.accordion_icon_class}>{this.accordion_icon_text}</i> : null}\r\n {this.header_text ? \r\n <span class=\"header-text\">{this.header_text} \r\n <i \r\n class={`body material-flat-icon ${this.accordion_icon_class}`}\r\n onClick={(event) => this.onHeaderEndIconClick(event)}\r\n >\r\n {this.accordion_header_end_icon}\r\n </i>\r\n </span> \r\n : null}\r\n </div>\r\n <i class={`material-icons arrow-icon`} aria-hidden=\"true\" >{this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n </div>\r\n <div class={this.isOpen ? 'accordion-body' : 'dda-d-none'}>\r\n <div class=\"dda-d-flex dda-flex-column dda-gap-lg\">\r\n <div class=\"dda-d-flex dda-flex-column dda-gap-xs\">\r\n {this.sub_title ? <p class=\"subtitle\">{this.sub_title}</p> : null}\r\n {this.body_description ? <p class=\"body-description\">{this.body_description}</p> : null}\r\n </div>\r\n {this.link_button_text ? (\r\n <dda-link-button\r\n button_color=\"default-link\"\r\n end_icon=\"arrow_forward\"\r\n custom_class=\"\"\r\n link_button_text={this.link_button_text}\r\n href=\"\"\r\n component_mode=\"\"\r\n button_id=\"link-button\"\r\n aria_label=\"link-Button\"\r\n ></dda-link-button>\r\n ) : null}\r\n <slot></slot>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-alert.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-alert.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,krFAAkrF,CAAC;AACvsF,uBAAe,WAAW;;MCMb,QAAQ;IALrB;;;;;QAMU,SAAI,GAA4B,SAAS,CAAC;QAC1C,cAAS,GAA6C,MAAM,CAAC;QAC7D,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,gBAAW,GAAW,EAAE,CAAC;QACzB,iBAAY,GAAY,EAAE,CAAC;QAc3B,iBAAY,GAAG;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;QAGO,sBAAiB,GAAG;YAC3B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;SACxB,CAAC;QAGM,uBAAkB,GAAG;YAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;SACzB,CAAC;KAyBH;IAvBC,MAAM;QACJ,QACEA,kEAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IACpHA,kEAAK,KAAK,EAAC,iBAAiB,IAC1BA,kEAAK,KAAK,EAAC,qBAAqB,IAC9BA,gEAAG,KAAK,EAAC,oDAAoD,iBAAa,MAAM,WAAS,CACrF,EACNA,kEAAK,KAAK,EAAC,eAAe,IACxBA,iEAAI,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,UAAU,CAAM,EAC9CA,gEAAG,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,WAAW,CAAK,EACnDA,kEAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,gBAAgB,GAAGA,wBAAY,YAAY,EAAC,kBAAkB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAE,YAAY,EAAC,wBAAwB,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,GAAe,GAAG,IAAI,EACnS,IAAI,CAAC,cAAc,GAAGA,wBAAY,YAAY,EAAC,iBAAiB,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE,EAAE,YAAY,EAAE,iBAAiB,IAAI,CAAC,SAAS,EAAE,EAAG,cAAc,EAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,cAAc,GAAe,GAAG,IAAI,CACxS,CACF,CACF,EAENA,qEAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACpGA,gEAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,YAAU,CACzE,CACL,EACN;KACH;;;;;;","names":["h"],"sources":["src/components/dda-alert/dda-alert.css?tag=dda-alert","src/components/dda-alert/dda-alert.tsx"],"sourcesContent":[".dda-alert{\r\n padding: 24px;\r\n border-radius: 10px; \r\n position: relative;\r\n}\r\n.dda-alert-inner{\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 16px;\r\n}\r\n.dda-alert-icon-wrap{\r\n padding-top: 2px; \r\n}\r\n.dda-alert .alert-content{\r\n width: 100%;\r\n display: grid;\r\n row-gap: 16px;\r\n}\r\n.dda-alert .alert-title{\r\n margin: 0; \r\n font-size: var(--font-h6);\r\n font-weight: var(--font-weight-regular);\r\n line-height: 24px;\r\n}\r\n.dda-alert .alert-description{\r\n margin: 0;\r\n}\r\n.alert-btn-wrap{\r\n display: flex;\r\n align-items: center;\r\n justify-content: end;\r\n gap: 15px;\r\n}\r\n.dda-alert-close{\r\n position: absolute;\r\n inset-inline-end: 24px;\r\n inset-block-start: 24px;\r\n width: 20px;\r\n height: 2px;\r\n background: transparent;\r\n border: transparent;\r\n font-size: 18px;\r\n}\r\n\r\n\r\n/**/\r\n.dda-alert-info{\r\n background: var(--dda-primary-variant-95);\r\n border: solid 1px var(--dda-color-primary-30);\r\n}\r\n.dda-alert-secondary.dda-alert-info .material-icons,\r\n.dda-alert-secondary.dda-alert-info .alert-title{\r\n color: var(--dda-primary-40);\r\n}\r\n.light-mode.dda-alert-info{\r\n background: var(--dda-info-95);\r\n border: solid 1px var(--dda-info-40);\r\n color: var(--dda-info-40);\r\n}\r\n\r\n/**/\r\n.dda-alert-warning{\r\n background: var(--dda-warning-variant-95);\r\n border: solid 1px var(--dda-color-warning-30);\r\n}\r\n.dda-alert-secondary.dda-alert-warning .material-icons,\r\n.dda-alert-secondary.dda-alert-warning .alert-title{\r\n color: var(--dda-warning-40);\r\n}\r\n.light-mode.dda-alert-warning{\r\n background: var(--dda-warning-95);\r\n border: solid 1px var(--dda-warning-40);\r\n color: var(--dda-warning-40);\r\n}\r\n.dda-alert-warning .alert-primary-warning{\r\n background-color: var(--dda-warning-40);\r\n border: solid 1px var(--dda-warning-40);\r\n}\r\n\r\n/**/\r\n.dda-alert-error{\r\n background: var(--dda-error-variant-95);\r\n border: solid 1px var(--dda-color-error-30);\r\n}\r\n.dda-alert-secondary.dda-alert-error .material-icons,\r\n.dda-alert-secondary.dda-alert-error .alert-title{\r\n color: var(--dda-error-40);\r\n}\r\n.light-mode.dda-alert-error{\r\n background: var(--dda-error-95);\r\n border: solid 1px var(--dda-error-40);\r\n color: var(--dda-error-40);\r\n}\r\n.dda-alert-error .alert-primary-error{\r\n background-color: var(--dda-error-40);\r\n border: solid 1px var(--dda-error-40);\r\n}\r\n\r\n/**/\r\n.dda-alert-success{\r\n background: var(--dda-success-variant-95);\r\n border: solid 1px var(--dda-color-success-30);\r\n}\r\n.dda-alert-secondary.dda-alert-success .material-icons,\r\n.dda-alert-secondary.dda-alert-success .alert-title{\r\n color: var(--dda-success-40);\r\n}\r\n.light-mode.dda-alert-success{\r\n background: var(--dda-success-95);\r\n border: solid 1px var(--dda-success-40);\r\n color: var(--dda-success-40);\r\n}\r\n.dda-alert-success .alert-primary-success{\r\n background-color: var(--dda-success-40);\r\n border: solid 1px var(--dda-success-40);\r\n}\r\n\r\n/**/\r\n\r\n\r\n.dda-alert-secondary{\r\n background-color: var(--dda-surface-100);\r\n border: solid 1px var(--dda-surface-90);\r\n color: var(--dda-on-surface-0);\r\n box-shadow: 0px 1px 2px 0px #1018280A;\r\n}\r\n.dda-alert .alert-secondary-button{\r\n border: solid 1px var(--dda-surface-100);\r\n}\r\n.dda-alert-secondary .alert-secondary-button{\r\n border: solid 1px var(--dda-surface-90);\r\n}\r\n/**/\r\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-alert',\r\n styleUrls: ['dda-alert.css'],\r\n shadow: false,\r\n})\r\nexport class DdaAlert {\r\n @Prop() type: 'primary' | 'secondary' = 'primary';\r\n @Prop() variation: 'info' | 'warning' | 'error' | 'success' = 'info';\r\n @Prop() title_text: string = '';\r\n @Prop() description: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() component_id?: string;\r\n\r\n @Prop() secondary_button?: string;\r\n @Prop() secondary_button_link?: string;\r\n\r\n @Prop() primary_button?: string;\r\n @Prop() primary_button_link?: string;\r\n\r\n \r\n @Prop() close_button_name?: string;\r\n\r\n @Event() closeClick: EventEmitter<void>;\r\n private onCloseClick = () => {\r\n this.closeClick.emit();\r\n };\r\n\r\n @Event() firstClick?: EventEmitter<void>;\r\n private firstClickHandler = () => {\r\n this.firstClick.emit();\r\n };\r\n\r\n @Event() secondClick?: EventEmitter<void>;\r\n private secondClickHandler = () => {\r\n this.secondClick.emit();\r\n };\r\n\r\n render() {\r\n return (\r\n <div class={`dda-alert dda-alert-${this.type} dda-alert-${this.variation} ${this.custom_class} ${this.component_mode}`}>\r\n <div class=\"dda-alert-inner\">\r\n <div class=\"dda-alert-icon-wrap\">\r\n <i class=\"info-icon material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n </div>\r\n <div class=\"alert-content\">\r\n <h4 class=\"alert-title\">{this.title_text}</h4>\r\n <p class=\"alert-description\">{this.description}</p>\r\n <div class=\"alert-btn-wrap\">\r\n {this.secondary_button ? <dda-button button_color=\"default-tertiary\" onClick={() => this.firstClickHandler()} custom_class=\"alert-secondary-button\" component_mode=\"\" size=\"sm\" button_id=\"button\" aria_label=\"button\" button_name=\"button\" button_text={this.secondary_button}></dda-button> : null}\r\n {this.primary_button ? <dda-button button_color=\"default-primary\" onClick={() => this.secondClickHandler()} custom_class={`alert-primary-${this.variation}`} component_mode=\"\" size=\"sm\" button_id=\"button\" aria_label=\"button\" button_name=\"button\" button_text={this.primary_button}></dda-button> : null}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button type='button' name={this.close_button_name} class=\"dda-alert-close\" onClick={this.onCloseClick}>\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">close</i>\r\n </button>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-attach-file.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-attach-file.entry.cjs.js","mappings":"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","names":["pdfIcon","pptIcon","wordIcon","excelIcon","imageIcon","videoIcon","onenoteIcon","defaultIcon","h","Host"],"sources":["src/assets/img/icn/file_icons/icn-PDF.svg","src/assets/img/icn/file_icons/icn-PowerPoint.svg","src/assets/img/icn/file_icons/icn-Word.svg","src/assets/img/icn/file_icons/icn-Excel.svg","src/assets/img/icn/file_icons/icn-Image.svg","src/assets/img/icn/file_icons/icn-Video.svg","src/assets/img/icn/file_icons/icn-OneNote.svg","src/assets/img/icn/file_icons/icn-default.svg","src/global/input.css?tag=dda-attach-file","src/components/dda-attach-file/dda-attach-file.tsx"],"sourcesContent":["<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M16 7.44336H13.5C12.673 7.44336 12 6.77036 12 5.94336V2.44336H4V18.4434H16V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M16 6.44336V6.15036L13 3.15036V5.94336C13 6.21836 13.225 6.44336 13.5 6.44336H16Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.707 5.44336L13 1.73636C12.8125 1.54881 12.5582 1.44342 12.293 1.44336H4C3.44772 1.44336 3 1.89107 3 2.44336V18.4434C3 18.9956 3.44772 19.4434 4 19.4434H16C16.5523 19.4434 17 18.9956 17 18.4434V6.15036C16.9999 5.88516 16.8945 5.63085 16.707 5.44336ZM16 6.15036V6.44336H13.5C13.2241 6.44281 13.0006 6.21927 13 5.94336V3.15036L16 6.15036ZM4 2.64336V18.2434C4 18.3538 4.08954 18.4434 4.2 18.4434H15.8C15.9105 18.4434 16 18.3538 16 18.2434V7.44336H13.5C12.6716 7.44336 12 6.77179 12 5.94336V2.44336H4.2C4.09 2.44336 4 2.53336 4 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M14.5 10.4434H5.5C5.22386 10.4434 5 10.2195 5 9.94336C5 9.66722 5.22386 9.44336 5.5 9.44336H14.5C14.7761 9.44336 15 9.66722 15 9.94336C15 10.2195 14.7761 10.4434 14.5 10.4434Z\" fill=\"#E0E3E2\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6 16.4434V12.4434C6 11.8911 6.44772 11.4434 7 11.4434H13C13.5523 11.4434 14 11.8911 14 12.4434V16.4434C14 16.9956 13.5523 17.4434 13 17.4434H7C6.44772 17.4434 6 16.9956 6 16.4434ZM7.2 16.4434H12.794C12.8468 16.445 12.898 16.425 12.9358 16.388C12.9735 16.351 12.9946 16.3002 12.994 16.2474C12.988 15.5694 12.996 13.3154 13 12.6374C13 12.5274 12.91 12.4434 12.8 12.4434H7.2C7.09 12.4434 7 12.5334 7 12.6434V16.2434C7 16.3538 7.08954 16.4434 7.2 16.4434ZM4.75 16.4434H3C2.44772 16.4434 2 15.9956 2 15.4434V13.4434C2 12.8911 2.44772 12.4434 3 12.4434H4.75C4.88807 12.4434 5 12.5553 5 12.6934V16.1934C5 16.3314 4.88807 16.4434 4.75 16.4434ZM15.25 16.4434H17C17.5523 16.4434 18 15.9956 18 15.4434V13.4434C18 12.8911 17.5523 12.4434 17 12.4434H15.25C15.1119 12.4434 15 12.5553 15 12.6934V16.1934C15 16.3314 15.1119 16.4434 15.25 16.4434Z\" fill=\"#DD6B51\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M15.95 11.4434H14L13 10.4434L12 11.4434V13.9324C12.419 14.2484 12.935 14.4434 13.5 14.4434C14.2508 14.4435 14.9619 14.1062 15.4368 13.5247C15.9118 12.9432 16.1002 12.179 15.95 11.4434Z\" fill=\"#DD6B51\"/>\r\n<path d=\"M13.5 9.44336C12.9578 9.44449 12.4309 9.62328 12 9.95236V11.4434H14V9.49336C13.8354 9.46001 13.6679 9.44326 13.5 9.44336V9.44336Z\" fill=\"#FFEBE6\"/>\r\n<path d=\"M15 10.4434H17C16.7939 9.43641 16.0069 8.6495 15 8.44336V10.4434H15Z\" fill=\"#FFEBE6\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#DD6B51\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.50496 8.92436C7.17596 8.60336 6.69996 8.44336 6.07996 8.44336H4.01196V14.4434H4.99996V12.3224H6.01496C6.37901 12.33 6.73878 12.2428 7.05896 12.0694C7.35996 11.9004 7.59096 11.6644 7.75496 11.3594C7.91896 11.0554 7.99996 10.7074 7.99996 10.3174C7.99996 9.71036 7.83496 9.24536 7.50496 8.92436ZM5.89896 11.4434H4.99996V9.43136H5.93096C6.35896 9.43136 6.99996 9.43536 6.99996 10.4434C6.99996 11.3414 6.40596 11.4434 5.89896 11.4434Z\" fill=\"#E0E3E2\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M16.5 12.4434H12V13.4434H16.5C16.7761 13.4434 17 13.2195 17 12.9434C17 12.6672 16.7761 12.4434 16.5 12.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M16.5 10.4434H12V11.4434H16.5C16.7761 11.4434 17 11.2195 17 10.9434C17 10.6672 16.7761 10.4434 16.5 10.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M16.5 8.44336H12V9.44336H16.5C16.7761 9.44336 17 9.2195 17 8.94336C17 8.66722 16.7761 8.44336 16.5 8.44336Z\" fill=\"#006687\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#006A67\"/>\r\n<path d=\"M7.21 14.3794L6 9.93935L4.794 14.3794H3.918L2.755 8.53735H3.641L4.449 12.3634L5.523 8.53735H6.389L7.54201 12.4534L8.34401 8.53735H9.229L8.085 14.3794H7.21Z\" fill=\"white\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M18 7.44336H15.5C14.673 7.44336 14 6.77036 14 5.94336V2.44336H6V18.4434H18V7.44336Z\" fill=\"white\"/>\r\n<path d=\"M18 6.44336V6.15036L15 3.15036V5.94336C15 6.21836 15.225 6.44336 15.5 6.44336H18Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.707 5.44336L15 1.73636C14.8125 1.54881 14.5582 1.44342 14.293 1.44336H6C5.44772 1.44336 5 1.89107 5 2.44336V18.4434C5 18.9956 5.44772 19.4434 6 19.4434H18C18.5523 19.4434 19 18.9956 19 18.4434V6.15036C18.9999 5.88516 18.8945 5.63085 18.707 5.44336ZM18 6.15036V6.44336H15.5C15.2241 6.44281 15.0006 6.21927 15 5.94336V3.15036L18 6.15036ZM6 2.64336V18.2434C6 18.3538 6.08954 18.4434 6.2 18.4434H17.8C17.9105 18.4434 18 18.3538 18 18.2434V7.44336H15.5C14.6716 7.44336 14 6.77179 14 5.94336V2.44336H6.2C6.09 2.44336 6 2.53336 6 2.64336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#0D6D2D\"/>\r\n<path d=\"M4.60602 14.4434L8.31302 8.44336H7.15002L3.39502 14.4434H4.60602Z\" fill=\"white\"/>\r\n<path d=\"M7.37299 14.4434L3.66699 8.44336H4.82899L8.58299 14.4434H7.37299Z\" fill=\"white\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.084 14.3254H17V10.5834C17 9.15636 16.327 8.44336 14.982 8.44336C14.6146 8.45162 14.2501 8.51085 13.899 8.61936C13.493 8.73636 13.206 8.85836 13.039 8.98536V9.92336C13.594 9.45836 14.216 9.22536 14.904 9.22536C15.691 9.22536 16.084 9.70936 16.084 10.6784L14.369 10.9184C13.109 11.0974 12.479 11.7184 12.479 12.7834C12.479 13.2914 12.646 13.6934 12.977 13.9934C13.308 14.2934 13.751 14.4434 14.301 14.4434C15.075 14.4434 15.663 14.0994 16.061 13.4104H16.084V14.3254ZM14.698 11.6054L16.084 11.4104V11.9794C16.084 12.4604 15.935 12.8614 15.639 13.1814C15.344 13.5014 14.968 13.6614 14.514 13.6614C14.193 13.6614 13.93 13.5754 13.725 13.4024C13.52 13.2284 13.418 12.9984 13.418 12.7124C13.418 12.3574 13.513 12.1024 13.703 11.9434C13.893 11.7854 14.225 11.6724 14.698 11.6054Z\" fill=\"#0D6D2D\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M3.5 17.4434H16.5C16.775 17.4434 17 17.2184 17 16.9434V3.94336C17 3.66836 16.775 3.44336 16.5 3.44336H3.5C3.225 3.44336 3 3.66836 3 3.94336V16.9434C3 17.2184 3.225 17.4434 3.5 17.4434Z\" fill=\"white\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.691 11.1004L10.813 12.3864L9.12599 10.0604C8.93788 9.80101 8.63689 9.64749 8.31649 9.64749C7.9961 9.64749 7.6951 9.80101 7.50699 10.0604L5.11699 13.3564C4.89632 13.6607 4.86498 14.0631 5.03589 14.398C5.20679 14.7328 5.55105 14.9435 5.92699 14.9434H14.073C14.4438 14.9435 14.7843 14.7383 14.9575 14.4104C15.1307 14.0825 15.1082 13.6856 14.899 13.3794L13.343 11.0994C13.1567 10.8264 12.8475 10.663 12.517 10.663C12.1865 10.663 11.8773 10.8264 11.691 11.0994V11.1004Z\" stroke=\"#E0E3E2\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5 7.94336C14.0523 7.94336 14.5 7.49564 14.5 6.94336C14.5 6.39107 14.0523 5.94336 13.5 5.94336C12.9477 5.94336 12.5 6.39107 12.5 6.94336C12.5 7.49564 12.9477 7.94336 13.5 7.94336Z\" stroke=\"#835400\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 18.4434H16.5C17.327 18.4434 18 17.7704 18 16.9434V3.94336C18 3.11636 17.327 2.44336 16.5 2.44336H3.5C2.673 2.44336 2 3.11636 2 3.94336V16.9434C2 17.7704 2.673 18.4434 3.5 18.4434ZM3 3.94336C3 3.66722 3.22386 3.44336 3.5 3.44336H16.5C16.7761 3.44336 17 3.66722 17 3.94336V16.9434C17 17.2195 16.7761 17.4434 16.5 17.4434H3.5C3.22386 17.4434 3 17.2195 3 16.9434V3.94336Z\" fill=\"#3F4948\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path d=\"M3.5 17.4434H16.5C16.775 17.4434 17 17.2184 17 16.9434V3.94336C17 3.66836 16.775 3.44336 16.5 3.44336H3.5C3.225 3.44336 3 3.66836 3 3.94336V16.9434C3 17.2184 3.225 17.4434 3.5 17.4434Z\" fill=\"white\"/>\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.5 18.4434H16.5C17.327 18.4434 18 17.7704 18 16.9434V3.94336C18 3.11636 17.327 2.44336 16.5 2.44336H3.5C2.673 2.44336 2 3.11636 2 3.94336V16.9434C2 17.7704 2.673 18.4434 3.5 18.4434ZM3 3.94336C3 3.66722 3.22386 3.44336 3.5 3.44336H16.5C16.7761 3.44336 17 3.66722 17 3.94336V16.9434C17 17.2195 16.7761 17.4434 16.5 17.4434H3.5C3.22386 17.4434 3 17.2195 3 16.9434V3.94336Z\" fill=\"#3F4948\"/>\r\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.5 10.4434L8.5 7.94336V12.9434L12.5 10.4434Z\" stroke=\"#006687\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n</svg>\r\n","<svg width=\"20\" height=\"21\" viewBox=\"0 0 20 21\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<path opacity=\"0.64\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M6.5 19.4434H16.5C17.327 19.4434 18 18.7704 18 17.9434V7.44336C18.5523 7.44336 19 6.99564 19 6.44336V3.44336C19 2.89107 18.5523 2.44336 18 2.44336H17.914C17.708 1.86136 17.152 1.44336 16.5 1.44336H6.5C5.673 1.44336 5 2.11636 5 2.94336V17.9434C5 18.7704 5.673 19.4434 6.5 19.4434ZM6 2.94336C6 2.66722 6.22386 2.44336 6.5 2.44336H16.5C16.7761 2.44336 17 2.66722 17 2.94336V3.44336H18V6.44336H17V17.9434C17 18.2195 16.7761 18.4434 16.5 18.4434H6.5C6.22386 18.4434 6 18.2195 6 17.9434V2.94336Z\" fill=\"#3F4948\"/>\r\n<path d=\"M18 3.44336H17V2.94336C17 2.66722 16.7761 2.44336 16.5 2.44336H6.5C6.22386 2.44336 6 2.66722 6 2.94336V17.9434C6 18.2195 6.22386 18.4434 6.5 18.4434H16.5C16.7761 18.4434 17 18.2195 17 17.9434V6.44336H18V3.44336Z\" fill=\"white\"/>\r\n<path d=\"M2 16.4434H10C10.5523 16.4434 11 15.9956 11 15.4434V7.44336C11 6.89107 10.5523 6.44336 10 6.44336H2C1.44772 6.44336 1 6.89107 1 7.44336V15.4434C1 15.9956 1.44772 16.4434 2 16.4434Z\" fill=\"#904EDB\"/>\r\n<path d=\"M9 14.4434H7.604C7.604 14.4434 3.995 9.76036 4 9.75536V14.4434H3V8.44336H4.27C4.27 8.44336 7.898 13.1054 8 13.2714V8.44336H9V14.4434Z\" fill=\"white\"/>\r\n</svg>\r\n","<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\" fill=\"#3F4948\" viewBox=\"0 0 256 256\"><path d=\"M210.83,85.17l-56-56A4,4,0,0,0,152,28H56A12,12,0,0,0,44,40V216a12,12,0,0,0,12,12H200a12,12,0,0,0,12-12V88A4,4,0,0,0,210.83,85.17ZM156,41.65,198.34,84H156ZM200,220H56a4,4,0,0,1-4-4V40a4,4,0,0,1,4-4h92V88a4,4,0,0,0,4,4h52V216A4,4,0,0,1,200,220Z\"></path></svg>",".dda-input-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n position: relative;\r\n}\r\n\r\n.dda-input-label {\r\n font-size: var(--font-body);\r\n color: var(--dda-on-surface-0);\r\n line-height: 24px;\r\n font-weight: var(--font-weight-regular);\r\n}\r\n.light-mode .dda-input-label {\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field-wrapper {\r\n position: relative;\r\n}\r\n\r\n.dda-field-group-input {\r\n height: 32px;\r\n background-color: transparent;\r\n flex: 1;\r\n font-size: var(--font-caption);\r\n font-weight: var(--dda-fw-400);\r\n padding: 0px;\r\n color: var(--dda-on-surface-0);\r\n border: none;\r\n outline: none;\r\n}\r\n.light-mode .dda-field-group-input{\r\n color: var(--dda-neutral-0);\r\n} \r\n.dda-input-field-group {\r\n width: 100%;\r\n height: 55px;\r\n padding: 8px 16px;\r\n background: var(--dda-surface-100);\r\n border: 1px solid var(--dda-surface-90);\r\n border-radius: 8px;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-0);\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.light-mode .dda-input-field-group{\r\n background: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field {\r\n width: 100%;\r\n height: 55px;\r\n padding: 8px 16px;\r\n background: var(--dda-surface-100);\r\n border: 1px solid var(--dda-surface-90);\r\n border-radius: 8px;\r\n font-size: var(--font-body);\r\n color: var(--dda-on-surface-0);\r\n font-weight: var(--dda-fw-400);\r\n}\r\n.dda-date-picker input{\r\n color: var(--dda-on-surface-40)\r\n}\r\n.dda-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-date-picker input[type=\"date\"]::-moz-calendar-picker-indicator {\r\n /* filter: invert(20%) sepia(90%) saturate(300%) hue-rotate(180deg); */\r\n}\r\n.dda-date-picker input[type=\"date\"].has-value {\r\n color: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-input-field{\r\n background: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-size-small .dda-input-field-group,\r\n.dda-input-size-small .dda-input-field {\r\n height: 48px;\r\n padding: 8px 12px;\r\n}\r\n\r\n.dda-input-focus-filled .dda-phone-field, \r\n.dda-input-focus .dda-input-field-group,\r\n.dda-input-field:focus {\r\n /* outline: none; */\r\n border-color: var(--dda-color-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n.dda-input-field:focus-visible {\r\n outline: 1px solid var(--dda-color-primary-40);\r\n outline-offset: -1px;\r\n}\r\n.light-mode.dda-input-focus-filled .dda-phone-field,\r\n.light-mode.dda-input-focus .dda-input-field-group,\r\n.light-mode .dda-input-field:focus {\r\n outline: none;\r\n border-color: var(--dda-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-input-dropdown-btn {\r\n min-width: 110px;\r\n position: relative;\r\n display: inline-block;\r\n padding: 0;\r\n}\r\n\r\n.dda-dropdown-select {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n justify-content: space-between;\r\n background: transparent;\r\n border: transparent;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-0);\r\n padding: 0;\r\n align-items: center;\r\n cursor: pointer;\r\n gap: 6px;\r\n}\r\n.dda-dropdown-select:focus-visible{\r\n outline: 1px solid var(--dda-color-primary-40);\r\n outline-offset: 1px;\r\n}\r\n.light-mode .dda-dropdown-select{\r\n color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-dropdown-select img {\r\n width: 24px;\r\n}\r\n\r\n\r\n.dda-dropdown-container {\r\n position: relative;\r\n width: auto;\r\n /* min-width: 140px; */\r\n}\r\n.dda-dropdown-container.bg-transparent .dda-dropdown-header{\r\n padding: 0px;\r\n height: auto;\r\n background: transparent;\r\n border: transparent;\r\n box-shadow: none;\r\n}\r\n.dda-dropdown-header {\r\n width: auto;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n.dda-dropdown-header .three-dots{\r\n font-size: 25px;\r\n color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .three-dots path{\r\n fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text{\r\n flex: 1;\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 15px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text span{\r\n color: var(--dda-on-surface-variant-30);\r\n display: flex;\r\n align-items: center;\r\n}\r\n.light-mode .dda-dropdown-text span{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text i{\r\n font-size: 31px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text path{\r\n fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-dropdown-header .dda-dropdown-text path{\r\n fill: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header:focus .three-dots path{\r\n fill: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-input-dropdown-list {\r\n width: 100%;\r\n min-width: 150px;\r\n max-height: 200px;\r\n background-color: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n border-radius: 8px;\r\n overflow-y: auto;\r\n position: absolute;\r\n top: 100%;\r\n margin-top: 1px;\r\n inset-inline-start: 0px;\r\n z-index: 9999;\r\n box-shadow: 0px 8px 10px -6px #1018281A;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-track {\r\n border-radius: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar {\r\n width: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-thumb {\r\n border-radius: 4px;\r\n background-color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-dropdown-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 7px;\r\n width: 100%;\r\n font-size: var(--font-caption);\r\n background: transparent;\r\n border: transparent;\r\n padding: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.dda-input-dropdown-item:focus-visible,\r\n.dda-input-dropdown-item:hover,\r\n.dda-input-dropdown-item.selected {\r\n background-color: var(--dda-neutral-variant-95);\r\n outline: 0;\r\n}\r\n.dda-input-dropdown-list .country-select img{\r\n width: 20px;\r\n}\r\n\r\n.dda-helper-text {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-helper-text{\r\n color: var(--dda-neutral-30);\r\n}\r\n.dda-error-message {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.dda-helper-text i,\r\n.dda-helper-text svg,\r\n.dda-error-message i,\r\n.dda-error-message svg {\r\n font-size: 21px;\r\n}\r\n\r\n.dda-success-text {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-color-success-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field-group,\r\n.dda-validation-error .dda-input-field {\r\n color: var(--dda-color-error-40);\r\n border-color: var(--dda-color-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field-group,\r\n.light-mode.dda-validation-error .dda-input-field {\r\n color: var(--dda-error-40);\r\n border-color: var(--dda-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.dda-validation-error .icon-close,\r\n.dda-validation-error .dda-error-message,\r\n.dda-validation-error .dda-field-group-input,\r\n.dda-validation-error .dda-file-input span {\r\n color: var(--dda-color-error-40) !important;\r\n}\r\n\r\n.light-mode.dda-validation-error .icon-close,\r\n.light-mode.dda-validation-error .dda-error-message,\r\n.light-mode.dda-validation-error .dda-field-group-input,\r\n.light-mode.dda-validation-error .dda-file-input span {\r\n color: var(--dda-error-40) !important;\r\n}\r\n\r\n.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n color: var(--dda-error-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field::placeholder,\r\n.dda-validation-error .dda-field-group-input::placeholder {\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::placeholder {\r\n color: var(--dda-error-40);\r\n}\r\n\r\n.dda-input-disabled .dda-input-label,\r\n.dda-input-disabled .dda-helper-text,\r\n.dda-input-disabled .dda-error-message,\r\n.dda-input-disabled i,\r\n.dda-input-disabled .dda-dropdown-select,\r\n.dda-input-disabled .dda-file-input span,\r\n.dda-input-disabled .dda-file-choose {\r\n color: var(--dda-neutral-60) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-input-field-group,\r\n.dda-input-disabled .dda-input-field {\r\n background: var(--dda-neutral-92);\r\n border-color: var(--dda-neutral-90);\r\n color: var(--dda-neutral-60) !important;\r\n box-shadow: none;\r\n pointer-events: none;\r\n outline: none;\r\n}\r\n.dda-input-disabled i{\r\n color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled svg path{\r\n fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled .dda-input-field::-ms-input-placeholder {\r\n color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-input-field::placeholder {\r\n color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-btn {\r\n background-color: var(--dda-neutral-70) !important;\r\n border-color: var(--dda-neutral-70) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-dropdown-select img,\r\n.dda-input-disabled .dda-input-field-wrapper img {\r\n filter: grayscale(1);\r\n}\r\n\r\n/*Specifications*/\r\n\r\n/*Number Field*/\r\n.dda-number-field .dda-field-group-input {\r\n padding-inline-end: 10px;\r\n border-inline-end: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n.dda-number-field .dda-field-group-input:focus,\r\n.dda-phone-field .dda-field-group-input:focus {\r\n border-inline-start: solid 1px var(--dda-color-primary-40);\r\n} \r\n.dda-number-field .dda-field-group-input:focus-visible,\r\n.dda-phone-field .dda-field-group-input:focus-visible {\r\n outline: 1px solid var(--dda-surface-100);\r\n outline-offset: -1px;\r\n}\r\n.dda-number-field .dda-input-dropdown-btn {\r\n min-width: 80px;\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-list {\r\n top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-number-field .dda-input-dropdown-list {\r\n top: 41px;\r\n}\r\n\r\n/*text ares*/\r\n.dda-input-textarea {\r\n height: auto;\r\n min-height: 120px;\r\n resize: vertical;\r\n}\r\n\r\n/*Search Field*/\r\n.dda-search-area {\r\n position: relative;\r\n}\r\n\r\n.dda-search-area .icon-left {\r\n position: absolute;\r\n top: 16px;\r\n inset-inline-start: 15px;\r\n font-size: 24px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode .dda-search-area .icon-left{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-size-small .dda-search-area .icon-left {\r\n top: 14px;\r\n}\r\n\r\n.dda-search-area .dda-search-btngroup {\r\n height: 40px;\r\n position: absolute;\r\n top: 7px;\r\n inset-inline-end: 7px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n top: 4px;\r\n}\r\n\r\n.dda-search-area .dda-search-close-icon {\r\n display: flex;\r\n color: var(--dda-on-surface-variant-30);\r\n font-size: 20px;\r\n margin: 0px;\r\n padding: 0px;\r\n background: none;\r\n border: 0;\r\n cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-search-area .dda-search-close-icon{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n padding: 8px 26px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n padding-inline-start: 40px;\r\n}\r\n.dda-search-action .dda-search-field.has-search-button{\r\n padding-inline-end: 110px;\r\n}\r\n.dda-search-sm .icon-left {\r\n top: 14px;\r\n}\r\n\r\n.dda-search-sm .dda-search-btngroup {\r\n top: 4px;\r\n}\r\n\r\n/*Phone Field*/\r\n.dda-phone-field-group {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.dda-phone-field-group.dda-phone-field-small {\r\n height: 48px;\r\n}\r\n\r\n.dda-phone-field-group.focused,\r\n.dda-phone-field-group.filled {\r\n outline: none;\r\n border-color: var(--dda-color-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n\r\n.dda-phone-field-group.error {\r\n border-color: var(--dda-color-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.phone-field-country-code {\r\n border: none;\r\n background: none;\r\n margin-inline-end: 0.5rem;\r\n font-size: 1rem;\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n.phone-field-country-code:focus-within {\r\n outline: 0;\r\n}\r\n\r\n.dda-phone-field .dda-input-dropdown-list {\r\n top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-phone-field .dda-input-dropdown-list {\r\n top: 41px;\r\n}\r\n\r\n/*Credit Card Field*/\r\n.dda-credit-card-field .dda-creditcard-icon {\r\n width: 40px;\r\n position: absolute;\r\n top: 14px;\r\n inset-inline-start: 15px;\r\n}\r\n\r\n.dda-input-size-small .dda-creditcard-icon {\r\n top: 11px;\r\n}\r\n\r\n.dda-credit-card-field .dda-input-field {\r\n padding: 8px 16px 8px 65px;\r\n}\r\n[dir=\"rtl\"] .dda-credit-card-field .dda-input-field {\r\n padding: 8px 65px 8px 16px;\r\n}\r\n/*Select Field*/\r\n.dda-select-header {\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.dda-select-header i {\r\n font-size: 28px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-select-header .dda-select-button-label:empty {\r\n flex-grow: 1;\r\n}\r\n/*Rich Text Editor*/\r\n.dda-input-container.dda-richtext-editor {\r\n gap: 0px;\r\n}\r\n\r\n.dda-richtext-editor .dda-input-label {\r\n margin-bottom: 8px;\r\n}\r\n\r\n.dda-richtext-editor .dda-helper-text,\r\n.dda-richtext-editor .dda-error-message {\r\n margin-top: 8px;\r\n}\r\n\r\n.dda-richtext-editor .ql-toolbar.ql-snow {\r\n border: 1px solid var(--dda-neutral-90) !important;\r\n border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.dda-richeditor-field {\r\n border: 1px solid var(--dda-neutral-90) !important;\r\n border-radius: 0 0 8px 8px;\r\n}\r\n\r\n.dda-richeditor-field .ql-editor {\r\n height: 100px;\r\n font-size: var(--font-caption);\r\n}\r\n\r\n/*Attach Files*/\r\n\r\n.dda-input-field-group.dda-attach-file {\r\n padding-inline-end: 6px;\r\n}\r\n\r\n.dda-file-input {\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.dda-file-input span {\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-file-input span{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-file-choose {\r\n height: 40px;\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-color-primary-40);\r\n font-weight: var(--dda-fw-500);\r\n padding: 8px 16px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n}\r\n.dda-file-choose:focus{\r\n outline: solid 1px var(--dda-color-primary-40);\r\n outline-offset: -1px;\r\n}\r\n\r\n.light-mode .dda-file-choose {\r\n color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-input-disabled .dda-file-choose {\r\n background-color: var(--dda-neutral-95);\r\n}\r\n\r\n.dda-file-choose input {\r\n display: none;\r\n}\r\n\r\n.dda-file-details {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-inline-end: 10px;\r\n}\r\n\r\n.dda-file-icon {\r\n width: 34px;\r\n height: 34px;\r\n}\r\n\r\n.dda-items {\r\n width: calc(100% - 30px);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.dda-file-details .remove-file{\r\n margin: 0;\r\n padding: 0;\r\n background: transparent;\r\n border: transparent;\r\n}\r\n.dda-file-details .remove-file svg{\r\n font-size: var(--font-caption);\r\n}\r\n.dda-file-name {\r\n width: 100%;\r\n font-size: var(--font-caption);\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n -ms-overflow-style: none;\r\n scrollbar-width: none;\r\n position: relative;\r\n text-overflow: ellipsis\r\n}\r\n.dda-file-name::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n\r\n\r\n\r\n.dda-remove-file {\r\n font-size: 20px;\r\n background: transparent;\r\n border: transparent;\r\n color: var(--dda-on-surface-variant-30);\r\n cursor: pointer;\r\n padding: 0px;\r\n}\r\n\r\ninput[type=\"date\"]::-webkit-input-placeholder {\r\n color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::-moz-placeholder {\r\n color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::placeholder {\r\n color: transparent;\r\n}\r\n","import { Component, Prop, State, Event, EventEmitter, Method, h, Host } from '@stencil/core';\r\nimport pdfIcon from '../../assets/img/icn/file_icons/icn-PDF.svg';\r\nimport pptIcon from '../../assets/img/icn/file_icons/icn-PowerPoint.svg';\r\nimport wordIcon from '../../assets/img/icn/file_icons/icn-Word.svg';\r\nimport excelIcon from '../../assets/img/icn/file_icons/icn-Excel.svg';\r\nimport imageIcon from '../../assets/img/icn/file_icons/icn-Image.svg';\r\nimport videoIcon from '../../assets/img/icn/file_icons/icn-Video.svg';\r\nimport onenoteIcon from '../../assets/img/icn/file_icons/icn-OneNote.svg';\r\nimport defaultIcon from '../../assets/img/icn/file_icons/icn-default.svg';\r\n\r\n@Component({\r\n tag: 'dda-attach-file',\r\n styleUrls: ['../../global/input.css'],\r\n shadow: false,\r\n})\r\nexport class DdaAttachFile {\r\n @Prop() label: string;\r\n @Prop() place_holder: string;\r\n @Prop() upload_button_text: string;\r\n @Prop() helper_text: string;\r\n @Prop() success_text: string;\r\n @Prop() error_message: string;\r\n @Prop() size?: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string = 'text';\r\n @Prop() input_type?: string;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_aria_label?: string = '';\r\n @Prop() input_id: string;\r\n @Prop() input_name?: string;\r\n @Prop() button_id: string;\r\n @Prop() delete_button_id: string;\r\n @Prop() button_name?: string;\r\n @Prop() accept?: string;\r\n @Prop() disabled: boolean = false;\r\n\r\n @Prop() max_file_size: number = 5; // in MB\r\n @Prop() file_size_error_message: string = 'File size should not exceed {max} MB';\r\n \r\n @State() file: File | null = null;\r\n @State() isFileUploaded: boolean = false;\r\n @State() internalErrorMessage: string = '';\r\n\r\n private fileInputRef: HTMLInputElement;\r\n\r\n @Event() fileChanged: EventEmitter<File | null>;\r\n\r\n @Method()\r\n async getFile(): Promise<File | null> {\r\n return this.file;\r\n }\r\n\r\n private fileIcons = {\r\n pdf: pdfIcon,\r\n pptx: pptIcon,\r\n docx: wordIcon,\r\n xlsx: excelIcon,\r\n png: imageIcon,\r\n jpg: imageIcon,\r\n jpeg: imageIcon,\r\n mp4: videoIcon,\r\n mkv: videoIcon,\r\n one: onenoteIcon,\r\n };\r\n\r\n handleFileInput(event: Event) {\r\n console.log(this.fileInputRef.value);\r\n \r\n const files = (event.target as HTMLInputElement)?.files;\r\n if (files && files.length > 0) {\r\n const selectedFile = files[0];\r\n const fileSizeInMB = selectedFile.size / (1024 * 1024);\r\n\r\n if (this.max_file_size && fileSizeInMB > this.max_file_size) {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = this.file_size_error_message.replace('{max}', this.max_file_size.toString());\r\n this.validation_type = 'error';\r\n this.fileChanged.emit(null);\r\n return;\r\n }\r\n\r\n this.file = selectedFile;\r\n this.isFileUploaded = true;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(this.file);\r\n } else {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n }\r\n\r\n removeFile() {\r\n this.file = null;\r\n this.isFileUploaded = false;\r\n if (this.fileInputRef) {\r\n this.fileInputRef.value = null;\r\n}\r\n this.internalErrorMessage = '';\r\n this.validation_type = 'normal';\r\n this.fileChanged.emit(null);\r\n }\r\n\r\n getFileIcon(fileName: string) {\r\n const extension = fileName.split('.').pop()?.toLowerCase();\r\n return this.fileIcons[extension] || defaultIcon;\r\n }\r\n\r\n render() {\r\n const inputClass = [\r\n 'dda-input-container',\r\n this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n this.size ? `dda-input-size-${this.size}` : '',\r\n this.input_type ? `dda-input-${this.input_type}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ].filter(Boolean).join(' ');\r\n\r\n const shouldShowError = this.validation_type === 'error' && (this.internalErrorMessage || this.error_message);\r\n\r\n return (\r\n <Host>\r\n <div class={inputClass}>\r\n {this.label && (\r\n <span class=\"dda-input-label\" id={`${this.input_id}-label`}>\r\n {this.label}\r\n </span>\r\n )}\r\n\r\n <div class=\"dda-input-field-group dda-attach-file\">\r\n {this.file ? (\r\n <div class=\"dda-file-details\">\r\n <div class=\"dda-items\">\r\n <img src={this.getFileIcon(this.file.name)} alt=\"File Icon\" class=\"dda-file-icon\" />\r\n <span class=\"dda-file-name\" title={this.file.name}>{this.file.name}</span>\r\n </div>\r\n <button\r\n type=\"button\"\r\n class=\"remove-file\"\r\n name={this.button_name}\r\n id={this.delete_button_id}\r\n role=\"button\"\r\n tabIndex={0}\r\n aria-label={this.button_aria_label || 'Remove file'}\r\n onClick={() => this.removeFile()}\r\n disabled={this.disabled}\r\n >\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">close</i>\r\n </button>\r\n </div>\r\n ) : (\r\n <div class=\"dda-file-input\">\r\n <span>{this.place_holder || 'No File Selected'}</span>\r\n <button\r\n type=\"button\"\r\n class=\"dda-file-choose\"\r\n name={this.button_name}\r\n id={this.button_id}\r\n tabIndex={0}\r\n aria-labelledby={`${this.button_id}-label`}\r\n onClick={() => this.fileInputRef?.click()}\r\n disabled={this.disabled}\r\n >\r\n {this.upload_button_text || 'Choose File'}\r\n </button>\r\n <span id={`${this.button_id}-label`} class=\"visually-hidden\">\r\n {this.upload_button_text || 'Choose File'}\r\n </span>\r\n\r\n <label htmlFor={this.input_id} class=\"visually-hidden\">\r\n {this.label}\r\n </label>\r\n <input\r\n id={this.input_id}\r\n name={this.input_name}\r\n type=\"file\"\r\n accept={this.accept}\r\n disabled={this.disabled}\r\n hidden\r\n ref={(el) => (this.fileInputRef = el as HTMLInputElement)}\r\n onInput={(event) => this.handleFileInput(event)}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {shouldShowError ? (\r\n <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\" aria-live=\"assertive\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.internalErrorMessage || this.error_message}</span>\r\n </span>\r\n </span>\r\n ) : this.isFileUploaded && this.success_text ? (\r\n <span class=\"dda-success-text\" id={this.validation_id} role=\"status\" aria-live=\"polite\">\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">check</i>\r\n <span>{this.success_text}</span>\r\n </span>\r\n </span>\r\n ) : this.helper_text ? (\r\n <span class=\"dda-helper-text\" id={this.validation_id}>\r\n <span class=\"dda-d-flex dda-align-items-start dda-gap-2\">\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">info</i>\r\n <span>{this.helper_text}</span>\r\n </span>\r\n </span>\r\n ) : null}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-avatar.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-avatar.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/dda-avatar/dda-avatar.css?tag=dda-avatar","src/components/dda-avatar/dda-avatar.tsx"],"sourcesContent":[".dda-avatar {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.avatar-shape-circle {\r\n border-radius: 64px;\r\n}\r\n\r\n.avatar-shape-square {\r\n border-radius: 8px;\r\n}\r\n\r\n.avatar-type-photo img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.avatar-type-photo.avatar-shape-circle img {\r\n border-radius: 64px;\r\n}\r\n\r\n.avatar-type-photo.avatar-shape-square img {\r\n border-radius: 8px;\r\n}\r\n\r\n\r\n.avatar-type-icon {\r\n background: var(--dda-neutral-variant-94);\r\n text-align: center;\r\n}\r\n\r\n.avatar-type-icon .dda-smile path {\r\n fill: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.avatar-type-icon i {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xs .dda-smile {\r\n font-size: 13px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-sm .dda-smile {\r\n font-size: 19px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-md .dda-smile {\r\n font-size: 24px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-lg .dda-smile {\r\n font-size: 28px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xl .dda-smile {\r\n font-size: 31px;\r\n}\r\n\r\n.avatar-type-icon.avatar-size-xxl .dda-smile {\r\n font-size: 37px;\r\n}\r\n\r\n\r\n.avatar-type-text {\r\n background: var(--dda-color-primary-40);\r\n text-align: center;\r\n}\r\n\r\n.light-mode.avatar-type-text{\r\n background: var(--dda-primary-40);\r\n}\r\n\r\n.avatar-type-text .avatar-main-text {\r\n color: var(--dda-neutral-100);\r\n font-size: 16px;\r\n}\r\n\r\n.avatar-size-xs .avatar-main-text {\r\n font-size: 10px;\r\n}\r\n\r\n.avatar-size-sm .avatar-main-text {\r\n font-size: 12px;\r\n}\r\n\r\n.avatar-size-md .avatar-main-text {\r\n font-size: 16px;\r\n}\r\n\r\n.avatar-size-lg .avatar-main-text {\r\n font-size: 20px;\r\n}\r\n\r\n.avatar-size-xl .avatar-main-text {\r\n font-size: 24px;\r\n}\r\n\r\n.avatar-size-xxl .avatar-main-text {\r\n font-size: 28px;\r\n}\r\n\r\n\r\n.avatar-size-xs {\r\n width: 24px;\r\n height: 24px;\r\n}\r\n\r\n.avatar-size-sm {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n\r\n.avatar-size-md {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.avatar-size-lg {\r\n width: 48px;\r\n height: 48px;\r\n}\r\n\r\n.avatar-size-xl {\r\n width: 56px;\r\n height: 56px;\r\n}\r\n\r\n.avatar-size-xxl {\r\n width: 64px;\r\n height: 64px;\r\n}\r\n\r\n\r\n.dda-avatar .status-circle {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 20px;\r\n background: var(--dda-color-success-40);\r\n border: solid 2px var(--dda-neutral-100);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n position: absolute;\r\n bottom: -2px;\r\n right: -2px;\r\n}\r\n\r\n.light-mode.dda-avatar .status-circle{\r\n background: var(--dda-success-40);\r\n}\r\n\r\n.avatar-size-xs .status-circle {\r\n width: 8px;\r\n height: 8px;\r\n}\r\n\r\n.avatar-size-sm .status-circle {\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.avatar-size-md .status-circle {\r\n width: 14px;\r\n height: 14px;\r\n}\r\n\r\n.avatar-size-lg .status-circle {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n\r\n.avatar-size-xl .status-circle {\r\n width: 18px;\r\n height: 18px;\r\n}\r\n\r\n.avatar-size-xxl .status-circle {\r\n width: 20px;\r\n height: 20px;\r\n}\r\n\r\n\r\n.dda-avatar .verified-icon {\r\n display: flex;\r\n background-color: var(--dda-neutral-100);\r\n color: var(--dda-color-success-40);\r\n border-radius: 20px;\r\n border: solid 2px var(--dda-neutral-100);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n position: absolute;\r\n bottom: -2px;\r\n inset-inline-end: -2px;\r\n}\r\n\r\n.light-mode.dda-avatar .verified-icon{\r\n color: var(--dda-success-40);\r\n}\r\n\r\n.dda-avatar.avatar-size-xs .verified-icon span {\r\n font-size: 6px;\r\n}\r\n\r\n.dda-avatar.avatar-size-sm .verified-icon span {\r\n font-size: 8px;\r\n}\r\n\r\n.dda-avatar.avatar-size-md .verified-icon span {\r\n font-size: 10px;\r\n}\r\n\r\n.dda-avatar.avatar-size-lg .verified-icon span {\r\n font-size: 12px;\r\n}\r\n\r\n.dda-avatar.avatar-size-xl .verified-icon span {\r\n font-size: 14px;\r\n}\r\n\r\n.dda-avatar.avatar-size-xxl .verified-icon span {\r\n font-size: 16px;\r\n}\r\n\r\n\r\n.avatar-design-live {\r\n box-shadow: 0px 0px 0px 2px var(--dda-neutral-100), 0px 0px 0px 4px var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.avatar-design-live{\r\n box-shadow: 0px 0px 0px 2px var(--dda-neutral-100), 0px 0px 0px 4px var(--dda-primary-40);\r\n}\r\n\r\n.notification-circle {\r\n width: auto;\r\n height: 20px;\r\n background: var(--dda-color-error-40);\r\n font-size: var(--dda-fs-body-sm);\r\n color: var(--dda-neutral-100);\r\n padding: 0 8px;\r\n border: solid 2px var(--dda-neutral-100);\r\n border-radius: 40px;\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n display: inline-grid;\r\n align-items: center;\r\n position: absolute;\r\n top: -5px;\r\n right: -10px;\r\n}\r\n\r\n.light-mode .notification-circle{\r\n background: var(--dda-error-40);\r\n}\r\n\r\n.avatar-size-xs .notification-circle,\r\n.avatar-size-sm .notification-circle {\r\n width: 14px;\r\n height: 14px;\r\n padding: 0px;\r\n text-indent: -100px;\r\n overflow: hidden;\r\n top: -5px;\r\n right: -5px;\r\n}\r\n\r\n.avatar-size-md .notification-circle {\r\n height: 20px;\r\n}\r\n\r\n.avatar-size-lg .notification-circle {\r\n height: 22px;\r\n}\r\n\r\n.avatar-size-xl .notification-circle {\r\n height: 24px;\r\n}\r\n\r\n.avatar-size-xxl .notification-circle {\r\n height: 24px;\r\n}\r\n\r\n","import { Component, Prop, State, h } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-avatar',\r\n styleUrls: ['dda-avatar.css'],\r\n shadow: false,\r\n})\r\nexport class DdaAvatar {\r\n @Prop() type: 'photo' | 'icon' | 'text' = 'photo';\r\n @Prop() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';\r\n @Prop() design: 'default' | 'status' | 'verified' | 'story' | 'notification' = 'default';\r\n @Prop() rounded: 'square' | 'circle' = 'circle';\r\n @Prop() src: string = ''; // For photo type\r\n @Prop() icon: string = 'material-icons'; // For icon type\r\n @Prop() text: string = 'AB'; // For text type\r\n @Prop() notification_number: number = 0; // For notification design\r\n @Prop() custom_class?: string = ''; \r\n @State() isOpen: boolean = false;\r\n @Prop() selected: string;\r\n @Prop() show_options: boolean = true;\r\n @Prop() options: string;\r\n @Prop() component_mode?: string; \r\n @Prop() aria_label: string;\r\n @Prop() button_id?: string;\r\n @Prop() button_name?: string;\r\n @Prop() dropdown_enabled: boolean = true; // ✅ New prop\r\n\r\n toggleDropdown() {\r\n if (this.dropdown_enabled) {\r\n this.isOpen = !this.isOpen;\r\n }\r\n }\r\n\r\n selectOption(option: string) {\r\n this.selected = option;\r\n this.isOpen = false;\r\n }\r\n\r\n private get parsedOptions(): 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 render() {\r\n return (\r\n <div\r\n onClick={() => this.toggleDropdown()}\r\n class={{\r\n 'dda-avatar': true,\r\n [`avatar-type-${this.type}`]: true,\r\n [`avatar-size-${this.size}`]: true,\r\n [`avatar-design-${this.design}`]: true,\r\n [`avatar-shape-${this.rounded}`]: true,\r\n [`${this.custom_class}`]: true,\r\n [`${this.component_mode}`]: true,\r\n [`${this.button_name}`]: true,\r\n 'avatar-dropdown-disabled': !this.dropdown_enabled, // Optional: for visual indication\r\n }}\r\n >\r\n {this.isOpen && (\r\n <div class=\"dda-input-dropdown-list\">\r\n {this.parsedOptions.length > 0 ? (\r\n this.parsedOptions.map(option => (\r\n <button\r\n id={this.button_id}\r\n name={this.button_name}\r\n aria-label={this.aria_label}\r\n type=\"button\"\r\n class={`dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`}\r\n onClick={(e) => {\r\n e.stopPropagation(); // prevent dropdown toggle on option click\r\n this.selectOption(option);\r\n }}\r\n >\r\n {option}\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\r\n {this.type === 'photo' && <img src={this.src} alt=\"Avatar\" />}\r\n {this.type === 'icon' && <i class={`${this.icon} dda-smile`}>sentiment_satisfied</i>}\r\n {this.type === 'text' && <span class=\"avatar-main-text\">{this.text}</span>}\r\n {this.design === 'status' && <div class=\"status-circle\"></div>}\r\n {this.design === 'verified' && (\r\n <div class=\"verified-icon\">\r\n <span class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">verified</span>\r\n </div>\r\n )}\r\n {this.design === 'notification' && (\r\n <div class=\"notification-circle\">{this.notification_number}</div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-banner-card.cjs.entry.js DELETED Viewed

@@ -1,28 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-39924b9e.js');
-const DdaBannerCard = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.custom_class = '';
-        this.banner_card_value = '';
-        this.banner_card_name = '';
-    }
-    render() {
-        const cardClass = [
-            'dda-banner-card',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        return (index.h(index.Host, { key: '28cc4eda203b1c117c7453f3dc55f4d7a15e51c6' }, index.h("button", { key: '45fd82bafc340a0b6f50738ae2ddd316b44e057a', id: this.banner_card_id, name: this.banner_card_name, value: this.banner_card_value, class: cardClass, type: "button", role: "button", "aria-labelledby": `${this.banner_card_id}-title ${this.banner_card_id}-desc` }, index.h("img", { key: 'bcb302aa1114d5b9f548060e2d8453364dda42cf', class: "dda-banner-card-icon", src: this.image_src, alt: this.image_alt || this.banner_card_title || 'Banner card image', "aria-hidden": !this.image_alt && !this.banner_card_title }), index.h("span", { key: '9497d70bafe960c447a089cbd2711d09ecf7c927', class: "dda-d-flex dda-flex-column" }, index.h("span", { key: 'd2d601371cd1a875a86368beee011af77554828e', id: `${this.banner_card_id}-title`, class: "dda-banner-card-title", role: "heading", "aria-level": 2 }, this.banner_card_title), index.h("span", { key: 'a03f1653cf3f9f3711ad31a01ab5339b590e4ee7', id: `${this.banner_card_id}-desc`, class: "dda-banner-card-description" }, this.banner_card_description)))));
-    }
-};
-exports.dda_banner_card = DdaBannerCard;
-//# sourceMappingURL=dda-banner-card.cjs.entry.js.map

package/dist/cjs/dda-banner-card.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-banner-card.entry.cjs.js","mappings":";;;;;;MAOa,aAAa;IAL1B;;QAa2B,iBAAY,GAAW,EAAE,CAAC;QAC1B,sBAAiB,GAAW,EAAE,CAAC;QAC/B,qBAAgB,GAAW,EAAE,CAAC;KAgFxD;IA7EC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,iBAAiB;YACjB,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,QACEA,QAACC,UAAI,uDACHD,qEACE,EAAE,EAAE,IAAI,CAAC,cAAc,EACvB,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,qBACI,GAAG,IAAI,CAAC,cAAc,UAAU,IAAI,CAAC,cAAc,OAAO,IAE3EA,kEACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,GAAG,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,IAAI,mBAAmB,iBACvD,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,iBAAiB,GACvD,EACFA,mEAAM,KAAK,EAAC,4BAA4B,IACtCA,mEACE,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,QAAQ,EAClC,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAC,SAAS,gBACF,CAAC,IAEZ,IAAI,CAAC,iBAAiB,CAClB,EACPA,mEACE,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,OAAO,EACjC,KAAK,EAAC,6BAA6B,IAElC,IAAI,CAAC,uBAAuB,CACxB,CACF,CACA,CAgCJ,EACP;KACH;;;;;","names":["h","Host"],"sources":["src/components/dda-cards/dda-banner-card/dda-banner-card.tsx"],"sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-banner-card',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaBannerCard {\r\n @Prop() banner_card_type?: string;\r\n @Prop() banner_card_id: string;\r\n @Prop() banner_card_url: string;\r\n @Prop() image_src: string;\r\n @Prop() image_alt: string;\r\n @Prop() banner_card_title: string;\r\n @Prop() banner_card_description: string;\r\n @Prop({ reflect: true }) custom_class: string = '';\r\n @Prop({ reflect: true }) banner_card_value: string = '';\r\n @Prop({ reflect: true }) banner_card_name: string = '';\r\n @Prop() component_mode?: string;\r\n\r\n render() {\r\n const cardClass = [\r\n 'dda-banner-card',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <Host>\r\n <button\r\n id={this.banner_card_id}\r\n name={this.banner_card_name}\r\n value={this.banner_card_value}\r\n class={cardClass}\r\n type=\"button\"\r\n role=\"button\"\r\n aria-labelledby={`${this.banner_card_id}-title ${this.banner_card_id}-desc`}\r\n >\r\n <img\r\n class=\"dda-banner-card-icon\"\r\n src={this.image_src}\r\n alt={this.image_alt || this.banner_card_title || 'Banner card image'}\r\n aria-hidden={!this.image_alt && !this.banner_card_title}\r\n />\r\n <span class=\"dda-d-flex dda-flex-column\">\r\n <span\r\n id={`${this.banner_card_id}-title`}\r\n class=\"dda-banner-card-title\"\r\n role=\"heading\"\r\n aria-level={2}\r\n >\r\n {this.banner_card_title}\r\n </span>\r\n <span\r\n id={`${this.banner_card_id}-desc`}\r\n class=\"dda-banner-card-description\"\r\n >\r\n {this.banner_card_description}\r\n </span>\r\n </span>\r\n </button>\r\n\r\n {/* <a\r\n href={this.banner_card_url}\r\n target={}\r\n id={this.banner_card_id}\r\n class={cardClass}\r\n aria-labelledby={`${this.banner_card_id}-title`} \r\n >\r\n <img\r\n class=\"dda-banner-card-icon\"\r\n src={this.image_src}\r\n alt={this.image_alt || this.banner_card_title || 'Banner card image'}\r\n aria-hidden={!this.image_alt && !this.banner_card_title}\r\n />\r\n <span class=\"dda-d-flex dda-flex-column\">\r\n <span\r\n id={`${this.banner_card_id}-title`}\r\n class=\"dda-banner-card-title\"\r\n role=\"heading\"\r\n aria-level={2}\r\n >\r\n {this.banner_card_title}\r\n </span>\r\n <span\r\n id={`${this.banner_card_id}-desc`}\r\n class=\"dda-banner-card-description\"\r\n >\r\n {this.banner_card_description}\r\n </span>\r\n </span>\r\n </a> */}\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}

package/dist/cjs/dda-breadcrumb.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-breadcrumb.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,skCAAskC,CAAC;AAChmC,4BAAe,gBAAgB;;MCMlB,aAAa;IAL1B;;;QAMU,WAAM,GAAkC,MAAM,CAAC;QAC/C,cAAS,GAAmC,eAAe,CAAC;QAC5D,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAY,EAAE,CAAC;QAE3B,oBAAe,GAAW,EAAE,CAAC;QAI7B,iBAAY,GAAqB,OAAO,CAAC;QAEjD,gBAAW,GAAkD,EAAE,CAAC;KA2CjE;IAzCC,iBAAiB;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,IAAI,CAAC,cAAc,IAC7BA,gFAAiB,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IAC7DA,iEAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,WAAW;YACf,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAEE,OAAK,MAChCF,gBAAI,KAAK,EAAE,uBAAuBE,OAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,IACvFF;;gBAEE,IAAI,EAAE,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,oBAAoB,GAAG,KAAK,CAAC,GAAG,EACpE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,IAAI,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE;eAEpF,IAAI,CAAC,MAAM,KAAK,MAAM,KACrBA,eAAG,KAAK,EAAE,gBAAgB,iBAAc,MAAM,IAC3C,KAAK,CAAC,IAAI,CACT,CACL,EACA,IAAI,CAAC,MAAM,KAAK,MAAM,IAAIA,sBAAO,KAAK,CAAC,IAAI,CAAQ,CAClD,EACHE,OAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAClCF,eAAG,KAAK,EAAE,0CAA0C,iBAAc,MAAM,IACrE,IAAI,CAAC,SAAS,CACb,CACL,CACE,CACN,CAAC,CACD,CACD,CACF,CACD,EACP;KACH;;;;;;;","names":["h","Host","index"],"sources":["src/components/dda-breadcrumb/dda-breadcrumb.css?tag=dda-breadcrumb","src/components/dda-breadcrumb/dda-breadcrumb.tsx"],"sourcesContent":[".dda-breadcrumb {\r\n display: inline-flex;\r\n align-items: center;\r\n list-style: none;\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\n.dda-breadcrumb-item {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.dda-breadcrumb,\r\n.dda-breadcrumb-item{\r\n gap: 10px;\r\n}\r\n\r\n.dda-breadcrumb-item a {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-decoration: none;\r\n font-size: var(--font-caption);\r\n gap: 4px;\r\n}\r\n.dda-breadcrumb-item a span{\r\n color: var(--dda-on-surface-0);\r\n font-weight: var(--dda-fw-500);\r\n}\r\n.light-mode .dda-breadcrumb-item a span{\r\n color: var(--dda-neutral-0);\r\n}\r\n/**/\r\n.dda-breadcrumb-item i,\r\n.dda-breadcrumb-item svg {\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item i,\r\n.light-mode .dda-breadcrumb-item svg {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n:root[dir='rtl'] .dda-breadcrumb-item > i{\r\n transform: rotate(180deg);\r\n}\r\n/**/\r\n.dda-breadcrumb-item .separator {\r\n margin: 0 8px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item .separator {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.dda-breadcrumb-item.active a span{\r\n color: var(--dda-on-surface-variant-30);\r\n font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-breadcrumb-item.active a span{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n","import { Component, Prop, h, Host, Element, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-breadcrumb',\r\n styleUrls: ['dda-breadcrumb.css'],\r\n shadow: false,\r\n})\r\nexport class DdaBreadcrumb {\r\n @Prop() design: 'text' | 'icon-text' | 'icon' = 'text'; // Default to text design\r\n @Prop() separator: 'chevron_right' | 'pen_size_2' = 'chevron_right'; // Default to chevron separator\r\n @Prop() aria_label?: string = '';\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() dataBreadcrumbs: string = '';\r\n @Element() el: HTMLElement;\r\n\r\n @Event() navigatorClick?: EventEmitter<string>;\r\n @Prop() useNavigator: 'true' | 'false' = 'false';\r\n\r\n breadcrumbs: { text: string; icon: string; url: string }[] = [];\r\n\r\n componentWillLoad() {\r\n const breadcrumbsData = this.el.getAttribute('data-breadcrumbs');\r\n if (breadcrumbsData) {\r\n this.breadcrumbs = JSON.parse(breadcrumbsData);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={this.component_mode}>\r\n <nav aria-label={this.aria_label} class={`${this.custom_class}`}>\r\n <ol class=\"dda-breadcrumb\">\r\n {this.breadcrumbs &&\r\n this.breadcrumbs.map((crumb, index) => (\r\n <li class={`dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}`}>\r\n <a\r\n // href={crumb.url}\r\n href={this.useNavigator == \"true\" ? 'javascript:void(0)' : crumb.url}\r\n onClick={() => this.useNavigator == \"true\" ? this.navigatorClick.emit(crumb.url) : \"\"} \r\n >\r\n {this.design !== 'text' && (\r\n <i class={`material-icons`} aria-hidden=\"true\">\r\n {crumb.icon}\r\n </i>\r\n )}\r\n {this.design !== 'icon' && <span>{crumb.text}</span>}\r\n </a>\r\n {index < this.breadcrumbs.length - 1 && (\r\n <i class={`material-icons material-symbols-outlined`} aria-hidden=\"true\">\r\n {this.separator}\r\n </i>\r\n )}\r\n </li>\r\n ))}\r\n </ol>\r\n </nav>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-button.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-button.entry.cjs.js","mappings":";;;;;;MAOa,SAAS;IALtB;;;QAMU,gBAAW,GAAW,QAAQ,CAAC;QAC/B,aAAQ,GAAY,KAAK,CAAC;QAC1B,sBAAiB,GAAW,EAAE,CAAC;QAC/B,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,oBAAe,GAAW,EAAE,CAAC;QAC7B,aAAQ,GAAW,EAAE,CAAC;QACtB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,sBAAiB,GAAY,EAAE,CAAC;QAEhC,iBAAY,GAAY,EAAE,CAAC;QAG3B,gBAAW,GAAY,EAAE,CAAC;QAM1B,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK;gBACL,EAAE,EAAE,IAAI,CAAC,SAAS;gBAClB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,WAAW;aACvB,CAAC,CAAC;SACJ,CAAC;KAmDH;;;;;;;IA1CC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,SAAS;YACT,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,iBAAiB,GAAG,YAAY,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEb,QACEA,QAACC,UAAI,uDACHD,qEACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAC/C,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,IAGxB,IAAI,CAAC,UAAU,KACdA,gEAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,IACnE,IAAI,CAAC,UAAU,CACd,CACL,EACA,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,QAAQ,KACZA,gEAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,IACnE,IAAI,CAAC,QAAQ,CACZ,CACL,CACM,CACJ,EACP;KACH;;;;;","names":["h","Host"],"sources":["src/components/dda-button/dda-button.tsx"],"sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-button',\r\n styleUrls: [],\r\n shadow: false,\r\n})\r\nexport class DdaButton {\r\n @Prop() button_type: string = 'button';\r\n @Prop() disabled: boolean = false;\r\n @Prop() start_icon_family: string = '';\r\n @Prop() start_icon: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() end_icon_family: string = '';\r\n @Prop() end_icon: string = '';\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_color: string = 'primary';\r\n @Prop() size?: string;\r\n @Prop() button_shape?: string = '';\r\n @Prop() icon_button_shape?: string = '';\r\n @Prop() gap?: number;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() button_id: string;\r\n @Prop() button_name?: string = '';\r\n @Prop() value?: string;\r\n // @Prop() onpressKey?: () => void;\r\n\r\n @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) return;\r\n\r\n this.buttonClick.emit({\r\n event,\r\n id: this.button_id,\r\n value: this.value,\r\n name: this.button_name,\r\n });\r\n };\r\n \r\n // private handleKeyDown = (event: KeyboardEvent) => {\r\n // if (event.key === 'Enter' || event.key === ' ') {\r\n // event.preventDefault();\r\n // this.handleClick(event as unknown as MouseEvent);\r\n // }\r\n // };\r\n\r\n render() {\r\n const buttonClass = [\r\n 'dda-btn',\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `btn-shape-${this.button_shape}` : '',\r\n this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n return (\r\n <Host>\r\n <button\r\n id={this.button_id}\r\n type={this.button_type}\r\n class={buttonClass}\r\n disabled={this.disabled}\r\n aria-label={this.aria_label || this.button_text}\r\n name={this.button_name}\r\n value={this.value}\r\n onClick={this.handleClick}\r\n // onKeyDown={this.handleKeyDown}\r\n >\r\n {this.start_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.start_icon}\r\n </i>\r\n )}\r\n {this.button_text}\r\n {this.end_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.end_icon}\r\n </i>\r\n )}\r\n </button>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}