@a.nemreen/dga-ui 0.3.14 → 0.3.16

package/CHANGELOG.md

@@ -0,0 +1,127 @@
+# Changelog
+
+What changed in the packages you install. The same notes are on the live docs: [nemreen.info/dga/docs/changelog](https://nemreen.info/dga/docs/changelog).
+
+Versions below are the ones published to npm. Work that is only in this repository is listed under **Unreleased** until the next version bump.
+
+## 2026-09-30
+
+`@a.nemreen/dga-ui` **0.3.16**
+
+### Fixed
+
+- `@a.nemreen/dga-ui` — rich text toolbar commands stay applied. Headings, lists, quotes, alignment, links, and clear formatting render in the editor, including tags inserted while typing.
+
+## 2026-09-29
+
+`@a.nemreen/dga-ui` **0.3.15** · `@a.nemreen/dga-tokens` **0.3.8** · `@a.nemreen/dga-dynamic-form` **0.2.5**
+
+### Added
+
+- `@a.nemreen/dga-ui` — choice group, tree, tree select, IBAN, national ID, password strength, confirm dialog, file preview, print, offline, search bar, QR, barcode, map embed, stat strip, FAQ, event calendar, virtual list, bottom sheet, popover, rich text, signature pad, notification inbox, locale toggle, and theme toggle.
+- `@a.nemreen/dga-ui` — table data grid: pagination footer, column picker, row actions, debounced filters, typed sort, error and empty states, and auto, table, or cards on small screens.
+- `@a.nemreen/dga-ui` — icon overrides through `provideDgaIcons`, using Hugeicons instead of `@platformscode/icons`.
+- `@a.nemreen/dga-ui` — select and autocomplete can show a loading row, emit search for remote options, and offer a create row. Buttons can stretch with `fullWidth`. Menus have an icon appearance.
+
+### Changed
+
+- `@a.nemreen/dga-ui` — event calendar days follow the date picker: circular days, a ring for today, a solid fill for the selected day, and no glow. The number stays readable on hover.
+- `@a.nemreen/dga-tokens` — `host-compat.css` lists the new component selectors so a host reset does not flatten them.
+- `@a.nemreen/dga-dynamic-form` — the published package now includes `CHANGELOG.md`.
+- Demo — lighter first load with `NgOptimizedImage`, WebP heroes, and a tighter font-loading path. Docs changelog is paginated.
+
+### Fixed
+
+- `@a.nemreen/dga-ui` — image popup is moved to the document body so it is not painted under a sticky header or sidebar.
+
+## 2026-09-20
+
+`@a.nemreen/dga-ui` **0.3.14** · `@a.nemreen/dga-tokens` **0.3.7**
+
+### Added
+
+- `@a.nemreen/dga-tokens` — `DGA_FONT_STYLESHEETS` and `dgaEnsureFontStylesheet` so a font stylesheet can be injected when the user switches families.
+- `@a.nemreen/dga-tokens` **0.3.5** — National Day 96 brand pack.
+
+### Changed
+
+- `@a.nemreen/dga-ui` **0.3.14** — chart, chatbot, page transition, and Saudi cities moved to secondary entries (`@a.nemreen/dga-ui/chart`, `/chatbot`, `/page-transition`, `/saudi-cities`) so the main bundle stays smaller. Icons load on demand.
+- `@a.nemreen/dga-ui` **0.3.13** / tokens **0.3.6** — portal footers follow the active brand in light and dark. Toast outlet updated alongside the National Day 96 demo.
+
+## 2026-09-17
+
+`@a.nemreen/dga-ui` **0.3.12** · `@a.nemreen/dga-dynamic-form` **0.2.4**
+
+### Added
+
+- `@a.nemreen/dga-ui` — age range on page feedback.
+
+### Changed
+
+- `@a.nemreen/dga-dynamic-form` **0.2.4** — follows `DgaLocaleService` and updates labels when the locale changes.
+- `@a.nemreen/dga-dynamic-form` **0.2.3** / `@a.nemreen/dga-ui` **0.3.11** — field visibility can depend on the selected option. Select menu styling updated.
+
+## 2026-09-16
+
+`@a.nemreen/dga-ui` **0.3.10** · `@a.nemreen/dga-tokens` **0.3.4**
+
+### Added
+
+- `@a.nemreen/dga-ui` — weather on `dga-top-bar`.
+- `@a.nemreen/dga-ui` — shared floating-action dock for the chatbot and scroll-to-top.
+
+## 2026-09-14
+
+`@a.nemreen/dga-ui` **0.3.10** · `@a.nemreen/dga-tokens` **0.3.3**
+
+`0.3.8` and `0.3.9` were not published on their own. Those fixes shipped inside **0.3.10**.
+
+### Added
+
+- `@a.nemreen/dga-ui` **0.3.7** — footer link groups and accessibility links.
+
+### Fixed
+
+- `@a.nemreen/dga-ui` — top-bar stamp notices stack full width on small screens.
+- `@a.nemreen/dga-ui` — `NG0950` when `dga-tab` (and the content switcher) read `value` before it was bound.
+- `@a.nemreen/dga-tokens` **0.3.2** / `@a.nemreen/dga-ui` **0.3.6** — `host-compat.css` so a host reset (`*` or `a`) no longer flattens DGA components. Top-bar clock lifecycle cleaned up. Broader locale coverage.
+
+## 2026-09-03
+
+`@a.nemreen/dga-ui` **0.3.5** · `@a.nemreen/dga-dynamic-form` **0.2.0**
+
+### Added
+
+- `@a.nemreen/dga-ui` — phone input with more countries and locale-aware formatting.
+
+### Changed
+
+- Dynamic form labels and validators follow the active locale. Locale helpers expanded in tokens and UI.
+
+## 2026-09-01
+
+`@a.nemreen/dga-ui` **0.3.4** · `@a.nemreen/dga-dynamic-form` **0.1.8** · `@a.nemreen/dga-tokens` **0.3.1**
+
+### Added
+
+- `@a.nemreen/dga-dynamic-form` **0.1.8** — cross-field validators (password, Saudi phone, date range), staged uploads, and visibility fixes across the 18 field types.
+
+### Changed
+
+- `@a.nemreen/dga-ui` **0.3.4** — chart tooltips.
+
+## 2026-07-28
+
+`@a.nemreen/dga-ui` **0.3.1**
+
+### Fixed
+
+- Overlay stacking, and the drawer releasing body scroll when it closes.
+
+## 2026-07-25
+
+`@a.nemreen/dga-ui` **0.3.0** · `@a.nemreen/dga-tokens` **0.3.0**
+
+### Changed
+
+- Accessibility panel redesign, stacked toasts, and portal chrome polish.

package/README.md

@@ -14,17 +14,23 @@ Standalone Angular UI components for the DGA design system — forms, overlays,
 
 **Live demo:** [nemreen.info/dga](https://nemreen.info/dga/)
 
-> Version **0.2.x** until public API freeze.
+> Version **0.3.x** until public API freeze (1.0).
+
+## Changelog
+
+[CHANGELOG.md](https://github.com/nemreen/dga-angular/blob/main/CHANGELOG.md) ships with this package. The same notes, in Arabic and English, are at [nemreen.info/dga/docs/changelog](https://nemreen.info/dga/docs/changelog).
 
 ## Features
 
-- Standalone Angular 19 components (no NgModules)
+- Standalone Angular 19+ components (no NgModules)
 - RTL-first / Arabic-ready (logical CSS + locale-aware chrome)
-- Forms: input, select, checkbox, radio, switch, OTP, upload, date picker, …
-- Overlays: dialog, modal, drawer, toast, menu, tooltip
-- Shell: header, top bar, hero, footer, preloader
-- Feedback & a11y: alert, cookies, skip link (accessibility panel → `@a.nemreen/a11y`)
-- Layout: card, section, grid, clamp, expandable
+- Forms: input, select, autocomplete (async/creatable), checkbox, radio, switch, OTP, upload, date/time picker, signature pad, rich text, …
+- Overlays: dialog, modal, drawer, bottom sheet, popover, toast, menu, tooltip, command
+- Shell: header, top bar, hero, footer, preloader, theme toggle, locale toggle
+- Feedback & a11y: alert, cookies, skip link, notification inbox (accessibility panel → `@a.nemreen/a11y`)
+- Data: table (templates, filters, expand, bulk), virtual list, export, carousel, chart
+- Content: timeline, calendar events, FAQ, QR/barcode, metrics
+- Layout: card, section, grid, clamp, expandable, app shell
 
 ## Install
 
@@ -49,7 +55,7 @@ Sources live under `src/lib/<domain>/<component>/`. Place new work in the matchi
 | `shell/` | Page chrome (header, footer, hero, …) |
 | `content/` | Content presentation (list, quote, metric, …) |
 | `data/` | Tables, charts, export |
-| `domain/` | Locale/region data helpers (not UI) |
+| `domain/` | Locale/region data helpers (not UI). Saudi cities ship as `@a.nemreen/dga-ui/saudi-cities`. |
 | `utils/` | Internal helpers only (not exported) |
 
 Import from the public package surface — do not deep-import `src/lib/...` paths.
@@ -107,6 +113,11 @@ import {
   DgaCard,
   DgaDivider,
   DgaIcon,
+  DgaTable,
+  DgaBottomSheet,
+  DgaPopover,
+  DgaThemeToggle,
+  DgaLocaleToggle,
 } from '@a.nemreen/dga-ui';
 ```
 
@@ -114,15 +125,16 @@ import {
 
 ### Icon
 
-Two layers:
+Two layers, both HugeIcons Stroke Rounded (DGA / Platforms Code family):
 
 1. **Chrome** — curated inline SVG via `name` (paints with the first frame; use in buttons, fields, menus).
-2. **Content** — HugeIcons Stroke Rounded font via `glyph` (opt into `@a.nemreen/dga-tokens/styles/icon-font.css`).
+2. **Content** — optional font via `glyph` (opt into `@a.nemreen/dga-tokens/styles/icon-font.css`).
 
 ```html
 <!-- Chrome (always available) -->
 <dga-icon name="search" size="sm" />
 <dga-icon name="arrowNext" size="sm" label="التالي" />
+<dga-icon name="riyal" size="md" />
 
 <!-- Content (requires icon-font.css) -->
 <dga-icon glyph="search-01" size="xl" />
@@ -133,7 +145,25 @@ Use `arrowNext` / `arrowPrev` for forward/back — they mirror under `dir="rtl"`
 
 Sizes (px): `2xs` 10 · `xs` 14 · `sm` 16 · `md` 18 · `lg` 20 · `xl` 24 · `2xl` 28 · `3xl` 32.
 
-Chrome icons are vendored in the library (no `@platformscode/icons` peer). For content glyphs, use the optional icon font from `@a.nemreen/dga-tokens`.
+`DgaIcon` inlines a small HugeIcons core map (close / menu / search / chevrons / check / user / …) and lazy-loads the curated catalog on the first non-core `name`. Apps can add icons without forking the library:
+
+```ts
+import { provideDgaIcons } from '@a.nemreen/dga-ui';
+
+bootstrapApplication(App, {
+  providers: [
+    provideDgaIcons({
+      myBrand: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">…</svg>`,
+    }),
+  ],
+});
+```
+
+```html
+<dga-icon name="myBrand" size="md" />
+```
+
+Source: `@hugeicons/core-free-icons` (same family as design.dga.gov.sa). Regenerate with `node scripts/generate-dga-icons.mjs`.
 
 ### Scroll to top
 

package/fesm2022/a.nemreen-dga-ui-chart.mjs

@@ -1,4 +1,4 @@
-import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal as w,computed as o,ChangeDetectionStrategy as P,Component as D}from"@angular/core";import{dgaSafeCssColor as $}from"@a.nemreen/dga-ui";const N=["#1b8354","#3b82f6","#f59e0b","#ef4444","#64748b","#0d9488"];class S{type=c("bar",...ngDevMode?[{debugName:"type"}]:[]);series=c([],...ngDevMode?[{debugName:"series"}]:[]);labels=c([],...ngDevMode?[{debugName:"labels"}]:[]);datasets=c([],...ngDevMode?[{debugName:"datasets"}]:[]);legend=c(!0,{...ngDevMode?{debugName:"legend"}:{},transform:y});tooltip=c(!0,{...ngDevMode?{debugName:"tooltip"}:{},transform:y});grid=c(!0,{...ngDevMode?{debugName:"grid"}:{},transform:y});stacked=c(!1,{...ngDevMode?{debugName:"stacked"}:{},transform:y});smooth=c(!0,{...ngDevMode?{debugName:"smooth"}:{},transform:y});area=c(!1,{...ngDevMode?{debugName:"area"}:{},transform:y});dots=c(!0,{...ngDevMode?{debugName:"dots"}:{},transform:y});colors=c([],...ngDevMode?[{debugName:"colors"}]:[]);tooltipValueLabel=c("القيمة",...ngDevMode?[{debugName:"tooltipValueLabel"}]:[]);height=c(220,...ngDevMode?[{debugName:"height"}]:[]);label=c("رسم بياني",...ngDevMode?[{debugName:"label"}]:[]);width=400;pieSize=180;pad={t:16,r:12,b:28,l:36};hiddenNames=w(new Set,...ngDevMode?[{debugName:"hiddenNames"}]:[]);hiddenSeries=this.hiddenNames.asReadonly();hoveredCategoryIndex=w(null,...ngDevMode?[{debugName:"hoveredCategoryIndex"}]:[]);hoveredSlice=w(null,...ngDevMode?[{debugName:"hoveredSlice"}]:[]);isPieType=o(()=>this.type()==="pie"||this.type()==="donut",...ngDevMode?[{debugName:"isPieType"}]:[]);categories=o(()=>{if(this.labels().length)return this.labels();const e=this.datasets();if(e.length){const t=e.reduce((a,i)=>Math.max(a,i.data.length),0);return Array.from({length:t},(a,i)=>String(i+1))}return this.series().map(t=>t.label)},...ngDevMode?[{debugName:"categories"}]:[]);seriesList=o(()=>{const e=this.datasets();if(e.length)return e;const t=this.series();return t.length?[{name:this.label()||"",data:t.map(a=>a.value)}]:[]},...ngDevMode?[{debugName:"seriesList"}]:[]);visibleSeriesList=o(()=>this.seriesList().filter(e=>!this.hiddenNames().has(e.name)),...ngDevMode?[{debugName:"visibleSeriesList"}]:[]);piePoints=o(()=>{if(this.series().length)return this.series();const e=this.datasets();if(e.length){const t=this.labels();return e[0].data.map((a,i)=>({label:t[i]??String(i+1),value:a}))}return[]},...ngDevMode?[{debugName:"piePoints"}]:[]);visiblePiePoints=o(()=>this.piePoints().filter(e=>!this.hiddenNames().has(e.label)),...ngDevMode?[{debugName:"visiblePiePoints"}]:[]);showLegend=o(()=>this.legend()&&(this.isPieType()||this.seriesList().length>1),...ngDevMode?[{debugName:"showLegend"}]:[]);legendItems=o(()=>this.isPieType()?this.piePoints().map((e,t)=>({name:e.label,color:this.colorFor(t),value:e.value})):this.seriesList().map((e,t)=>({name:e.name,color:this.colorFor(t),value:null})),...ngDevMode?[{debugName:"legendItems"}]:[]);colorFor(e){const t=`var(--dga-chart-color-${e%6+1}, ${N[e%N.length]})`,a=this.colors()[e];return a?$(a,t):t}toggleSeries(e){this.hiddenNames.update(t=>{const a=this.isPieType()?this.piePoints().length:this.seriesList().length,i=new Set(t);return i.has(e)?i.delete(e):i.add(e),i.size>=a?t:i})}ariaLabel=o(()=>{const e=this.type()==="bar"?"أعمدة":this.type()==="line"?"خطي":this.type()==="donut"?"حلقي":"دائري",t=this.isPieType()?this.piePoints().map(a=>`${a.label}: ${a.value}`):this.seriesList().flatMap(a=>a.data.map((i,l)=>`${a.name?a.name+" ":""}${this.categories()[l]??l+1}: ${i}`));return`${this.label()} (${e}). ${t.join("، ")}`},...ngDevMode?[{debugName:"ariaLabel"}]:[]);plot=o(()=>{const e=this.height(),{t,r:a,b:i,l}=this.pad;return{x:l,y:t,w:this.width-l-a,h:e-t-i}},...ngDevMode?[{debugName:"plot"}]:[]);gridYs=o(()=>{const{y:e,h:t}=this.plot();return[e,e+t/2,e+t]},...ngDevMode?[{debugName:"gridYs"}]:[]);maxValue=o(()=>{const e=this.visibleSeriesList();if(!e.length)return 1;if(this.type()==="bar"&&this.stacked()){const a=this.categories().length;let i=0;for(let l=0;l<a;l++){let s=0;for(const d of e)s+=Math.max(0,d.data[l]??0);i=Math.max(i,s)}return i<=0?1:i}let t=0;for(const a of e)for(const i of a.data)t=Math.max(t,i);return t<=0?1:t},...ngDevMode?[{debugName:"maxValue"}]:[]);groupLayout=o(()=>{const{x:e,w:t}=this.plot(),a=Math.max(this.categories().length,1),i=12,l=Math.max(4,(t-i*(a-1))/a);return{x:e,groupW:l,groupGap:i,n:a}},...ngDevMode?[{debugName:"groupLayout"}]:[]);categoryTicks=o(()=>{const e=this.categories(),{x:t,groupW:a,groupGap:i}=this.groupLayout();return e.map((l,s)=>({index:s,category:l,x:t+s*(a+i)+a/2,hitX:t+s*(a+i),hitW:a}))},...ngDevMode?[{debugName:"categoryTicks"}]:[]);bars=o(()=>{const e=this.visibleSeriesList(),t=this.categories(),{y:a,h:i}=this.plot(),{x:l,groupW:s,groupGap:d}=this.groupLayout(),u=this.maxValue(),h=this.stacked(),b=e.length>1&&!h?4:0,m=h?s:Math.max(2,(s-b*Math.max(e.length-1,0))/Math.max(e.length,1)),v=[];for(let n=0;n<t.length;n++){const x=l+n*(s+d);if(h){let g=a+i;for(let p=0;p<e.length;p++){const f=e[p].data[n]??0,k=Math.max(0,f)/u*i;g-=k,v.push({seriesIndex:p,categoryIndex:n,x,y:g,w:m,h:k,value:f,color:this.colorFor(p),name:e[p].name,category:t[n]})}}else for(let g=0;g<e.length;g++){const p=e[g].data[n]??0,f=Math.max(0,p)/u*i;v.push({seriesIndex:g,categoryIndex:n,x:x+g*(m+b),y:a+i-f,w:m,h:f,value:p,color:this.colorFor(g),name:e[g].name,category:t[n]})}}return v},...ngDevMode?[{debugName:"bars"}]:[]);visibleLines=o(()=>{const e=this.visibleSeriesList(),t=this.categories(),{x:a,y:i,w:l,h:s}=this.plot(),d=this.maxValue(),u=t.length;if(!u)return[];const h=this.smooth(),b=i+s;return e.map((m,v)=>{const n=m.data.slice(0,u).map((f,k)=>{const M=u===1?a+l/2:a+k/(u-1)*l,L=i+s-Math.max(0,f)/d*s;return{x:M,y:L,value:f,category:t[k]}}),x=this.colorFor(v),g=h?this.smoothPathD(n):this.straightPathD(n),p=n.length>1?this.areaPathD(n,b,h):"";return{name:m.name,color:x,points:n,linePath:g,areaPath:p}})},...ngDevMode?[{debugName:"visibleLines"}]:[]);straightPathD(e){return e.length?e.map((t,a)=>`${a===0?"M":"L"} ${t.x} ${t.y}`).join(" "):""}smoothPathD(e){if(e.length<2)return e.length===1?`M ${e[0].x} ${e[0].y}`:"";const t=[`M ${e[0].x} ${e[0].y}`];for(let a=0;a<e.length-1;a++){const i=e[a===0?0:a-1],l=e[a],s=e[a+1],d=e[a+2<e.length?a+2:e.length-1],u=l.x+(s.x-i.x)/6,h=l.y+(s.y-i.y)/6,b=s.x-(d.x-l.x)/6,m=s.y-(d.y-l.y)/6;t.push(`C ${u} ${h}, ${b} ${m}, ${s.x} ${s.y}`)}return t.join(" ")}areaPathD(e,t,a){const i=a?this.smoothPathD(e):this.straightPathD(e),l=e[0],s=e[e.length-1];return`${i} L ${s.x} ${t} L ${l.x} ${t} Z`}pieSlices=o(()=>{const e=this.visiblePiePoints(),t=e.reduce((d,u)=>d+Math.max(0,u.value),0)||1,a=this.pieSize/2,i=this.pieSize/2,l=this.pieSize*.42;let s=-Math.PI/2;return e.map((d,u)=>{const h=Math.max(0,d.value)/t*Math.PI*2,b=s,m=s+h;s=m;const v=h>Math.PI?1:0,n=a+l*Math.cos(b),x=i+l*Math.sin(b),g=a+l*Math.cos(m),p=i+l*Math.sin(m),f=b+h/2;return{index:u,label:d.label,value:d.value,color:this.colorFor(u),d:`M ${a} ${i} L ${n} ${x} A ${l} ${l} 0 ${v} 1 ${g} ${p} Z`,midX:a+l*.65*Math.cos(f),midY:i+l*.65*Math.sin(f)}})},...ngDevMode?[{debugName:"pieSlices"}]:[]);onCategoryEnter(e){this.tooltip()&&this.hoveredCategoryIndex.set(e)}onCategoryLeave(){this.hoveredCategoryIndex.set(null)}onSliceEnter(e,t){this.tooltip()&&this.hoveredSlice.set({index:e,label:t.label,value:t.value})}onSliceLeave(){this.hoveredSlice.set(null)}categoryAriaLabel(e){const t=this.categories()[e]??"",a=this.visibleSeriesList().map(i=>`${i.name?i.name+" ":""}${i.data[e]??0}`);return`${t}: ${a.join("، ")}`}categoryTooltip=o(()=>{const e=this.hoveredCategoryIndex();if(e===null||!this.tooltip())return null;const t=this.categoryTicks()[e];if(!t)return null;const i=this.visibleSeriesList().map((l,s)=>({name:l.name||t.category,color:this.colorFor(s),value:l.data[e]??0}));return{x:t.x,y:this.plot().y,title:t.category,items:i}},...ngDevMode?[{debugName:"categoryTooltip"}]:[]);sliceTooltip=o(()=>{const e=this.hoveredSlice();if(!e||!this.tooltip())return null;const t=this.pieSlices()[e.index];return t?{x:t.midX,y:t.midY,title:t.label,items:[{name:this.tooltipValueLabel(),color:t.color,value:t.value}]}:null},...ngDevMode?[{debugName:"sliceTooltip"}]:[]);formatValue(e){return new Intl.NumberFormat(void 0,{maximumFractionDigits:2}).format(e)}pieTooltipStyle(e){const a=Math.min(Math.max(e.x,8),this.pieSize-8);return e.y<this.pieSize*.28?{left:`${a}px`,top:`${Math.min(e.y+12,this.pieSize-8)}px`,transform:"translate(-50%, 0)"}:{left:`${a}px`,top:`${Math.max(e.y-8,8)}px`,transform:"translate(-50%, -100%)"}}plotTooltipStyle(e){const t=this.height(),a=e.x/this.width*100,i=e.y/t*100;return{left:`${a}%`,top:`${i}%`,transform:"translate(-50%, calc(-100% - 8px))"}}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.5",ngImport:r,type:S,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.5",type:S,isStandalone:!0,selector:"dga-chart",inputs:{type:{classPropertyName:"type",publicName:"type",isSignal:!0,isRequired:!1,transformFunction:null},series:{classPropertyName:"series",publicName:"series",isSignal:!0,isRequired:!1,transformFunction:null},labels:{classPropertyName:"labels",publicName:"labels",isSignal:!0,isRequired:!1,transformFunction:null},datasets:{classPropertyName:"datasets",publicName:"datasets",isSignal:!0,isRequired:!1,transformFunction:null},legend:{classPropertyName:"legend",publicName:"legend",isSignal:!0,isRequired:!1,transformFunction:null},tooltip:{classPropertyName:"tooltip",publicName:"tooltip",isSignal:!0,isRequired:!1,transformFunction:null},grid:{classPropertyName:"grid",publicName:"grid",isSignal:!0,isRequired:!1,transformFunction:null},stacked:{classPropertyName:"stacked",publicName:"stacked",isSignal:!0,isRequired:!1,transformFunction:null},smooth:{classPropertyName:"smooth",publicName:"smooth",isSignal:!0,isRequired:!1,transformFunction:null},area:{classPropertyName:"area",publicName:"area",isSignal:!0,isRequired:!1,transformFunction:null},dots:{classPropertyName:"dots",publicName:"dots",isSignal:!0,isRequired:!1,transformFunction:null},colors:{classPropertyName:"colors",publicName:"colors",isSignal:!0,isRequired:!1,transformFunction:null},tooltipValueLabel:{classPropertyName:"tooltipValueLabel",publicName:"tooltipValueLabel",isSignal:!0,isRequired:!1,transformFunction:null},height:{classPropertyName:"height",publicName:"height",isSignal:!0,isRequired:!1,transformFunction:null},label:{classPropertyName:"label",publicName:"label",isSignal:!0,isRequired:!1,transformFunction:null}},host:{properties:{"attr.data-type":"type()"},classAttribute:"block w-full"},ngImport:r,template:`
+import*as l from"@angular/core";import{input as h,booleanAttribute as v,signal as S,computed as n,viewChild as I,afterEveryRender as P,ChangeDetectionStrategy as D,Component as $}from"@angular/core";import{dgaSafeCssColor as z}from"@a.nemreen/dga-ui";const N=["#1b8354","#3b82f6","#f59e0b","#ef4444","#64748b","#0d9488"];class w{type=h("bar",...ngDevMode?[{debugName:"type"}]:[]);series=h([],...ngDevMode?[{debugName:"series"}]:[]);labels=h([],...ngDevMode?[{debugName:"labels"}]:[]);datasets=h([],...ngDevMode?[{debugName:"datasets"}]:[]);legend=h(!0,{...ngDevMode?{debugName:"legend"}:{},transform:v});tooltip=h(!0,{...ngDevMode?{debugName:"tooltip"}:{},transform:v});grid=h(!0,{...ngDevMode?{debugName:"grid"}:{},transform:v});stacked=h(!1,{...ngDevMode?{debugName:"stacked"}:{},transform:v});smooth=h(!0,{...ngDevMode?{debugName:"smooth"}:{},transform:v});area=h(!1,{...ngDevMode?{debugName:"area"}:{},transform:v});dots=h(!0,{...ngDevMode?{debugName:"dots"}:{},transform:v});colors=h([],...ngDevMode?[{debugName:"colors"}]:[]);tooltipValueLabel=h("القيمة",...ngDevMode?[{debugName:"tooltipValueLabel"}]:[]);height=h(220,...ngDevMode?[{debugName:"height"}]:[]);label=h("رسم بياني",...ngDevMode?[{debugName:"label"}]:[]);width=400;pieSize=180;pad={t:16,r:12,b:28,l:36};hiddenNames=S(new Set,...ngDevMode?[{debugName:"hiddenNames"}]:[]);hiddenSeries=this.hiddenNames.asReadonly();hoveredCategoryIndex=S(null,...ngDevMode?[{debugName:"hoveredCategoryIndex"}]:[]);hoveredSlice=S(null,...ngDevMode?[{debugName:"hoveredSlice"}]:[]);isPieType=n(()=>this.type()==="pie"||this.type()==="donut",...ngDevMode?[{debugName:"isPieType"}]:[]);categories=n(()=>{if(this.labels().length)return this.labels();const e=this.datasets();if(e.length){const t=e.reduce((a,i)=>Math.max(a,i.data.length),0);return Array.from({length:t},(a,i)=>String(i+1))}return this.series().map(t=>t.label)},...ngDevMode?[{debugName:"categories"}]:[]);seriesList=n(()=>{const e=this.datasets();if(e.length)return e;const t=this.series();return t.length?[{name:this.label()||"",data:t.map(a=>a.value)}]:[]},...ngDevMode?[{debugName:"seriesList"}]:[]);visibleSeriesList=n(()=>this.seriesList().filter(e=>!this.hiddenNames().has(e.name)),...ngDevMode?[{debugName:"visibleSeriesList"}]:[]);piePoints=n(()=>{if(this.series().length)return this.series();const e=this.datasets();if(e.length){const t=this.labels();return e[0].data.map((a,i)=>({label:t[i]??String(i+1),value:a}))}return[]},...ngDevMode?[{debugName:"piePoints"}]:[]);visiblePiePoints=n(()=>this.piePoints().filter(e=>!this.hiddenNames().has(e.label)),...ngDevMode?[{debugName:"visiblePiePoints"}]:[]);showLegend=n(()=>this.legend()&&(this.isPieType()||this.seriesList().length>1),...ngDevMode?[{debugName:"showLegend"}]:[]);legendItems=n(()=>this.isPieType()?this.piePoints().map((e,t)=>({name:e.label,color:this.colorFor(t),value:e.value})):this.seriesList().map((e,t)=>({name:e.name,color:this.colorFor(t),value:null})),...ngDevMode?[{debugName:"legendItems"}]:[]);colorFor(e){const t=`var(--dga-chart-color-${e%6+1}, ${N[e%N.length]})`,a=this.colors()[e];return a?z(a,t):t}toggleSeries(e){this.hiddenNames.update(t=>{const a=this.isPieType()?this.piePoints().length:this.seriesList().length,i=new Set(t);return i.has(e)?i.delete(e):i.add(e),i.size>=a?t:i})}ariaLabel=n(()=>{const e=this.type()==="bar"?"أعمدة":this.type()==="line"?"خطي":this.type()==="donut"?"حلقي":"دائري",t=this.isPieType()?this.piePoints().map(a=>`${a.label}: ${a.value}`):this.seriesList().flatMap(a=>a.data.map((i,r)=>`${a.name?a.name+" ":""}${this.categories()[r]??r+1}: ${i}`));return`${this.label()} (${e}). ${t.join("، ")}`},...ngDevMode?[{debugName:"ariaLabel"}]:[]);plot=n(()=>{const e=this.height(),{t,r:a,b:i,l:r}=this.pad;return{x:r,y:t,w:this.width-r-a,h:e-t-i}},...ngDevMode?[{debugName:"plot"}]:[]);gridYs=n(()=>{const{y:e,h:t}=this.plot();return[e,e+t/2,e+t]},...ngDevMode?[{debugName:"gridYs"}]:[]);maxValue=n(()=>{const e=this.visibleSeriesList();if(!e.length)return 1;if(this.type()==="bar"&&this.stacked()){const a=this.categories().length;let i=0;for(let r=0;r<a;r++){let s=0;for(const c of e)s+=Math.max(0,c.data[r]??0);i=Math.max(i,s)}return i<=0?1:i}let t=0;for(const a of e)for(const i of a.data)t=Math.max(t,i);return t<=0?1:t},...ngDevMode?[{debugName:"maxValue"}]:[]);groupLayout=n(()=>{const{x:e,w:t}=this.plot(),a=Math.max(this.categories().length,1),i=12,r=Math.max(4,(t-i*(a-1))/a);return{x:e,groupW:r,groupGap:i,n:a}},...ngDevMode?[{debugName:"groupLayout"}]:[]);categoryTicks=n(()=>{const e=this.categories(),{x:t,groupW:a,groupGap:i}=this.groupLayout();return e.map((r,s)=>({index:s,category:r,x:t+s*(a+i)+a/2,hitX:t+s*(a+i),hitW:a}))},...ngDevMode?[{debugName:"categoryTicks"}]:[]);bars=n(()=>{const e=this.visibleSeriesList(),t=this.categories(),{y:a,h:i}=this.plot(),{x:r,groupW:s,groupGap:c}=this.groupLayout(),d=this.maxValue(),g=this.stacked(),m=e.length>1&&!g?4:0,p=g?s:Math.max(2,(s-m*Math.max(e.length-1,0))/Math.max(e.length,1)),y=[];for(let o=0;o<t.length;o++){const x=r+o*(s+c);if(g){let u=a+i;for(let f=0;f<e.length;f++){const b=e[f].data[o]??0,k=Math.max(0,b)/d*i;u-=k,y.push({seriesIndex:f,categoryIndex:o,x,y:u,w:p,h:k,value:b,color:this.colorFor(f),name:e[f].name,category:t[o]})}}else for(let u=0;u<e.length;u++){const f=e[u].data[o]??0,b=Math.max(0,f)/d*i;y.push({seriesIndex:u,categoryIndex:o,x:x+u*(p+m),y:a+i-b,w:p,h:b,value:f,color:this.colorFor(u),name:e[u].name,category:t[o]})}}return y},...ngDevMode?[{debugName:"bars"}]:[]);visibleLines=n(()=>{const e=this.visibleSeriesList(),t=this.categories(),{x:a,y:i,w:r,h:s}=this.plot(),c=this.maxValue(),d=t.length;if(!d)return[];const g=this.smooth(),m=i+s;return e.map((p,y)=>{const o=p.data.slice(0,d).map((b,k)=>{const L=d===1?a+r/2:a+k/(d-1)*r,M=i+s-Math.max(0,b)/c*s;return{x:L,y:M,value:b,category:t[k]}}),x=this.colorFor(y),u=g?this.smoothPathD(o):this.straightPathD(o),f=o.length>1?this.areaPathD(o,m,g):"";return{name:p.name,color:x,points:o,linePath:u,areaPath:f}})},...ngDevMode?[{debugName:"visibleLines"}]:[]);straightPathD(e){return e.length?e.map((t,a)=>`${a===0?"M":"L"} ${t.x} ${t.y}`).join(" "):""}smoothPathD(e){if(e.length<2)return e.length===1?`M ${e[0].x} ${e[0].y}`:"";const t=[`M ${e[0].x} ${e[0].y}`];for(let a=0;a<e.length-1;a++){const i=e[a===0?0:a-1],r=e[a],s=e[a+1],c=e[a+2<e.length?a+2:e.length-1],d=r.x+(s.x-i.x)/6,g=r.y+(s.y-i.y)/6,m=s.x-(c.x-r.x)/6,p=s.y-(c.y-r.y)/6;t.push(`C ${d} ${g}, ${m} ${p}, ${s.x} ${s.y}`)}return t.join(" ")}areaPathD(e,t,a){const i=a?this.smoothPathD(e):this.straightPathD(e),r=e[0],s=e[e.length-1];return`${i} L ${s.x} ${t} L ${r.x} ${t} Z`}pieSlices=n(()=>{const e=this.visiblePiePoints(),t=e.reduce((c,d)=>c+Math.max(0,d.value),0)||1,a=this.pieSize/2,i=this.pieSize/2,r=this.pieSize*.42;let s=-Math.PI/2;return e.map((c,d)=>{const g=Math.max(0,c.value)/t*Math.PI*2,m=s,p=s+g;s=p;const y=g>Math.PI?1:0,o=a+r*Math.cos(m),x=i+r*Math.sin(m),u=a+r*Math.cos(p),f=i+r*Math.sin(p),b=m+g/2;return{index:d,label:c.label,value:c.value,color:this.colorFor(d),d:`M ${a} ${i} L ${o} ${x} A ${r} ${r} 0 ${y} 1 ${u} ${f} Z`,midX:a+r*.65*Math.cos(b),midY:i+r*.65*Math.sin(b)}})},...ngDevMode?[{debugName:"pieSlices"}]:[]);onCategoryEnter(e){this.tooltip()&&(this.syncPlotBox(),this.hoveredCategoryIndex.set(e))}onCategoryLeave(){this.hoveredCategoryIndex.set(null)}onSliceEnter(e,t){this.tooltip()&&this.hoveredSlice.set({index:e,label:t.label,value:t.value})}onSliceLeave(){this.hoveredSlice.set(null)}categoryAriaLabel(e){const t=this.categories()[e]??"",a=this.visibleSeriesList().map(i=>`${i.name?i.name+" ":""}${i.data[e]??0}`);return`${t}: ${a.join("، ")}`}categoryTooltip=n(()=>{const e=this.hoveredCategoryIndex();if(e===null||!this.tooltip())return null;const t=this.categoryTicks()[e];if(!t)return null;const i=this.visibleSeriesList().map((r,s)=>({name:r.name||t.category,color:this.colorFor(s),value:r.data[e]??0}));return{x:this.tooltipX(e,t.x),y:this.tooltipY(e),title:t.category,items:i}},...ngDevMode?[{debugName:"categoryTooltip"}]:[]);sliceTooltip=n(()=>{const e=this.hoveredSlice();if(!e||!this.tooltip())return null;const t=this.pieSlices()[e.index];return t?{x:t.midX,y:t.midY,title:t.label,items:[{name:this.tooltipValueLabel(),color:t.color,value:t.value}]}:null},...ngDevMode?[{debugName:"sliceTooltip"}]:[]);formatValue(e){return new Intl.NumberFormat(void 0,{maximumFractionDigits:2}).format(e)}pieTooltipStyle(e){const a=Math.min(Math.max(e.x,8),this.pieSize-8);return e.y<this.pieSize*.28?{left:`${a}px`,top:`${Math.min(e.y+12,this.pieSize-8)}px`,transform:"translate(-50%, 0)"}:{left:`${a}px`,top:`${Math.max(e.y-8,8)}px`,transform:"translate(-50%, -100%)"}}tooltipX(e,t){return this.type()==="bar"?t:this.visibleLines()[0]?.points[e]?.x??t}tooltipY(e){if(this.type()==="bar"){const t=this.bars().filter(a=>a.categoryIndex===e).map(a=>a.y);if(t.length)return Math.min(...t)}else{const t=this.visibleLines().map(a=>a.points[e]?.y).filter(a=>a!=null);if(t.length)return Math.min(...t)}return this.plot().y}plotSvg=I("plotSvg",...ngDevMode?[{debugName:"plotSvg"}]:[]);plotBox=S({width:0,height:0},...ngDevMode?[{debugName:"plotBox"}]:[]);lineLengths=S([],...ngDevMode?[{debugName:"lineLengths"}]:[]);constructor(){P(()=>this.measureLines())}measureLines(){if(this.type()!=="line"){this.lineLengths().length&&this.lineLengths.set([]);return}const e=this.plotSvg()?.nativeElement;if(!e)return;const t=[...e.querySelectorAll(".dga-chart-line")].map(i=>Math.ceil(i.getTotalLength())),a=this.lineLengths();t.length===a.length&&t.every((i,r)=>i===a[r])||this.lineLengths.set(t)}syncPlotBox(){const e=this.plotSvg()?.nativeElement;if(!e)return;const t=e.getBoundingClientRect();this.plotBox.set({width:t.width,height:t.height})}plotTooltipStyle(e){const t=this.plotBox(),a=this.width,i=this.height(),r=t.width>0&&t.height>0?Math.min(t.width/a,t.height/i):1,s=a*r,c=i*r,d=t.width>0?(t.width-s)/2:0,g=t.height>0?(t.height-c)/2:0,m=d+e.x*r,p=g+e.y*r,y=t.width>0?m/t.width:e.x/a,o=y<.16?"0":y>.84?"-100%":"-50%";return{left:`${m}px`,top:`${p}px`,transform:`translate(${o}, calc(-100% - 8px))`}}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.5",ngImport:l,type:w,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.5",type:w,isStandalone:!0,selector:"dga-chart",inputs:{type:{classPropertyName:"type",publicName:"type",isSignal:!0,isRequired:!1,transformFunction:null},series:{classPropertyName:"series",publicName:"series",isSignal:!0,isRequired:!1,transformFunction:null},labels:{classPropertyName:"labels",publicName:"labels",isSignal:!0,isRequired:!1,transformFunction:null},datasets:{classPropertyName:"datasets",publicName:"datasets",isSignal:!0,isRequired:!1,transformFunction:null},legend:{classPropertyName:"legend",publicName:"legend",isSignal:!0,isRequired:!1,transformFunction:null},tooltip:{classPropertyName:"tooltip",publicName:"tooltip",isSignal:!0,isRequired:!1,transformFunction:null},grid:{classPropertyName:"grid",publicName:"grid",isSignal:!0,isRequired:!1,transformFunction:null},stacked:{classPropertyName:"stacked",publicName:"stacked",isSignal:!0,isRequired:!1,transformFunction:null},smooth:{classPropertyName:"smooth",publicName:"smooth",isSignal:!0,isRequired:!1,transformFunction:null},area:{classPropertyName:"area",publicName:"area",isSignal:!0,isRequired:!1,transformFunction:null},dots:{classPropertyName:"dots",publicName:"dots",isSignal:!0,isRequired:!1,transformFunction:null},colors:{classPropertyName:"colors",publicName:"colors",isSignal:!0,isRequired:!1,transformFunction:null},tooltipValueLabel:{classPropertyName:"tooltipValueLabel",publicName:"tooltipValueLabel",isSignal:!0,isRequired:!1,transformFunction:null},height:{classPropertyName:"height",publicName:"height",isSignal:!0,isRequired:!1,transformFunction:null},label:{classPropertyName:"label",publicName:"label",isSignal:!0,isRequired:!1,transformFunction:null}},host:{properties:{"attr.data-type":"type()"},classAttribute:"block w-full"},viewQueries:[{propertyName:"plotSvg",first:!0,predicate:["plotSvg"],descendants:!0,isSignal:!0}],ngImport:l,template:`
     <div class="flex w-full flex-col gap-md">
       @if (isPieType()) {
         <div class="flex flex-col items-center gap-lg sm:flex-row sm:items-start">
@@ -15,8 +15,10 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
             >
               @for (slice of pieSlices(); track slice.label + slice.index) {
                 <path
+                  class="dga-chart-slice"
                   [attr.d]="slice.d"
                   [attr.fill]="slice.color"
+                  [style.animation-delay.ms]="slice.index * 70"
                   stroke="var(--dga-chart-dot-fill, #fff)"
                   stroke-width="2"
                   tabindex="0"
@@ -82,6 +84,7 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
       } @else {
         <div class="relative w-full">
           <svg
+            #plotSvg
             class="block w-full"
             [attr.viewBox]="'0 0 ' + width + ' ' + height()"
             [attr.height]="height()"
@@ -104,37 +107,47 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
           @if (type() === 'bar') {
             @for (bar of bars(); track bar.categoryIndex + '-' + bar.seriesIndex) {
               <rect
+                class="dga-chart-bar"
                 [attr.x]="bar.x"
                 [attr.y]="bar.y"
                 [attr.width]="bar.w"
                 [attr.height]="bar.h"
                 [attr.fill]="bar.color"
+                [style.animation-delay.ms]="bar.categoryIndex * 80 + bar.seriesIndex * 40"
                 rx="2"
               />
             }
           } @else {
-            @for (line of visibleLines(); track line.name) {
+            @for (line of visibleLines(); track line.name; let lineIndex = $index) {
               @if (area() && line.areaPath) {
                 <path
+                  class="dga-chart-area"
                   [attr.d]="line.areaPath"
                   [attr.fill]="line.color"
+                  [style.animation-delay.ms]="lineIndex * 120"
                   fill-opacity="var(--dga-chart-area-opacity, 0.18)"
                   stroke="none"
                 />
               }
               <path
+                class="dga-chart-line"
+                [class.dga-chart-line--play]="!!lineLengths()[lineIndex]"
                 [attr.d]="line.linePath"
+                [style.--dga-chart-length.px]="lineLengths()[lineIndex] || 1000"
                 fill="none"
                 [attr.stroke]="line.color"
+                [style.animation-delay.ms]="lineIndex * 120"
                 stroke-width="2"
                 stroke-linejoin="round"
                 stroke-linecap="round"
               />
               @if (dots()) {
-                @for (pt of line.points; track pt.x) {
+                @for (pt of line.points; track pt.x; let pointIndex = $index) {
                   <circle
+                    class="dga-chart-dot"
                     [attr.cx]="pt.x"
                     [attr.cy]="pt.y"
+                    [style.animation-delay.ms]="lineIndex * 120 + pointIndex * 70 + 180"
                     r="4"
                     [attr.fill]="'var(--dga-chart-dot-fill, #fff)'"
                     [attr.stroke]="line.color"
@@ -220,7 +233,7 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
         }
       }
     </div>
-  `,isInline:!0,styles:[".dga-chart-tooltip{pointer-events:none;z-index:1;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}\n"],changeDetection:r.ChangeDetectionStrategy.OnPush})}r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:r,type:S,decorators:[{type:D,args:[{selector:"dga-chart",standalone:!0,template:`
+  `,isInline:!0,styles:[".dga-chart-tooltip{position:absolute;pointer-events:none;z-index:2;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}.dga-chart-bar{transform-box:fill-box;transform-origin:center bottom;animation:dga-chart-bar-in .62s cubic-bezier(.22,1,.36,1) both}.dga-chart-line{stroke-dasharray:var(--dga-chart-length, 1000);stroke-dashoffset:var(--dga-chart-length, 1000)}.dga-chart-line--play{animation:dga-chart-line-in .9s cubic-bezier(.22,1,.36,1) forwards}.dga-chart-area{opacity:1;animation:dga-chart-fade-in .7s ease-out both}.dga-chart-dot{transform-box:fill-box;transform-origin:center;animation:dga-chart-dot-in .36s cubic-bezier(.22,1,.36,1) both}.dga-chart-slice{transform-box:view-box;transform-origin:50% 50%;animation:dga-chart-slice-in .7s cubic-bezier(.22,1,.36,1) both}@keyframes dga-chart-bar-in{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dga-chart-line-in{0%{stroke-dashoffset:var(--dga-chart-length)}to{stroke-dashoffset:0}}@keyframes dga-chart-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chart-dot-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes dga-chart-slice-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.dga-chart-bar,.dga-chart-line,.dga-chart-line--play,.dga-chart-area,.dga-chart-dot,.dga-chart-slice{animation:none}.dga-chart-line{stroke-dashoffset:0}}\n"],changeDetection:l.ChangeDetectionStrategy.OnPush})}l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:l,type:w,decorators:[{type:$,args:[{selector:"dga-chart",standalone:!0,template:`
     <div class="flex w-full flex-col gap-md">
       @if (isPieType()) {
         <div class="flex flex-col items-center gap-lg sm:flex-row sm:items-start">
@@ -237,8 +250,10 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
             >
               @for (slice of pieSlices(); track slice.label + slice.index) {
                 <path
+                  class="dga-chart-slice"
                   [attr.d]="slice.d"
                   [attr.fill]="slice.color"
+                  [style.animation-delay.ms]="slice.index * 70"
                   stroke="var(--dga-chart-dot-fill, #fff)"
                   stroke-width="2"
                   tabindex="0"
@@ -304,6 +319,7 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
       } @else {
         <div class="relative w-full">
           <svg
+            #plotSvg
             class="block w-full"
             [attr.viewBox]="'0 0 ' + width + ' ' + height()"
             [attr.height]="height()"
@@ -326,37 +342,47 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
           @if (type() === 'bar') {
             @for (bar of bars(); track bar.categoryIndex + '-' + bar.seriesIndex) {
               <rect
+                class="dga-chart-bar"
                 [attr.x]="bar.x"
                 [attr.y]="bar.y"
                 [attr.width]="bar.w"
                 [attr.height]="bar.h"
                 [attr.fill]="bar.color"
+                [style.animation-delay.ms]="bar.categoryIndex * 80 + bar.seriesIndex * 40"
                 rx="2"
               />
             }
           } @else {
-            @for (line of visibleLines(); track line.name) {
+            @for (line of visibleLines(); track line.name; let lineIndex = $index) {
               @if (area() && line.areaPath) {
                 <path
+                  class="dga-chart-area"
                   [attr.d]="line.areaPath"
                   [attr.fill]="line.color"
+                  [style.animation-delay.ms]="lineIndex * 120"
                   fill-opacity="var(--dga-chart-area-opacity, 0.18)"
                   stroke="none"
                 />
               }
               <path
+                class="dga-chart-line"
+                [class.dga-chart-line--play]="!!lineLengths()[lineIndex]"
                 [attr.d]="line.linePath"
+                [style.--dga-chart-length.px]="lineLengths()[lineIndex] || 1000"
                 fill="none"
                 [attr.stroke]="line.color"
+                [style.animation-delay.ms]="lineIndex * 120"
                 stroke-width="2"
                 stroke-linejoin="round"
                 stroke-linecap="round"
               />
               @if (dots()) {
-                @for (pt of line.points; track pt.x) {
+                @for (pt of line.points; track pt.x; let pointIndex = $index) {
                   <circle
+                    class="dga-chart-dot"
                     [attr.cx]="pt.x"
                     [attr.cy]="pt.y"
+                    [style.animation-delay.ms]="lineIndex * 120 + pointIndex * 70 + 180"
                     r="4"
                     [attr.fill]="'var(--dga-chart-dot-fill, #fff)'"
                     [attr.stroke]="line.color"
@@ -442,4 +468,4 @@ import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal a
         }
       }
     </div>
-  `,changeDetection:P.OnPush,host:{class:"block w-full","[attr.data-type]":"type()"},styles:[".dga-chart-tooltip{pointer-events:none;z-index:1;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}\n"]}]}],propDecorators:{type:[{type:r.Input,args:[{isSignal:!0,alias:"type",required:!1}]}],series:[{type:r.Input,args:[{isSignal:!0,alias:"series",required:!1}]}],labels:[{type:r.Input,args:[{isSignal:!0,alias:"labels",required:!1}]}],datasets:[{type:r.Input,args:[{isSignal:!0,alias:"datasets",required:!1}]}],legend:[{type:r.Input,args:[{isSignal:!0,alias:"legend",required:!1}]}],tooltip:[{type:r.Input,args:[{isSignal:!0,alias:"tooltip",required:!1}]}],grid:[{type:r.Input,args:[{isSignal:!0,alias:"grid",required:!1}]}],stacked:[{type:r.Input,args:[{isSignal:!0,alias:"stacked",required:!1}]}],smooth:[{type:r.Input,args:[{isSignal:!0,alias:"smooth",required:!1}]}],area:[{type:r.Input,args:[{isSignal:!0,alias:"area",required:!1}]}],dots:[{type:r.Input,args:[{isSignal:!0,alias:"dots",required:!1}]}],colors:[{type:r.Input,args:[{isSignal:!0,alias:"colors",required:!1}]}],tooltipValueLabel:[{type:r.Input,args:[{isSignal:!0,alias:"tooltipValueLabel",required:!1}]}],height:[{type:r.Input,args:[{isSignal:!0,alias:"height",required:!1}]}],label:[{type:r.Input,args:[{isSignal:!0,alias:"label",required:!1}]}]}});export{S as DgaChart};
+  `,changeDetection:D.OnPush,host:{class:"block w-full","[attr.data-type]":"type()"},styles:[".dga-chart-tooltip{position:absolute;pointer-events:none;z-index:2;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}.dga-chart-bar{transform-box:fill-box;transform-origin:center bottom;animation:dga-chart-bar-in .62s cubic-bezier(.22,1,.36,1) both}.dga-chart-line{stroke-dasharray:var(--dga-chart-length, 1000);stroke-dashoffset:var(--dga-chart-length, 1000)}.dga-chart-line--play{animation:dga-chart-line-in .9s cubic-bezier(.22,1,.36,1) forwards}.dga-chart-area{opacity:1;animation:dga-chart-fade-in .7s ease-out both}.dga-chart-dot{transform-box:fill-box;transform-origin:center;animation:dga-chart-dot-in .36s cubic-bezier(.22,1,.36,1) both}.dga-chart-slice{transform-box:view-box;transform-origin:50% 50%;animation:dga-chart-slice-in .7s cubic-bezier(.22,1,.36,1) both}@keyframes dga-chart-bar-in{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dga-chart-line-in{0%{stroke-dashoffset:var(--dga-chart-length)}to{stroke-dashoffset:0}}@keyframes dga-chart-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chart-dot-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes dga-chart-slice-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.dga-chart-bar,.dga-chart-line,.dga-chart-line--play,.dga-chart-area,.dga-chart-dot,.dga-chart-slice{animation:none}.dga-chart-line{stroke-dashoffset:0}}\n"]}]}],ctorParameters:()=>[],propDecorators:{type:[{type:l.Input,args:[{isSignal:!0,alias:"type",required:!1}]}],series:[{type:l.Input,args:[{isSignal:!0,alias:"series",required:!1}]}],labels:[{type:l.Input,args:[{isSignal:!0,alias:"labels",required:!1}]}],datasets:[{type:l.Input,args:[{isSignal:!0,alias:"datasets",required:!1}]}],legend:[{type:l.Input,args:[{isSignal:!0,alias:"legend",required:!1}]}],tooltip:[{type:l.Input,args:[{isSignal:!0,alias:"tooltip",required:!1}]}],grid:[{type:l.Input,args:[{isSignal:!0,alias:"grid",required:!1}]}],stacked:[{type:l.Input,args:[{isSignal:!0,alias:"stacked",required:!1}]}],smooth:[{type:l.Input,args:[{isSignal:!0,alias:"smooth",required:!1}]}],area:[{type:l.Input,args:[{isSignal:!0,alias:"area",required:!1}]}],dots:[{type:l.Input,args:[{isSignal:!0,alias:"dots",required:!1}]}],colors:[{type:l.Input,args:[{isSignal:!0,alias:"colors",required:!1}]}],tooltipValueLabel:[{type:l.Input,args:[{isSignal:!0,alias:"tooltipValueLabel",required:!1}]}],height:[{type:l.Input,args:[{isSignal:!0,alias:"height",required:!1}]}],label:[{type:l.Input,args:[{isSignal:!0,alias:"label",required:!1}]}],plotSvg:[{type:l.ViewChild,args:["plotSvg",{isSignal:!0}]}]}});export{w as DgaChart};

package/fesm2022/a.nemreen-dga-ui-chatbot.mjs

@@ -145,7 +145,7 @@ import*as e from"@angular/core";import{inject as d,DestroyRef as f,Injector as h
         />
       </button>
     }
-  `,isInline:!0,styles:[":host[data-embedded]{display:block;position:absolute;inset:0;pointer-events:none}:host[data-embedded] .dga-chatbot-fab,:host[data-embedded] .dga-chatbot-layer{pointer-events:auto}:host[data-embedded] .dga-chatbot-fab{--dga-local-fab-edge: var(--spacing-lg, .75rem)}:host .dga-chatbot-fab[data-edge=end]{inset-inline-end:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-start:auto}:host .dga-chatbot-fab[data-edge=start]{inset-inline-start:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-end:auto}:host .dga-chatbot-fab[data-edge=left]{left:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));right:auto}:host .dga-chatbot-fab[data-edge=right]{right:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));left:auto}:host .dga-chatbot-panel[data-edge=end]{inset-inline-end:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-start:auto}:host .dga-chatbot-panel[data-edge=start]{inset-inline-start:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-end:auto}:host .dga-chatbot-panel[data-edge=left]{left:var(--dga-fab-edge, var(--spacing-4xl, 2rem));right:auto}:host .dga-chatbot-panel[data-edge=right]{right:var(--dga-fab-edge, var(--spacing-4xl, 2rem));left:auto}:host[data-embedded] .dga-chatbot-panel[data-edge=end],:host[data-embedded] .dga-chatbot-panel[data-edge=start],:host[data-embedded] .dga-chatbot-panel[data-edge=left],:host[data-embedded] .dga-chatbot-panel[data-edge=right]{inset-inline-end:var(--spacing-lg, .75rem);inset-inline-start:auto}@keyframes dga-chatbot-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chatbot-slide-in{0%{opacity:0;transform:translateY(.75rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-scale-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-bubble-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-chatbot-backdrop-in{0%{opacity:0}to{opacity:1}}:host .dga-chatbot-backdrop{animation:dga-chatbot-backdrop-in .18s ease-out both}:host .dga-chatbot-panel[data-animation=fade]{animation:dga-chatbot-fade-in .2s ease-out both}:host .dga-chatbot-panel[data-animation=slide]{animation:dga-chatbot-slide-in .24s cubic-bezier(.16,1,.3,1) both}:host .dga-chatbot-panel[data-animation=scale]{animation:dga-chatbot-scale-in .22s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom var(--dga-chatbot-origin, end)}:host .dga-chatbot-panel[data-animation=scale][data-edge=start],:host .dga-chatbot-panel[data-animation=scale][data-edge=left]{transform-origin:bottom start}:host .dga-chatbot-panel[data-animation=scale][data-edge=end],:host .dga-chatbot-panel[data-animation=scale][data-edge=right]{transform-origin:bottom end}:host .dga-chatbot-bubble{animation:dga-chatbot-bubble-in .18s ease-out both}:host .dga-chatbot-send{border-radius:9999px}@media(prefers-reduced-motion:reduce){:host .dga-chatbot-backdrop,:host .dga-chatbot-panel,:host .dga-chatbot-bubble{animation:none!important}}\n"],dependencies:[{kind:"directive",type:m,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","iconOnly","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:u,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})}e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:e,type:i,decorators:[{type:x,args:[{selector:"dga-chatbot",standalone:!0,imports:[m,u],template:`
+  `,isInline:!0,styles:[":host[data-embedded]{display:block;position:absolute;inset:0;pointer-events:none}:host[data-embedded] .dga-chatbot-fab,:host[data-embedded] .dga-chatbot-layer{pointer-events:auto}:host[data-embedded] .dga-chatbot-fab{--dga-local-fab-edge: var(--spacing-lg, .75rem)}:host .dga-chatbot-fab[data-edge=end]{inset-inline-end:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-start:auto}:host .dga-chatbot-fab[data-edge=start]{inset-inline-start:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));inset-inline-end:auto}:host .dga-chatbot-fab[data-edge=left]{left:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));right:auto}:host .dga-chatbot-fab[data-edge=right]{right:var(--dga-local-fab-edge, var(--dga-fab-edge, 2rem));left:auto}:host .dga-chatbot-panel[data-edge=end]{inset-inline-end:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-start:auto}:host .dga-chatbot-panel[data-edge=start]{inset-inline-start:var(--dga-fab-edge, var(--spacing-4xl, 2rem));inset-inline-end:auto}:host .dga-chatbot-panel[data-edge=left]{left:var(--dga-fab-edge, var(--spacing-4xl, 2rem));right:auto}:host .dga-chatbot-panel[data-edge=right]{right:var(--dga-fab-edge, var(--spacing-4xl, 2rem));left:auto}:host[data-embedded] .dga-chatbot-panel[data-edge=end],:host[data-embedded] .dga-chatbot-panel[data-edge=start],:host[data-embedded] .dga-chatbot-panel[data-edge=left],:host[data-embedded] .dga-chatbot-panel[data-edge=right]{inset-inline-end:var(--spacing-lg, .75rem);inset-inline-start:auto}@keyframes dga-chatbot-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chatbot-slide-in{0%{opacity:0;transform:translateY(.75rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-scale-in{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-chatbot-bubble-in{0%{opacity:0;transform:translateY(.35rem)}to{opacity:1;transform:translateY(0)}}@keyframes dga-chatbot-backdrop-in{0%{opacity:0}to{opacity:1}}:host .dga-chatbot-backdrop{animation:dga-chatbot-backdrop-in .18s ease-out both}:host .dga-chatbot-panel[data-animation=fade]{animation:dga-chatbot-fade-in .2s ease-out both}:host .dga-chatbot-panel[data-animation=slide]{animation:dga-chatbot-slide-in .24s cubic-bezier(.16,1,.3,1) both}:host .dga-chatbot-panel[data-animation=scale]{animation:dga-chatbot-scale-in .22s cubic-bezier(.16,1,.3,1) both;transform-origin:bottom var(--dga-chatbot-origin, end)}:host .dga-chatbot-panel[data-animation=scale][data-edge=start],:host .dga-chatbot-panel[data-animation=scale][data-edge=left]{transform-origin:bottom start}:host .dga-chatbot-panel[data-animation=scale][data-edge=end],:host .dga-chatbot-panel[data-animation=scale][data-edge=right]{transform-origin:bottom end}:host .dga-chatbot-bubble{animation:dga-chatbot-bubble-in .18s ease-out both}:host .dga-chatbot-send{border-radius:9999px}@media(prefers-reduced-motion:reduce){:host .dga-chatbot-backdrop,:host .dga-chatbot-panel,:host .dga-chatbot-bubble{animation:none!important}}\n"],dependencies:[{kind:"directive",type:m,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","effect","iconOnly","fullWidth","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:u,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]}],changeDetection:e.ChangeDetectionStrategy.OnPush})}e.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:e,type:i,decorators:[{type:x,args:[{selector:"dga-chatbot",standalone:!0,imports:[m,u],template:`
     @if (open()) {
       <div
         class="dga-chatbot-layer inset-0 z-urgent"

package/fesm2022/a.nemreen-dga-ui-cookies.mjs

@@ -149,7 +149,7 @@ import*as s from"@angular/core";import{inject as y,DestroyRef as S,ElementRef as
         </div>
       </div>
     }
-  `,isInline:!0,styles:["@keyframes dga-cookie-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-cookie-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}.dga-cookies-panel--open{animation:dga-cookie-in .32s cubic-bezier(.22,1,.36,1) both}.dga-cookies-panel--closing{animation:dga-cookie-out .2s ease-in both;pointer-events:none}.dga-cookies-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent) transparent}.dga-cookies-body::-webkit-scrollbar{width:4px}.dga-cookies-body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent)}@media(prefers-reduced-motion:reduce){.dga-cookies-panel--open,.dga-cookies-panel--closing{animation:none!important}}\n"],dependencies:[{kind:"directive",type:h,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","iconOnly","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:v,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]},{kind:"component",type:k,selector:"dga-icon-badge",inputs:["size","appearance"]},{kind:"directive",type:x,selector:"a[dgaLink]",inputs:["variant","dropdown"]},{kind:"component",type:N,selector:"dga-switch",inputs:["checked","size","label","disabled"],outputs:["checkedChange","changed"]}],changeDetection:s.ChangeDetectionStrategy.OnPush})}s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:s,type:n,decorators:[{type:q,args:[{selector:"dga-cookies",standalone:!0,imports:[h,v,k,x,N],template:`
+  `,isInline:!0,styles:["@keyframes dga-cookie-in{0%{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes dga-cookie-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}.dga-cookies-panel--open{animation:dga-cookie-in .32s cubic-bezier(.22,1,.36,1) both}.dga-cookies-panel--closing{animation:dga-cookie-out .2s ease-in both;pointer-events:none}.dga-cookies-body{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent) transparent}.dga-cookies-body::-webkit-scrollbar{width:4px}.dga-cookies-body::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--dga-border-default, #d0d5dd) 70%,transparent)}@media(prefers-reduced-motion:reduce){.dga-cookies-panel--open,.dga-cookies-panel--closing{animation:none!important}}\n"],dependencies:[{kind:"directive",type:h,selector:"button[dgaButton], a[dgaButton]",inputs:["variant","size","effect","iconOnly","fullWidth","cooldownMs","loading","dgaButtonClass"]},{kind:"component",type:v,selector:"dga-icon",inputs:["name","glyph","size","tone","label"]},{kind:"component",type:k,selector:"dga-icon-badge",inputs:["size","appearance"]},{kind:"directive",type:x,selector:"a[dgaLink]",inputs:["variant","dropdown"]},{kind:"component",type:N,selector:"dga-switch",inputs:["checked","size","label","disabled"],outputs:["checkedChange","changed"]}],changeDetection:s.ChangeDetectionStrategy.OnPush})}s.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:s,type:n,decorators:[{type:q,args:[{selector:"dga-cookies",standalone:!0,imports:[h,v,k,x,N],template:`
     @if (mounted()) {
       @if (hasOverlay()) {
         <div